/* ============================================================
   HIT THE ROAD JACKS — tarmac, chalk, signal amber. Cinematic.
   ============================================================ */
:root{
  --gutter:3.2vw;
  --chapw:462px;
  --chapcol:calc(var(--chapw) + 3vw);

  /* PAPER & STEEL ------------------------------------------------------
     The page is off-white. The machines sit on blue-steel stages, which
     is what keeps a cream-white bike from vanishing into the background.
     Every component reads these four names, so a section only has to
     redefine them to flip from paper to steel. */
  --paper:#f1efe9;
  --paper2:#e7e4db;
  --steel:#32475e;
  --steel-mid:#22303f;
  --steel-deep:#1b2735;
  --steel-void:#141d27;

  --tarmac:var(--paper);      /* page surface  */
  --tarmac2:var(--paper2);    /* recessed band */
  --panel:#fbfaf7;            /* card          */
  --line:#d7d2c7;             /* hairline      */
  --chalk:#161c24;            /* primary text  */
  --chalk-dim:#5b6673;        /* secondary     */
  --amber:#c9761a;            /* action only   */
  --amber-lit:#ffb43a;        /* action on steel */

  --display:"Anton", Impact, sans-serif;
  --body:"Inter", -apple-system, system-ui, sans-serif;
}

/* ---- STEEL CONTEXT --------------------------------------------------
   Any section that stages a machine flips the same four names. Nothing
   downstream needs to know which context it is in. */
.hero,.scrolly__stage,.prodhero,.soho,.footer,.pagehead,.panel--amber,.drawer{
  --tarmac:var(--steel-deep);
  --tarmac2:var(--steel-mid);
  --panel:var(--steel-mid);
  --line:#2f4155;
  --chalk:#eef2f7;
  --chalk-dim:#9aabbd;
  --amber:var(--amber-lit);
  color:var(--chalk);
}
/* The chapter copy is a sibling of the stage, not a child, so it does not
   inherit the steel context — but it only floats OVER the dark stage in the
   desktop overlay layout. When the stage collapses to a static plate (narrow
   screens, reduced motion) the chapters sit on paper and must keep paper ink,
   so this is scoped to exactly the case where the overlay happens. */
@media (min-width:981px) and (prefers-reduced-motion: no-preference){
  .scrolly{
    --tarmac:var(--steel-deep);
    --tarmac2:var(--steel-mid);
    --panel:var(--steel-mid);
    --line:#2f4155;
    --chalk:#eef2f7;
    --chalk-dim:#9aabbd;
    --amber:var(--amber-lit);
    color:var(--chalk);
  }
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  background:var(--tarmac);
  color:var(--chalk);
  font-family:var(--body);
  font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
::selection{background:var(--amber);color:var(--tarmac)}
h1,h2{font-family:var(--display);font-weight:400;line-height:.96;letter-spacing:.01em}
a{color:inherit;text-decoration:none}
em{font-style:normal}
img{max-width:100%;display:block}

.serial{font-size:.85em;color:#6d727c;letter-spacing:.2em;margin-left:.9em}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:var(--display);
  font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.85em 1.9em;border-radius:999px;
  transition:transform .25s cubic-bezier(.2,.9,.3,1.4), box-shadow .25s;
}
.btn--amber{background:var(--amber);color:var(--tarmac)}
.btn--amber:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 12px 40px rgba(255,180,0,.35)}
.btn--ghost{border:2px solid rgba(244,241,234,.35);color:var(--chalk);background:rgba(27,39,53,.30);backdrop-filter:blur(4px)}
.btn--ghost:hover{border-color:var(--amber);color:var(--amber);transform:translateY(-2px)}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;gap:2.2rem;
  padding:1rem 3.5vw;
  transition:background .4s, box-shadow .4s, padding .4s;
}
.nav.scrolled{background:rgba(241,239,233,.88);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line);padding:.6rem 3.5vw}
.nav__brand{display:flex;align-items:center;gap:.8rem}
.nav__roundel{width:42px;height:42px;flex:none}
.nav__word{font-family:var(--display);font-size:1.02rem;letter-spacing:.1em;white-space:nowrap}
.nav__word em{color:var(--amber)}
.nav__links{display:flex;gap:1.8rem;margin-left:auto;font-weight:600;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase}
.nav__links a{opacity:.75;transition:opacity .2s,color .2s}
.nav__links a:hover{opacity:1;color:var(--amber)}
.nav__cta{font-size:.85rem;padding:.7em 1.6em}

/* ---------- grain & vignette ---------- */
.grain{
  position:absolute;inset:-40px;pointer-events:none;z-index:9;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 1.1s steps(3) infinite;
}
@keyframes grainShift{0%{transform:translate(0,0)}33%{transform:translate(-14px,9px)}66%{transform:translate(11px,-13px)}100%{transform:translate(0,0)}}

/* ---------- texture utilities ---------- */
.tex-asphalt{
  position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.95 0 0 0 0 0.93 0 0 0 0 0.88 0 0 0 0.055 0'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23a)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;opacity:.9;
}
.edge{
  position:absolute;top:50%;z-index:6;
  font-weight:800;font-size:.6rem;letter-spacing:.5em;color:#5c6068;
  white-space:nowrap;pointer-events:none;user-select:none;
}
.edge--left{left:1.2vw;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl}
.edge--right{right:1.2vw;transform:translateY(-50%);writing-mode:vertical-rl}

/* ---------- hero ---------- */
.hero{
  min-height:100svh;position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  padding:12vh 0 clamp(9rem,16vh,13rem);
  isolation:isolate;
}

@keyframes kenburns{from{transform:scale(1) translateY(0)}to{transform:scale(1.07) translateY(-1.6%)}}


.hero__coords{
  position:absolute;top:calc(1.2rem + 74px);right:3.5vw;left:auto;text-align:right;z-index:6;
  font-size:.66rem;font-weight:700;letter-spacing:.3em;color:#6d727c;
  display:flex;flex-direction:column;gap:.2rem;
  animation:rise 1s 1.15s both;
}
.hero__coords span{color:#4c5058;letter-spacing:.22em}

.hero__comp{
  position:relative;z-index:3;
  width:min(1560px, 94vw);margin-inline:auto;
  display:grid;grid-template-columns:minmax(min(430px,42vw),1fr) minmax(0,1.22fr);
  align-items:center;gap:clamp(1rem,2.6vw,3.2rem);
}
.hero__typeblock{padding-left:2vw;will-change:transform,opacity}
.hero__eyebrow{
  display:flex;align-items:center;gap:.9rem;white-space:nowrap;
  font-weight:800;font-size:.74rem;letter-spacing:.4em;color:var(--amber);
  margin-bottom:3rem;animation:rise .8s .15s both;
}
.hero__eyebrow i{display:block;width:46px;height:3px;background:repeating-linear-gradient(90deg,var(--amber) 0 8px,transparent 8px 14px)}
.hero__title{display:flex;flex-direction:column;align-items:flex-start}
.hero__t{display:block;overflow:visible}
.hero__t{font-size:clamp(3.4rem,8.2vw,8.6rem);line-height:.92;letter-spacing:.005em}
.hero__t--1{color:var(--chalk-dim)}
.hero__t--2{
  color:transparent;-webkit-text-stroke:2.5px rgba(244,241,234,.85);
  font-size:clamp(4rem,9.6vw,10rem);
}
.hero__t--3{
  color:var(--chalk);font-size:clamp(4.6rem,11.4vw,12rem);
  text-shadow:0 34px 90px rgba(0,0,0,.75);
}
.hero__t--3 em{color:var(--amber);display:inline-block;animation:stamp .5s 1.05s cubic-bezier(.34,1.56,.64,1) both}
@keyframes stamp{from{transform:scale(0) rotate(-40deg)}to{transform:scale(1) rotate(0)}}
.hero__t--1{animation:wipeup .85s .3s cubic-bezier(.2,.7,.2,1) both}
.hero__t--2{animation:wipeup .85s .42s cubic-bezier(.2,.7,.2,1) both}
.hero__t--3{animation:wipeup .95s .54s cubic-bezier(.2,.7,.2,1) both}
@keyframes wipeup{from{opacity:0;transform:translateY(60%)}to{opacity:1;transform:none}}
.hero__sub{margin-top:2.4rem;font-size:1.12rem;color:var(--chalk-dim);animation:rise 1s .85s both}
.hero__ctas{display:flex;gap:1.1rem;margin-top:2.4rem;animation:rise 1s 1s both;flex-wrap:wrap}


.hero__cue{
  position:absolute;right:3.5vw;left:auto;bottom:calc(5vh + 104px);z-index:6;
  display:flex;align-items:center;gap:1rem;
  font-size:.66rem;font-weight:800;letter-spacing:.34em;color:var(--amber);
  animation:rise 1s 1.3s both;
}
.hero__cue svg{width:18px;animation:bob 1.8s ease-in-out infinite}
.marquee{
  position:absolute;left:0;right:0;bottom:calc(5vh + 36px);z-index:5;
  overflow:hidden;white-space:nowrap;
  border-block:1px solid rgba(255,180,0,.22);
  padding:.6rem 0;background:linear-gradient(180deg,rgba(27,39,53,.86),rgba(20,29,39,.94));
}
.marquee__track{display:inline-flex;align-items:center;gap:2.2rem;animation:marquee 26s linear infinite;will-change:transform}
.marquee__track span{font-family:var(--display);font-size:.92rem;letter-spacing:.24em;color:#8b8f98}
.marquee__track i{color:var(--amber);font-style:normal;font-size:.6rem}
@keyframes marquee{to{transform:translateX(-50%)}}
.hero__road{
  position:absolute;left:0;right:0;bottom:0;height:5vh;min-height:36px;z-index:5;
  border-top:3px solid var(--line);
  background:
    repeating-linear-gradient(90deg, var(--amber) 0 46px, transparent 46px 110px) center 42%/100% 4px no-repeat,
    linear-gradient(to bottom, #22303f, #16202b);
  animation:roadmove 14s linear infinite;
}
@keyframes roadmove{to{background-position-x:-110px, 0}}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
.br-d{display:block}

@media (max-height:700px){
  .hero__cue{display:none}
}
@media (max-height:660px){
  .hero__coords{display:none}
}
@media (max-width:980px){
  .hero{padding-bottom:26vh}
  .hero__comp{grid-template-columns:1fr;gap:0}
  .hero__typeblock{padding-left:6vw;padding-right:6vw}
  .hero__bike{margin-top:-6vw;transform:none;align-self:stretch;width:min(92vw,620px);margin-inline:auto}
  .hero__coords{display:none}
  .edge{display:none}
  .hero__cue{right:6vw;left:auto;bottom:calc(5vh + 92px)}
}

/* ---------- scrolly stage ---------- */
.scrolly{position:relative}
.scrolly__stage{
  position:sticky;top:0;height:100svh;overflow:hidden;
  background:
    radial-gradient(1200px 520px at 50% 108%, rgba(120,140,170,.10), transparent 70%),
    radial-gradient(760px 520px at 50% 22%, rgba(210,225,245,.055), transparent 72%),
    linear-gradient(180deg, #243343 0%, #1b2735 60%, #141d27 100%);
}
/* interior: a cool overhead worklight instead of the hero's warm night road */
.scrolly__stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    conic-gradient(from 210deg at 50% -14%, transparent 0deg, rgba(200,220,250,.055) 22deg, transparent 46deg),
    radial-gradient(120% 80% at 50% 0%, rgba(190,210,240,.07), transparent 60%);
}
.stage__bar{position:absolute;left:0;right:0;height:6.5vh;background:#131c26;z-index:8}
.stage__bar--top{top:0;box-shadow:0 1px 0 var(--line)}
.stage__bar--bottom{bottom:0;box-shadow:0 -1px 0 var(--line)}
.stage__ghost{
  position:absolute;left:50%;top:22%;transform:translate(-50%,-50%);
  font-family:var(--display);
  font-size:clamp(4.5rem,13vw,11rem);
  color:transparent;-webkit-text-stroke:1px rgba(244,241,234,.055);
  letter-spacing:.03em;white-space:nowrap;user-select:none;pointer-events:none;
  transition:opacity .5s;
}

/* photo rig */
.rig{
  position:absolute;
  left:var(--gutter, 3vw);
  top:50%;translate:0 -50%;
  /* the machine is an object in a room, not a wall of bicycle. It sits in the
     left column with real air around it — the component flight carries detail. */
  width:min(calc((100vw - var(--chapcol, 500px)) * 0.72), 720px);
  aspect-ratio:var(--plate-ar, 2200/1227);
  left:calc(var(--gutter,3vw) + (100vw - var(--chapcol,500px) - var(--gutter,3vw)) * 0.10);
}
.plate{position:absolute;inset:0;will-change:transform;transition:none}
.rig::before{
  content:"";position:absolute;left:12%;right:12%;bottom:4%;height:8%;z-index:-1;
  background:radial-gradient(50% 54% at 50% 62%, rgba(10,16,23,.92), rgba(10,16,23,.4) 48%, transparent 78%);
  filter:blur(10px);
}
.plate__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 22px 30px rgba(8,13,19,.45));
}
#plateExploded{opacity:0}
.rig__glow{
  position:absolute;left:4%;right:4%;bottom:-3%;height:22%;
  background:
    radial-gradient(46% 58% at 50% 72%, rgba(10,16,23,.85), transparent 72%),
    radial-gradient(34% 70% at 50% 92%, rgba(255,180,0,.16), transparent 68%);
  filter:blur(7px);
}
.rig__spot{
  /* sized to the ellipse instead of the whole rig: ~11x fewer screen-blended
     pixels per frame for exactly the same picture */
  position:absolute;left:var(--sx,50%);top:var(--sy,50%);
  width:26%;aspect-ratio:2.2/1;translate:-50% -50%;
  background:radial-gradient(closest-side circle, rgba(255,214,120,.28), transparent 72%);
  mix-blend-mode:screen;pointer-events:none;
  opacity:0;transition:opacity .5s;
}
.scrolly__stage:not([data-focus="intro"]):not([data-focus="rebuild"]) .rig__spot{opacity:1}
.rig__sweep{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(105deg, transparent 42%, rgba(255,255,255,.16) 50%, transparent 58%);
  transform:translateX(-120%);
}
.stage__hud{
  position:absolute;right:4vw;bottom:10vh;text-align:right;z-index:9;
  display:flex;flex-direction:column;line-height:1;
}
.hud__num{font-family:var(--display);font-size:4.4rem;color:var(--amber)}
.hud__unit{font-size:.64rem;font-weight:800;letter-spacing:.3em;color:var(--chalk-dim)}

/* chapters */
.scrolly__chapters{
  position:relative;z-index:10;
  margin-top:-100svh;
  width:min(var(--chapw, 420px), 84vw);
  margin-left:auto;margin-right:var(--gutter, 3vw);
  pointer-events:none;
}
.chapter{
  min-height:108svh;
  display:flex;flex-direction:column;justify-content:center;gap:1.15rem;
  pointer-events:auto;
  opacity:1;                      /* readable with no JS at all */
}
html.js-scrolly .chapter{opacity:0;transform:translateY(40px)}
.chapter__kicker{font-weight:800;font-size:.72rem;letter-spacing:.34em;color:var(--amber)}
.chapter__kicker--dark{color:#8a6d00}
.chapter h2{font-size:clamp(2.1rem,3.4vw,3.2rem);text-wrap:balance}
.chapter p{color:var(--chalk-dim)}
.chapter .btn{align-self:flex-start;margin-top:.6rem}

/* ---------- specs ---------- */
.specs{padding:16vh 6vw 12vh;background:var(--tarmac2);border-top:1px solid var(--line)}
.specs__title{font-family:var(--display);letter-spacing:.2em;color:var(--chalk-dim);text-align:center;margin-bottom:5rem;font-size:1rem}
.specs__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3.5rem 2rem;max-width:1100px;margin:0 auto}
.spec{display:flex;flex-direction:column;gap:.4rem;border-left:3px solid var(--amber);padding-left:1.4rem}
.spec__num{font-family:var(--display);font-size:clamp(3rem,6vw,5rem);line-height:1;color:var(--chalk)}
.spec__num em{font-size:.45em;color:var(--amber)}
.spec__label{font-size:.85rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--chalk-dim)}
.specs__note{max-width:1100px;margin:4rem auto 0;font-size:.8rem;color:#666b74}

/* ---------- soho ---------- */
.soho{
  display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:4vw;
  min-height:110svh;padding:14vh 6vw;
  background:
    radial-gradient(800px 500px at 30% 60%, rgba(255,180,0,.06), transparent 60%),
    var(--tarmac);
  border-top:1px solid var(--line);
  overflow:hidden;
}
.soho__stage{position:relative}
.soho__glow{position:absolute;left:10%;right:10%;bottom:2%;height:20%;background:radial-gradient(50% 100% at 50% 100%, rgba(255,180,0,.25), transparent 70%);filter:blur(12px)}
#sohoBike{width:100%;max-width:660px;filter:drop-shadow(0 40px 60px rgba(0,0,0,.55));will-change:transform;position:relative;z-index:1}
.soho__stage::after{content:"";position:absolute;left:0;right:0;bottom:-2%;height:30%;background:radial-gradient(52% 60% at 50% 80%, rgba(10,16,23,.9), transparent 74%);filter:blur(6px)}
.soho__dims{position:absolute;inset:0;pointer-events:none}
.dim{
  position:absolute;font-family:var(--display);font-size:.85rem;letter-spacing:.2em;color:var(--chalk-dim);
  border-left:2px solid var(--amber);padding:.3rem .7rem;background:rgba(27,39,53,.66);backdrop-filter:blur(6px);
}
.dim--a{top:6%;left:2%}
.dim--b{bottom:14%;right:4%}
.dim--c{bottom:2%;left:16%}
.soho__copy h2{font-size:clamp(2.6rem,4.4vw,4.2rem);margin:.8rem 0 1.4rem}
.soho__copy h2 span{color:var(--amber)}
.soho__copy p{color:var(--chalk-dim);max-width:52ch}
.soho__specs{list-style:none;margin:2rem 0;display:grid;gap:.85rem}
.soho__specs li{padding-left:1.4rem;position:relative;color:var(--chalk-dim)}
.soho__specs li::before{content:"";position:absolute;left:0;top:.62em;width:14px;height:3px;background:var(--amber)}
.soho__specs b{color:var(--chalk)}

/* ---------- story ---------- */
.story{background:var(--steel-deep);color:#eef2f7;padding:18vh 8vw;text-align:center;position:relative;overflow:hidden}
.story h1,.story h2{font-size:clamp(2.6rem,5.8vw,5.4rem);margin:1.6rem 0 2.6rem}
.story p{max-width:64ch;margin:0 auto;font-size:1.08rem;color:#d3dae4;line-height:1.7}
.story__road{position:absolute;top:0;left:0;right:0;height:8px;background:repeating-linear-gradient(90deg,var(--tarmac) 0 46px,transparent 46px 110px) center/100% 4px no-repeat}
.story__marks{margin-top:3.4rem;display:flex;flex-wrap:wrap;justify-content:center;gap:1.2rem;font-family:var(--display);letter-spacing:.14em;font-size:1rem}
.story__sep{color:var(--amber)}

/* ---------- reserve ---------- */
.reserve{padding:16vh 6vw;text-align:center;background:radial-gradient(800px 400px at 50% 0%, rgba(255,180,0,.08), transparent 60%), var(--tarmac)}
.reserve h2{font-size:clamp(3rem,8vw,7rem)}
.reserve__sub{color:var(--chalk-dim);margin:1.4rem 0 4rem}
.reserve__cards{display:flex;gap:2rem;justify-content:center;flex-wrap:wrap}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:20px;
  padding:2.2rem 2.8rem 2.6rem;min-width:300px;max-width:360px;
  display:flex;flex-direction:column;gap:.55rem;align-items:center;
  transition:transform .3s, border-color .3s, box-shadow .3s;
}
.card:hover{transform:translateY(-6px);border-color:var(--amber);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.card__bike{width:230px;height:190px;object-fit:contain;margin-bottom:.8rem;filter:drop-shadow(0 18px 26px rgba(0,0,0,.5))}
.card__bike--soho{width:250px}
.card__name{font-family:var(--display);font-size:2rem;letter-spacing:.05em}
.card__serial{font-size:.62rem;font-weight:800;letter-spacing:.3em;color:#6d727c}
.card__desc{color:var(--chalk-dim);font-size:.9rem}
.card__price{font-weight:800;font-size:.8rem;letter-spacing:.2em;color:var(--amber);margin-bottom:1rem}
.reserve__sub2{margin-top:4rem;font-size:.9rem;color:var(--chalk-dim);max-width:60ch;margin-inline:auto}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line);padding:8vh 6vw 6vh;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.4rem}
.footer__roundel{width:54px}
.footer__legal{max-width:78ch;font-size:.85rem;color:var(--chalk-dim)}
.footer__legal a{color:var(--amber)}
.footer__fine{max-width:78ch;font-size:.72rem;color:#565a63}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .nav__links{display:none}
  .rig{left:50%;translate:-50% -50%;top:38%;width:min(88vw,480px)}
  .rig__label{display:none}
  .scrolly__chapters{width:min(460px,92vw);margin-inline:auto}
  .chapter{justify-content:flex-end;padding-bottom:10vh;align-items:center;text-align:center}
  .chapter .btn{align-self:center}
  .stage__hud{right:5vw;bottom:8.5vh}
  .hud__num{font-size:2.8rem}
  .soho{grid-template-columns:1fr;gap:3rem}
  .specs__grid{grid-template-columns:1fr 1fr}
  .marquee{bottom:calc(4vh + 36px)}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .chapter{opacity:1;transform:none}
  .grain{display:none}
}


/* ---------- section furniture & texture pass ---------- */
.specs,.soho,.reserve,.story{position:relative;overflow:hidden}
.specs .tex-asphalt,.soho .tex-asphalt,.reserve .tex-asphalt{opacity:.7}
.secnum{
  position:absolute;top:4vh;right:3vw;z-index:1;
  font-family:var(--display);font-size:clamp(5rem,11vw,10rem);line-height:1;
  color:transparent;-webkit-text-stroke:2px rgba(244,241,234,.09);
  pointer-events:none;user-select:none;
}
.secnum--soft{font-size:clamp(4rem,8vw,7rem);-webkit-text-stroke:2px rgba(244,241,234,.06)}
.tex-paper{
  position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.1 0 0 0 0 0.09 0 0 0 0 0.07 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23p)'/%3E%3C/svg%3E");
}
.story{isolation:isolate}
.story .story__ghostword{
  /* .story p outranks a lone class for color, so the ghost word needs the
     extra specificity to stay a stroke-only watermark */
  position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);z-index:-1;
  color:transparent;
  font-family:var(--display);font-size:clamp(8rem,22vw,20rem);
  color:transparent;-webkit-text-stroke:2px rgba(13,13,15,.07);
  white-space:nowrap;pointer-events:none;user-select:none;
}
.story > *{position:relative}

/* chapter plates: technical-card treatment */
.chapter--plate{position:relative}
.chapter--plate::before{
  content:"";position:absolute;left:-1.6rem;top:12%;bottom:12%;
  width:1px;background:linear-gradient(to bottom, transparent, rgba(255,180,0,.5) 20%, rgba(255,180,0,.5) 80%, transparent);
}
.chapter--plate h2{position:relative}

/* specs: ruler ticks + plate borders */
.specs{border-top:1px solid var(--line)}
.specs::before{
  content:"";position:absolute;left:0;right:0;top:0;height:14px;
  background:repeating-linear-gradient(90deg, rgba(244,241,234,.14) 0 1px, transparent 1px 24px),
             repeating-linear-gradient(90deg, rgba(244,241,234,.28) 0 1px, transparent 1px 120px);
  background-size:auto 8px, auto 14px;background-repeat:repeat-x;
}
.spec{
  background:linear-gradient(180deg, rgba(244,241,234,.025), transparent 60%);
  border:1px solid rgba(244,241,234,.06);border-left:3px solid var(--amber);
  padding:1.4rem 1.4rem 1.2rem;border-radius:4px;
  position:relative;z-index:1;
}

/* soho dimension chips: dashed leaders */
.dim{border-left:none;padding-left:1rem}
.dim::before{
  content:"";position:absolute;left:0;top:50%;width:.7rem;height:1px;
  background:var(--amber);
}
.dim{box-shadow:0 0 0 1px rgba(244,241,234,.08), 0 18px 40px rgba(0,0,0,.4)}

/* reserve cards: serial plates */
.card{position:relative;z-index:1;background:linear-gradient(180deg,#fbfaf7,#f0ede5);overflow:hidden}
.card::before{
  content:"";position:absolute;left:1.4rem;right:1.4rem;top:0;height:3px;
  background:repeating-linear-gradient(90deg,var(--amber) 0 10px,transparent 10px 17px);
}
.card::after{
  content:"";position:absolute;inset:10px;border:1px solid rgba(244,241,234,.05);border-radius:12px;pointer-events:none;
}
.reserve h2,.reserve__sub,.reserve__cards,.reserve__sub2{position:relative;z-index:1}
.specs__title,.specs__grid,.specs__note{position:relative;z-index:1}


/* ---------- motion polish ---------- */
.nav{transform:translateY(0);transition:background .4s, box-shadow .4s, padding .4s, transform .45s cubic-bezier(.3,.7,.3,1)}
.nav.hidden{transform:translateY(-110%)}
.btn--amber{will-change:transform}
.hero__bike{will-change:transform}
.pageprog{
  position:fixed;left:0;top:0;height:3px;width:0;z-index:80;
  background:linear-gradient(90deg, var(--amber), #ffd34d);
  box-shadow:0 0 12px rgba(255,180,0,.55);
  pointer-events:none;
}
.stage__ghost{will-change:transform}
@media (prefers-reduced-motion: reduce){.pageprog{display:none}}

/* debug harness */
body.debug .hero,body.debug .marquee{display:none}
body.debug .scrolly__chapters{visibility:hidden}

/* tagline beside the roundel: same weight as the printed lockup, never dimmer than the nav text */
.nav__expand{font-size:.78em;letter-spacing:.26em;color:inherit;margin-left:.15em}
.nav__word em{color:var(--amber)}


/* ---------- multi-page components ---------- */
.pagehead{
  padding:22vh 6vw 8vh;text-align:center;position:relative;overflow:hidden;
  background:radial-gradient(900px 400px at 50% 0%, rgba(255,180,0,.07), transparent 60%), var(--tarmac);
}
.pagehead h1{font-size:clamp(4rem,12vw,11rem)}
.pagehead h1 em{color:var(--amber)}
.pagehead__sub{color:var(--chalk-dim);margin-top:1rem;font-size:1.05rem;letter-spacing:.06em}
.fleet{padding:14vh 6vw;position:relative;overflow:hidden;border-top:1px solid var(--line)}
.fleet__grid{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;max-width:1250px;margin:0 auto}
.fleetcard{
  position:relative;border:1px solid var(--line);border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,#fbfaf7,#efece4);
  transition:transform .35s cubic-bezier(.2,.8,.3,1.2), border-color .35s, box-shadow .35s;
}
.fleetcard:hover{transform:translateY(-8px);border-color:var(--amber);box-shadow:0 40px 90px rgba(0,0,0,.55)}
.fleetcard img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center 40%}
.fleetcard__meta{padding:1.6rem 1.9rem 1.9rem;display:flex;flex-direction:column;gap:.35rem}
.fleetcard__meta b{font-family:var(--display);font-weight:400;font-size:1.7rem;letter-spacing:.05em}
.fleetcard__meta span{font-size:.62rem;font-weight:800;letter-spacing:.3em;color:#6d727c}
.fleetcard__meta p{color:var(--chalk-dim);font-size:.92rem;margin:.5rem 0}
.fleetcard__meta em{color:var(--amber);font-family:var(--display);letter-spacing:.12em;font-size:.95rem}
@media (max-width:900px){.fleet__grid{grid-template-columns:1fr}}

/* hero 3D tech backdrop */


.hero 
.story__photo{
  position:absolute;inset:0;opacity:.16;pointer-events:none;
  background:url("assets/story-street.webp") center/cover no-repeat;
  mix-blend-mode:multiply;
}

.story__tools{max-width:520px;margin:3.5rem auto 0;border-radius:16px;overflow:hidden;box-shadow:0 30px 80px rgba(13,13,15,.35)}
.story__tools img{width:100%}
.story__tools figcaption{font-size:.62rem;font-weight:800;letter-spacing:.3em;color:#9aabbd;padding:.7rem;background:#22303f;text-align:center}
#sohoBike{transition:opacity .5s}

.card__bike--render{width:260px;height:170px;object-fit:cover;object-position:center 42%;border-radius:12px;filter:none}
.story p b{color:inherit;font-weight:800}


/* ---------- basket ---------- */
.basketbtn{
  position:relative;background:none;border:none;color:var(--chalk);cursor:pointer;
  width:44px;height:44px;display:grid;place-items:center;transition:color .2s;padding:0;
}
.basketbtn:hover{color:var(--amber)}
.basketbtn__n[hidden]{display:none}
.basketbtn__n{
  position:absolute;top:0;right:0;min-width:17px;height:17px;border-radius:9px;
  background:var(--amber);color:var(--tarmac);font-size:.62rem;font-weight:800;
  display:grid;place-items:center;padding:0 4px;font-style:normal;
}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,94vw);z-index:90;
  background:#1b2735;border-left:1px solid #2f4155;
  display:flex;flex-direction:column;
  max-width:100vw;
  transform:translateX(100%);
  visibility:hidden;opacity:0;pointer-events:none;
  transition:transform .45s cubic-bezier(.3,.8,.3,1), visibility 0s .45s, opacity .3s;
  box-shadow:-30px 0 80px rgba(0,0,0,.5);
  contain:paint;
}
.drawer.open{transform:none;visibility:visible;opacity:1;pointer-events:auto;transition:transform .45s cubic-bezier(.3,.8,.3,1), visibility 0s, opacity .3s}
.drawer__scrim{position:fixed;inset:0;z-index:85;background:rgba(14,21,29,.62);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s, visibility 0s .4s}
.drawer__scrim.open{opacity:1;visibility:visible;pointer-events:auto;backdrop-filter:blur(3px);transition:opacity .4s, visibility 0s}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:1.3rem 1.5rem;border-bottom:1px solid var(--line)}
.drawer__head b{font-family:var(--display);font-weight:400;letter-spacing:.14em;font-size:1.15rem}
.drawer__close{background:none;border:none;color:var(--chalk-dim);font-size:1.9rem;cursor:pointer;line-height:1;padding:.2rem .5rem}
.drawer__close:hover{color:var(--amber)}
.drawer__items{flex:1;overflow-y:auto;padding:1.2rem 1.5rem;display:flex;flex-direction:column;gap:1.1rem}
.drawer__empty{color:var(--chalk-dim);text-align:center;margin-top:3rem}
.drawer__item{display:grid;grid-template-columns:86px 1fr auto;gap:1rem;align-items:center}
.drawer__item img{width:86px;height:60px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.drawer__meta{display:flex;flex-direction:column;gap:.1rem}
.drawer__meta b{font-family:var(--display);font-weight:400;letter-spacing:.06em}
.drawer__meta span{font-size:.58rem;font-weight:800;letter-spacing:.26em;color:#6d727c}
.drawer__meta em{color:var(--amber);font-size:.85rem;font-weight:700}
.drawer__qty{display:flex;align-items:center;gap:.55rem}
.drawer__qty span{min-width:1.5ch;text-align:center}
.drawer__qty button{
  width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:none;
  color:var(--chalk);font-size:1.15rem;cursor:pointer;
}
.drawer__qty button:hover{border-color:var(--amber);color:var(--amber)}
.drawer__foot{padding:1.3rem 1.5rem 1.6rem;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:.9rem}
.drawer__total{display:flex;justify-content:space-between;align-items:center}
.drawer__total span{font-size:.66rem;font-weight:800;letter-spacing:.3em;color:var(--chalk-dim)}
.drawer__total b{font-family:var(--display);font-weight:400;font-size:1.3rem}
.drawer__checkout{width:100%;text-align:center}
.drawer__note{font-size:.74rem;color:#6d727c;transition:color .3s}
.drawer__note--flash{color:var(--amber)}
.card__waitlist{display:block;margin-top:.7rem;font-size:.76rem;color:var(--chalk-dim)}
.card__waitlist:hover{color:var(--amber)}
.btn.added{background:#3ec46d;color:#08210f}

/* ============================================================
   MOBILE — clean rhythm system
   ============================================================ */
@media (max-width:700px){
  html,body{overflow-x:clip}
  body{font-size:16px}

  /* nav: compact */
  .nav{gap:.7rem;padding:.55rem 4vw}
  .nav.scrolled{padding:.45rem 4vw}
  .nav__roundel{width:30px;height:30px}
  .nav__word{font-size:.82rem;letter-spacing:.08em}
  .nav__expand{display:none}
  .nav__cta{padding:.55em 1.1em;font-size:.72rem}

  /* hero: stacked, breathing, no collisions */
  .hero{padding:12vh 0 16vh;min-height:auto}
  .hero__typeblock{padding-inline:6vw}
  .hero__eyebrow{
    font-size:.58rem;letter-spacing:.22em;line-height:1.9;
    margin-bottom:1.6rem;max-width:30ch;
  }
  .hero__eyebrow i{display:none}
  .hero__t{font-size:clamp(2.6rem,14vw,3.6rem)}
  .hero__t--2{font-size:clamp(3rem,16.5vw,4.2rem);-webkit-text-stroke:1.8px rgba(244,241,234,.85)}
  .hero__t--3{font-size:clamp(3.5rem,19vw,5rem)}
  .hero__sub{margin-top:1.4rem;font-size:.98rem;max-width:32ch}
  .hero__ctas{flex-direction:column;align-items:stretch;gap:.75rem;margin-top:1.8rem;max-width:340px}
  .hero__ctas .btn{text-align:center;padding:.9em 1.2em;font-size:.95rem}
  .hero__bike{margin-top:.6rem;transform:none;width:min(104vw,560px);margin-inline:auto}
  .hero__cue{display:none}
  .hero__coords{display:none}
  .marquee{position:relative;bottom:auto;margin-top:1rem}
  .marquee__track span{font-size:.72rem}
  .hero__road{position:relative;margin-top:0}

  /* scrolly: full-bleed stage, tidy cards */
  .rig{width:100vw;left:50%;translate:-50% -50%;top:36%}
  .stage__ghost{font-size:clamp(3.6rem,24vw,7rem);max-width:100vw}
  .stage__hud{display:none}
  .stage__bar{height:4vh}
  .scrolly__chapters{width:92vw;margin-inline:auto}
  .chapter{min-height:100svh;justify-content:flex-end;padding-bottom:8vh;align-items:stretch;text-align:left;gap:.8rem}
  .chapter__kicker{font-size:.6rem;letter-spacing:.22em}
  .chapter h2{font-size:1.7rem;line-height:1.05}
  .chapter p{font-size:.92rem;line-height:1.55}
  .chapter .btn{align-self:flex-start;font-size:.9rem;padding:.8em 1.5em}
  .secnum{font-size:3.4rem;top:1.6vh;right:4vw;-webkit-text-stroke:1.5px rgba(244,241,234,.09)}

  /* sections: unified rhythm */
  .fleet,.specs,.soho,.story,.reserve{padding:4.5rem 6vw}
  .specs__title{margin-bottom:2.6rem;font-size:.9rem}
  .specs__grid{grid-template-columns:1fr;gap:1.4rem}
  .spec{padding:1.1rem 1.2rem 1rem}
  .spec__num{font-size:2.6rem}
  .spec__label{font-size:.74rem}
  .specs__note{margin-top:2rem;font-size:.72rem}
  .fleet__grid{grid-template-columns:1fr;gap:1.6rem}
  .fleetcard__meta{padding:1.1rem 1.2rem 1.3rem}
  .fleetcard__meta b{font-size:1.4rem}
  .fleetcard__meta p{font-size:.85rem}

  /* jack flash: dims below the bike, not on it */
  .soho{grid-template-columns:1fr;gap:1.6rem}
  .soho__stage{margin-inline:calc(50% - 50vw);width:100vw}
  .soho__dims{position:static;display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:.8rem;inset:auto}
  .dim{position:static;font-size:.66rem;padding:.35rem .7rem}
  .soho__copy h2{font-size:2.2rem}
  .soho__copy p{font-size:.95rem}
  .soho__specs{margin:1.4rem 0}
  .soho__specs li{font-size:.9rem}

  /* story */
  .story h1,.story h2{font-size:2.1rem;line-height:1.1}
  .story p{font-size:.95rem}
  .story__ghostword{font-size:clamp(4rem,20vw,6rem)}
  .story__marks{margin-top:2.2rem;gap:.7rem;font-size:.78rem}
  .story__tools{max-width:100%;margin-top:2.4rem}

  /* reserve + cards */
  .reserve h2{font-size:2.7rem}
  .reserve__sub{margin:1rem 0 2.2rem;font-size:.95rem}
  .reserve__cards{gap:1.4rem}
  .card{min-width:0;width:100%;padding:1.6rem 1.3rem 1.8rem}
  .card__bike--render{width:100%;height:150px}
  .card__name{font-size:1.6rem}
  .reserve__sub2{margin-top:2.2rem;font-size:.8rem}

  /* pageheads */
  .pagehead{padding:16vh 6vw 4rem}
  .pagehead h1{font-size:clamp(2.8rem,15vw,4.6rem)}
  .pagehead__sub{font-size:.95rem}

  /* footer */
  .footer{padding:3.5rem 6vw 2.5rem;gap:1rem}
  .footer__roundel{width:42px}
  .footer__legal{font-size:.76rem}
  .footer__fine{font-size:.65rem}
  .edge{display:none}
}


/* ============================================================
   HERO — layered depth: architecture → road → haze → product
   ============================================================ */




.hero__bike{
  position:relative;z-index:4;margin:0;
  --ty:-4%; --sc:1; --px:0px; --edge:0; --turn:0;
  width:100%;max-width:860px;justify-self:end;
  transform:translateY(var(--ty)) translateX(var(--px)) scale(var(--sc));
  perspective:1900px;
  animation:bikein 1.4s .55s cubic-bezier(.16,1.05,.3,1) both;
  will-change:transform,opacity;
}
@keyframes bikein{from{opacity:0;transform:translateY(-1%) scale(.95)}to{opacity:1;transform:translateY(var(--ty)) scale(var(--sc))}}
.hero__bike img.hero__img{
  width:100%;
  filter:drop-shadow(0 44px 46px rgba(0,0,0,.62));
  mask-image:none;-webkit-mask-image:none;
}



/* additive street-lamp plate — pure light, screen-blended */


/* CTAs: bigger targets, clearer affordance */
.hero__ctas{gap:1rem}
.hero__ctas .btn{padding:1.05em 2.3em;font-size:1.08rem;position:relative;overflow:hidden}
.btn--amber::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.45) 50%,transparent 62%);
  transform:translateX(-120%);transition:transform .6s cubic-bezier(.3,.8,.3,1);
}
.btn--amber:hover::after{transform:translateX(120%)}
.btn:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.hero__cue{cursor:pointer}


/* ============================================================
   HERO ENVIRONMENT — designed in CSS. One light, one product.
   ============================================================ */
.hero{background:var(--steel-deep)}
.env{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.env>div{position:absolute;inset:0}
/* deep sky, cool and almost black */
.env__sky{
  background:
    radial-gradient(150% 100% at 50% 100%, #2b3d51 0%, #1e2b3a 42%, #141d27 78%);
}
/* the horizon: a single soft band that gives the room its distance */
.env__horizon{
  background:
    linear-gradient(to bottom, transparent 0 54%, rgba(150,180,220,.10) 58%, rgba(150,180,220,.03) 61%, transparent 66%),
    radial-gradient(60% 12% at 50% 60%, rgba(190,215,255,.16), transparent 70%);
  filter:blur(.5px);
}
/* floor plane — slightly lifted, receding */
.env__floor{
  top:60%;bottom:0;
  background:
    linear-gradient(to bottom, rgba(120,145,180,.09) 0%, rgba(10,12,16,0) 46%),
    radial-gradient(70% 90% at 50% 0%, rgba(160,190,230,.10), transparent 68%);
}
/* the key light the product sits in */
.env__key{
  background:radial-gradient(38% 44% at 68% 52%, rgba(190,215,255,.14), transparent 72%);
}
/* one warm accent — the brand colour as a light source, low and behind */
.env__warm{
  background:radial-gradient(30% 26% at 62% 74%, rgba(255,176,60,.16), transparent 74%);
  mix-blend-mode:screen;
}
.env__vig{
  background:radial-gradient(130% 105% at 55% 48%, transparent 46%, rgba(11,17,24,.86) 100%);
}

/* ============================================================
   HERO STAGE — a lit studio set, not a mirrored floor.
   The bike is the only object with a highlight on it.
   Measured off assets/jack-side-cut.webp (1162x782):
     rear wheel centre  21.0% / 70%      front wheel centre 78.5% / 70%
     wheel diameter     39.6% of width   rear contact patch 21% / 100%
   ============================================================ */
.hero__bike{position:relative}

/* the source: a softbox up and to the left, mostly out of shot */
/* the machine lifted off the ground by a halo of light behind it */
/* the pool the whole set stands in */
/* the turntable: an ellipse with a highlight that travels round it */
/* two tight contact shadows, one per tyre — the front one leaves on the wheelie */
.set__contact{
  position:absolute;bottom:-1.5%;height:4.4%;z-index:1;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(8,13,19,.96), rgba(8,13,19,.3) 56%, transparent 78%);
  filter:blur(6px);
}
.set__contact--r{left:9%;width:24%;opacity:var(--cr,1)}
.set__contact--f{left:66.5%;width:24%;opacity:var(--cf,1)}
.riding 
/* the machine and everything welded to it */
@keyframes focusspin{to{transform:rotate(360deg)}}

.focus__item{
  position:absolute;left:var(--fx,50%);top:var(--fy,50%);
  /* max-width:100% from the reset was silently clamping every exploded plate to
     the rig box, so the per-part widths below never took effect and the plates
     all rendered at the same size. They are absolutely positioned and centred,
     and a plate is meant to be wider than the machine it came off, so opt out. */
  width:min(42vmin,400px);max-width:none;height:auto;object-fit:contain;
  opacity:var(--fo,0);
  transform:translate(-50%,-50%) translate(var(--fdx,0px),var(--fdy,0px)) scale(var(--fs,.11)) rotate(var(--fr,0deg));
  filter:drop-shadow(0 22px 34px rgba(8,13,19,.55))
         drop-shadow(0 0 var(--fglow,0px) rgba(255,175,40,.32));
  will-change:transform,opacity,filter;
}
.focus__item[data-part="battery"]{width:min(30vmin,300px)}
.focus__item[data-part="control"]{width:min(58vmin,560px)}
.focus__item[data-part="motor"]{width:min(38vmin,360px)}
.focus__item[data-part="wheels"]{width:min(20vmin,193px)}

/* The exploded twin of each part is a much wider plate than the assembled
   still (a row of components on an axis, not one object), so it needs its own
   width or the hand-over reads as the part shrinking. These must stay AFTER
   the rules above: same specificity, so source order decides. */
/* The exploded plate is shifted so the component that IS the assembled part
   sits exactly where the assembled part was. The translate comes AFTER scale()
   in the chain, so it is expressed in the element's own box and scales with
   --fs — the two layers stay registered at every size, and the hand-over reads
   as that component opening out rather than as a new picture appearing. */
.focus__item--split{
  width:min(72vmin,700px);
  transform:translate(-50%,-50%) translate(var(--fdx,0px),var(--fdy,0px)) scale(var(--fs,.11))
            translate(var(--sdx,0%),var(--sdy,0%)) rotate(var(--fr,0deg));
}
.focus__item--split[data-part="battery"]{width:min(71.3vmin,713px);--sdx:-29%}
.focus__item--split[data-part="motor"]{width:min(75vmin,710px);--sdx:-1%;--sdy:8%}
.focus__item--split[data-part="wheels"]{width:min(72.5vmin,700px);--sdx:30.8%}
.focus__item--split[data-part="control"]{width:min(94vmin,900px)}

/* the machine itself sinks away in exact step with the part coming forward */
.rig .plate{
  /* opacity alone. A blur on a raster plate at this scale does not read as
     depth of field, it reads as a mistake — and it cost a filter pass a frame. */
  opacity:calc(1 - var(--hold,0) * .86);
}

@media (max-width:720px){
  .focus__ring{width:min(62vw,270px)}
  .focus__beam{width:min(150vw,560px)}
  .focus__item{width:min(64vw,290px)}
  .focus__item[data-part="battery"]{width:min(46vw,220px)}
  .focus__item[data-part="control"]{width:min(84vw,380px)}
  .focus__item[data-part="motor"]{width:min(66vw,300px)}
  /* same hand-over on phones — must follow the rules above to win on order */
  .focus__item--split{width:min(94vw,430px)}
  .focus__item--split[data-part="battery"]{width:min(88vw,400px);--sdx:0%}
  .focus__item--split[data-part="motor"]{width:min(92vw,420px);--sdx:0%;--sdy:0%}
  .focus__item--split[data-part="wheels"]{width:min(94vw,430px);--sdx:0%}
  .focus__item--split[data-part="control"]{width:min(96vw,440px)}
}
@media (prefers-reduced-motion: reduce){
  .focus__ring::after{animation:none}
}

/* ============================================================
   MOBILE NAV SHEET — the range no longer fits a bar
   ============================================================ */
.navtoggle{
  display:none;margin-left:auto;order:9;
  width:44px;height:44px;border:0;border-radius:12px;
  background:rgba(244,241,234,.06);border:1px solid var(--line);
  cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center;
}
.navtoggle i{display:block;width:17px;height:2px;background:var(--chalk);border-radius:2px;
  transition:transform .3s cubic-bezier(.3,.8,.3,1), opacity .2s}
.navopen .navtoggle i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navopen .navtoggle i:nth-child(2){opacity:0}
.navopen .navtoggle i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.navsheet{
  position:fixed;inset:0;z-index:55;
  background:rgba(23,33,45,.96);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s, visibility 0s .3s;
}
.navopen .navsheet{opacity:1;visibility:visible;pointer-events:auto;backdrop-filter:blur(18px);transition:opacity .3s}
html.navopen,body.navopen{overflow:hidden}
.navsheet__inner{
  position:absolute;inset:0;
  display:flex;flex-direction:column;gap:.2rem;
  padding:5.5rem 7vw 2.5rem;
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
}
.navopen .nav{background:rgba(23,33,45,.96);transform:none}
.navsheet__inner a:not(.btn){
  font-family:var(--display);font-size:clamp(2rem,9vw,2.8rem);
  letter-spacing:.02em;text-transform:uppercase;
  line-height:1.05;
  padding:.5em 0;border-bottom:1px solid rgba(244,241,234,.08);
  opacity:0;transform:translateY(14px);
}
.navopen .navsheet__inner a:not(.btn){
  opacity:1;transform:none;
  transition:opacity .4s ease var(--d,0s), transform .5s cubic-bezier(.2,.8,.3,1) var(--d,0s);
}
.navsheet__cta{align-self:stretch;text-align:center;margin-top:1.2rem}

@media (max-width:980px){
  .navtoggle{display:flex}
  .nav__cta{display:none}
}

/* ============================================================
   COLOURWAY SWITCHER
   ============================================================ */
.colourway{
  display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;
  padding:1.1rem 0 0;
}
.colourway__label{
  font-size:.66rem;letter-spacing:.3em;color:#6d727c;text-transform:uppercase;
}
.colourway__name{
  font-family:var(--display);font-size:1rem;letter-spacing:.12em;color:var(--chalk);
}
.swatches{display:flex;gap:.65rem}
.swatch{
  width:44px;height:44px;border-radius:50%;padding:0;cursor:pointer;
  border:2px solid rgba(244,241,234,.22);
  background:var(--sw,#111);
  transition:transform .2s cubic-bezier(.2,.9,.3,1.4), border-color .2s, box-shadow .2s;
  position:relative;
}
.swatch:hover{transform:scale(1.08);border-color:rgba(244,241,234,.5)}
.swatch.is-on{border-color:var(--amber);box-shadow:0 0 0 3px rgba(255,180,0,.16)}
.swatch:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
[data-swap]{transition:opacity .22s ease}
[data-swap].swapping{opacity:0}

/* ============================================================
   OFF-ROAD NOTICE — the Rover and the Nomad are not EAPCs
   ============================================================ */
.offroad{
  position:relative;z-index:2;
  margin:0 auto;max-width:1180px;
  padding:1.4rem 1.5rem;
  display:flex;gap:1.1rem;align-items:flex-start;
  border:1px solid rgba(255,180,0,.32);
  border-left:4px solid var(--amber);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,180,0,.075), rgba(255,180,0,.025));
}
.offroad__mark{
  flex:none;width:34px;height:34px;color:var(--amber);
}
.offroad b{display:block;font-family:var(--display);font-weight:400;font-size:1.02rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--amber);margin-bottom:.35rem}
/* (0,1,2) beats (0,1,1) — inline <b> inside the prose stays inline whatever the source order */
.offroad p b{display:inline;font-family:var(--body);font-weight:600;font-size:1em;
  letter-spacing:0;text-transform:none;color:var(--chalk);margin-bottom:0}
.offroad p{font-size:.92rem;line-height:1.6;color:var(--chalk-dim)}
.offroad p + p{margin-top:.5rem}
.offroad--band{margin:0 auto 0;}
.offroad-wrap{padding:3rem var(--gutter) 0;position:relative;z-index:2}

.footer__legal--warn{color:#cbb98f}
.footer__legal--warn b{color:var(--amber)}

/* the pill that sits under a non-road-legal model's name */
.tag-offroad{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  padding:.5em 1em;border-radius:999px;
  border:1px solid rgba(255,180,0,.4);color:var(--amber);
  background:rgba(255,180,0,.07);
}

/* ============================================================
   PRODUCT HERO — colour configurator at the top of a model page
   ============================================================ */
.prodhero{
  position:relative;overflow:hidden;
  padding:clamp(7rem,13vh,10rem) var(--gutter) clamp(3rem,6vh,5rem);
  background:radial-gradient(120% 90% at 50% 8%, #26364a 0%, #16202b 62%);
}
.prodhero__grid{
  max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  gap:clamp(1.6rem,4vw,3.6rem);align-items:center;
}
.prodhero__copy{display:flex;flex-direction:column;gap:.9rem;align-items:flex-start}
.prodhero__copy h1{font-size:clamp(2.8rem,7vw,5.4rem)}
.prodhero__copy h1 em{color:var(--amber)}
.prodhero__lead{color:var(--chalk-dim);max-width:46ch}
.prodhero__price{
  font-family:var(--display);font-size:1.15rem;letter-spacing:.14em;color:var(--chalk);
}
.prodhero__ctas{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:.5rem}
.prodhero__stage{position:relative;display:grid;place-items:center;min-height:min(52vh,460px)}
.prodhero__glow{
  position:absolute;inset:-8%;
  background:radial-gradient(52% 46% at 50% 52%, rgba(255,180,0,.15), rgba(90,110,160,.06) 46%, transparent 72%);
  filter:blur(6px);
}
.prodhero__img{position:relative;width:100%;filter:drop-shadow(0 40px 60px rgba(0,0,0,.7))}
.prodhero__floor{
  position:absolute;left:8%;right:8%;bottom:6%;height:8%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.9), transparent 74%);
  filter:blur(10px);
}

@media (max-width:900px){
  .prodhero__grid{grid-template-columns:1fr;gap:1.6rem}
  .prodhero__stage{order:-1;min-height:auto}
  .prodhero{padding-top:clamp(6rem,11vh,8rem)}
  .prodhero__copy{align-items:flex-start}
}
@media (max-width:720px){
  /* label on its own line, swatches and the chosen name together underneath —
     flex-wrap was orphaning the name onto a third row */
  .colourway{display:grid;grid-template-columns:auto 1fr;grid-template-areas:'lab lab' 'sw name';
    align-items:center;gap:.5rem .9rem}
  .colourway__label{grid-area:lab}
  .swatches{grid-area:sw}
  .colourway__name{grid-area:name}
  .offroad{flex-direction:column;gap:.7rem;padding:1.15rem 1.15rem}
  .offroad-wrap{padding:2.2rem 5vw 0}
  .colourway{gap:.8rem}
}

/* near-square product plates size themselves by height, not width, so the
   machine fills the stage instead of letterboxing inside a 16:9 rig */
.rig--tall{
  width:auto;height:min(70svh,640px);
  aspect-ratio:var(--plate-ar,1);
}
@media (max-width:980px){
  .rig--tall{width:min(84vw,460px);height:auto;left:50%;translate:-50% -50%;top:36%}
}
@media (max-width:720px){
  .rig--tall{width:min(92vw,420px);top:34%}
}

/* ============================================================
   TECHNICAL DOCUMENTATION
   ============================================================ */
.pagehead--doc{padding-bottom:2rem}
.doc{
  position:relative;z-index:2;
  max-width:1240px;margin:0 auto;
  padding:2rem var(--gutter) 6rem;
  display:grid;grid-template-columns:200px minmax(0,1fr);
  gap:clamp(1.6rem,4vw,3.4rem);align-items:start;
}
.docnav{position:sticky;top:96px;display:flex;flex-direction:column;gap:.1rem}
.docnav b{
  font-size:.62rem;letter-spacing:.3em;color:#6d727c;text-transform:uppercase;
  padding-bottom:.7rem;
}
.docnav a{
  font-size:.82rem;letter-spacing:.04em;color:var(--chalk-dim);
  padding:.48rem 0 .48rem .85rem;border-left:2px solid var(--line);
  transition:color .2s,border-color .2s;
}
.docnav a:hover{color:var(--amber);border-color:var(--amber)}
.docbody{display:flex;flex-direction:column;gap:3.4rem;min-width:0}

.docsec{scroll-margin-top:100px}
.docsec__head{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
.docsec__n{
  font-family:var(--display);font-size:.9rem;letter-spacing:.2em;color:var(--amber);
}
.docsec h2{font-size:clamp(1.5rem,3vw,2.1rem)}
.docsec > p{color:var(--chalk-dim);max-width:74ch;margin-bottom:1.1rem}

.doccard{
  border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(180deg, rgba(23,24,28,.9), rgba(15,16,19,.9));
  overflow:hidden;
}
.doccard + .doccard{margin-top:1.2rem}
.doccard__head{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:1rem 1.3rem;border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.015);
}
.doccard__head img{width:92px;flex:none;border-radius:8px}
.doccard__title{font-family:var(--display);font-size:1.2rem;letter-spacing:.11em}
.doccard__sub{font-size:.68rem;letter-spacing:.24em;color:#6d727c;text-transform:uppercase}
.doccard__head > div{margin-right:auto}

.pill{
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.45em .9em;border-radius:999px;white-space:nowrap;
}
.pill--legal{background:rgba(120,220,150,.12);color:#7fd8a0;border:1px solid rgba(120,220,150,.32)}
.pill--offroad{background:rgba(255,180,0,.1);color:var(--amber);border:1px solid rgba(255,180,0,.36)}

.spectable{width:100%;border-collapse:collapse;font-size:.88rem}
.spectable th,.spectable td{
  text-align:left;padding:.72rem 1.3rem;border-bottom:1px solid rgba(38,39,44,.7);
  vertical-align:top;
}
.spectable th{
  width:38%;font-weight:600;color:#8d9099;font-size:.74rem;
  letter-spacing:.12em;text-transform:uppercase;
}
.spectable td{color:var(--chalk)}
.spectable tr:last-child th,.spectable tr:last-child td{border-bottom:0}
.spectable td b{color:var(--amber)}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

.matrix{width:100%;border-collapse:collapse;font-size:.86rem;min-width:640px}
.matrix th,.matrix td{padding:.75rem 1rem;border:1px solid var(--line);text-align:left}
.matrix thead th{
  background:rgba(255,255,255,.03);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:#8d9099;
}
.matrix tbody th{font-weight:600;color:var(--chalk);white-space:nowrap}
.matrix .yes{color:#7fd8a0}
.matrix .no{color:#e08a7a}

.checklist{display:grid;gap:.55rem;margin-top:.4rem}
.checklist li{
  list-style:none;display:flex;gap:.8rem;align-items:flex-start;
  font-size:.9rem;color:var(--chalk-dim);
  padding:.8rem 1rem;border:1px solid var(--line);border-radius:10px;
  background:rgba(255,255,255,.012);
}
.checklist li b{color:var(--chalk);display:block;margin-bottom:.15rem}
.checklist i{
  flex:none;width:8px;height:8px;border-radius:50%;margin-top:.45rem;background:var(--amber);
}
.checklist li[data-state="done"] i{background:#7fd8a0}
.checklist li[data-state="open"] i{background:#e08a7a}

@media (max-width:900px){
  .doc{grid-template-columns:1fr;gap:1.6rem}
  .docnav{position:static;flex-direction:row;flex-wrap:wrap;gap:.4rem}
  .docnav b{width:100%;padding-bottom:.3rem}
  .docnav{gap:0;border-top:1px solid var(--line)}
  .docnav a{
    border:0;border-bottom:1px solid var(--line);border-radius:0;
    width:100%;padding:.85rem .2rem;font-size:.82rem;
    display:flex;align-items:center;min-height:44px;
  }
  .spectable th,.spectable td{padding:.62rem .9rem;font-size:.84rem}
  .spectable th{width:44%}
  .doccard__head img{width:70px}
}

/* ============================================================
   INFO DECK — who we are
   ============================================================ */
.deck{padding:0 0 4rem}
.panel{
  position:relative;
  min-height:auto;
  padding:clamp(3rem,8vh,6rem) var(--gutter);
  border-top:1px solid var(--line);
}
.panel__inner{max-width:1180px;margin:0 auto;display:grid;gap:1.2rem}
.panel__n{
  font-family:var(--display);font-size:clamp(3rem,9vw,6.4rem);
  color:transparent;-webkit-text-stroke:1.5px rgba(244,241,234,.13);
  line-height:.8;
}
.panel h2{font-size:clamp(1.8rem,4.2vw,3rem);max-width:20ch}
.panel h2 em{color:var(--amber)}
.panel p{color:var(--chalk-dim);max-width:70ch}
.panel--amber{background:linear-gradient(180deg, rgba(255,180,0,.05), transparent 70%)}

.deckgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem;margin-top:.8rem}
.deckbox{
  border:1px solid var(--line);border-radius:14px;padding:1.2rem 1.25rem;
  background:linear-gradient(180deg, rgba(23,24,28,.85), rgba(14,15,18,.85));
}
.deckbox b{
  display:block;font-family:var(--display);font-size:1.9rem;letter-spacing:.02em;
  color:var(--amber);line-height:1;margin-bottom:.5rem;
}
.deckbox span{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:#8d9099;display:block;margin-bottom:.5rem}
.deckbox p{font-size:.88rem;color:var(--chalk-dim)}

.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.9rem;margin-top:.8rem;counter-reset:flow}
.flowstep{
  position:relative;border:1px solid var(--line);border-radius:14px;padding:1.15rem 1.2rem;
  background:rgba(255,255,255,.014);
}
.flowstep::before{
  counter-increment:flow;content:counter(flow,decimal-leading-zero);
  font-family:var(--display);font-size:.78rem;letter-spacing:.2em;color:var(--amber);
  display:block;margin-bottom:.5rem;
}
.flowstep b{display:block;margin-bottom:.35rem;font-size:.98rem}
.flowstep p{font-size:.86rem}

@media (max-width:720px){
  .panel{padding:2.4rem 5vw}
  .panel h2{max-width:none}
}

/* seven links is a lot of bar — tighten before the mobile sheet takes over */
@media (max-width:1240px){
  .nav{gap:1.4rem}
  .nav__links{gap:1.15rem;font-size:.78rem}
  .nav__cta{font-size:.78rem;padding:.62em 1.25em}
}
@media (max-width:1080px){
  .nav__links{gap:.9rem;font-size:.73rem}
  .nav__expand{display:none}
}

@media (max-width:720px){
  .hero__eyebrow{white-space:normal;font-size:.72rem;letter-spacing:.16em}
}

/* ============================================================
   FINANCE OPTIONS
   ============================================================ */
.finance{margin-top:.9rem;max-width:44ch}
.finance__label{
  font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:#6d727c;
  margin-bottom:.55rem;
}
.finance__plans{display:flex;gap:.4rem;flex-wrap:wrap}
.finance__plan{
  font:inherit;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:.62em 1.15em;border-radius:999px;cursor:pointer;
  color:var(--chalk-dim);background:rgba(244,241,234,.045);
  border:1px solid var(--line);
  transition:color .2s, border-color .2s, background .2s;
}
.finance__plan:hover{color:var(--chalk);border-color:rgba(244,241,234,.34)}
.finance__plan.is-on{color:var(--tarmac);background:var(--amber);border-color:var(--amber)}
.finance__plan:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.finance__line{
  margin-top:.75rem;font-size:.95rem;color:var(--chalk-dim);line-height:1.5;
}
.finance__line b{color:var(--chalk);font-weight:700}
.finance__line--compact{margin-top:.35rem;font-size:.8rem;color:#8d9099}
.finance__small{margin-top:.5rem;font-size:.68rem;line-height:1.5;color:#6d727c}

.card__price{font-family:var(--display);font-size:1.5rem;letter-spacing:.06em;color:var(--chalk)}
.prodhero__price{font-family:var(--display);font-size:2rem;letter-spacing:.06em;color:var(--chalk)}

@media (max-width:720px){
  .finance{max-width:none}
  .finance__plans{gap:.5rem}
  .finance__plan{font-size:.78rem;padding:.95em 1.15em}
  .finance__line{font-size:.88rem}
}

/* ---------- payment routes ---------- */
.payways{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem;margin:2.2rem auto 0;max-width:1180px;text-align:left;
}
.payway{
  position:relative;border:1px solid var(--line);border-radius:16px;
  padding:1.4rem 1.35rem;background:linear-gradient(180deg,rgba(23,24,28,.85),rgba(14,15,18,.85));
}
.payway--pick{border-color:rgba(255,180,0,.42);background:linear-gradient(180deg,rgba(255,180,0,.07),rgba(14,15,18,.85))}
.payway__n{
  font-family:var(--display);font-size:.72rem;letter-spacing:.24em;color:var(--amber);
  display:block;margin-bottom:.7rem;
}
.payway b{
  display:block;font-family:var(--display);font-weight:400;font-size:1.05rem;
  letter-spacing:.1em;margin-bottom:.5rem;
}
.payway p{font-size:.88rem;line-height:1.6;color:var(--chalk-dim)}
.payway p b{display:inline;font-family:var(--body);font-weight:700;color:var(--amber);letter-spacing:0;font-size:1em}
.payways__small{
  max-width:1180px;margin:1.2rem auto 0;text-align:left;
  font-size:.7rem;line-height:1.6;color:#6d727c;
}
@media (max-width:720px){
  .payways{grid-template-columns:1fr;gap:.8rem;margin-top:1.6rem}
  .payway{padding:1.15rem 1.15rem}
}

/* ============================================================
   STAGE SCRIM — one ground for the copy column.
   Replaces a translucent pill on every kicker and paragraph: same
   legibility, one static layer instead of twelve backdrop-filters
   over a surface that repaints every frame.
   ============================================================ */
.scrolly__stage::before{
  content:"";position:absolute;top:0;bottom:0;right:0;z-index:8;pointer-events:none;
  width:calc(var(--chapw,420px) + var(--gutter,3vw) + 11vw);
  background:linear-gradient(to left,
    rgba(18,26,36,.90) 0,
    rgba(18,26,36,.88) calc(var(--chapw,420px) + var(--gutter,3vw)),
    transparent 100%);
}

/* ============================================================
   CHAPTER RAIL — where you are, and how to get anywhere else
   ============================================================ */
.rail{
  --beat:0;
  position:absolute;left:calc(var(--gutter,3vw) - .4rem);top:50%;translate:0 -50%;z-index:9;
  display:flex;flex-direction:column;gap:.95rem;pointer-events:auto;
}
.rail::before,.rail::after{content:"";position:absolute;left:11px;top:4px;bottom:4px;width:1px}
.rail::before{background:rgba(244,241,234,.13)}
.rail::after{background:var(--amber);transform-origin:top;transform:scaleY(var(--beat,0))}
.rail__tick{
  display:flex;align-items:center;gap:.7rem;background:none;border:0;padding:0;cursor:pointer;
  font:800 .58rem/1 var(--body);letter-spacing:.24em;color:#5c6068;
  transition:color .3s;
}
.rail__tick i{width:23px;height:1px;background:currentColor;flex:none;transition:width .3s,background .3s}
.rail__tick span{opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s;white-space:nowrap}
.rail__tick:hover,.rail__tick.is-on{color:var(--amber)}
.rail__tick:hover span,.rail__tick.is-on span{opacity:1;transform:none}
.rail__tick.is-on i{width:34px}
.rail__tick:focus-visible{outline:2px solid var(--amber);outline-offset:4px;border-radius:2px}

@media (max-width:980px){
  /* the column centres below 980, so a right-edge scrim is the wrong shape */
  .scrolly__stage::before{
    width:100%;
    background:linear-gradient(to top, rgba(18,26,36,.95) 0, rgba(18,26,36,.91) 34%, transparent 58%);
  }
  .rig{top:32%}
  .rig--tall{top:28%}
  .rail{left:50%;top:calc(4.5vh + 16px);translate:-50% 0;flex-direction:row;gap:.55rem}
  .rail__tick span{display:none}
  .rail__tick i{width:16px}
  .rail__tick.is-on i{width:26px}
  .rail::before,.rail::after{left:0;right:0;top:auto;bottom:-7px;width:auto;height:1px}
  .rail::after{transform-origin:left;transform:scaleX(var(--beat,0))}
}
@media (max-width:720px){
  .rig{top:30%}
  .rig--tall{top:27%}
}
@media (prefers-reduced-motion: reduce){
  .rail::after{transform:none;opacity:.5}
  /* the teardown collapses to one static plate above a normal article */
  .scrolly__stage{position:static;height:auto;min-height:58svh}
  .scrolly__chapters{margin-top:0}
  .chapter{min-height:0;opacity:1;transform:none;padding-block:2.6rem;justify-content:flex-start}
  .scrolly__stage::before{display:none}
  .rig__spot,.focus{display:none}
}

/* ============================================================
   BREATHING ROOM — the whole page was running tight
   ============================================================ */
:root{--gutter:4.2vw}
.chapter{gap:1.6rem}
.chapter h2{margin-block:.15rem}
.chapter__kicker{margin-bottom:.2rem}
.chapter .btn{margin-top:1.4rem}
.specs{padding-block:clamp(5rem,12vh,9rem)}
.specs__grid{gap:clamp(1.4rem,3vw,2.6rem)}
.reserve{padding-block:clamp(5rem,12vh,9rem)}
.reserve__cards{gap:clamp(1.2rem,2.4vw,2rem);margin-top:2.6rem}
.card{padding:1.8rem 1.6rem}
.fleet{padding-block:clamp(4.5rem,10vh,8rem)}
.fleet__grid{gap:clamp(1.2rem,2.4vw,2rem)}
.prodhero{padding-bottom:clamp(4rem,8vh,6.5rem)}
.prodhero__copy{gap:1.15rem}
.offroad-wrap{padding-top:3.6rem}
.docsec{margin-bottom:1.2rem}
.panel{padding-block:clamp(4rem,10vh,7rem)}
.panel__inner{gap:1.5rem}
@media (max-width:720px){
  :root{--gutter:5.5vw}
  .chapter{gap:1.15rem}
  .specs,.reserve{padding-block:3.6rem}
  .reserve__cards{margin-top:1.8rem}
  .card{padding:1.4rem 1.25rem}
  .panel{padding-block:3rem}
}

/* ============================================================
   MOBILE — the phone is the primary canvas, not a shrunken desktop.
   Measured at 375x812 / 390x844 / 430x932.
   ============================================================ */
@media (max-width:980px){
  /* --- the buy path first: basket and menu together on the right, brand alone left --- */
  .basketbtn{margin-left:auto}
  .navtoggle{margin-left:0}

  /* --- nothing animates forever on a phone GPU --- */
  .grain{display:none}
  .focus__ring::after{animation:none}
  .hero__sheen{display:none}          /* masked WebP + screen blend, for a 340px bike */
  .hero__road{animation:none}         /* animated background-position = a repaint loop */

  /* --- the teardown: the stage owns the top band, the copy lives in the clear
         band beneath it and passes BEHIND the stage instead of over the bike --- */
  .scrolly__stage{height:52svh;z-index:2}
  .scrolly__chapters{margin-top:-52svh;z-index:1;width:min(460px,92vw);margin-inline:auto}
  .scrolly__stage::before{display:none}   /* the bottom-up scrim is pointless now */
  .stage__bar--top{display:none}          /* 32.5px of black under an opaque nav */
  .stage__ghost{display:none}
  .stage__hud{display:none}
  .rail{display:none}                     /* measured 16x1px and covered by the header */

  .rig{left:50%;translate:-50% -50%;top:54%;width:min(88vw,460px)}
  .rig--tall{width:min(74vw,340px);top:52%}
}

@media (max-width:900px){
  /* --- product pages: price, colour and CTA above the fold, prose after --- */
  .prodhero{padding-top:calc(60px + 1.2rem)}
  .prodhero__img{width:auto;max-width:100%;max-height:34svh;margin-inline:auto}
  .prodhero__copy{gap:1rem}
  .prodhero__copy .chapter__kicker{order:1}
  .prodhero__copy h1{order:2}
  .prodhero__copy .tag-offroad{order:3}
  .prodhero__price{order:4}
  .prodhero__copy .colourway{order:5}
  .prodhero__ctas{order:6}
  .prodhero__lead{order:7}
  .prodhero__copy .finance{order:8}
  .prodhero__ctas{flex-direction:column;align-items:stretch;gap:.7rem;width:100%;margin-top:.2rem}
  .prodhero__ctas .btn{width:100%;text-align:center}
}

@media (max-width:720px){
  /* --- the classification matrix stops being an 817px table in a 334px box --- */
  .matrix{min-width:0;font-size:.85rem;display:block}
  .matrix thead{display:none}
  .matrix tbody,.matrix tr{display:block}
  .matrix tr{border:1px solid var(--line);border-radius:12px;margin-bottom:.8rem;padding:.2rem .9rem}
  .matrix tr:last-child{margin-bottom:0}
  .matrix tbody th{display:block;white-space:normal;border:0;padding:.7rem 0 .5rem;font-size:1rem}
  .matrix td{display:flex;justify-content:space-between;gap:1rem;border:0;border-top:1px solid var(--line);padding:.5rem 0}
  .matrix td::before{content:attr(data-h);color:#8d9099;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;flex:none}
}

@media (max-width:700px){
  .marquee{display:none}              /* its four claims repeat verbatim 300px below */
  .chapter{min-height:76svh;justify-content:flex-end;padding-bottom:4vh;
    align-items:stretch;text-align:left;gap:.8rem}

  /* --- the basket becomes a sheet: the scrim was a 22.5px dismiss strip --- */
  .drawer{width:100vw;border-left:0}
  .drawer__close{width:44px;height:44px;display:grid;place-items:center;padding:0}
  .drawer__item{
    grid-template-columns:86px 1fr;
    grid-template-areas:'img meta' 'img qty';
    column-gap:.9rem;row-gap:.55rem;align-items:start;
  }
  .drawer__meta{grid-area:meta}
  .drawer__qty{grid-area:qty;justify-self:start}
}

.drawer__qty{flex-wrap:wrap}
.drawer__qty button[disabled]{opacity:.35;cursor:not-allowed}
.drawer__remove{
  width:auto!important;height:auto!important;border:0!important;border-radius:0!important;
  padding:.35rem .1rem!important;background:none;color:#6d727c;cursor:pointer;
  font:700 .6rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;
  flex-basis:100%;text-align:left;
}
.drawer__remove:hover{color:var(--amber)}



/* ============================================================
   FINISH — for a model that ships in one colour. A dot and a name,
   not a chooser pretending there is a choice.
   ============================================================ */
.finish{
  display:flex;align-items:center;gap:.9rem;margin:1.4rem 0 0;
  padding:.85rem 1rem;border:1px solid var(--line);border-radius:14px;
  background:rgba(255,255,255,.02);max-width:26rem;
}
.finish__dot{
  flex:none;width:34px;height:34px;border-radius:50%;background:var(--sw,#222);
  border:2px solid rgba(244,241,234,.28);box-shadow:0 0 0 3px rgba(255,180,0,.14);
}
.finish b{
  display:block;font-family:var(--display);font-weight:400;font-size:1rem;letter-spacing:.14em;
  color:var(--chalk);
}
.finish span{display:block;font-size:.78rem;color:var(--chalk-dim);margin-top:.15rem}

/* the colourway swatches must be unmissable on a phone — Jack could not find them */
@media (max-width:720px){
  .colourway{
    padding:.9rem 1rem;border:1px solid var(--line);border-radius:14px;
    background:rgba(255,255,255,.02);
  }
  .colourway__label{font-size:.6rem;letter-spacing:.26em}
  .colourway__name{font-size:.95rem}
  .swatch{box-shadow:0 0 0 1px rgba(0,0,0,.6)}
  .swatch.is-on{box-shadow:0 0 0 4px rgba(255,180,0,.22)}
  .finish{max-width:none}
}

/* ============================================================
   PAPER & STEEL — the corrections a palette flip always needs.
   The page is off-white; sections that stage a machine stay steel.
   ============================================================ */

/* the two noise textures were built to lighten a black surface; on paper
   they only muddy it, so they are steel-only now */
.tex-asphalt,.grain{display:none}
.hero .tex-asphalt,.scrolly__stage .tex-asphalt,.prodhero .tex-asphalt,
.soho .tex-asphalt,.footer .tex-asphalt,.pagehead .tex-asphalt{display:block}
.hero .grain,.scrolly__stage .grain,.prodhero .grain{display:block}

/* paper sections: real ink, real hairlines */
body{background:var(--paper);color:#161c24}
.specs{background:var(--paper2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fleet{background:var(--paper)}
.reserve{background:var(--paper)}
.deck,.doc{background:var(--paper)}

/* cards sit up off the paper instead of glowing out of the dark */
.card,.fleetcard,.deckbox,.flowstep,.doccard,.payway,.finish,.checklist li{
  box-shadow:0 1px 2px rgba(22,28,36,.05), 0 10px 30px rgba(22,28,36,.07);
}
.card,.fleetcard{border:1px solid var(--line)}
.deckbox,.flowstep{background:var(--panel);border-color:var(--line)}
.doccard{background:var(--panel)}
.doccard__head{background:rgba(22,28,36,.03)}
.spectable th,.spectable td{border-bottom:1px solid var(--line)}
.matrix thead th{background:rgba(22,28,36,.04);color:#5b6673}
.matrix th,.matrix td{border-color:var(--line)}
.checklist li{background:var(--panel);border-color:var(--line)}
.payway{background:var(--panel)}
.payway--pick{border-color:rgba(201,118,26,.5);background:linear-gradient(180deg,rgba(201,118,26,.07),var(--panel))}
.finish{background:var(--panel);border-color:var(--line)}
.finish__dot{border-color:rgba(22,28,36,.2);box-shadow:0 0 0 3px rgba(201,118,26,.16)}
.offroad{background:linear-gradient(180deg,rgba(201,118,26,.10),rgba(201,118,26,.03));border-color:rgba(201,118,26,.42)}
.offroad p{color:#4d5866}
.finance__plan{background:rgba(22,28,36,.04);border-color:var(--line);color:#4d5866}
.finance__plan:hover{color:#161c24;border-color:rgba(22,28,36,.3)}
.swatch{border-color:rgba(22,28,36,.22)}
.spec__num,.deckbox b{color:#22303f}
.panel__n{-webkit-text-stroke:1.5px rgba(22,28,36,.16)}
.docnav a{color:#5b6673}
.docsec__n{color:var(--amber)}
.pill--legal{background:rgba(26,140,80,.10);color:#1c7a4a;border-color:rgba(26,140,80,.35)}
.pill--offroad{background:rgba(201,118,26,.10);color:#a5600f;border-color:rgba(201,118,26,.42)}
.matrix .yes{color:#1c7a4a}
.matrix .no{color:#b4462f}
.serial{color:#8a929c}
.specs__note,.payways__small,.finance__small{color:#6b7480}

/* the ghost words were white-on-black strokes */
.story__ghostword{-webkit-text-stroke:1px rgba(238,242,247,.10);color:transparent}

/* the pagehead and footer are steel bands, so they need their own ground */
.pagehead{background:linear-gradient(180deg,var(--steel-deep),var(--steel-mid))}
.footer{background:var(--steel-void);border-top:0}
.footer__legal{color:#9aabbd}
.footer__fine{color:#7c8b9c}

/* deck panels alternate paper and steel */
.panel{border-top:1px solid var(--line)}
.panel--amber{background:linear-gradient(180deg,var(--steel-deep),var(--steel-mid));border-top:0}
.panel--amber .deckbox,.panel--amber .flowstep{background:rgba(255,255,255,.04);border-color:#2f4155;box-shadow:none}

/* buttons: amber is the only action colour and it must read on paper */
.btn--amber{background:var(--amber);color:#fff}
.hero .btn--amber,.prodhero .btn--amber,.soho .btn--amber,.footer .btn--amber,
.pagehead .btn--amber,.panel--amber .btn--amber,.nav .btn--amber{color:#1b2735}
.btn--ghost{border-color:rgba(22,28,36,.28);color:#161c24;background:rgba(22,28,36,.03)}
.hero .btn--ghost,.prodhero .btn--ghost,.soho .btn--ghost,.panel--amber .btn--ghost{
  border-color:rgba(238,242,247,.34);color:#eef2f7;background:rgba(27,39,53,.3);
}
::selection{background:var(--amber);color:#fff}

/* the nav rides paper at rest and steel over the hero */
.nav__word{color:#161c24}
.nav__links a{color:#3f4a58;opacity:1}
.nav__links a:hover{color:var(--amber)}
.basketbtn{color:#161c24}
.navtoggle{background:rgba(22,28,36,.05);border-color:var(--line)}
.navtoggle i{background:#161c24}

/* the nav is fixed, so it does not inherit a section's context. At rest it sits
   over the steel hero and must be light; once .scrolled it is over paper. */
.nav__word,.basketbtn{color:#eef2f7}
.nav__links a{color:#c3d0de}
.nav .btn--amber{background:var(--amber-lit);color:#1b2735}
.navtoggle{background:rgba(238,242,247,.10);border-color:rgba(238,242,247,.22)}
.navtoggle i{background:#eef2f7}

.nav.scrolled .nav__word,.nav.scrolled .basketbtn{color:#161c24}
.nav.scrolled .nav__links a{color:#3f4a58}
.nav.scrolled .nav__links a:hover{color:var(--amber)}
.nav.scrolled .btn--amber{background:#c9761a;color:#fff}
.nav.scrolled .navtoggle{background:rgba(22,28,36,.05);border-color:var(--line)}
.nav.scrolled .navtoggle i{background:#161c24}
.nav.scrolled .nav__roundel circle{fill:var(--steel-mid)}

/* pages that open on paper rather than a steel hero */
body.onpaper .nav__word,body.onpaper .basketbtn{color:#161c24}
body.onpaper .nav__links a{color:#3f4a58}
body.onpaper .nav .btn--amber{background:#c9761a;color:#fff}
body.onpaper .navtoggle{background:rgba(22,28,36,.05);border-color:var(--line)}
body.onpaper .navtoggle i{background:#161c24}




/* ============================================================
   THE STAGE — one box, the photograph's own aspect ratio, covering
   the hero. Everything inside is positioned in the PLATE's
   coordinates, so the machine can never drift off its plinth.
   Measured from hero-studio.webp: plinth centre 58.5% across,
   its top surface 66.5% down.
   ============================================================ */
.stage{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.stage__box{
  position:absolute;top:50%;left:50%;translate:-50% -50%;
  height:100%;width:auto;min-width:100%;aspect-ratio:1376/768;
  will-change:transform;
}

/* the perspective plane: squares retreating to a vanishing point sat on the
   studio's own horizon, which is where its floor meets its cyc wall */
.stage__grid{
  position:absolute;left:-30%;right:-30%;top:66%;bottom:-20%;
  transform-origin:50% 0;
  transform:perspective(360px) rotateX(76deg);
  background-image:
    repeating-linear-gradient(to right,  rgba(198,224,255,.20) 0 1px, transparent 1px 54px),
    repeating-linear-gradient(to bottom, rgba(198,224,255,.14) 0 1px, transparent 1px 54px);
  background-position:0 var(--gy,0px);
  mask-image:radial-gradient(58% 100% at 50% 100%, #000 4%, rgba(0,0,0,.4) 40%, transparent 74%);
  -webkit-mask-image:radial-gradient(58% 100% at 50% 100%, #000 4%, rgba(0,0,0,.4) 40%, transparent 74%);
}
/* every fourth cell reads as a faint lit panel */
.stage__grid::after{
  content:"";position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(to right,  rgba(214,234,255,.06) 0 54px, transparent 54px 216px),
    repeating-linear-gradient(to bottom, rgba(214,234,255,.06) 0 54px, transparent 54px 162px);
  background-position:0 var(--gy,0px);
}

.stage__haze{
  position:absolute;left:0;right:0;top:0;height:74%;
  background:
    radial-gradient(34% 44% at 29% 24%, rgba(206,229,255,.11), transparent 70%),
    radial-gradient(28% 38% at 74% 21%, rgba(255,206,140,.10), transparent 70%);
  opacity:var(--haze,.7);transform:translate3d(var(--hx,0),0,0);
}


.hero__bike{display:none}            /* the figure is now just a hook the loop reads */

@media (max-width:980px){
  .stage__grid{display:none}
}
@media (prefers-reduced-motion: reduce){ .stage__haze{transform:none} }

/* ============================================================
   HERO COMPOSITION over the photograph
   ============================================================ */
/* the marquee is a band pinned to the bottom of the hero, not floating
   over the CTAs, and the hero reserves room for it */
.hero{position:relative;display:flex;flex-direction:column;justify-content:center}
/* the marquee is a band between the hero and the teardown — outside both, so it
   cannot collide with a hero whose content already fills the viewport */
.marquee{position:relative;left:auto;right:auto;bottom:auto;z-index:2;
  border-block:1px solid rgba(255,180,0,.26);background:var(--steel-mid)}
.marquee__track span{color:#9aabbd}
.hero__cue{bottom:3.4vh}

/* the type sits on its own ground so it reads over a photograph */
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(14,20,28,.90) 0%, rgba(14,20,28,.72) 26%, rgba(14,20,28,.28) 44%, transparent 58%);
}
.hero__comp{z-index:3}
.hero__typeblock{position:relative}

/* the machine moves right and comes down a touch so it never fights the headline */

@media (max-width:980px){
  .hero::before{
    background:linear-gradient(to bottom,
      rgba(14,20,28,.86) 0%, rgba(14,20,28,.55) 34%, rgba(14,20,28,.22) 56%, transparent 74%);
  }
}

/* the clip fills the stage box; the still is the no-JS / reduced-motion fallback */
.stage__video,.stage__still{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.stage__still{opacity:1;z-index:-1}
.stage__video{z-index:0}
/* if the clip cannot play, the still is what you see */
@media (prefers-reduced-motion: reduce){
  .stage__video{display:none}
  .stage__still{opacity:1}
}
html.no-video .stage__video{display:none}
html.no-video .stage__still{opacity:1}

/* ============================================================
   TEARDOWN — a clip scrubbed by scroll, not a two-image dissolve
   ============================================================ */
.plate__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  display:block;opacity:0;transition:opacity .5s ease;
}
.plate__video.is-ready{opacity:1}
/* the stills carry the stage until the clip is buffered, and for good if it fails */
.plate__video.is-ready ~ .plate__img--fallback{opacity:0!important}
html.no-teardown .plate__video{display:none}
@media (prefers-reduced-motion: reduce){
  .plate__video{display:none}
  #plateExploded{opacity:1}
}

/* ============================================================
   PARTS & ACCESSORIES
   A parts catalogue has no photography, so the type and the grid
   have to carry it. Treated as a technical price list on purpose:
   name and price on one baseline, fitment underneath in mono.
   ============================================================ */
.partsintro{background:var(--tarmac);padding:clamp(2.5rem,6vw,4.5rem) 1.25rem 0}
.partsintro__inner{max-width:62ch;margin:0 auto}
.partsintro__inner p{opacity:.78;line-height:1.65;margin:0 0 1rem}
.partsintro__inner p b{opacity:1;font-weight:700}

.partgroup{background:var(--tarmac);padding:clamp(2rem,5vw,3.5rem) 1.25rem}
.partgroup + .partgroup{padding-top:0}
.partgroup__intro{max-width:62ch;margin:0 auto clamp(1.25rem,3vw,2rem)}
.partgroup__intro h2{
  font-family:var(--display);font-size:clamp(1.35rem,4vw,2rem);letter-spacing:.04em;
  color:var(--chalk);margin:0 0 .5rem;
  border-bottom:1px solid var(--line);padding-bottom:.6rem;
}
.partgroup__intro p{opacity:.72;line-height:1.6;margin:0;font-size:.95rem}

.partgrid{
  max-width:1180px;margin:0 auto;
  display:grid;gap:1px;background:var(--line);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));
  border:1px solid var(--line);
}
.part{
  background:var(--tarmac2);padding:1.15rem 1.15rem 1rem;
  display:flex;flex-direction:column;gap:.75rem;
  transition:background .18s ease;
}
/* Photographs and line icons share one square well so the grid keeps a single
   optical baseline whether a part has been shot yet or not. */
.part__shot,.part__icon{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:1/1;width:100%;
  background:rgba(0,0,0,.035);border-radius:10px;
  overflow:hidden;
}
.part__shot img{width:100%;height:100%;object-fit:contain;display:block}
.part__icon{color:currentColor;opacity:.42}
.part__icon svg{width:44%;height:44%}
.part__body{display:flex;flex-direction:column;gap:.4rem}
.part:hover{filter:brightness(1.04)}
.part__head{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem}
.part__head h3{
  font-family:var(--display);font-size:1rem;letter-spacing:.03em;
  color:var(--chalk);margin:0;line-height:1.25;
}
.part__price{
  font-family:var(--display);font-size:1.05rem;letter-spacing:.02em;
  color:var(--amber);margin:0;white-space:nowrap;
}
.part__desc{opacity:.75;font-size:.86rem;line-height:1.5;margin:0}
.part__fits{
  margin:.15rem 0 0;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  opacity:.5;
}

.partsnote{background:var(--tarmac);padding:clamp(2rem,5vw,3.5rem) 1.25rem clamp(3rem,7vw,5rem)}
.partsnote .btn{margin:.35rem 0 1.25rem}
.partsnote__fine{font-size:.78rem;opacity:.6;line-height:1.6}

@media (max-width:560px){
  .partgrid{grid-template-columns:1fr}
  .part{padding:1rem}
  .part__head{gap:.5rem}
  .part__head h3{font-size:.95rem}
}

/* ---- launch pricing ----
   CAP treats a scored-out FUTURE price as misleading, so the rising price is
   stated in words next to the live one and never struck through. */
.pricenote{
  font-size:.78rem;letter-spacing:.04em;opacity:.72;
  margin:-.6rem 0 1rem;
}
.prodhero__price + .pricenote{font-size:.9rem;margin:-.4rem 0 1.4rem}
.launchbar{
  background:var(--amber);color:#1b1206;
  text-align:center;padding:.7rem 1.25rem;
  font-size:.82rem;letter-spacing:.06em;font-weight:700;
  position:relative;z-index:40;
}
.launchbar b{font-weight:800}
@media (max-width:560px){ .launchbar{font-size:.74rem;padding:.6rem .9rem} .launchbar__more{display:none} }

/* ---- mobile tap targets ----
   Text links on the cards measured 19px tall; Apple's floor is 44. Grow the
   hit area with padding and negative margin so the visual layout is unmoved. */
.footer__legal a,.reserve__sub2 a{
  display:inline-block;padding:.8rem .5rem;margin:-.8rem -.5rem;
}
/* card__waitlist already carries margin-top:.7rem for its layout position;
   grow the hit box without disturbing it */
.card__waitlist{padding:.77rem .5rem;margin:-.07rem -.5rem -.77rem}
.nav__brand{padding:.5rem .6rem;margin:-.5rem -.6rem}
@media (max-width:720px){
  .drawer__remove{min-height:44px}
  .part{scroll-margin-top:5rem}
}

/* ---- mobile audit fixes (14 Sep) ----
   Inline links in running copy measured as small as 59x18 — grow every one of
   them to the 44px floor with padding that negative margin cancels, so the
   text layout does not move. inline-block is safe here: none of these links
   wrap mid-text. */
@media (max-width:720px){
  p a:not(.btn),li a:not(.btn),td a:not(.btn){
    /* .77rem clears the 44px floor even at the footer's 12px text size */
    display:inline-block;padding:.77rem .35rem;margin:-.77rem -.35rem;
  }
  /* legible floors for the two informative micro-labels; decorative captions
     (edge marks, coords, marquee dots) stay as designed */
  .card__serial{font-size:11px;letter-spacing:.16em}
  .footer__fine{font-size:11px}
}

/* ---- reserve / waitlist form (Netlify Forms) ---- */
.reserveform{max-width:640px;margin:3rem auto 0;padding:1.8rem 1.6rem;
  background:rgba(244,241,234,.045);border:1px solid var(--line);border-radius:14px}
.reserveform__title{font-family:var(--display);font-size:1.4rem;letter-spacing:.05em;margin:0 0 .4rem}
.reserveform__sub{opacity:.75;font-size:.92rem;margin:0 0 1.3rem;line-height:1.5}
.reserveform__row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-bottom:.9rem}
.rf{display:flex;flex-direction:column;gap:.35rem}
.rf span{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.rf span em{text-transform:none;letter-spacing:0;opacity:.7}
.rf input,.rf select{
  min-height:48px;padding:.6rem .8rem;border-radius:9px;
  border:1px solid var(--line);background:rgba(0,0,0,.25);color:inherit;
  font:inherit;font-size:16px;   /* 16px stops iOS zooming the page on focus */
}
.rf input:focus,.rf select:focus{outline:2px solid var(--amber);outline-offset:1px}
.reserveform__cta{width:100%;min-height:52px;margin-top:.4rem}
.reserveform__fine{font-size:.76rem;opacity:.75;margin:.8rem 0 0;text-align:center}
.hidden-field{position:absolute;left:-9999px;opacity:0}
@media (max-width:560px){ .reserveform__row{grid-template-columns:1fr} }

/* ============================================================
   DRAWER — order capture (cart → details → confirmation)
   ============================================================ */
.drawer__head{position:relative}
.drawer__back{
  background:none;border:none;color:var(--chalk-dim);font-size:1.9rem;
  cursor:pointer;line-height:1;padding:.2rem .55rem;margin-left:-.4rem;
}
.drawer__back:hover{color:var(--amber)}
.drawer__title{flex:1}
/* each view owns the drawer's full height so the footer still pins to the base */
.drawer__view{flex:1;display:flex;flex-direction:column;min-height:0}
.drawer__view[hidden]{display:none}

.orderform{
  flex:1;overflow-y:auto;padding:1.2rem 1.5rem 1.8rem;
  display:flex;flex-direction:column;gap:.85rem;
}
.orderform__sum{
  margin:0;padding:.75rem .9rem;border-radius:9px;
  background:rgba(0,0,0,.28);border:1px solid var(--line);
  font-size:.82rem;line-height:1.45;color:var(--chalk-dim);
}
.orderform__row{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;min-width:0}
/* flex/grid children default to min-width:auto, so an input's intrinsic size
   (roughly 20 characters) refuses to shrink and pushes out of the drawer */
.orderform .rf{min-width:0}
.orderform .rf input{width:100%;min-width:0;max-width:100%}
.orderform__cta{width:100%;min-height:52px;margin-top:.5rem}
.orderform__cta[disabled]{opacity:.6;cursor:progress}
.orderform__fine{font-size:.74rem;color:#6d727c;margin:0;line-height:1.5}
.orderform__err{
  margin:0;padding:.7rem .85rem;border-radius:9px;font-size:.82rem;line-height:1.45;
  background:rgba(196,62,62,.12);border:1px solid rgba(196,62,62,.45);color:#f0b4b4;
}
.orderform__err a{color:var(--amber);text-decoration:underline}

.drawer__done{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.9rem;padding:2rem 1.8rem;text-align:center;
}
.drawer__donetick{
  width:54px;height:54px;border-radius:50%;margin:0 0 .3rem;
  display:grid;place-items:center;font-size:1.6rem;
  background:rgba(62,196,109,.14);border:1px solid rgba(62,196,109,.5);color:#3ec46d;
}
.drawer__done h3{font-family:var(--display);font-weight:400;letter-spacing:.12em;font-size:1.3rem;margin:0}
.drawer__done p{margin:0;font-size:.9rem;line-height:1.55;color:var(--chalk-dim)}
.drawer__donesum{
  font-size:.82rem !important;padding:.7rem .9rem;border-radius:9px;
  background:rgba(0,0,0,.28);border:1px solid var(--line);
}
.drawer__done .btn{margin-top:.6rem}

@media (max-width:560px){
  .orderform__row{grid-template-columns:1fr}
}

/* ---- drawer text ----
   .drawer now sits in the steel context (see STEEL CONTEXT above), so --chalk
   and --chalk-dim already carry light values. These just opt the form labels
   out of the opacity dimming they inherit from the cream waitlist panel. */
.orderform .rf span{color:var(--chalk-dim);opacity:1}
.orderform .rf span em{color:var(--chalk-dim);opacity:1}
.orderform__sum{color:var(--chalk)}
.orderform__fine{color:var(--chalk-dim)}
.drawer__note{color:var(--chalk-dim)}
.drawer__meta span{color:var(--chalk-dim)}
/* outranks .drawer__qty button (0,1,1); remove is secondary, not a headline */
.drawer__qty .drawer__remove{color:var(--chalk-dim)}
.drawer__close,.drawer__back{color:var(--chalk-dim)}
.drawer__done p{color:var(--chalk-dim)}
/* the CTA should never sit flush against the phone's bottom edge */
.orderform{padding-bottom:calc(2.4rem + env(safe-area-inset-bottom,0px))}

/* footer policy links (company disclosure line) */
.footer__fine a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.footer__fine a:hover{color:var(--amber)}

/* ============================================================
   FLASH FOLD — scroll-scrubbed frame sequence on a pinned stage
   The section is a tall track; the pin sticks for a full viewport
   while progress through the track drives the fold.
   ============================================================ */
/* overflow:hidden would make the section the sticky pin's scroller and kill the pin;
   clip keeps the asphalt texture and edge label contained without doing that */
.soho--fold{display:block;min-height:0;padding:0;height:330svh;overflow:clip}
.soho--fold .soho__pin{
  position:sticky;top:0;height:100svh;box-sizing:border-box;
  display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:4vw;
  padding:10vh 6vw 6vh;
}
.fold__canvas{display:none;width:100%;max-width:660px;height:auto;position:relative;z-index:1;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.55))}
.soho--fold.fold-live #sohoBike{display:none}
.soho--fold.fold-live .fold__canvas{display:block}
/* the dims sit over the canvas, not behind it */
.soho--fold .soho__dims{z-index:2}
/* the dims land one by one as the bike folds */
.soho--fold .dim{opacity:0;transform:translateY(6px);transition:opacity .45s,transform .45s}
.soho--fold.fold-1 .dim--a,.soho--fold.fold-2 .dim--b,.soho--fold.fold-3 .dim--c{opacity:1;transform:none}
@media (max-width:980px){
  .soho--fold .soho__pin{grid-template-columns:1fr;gap:2rem;padding:12vh 6vw 4vh;align-content:center}
  .soho--fold .soho__pin .soho__copy p{max-width:none}
}
@media (max-width:700px){
  /* phones: only the stage pins; the copy reads below it while the bike folds */
  .soho--fold{height:auto;padding:0}
  .soho--fold .soho__pin{position:static;display:block;height:auto;padding:0 6vw 55svh}
  /* pinned at the very top: the nav auto-hides on the way down, so a gap left for it
     would show the copy scrolling through. The padding keeps the bike under the nav when it is up. */
  .soho--fold .soho__stage{position:sticky;top:0;z-index:2;margin-inline:calc(50% - 50vw);width:100vw;
    padding:62px 0 .6rem;background:var(--steel-deep)}
  .soho--fold .dim{opacity:1;transform:none}   /* a caption row on phones, not a reveal */
  .soho--fold .soho__copy{position:relative;z-index:1;padding-top:1.4rem}
  .soho--fold .fold__canvas,.soho--fold #sohoBike{max-width:none;width:100%}
}

/* ---- MENU SHEET ON STEEL (fix 1 Oct 2026) ----------------------------
   The mobile menu sheet is dark steel, but it was never added to the steel
   context, so its links kept paper ink (#161c24) and disappeared into the
   background. While the menu is open the nav bar sits on the same steel, so
   the wordmark, basket and close button flip to light too — including after
   the nav has gone .scrolled and on body.onpaper pages. */
.navsheet{
  --line:#2f4155;
  --chalk:#eef2f7;
  --chalk-dim:#9aabbd;
  color:#eef2f7;
}
.navsheet__inner a:not(.btn){
  color:#eef2f7;
  border-bottom-color:rgba(238,242,247,.14);
}
.navsheet__inner a:not(.btn):hover,
.navsheet__inner a:not(.btn):focus-visible,
.navsheet__inner a:not(.btn)[aria-current="page"]{color:var(--amber-lit)}
.navopen .nav .nav__word,
.navopen .nav .basketbtn,
.navopen .nav.scrolled .nav__word,
.navopen .nav.scrolled .basketbtn,
body.onpaper.navopen .nav .nav__word,
body.onpaper.navopen .nav .basketbtn{color:#eef2f7}
.navopen .nav .nav__word em{color:var(--amber-lit)}
.navopen .nav .navtoggle,
.navopen .nav.scrolled .navtoggle{background:rgba(238,242,247,.10);border-color:rgba(238,242,247,.22)}
.navopen .nav .navtoggle i,
.navopen .nav.scrolled .navtoggle i{background:#eef2f7}