/* Clearpath-inspired atmosphere, with Enharmonoche's blue-violet identity. */
:root{--paper:#f4f4f0;--ink:#252941;--muted:#666b7c;--accent:#626d9e;--faint:#9295a4}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{font-size:17px}
::selection{background:#bfc9e5;color:#252941}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:6px}
.grain{opacity:.19}
.nav{padding:29px 5%;color:#fff;transition:padding .4s,background .4s,color .4s,box-shadow .4s;letter-spacing:.075em;font-size:12px}
.nav.scrolled{padding-top:15px;padding-bottom:15px;background:rgba(244,244,240,.94);backdrop-filter:blur(16px);color:var(--ink);box-shadow:0 1px 0 #25294110}
.nav.on-dark{color:#fff;background:rgba(32,40,63,.9)}
.brand{font-size:25px;letter-spacing:.035em;gap:13px}
.brand .dot{background:currentColor}
.links{opacity:1;gap:32px}
.links a:not(.pill){font-size:12px;letter-spacing:.1em;transition:opacity .25s}
.pill{font-size:12px;letter-spacing:.09em;padding:14px 22px;gap:26px;box-shadow:none;min-height:44px;line-height:1.3}
.pill.solid{background:var(--accent)}
.pill:hover{background:#dce2ec;color:var(--ink);transform:translateY(-2px)}
.textlink{font-size:12px;letter-spacing:.09em;gap:24px;min-height:44px}
.hero{min-height:780px;height:100svh;max-height:1200px;padding:0 5%;background:#667a9a;color:#fff;isolation:isolate}
.hero-bg{inset:0;overflow:hidden;background:#738da8}
.hero-bg .wash{inset:-12%;background:radial-gradient(ellipse at 16% 70%,#918cc0 0,transparent 49%),radial-gradient(ellipse at 75% 20%,#9ed0dc 0,transparent 54%),linear-gradient(130deg,#8295ab,#52668a);animation:breath 18s ease-in-out infinite alternate}
.hero-bg img{left:54%;top:3%;height:151%;max-width:none;transform:translateX(-35%);filter:blur(1px) saturate(.64);opacity:.94;mix-blend-mode:normal;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 85%,transparent)}
.hero-bg .fade{background:radial-gradient(ellipse at 5% 60%,#505e914d,transparent 55%),linear-gradient(90deg,#6a76a54d,transparent 48%,#3043633d),linear-gradient(0deg,#354a6dc9,transparent 65%);backdrop-filter:blur(.25px)}
.hero-bg::after{content:"";position:absolute;inset:-10%;background:radial-gradient(ellipse at 24% 72%,#e5d6bf7d,transparent 27%),radial-gradient(ellipse at 80% 8%,#c0e3e978,transparent 42%);filter:blur(34px);mix-blend-mode:screen;pointer-events:none;animation:breath 15s ease-in-out infinite alternate-reverse}
.hero-inner{width:100%;gap:6%;padding-bottom:9vh;align-items:flex-end}
.hero h1{font-size:clamp(80px,10.2vw,158px);line-height:.91;letter-spacing:-.045em;max-width:8.9ch;color:#fff;text-wrap:balance}
.hero h1 em{color:inherit;font-style:normal}
.hero-side{width:31%;max-width:360px;gap:29px;padding-bottom:3px}
.hero-side p{color:#fff;opacity:.94;font-size:16px;line-height:1.65}
.hero-side .textlink{background:#abbec280;color:#fff;border-radius:30px;padding:12px 20px;backdrop-filter:blur(12px);transition:background .3s;white-space:nowrap}
.hero-side .textlink:hover{background:#abbec2c9}
.hero-note{position:absolute;left:5%;bottom:27px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;opacity:.7;z-index:3}
.hero-scroll{position:absolute;right:5%;bottom:24px;z-index:3;font-size:13px;letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;gap:14px}
.hero-scroll span{font-size:20px}
.atmosphere-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}
.atmosphere-lines path{fill:none;stroke:#fff;stroke-width:1.35;opacity:.65;vector-effect:non-scaling-stroke;stroke-linecap:round}
.switch{height:180vh;background:var(--paper)}
.switch-stage{height:100svh;min-height:580px}
.fog{background:radial-gradient(ellipse at 15% 70%,#aca8c4,transparent 55%),radial-gradient(ellipse at 85% 30%,#86b7c7,transparent 65%),linear-gradient(#526b91,#839aa9);transition:opacity .15s}
.fog img{width:110%;max-width:none;opacity:.26;filter:blur(30px) saturate(.5)}
.fogtop{background:linear-gradient(#354a6d 0%,transparent 65%);opacity:.55}
.switch-copy{width:100%;max-width:980px;gap:36px}
.switch-copy .stack{min-height:185px}
.switch-copy h2{font-size:clamp(32px,4.2vw,60px);font-weight:400;line-height:1.13;letter-spacing:-.045em;text-wrap:balance}
.switch-copy .sub{font-size:16px;color:#fff;max-width:40ch}
.knob{width:66px;height:36px;background:#ffffff38}
.knob::after{width:28px;height:28px}
.knob-label{font-size:13px;letter-spacing:.12em}
.section{padding:110px 5%;max-width:1600px;margin:auto}
.eyebrow{font-size:12px;letter-spacing:.1em;gap:10px;margin-bottom:28px}
#paths{padding-top:90px;padding-bottom:50px}
.paths-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:36px}
.paths-head h2{font-size:clamp(40px,4.5vw,65px);line-height:1.04;max-width:15ch;letter-spacing:-.035em}
.paths-head p{color:var(--muted);max-width:32ch;margin:0 0 5px;font-size:16px}
.cards{gap:18px}
.card{aspect-ratio:3/4;min-height:410px;padding:30px;border-radius:7px;background:#748c9d}
.card img{filter:blur(2px) saturate(.65);opacity:.7;transform:scale(1.035)}
.card:hover img{transform:scale(1.085)}
.card .tint{opacity:.5}
.c1 .tint{background:linear-gradient(#84a9b5,#456f86)}
.c2{background:#afb0ba}
.c2 img{object-fit:cover;object-position:50% 15%;filter:blur(.5px) saturate(.5);opacity:.8}
.c2 .tint{background:linear-gradient(#a9b6c433,#656987);opacity:.4}
.c3 .tint{background:linear-gradient(#9b99b7,#565a89)}
.card .shade{background:linear-gradient(transparent 12%,#25344815 35%,#26354bda)}
.card h3{font-size:clamp(31px,3.1vw,48px);letter-spacing:-.025em;max-width:12ch}
.card p{font-size:15px;line-height:1.6;max-width:30ch;color:#fff;opacity:.9}
.card-index{position:absolute;top:25px;left:30px;font-size:12px;letter-spacing:.1em;z-index:2}
.card .textlink{border-top:1px solid #ffffff40;margin-top:10px;padding-top:17px;justify-content:space-between}
.philo{padding:125px 7% 150px;flex-direction:column;align-items:center;gap:10px}
.philo h2{font-size:clamp(30px,3.7vw,56px);font-weight:400;line-height:1.22;max-width:28ch;letter-spacing:-.035em}
.philo h2 .w{color:var(--ink)}
.studio{gap:9%;padding-top:30px;padding-bottom:140px}
.collage{min-height:580px;flex-basis:47%}
.collage .p1{width:78%;height:90%;object-fit:cover;object-position:50% 5%;background:linear-gradient(140deg,#d4d6da,#9faac0);box-shadow:none;filter:saturate(.65)}
.collage .p2{width:49%;height:48%;bottom:-10px;right:0;filter:saturate(.6);mix-blend-mode:normal;border:7px solid var(--paper);box-shadow:none}
.studio-copy h2{font-size:clamp(44px,5vw,76px);letter-spacing:-.03em}
.studio-copy .eyebrow{margin-bottom:0}
.studio-copy p:not(.eyebrow){font-size:16px;line-height:1.75}
.studio-copy .textlink{border-bottom:1px solid #626d9e66;padding-bottom:5px}
.how{height:230vh;background:#e8ecec}
.how-stage{padding:110px 8%;height:100svh;min-height:700px}
.how-title{font-size:clamp(70px,10vw,150px);letter-spacing:-.04em;margin-bottom:65px}
.how-row{gap:8%;min-height:260px}
.how-nums{flex-basis:33%;height:260px}
.num{font-size:clamp(170px,20vw,290px);color:#7d8d9f;line-height:.85;opacity:0}
.num:first-child,.step:first-child{opacity:1;transform:none}
.how-steps{height:260px;padding-top:10px}
.step h3{font-size:clamp(38px,4.2vw,62px);letter-spacing:-.025em}
.step p{font-size:17px;line-height:1.65}
.how .atmosphere-lines path{stroke:#7d8d9f;opacity:.3}
.step-progress{display:flex;gap:10px;margin-top:38px;position:relative;z-index:2}
.step-progress span{height:2px;width:44px;background:#7d8d9f38;transition:background .4s}
.step-progress span.active{background:#596b83}
#pricing{padding-top:130px;padding-bottom:100px}
.pricing-head{gap:24px;margin-bottom:46px}
.pricing-head .eyebrow{margin:0}
.pricing-head h2{font-size:clamp(44px,5vw,76px);letter-spacing:-.035em;max-width:18ch}
.pricing-head p{font-size:16px;max-width:45ch}
.regions{margin-top:12px;box-shadow:none;border:1px solid #2529410d;background:#e9eceb;padding:5px}
.regions button{font-size:12px;letter-spacing:.06em;padding:13px 21px;min-height:44px;text-transform:none}
.regions button[aria-pressed=true]{background:#fff;color:var(--ink);box-shadow:0 2px 5px #2529410a}
.plans{gap:18px}
.plan{box-shadow:none;border:1px solid #2529410d;border-radius:7px;padding:32px;gap:18px}
.plan:last-child{background:#e8ecf1;border-color:#626d9e30}
.plan h3{font-size:37px;letter-spacing:-.025em}
.plan .price{flex-wrap:wrap;gap:8px;margin:6px 0 10px;min-height:76px;padding-bottom:25px;border-bottom:1px solid #25294115}
.plan .amount{font-size:clamp(32px,3.6vw,55px);color:var(--ink);letter-spacing:-.035em}
.plan .unit,.plan .was{font-size:13px}
.plan ul{font-size:14px;gap:14px;margin-bottom:18px}
.plan li::before{width:13px;height:13px;flex-basis:13px;border:0;border-radius:0;background:none;content:"✓";color:var(--accent)}
.plan .pill{background:#edf0f2;align-self:stretch;justify-content:space-between}
.plan .pill.solid{background:var(--accent);color:#fff}
.quote{border-radius:0;margin-top:20px;padding:170px 8%;min-height:650px;display:flex;align-items:center}
.quote .bg img{filter:blur(12px) saturate(.4);opacity:.6}
.quote .bg::after{background:radial-gradient(ellipse at 20% 80%,#9e94b66b,transparent 60%),linear-gradient(130deg,#293b5270,#253049bd)}
.quote-inner{max-width:1000px;margin:auto;align-items:center;text-align:center;gap:36px}
.quote h2{font-size:clamp(46px,6.2vw,90px);letter-spacing:-.03em}
.quote h2 em{color:#c5d9e5}
.quote p{font-size:13px;color:#ffffffa6}
.cta{padding:140px 24px 120px;gap:30px;background:radial-gradient(ellipse at 50% 110%,#dce3ec,transparent 70%)}
.cta h2{font-size:clamp(60px,8vw,116px);letter-spacing:-.045em;max-width:10ch}
.cta p{font-size:16px}
footer{padding:30px 5%;font-size:12px}
footer .brand{font-size:24px}
.menu-toggle{display:none;border:1px solid #ffffff50;background:transparent;color:inherit;font:inherit;padding:10px 13px;border-radius:25px;min-height:44px}
.skip-link{position:fixed;top:8px;left:8px;transform:translateY(-200%);z-index:100;background:white;color:var(--ink);padding:10px 16px}
.skip-link:focus{transform:none}
.rise{transition:transform 1s cubic-bezier(.2,.7,.2,1),filter 1s}
.rise.reveal-pending{transform:translateY(22px);filter:blur(4px)}
.hero h1{animation:arrive 1.6s both}
.hero-side{animation:arrive 1.6s .2s both}
@keyframes arrive{from{transform:translateY(22px);filter:blur(12px);opacity:0}to{transform:none;filter:blur(0);opacity:1}}
@keyframes breath{from{transform:scale(1) translate3d(-1%,0,0)}to{transform:scale(1.07) translate3d(2%,1%,0)}}
@media(min-width:1600px){.hero-inner{max-width:1450px;margin:0 auto}.hero-bg img{left:55%}}
@media(max-width:1050px){.links{gap:20px}.nav{padding:22px 4%}.hero{padding:0 4%;min-height:720px}.hero h1{font-size:11vw}.hero-side{width:34%}.hero-side p{font-size:15px}.hero-bg img{left:48%;height:140%;top:8%}.plan{padding:26px 22px}.plan .price{min-height:105px}.collage{min-height:500px}}
@media(max-width:820px){
 .nav{padding:18px 22px}.brand{font-size:22px}.menu-toggle{display:block;font-size:12px}.nav.scrolled .menu-toggle{border-color:#25294130}
 .links{display:none;position:absolute;top:76px;left:16px;right:16px;padding:22px;background:#f4f4f0;color:var(--ink);border-radius:10px;box-shadow:0 15px 35px #202a4020;align-items:stretch;gap:10px}
 .links.open{display:flex;flex-direction:column}.links a:not(.pill){display:block;padding:12px 8px;font-size:14px}.links .pill{justify-content:space-between;background:var(--accent);color:white}
 .hero{height:100svh;min-height:820px;padding:0 24px}.hero-inner{flex-direction:column;gap:26px;padding-bottom:85px;align-items:flex-start}
 .hero h1{font-size:clamp(68px,12vw,100px);max-width:9ch;line-height:.94}.hero-side{width:100%;max-width:350px;gap:20px}.hero-side p{font-size:15px;line-height:1.6}
 .hero-bg img{height:105%;left:45%;top:3%;transform:translateX(-35%);opacity:.85}.hero-bg .fade{background:linear-gradient(0deg,#354a6de8,transparent 95%),linear-gradient(90deg,#6a76a522,transparent)}
 .hero-note{left:24px;bottom:25px;font-size:10px}.hero-scroll{right:24px;font-size:10px}
 .section{padding:80px 24px}.paths-head{align-items:flex-start;flex-direction:column;gap:22px}.paths-head h2{font-size:48px}.paths-head p{max-width:35ch}
 .cards{gap:18px}.card{aspect-ratio:4/3;min-height:370px}.card h3{font-size:40px}.card p{max-width:36ch}.card .textlink{max-width:100%}
 .switch{height:155vh}.switch-copy{padding:0 24px}.switch-copy .a,.switch-copy .b{padding:0}.switch-copy .stack{min-height:190px}.switch-copy h2{font-size:clamp(30px,5.8vw,44px)}.switch-copy .sub{font-size:15px}.knob-label{font-size:10px}
 .philo{padding:90px 26px}.philo h2{font-size:32px}.studio{gap:50px;padding-top:20px;padding-bottom:90px}.collage{min-height:520px;width:100%;flex:none;max-width:550px}.collage .p1{width:80%}.collage .p2{width:48%}.studio-copy{gap:22px}.studio-copy h2{font-size:52px}
 .how{height:auto}.how-stage{position:relative;height:auto;min-height:0;padding:80px 24px}.how-title{font-size:64px;margin-bottom:40px}.how-row{display:block;min-height:0}.how-nums{display:none}.how-steps{height:auto;padding:0}.step{position:relative!important;opacity:1!important;transform:none!important;filter:none!important;padding:26px 0 30px 58px;border-top:1px solid #7d8d9f40;gap:12px}.step::before{content:attr(data-number);position:absolute;left:0;top:30px;font-family:var(--serif);font-size:32px;color:#7d8d9f}.step h3{font-size:34px}.step p{font-size:16px}.step-progress{display:none}
 #pricing{padding:90px 24px}.pricing-head h2{font-size:48px}.regions{width:100%;flex-wrap:nowrap}.regions button{padding:12px 10px;font-size:12px;flex:1}.plan{padding:30px}.plan .price{min-height:0}.plan .amount{font-size:48px}.plan .desc{min-height:0}.plan ul{font-size:15px}.plans{gap:16px}
 .quote{padding:110px 26px;min-height:540px;border-radius:0}.quote h2{font-size:50px}.cta{padding:100px 24px 90px}.cta h2{font-size:76px}footer{padding:28px 24px;gap:16px}
}
@media(max-width:400px){.hero h1{font-size:68px}.hero{min-height:800px}.hero-side{max-width:310px}.hero-note{max-width:180px}.switch-copy .stack{min-height:205px}.collage{min-height:420px}.plan{padding:25px}.plan .amount{font-size:42px}.regions button{padding:12px 8px}}
/* All content remains readable without JavaScript or motion. */
html:not(.motion) .switch{height:auto}
html:not(.motion) .switch-stage{position:relative;height:680px}
html:not(.motion) .switch-copy .a{display:none}
html:not(.motion) .switch-copy .b{opacity:1}
html:not(.motion) .switch-copy .b h2{color:white}
html:not(.motion) .how{height:auto}
html:not(.motion) .how-stage{position:relative;height:auto;min-height:0}
html:not(.motion) .how-nums{display:none}
html:not(.motion) .how-steps{height:auto}
html:not(.motion) .step{position:static;opacity:1;transform:none;margin-bottom:35px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.rise{filter:none!important;transform:none!important}.atmosphere-lines{display:none}}
.motion .step,.motion .num{transition:opacity .5s ease,transform .65s cubic-bezier(.2,.7,.2,1)}
.motion .hero .atmosphere-lines path{stroke-dasharray:1;stroke-dashoffset:1;animation:unfold 3.8s .35s cubic-bezier(.2,.6,.3,1) forwards}
.motion .hero .atmosphere-lines path:nth-child(2){animation-delay:.65s}
@keyframes unfold{to{stroke-dashoffset:0}}
/* Motion is a scroll-led sequence: portrait → thread → switch → clarity. */
.opening{position:relative;background:var(--paper);isolation:isolate}
.opening-atmosphere{position:absolute;inset:0;pointer-events:none;z-index:-1}
.opening-atmosphere .hero-bg{position:sticky;top:0;height:100svh;min-height:700px;inset:auto;top:0;overflow:hidden;will-change:opacity}
.opening .hero{background:transparent;isolation:auto}
.opening .hero-bg img{will-change:transform,filter,opacity}
.opening .switch{background:transparent;height:235vh}
.opening #fog{display:none}
.hero-inner{will-change:transform}
.motion .hero h1,.motion .hero-side{animation:none}
.scroll-word{display:inline-block;will-change:filter,opacity;white-space:pre}
.nav.scrolled{background:transparent;backdrop-filter:none;box-shadow:none;color:#fff;padding-top:29px;padding-bottom:29px}
.nav.on-paper{color:var(--accent)}
.nav.on-paper .pill{background:var(--accent);color:#fff}
.nav.on-dark{background:transparent;backdrop-filter:none;color:#fff}
.nav::before{content:"";position:absolute;z-index:-1;inset:0 0 -25px;background:linear-gradient(var(--paper),#f4f4f000);opacity:0;transition:opacity .5s;pointer-events:none}
.nav.on-paper::before{opacity:.93}
.opening-thread{position:absolute;top:0;left:0;width:100%;pointer-events:none;z-index:1;overflow:visible}
.opening-thread path{fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.83}
.opening-thread path+path{stroke-width:1;opacity:.5}
.knob::after{transform:translateX(var(--knob-shift,0px));transition:none}
.knob.on::after{transform:translateX(var(--knob-shift,30px))}
.knob.dot::after{transform:translateX(15px) scale(var(--dot-scale,1));transition:none}
.switch-copy .sub,.knob-label{transition:none}
.switch-copy .stack{min-height:185px}
.rings svg{will-change:transform}
.motion .rise{transition:none}
.motion .card{transition:box-shadow .5s}
.motion .card .body{height:100%}
.card h3{margin-bottom:auto}
.card .body p{padding-top:24px}
.card-index{display:none}
.card .textlink{flex-shrink:0}
.motion .philo h2 .w{color:var(--ink);will-change:opacity,filter}
.motion .how{height:340vh}
.how-stage{min-height:660px}
.how-row{flex-direction:row-reverse;align-items:center}
.how-nums{flex:0 0 40%;height:290px;display:flex;align-items:flex-start;overflow:hidden;font-family:var(--sans);font-size:clamp(180px,23vw,340px);font-weight:400;letter-spacing:-.075em;line-height:1;color:#7d8d9f}
.num-zero{display:block}
.number-window{height:1em;overflow:hidden;padding-right:.07em}
.number-reel{will-change:transform}
.number-reel span{height:1em;display:block}
.how-steps{flex:1 1 0;height:240px}
.motion .step{transition:none;will-change:opacity,filter,transform}
.how .atmosphere-lines{z-index:0}
.how .atmosphere-lines path{stroke-width:1;opacity:.43}
.how-title{font-size:clamp(70px,9vw,135px);margin-bottom:55px}
.collage .p1,.collage .p2{will-change:transform}
.quote .atmosphere-lines path{opacity:.55;stroke-width:1}
@media(max-width:820px){
 .nav.scrolled{padding:18px 22px}.nav.on-paper .menu-toggle{border-color:#626d9e55}
 .opening-atmosphere .hero-bg{min-height:820px}.opening .switch{height:195vh}
 .switch-copy .stack{min-height:200px}
 .motion .how{height:auto}.how-row{display:block}.how-nums{display:none}
 .how-stage{min-height:0}.how-steps{height:auto}.step{will-change:auto}
 .card .body p{padding-top:24px}.how-title{font-size:64px}
}
@media(prefers-reduced-motion:reduce){.opening-thread{display:none}.opening .switch{height:auto}.opening-atmosphere .hero-bg{position:relative}.opening #fog{display:block}.nav.scrolled{color:var(--ink);background:var(--paper)}.motion .how{height:auto}}
html:not(.motion) .opening .switch{height:auto}
html:not(.motion) .opening #fog{display:block}
html:not(.motion) .opening-thread{display:none}
/* GSAP owns motion; avoid full-screen repaint effects and competing CSS loops. */
.hero-bg .portrait-bloom{opacity:0;filter:blur(18px) saturate(.64);pointer-events:none}
.hero-bg .wash,.hero-bg::after{animation:none}
.hero-bg .fade{backdrop-filter:none}
.grain{mix-blend-mode:normal;opacity:.12}
.scroll-word,.motion .philo h2 .w{will-change:auto}
.opening .hero-bg img{will-change:transform,opacity}
.motion .step{will-change:transform,opacity}
.knob{flex:0 0 66px}

/* Full-precision vectors, with a consistent hairline weight at desktop scale. */
.opening-thread{shape-rendering:geometricPrecision;transform-origin:0 0}
.opening-thread path{stroke-width:1.75;stroke-linejoin:round;stroke-linecap:round;opacity:.88}
.opening-thread path+path{stroke-width:1.6;opacity:.65}
@media(max-width:820px){.opening-thread path{stroke-width:1.45}.opening-thread path+path{stroke-width:1.35}}

.opening-thread path{vector-effect:none}

/* Original brand artwork inherits the header's light/dark scroll tone. */
.nav .brand-mark{display:block;width:34px;height:34px;flex:0 0 34px;background:currentColor;-webkit-mask:url("img/enharmonoche-logo-mark.png") center/contain no-repeat;mask:url("img/enharmonoche-logo-mark.png") center/contain no-repeat}
@media(max-width:820px){.nav .brand-mark{width:30px;height:30px;flex-basis:30px}}

.hero-brand{display:flex;flex-direction:column;align-items:flex-start;gap:8px;color:#fff}
.hero-brand .brand-mark{display:block;width:46px;height:46px;background:currentColor;-webkit-mask:url("img/enharmonoche-logo-mark.png") center/contain no-repeat;mask:url("img/enharmonoche-logo-mark.png") center/contain no-repeat}
.hero-wordmark{font-family:var(--serif);font-size:28px;line-height:1.1;letter-spacing:.025em}
.nav > .brand{min-width:44px;min-height:44px}
@media(max-width:820px){.hero-brand{gap:6px}.hero-brand .brand-mark{width:38px;height:38px}.hero-wordmark{font-size:25px}}
/* Feathered glass softens the passing line tails without blurring navigation. */
.nav::before{
  content:"";position:absolute;inset:0 0 -42px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(115,141,168,.16),rgba(115,141,168,0));
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 38%,rgba(0,0,0,.7) 64%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 38%,rgba(0,0,0,.7) 64%,transparent 100%);
  opacity:1;transition:background .4s;
}
.nav.on-paper::before{opacity:1;background:linear-gradient(180deg,rgba(244,244,240,.7),rgba(244,244,240,0))}
.nav.on-dark::before{background:linear-gradient(180deg,rgba(37,48,73,.3),rgba(37,48,73,0))}
@media(max-width:820px){.nav::before{bottom:-28px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}
/* A balanced, larger stacked signature above the introduction. */
.hero-brand{width:190px;align-items:center;gap:12px}
.hero-brand .brand-mark{width:190px;height:190px;-webkit-mask-size:111.8% 111.8%;mask-size:111.8% 111.8%}
.hero-wordmark{display:block;white-space:nowrap;font-size:31.51px;letter-spacing:0;line-height:1.1}
@media(max-width:820px){.hero-brand{width:150px;gap:9px}.hero-brand .brand-mark{width:150px;height:150px;-webkit-mask-size:111.8% 111.8%;mask-size:111.8% 111.8%}.hero-wordmark{font-size:24.875px}.hero{min-height:960px}}
/* Desktop hero: studio introduction on the left, headline on the right. */
@media(min-width:821px){.hero-inner{flex-direction:row-reverse}}
@media(min-width:821px){.hero h1{text-align:right}}

/* The journey resolves into the brand mark, replacing the toggle. */
.journey-logo{display:block;flex:0 0 76px;width:76px;height:76px;color:#fff;background:currentColor;-webkit-mask:url("img/enharmonoche-logo-mark.png") center/111.8% 111.8% no-repeat;mask:url("img/enharmonoche-logo-mark.png") center/111.8% 111.8% no-repeat}
.knobrow .knob-label{right:calc(50% + 60px)}
@media(max-width:820px){.journey-logo{width:64px;height:64px;flex-basis:64px}.knobrow .knob-label{right:calc(50% + 48px)}}
/* One continuous atmosphere; sections no longer reset to separate white bands. */
:root{--paper:#f7f8fa}
main{isolation:isolate}
.page-atmosphere{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--paper)}
.page-glow{position:absolute;width:125vw;height:135vh;opacity:.7;pointer-events:none}
.page-glow.violet{left:-40vw;top:-20vh;background:radial-gradient(ellipse,#918cc0 0%,rgba(145,140,192,.65) 25%,transparent 70%)}
.page-glow.blue{right:-40vw;bottom:-25vh;background:radial-gradient(ellipse,#9ed0dc 0%,rgba(115,141,168,.6) 25%,transparent 70%)}
.page-light{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,rgba(255,255,255,.25),transparent 70%)}
.opening,.opening .switch,.how,.how-stage,#paths,.philo,#studio,#pricing,.quote,.cta,footer{background:transparent}
.plan{background:rgba(255,255,255,.72)}
.plan:last-child{background:rgba(229,235,246,.72)}
.quote{color:var(--ink)}
.quote>.bg{display:none}
.quote h2 em{color:var(--accent)}
.quote p{color:var(--muted)}
.quote .atmosphere-lines path{stroke:#7b8eaf;opacity:.42}
.collage .p2{border-color:rgba(247,248,250,.72)}
@media(max-width:820px){.page-glow{width:175vw;height:130vh}.page-glow.violet{left:-65vw}.page-glow.blue{right:-65vw}}
/* Size the numeral viewport from its type, rather than a fixed 290px crop. */
@media(min-width:821px){
  .how-nums{font-size:clamp(150px,min(23vw,34svh),340px);height:1.15em;line-height:1.1;overflow:visible}
  .number-window{height:1.15em}
  .number-reel span{height:1.15em;line-height:1.1}
}

/* About shares the home hero, with its own introductory copy and journey. */
.links a[aria-current="page"]{text-decoration:underline;text-underline-offset:7px}
[data-page="about"] .opening-atmosphere .hero-bg{position:absolute;inset:0;height:100%;min-height:0}
[data-page="about"] .hero{padding-top:130px}
.about-intro{display:grid;gap:14px}
.hero-side .about-eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.15em;opacity:.75}
.about-thread{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:hidden}
.about-thread path{fill:none;stroke:#fff;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;opacity:.8;vector-effect:non-scaling-stroke}
.about-thread path+path{stroke-width:1.6;opacity:.5}
@media(max-width:820px){[data-page="about"] .hero{height:auto;min-height:100svh;padding-top:145px}.about-thread{opacity:.65}.about-thread path{stroke-width:1.3}}
@media(prefers-reduced-motion:reduce){.about-thread{opacity:.5}}

/* Three flat portrait panels, with native document scrolling. */
.founders{position:relative;color:#fff;background:transparent}
.founders-stage{position:relative;min-height:850px;min-height:max(850px,100svh);box-sizing:border-box;padding:115px 5% 60px;overflow:hidden}
.founders-heading{position:relative;z-index:4;pointer-events:none}
.founders-heading>p{font-size:12px;letter-spacing:.12em;margin:0 0 16px;color:#e1e5f1}
.founders-heading h2{font-size:clamp(42px,4.2vw,65px);line-height:1.02;letter-spacing:-.035em}
.founders-heading em{font-weight:400;color:#e1e5f1}
.founders-gallery{display:flex;gap:24px;margin:45px auto;max-width:1100px;touch-action:pan-y}
.founder-card{position:relative;flex:1;height:460px;overflow:hidden;background:linear-gradient(130deg,#a9bac8,#535c85);color:#fff}
.founder-card:nth-child(3n+2){background:linear-gradient(130deg,#c8becf,#73729e)}
.founder-card:nth-child(3n+3){background:linear-gradient(130deg,#99bac1,#42657b)}
.founder-card img{position:absolute;width:130%;height:140%;object-fit:contain;right:-25%;top:0;pointer-events:none;user-select:none;-webkit-user-drag:none}
.founder-card:nth-child(3n+2) img{transform:scaleX(-1)}
.founder-card:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,#14243ab3);pointer-events:none}
.founder-card>div{position:absolute;bottom:26px;left:24px;z-index:1}
.founder-card p{font-size:12px;letter-spacing:.1em;margin:0 0 7px}
.founder-card h3{font-size:58px;line-height:1;letter-spacing:-.035em}
.gallery-pick{position:absolute;inset:0;z-index:2;border:0;background:none;cursor:pointer}
.gallery-pick:focus-visible{outline:2px solid white;outline-offset:-6px}
.founders-controls{display:none}
.gallery-ready .founders-gallery{position:relative;display:block;height:550px;max-width:950px;margin:35px auto 15px}
.gallery-ready .founder-card{position:absolute;top:15px;left:50%;width:350px;height:520px;margin-left:-175px;transform-origin:center;transition:transform .65s cubic-bezier(.22,.68,0,1);}
.gallery-ready .founder-card[data-slot="center"]{transform:translateX(0) scale(1);z-index:3}
.gallery-ready .founder-card[data-slot="left"]{transform:translateX(-240px) scale(.8);z-index:1}
.gallery-ready .founder-card[data-slot="right"]{transform:translateX(240px) scale(.8);z-index:2}
.gallery-ready .founders-controls{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12px}
.founders-controls>div{display:flex;gap:24px}
.founder-select{font:inherit;font-size:15px;color:#d5dce9;background:none;border:0;padding:12px 0;cursor:pointer}
.founder-select[aria-pressed="true"]{color:#fff;text-decoration:underline;text-underline-offset:6px}
.founder-select:focus-visible{outline:2px solid white;outline-offset:6px}
.founder-count{font-variant-numeric:tabular-nums;letter-spacing:.14em}
.founders-hint{color:#d5dce9}
@media(max-width:820px){
 .founders-stage{min-height:0;padding:95px 24px 45px}
 .founders-heading h2{font-size:44px}.founders-heading em{display:block}
 .founders-gallery{flex-direction:column}.founder-card{flex:auto;height:420px}
 .gallery-ready .founders-gallery{height:395px;margin:30px -24px 20px}
 .gallery-ready .founder-card{width:230px;height:355px;margin-left:-115px;top:20px}
 .gallery-ready .founder-card[data-slot="left"]{transform:translateX(-130px) scale(.8)}
 .gallery-ready .founder-card[data-slot="right"]{transform:translateX(130px) scale(.8)}
 .founder-card>div{left:18px;bottom:22px}.founder-card h3{font-size:44px}.founder-card p{font-size:10px}
 .gallery-ready .founders-controls{flex-wrap:wrap;justify-content:center;gap:12px}
 .founders-controls>div{order:-1;width:100%;justify-content:center;gap:24px}
 .founders-hint{font-size:13px}[data-page="about"] .hero-note{max-width:180px}[data-page="about"] .hero-scroll{font-size:9px;gap:6px}
}
@media(prefers-reduced-motion:reduce){.gallery-ready .founder-card{transition:none}}

/* About is one continuous atmosphere from the introduction through the spiral. */
[data-page="about"] #main > .opening-atmosphere{position:fixed;inset:0;z-index:-1;pointer-events:none}
[data-page="about"] #main > .opening-atmosphere .hero-bg{position:absolute;inset:0;height:100%;min-height:0}
[data-page="about"] .opening,[data-page="about"] .founders{background:transparent}
[data-page="about"] .founders{color:#fff}
[data-page="about"] .founders-heading>p,[data-page="about"] .founders-heading em{color:#e1e5f1}
[data-page="about"] .founder-select{color:#d5dce9}
[data-page="about"] .founder-select[aria-pressed="true"]{color:#fff}
[data-page="about"] .founder-select:focus-visible{outline-color:#fff}
[data-page="about"] .founders-hint{color:#d5dce9}
[data-page="about"] .about-thread{-webkit-mask-image:linear-gradient(#000 65%,transparent 100%);mask-image:linear-gradient(#000 65%,transparent 100%)}
@media(prefers-reduced-motion:reduce){[data-page="about"] #main > .opening-atmosphere .hero-bg>img{opacity:.25}}

[data-page="about"] .about-portrait{position:absolute;inset:0;height:100%;background:transparent;-webkit-mask-image:linear-gradient(#000 0%,#000 55%,transparent 100%);mask-image:linear-gradient(#000 0%,#000 55%,transparent 100%)}
[data-page="about"] .about-portrait::after{display:none}
/* Motion is driven by one visibility-gated ticker, with transforms only. */
.gallery-drifting .founder-card{transition:none}
.gallery-pause{font:inherit;font-size:12px;color:#e1e5f1;background:none;border:0;border-bottom:1px solid #ffffff60;padding:8px 0;cursor:pointer;white-space:nowrap}
.gallery-pause:focus-visible{outline:2px solid white;outline-offset:5px}
@media(max-width:820px){.gallery-pause{font-size:13px}}

/* Same front-facing circular projection as the gallery reference; no fading. */
.gallery-drifting .founders-gallery{height:590px}
.gallery-drifting .founder-card{width:240px;height:360px;top:115px;margin-left:-120px;opacity:1;transform-origin:50% 50%}
.gallery-drifting .founder-card h3{font-size:40px}
.gallery-drifting .founder-card>div{left:16px;bottom:18px}
.gallery-drifting .founder-card p{font-size:9px}
@media(max-width:820px){
 .gallery-drifting .founders-gallery{height:395px}
 .gallery-drifting .founder-card{width:170px;height:255px;margin-left:-85px;top:70px}
 .gallery-drifting .founder-card h3{font-size:30px}
 .gallery-drifting .founder-card p{font-size:8px}
}

/* Brand mentions use the wordmark typeface in every text context. */
.enharmonoche-name{font-family:var(--serif);font-weight:400;font-style:normal;letter-spacing:0;text-transform:none;white-space:nowrap}

/* Eugenie's supplied portrait keeps its natural crop in every gallery copy. */
.founder-card.founder-card-eugenie img{width:100%;height:100%;right:0;top:0;object-fit:cover;object-position:50% 38%;transform:none}


/* A softly lit vinyl, cropped into the shared blue and lavender atmosphere. */
.hero-bg img.hero-vinyl{left:78%;top:-22%;width:min(83vw,1250px);height:auto;max-width:none;transform:translateX(-50%) rotate(-12deg);filter:none;opacity:.7;mix-blend-mode:normal;mask-image:linear-gradient(#000 48%,transparent 98%)}
.hero-bg img.hero-vinyl.portrait-bloom{opacity:0;filter:blur(18px)}
@media(max-width:820px){.hero-bg img.hero-vinyl{left:82%;top:-5%;width:144vw;height:auto;opacity:.55;transform:translateX(-50%) rotate(-12deg);mask-image:linear-gradient(#000 35%,transparent 92%)}}