:root{
  --ink:#0a0a0b; --ink2:#121214; --cream:#e9e6df; --dim:rgba(233,230,223,.52); --faint:rgba(233,230,223,.16); --acc:#ff0055;
  --plate-top:#d4d4d2; --plate-bot:#cfcfcd;
  --sans:"Tektur","Chakra Petch",sans-serif; --disp:"ZB Line","Chakra Petch",sans-serif; --mono:"Chakra Petch",sans-serif;
  --gut:40px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink)}
body{background:var(--ink);color:var(--cream);font-family:var(--mono);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block}
.mono{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase}

/* ---------- nav */
.nav{position:fixed;z-index:40;top:0;left:0;right:0;display:flex;align-items:center;padding:26px var(--gut) 26px 72px;color:var(--cream);transition:color .6s cubic-bezier(.4,0,.2,1);pointer-events:none}
.nav a{color:inherit;text-decoration:none;pointer-events:auto}
.nav .brand{display:flex;align-items:center;gap:10px;font-weight:500;font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-variation-settings:"wdth" 125}
.nav .brand .wm{height:11px;width:auto;aspect-ratio:10.5067}
.wm{display:block;fill:currentColor}
.t-hero .wmw{display:inline-block;vertical-align:baseline}
.t-hero .wmw .wm{height:.72em;width:auto;aspect-ratio:10.5067;margin-right:.12em}
/* one hero moment of Aaron's glow, on the wordmark only (it sits behind the board, so nothing glows over the render) */
.t-hero .wmw{filter:drop-shadow(0 0 22px rgba(233,230,223,.32)) drop-shadow(0 0 60px rgba(233,230,223,.14))}
.nav .links{margin-left:auto;display:flex;gap:30px}
.nav .links a{opacity:.5;transition:opacity .4s}
.nav .links a:hover,.nav .links a.on{opacity:1}
body.nav-light .nav,body.nav-light .rail{color:var(--ink)}

/* ---------- progress rail (left edge) */
.rail{position:fixed;z-index:40;left:26px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--cream);transition:color .6s}
.rail b{font-weight:400;color:var(--acc)}
.rail span{opacity:.5;writing-mode:vertical-rl}
.rail .track{position:relative;width:1px;height:30vh;background:currentColor;opacity:.25}
.rail .track i{position:absolute;left:-1px;top:0;width:3px;height:100%;background:var(--acc);transform-origin:top;transform:scaleY(0)}
.rail .track{opacity:1;background:rgba(127,127,127,.35)}

/* ---------- corner brackets (one per screen, inset like a viewfinder) */
.frame{position:absolute;inset:22px 22px 22px 62px;pointer-events:none;z-index:5}
.frame i{position:absolute;width:16px;height:16px;border:0 solid var(--faint)}
.light .frame i{border-color:rgba(10,10,11,.22)}
.frame i:nth-child(1){left:0;top:0;border-left-width:1px;border-top-width:1px}
.frame i:nth-child(2){right:0;top:0;border-right-width:1px;border-top-width:1px}
.frame i:nth-child(3){left:0;bottom:0;border-left-width:1px;border-bottom-width:1px}
.frame i:nth-child(4){right:0;bottom:0;border-right-width:1px;border-bottom-width:1px}

/* ---------- sections: each one is pulled over the previous pinned screen (curtain), so nothing cuts */
section{position:relative}
.sheet{margin-top:-100vh;margin-top:-100svh}
#s0{z-index:0}#s1{z-index:1}#s2{z-index:2}#say1{z-index:3}#s3{z-index:4}#s4{z-index:5}#say2{z-index:6}#s5{z-index:7}#s6{z-index:8}#s7{z-index:9}#s9{z-index:10}#s8{z-index:11}#s10w{z-index:12}#s10{z-index:13}
.sheet>.pin{box-shadow:0 -30px 60px rgba(0,0,0,.28)}
.pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.lab{position:absolute;z-index:6;color:var(--dim)}
.light .lab{color:rgba(10,10,11,.5)}
.lab-tl{left:84px;top:84px}
.lab-tr{right:46px;top:84px}
.title{font-weight:300;font-variation-settings:"wdth" 125;text-transform:uppercase;letter-spacing:-.035em;line-height:.8;white-space:nowrap}

/* ---------- depth scenes: all layers share one 16:9 box sized like the renders, so they recombine pixel for pixel */
.depth .stage{position:absolute;left:50%;top:50%;width:max(100vw,177.78vh);aspect-ratio:16/9;transform:translate(-50%,-50%)}
.depth .layer{position:absolute;inset:0;width:100%;height:100%}
.depth .boardwrap .board{width:100%;height:100%}
.depth svg.dims,.depth svg.lock{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.layer,.title{will-change:transform}

/* hero */
#s1{height:300vh;background:var(--ink)}
#s1 .pin{background:var(--ink)}
#s1 .glow{position:absolute;inset:0;background:radial-gradient(52% 40% at 50% 64%,rgba(233,230,223,.10),transparent 70%)}
.t-hero{position:absolute;left:0;right:0;top:27%;text-align:center;font-size:10vw;color:var(--cream);display:flex;justify-content:center;align-items:baseline;gap:.22em}
#s1 .boardwrap{top:7%}
.hero-copy{position:absolute;z-index:6;left:84px;bottom:56px}
.hero-copy .mono{color:var(--dim);margin-bottom:14px}
.hero-copy .tag{font-weight:300;font-variation-settings:"wdth" 125;font-size:clamp(26px,2.6vw,40px);letter-spacing:-.01em}
.crops{position:absolute;z-index:6;right:46px;bottom:52px;display:flex;gap:14px}
.crops figure{width:132px}
.crops .cf{position:relative;aspect-ratio:16/10;overflow:hidden;outline:1px solid var(--faint);outline-offset:4px}
.crops img{width:100%;height:100%;object-fit:cover}
.crops figcaption{margin-top:10px;color:var(--dim);display:flex;gap:8px}
.crops figcaption b{font-weight:400;color:var(--acc)}

/* ride / carry */
#s2{height:320vh}#s4{height:300vh}
.light{color:var(--ink)}
.light .pin{background:linear-gradient(180deg,var(--plate-top),var(--plate-bot))}
.t-ride{position:absolute;left:0;right:0;top:45%;text-align:center;font-size:12vw;color:var(--ink)}
.t-carry{position:absolute;left:0;right:0;top:36%;display:flex;justify-content:center;gap:8vw;font-size:9vw;color:var(--ink)}
.dims line,.lock path{stroke:rgba(10,10,11,.55);stroke-width:2;fill:none;vector-effect:non-scaling-stroke}
.dims line.tick{stroke:rgba(10,10,11,.35)}
.dims text,.lock text{font-family:var(--mono);font-size:19px;letter-spacing:4px;fill:rgba(10,10,11,.62)}
.lock text{fill:var(--acc)}

/* statement screens: concept B's per-character step (alpha .15 to 1 with scroll), set in the body face */
.say{height:290vh;background:var(--ink)}
.say .pin{display:flex;align-items:center;justify-content:center;padding:0 24px;background:var(--ink)}
.saytext{max-width:1060px;text-align:center;font-family:var(--mono);font-weight:400;font-variation-settings:"wdth" 100;font-size:clamp(30px,4.4vw,64px);line-height:1.12;letter-spacing:-.02em}
.saytext .ch{color:rgba(233,230,223,.15)}.saytext .ch.on{color:var(--cream)}
.saytext .ch.acc.on{color:var(--acc)}

/* fold film */
.film{height:460vh;background:var(--ink)}
.film canvas,.parts canvas{position:absolute;inset:0;width:100%;height:100%}
.film .vig{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(10,10,11,.7) 100%),linear-gradient(0deg,rgba(10,10,11,.6),transparent 30%)}
.film .word{position:absolute;z-index:6;left:84px;top:118px;font-weight:300;font-variation-settings:"wdth" 125;font-size:clamp(56px,8.5vw,150px);letter-spacing:-.04em;line-height:.8}
.states{position:absolute;z-index:6;left:84px;bottom:70px;list-style:none;display:flex;flex-direction:column;gap:12px}
.states li{opacity:.3;transition:opacity .5s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;gap:12px}
.states li::before{content:"";width:14px;height:1px;background:currentColor}
.states li.on{opacity:1}.states li.on::before{background:var(--acc);width:28px}
.ftrack{position:absolute;z-index:6;left:84px;right:46px;bottom:44px;height:1px;background:var(--faint)}
.ftrack i{position:absolute;inset:0;background:var(--acc);transform-origin:left;transform:scaleX(0)}

/* why: three problems in one pinned scene */
.why{height:420vh;background:var(--ink)}
.why .pin{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:4vw;align-items:center;padding:110px 46px 70px 84px;background:var(--ink)}
.wl{position:relative;height:100%;display:flex;flex-direction:column;justify-content:space-between}
.kicker{color:var(--dim)}
.wnum{position:relative;height:clamp(110px,15vw,230px);overflow:hidden;font-weight:200;font-variation-settings:"wdth" 125;font-size:clamp(110px,15vw,230px);line-height:1;letter-spacing:-.05em}
.wnum span{position:absolute;left:0;top:0;will-change:transform}
.wtx{position:relative;min-height:9.5em}
.wi{position:absolute;left:0;top:0;right:0}
.wi h3{font-weight:400;font-variation-settings:"wdth" 125;font-size:clamp(28px,3.2vw,52px);letter-spacing:-.02em;line-height:1}
.wi p{margin-top:18px;color:var(--dim);font-size:17px;line-height:1.5;max-width:30ch}
.wsteps{list-style:none;display:flex;gap:26px}
.wsteps li{opacity:.3;transition:opacity .5s;padding-top:12px;position:relative}
.wsteps li::before{content:"";position:absolute;left:0;top:0;width:100%;height:1px;background:currentColor;opacity:.4}
.wsteps li.on{opacity:1}.wsteps li.on::before{background:var(--acc);opacity:1}
.wp{position:relative;height:100%;min-height:0}
.wimg{position:absolute;inset:0;overflow:hidden;background:var(--ink2)}
.wimg img{width:100%;height:100%;object-fit:cover}
.wp .frame{inset:-12px}
.wcap{position:absolute;right:0;bottom:-30px;color:var(--dim)}

/* parts */
.parts{height:720vh;background:var(--ink)}
.parts .pin{background:var(--ink)}
.pword{position:absolute;z-index:3;left:84px;bottom:56px;font-weight:300;font-variation-settings:"wdth" 125;font-size:clamp(48px,6.5vw,110px);letter-spacing:-.04em;line-height:.8;color:rgba(233,230,223,.9)}
.leader{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible}
.leader line{stroke:var(--cream);stroke-width:1;opacity:.8}
.leader circle{fill:var(--acc)}
.plabel{position:absolute;z-index:5;left:0;top:0;display:flex;flex-direction:column;gap:8px;white-space:nowrap}
.plabel .mono{color:var(--acc)}
.plabel b{font-weight:400;font-variation-settings:"wdth" 125;font-size:clamp(20px,2vw,30px);letter-spacing:-.01em}
.pcount{position:absolute;z-index:6;right:46px;top:84px;display:flex;gap:8px;align-items:center;color:var(--dim)}
.pcount span{color:var(--cream)}
.pcount i{width:18px;height:2px;background:rgba(233,230,223,.25);transition:background .5s}
.pcount i:first-of-type{margin-left:10px}
.pcount i.on{background:var(--acc)}
.leader,.plabel{opacity:0}

/* gallery: horizontal strip */
.gallery{background:var(--ink)}
.gallery .pin{background:var(--ink)}
.strip{position:absolute;left:0;top:0;height:100%;display:flex;align-items:center;gap:5vw;padding:0 10vw 0 84px;will-change:transform}
.ghead{flex:none;width:26vw}
.ghead p{color:var(--dim);margin-bottom:22px}
.ghead h2{font-weight:300;font-variation-settings:"wdth" 125;font-size:clamp(48px,7vw,120px);letter-spacing:-.04em;line-height:.85}
.g{flex:none;width:var(--w);transform:translateY(var(--y))}
.gf{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;background:var(--ink2)}
.gf.tall{aspect-ratio:4/5}.gf.sq{aspect-ratio:1/1}
.gf img{position:absolute;top:0;left:-8%;width:116%;height:100%;object-fit:cover;will-change:transform}
.g figcaption{margin-top:14px;display:flex;gap:12px;align-items:baseline;font-weight:400;font-variation-settings:"wdth" 125;font-size:16px}
.g figcaption .mono{color:var(--acc)}
.gbar{position:absolute;right:46px;bottom:44px;color:var(--dim)}
.gbar span{color:var(--cream)}

/* ask */
.ask{height:300vh;height:300svh}
.ask .pin{background:var(--ink)}
.askboard{position:absolute;right:-6vw;top:50%;width:min(66vw,1100px);transform:translateY(-38%);opacity:.95}
.askc{position:absolute;z-index:6;left:84px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.askc>.mono{color:var(--dim)}
.askc h2{font-weight:300;font-variation-settings:"wdth" 125;font-size:clamp(44px,6.4vw,112px);letter-spacing:-.04em;line-height:.9;max-width:9ch}
.askc .st{display:flex;align-items:center;gap:10px;color:var(--cream)}
.askc .st i{width:7px;height:7px;background:var(--acc)}
.cta{margin-top:8px;display:inline-block;padding:14px 22px;background:var(--cream);color:var(--ink);text-decoration:none;font-weight:500;font-size:14px;letter-spacing:.02em;font-variation-settings:"wdth" 112;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));transition:background .3s}
.cta:hover{background:#fff}


/* ---------- phone */
@media (max-width:820px){
  :root{--gut:18px}
  .nav{padding:18px var(--gut)}
  .nav .links,.rail{display:none}
  .frame{inset:12px}
  .lab-tl{left:22px;top:64px}.lab-tr{right:22px;top:64px}
  .depth .stage{width:116vw;top:56%}
  #s4 .stage{width:180vw;top:58%}
  #s1 .stage{width:128vw;top:52%}
  #s1 .boardwrap{top:4%}
  .t-hero{top:8%;line-height:.9;white-space:normal}
  .t-hero{flex-direction:column;align-items:center;gap:.18em}
  .t-ride span{display:block}
  .t-ride{top:9%;line-height:.9;white-space:normal}
  .t-carry{top:-2%;flex-direction:column;align-items:center;gap:0;line-height:.9}
  .hero-copy{left:22px;bottom:150px}
  .crops{left:22px;right:22px;bottom:34px;gap:10px}
  .crops figure{flex:1;width:auto}
  .film .word{left:22px;top:96px}
  .states{left:22px;bottom:64px}.ftrack{left:22px;right:22px;bottom:40px}
  .why .pin{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:26px;padding:96px 22px 40px}
  .wl{height:auto;gap:18px}
  .wnum{height:96px;font-size:96px}
  .wtx{min-height:7.5em}
  .wi h3{font-size:30px}.wi p{font-size:15px;margin-top:10px}
  .wp{height:100%}
  .pword{left:22px;bottom:40px}
  .pcount{right:22px;top:64px}
  .strip{padding:0 12vw 0 22px;gap:9vw}
  .ghead{width:62vw}
  .g{width:calc(var(--w) * 2.6);transform:translateY(calc(var(--y) * .5))}
  .gbar{right:22px;bottom:30px}
  .askboard{right:-30vw;width:130vw;top:68%}
  .askc{left:22px;top:38%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- type: superseded by FINAL-TYPE at the end of this file (ZB Line display, Chakra Petch small text);
   ZEPHYR itself is always the traced wordmark or the Aterom lettering. */

.nav .brand span{font-family:var(--disp);font-weight:500;letter-spacing:.3em;font-variation-settings:"wdth" 125}
.title,.film .word,.pword,.ghead h2,.askc h2,.hero-copy .tag,.wnum,.wi h3,.g figcaption,.plabel b,.cta{font-family:var(--disp);font-variation-settings:"wdth" 125}
.title,.film .word,.pword,.ghead h2,.askc h2,.hero-copy .tag{text-transform:uppercase}
.title{font-weight:500;letter-spacing:.06em;line-height:.85}
.film .word,.pword,.ghead h2{font-weight:500;letter-spacing:.1em}
.askc h2{font-weight:500;letter-spacing:.04em;line-height:1.02;max-width:12ch}
.hero-copy .tag{font-weight:500;letter-spacing:.18em;font-size:clamp(18px,1.7vw,26px)}
.wnum{font-weight:400}
.wi h3{font-weight:500;letter-spacing:.02em}
.wi p{font-variation-settings:"wdth" 100}
.t-hero{letter-spacing:.2em}

/* ---------- landing: the trailer clip at once, concept B's framing gradients */
.landing{height:200vh;background:var(--ink)}
.landing .pin{background:var(--ink)}
.lv{position:absolute;inset:0;overflow:hidden}
.lv img,.lv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lv img{animation:kb 9s cubic-bezier(.22,1,.36,1) both}          /* something moves the instant the page opens */
.lv video{opacity:0;transition:opacity 1s cubic-bezier(.4,0,.2,1)}
.lv video.on{opacity:1}
@keyframes kb{from{transform:scale(1.08)}to{transform:scale(1)}}
.lgrad{position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,10,11,.92) 0%,rgba(10,10,11,.62) 38%,rgba(10,10,11,.28) 58%,transparent 74%),linear-gradient(180deg,rgba(10,10,11,.55) 0%,transparent 22%)}
.lcopy{position:absolute;z-index:6;left:84px;bottom:12vh;display:flex;flex-direction:column;gap:22px}
.lcopy .mono{color:var(--dim)}
.lcopy .lock{display:flex;align-items:center;gap:min(2.6vw,40px);font-weight:500}
.lcopy .lock .wm{height:min(4.2vw,64px);width:auto;aspect-ratio:10.4878}
.lcopy .lx{font-family:var(--disp);font-variation-settings:"wdth" 125;font-weight:500;font-size:min(5.6vw,86px);letter-spacing:.14em;line-height:1}
.lcopy .tag{font-family:var(--disp);font-variation-settings:"wdth" 125;font-weight:500;letter-spacing:.18em;text-transform:uppercase;font-size:clamp(16px,1.5vw,22px)}

/* ---------- concept A's feature composition: huge title top-left, huge number top-right, steps | monitor | readout */
.fa .pin{display:flex;flex-direction:column;justify-content:center;gap:5vh;padding:96px 46px 60px 84px;background:var(--ink)}
.fhead{display:flex;justify-content:space-between;align-items:flex-end}
.fhead h2,.fhead .fno{font-family:var(--disp);font-variation-settings:"wdth" 125;font-weight:400;font-size:clamp(56px,8vw,140px);letter-spacing:.04em;line-height:.8}
.fhead .fno{color:rgba(233,230,223,.22)}
.rig{display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,min(58vw,1000px,calc((100vh - 330px) * 1.778))) minmax(150px,1fr);gap:34px;align-items:center}
.steps{list-style:none;display:flex;flex-direction:column;gap:26px}
.steps li{opacity:.26;transition:opacity .5s cubic-bezier(.4,0,.2,1)}
.steps li.on{opacity:1}
.steps .mono{color:var(--acc)}
.steps h3{font-family:var(--disp);font-variation-settings:"wdth" 125;font-weight:500;font-size:20px;letter-spacing:.06em;text-transform:uppercase;margin:6px 0 4px}
.steps p{color:var(--dim);font-size:14px;line-height:1.45;max-width:24ch}
.monitor{position:relative;aspect-ratio:16/9}
.monitor .scr{position:absolute;inset:0;overflow:hidden;background:#2b2b2c}
.monitor canvas{position:absolute;inset:0;width:100%;height:100%}
.brk{position:absolute;width:22px;height:22px;border:1px solid var(--cream)}
.brk.tl{left:-10px;top:-10px;border-right:0;border-bottom:0}.brk.tr{right:-10px;top:-10px;border-left:0;border-bottom:0}
.brk.bl{left:-10px;bottom:-10px;border-right:0;border-top:0}.brk.br{right:-10px;bottom:-10px;border-left:0;border-top:0}
.mlabel{position:absolute;left:0;right:0;top:-30px;display:flex;justify-content:space-between;color:var(--dim)}
.mtrack{position:absolute;left:0;right:0;bottom:-26px;height:1px;background:var(--faint)}
.mtrack i{position:absolute;left:0;top:0;height:1px;width:100%;background:var(--acc);transform-origin:left;transform:scaleX(0)}
.mtrack b{position:absolute;top:-4px;width:1px;height:9px;background:rgba(233,230,223,.4)}
.reads{display:grid;grid-template-columns:auto 1fr;gap:14px 20px;align-content:center}
.reads dt{color:rgba(233,230,223,.42)}.reads dd{color:var(--cream)}
.reads dd.hot{color:var(--acc)}
.phead{position:absolute;z-index:6;left:84px;right:46px;top:96px}
.preads{position:absolute;z-index:6;right:46px;bottom:56px}
.film.fa{height:460vh}

@media (max-width:820px){
  .landing .lcopy{left:22px;bottom:14vh}
  .lcopy .lock{flex-direction:column;align-items:flex-start;gap:14px}
  .lcopy .lock .wm{height:28px}.lcopy .lx{font-size:40px}
  .fa .pin{padding:80px 22px 40px;gap:4vh}
  .rig{grid-template-columns:1fr;gap:42px}
  .rig .monitor{order:1}.rig .steps{order:2;flex-direction:row;gap:16px}.rig .reads{order:3;grid-template-columns:auto 1fr auto 1fr;gap:6px 10px}
  .steps p{display:none}.steps h3{font-size:14px}
  .phead{left:22px;right:22px;top:80px}.preads{right:22px;bottom:30px}
}

/* ---------- nav: invisible by default; fades in and slides down near the top edge, out and up after a short grace */
.nav{opacity:0;transform:translateY(-100%);transition:opacity .3s cubic-bezier(.22,1,.36,1),transform .3s cubic-bezier(.22,1,.36,1),color .6s;
  background:var(--ink);border-bottom:1px solid var(--faint);padding-bottom:22px}   /* solid bar (Aaron): text behind can never show through */
body.nav-light .nav{background:var(--ink);color:var(--cream)}   /* same solid dark bar over light sections too */
.nav.show{opacity:1;transform:none}
.nav.show a,.nav.show .chip{pointer-events:auto}
.nav:not(.show) a{pointer-events:none}
.nav .links a{display:flex;gap:8px;align-items:baseline}
.nav .links a b{font-weight:400;color:var(--acc)}
.nav .chip{margin-left:30px;display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid currentColor;border-color:rgba(127,127,127,.45)}
.nav .chip i{width:6px;height:6px;background:var(--acc)}
.navhandle{display:none;position:fixed;z-index:41;top:6px;left:50%;width:44px;height:14px;margin-left:-22px;border:0;background:transparent;cursor:pointer}
.navhandle::after{content:"";position:absolute;left:10px;right:10px;top:5px;height:3px;border-radius:2px;background:rgba(233,230,223,.55)}
body.nav-light .navhandle::after{background:rgba(10,10,11,.4)}
@media (hover:none){.navhandle{display:block}}
@media (max-width:820px){.nav .chip{display:none}}
/* lockups: clear space between the wordmark and RX-1 */
.t-hero{gap:.6em}
.lcopy .lock{gap:min(4vw,60px)}
/* Why pictures: whole board in view, letterboxed on the studio grey of the renders */
.wimg{background:#d7d7d5}
.wimg img{object-fit:contain}

/* sequence posters until the frames are decoded; no filters on moving layers */
.seqposter{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .4s}
.t-hero .wmw{filter:none}

/* ---------- hand-drawn lockups (website/brand/lettering): full lockup on wide screens, ZEPHYR over RX-1 on phones */
.lk{display:block;fill:currentColor;width:auto}
.nav .brand .lk{height:11px;aspect-ratio:22.6622}
.lk.full{aspect-ratio:17.7913}.lk.z{aspect-ratio:10.5083;display:none}.lk.r{aspect-ratio:5.6048;display:none}
.lcopy .lock{display:block}
.lcopy .lock .lk.full{height:min(4.4vw,66px)}
.t-hero{position:absolute;left:0;right:0;top:30%;display:flex;flex-direction:column;align-items:center;color:var(--cream)}
.t-hero .lk.full{width:88vw;height:auto}
@media (max-width:820px){
  .lk.full{display:none}.lk.z,.lk.r{display:block}
  .lcopy .lock .lk.z{height:26px}.lcopy .lock .lk.r{height:26px;margin-top:12px}
  .t-hero{top:4%;gap:.5em}
  .t-hero .lk.z{width:84vw;height:auto}.t-hero .lk.r{height:calc(84vw / 10.5083);width:auto}
}

.wp{overflow:hidden}
.wimg img{will-change:transform}

/* ---------- display sizes (font comes from --disp, see FINAL-TYPE) */
.title,.film .word,.pword,.ghead h2,.askc h2,.hero-copy .tag,.wnum,.wi h3,.fhead h2,.fhead .fno,.steps h3,.lcopy .tag,.g figcaption,.plabel b,.cta{font-family:var(--disp);font-weight:400;font-variation-settings:normal}
.title,.ghead h2,.askc h2,.fhead h2,.fhead .fno,.wnum,.pword,.film .word{letter-spacing:.01em}
.wi h3,.steps h3,.g figcaption,.plabel b,.cta{letter-spacing:.01em}
.hero-copy .tag,.lcopy .tag{letter-spacing:.02em}
.title{line-height:.9}
.fhead h2,.fhead .fno{font-size:clamp(48px,6.6vw,120px)}
.wi h3{font-size:clamp(20px,2.1vw,34px)}
/* LOCKUPS-BEGIN (written by _build/lockups.py, set 35) */
.nav .brand .lk{aspect-ratio:17.3043}
.lk.full{aspect-ratio:13.3096}.lk.z{aspect-ratio:8.3164}.lk.r{aspect-ratio:4.2905}
@media (max-width:820px){.t-hero .lk.r{height:calc(84vw / 8.3164);width:auto}}
/* LOCKUPS-END */

/* ---------- landing Frame 1 (Aaron's pick from bigtype/hero_mock.html): filleted vertices, no corner dots */
.lframe{position:absolute;left:62px;right:22px;top:18px;bottom:18px}
.lclip{position:absolute;inset:0;overflow:hidden}
.lline{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.lline path{fill:none;stroke:rgba(255,0,85,.55);stroke-width:1}
#s0 .frame{display:none}
@media (max-width:820px){.lframe{left:10px;right:10px;top:10px;bottom:10px}}

.notchlab{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--dim);transform:translate(-50%,-50%);white-space:nowrap}
.notchlab span{writing-mode:vertical-rl}
.notchlab svg{animation:nudge 2.4s cubic-bezier(.4,0,.2,1) infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
/* LANDING-TYPE-BEGIN (written by _build/landing_type.py, zephyr_boards_B.svg) */
@font-face{font-family:"ZB Line";src:url("media/fonts/zb-line.woff2") format("woff2");font-display:block}
.lcopy{left:104px;right:84px;bottom:11vh;gap:2.4vh}
.lcopy .stack{font-family:"ZB Line",var(--disp);font-weight:400;font-size:clamp(34px,4.4vw,72px);line-height:1.02;letter-spacing:-.02em;text-transform:uppercase;display:flex;flex-direction:column}
.lcopy .big{display:block;width:100%;height:auto;color:var(--cream)}
.lpk{position:absolute;z-index:6;color:var(--dim)}.lpk b{color:var(--cream);font-weight:400}
.lpk-tl{left:74px;top:26px}.lpk-tr{right:84px;top:9vh;text-align:right;line-height:1.6}
@media (max-width:820px){.lcopy{left:26px;right:26px;bottom:12vh}.lpk-tl{left:22px;top:18px}.lpk-tr{display:none}}
/* LANDING-TYPE-END */
/* FINAL-TYPE-BEGIN (Aaron's final type, _build/edit_finaltype.py) */
@font-face{font-family:"ZB Line";src:url("media/fonts/zb-line.woff2") format("woff2");font-weight:400;font-style:normal;font-display:block}
/* display-size text: ZB Line, tracking 0 (its reference spacing) */
.title,.film .word,.pword,.ghead h2,.askc h2,.wnum,.wi h3,.fhead h2,.fhead .fno,.saytext,.lcopy .stack,.hero-copy .tag{font-family:var(--disp);font-weight:400;letter-spacing:0;font-variation-settings:normal}
.saytext{text-transform:uppercase;line-height:1.18}
/* small text: Chakra Petch; bright values 600 */
.steps h3,.g figcaption,.plabel b,.cta,.nav .brand span,.steps p,.wi p{font-family:var(--mono);font-variation-settings:normal}
.steps h3,.g figcaption,.plabel b{font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.steps p,.wi p{font-weight:400;letter-spacing:.02em}
.reads dd,.lpk b,.pcount span,.rail b,.gbar span{font-weight:600}
.cta{font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:12px}
/* landing headline: one line, left edge of ZEPHYR to the end of its Y (width set in site.js) */
.lcopy .stack{display:inline-block;align-self:flex-start;white-space:nowrap;line-height:1}
.lline{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
/* FINAL-TYPE-END */
@media (max-width:820px){.fhead h2,.fhead .fno{font-size:40px}}
/* BUILD3-BEGIN (Aaron's build2 feedback, _build/edit_b3_*.py) */
/* BODY-FONT (2026-11-08): the readable paragraph face is ONE variable, --sans (set in :root at the top of this file);
   labels and small caps stay Chakra Petch via --mono. --body is kept as an alias for anything older. */
:root{--body:var(--sans);--big-ink:#e02652}
/* landing: the big Aterom ZEPHYR in --big-ink (Aaron, 2026-11-07: white was hard to read on the bright clip; pending his verdict) */
.lcopy .big{color:var(--big-ink)}
/* 10: readable text in Exo 2; Bevon (ZB Line) only on the big display titles; Chakra Petch on the small labels */
.wi p,.steps p,.saylead{font-family:var(--sans);font-weight:400;letter-spacing:.005em;text-transform:none}
.wi p{font-size:clamp(15px,1.15vw,18px);line-height:1.55;max-width:36ch;color:rgba(233,230,223,.66)}
.steps p{font-size:14px;line-height:1.5}
/* flip: a clip box sized to the face's full ascent and descent (padding), each word rolls up out of it and the next rolls in */
.flip{display:inline-grid;overflow:hidden;vertical-align:top;padding:.14em 0 .24em;margin:-.14em 0 -.24em;justify-items:start}
.flip>.fl{grid-area:1/1;display:block;white-space:nowrap;transform:translate3d(0,calc(100% + .4em),0);transition:transform .85s cubic-bezier(.22,1,.36,1)}
.flip>.fl.on{transform:none}
.flip>.fl.up{transform:translate3d(0,calc(-100% - .4em),0)}
@media (prefers-reduced-motion:reduce){.flip>.fl{transition:none}}
.fhead h2.flip{line-height:1;text-transform:uppercase}
/* 5: the statement figures: accent, digits in Chakra Petch (Bevon's drawn 1 reads like a 7), units in Bevon */
.saytext .fig{justify-items:center;color:rgba(255,0,85,.18);transition:color .3s}
.saytext .fig.on{color:var(--acc)}
.saytext .fig .fl{line-height:1.18}
.saytext .fig .fl{font-family:"Chakra Petch",sans-serif;font-weight:600;letter-spacing:.02em}
.wi h3{line-height:1.18}
/* 7: lead-in line before the three problems */
.saywrap{display:flex;flex-direction:column;align-items:center;gap:clamp(18px,3vh,34px)}
.saylead{font-size:clamp(17px,1.7vw,26px);color:var(--dim);opacity:0;transform:translateY(12px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.saylead.on{opacity:1;transform:none}
/* 4: Ride title baseline set from the board (site.js fitBoards), line-height 1 for that maths */
.t-ride{line-height:1}
/* 8/9: Why pictures in a fixed 16:9 frame, filled edge to edge (cover); the renders carry their own margin */
.wp{align-self:center;justify-self:end;height:auto;width:min(100%,calc((100vh - 220px) * 1.778));aspect-ratio:16/9}
.wimg{background:var(--ink2)}
.wimg img{object-fit:cover}
/* 12: gallery title never runs under the first picture */
.ghead{width:max-content;flex:none;position:relative;z-index:2}
.ghead h2{white-space:nowrap}
/* 15: the Zephyr badge next to the status line */
.askc .st .badge{width:20px;height:20px;flex:none;color:var(--cream)}
/* 16: placed by site.js placeCounter */
.pcount{left:auto}
@media (max-width:820px){
  .wp{width:100%;justify-self:stretch}
  .fhead h2,.fhead .fno{font-size:clamp(22px,6.8vw,40px)}
  .wtx{min-height:11.5em}
  .why .pin{gap:18px}
}
/* Specs (from media/specs.js): A's hierarchy, big title + number, four groups, values in Chakra Petch, imperial over metric */
.specs{height:320vh;background:var(--ink)}
.specs .pin{display:flex;flex-direction:column;justify-content:center;gap:6vh;padding:96px 46px 60px 84px;background:var(--ink)}
.sgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3vw}
.sg h3{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--acc);padding-bottom:12px;border-bottom:1px solid var(--faint);margin-bottom:6px}
.sg dl{display:grid;gap:0}
.sg .row{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:12px 0;border-bottom:1px solid rgba(233,230,223,.07);align-items:baseline}
.sg dt{font-family:var(--sans);font-size:14px;color:var(--dim)}
.sg dd{text-align:right;font-family:"Chakra Petch",sans-serif;font-weight:600;font-size:clamp(15px,1.25vw,20px);letter-spacing:.02em;color:var(--cream);text-transform:uppercase}
.sg dd small{display:block;font-weight:500;font-size:12px;letter-spacing:.06em;color:var(--dim);margin-top:2px}
.sg dd.tbc{color:rgba(233,230,223,.32);font-weight:500;font-size:12px;letter-spacing:.12em}
.sg .st{grid-column:1/-1;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(233,230,223,.38)}
.sg .st.target{color:rgba(255,0,85,.75)}
.snote{color:rgba(233,230,223,.42)}
@media (max-width:1100px){.sgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 5vw}.specs{height:340vh}}
/* phone: the table is taller than the screen, so Specs scrolls as normal content (no pin); the bottom screen of padding is what the
   status sheet slides over */
@media (max-width:820px){.specs{height:auto}.specs .pin{position:relative;height:auto;min-height:100svh;padding:80px 22px calc(100svh + 40px);justify-content:flex-start;gap:24px}.sgrid{grid-template-columns:1fr 1fr;gap:18px 18px}.sg .row{padding:8px 0}.sg dt{font-size:12px}}
/* landing badge icon (the real badge, brand\icon\zephyr_badge*.svg): A above the headline, B beside ZEPHYR BOARDS / RX-1 */
.licon{display:none;color:var(--cream)}
body[data-licon="a"] .licon-a{display:block;width:clamp(44px,4.2vw,72px);height:auto;aspect-ratio:1;margin-bottom:.4vh}
body[data-licon="b"] .licon-b{display:inline-block;width:22px;height:22px;vertical-align:middle;margin:-4px 12px 0 0}
.lpk-tl{display:flex;align-items:center}
.lpk-tl b{margin-right:.5em}
/* Arkcon: the heavy display face for the words behind the cut-out renders (Aaron 2026-11-07: "the current font looks too thin").
   NOTE: the Arkcon licence is freeware for personal use; a commercial licence (vrozdesigns) is needed before the public launch. */
@font-face{font-family:"Arkcon";src:url("media/fonts/arkcon.woff2") format("woff2");font-weight:400;font-style:normal;font-display:block;unicode-range:U+0020-002C,U+002E-007E}/* Arkcon hyphen glyph is empty: hyphen falls back to the next face */
:root{--depth-disp:"Arkcon","ZB Line","Chakra Petch",sans-serif}
.t-ride,.t-carry,.t-hero .ht{font-family:var(--depth-disp);font-weight:400;letter-spacing:.01em;text-transform:uppercase}
.t-hero .ht{display:none;white-space:nowrap;line-height:1;color:var(--cream)}
.t-hero.typed .ht{display:block}.t-hero.typed .lk{display:none!important}
@media (max-width:820px){.t-hero .ht span{display:block;text-align:center}.t-hero .ht{line-height:.95}}
/* Parts readout: the labelled part's specs (media/specs.js parts block), metric as a small second line like the Specs section */
.preads dd{text-align:right}
.preads dd small{display:block;margin-top:3px;font-size:10px;font-weight:500;letter-spacing:.08em;color:rgba(233,230,223,.5)}
.preads{transition:opacity .25s linear}
/* callout reset on a beat change: no transition while snapping off */
.leader.snap *,.plabel.snap b{transition:none!important}
.phead{will-change:opacity}
/* fold readout DIMENSIONS: tabular figures so the count keeps a steady width; never wraps */
.reads dd.tnum{font-variant-numeric:tabular-nums;white-space:nowrap}
/* ---------- JOIN (newsletter + feedback): Bevon title, Chakra Petch labels, Exo 2 text, angular corners, --acc focus and submit */
.join{height:100vh;height:100svh}
.join .pin{background:var(--ink);display:flex;align-items:center;padding:96px 46px 60px 84px}
.joinc{width:100%;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:6vw;align-items:center}
.jintro h2{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:clamp(36px,4.6vw,84px);line-height:1.04;max-width:10ch}
.jlead{margin-top:22px;font-family:var(--sans);font-size:clamp(15px,1.15vw,18px);line-height:1.55;color:rgba(233,230,223,.66);max-width:36ch}
.jform{display:flex;flex-direction:column;gap:18px;max-width:560px}
.jfield{display:flex;flex-direction:column;gap:8px}
.jfield label{color:var(--dim)}.jopt{text-transform:none;letter-spacing:.02em;opacity:.7}
.jform input[type=email],.jform textarea{width:100%;background:var(--ink2);color:var(--cream);border:1px solid rgba(233,230,223,.22);padding:13px 14px;font-family:var(--sans);font-size:16px;line-height:1.4;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));transition:border-color .2s;resize:vertical}
.jform textarea{min-height:96px}
.jform input[type=email]:focus,.jform textarea:focus{outline:none;border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}
.jform input[aria-invalid=true]{border-color:var(--acc)}
.jerr{min-height:1em;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--acc)}
.jchk{display:flex;align-items:center;gap:12px;cursor:pointer;font-family:var(--sans);font-size:15px;color:var(--cream)}
.jchk input{position:absolute;opacity:0;width:1px;height:1px}
.jbox{flex:none;width:18px;height:18px;border:1px solid rgba(233,230,223,.45);position:relative;clip-path:polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,0 100%)}
.jchk input:checked+.jbox{background:var(--acc);border-color:var(--acc)}
.jchk input:checked+.jbox::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.jchk input:focus-visible+.jbox{outline:2px solid var(--acc);outline-offset:3px}
.jsend{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.jform .cta{margin-top:0;border:0;cursor:pointer;background:var(--acc);color:#fff}
.jform .cta:hover{background:#ff2a6f}
.jform .cta:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
.jform .cta[disabled]{opacity:.55;cursor:default}
.jstatus{font-family:var(--sans);font-size:14px;line-height:1.45;color:var(--dim);max-width:34ch}
.jstatus.ok{color:var(--cream)}.jstatus.bad{color:var(--acc)}.jstatus.off{color:rgba(233,230,223,.6)}
.jpriv{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(233,230,223,.4)}
@media (max-width:820px){
  .join{height:auto}.join .pin{position:relative;height:auto;min-height:100svh;padding:84px 22px 48px;align-items:flex-start}
  .joinc{grid-template-columns:1fr;gap:28px}.jintro h2{font-size:34px}
}
/* waitlist inputs share the Join look; never break "Zephyr RX-1"; Specs row labels in the readout label treatment */
.jform input[type=text],.jform input[type=tel]{width:100%;background:var(--ink2);color:var(--cream);border:1px solid rgba(233,230,223,.22);padding:13px 14px;font-family:var(--sans);font-size:16px;line-height:1.4;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));transition:border-color .2s}
.jform input[type=text]:focus,.jform input[type=tel]:focus{outline:none;border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}
.jform .jfield{gap:7px}.wait .jform{gap:12px}
.join.wait{height:300vh;height:300svh}   /* one screen of dwell before the Updates section slides over */
@media (max-width:820px){.join.wait{height:auto}.join.wait .pin{padding-bottom:calc(100svh + 48px)}}
.nw{white-space:nowrap}
.jlead{text-wrap:pretty}
.sg dt{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:rgba(233,230,223,.42);white-space:nowrap}
.sg .row{grid-template-columns:auto minmax(0,1fr)}   /* the label keeps one line; a long value wraps instead */
/* ---------- top-bar page tabs: after the chapter links, a thin rule between the two groups */
.nav .links{gap:22px}
.nav .tabs{display:flex;gap:20px;margin-left:22px;padding-left:22px;border-left:1px solid rgba(233,230,223,.22)}
.nav .tabs a{color:inherit;text-decoration:none;opacity:.6;transition:opacity .3s;pointer-events:auto}
.nav .tabs a:hover,.nav .tabs a.on{opacity:1}.nav .tabs a.on{color:var(--acc)}
.nav .navcta{margin-left:22px}
@media (max-width:1400px){.nav .links b{display:none}.nav .links{gap:15px}.nav .tabs{gap:14px;margin-left:15px;padding-left:15px}.nav .navcta{margin-left:16px;white-space:nowrap}}
@media (max-width:1180px) and (min-width:821px){.nav .links{display:none}.nav .tabs{margin-left:auto;border:0}}   /* narrow desktop: page tabs + waitlist only */
/* phones: brand + Join waitlist on the first row, the page tabs on a second row */
@media (max-width:820px){
  .nav{flex-wrap:wrap;row-gap:12px}
  .nav .tabs{order:3;flex-basis:100%;margin:0;padding:0;border:0;gap:22px}
  .nav .navcta{padding:6px 11px;letter-spacing:.1em}
}
/* ---------- subpages (tech / about / support / apply) */
body.sub .nav{position:sticky;top:0;opacity:1;transform:none}
body.sub .nav a{pointer-events:auto}
.pg{max-width:1360px;margin:0 auto;padding:0 46px 120px 46px}
.pghero{position:relative;padding:12vh 38px 10vh;margin:28px 0 0}
.pghero .frame{inset:0}
.pghero h1{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:clamp(40px,5.2vw,92px);line-height:1.02;margin:22px 0 28px;max-width:14ch}
.acc{color:var(--acc)}
.pglead{font-family:var(--sans);font-size:clamp(16px,1.3vw,20px);line-height:1.6;color:rgba(233,230,223,.7);max-width:52ch;text-wrap:pretty}
.pgsec{padding:9vh 0 0}
.pgsec h2{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:clamp(28px,3.2vw,56px);line-height:1.08;margin:14px 0 32px;max-width:22ch}
.pgsec p{font-family:var(--sans);font-size:16px;line-height:1.65;color:rgba(233,230,223,.72);max-width:62ch;text-wrap:pretty}
.pgsec p+p{margin-top:14px}.pgsec strong{color:var(--cream);font-weight:500}
.pgsec .sgrid{margin-top:8px}
.story h2{font-size:clamp(22px,2.1vw,36px);max-width:none}
.mech,.story{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:5vw;align-items:center}
.pgpics{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pgpics figure{margin:0}.pgpics figcaption{margin-top:12px;color:var(--dim)}.pgpics figcaption b{color:var(--cream);font-weight:600}
.pgimg{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink2)}
.pgimg img{width:100%;height:100%;object-fit:cover}
.pgsteps{list-style:none;display:flex;flex-direction:column;gap:22px}
.pgsteps .mono{color:var(--acc)}
.pgsteps h3,.pgcard h3{font-family:var(--mono);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:18px;margin:6px 0 6px;color:var(--cream)}
.pgcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.pgcards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.pgcard{background:var(--ink2);padding:28px 28px 30px;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px))}
.pgcard.big h2{margin:10px 0 16px;font-size:clamp(24px,2.4vw,40px)}
.pgcard .cta{margin-top:22px}
.cta.cta-acc{background:var(--acc);color:#fff}
.pgdl .row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;padding:12px 0;border-bottom:1px solid rgba(233,230,223,.08);align-items:baseline}
.pgdl dt{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:rgba(233,230,223,.42);white-space:nowrap}
.pgdl dd{text-align:right;font-family:"Chakra Petch",sans-serif;font-weight:600;font-size:clamp(15px,1.25vw,20px);letter-spacing:.02em;text-transform:uppercase}
.pgdl dd small{display:block;font-weight:500;font-size:12px;letter-spacing:.06em;color:var(--dim);margin-top:2px}
.pgsplit{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pgperson{display:grid;grid-template-columns:120px minmax(0,1fr);gap:40px;align-items:start;margin-top:18px}
.pgbadge{width:120px;height:120px;color:var(--cream)}
.pgperson h2{margin:6px 0 8px}.pgmeta{color:var(--dim);margin-bottom:18px}
.pglink{display:inline-flex;align-items:center;gap:8px;margin-top:18px;color:var(--cream);text-decoration:none;border-bottom:1px solid var(--acc);padding-bottom:4px}
.pglink:hover{color:var(--acc)}
.pgsocial{display:flex;flex-wrap:wrap;gap:28px}.pgsocial .pglink{margin-top:0}
.pgfaq{display:flex;flex-direction:column;max-width:860px}
.pgfaq details{border-bottom:1px solid rgba(233,230,223,.12);padding:18px 0}
.pgfaq summary{cursor:pointer;font-family:var(--mono);font-weight:600;font-size:17px;letter-spacing:.02em;color:var(--cream);list-style:none;display:flex;justify-content:space-between;gap:20px}
.pgfaq summary::after{content:"+";color:var(--acc);font-weight:500}
.pgfaq details[open] summary::after{content:"-"}
.pgfaq details p{margin-top:12px}
.pgfaq summary:focus-visible{outline:2px solid var(--acc);outline-offset:4px}
.pgform{max-width:860px}
.pgrow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.jform select,.jform input[type=url]{width:100%;background:var(--ink2);color:var(--cream);border:1px solid rgba(233,230,223,.22);padding:13px 14px;font-family:var(--sans);font-size:16px;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
.jform select:focus,.jform input[type=url]:focus{outline:none;border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}
.jform [aria-invalid=true]{border-color:var(--acc)}
@media (max-width:980px){.mech,.story,.pgsplit,.pgcards,.pgcards.three{grid-template-columns:1fr}}
@media (max-width:820px){
  .pg{padding:0 18px 80px}.pghero{padding:9vh 18px 7vh}.pghero h1{font-size:min(28px,6.2vw)}.pgsec h2{font-size:24px}
  .pgpics,.pgrow{grid-template-columns:1fr}.pgperson{grid-template-columns:1fr;gap:18px}.pgbadge{width:72px;height:72px}
  .pgsec .sgrid{grid-template-columns:1fr}
}
/* BUILD3-END */

/* Aaron 2026-11-07: the lead-in matches the statement below it (Bevon caps, not body text) */
.saylead{font-family:var(--disp);font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(20px,2.3vw,36px);line-height:1.1}

/* cascade letters (Aaron 2026-11-07): each letter eases from the title ink to the landing pink */
.t-ride .lt,.t-carry .lt{font-style:normal;transition:color .45s cubic-bezier(.22,1,.36,1)}
.t-ride .lt.on,.t-carry .lt.on{color:var(--big-ink)}

/* Why section titles in the original neon pink (--acc #ff0055), not the landing's adjusted --big-ink (Aaron 2026-11-07) */
.wi h3{color:var(--acc)}

/* Parts callout: the portfolio's SpecLabel choreography (ring 520 ms, leader 300 ms at 260, rule 380 ms at 520, name rises at 820,
   cap at 860); exits in reverse order. Strokes draw with pathLength=1 dashes. (Aaron 2026-11-07) */
.leader #ldRing,.leader #ldLead,.leader #ldRule{fill:none;stroke:var(--cream);stroke-width:1.25;stroke-dasharray:1;stroke-dashoffset:1}
.leader #ldCap{fill:var(--acc);transform-box:fill-box;transform-origin:center;transform:scale(0)}
.leader #ldRing{transition:stroke-dashoffset .52s cubic-bezier(.33,1,.68,1) .62s}
.leader #ldLead{transition:stroke-dashoffset .3s cubic-bezier(.45,0,.55,1) .42s}
.leader #ldRule{transition:stroke-dashoffset .38s cubic-bezier(.5,1,.89,1) .12s}
.leader #ldCap{transition:transform .24s cubic-bezier(.34,1.56,.64,1) 0s}
.plabel b{display:block;transform:translateY(.7em);opacity:0;transition:transform .4s cubic-bezier(.33,1,.68,1),opacity .4s}
.leader.on #ldRing{stroke-dashoffset:0;transition-delay:0s}
.leader.on #ldLead{stroke-dashoffset:0;transition-delay:.26s}
.leader.on #ldRule{stroke-dashoffset:0;transition-delay:.52s}
.leader.on #ldCap{transform:scale(1);transition-delay:.86s}
.plabel.on b{transform:none;opacity:1;transition:transform .52s cubic-bezier(.33,1,.68,1) .82s,opacity .52s .82s}
@media (prefers-reduced-motion:reduce){.leader *,.plabel b{transition:none!important}}

/* top-bar "Join waitlist" button: solid neon pink (--acc), replaces the old "In development" chip (Aaron 2026-11-07) */
.nav .navcta{background:var(--acc);border-color:var(--acc);color:#fff;text-decoration:none;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:7px 14px;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));transition:filter .2s}
.nav .navcta:hover,.nav .navcta:focus-visible{filter:brightness(1.12)}
@media (max-width:820px){.nav .navcta{display:flex;margin-left:auto}}
/* Aaron 2026-11-07: Bevon only for short titles; the readable statement sentences use Chakra Petch caps (same face as the pink figures) */
.saytext{font-family:"Chakra Petch",sans-serif;font-weight:600;letter-spacing:.01em;line-height:1.14}
.saylead{font-family:"Chakra Petch",sans-serif;font-weight:500;letter-spacing:.04em}

/* ---------- MOBILE-FIX-BEGIN (phone audit 2026-11-07, REPORT in _build/review_mobile/). Phone-only: everything below sits inside
   the site's own phone breakpoint (max-width:820px) or (hover:none), so the desktop render is unchanged. The landing clip keeps
   covering its frame on phones (Aaron: an image must never look too small for its frame); its crop is a note in the report. */
@media (max-width:820px){
  /* Ride / Carry: on a phone the 16:9 stage is a short band, so the pin shows above and below it. The pin was one flat grey
     (#d4d4d2 to #cfcfcd) that did not match the plate's edges (seams). Above the stage it now continues the plate's top row and
     below it the plate's bottom row (colours sampled from ride_plate.webp / carry_plate.webp, 4-row mean, std under 3); the split
     sits at the stage centre (its `top` above), which the stage always covers. The section takes the bottom colour too, so any
     strip under a 100svh pin (iOS with the URL bar collapsed) is the same grey. */
  #s2 .pin,#s2{background:linear-gradient(180deg,rgb(185,185,185) 0 56%,rgb(210,210,210) 56% 100%)}
  #s4 .pin,#s4{background:linear-gradient(180deg,rgb(179,179,178) 0 58%,rgb(224,224,224) 58% 100%)}
  /* Fold: the 16:9 monitor left empty bands above and below. The monitor now takes the free height (the canvas cover-crops the
     frames). Tallest allowed: width x 1.2, i.e. 47 % of the frame width stays in view; across all 105 fold frames the board stays
     within 0.294 to 0.698 of the width (furthest 0.206 from the centre, so 41.2 % is needed), plus about 3 % clear each side. */
  .fa .pin{justify-content:flex-start}
  .fa .rig{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center;align-items:stretch}
  .fa .rig .monitor{flex:1 1 auto;aspect-ratio:auto;min-height:calc((100vw - 44px) * 9 / 16);max-height:calc((100vw - 44px) * 1.2)}
  /* Gallery: "DETAILS" ran off the right edge. Its ink is 8.21 x the font size wide (measured, ZB Line), so it is sized to the
     screen width minus both gutters. Pictures were up to 114vw wide (2.6 x --w); each is now capped at the screen width minus both
     gutters, so no picture is ever wider than the screen. */
  .ghead h2{font-size:min(48px,calc((100vw - 44px) / 8.21))}
  .g{width:min(calc(var(--w) * 2.6),calc(100vw - 44px))}
  /* Specs: two columns squeezed every value into a one-word column and pushed the right column off screen; one column. */
  .sgrid{grid-template-columns:minmax(0,1fr);gap:28px}
  /* closing screen: the board bleeds off the right edge by the same share as on desktop (6vw of 66vw = 9.1 % of its width) and
     starts at the gutter, so its front wheel no longer touches the frame and less of the board is cut. */
  /* closing board (Aaron 2026-11-08): his 130vw size, peeking in from the right by design. The off-screen share is 40 % of the
     board's own alpha box: each wheel-and-truck zone is 15 % of the length (measured), so the cut lands 25 points into the deck past
     the rear truck, between it and the centre hinge, clearly deliberate rather than a clipped tail. In-frame share f = 0.60.
     end_board.webp's alpha box spans 0.0093 to 0.9907 of the image width, so: left = 100vw - 130vw x (0.0093 + 0.60 x 0.9814) = 100vw - 130vw x 0.5981 */
  .askboard{left:calc(100vw - 130vw * .5981);right:auto;width:130vw}
  /* tap targets of about 44 px (the visible size is unchanged: an invisible hit area around the link) */
  .nav .brand,.nav .tabs a,.pglink,.jchk{position:relative}
  .nav .brand::before,.nav .tabs a::before,.pglink::before,.jchk::before{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;margin-top:-22px}
  .nav .navcta{padding-top:14px;padding-bottom:14px}   /* the pink button clips its own box (clip-path), so it grows to 44 px */
  .jpriv{font-size:11px;line-height:1.5}
  /* Why (Aaron 2026-11-08): kicker, numeral, text, then the picture right under the text, then the RIDE / CARRY / INDOORS row with its
     bars BELOW the picture. .wl dissolves (display:contents) so its children and the picture form one column in that order. The
     three texts share one grid cell, so the text box is as tall as the longest text at this width (it was a fixed 11.5em with the
     texts absolutely placed, which let the picture ride up over the step labels); it clips the texts' 34 px slide so a fading text
     never draws over the picture. If the screen is short, the picture gives up height first (cover keeps it filled). */
  .why .pin{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:18px}   /* stretch: the numeral box has only absolute children, so centring collapsed it to 0 wide */
  .why .wl{display:contents}
  .why .kicker{order:1}.why .wnum{order:2;flex:none}.why .wtx{order:3}.why .wp{order:4}.why .wsteps{order:5}
  /* the clip box reaches 18 px into the gaps above and below (padding, cancelled by negative margin): a text stays visible
     (opacity 1 - 1.8|d| > 0.05) up to |d| = 0.528, i.e. 34 x 0.528 = 18 px of slide, so nothing visible is cut and nothing reaches
     the numeral or the picture (both gaps are 18 px) */
  .why .wtx{display:grid;min-height:0;overflow:hidden;flex:none;padding:18px 0;margin:-18px 0}
  .why .wi{position:relative;grid-area:1/1}
  .why .wp{flex:0 1 auto;min-height:0;width:100%;height:auto;aspect-ratio:16/9}
  .why .wcap{display:none}   /* "Fig. 0n" hung 30 px under the picture (and was clipped by its overflow): the step row now says it */
  .why .wsteps{flex:none}
  /* Parts callout name 16 px on phones (20 px before): the name (about 136 px wide at 16 px, 170 at 20) plus its 10 px elbow gap
     and the 42 px screen margin must fit beside the part's travel, or the label can only sit on top of the render. The hinge sits
     mid-screen (about 210 px free on its left at 390 wide): 136 + 10 + 42 = 188 fits, 222 did not. */
  .plabel b{font-size:16px;text-shadow:0 0 6px rgba(10,10,11,.85),0 0 14px rgba(10,10,11,.55)}   /* the name often sits on the bright deck here */
  .plabel{overflow:hidden}
  /* lag (Aaron): the 60 px blurred shadow every sliding screen casts upward was the page-wide cost in WebKit (median frame 48 to
     60 ms in every section; without it 16 to 30 ms; a plain page scrolls at 5 ms in the same engine). It falls mostly dark on dark,
     so phones drop it; desktop keeps it. */
  .sheet>.pin{box-shadow:none}
  /* tall (9:16) renders, portrait phones, only on a scene that has one (site.js tall() adds .tall): the stage covers the screen
     (width at least 9/16 of the height, so any phone from 9:19.5 to 9:16 is covered and the sides are what crop). The titles keep
     the screen position today's phone layout gives them (measured at 360 / 390 / 430 wide, identical): hero 36.5 %, ride 43.5 %,
     carry 38.7 % from the top; the render spec places each board relative to these. */
  .depth.tall .stage{width:max(100vw,calc(100svh * 9 / 16));aspect-ratio:9/16;top:50%}
  #s1.tall .boardwrap{top:0}
  #s1.tall .t-hero{top:36.5%}
  #s2.tall .t-ride{top:43.5%}
  #s4.tall .t-carry{top:38.7%}   /* the name's reveal (rising .7em) emerges from the rule line instead of passing through the space under it */
  /* short screens (Safari with its bars: 568 to 740 px tall): the numeral scales with the height, 96 px at 686 px and up
     (96 / 686 = 14 % of the height), never under 64 px; top padding clears the 44 px nav handle plus the 36 px the frame corner needs */
  .why .pin{padding-top:80px;padding-bottom:28px}
  .why .wnum{height:clamp(64px,14svh,96px);font-size:clamp(64px,14svh,96px)}
}
/* touch: the nav handle's hit area is 44 x 44 (the visible bar stays where it was: 11 px from the top); while the bar is shown the
   handle lets taps through to the brand under it, and the bar hides again on scroll-down */
/* touch screens in landscape (a phone turned sideways gets the desktop layout at about 390 px tall): the Fold monitor's desktop
   size, (100vh - 330px) x 16/9, left it about 107 px wide; here the title (about 56 px) plus paddings take about 120 px, so that is
   the reserve, and the step descriptions give up their lines */
@media (hover:none) and (max-height:500px) and (min-width:821px){
  .fa .pin{padding:52px 40px 20px 72px;gap:2vh}
  .rig{grid-template-columns:minmax(150px,1fr) minmax(0,min(58vw,calc((100vh - 120px) * 1.778))) minmax(150px,1fr)}
  .steps{gap:10px}.steps p{display:none}
}
@media (hover:none){
  .navhandle{top:0;height:44px}
  .navhandle::after{top:11px}
  .nav.show~.navhandle{pointer-events:none}
}
/* MOBILE-FIX-END */
/* Aaron 2026-11-07: statement letters fade into their colour instead of switching on (scrolling back fades them out the same way) */
.saytext .ch{transition:color .6s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){.saytext .ch{transition:none}}
/* Aaron 2026-11-07: Bevon only for short titles; sentence-length headings use Chakra Petch caps */
.readh{font-family:"Chakra Petch",sans-serif !important;font-weight:600;text-transform:uppercase;letter-spacing:.01em;line-height:1.15}

/* ---------- comparison table, tech.html (specs.js versus; page.js). Chakra Petch values like the specs table, small uppercase labels,
   our column in the accent; phones: each row's label runs across, its three values sit under it */
.vs{display:grid;grid-template-columns:minmax(150px,1.1fr) repeat(var(--n,3),minmax(0,1fr));max-width:1100px;margin-top:8px}
.vs>div{padding:14px 16px 14px 0;border-bottom:1px solid rgba(233,230,223,.1)}
.vs-h{font-family:"Chakra Petch",sans-serif;font-weight:600;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--cream);border-bottom-color:rgba(233,230,223,.28)!important}
.vs-h.ours,.vs-c.ours{color:var(--acc)}
.vs-l{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:rgba(233,230,223,.5);align-self:stretch;display:flex;align-items:center}
.vs-c{font-family:"Chakra Petch",sans-serif;font-weight:600;font-size:clamp(15px,1.25vw,19px);letter-spacing:.02em;text-transform:uppercase;color:var(--cream)}
.vs-c small{display:block;font-weight:500;font-size:12px;letter-spacing:.06em;color:var(--dim);margin-top:2px}
.vs-c.ours small{color:rgba(255,0,85,.7)}
.vslead{margin:-10px 0 18px}
@media (max-width:820px){
  .vs{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
  .vs>.vs-h.vs-l{display:none}
  .vs-l{grid-column:1/-1;padding:16px 0 0!important;border-bottom:0!important}
  .vs-c{font-size:14px;padding:6px 10px 12px 0}
  .vs-h{font-size:13px}
}

/* BODY-FONT (2026-11-08 design pass): weight and tracking that go with the --sans face (each candidate needs its own) */
:root{--sans-wt:400;--sans-ls:0}
.wi p,.steps p,.jlead,.pglead,.pgsec p,.jchk,.jstatus{font-weight:var(--sans-wt,400);letter-spacing:var(--sans-ls,.005em)}