/* ============================================================
   SELF-HOSTED FONTS
   Drop the four .woff2 files into /assets/fonts/ and remove the
   Fontshare <link> tags. See assets/fonts/README.txt.
   These rules are inert until the files exist — the stack falls
   back to Fontshare, then to Helvetica.
   ============================================================ */
@font-face{font-family:'Switzer';src:url('fonts/Switzer-Regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('fonts/Switzer-Medium.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('fonts/Switzer-Semibold.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('fonts/Switzer-Bold.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}


/* ============================================================
   SOLAR GLASS AUTOMOTIVE — design tokens
   ============================================================ */
:root{
  /* ============================================================
     TYPE — one neutral grotesk, two roles, separated by weight.
     Swap both lines to change the whole site.
     Alternatives that work with this layout, in order of preference:
       'Switzer'          Swiss grotesk, closest to Söhne / Suisse Int'l  (current)
       'General Sans'     slightly warmer, a touch more character
       'Geist'            more technical, tighter apertures
       'Instrument Sans'  more editorial, wider
     ============================================================ */
  --font-display:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-body:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif;

  --white:#FFFFFF;
  --canvas:#FAFAFA;
  --pearl:#F2F2F2;
  --titanium:#D6D6D6;
  --graphite:#212121;
  --silver:#818181;
  --deep:#090A0B;

  --ink:#101214;
  --ink-2:#5E6266;
  --ink-3:#818181;
  --ice:#DDF5FF;
  --accent:#CC0000;       /* used sparingly: state, focus, live data */
  --accent-lift:#F04438;  /* the same accent, legible on dark scenes */
  --accent-soft:rgba(204,0,0,.10);

  /* crystal glass */
  --crystal:rgba(255,255,255,.62);
  --crystal-strong:rgba(255,255,255,.86);
  --crystal-edge:rgba(255,255,255,.9);
  --crystal-line:rgba(16,18,20,.09);
  --crystal-shadow:0 24px 60px -18px rgba(16,24,32,.22),0 2px 6px rgba(16,24,32,.06);

  /* dark scene */
  --dark-glass:rgba(255,255,255,.07);
  --dark-line:rgba(255,255,255,.14);

  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;
  --s7:48px;--s8:64px;--s9:80px;--s10:96px;--s11:128px;--s12:160px;

  --r-xs:8px;--r-sm:12px;--r-md:18px;--r-lg:26px;--r-xl:34px;--r-pill:999px;

  --instant:120ms;--fast:200ms;--normal:300ms;--scene:640ms;--cinematic:1100ms;
  --ease:cubic-bezier(.32,.72,.26,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --max:1440px;
  --gutter:clamp(20px,5vw,72px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
::selection{background:rgba(204,0,0,.16);color:var(--ink)}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(16px,.32vw + 15px,17.5px);line-height:1.62;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
body.locked{overflow:hidden}
img,svg,picture{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select{font:inherit;color:inherit}
h1,h2,h3,.display{
  font-family:var(--font-display);font-weight:600;
  letter-spacing:-.038em;line-height:.98;margin:0;text-wrap:balance;
  font-feature-settings:"ss01","cv01";
}
/* optical tracking: the bigger the type, the tighter it must be set */
h1{letter-spacing:-.045em}
h2{letter-spacing:-.04em}
h3{letter-spacing:-.03em}
h1{font-size:clamp(3rem,8.4vw,8rem);font-weight:700;line-height:.94}
h2{font-size:clamp(2.4rem,5.6vw,5rem);font-weight:600;line-height:1}
h3{font-size:clamp(1.35rem,1.9vw,1.9rem);line-height:1.08}
p{margin:0 0 1.1em}p:last-child{margin-bottom:0}
.lede{font-size:clamp(1.05rem,1.05vw,1.28rem);color:var(--ink-2);max-width:52ch;line-height:1.5;letter-spacing:-.012em}
.small{font-size:.85rem;line-height:1.5;color:var(--ink-3)}
.tnum{font-variant-numeric:tabular-nums}
.dtable td,.dtable th,.fact-n,.next-steps .n,.m-spec dd{font-variant-numeric:tabular-nums}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.scene{position:relative;padding-block:clamp(80px,9vw,140px)}
.details-open{display:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip{position:fixed;left:-9999px;top:0;z-index:300;background:var(--ink);color:#fff;padding:14px 22px;border-radius:0 0 12px 0}
.skip:focus{left:0}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* scene tones */
.t-white{background:var(--white)}
.t-canvas{background:var(--canvas)}
.t-pearl{background:var(--pearl)}
.t-dark{background:var(--deep);color:#fff}
.t-dark .lede{color:rgba(255,255,255,.62)}
.t-dark .small{color:rgba(255,255,255,.45)}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:17px 30px;border-radius:var(--r-pill);
  font-family:var(--font-body);font-weight:700;font-size:.95rem;letter-spacing:-.005em;
  background:var(--graphite);color:#fff;overflow:hidden;
  transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease),background var(--fast) var(--ease);
  box-shadow:0 1px 2px rgba(16,24,32,.16),0 12px 28px -12px rgba(16,24,32,.4);
  will-change:transform;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 2px 4px rgba(16,24,32,.18),0 20px 40px -14px rgba(16,24,32,.46)}
.btn:active{transform:translateY(0) scale(.99)}
.btn .ar{transition:transform var(--fast) var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn-lg{padding:21px 38px;font-size:1.02rem}
.btn-block{width:100%}
.btn-glass{background:var(--crystal-strong);color:var(--ink);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid var(--crystal-line);box-shadow:var(--crystal-shadow)}
.btn-glass:hover{background:#fff}
.btn-line{background:none;color:var(--ink);border:1px solid rgba(16,18,20,.18);box-shadow:none}
.btn-line:hover{border-color:var(--ink);background:rgba(16,18,20,.03);box-shadow:none}
.t-dark .btn{background:#fff;color:var(--ink)}
.t-dark .btn-line{background:none;color:#fff;border-color:rgba(255,255,255,.28)}
.t-dark .btn-line:hover{background:rgba(255,255,255,.08);border-color:#fff}
.btn[disabled]{opacity:.45;pointer-events:none}
.tlink{border-bottom:1px solid rgba(16,18,20,.25);padding-bottom:2px;transition:border-color var(--fast)}
.tlink:hover{border-color:var(--accent)}

/* eyebrow used sparingly — only where it encodes a scene number */
.scene-no{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;font-weight:700;color:var(--ink-3);letter-spacing:.02em;margin-bottom:18px}
.scene-no::before{content:"";width:26px;height:2px;background:var(--accent);border-radius:2px}
.t-dark .scene-no{color:rgba(255,255,255,.42)}

/* ============================================================
   NAVIGATION — context aware
   ============================================================ */
.scrollbar{position:fixed;top:0;left:0;right:0;height:2px;z-index:100;background:transparent;pointer-events:none}
.scrollbar i{display:block;height:100%;width:0;background:var(--accent);transition:width 90ms linear}
.nav{position:fixed;top:18px;left:0;right:0;z-index:90;display:flex;justify-content:center;pointer-events:none;transition:top var(--normal) var(--ease)}
.nav-in{
  pointer-events:auto;display:flex;align-items:center;gap:clamp(12px,1.8vw,30px);
  width:min(1340px,calc(100% - 28px));padding:10px 10px 10px 24px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.66);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--crystal-line);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 18px 44px -20px rgba(16,24,32,.3);
  transition:background var(--scene) var(--ease),border-color var(--scene) var(--ease),color var(--scene) var(--ease),padding var(--normal) var(--ease),width var(--normal) var(--ease),box-shadow var(--normal) var(--ease);
}
.nav.tight .nav-in{width:min(1180px,calc(100% - 28px));padding-block:7px;background:rgba(255,255,255,.82);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 14px 30px -18px rgba(16,24,32,.34)}
.nav.on-dark .nav-in{background:rgba(20,22,25,.5);border-color:rgba(255,255,255,.16);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 18px 40px -20px rgba(0,0,0,.6)}
.nav.on-dark .nav-links a{color:rgba(255,255,255,.72)}
.nav.on-dark .nav-links a:hover{color:#fff}
.nav.on-dark .btn{background:#fff;color:var(--ink)}
.nav.on-dark .burger span,.nav.on-dark .burger span::before,.nav.on-dark .burger span::after{background:#fff}
.nav.on-dark .burger{border-color:rgba(255,255,255,.22)}

.nav-links{display:flex;align-items:center;gap:clamp(6px,1.3vw,22px);margin-left:auto;font-size:.9rem;font-weight:500}
.nav-links a{color:var(--ink-2);padding:9px 3px;transition:color var(--fast)}
.nav-links a:hover{color:var(--ink)}
.nav .btn{padding:12px 22px;font-size:.86rem;box-shadow:none}
.burger{display:none;width:44px;height:44px;border-radius:var(--r-pill);border:1px solid var(--crystal-line);align-items:center;justify-content:center}
.burger span{display:block;width:17px;height:1.6px;background:var(--ink);position:relative;transition:background var(--scene)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:1.6px;background:var(--ink)}
.burger span::before{top:-5px}.burger span::after{top:5px}
.menu{position:relative}
.drop{position:absolute;top:calc(100% + 16px);left:-14px;min-width:220px;padding:9px;border-radius:var(--r-md);
  background:rgba(255,255,255,.9);backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);
  border:1px solid var(--crystal-line);box-shadow:var(--crystal-shadow);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity var(--fast),transform var(--fast) var(--ease),visibility var(--fast)}
.menu:hover .drop,.menu:focus-within .drop{opacity:1;visibility:visible;transform:none}
.drop a{display:block;padding:11px 14px;border-radius:10px;color:var(--ink-2)}
.drop a:hover{background:var(--canvas);color:var(--ink)}


.drawer.open{display:flex}

/* ============================================================
   SCENE 1 — HERO
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(126px,15vh,180px) clamp(32px,5vh,64px);overflow:clip;
  background:var(--white);
}
.hero-copy{position:relative;z-index:3;text-align:center}
.hero h1{margin:0 auto}
.hero h1 .l{display:block;overflow:hidden}
.hero h1 .l span{display:block;transform:translateY(105%);transition:transform var(--cinematic) var(--ease-out)}
.ready .hero h1 .l span{transform:none}
.ready .hero h1 .l:nth-child(2) span{transition-delay:.09s}
.hero .lede{margin:26px auto 0;text-align:center}

/* vehicle stage */
.stage{position:relative;z-index:2;margin-top:clamp(20px,3.5vw,52px)}
.stage .car{position:relative;width:min(1240px,96vw);margin-inline:auto;
  opacity:0;transform:translateY(22px) scale(.99);filter:blur(8px);
  transition:opacity var(--cinematic) var(--ease-out),transform var(--cinematic) var(--ease-out),filter var(--cinematic) var(--ease-out)}
.ready .stage .car{opacity:1;transform:none;filter:blur(0)}

/* hero showcase: all four cars occupy the same cell and crossfade */
.stage .car{display:grid;place-items:center}
.stage .car img{grid-area:1/1;width:100%;height:auto;opacity:0;visibility:hidden;
  transition:opacity 700ms var(--ease-out),visibility 0s linear 700ms}
.stage .car img.on{opacity:1;visibility:visible;transition:opacity 700ms var(--ease-out),visibility 0s}

/* model chips carry the auto-advance timing, so the change reads as intentional */
.hero-models{display:flex;justify-content:center;gap:6px;margin-top:clamp(12px,1.8vw,20px);position:relative;z-index:4}
.hero-models button{position:relative;overflow:hidden;padding:10px 20px;border-radius:var(--r-pill);
  font-size:.85rem;font-weight:700;color:var(--ink-2);border:1px solid transparent;
  transition:color var(--fast) var(--ease),border-color var(--fast) var(--ease),background var(--fast) var(--ease)}
.hero-models button:hover{color:var(--ink);border-color:var(--titanium)}
.hero-models button[aria-current="true"]{background:var(--graphite);color:#fff}
.ready 
/* plate assembly — the signature component */
.plate-rig{position:relative;z-index:4;width:min(600px,94vw);margin:clamp(18px,2.5vw,34px) auto 0;
  opacity:0;transform:translateY(20px);transition:opacity var(--scene) var(--ease-out) .5s,transform var(--scene) var(--ease-out) .5s}
.ready .plate-rig{opacity:1;transform:none}
.rig-label{text-align:center;font-family:var(--font-display);font-size:1.02rem;font-weight:600;
  letter-spacing:-.02em;color:var(--ink);margin-bottom:14px}
.rig{
  display:flex;align-items:center;gap:12px;padding:12px 12px 12px 16px;border-radius:var(--r-lg);
  background:#fff;border:1px solid var(--titanium);
  box-shadow:0 2px 4px rgba(16,24,32,.06),0 24px 48px -18px rgba(16,24,32,.28);
  transition:box-shadow var(--normal) var(--ease),background var(--normal) var(--ease),transform var(--normal) var(--ease);
}
.rig.focus{background:rgba(255,255,255,.94);box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 0 0 1px rgba(204,0,0,.5),0 0 0 6px var(--accent-soft),0 34px 80px -24px rgba(16,24,32,.36)}
.plate{position:relative;flex:1;display:flex;align-items:center;border-radius:var(--r-sm);overflow:hidden;background:#F6CB27}
.plate .eu{width:34px;align-self:stretch;background:#1B3AA8;color:#fff;
  font-size:.6rem;font-weight:700;display:flex;align-items:flex-end;justify-content:center;padding-bottom:7px;flex:none}
.plate input{flex:1;width:100%;border:0;background:transparent;text-align:center;text-transform:uppercase;
  font-family:var(--font-display);font-weight:700;font-size:clamp(1.7rem,3.8vw,2.3rem);letter-spacing:.08em;
  color:#111;padding:17px 8px}
.plate input::placeholder{color:rgba(17,17,17,.3)}
.plate input:focus{outline:none}
.rig .go{flex:none;width:62px;height:62px;border-radius:var(--r-sm);background:var(--ink);color:#fff;display:grid;place-items:center;
  transition:transform var(--fast) var(--ease),background var(--fast)}
.rig .go:hover{transform:translateX(2px)}
.rig .go svg{width:20px;height:20px}
.rig-cta{margin-top:12px}
.rig-err{color:#8E1B14;font-size:.85rem;font-weight:500;text-align:center;margin-top:10px;display:none}
.rig-err.show{display:block}

/* --- SCENE 02: what we assess ------------------------------- */
.intel-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,4vw,60px);align-items:center}
.intel-car{position:sticky;top:150px}
.car img,.intel-car img,.m-art img,.twin-car img{width:100%;height:auto}
.facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(20px,2.5vw,40px)}
.fact{display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:baseline;
  padding:clamp(13px,1.3vw,17px) 0;border-top:1px solid rgba(16,18,20,.1);
  opacity:0;transform:translateY(10px);transition:opacity var(--scene) var(--ease-out),transform var(--scene) var(--ease-out)}
.fact.in{opacity:1;transform:none}
.fact:nth-last-child(-n+2){border-bottom:1px solid rgba(16,18,20,.1)}
.fact-n{font-family:var(--font-display);font-size:.85rem;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums}
.fact b{display:block;font-family:var(--font-display);font-size:clamp(1.02rem,1.25vw,1.22rem);font-weight:600;letter-spacing:-.03em;margin-bottom:2px}
.fact span{color:var(--ink-2);font-size:.88rem;line-height:1.45}
.intel-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:clamp(36px,4vw,56px)}
.intel-foot .lede{font-family:var(--font-display);font-size:clamp(1.3rem,2.2vw,1.9rem);color:var(--ink);letter-spacing:-.03em;margin:0}
@media(max-width:900px){
  .intel-grid{grid-template-columns:1fr;gap:18px}
  .intel-car{position:static;max-width:460px;margin-inline:auto}
}
@media(max-width:560px){.facts{grid-template-columns:1fr}.fact:nth-last-child(2){border-bottom:0}}

/* ============================================================
   SCENE 03 — THE MODELS
   ============================================================ */
.models{background:var(--canvas)}
.m-tabs{display:flex;gap:6px;margin-bottom:clamp(24px,3vw,40px);flex-wrap:wrap}
.m-tabs button{position:relative;overflow:hidden;padding:13px 26px;border-radius:var(--r-pill);
  font-family:var(--font-display);font-size:1rem;font-weight:600;letter-spacing:-.02em;
  color:var(--ink-2);background:var(--white);border:1px solid var(--titanium);
  transition:color var(--fast) var(--ease),background var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.m-tabs button:hover{color:var(--ink);border-color:var(--silver)}
.m-tabs button[aria-selected="true"]{background:var(--graphite);color:#fff;border-color:var(--graphite)}
.m-tabs button::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--accent);transform:scaleX(0);transform-origin:left}
.m-tabs button[aria-selected="true"].timing::after{transform:scaleX(1);transition:transform 6s linear}

.m-stage{position:relative}
.m-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,4vw,64px);align-items:center}
.m-panel[hidden]{display:none}
.m-panel.on{animation:mIn 520ms var(--ease-out) both}
@keyframes mIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.m-copy h3{font-size:clamp(1.8rem,3.2vw,2.8rem);margin-bottom:14px}
.m-copy .lede{max-width:46ch;margin-bottom:26px}
.m-spec{display:grid;gap:1px;background:var(--titanium);border:1px solid var(--titanium);
  border-radius:var(--r-md);overflow:hidden;margin:0 0 26px}
.m-spec div{background:var(--white);display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:16px;padding:13px 18px}
.m-spec dt{font-size:.82rem;color:var(--silver);margin:0}
.m-spec dd{margin:0;font-size:.92rem;font-weight:500}
.m-lead{font-family:var(--font-display);font-size:1rem;font-weight:600;letter-spacing:-.02em;margin:0 0 12px}
.m-factors{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:9px}
.m-factors li{display:grid;grid-template-columns:16px 1fr;gap:11px;font-size:.92rem;color:var(--ink-2);line-height:1.5}
.m-factors li::before{content:"";width:8px;height:8px;margin-top:7px;border-radius:2px;background:var(--accent)}
.m-art img{width:100%;height:auto}
@media(max-width:900px){
  .m-panel{grid-template-columns:1fr;gap:22px}
  .m-art{order:-1;max-width:520px;margin-inline:auto}
  .m-tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter)}
  .m-tabs::-webkit-scrollbar{display:none}
  .m-tabs button{flex:none}
  .m-spec div{grid-template-columns:1fr;gap:2px}
}

/* ============================================================
   SCENE 4 — DARK DETAIL SCENES
   ============================================================ */
.to-dark{display:none}
.details{background:#212121;color:#fff;overflow:clip;content-visibility:auto;contain-intrinsic-size:auto 2400px}
.details-open{min-height:64svh;display:grid;place-items:center;text-align:center;padding-block:clamp(70px,9vw,120px)}
.details-open h2{font-size:clamp(2.8rem,8vw,7.5rem);line-height:.9}
.dets{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);overflow:hidden}
.det{position:relative;display:block;background:#212121;padding:clamp(24px,2.6vw,34px)}
.det-word{font-family:var(--font-display);font-size:clamp(1.4rem,1.9vw,1.8rem);font-weight:600;letter-spacing:-.03em;line-height:1;margin-bottom:10px}
.det p{color:rgba(255,255,255,.6);font-size:.92rem;line-height:1.55;max-width:36ch;margin:0}

/* ============================================================
   SCENE 5 — HOW IT WORKS
   ============================================================ */
.works-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,34px)}
.works .row{display:block;padding-top:20px;border-top:2px solid var(--titanium)}
.works .row.lit{border-top-color:var(--accent)}
.works .idx{font-family:var(--font-display);font-size:clamp(1.1rem,1.3vw,1.3rem);font-weight:600;color:var(--titanium);transition:color var(--scene) var(--ease)}
.works .row.lit .idx{color:var(--accent)}
.works h3{font-size:clamp(1.1rem,1.4vw,1.35rem);font-weight:600;margin:8px 0 8px}
.works .row p{color:var(--ink-2);font-size:.92rem;line-height:1.55;max-width:34ch}

/* ============================================================
   SCENE 6 — FINANCE
   ============================================================ */
.finance{background:var(--pearl);content-visibility:auto;contain-intrinsic-size:auto 700px}
.fin-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,90px);align-items:center}
.calc{border-radius:var(--r-xl);padding:clamp(24px,3vw,40px);background:var(--crystal-strong);
  backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);
  border:1px solid var(--crystal-edge);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,var(--crystal-shadow)}
.calc .eg{font-size:.72rem;font-weight:700;color:var(--ink-3);border:1px solid rgba(16,18,20,.14);border-radius:var(--r-pill);padding:5px 12px;display:inline-block;margin-bottom:22px}
.calc-row{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0;border-bottom:1px solid rgba(16,18,20,.09)}
.calc-row span{color:var(--ink-2);font-size:.94rem}
.calc-row b{font-family:var(--font-display);font-size:clamp(1.3rem,2vw,1.7rem);font-weight:600;letter-spacing:-.03em}
.calc-row.total{border-bottom:0;padding-top:22px}
.calc-row.total b{font-size:clamp(1.9rem,3.2vw,2.8rem);color:var(--accent)}
.fin-list{margin:26px 0 34px;padding:0;list-style:none;display:grid;gap:14px}
.fin-list li{display:flex;gap:14px;color:var(--ink-2);font-size:.96rem}
.fin-list svg{width:18px;height:18px;flex:none;margin-top:5px;color:var(--accent)}

/* ============================================================
   SCENE 7 — VALUE HUB (editorial)
   ============================================================ */
.hub-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(24px,3vw,48px)}
.feature{display:block}
.feature .img,.side .img{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--canvas);display:grid;place-items:center}
.feature .img{aspect-ratio:16/10}
.side .img{aspect-ratio:16/9}
.feature .img svg,.side .img svg{width:70%}
.kicker{display:flex;align-items:center;gap:12px;font-size:.76rem;font-weight:700;color:var(--silver);margin:20px 0 12px}
.kicker b{position:relative;padding-left:14px}
.kicker b::before{content:"";position:absolute;left:0;top:50%;translate:0 -50%;width:7px;height:7px;border-radius:2px;background:var(--accent)}
.kicker b{color:var(--accent)}
.feature h3{font-size:clamp(1.7rem,2.8vw,2.5rem);margin-bottom:12px}
.feature p{color:var(--ink-2);max-width:48ch}
.side{display:grid;gap:clamp(20px,2.4vw,32px);align-content:start}
.side article h3{font-size:clamp(1.15rem,1.5vw,1.45rem);margin-bottom:8px}
.side article p{color:var(--ink-2);font-size:.93rem}
.hub-more{margin-top:clamp(30px,4vw,52px)}

/* ============================================================
   SCENE 8 — FINAL CTA
   ============================================================ */

.final .rig-card{background:#fff;border-color:transparent;box-shadow:0 30px 60px -22px rgba(0,0,0,.85)}
.final .rig{background:#fff;border-color:var(--titanium);box-shadow:none}
.final .rig.focus{box-shadow:0 0 0 2px var(--accent-lift),0 24px 48px -20px rgba(0,0,0,.8)}
.final .rig .go{background:var(--accent-lift);color:#fff}
.final .rig-cta{background:var(--accent-lift);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3),0 18px 40px -14px rgba(240,68,56,.5)}
.final .rig-cta:hover{background:#FF5A4D}

/* --- SCENE 08: closing CTA. The registration is the hero here,
       the car supports it — hence the split and the size cap. --- */
.final{background:#141414;color:#fff;padding-block:clamp(72px,8vw,120px);overflow:clip}
.final h2{font-size:clamp(2.4rem,4.6vw,4.2rem);line-height:.95;margin-bottom:18px}
.final .lede{max-width:40ch}
.final-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(32px,5vw,80px);align-items:start}
.final .plate-rig{width:100%;max-width:none;margin:0}
.final .rig-card{padding:clamp(22px,2.4vw,30px)}
.final-next{padding-top:clamp(4px,1vw,12px)}
.final .m-lead{color:#fff;margin-bottom:20px}
.next-steps{list-style:none;margin:0 0 28px;padding:0;display:grid}
.next-steps li{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;
  padding:clamp(16px,1.8vw,22px) 0;border-top:1px solid rgba(255,255,255,.14)}
.next-steps li:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.next-steps .n{font-family:var(--font-display);font-size:.9rem;font-weight:600;color:var(--accent-lift);font-variant-numeric:tabular-nums}
.next-steps b{display:block;font-family:var(--font-display);font-size:clamp(1.02rem,1.3vw,1.2rem);font-weight:600;letter-spacing:-.02em;margin-bottom:5px}
.next-steps span:not(.n){color:rgba(255,255,255,.6);font-size:.92rem;line-height:1.5}
.final-alt{font-size:.92rem;color:rgba(255,255,255,.6)}
.final-alt .tlink{color:#fff;border-bottom-color:rgba(255,255,255,.35)}
@media(max-width:900px){
  .final-grid{grid-template-columns:1fr;gap:34px}
}
@media(max-width:900px){
        .final .plate-rig{max-width:none}
}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--white);content-visibility:auto;contain-intrinsic-size:auto 600px;border-top:1px solid rgba(16,18,20,.09);padding-block:clamp(56px,7vw,90px) 36px}
.fgrid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:clamp(24px,3vw,44px)}
.fcol h4{font-size:.8rem;font-weight:700;color:var(--ink-3);margin:0 0 16px}
.fcol a{display:block;padding:6px 0;font-size:.92rem;color:var(--ink-2)}
.fcol a:hover{color:var(--ink)}
.fbase{margin-top:clamp(40px,5vw,64px);padding-top:26px;border-top:1px solid rgba(16,18,20,.08);display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between}
.disclaimer{max-width:80ch;font-size:.8rem;color:var(--ink-3);line-height:1.6}

/* mobile sticky */
.sticky{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:80;display:none;gap:10px;
  opacity:0;transform:translateY(130%);transition:opacity var(--normal) var(--ease),transform var(--normal) var(--ease)}
.sticky.show{opacity:1;transform:none}
.sticky .btn{flex:1}
.sticky .call{flex:none;width:56px;border-radius:var(--r-pill);display:grid;place-items:center;background:var(--crystal-strong);
  backdrop-filter:blur(20px);border:1px solid var(--crystal-line);box-shadow:var(--crystal-shadow)}
.sticky .call svg{width:20px;height:20px}

/* ============================================================
   VALUATION — full-screen product layer
   ============================================================ */
.app{position:fixed;inset:0;z-index:130;display:none;content-visibility:auto;contain-intrinsic-size:auto 900px;background:var(--pearl);overflow-y:auto;view-transition-name:val-app}
.app.open{display:block}
.app-top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:20px;padding:16px var(--gutter);
  background:rgba(238,241,243,.86);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(16,18,20,.07)}
.app-steps{display:flex;align-items:center;gap:10px;margin-inline:auto;font-size:.82rem;font-weight:500;color:var(--ink-3)}
.app-steps span{display:flex;align-items:center;gap:10px}
.app-steps span::after{content:"";width:26px;height:1px;background:rgba(16,18,20,.16)}
.app-steps span:last-child::after{display:none}
.app-steps span.on{color:var(--ink);font-weight:700}
.app-steps span.done{color:var(--ink-2)}
.app-mob{display:none;font-size:.82rem;color:var(--ink-2);margin-inline:auto;text-align:center}
.app-mob b{display:block;font-family:var(--font-display);font-size:1rem;color:var(--ink)}
.app-close{width:42px;height:42px;border-radius:var(--r-pill);border:1px solid rgba(16,18,20,.14);display:grid;place-items:center;background:#fff}
.app-bar{height:2px;background:rgba(16,18,20,.1);position:sticky;top:74px;z-index:5}
.app-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width var(--scene) var(--ease)}
.app-body{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,70px);align-items:center;
  max-width:1340px;margin-inline:auto;padding:clamp(24px,4vw,56px) var(--gutter) 120px;min-height:calc(100svh - 76px)}

/* digital twin */
.twin{position:sticky;top:130px}
.twin-card{border-radius:var(--r-xl);padding:clamp(22px,2.6vw,34px);background:#fff;border:1px solid rgba(16,18,20,.07);
  box-shadow:0 30px 70px -30px rgba(16,24,32,.28)}
.twin-plate{display:inline-flex;align-items:center;border-radius:8px;overflow:hidden;background:#F6CB27;
  font-family:var(--font-display);font-weight:700;letter-spacing:.06em;font-size:.92rem;color:#111}
.twin-plate .eu{background:#1B3AA8;color:#fff;font-size:.54rem;padding:6px 5px 5px;align-self:stretch;display:grid;align-items:end;justify-items:center}
.twin-plate span{padding:7px 12px}
.twin-year{font-size:.86rem;color:var(--ink-3);margin-top:20px}
.twin-name{font-family:var(--font-display);font-size:clamp(1.8rem,3vw,2.6rem);font-weight:700;letter-spacing:-.04em;line-height:1;margin:4px 0 6px}
.twin-var{color:var(--accent);font-weight:600}
.twin-car{margin:18px 0 6px}
.twin-car.blurred{filter:blur(14px);opacity:.5}
.twin-car{transition:filter var(--scene) var(--ease),opacity var(--scene) var(--ease)}
.twin-attrs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(16,18,20,.08);border:1px solid rgba(16,18,20,.08);border-radius:var(--r-md);overflow:hidden;margin-top:18px}
.twin-attrs div{background:#fff;padding:13px 16px;min-height:58px}
.twin-attrs span{display:block;font-size:.72rem;color:var(--ink-3)}
.twin-attrs b{font-weight:700;font-size:.94rem}
.twin-attrs div.filled{animation:fill var(--normal) var(--ease-out)}
@keyframes fill{from{background:#EEF4FF}to{background:#fff}}

.q{max-width:560px}
.q h2{font-size:clamp(1.9rem,3.4vw,2.9rem);margin-bottom:12px}
.q .lede{margin-bottom:30px;font-size:1.02rem}
.pane{display:none}
.pane.active{display:block;animation:pIn var(--normal) var(--ease-out) both}
@keyframes pIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.field{margin-bottom:18px}
.field label{display:block;font-size:.85rem;color:var(--ink-2);margin-bottom:8px}
.input{width:100%;padding:16px 18px;border-radius:var(--r-sm);background:#fff;border:1px solid rgba(16,18,20,.14);transition:border-color var(--fast),box-shadow var(--fast)}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.input.big{font-family:var(--font-display);font-weight:600;font-size:2.1rem;text-align:center;padding-block:22px;letter-spacing:-.02em}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.err{color:#8E1B14;background:var(--accent-soft);border-left:3px solid var(--accent);
  padding:11px 14px;border-radius:0 8px 8px 0;font-size:.87rem;font-weight:500;margin:0 0 16px;display:none}
.err.show{display:block}
.group{font-size:.85rem;font-weight:700;color:var(--ink-2);margin:26px 0 12px}
.group:first-of-type{margin-top:0}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.opt{padding:16px;border-radius:var(--r-sm);background:#fff;border:1px solid rgba(16,18,20,.12);text-align:left;
  transition:transform var(--fast) var(--ease),border-color var(--fast),box-shadow var(--fast)}
.opt:hover{border-color:rgba(16,18,20,.3)}
.opt.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 10px 24px -14px rgba(204,0,0,.45);transform:scale(1.012)}
.opt b{display:block;font-weight:700;font-size:.96rem}
.opt i{font-style:normal;font-size:.8rem;color:var(--ink-3)}
.opt .chk{position:absolute;top:10px;right:10px;width:16px;height:16px;color:var(--accent);opacity:0;transform:scale(.6);transition:all var(--fast) var(--ease-out)}
.opt{position:relative}
.opt.sel .chk{opacity:1;transform:none}
.opt.sel{background:linear-gradient(0deg,var(--accent-soft),var(--accent-soft)),#fff}
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.sw{width:52px;height:52px;border-radius:14px;border:1px solid rgba(16,18,20,.16);position:relative;transition:transform var(--fast) var(--ease),box-shadow var(--fast)}
.sw:hover{transform:translateY(-2px)}
.sw.sel{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent)}
.sw span{position:absolute;inset:auto 0 -22px;font-size:.7rem;color:var(--ink-3);text-align:center}
.wheels{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.wheel{padding:12px 6px;border-radius:var(--r-sm);border:1px solid rgba(16,18,20,.12);background:#fff;text-align:center;transition:all var(--fast) var(--ease)}
.wheel svg{width:44px;margin:0 auto 6px}
.wheel b{font-size:.85rem}
.wheel.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.actions .btn{flex:1;min-width:160px}
.loadrow{display:flex;align-items:center;gap:12px;color:var(--ink-2);margin-bottom:20px}
.loadrow i{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:beat 1.1s var(--ease) infinite}
@keyframes beat{0%,100%{opacity:.25;transform:scale(.75)}50%{opacity:1;transform:scale(1.1)}}
.next{display:grid;gap:14px;margin:26px 0 30px;padding:0;list-style:none}
.next li{display:flex;gap:14px;color:var(--ink-2);font-size:.95rem}
.next .n{flex:none;width:24px;height:24px;border-radius:50%;border:1px solid rgba(204,0,0,.35);color:var(--accent);font-size:.75rem;font-weight:700;display:grid;place-items:center;margin-top:2px}

/* cookie */
.cookie{position:fixed;right:20px;bottom:20px;left:20px;max-width:560px;z-index:120;border-radius:var(--r-lg);padding:22px;display:none;gap:18px;align-items:center;flex-wrap:wrap;
  background:var(--crystal-strong);backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);
  border:1px solid var(--crystal-edge);box-shadow:var(--crystal-shadow)}
.cookie.show{display:flex}
.cookie p{flex:1;min-width:250px;font-size:.88rem;color:var(--ink-2);margin:0}
.cookie .btn{padding:12px 20px;font-size:.85rem;box-shadow:none}
@media(min-width:721px){.cookie{left:auto}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1080px){
  .dets{grid-template-columns:repeat(2,1fr)}
  .works-grid{grid-template-columns:repeat(2,1fr);gap:26px}
  .fin-grid,.hub-grid,.app-body{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  .twin{position:static}
  .app-body{padding-bottom:140px}
}
@media(max-width:860px){
  .nav-links,.nav .btn{display:none}
  .burger{display:flex}
  .sticky{display:flex}
  .app-steps{display:none}
  .app-mob{display:block}
}
@media (max-height:820px) and (min-width:861px){
  .hero{min-height:auto;padding-block:clamp(120px,14vh,160px) clamp(40px,6vh,72px)}
  .hero h1{font-size:clamp(3rem,6.4vw,5.4rem)}
  .stage .car{width:min(880px,82vw)}
}
@media(max-width:620px){
  .dets,.works-grid{grid-template-columns:1fr}
  .grid2,.twin-attrs,.fgrid,.wheels{grid-template-columns:1fr 1fr}
  .grid2{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .hero{min-height:auto;padding-top:112px;padding-bottom:56px}
  .plate-rig{margin-top:10px}
  .stage{margin-top:26px}
  .rig .go{width:52px;height:52px}
  .app-body{padding-top:24px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .hero h1 .l span{transform:none}
  .stage .car,.plate-rig{opacity:1 !important;transform:none !important;filter:none !important}
  .stage{transform:none !important}
  html{scroll-behavior:auto}
}
@media (prefers-contrast:more){
  :root{--ink-2:#3C4247;--ink-3:#4A5055;--crystal-line:rgba(16,18,20,.3)}
}

/* ============================================================
   COMPONENTS — verified against the class inventory
   ============================================================ */

/* the one section header used by every scene */
.s-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(20px,4vw,72px);
  align-items:end;margin-bottom:clamp(40px,5.5vw,80px);padding-bottom:clamp(20px,2.5vw,32px);
  border-bottom:1px solid rgba(16,18,20,.1)}
.s-head h2{font-size:clamp(2.2rem,4.6vw,4.2rem);max-width:16ch}
.s-head .lede{font-size:clamp(1rem,1vw,1.15rem);max-width:44ch}
.t-dark .s-head{border-bottom-color:rgba(255,255,255,.14)}

/* scene 02 wrapper */
.intel{background:var(--white)}

/* the conversion module */
.rig-form{margin:0}
.rig-card{background:#fff;border:1px solid var(--titanium);border-radius:var(--r-xl);
  padding:clamp(18px,2vw,26px);
  box-shadow:0 2px 4px rgba(16,24,32,.05),0 30px 60px -22px rgba(16,24,32,.3)}
.rig-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:0 4px 14px;margin-bottom:16px;border-bottom:1px solid rgba(16,18,20,.09)}
.rig-title{font-family:var(--font-display);font-size:1.12rem;font-weight:600;
  letter-spacing:-.025em;color:var(--ink)}
.rig-time{font-size:.8rem;font-weight:500;color:var(--silver)}
.rig-trust{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin:16px 0 0;
  padding:14px 4px 0;list-style:none;border-top:1px solid rgba(16,18,20,.09)}
.rig-trust li{display:flex;align-items:center;gap:9px;font-size:.83rem;color:var(--ink-2)}
.rig-trust li::before{content:"";flex:none;width:15px;height:15px;border-radius:50%;background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/13px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/13px no-repeat}
.rig-card .rig{box-shadow:none;border-color:var(--titanium)}
.rig-card .rig.focus{box-shadow:0 0 0 2px var(--accent),0 0 0 6px var(--accent-soft)}
.final .rig-card{border-color:transparent;box-shadow:0 30px 60px -22px rgba(0,0,0,.85)}

@media(max-width:900px){
  .s-head{grid-template-columns:1fr;align-items:start;gap:16px}
  .dets{grid-template-columns:1fr 1fr}
  .works-grid{grid-template-columns:1fr 1fr}
  .hub-grid{grid-template-columns:1fr}
  .final-grid{grid-template-columns:1fr;gap:34px}
  .m-panel{grid-template-columns:1fr;gap:22px}
  .m-art{order:-1;max-width:520px;margin-inline:auto}
}
@media(max-width:768px){
  .fin-grid{grid-template-columns:1fr}
  .intel-grid{grid-template-columns:1fr;gap:18px}
  .intel-car{position:static;max-width:460px;margin-inline:auto}
}
@media(max-width:520px){
  .rig-trust{grid-template-columns:1fr}
}

/* ============================================================
   WORDMARK — typographic, no mark
   ============================================================ */
.wordmark{display:inline-block;line-height:1;white-space:nowrap;color:var(--ink);
  font-family:var(--font-display);font-size:1.08rem;font-weight:700;letter-spacing:-.02em}
.wordmark em{font-style:normal;font-weight:500;color:var(--silver);letter-spacing:.04em}
.nav.on-dark .wordmark,.t-dark .wordmark{color:#fff}
.nav.on-dark .wordmark em,.t-dark .wordmark em{color:rgba(255,255,255,.6)}
footer .wordmark{font-size:1.24rem}

/* ============================================================
   COLOUR: red earns its place through state and structure
   ============================================================ */
:root{--blush:#FBF7F7}

/* scroll progress always legible against a faint track */
.scrollbar{background:rgba(16,18,20,.07)}

/* primary action warms to red on hover — colour as feedback */
.btn:hover{background:var(--accent)}
.btn-line:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.t-dark .btn:hover{background:var(--accent-lift);color:#fff}

/* scene index in the accent, so the page's spine reads in colour */
.scene-no{color:var(--accent)}
.t-dark .scene-no{color:var(--accent-lift)}

/* the live model carries a red marker */
.m-tabs button[aria-selected="true"]{position:relative}
.m-tabs button[aria-selected="true"]::after{content:"";position:absolute;left:50%;bottom:7px;
  translate:-50% 0;width:16px;height:2px;border-radius:2px;background:var(--accent-lift)}

/* each dark panel opens on a red rule */
.det{position:relative}
.det::before{content:"";position:absolute;top:0;left:0;width:44px;height:2px;background:var(--accent-lift)}

/* finance sits on a warm-tinted surface rather than neutral pearl */
.finance{background:var(--blush)}

/* footer: red column rules and link colour on hover */
.fcol h4{position:relative;padding-top:14px;border-top:2px solid var(--titanium)}
.fcol:not(:first-child) h4{border-top-color:var(--accent)}
.fcol a:hover{color:var(--accent)}
.disclaimer{border-top:1px solid rgba(16,18,20,.08);padding-top:18px}

/* ============================================================
   INNER PAGES
   ============================================================ */
.crumbs{padding:calc(84px + 18px) 0 0;font-size:.84rem;color:var(--silver)}
.crumbs .wrap{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumbs a{color:var(--silver)}
.crumbs a:hover{color:var(--accent)}
.crumbs a::after{content:"/";margin-left:8px;color:var(--titanium)}
.crumbs span{color:var(--ink)}
.page-hero{padding-block:clamp(40px,5vw,72px) clamp(56px,7vw,100px)}
body:not(.has-crumbs) .page-hero{padding-top:clamp(120px,14vh,168px)}
.page-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
.page-hero h1{font-size:clamp(2.4rem,5.4vw,4.6rem);margin-bottom:20px}
.page-hero .lede{max-width:46ch}
.page-hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.page-hero-art img{width:100%;height:auto}
.gens{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--titanium);
  border:1px solid var(--titanium);border-radius:var(--r-lg);overflow:hidden}
.gen{background:#fff;padding:clamp(20px,2.4vw,30px)}
.gen b{display:block;font-family:var(--font-display);font-size:clamp(1.05rem,1.4vw,1.3rem);
  font-weight:600;letter-spacing:-.03em;margin-bottom:8px}
.gen p{color:var(--ink-2);font-size:.93rem;line-height:1.55;margin:0}
.faqs{border-top:1px solid rgba(16,18,20,.1)}
.faq{border-bottom:1px solid rgba(16,18,20,.1)}
.faq summary{cursor:pointer;list-style:none;padding:clamp(18px,2vw,24px) 40px clamp(18px,2vw,24px) 0;position:relative;
  font-family:var(--font-display);font-size:clamp(1.02rem,1.3vw,1.22rem);font-weight:600;letter-spacing:-.025em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  translate:0 -60%;rotate:45deg;transition:rotate var(--fast) var(--ease)}
.faq[open] summary::after{rotate:-135deg;translate:0 -20%}
.faq div{padding:0 40px 24px 0;color:var(--ink-2);font-size:.95rem;line-height:1.6;max-width:70ch}
.prose{max-width:72ch}
.prose h2{font-size:clamp(1.2rem,1.7vw,1.5rem);margin:32px 0 10px}
.prose p{color:var(--ink-2);line-height:1.7}
.legal h1{font-size:clamp(2rem,3.6vw,3rem)}
@media(max-width:900px){
  .page-hero-grid{grid-template-columns:1fr;gap:24px}
  .page-hero-art{order:-1;max-width:520px;margin-inline:auto}
  .gens{grid-template-columns:1fr}
}

/* vehicle-found summary */
.found-meta{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.found-meta span{font-size:.82rem;font-weight:500;color:var(--ink-2);background:var(--canvas);
  border:1px solid var(--titanium);border-radius:var(--r-pill);padding:7px 14px}
#miles-hint{margin-top:12px}

/* non-Tesla referral */
.nt-card{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin:22px 0 4px;padding:clamp(18px,2vw,24px);border:1px solid var(--titanium);
  border-left:3px solid var(--accent);border-radius:0 var(--r-lg) var(--r-lg) 0;background:var(--canvas)}
.nt-brand{display:block;font-family:var(--font-display);font-size:1.06rem;font-weight:600;
  letter-spacing:-.025em;color:var(--ink);margin-bottom:4px}
.nt-card .small{margin:0;max-width:44ch}
.nt-card .btn{flex:none}
@media(max-width:560px){.nt-card .btn{width:100%}}

.deeplinks{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:9px}
.deeplinks li{display:grid;grid-template-columns:16px 1fr;gap:11px;font-size:.98rem}
.deeplinks li::before{content:"";width:8px;height:8px;margin-top:8px;border-radius:2px;background:var(--accent)}

.dateline{font-size:.82rem;color:var(--silver);margin:0 0 20px}
.dateline time{color:var(--ink-2)}

/* ============================================================
   NAVIGATION — desktop dropdown + mobile drawer
   ============================================================ */
.menu-btn{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);font-size:.9rem;font-weight:500;
  padding:9px 3px;transition:color var(--fast)}
.menu-btn:hover,.menu-btn[aria-expanded="true"]{color:var(--ink)}
.menu-btn svg{transition:rotate var(--fast) var(--ease)}
.menu-btn[aria-expanded="true"] svg{rotate:180deg}
.nav.on-dark .menu-btn{color:rgba(255,255,255,.72)}
.nav.on-dark .menu-btn:hover{color:#fff}
.drop-all{border-top:1px solid rgba(16,18,20,.09);margin-top:6px;padding-top:12px !important;font-weight:600;color:var(--ink) !important}

/* --- mobile drawer --- */
.drawer{position:fixed;inset:0;z-index:95;display:none;flex-direction:column;
  background:var(--white);overscroll-behavior:contain}
.drawer.open{display:flex}
.drawer-top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px clamp(20px,5vw,32px);border-bottom:1px solid rgba(16,18,20,.09);flex:none}
.drawer-close{width:44px;height:44px;border-radius:var(--r-pill);border:1px solid var(--titanium);
  display:grid;place-items:center;color:var(--ink)}
.drawer-close:active{background:var(--canvas)}
.drawer-nav{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px clamp(20px,5vw,32px) 20px}
.drawer-label{font-size:.72rem;font-weight:700;color:var(--silver);margin:22px 0 4px}
.drawer-label:first-child{margin-top:10px}
.drawer-nav a{display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:54px;padding:12px 0;border-bottom:1px solid rgba(16,18,20,.07);
  font-family:var(--font-display);font-size:1.12rem;font-weight:600;letter-spacing:-.025em;color:var(--ink)}
.drawer-nav a:active{color:var(--accent)}
.drawer-nav a i{width:7px;height:7px;border-right:2px solid var(--titanium);border-top:2px solid var(--titanium);
  rotate:45deg;flex:none}
.drawer-foot{flex:none;padding:16px clamp(20px,5vw,32px) calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(16,18,20,.09);background:var(--canvas)}
@media(min-width:861px){.drawer{display:none !important}}
.nav-links a[aria-current="page"]{color:var(--ink);position:relative}
.nav-links a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;
  background:var(--accent);border-radius:2px}
.nav.on-dark .nav-links a[aria-current="page"]{color:#fff}
.drawer-nav a[aria-current="page"]{color:var(--accent)}
.menu .drop{opacity:0;visibility:hidden;transform:translateY(-6px)}
.menu:has(.menu-btn[aria-expanded="true"]) .drop{opacity:1;visibility:visible;transform:none}

/* founder */
.founder-photo{aspect-ratio:4/5;border-radius:var(--r-lg);background:var(--canvas);
  border:1px dashed var(--titanium);display:grid;place-items:center;text-align:center;
  color:var(--silver);font-size:.9rem;padding:24px}
.founder-photo small{color:var(--ink-3);font-size:.78rem}
.founder-hero .prose{max-width:46ch}

/* ============================================================
   G'S VALUATION ASSISTANT
   ============================================================ */
.chat-av{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--graphite);color:#fff;font-family:var(--font-display);font-weight:700;font-size:.95rem;
  letter-spacing:0;border:2px solid var(--accent)}
.chat-launch{position:fixed;right:20px;bottom:20px;z-index:85;display:flex;align-items:center;gap:12px;
  padding:10px 20px 10px 10px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--titanium);
  box-shadow:0 2px 6px rgba(16,24,32,.1),0 20px 40px -16px rgba(16,24,32,.36);
  transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease)}
.chat-launch:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(16,24,32,.12),0 26px 50px -18px rgba(16,24,32,.42)}
.chat-launch-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2;
  font-family:var(--font-display);font-weight:600;font-size:.95rem;letter-spacing:-.02em;color:var(--ink)}
.chat-launch-txt small{font-family:var(--font-body);font-weight:500;font-size:.74rem;color:var(--silver);letter-spacing:0}
.chat-launch[aria-expanded="true"]{display:none}

.chat{position:fixed;right:20px;bottom:20px;z-index:96;width:min(400px,calc(100vw - 32px));
  height:min(620px,calc(100svh - 40px));display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--titanium);border-radius:var(--r-xl);
  box-shadow:0 4px 12px rgba(16,24,32,.12),0 40px 80px -24px rgba(16,24,32,.45);
  animation:chatIn 260ms var(--ease-out) both}
@keyframes chatIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.chat[hidden]{display:none}
.chat-head{display:flex;align-items:center;gap:12px;padding:14px 16px;flex:none;
  border-bottom:1px solid rgba(16,18,20,.09);background:var(--canvas)}
.chat-who{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.chat-who b{font-family:var(--font-display);font-size:.98rem;font-weight:600;letter-spacing:-.02em}
.chat-who span{font-size:.74rem;color:var(--silver)}
.chat-x{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2)}
.chat-x:hover{background:rgba(16,18,20,.06);color:var(--ink)}

.chat-log{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:18px 16px;display:flex;
  flex-direction:column;gap:10px;scroll-behavior:smooth}
.msg{max-width:84%;padding:11px 15px;border-radius:16px;font-size:.93rem;line-height:1.5;
  animation:msgIn 220ms var(--ease-out) both}
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.msg.bot{align-self:flex-start;background:var(--canvas);border:1px solid rgba(16,18,20,.07);
  border-bottom-left-radius:5px;color:var(--ink)}
.msg.me{align-self:flex-end;background:var(--graphite);color:#fff;border-bottom-right-radius:5px}
.msg b{font-weight:700}
.msg .sub{display:block;color:var(--ink-2);font-size:.85rem;margin-top:4px}
.msg.me .sub{color:rgba(255,255,255,.7)}
.typing{align-self:flex-start;display:flex;gap:4px;padding:14px 16px;background:var(--canvas);
  border:1px solid rgba(16,18,20,.07);border-radius:16px;border-bottom-left-radius:5px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--silver);animation:tdot 1.1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes tdot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.chat-car{align-self:flex-start;max-width:92%;border:1px solid var(--titanium);border-radius:16px;
  overflow:hidden;background:#fff;animation:msgIn 260ms var(--ease-out) both}
.chat-car img{width:100%;height:auto;background:var(--canvas)}
.chat-car .cc-body{padding:13px 15px}
.chat-car .cc-reg{display:inline-block;background:#F6CB27;color:#111;font-family:var(--font-display);
  font-weight:700;font-size:.78rem;letter-spacing:.06em;padding:4px 9px;border-radius:5px;margin-bottom:8px}
.chat-car b{display:block;font-family:var(--font-display);font-size:1.08rem;font-weight:600;letter-spacing:-.03em}
.chat-car .cc-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.chat-car .cc-meta span{font-size:.74rem;color:var(--ink-2);background:var(--canvas);
  border:1px solid var(--titanium);border-radius:999px;padding:4px 10px}

.chat-quick{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px;flex:none}
.chat-quick:empty{display:none}
.chat-quick button{padding:9px 15px;border-radius:var(--r-pill);border:1px solid var(--accent);
  background:var(--accent-soft);color:var(--accent);font-size:.86rem;font-weight:600;
  transition:background var(--fast),color var(--fast)}
.chat-quick button:hover{background:var(--accent);color:#fff}
.chat-quick a{padding:9px 15px;border-radius:var(--r-pill);background:var(--graphite);color:#fff;
  font-size:.86rem;font-weight:600;display:inline-flex;align-items:center}

.chat-form{display:flex;gap:8px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));flex:none;
  border-top:1px solid rgba(16,18,20,.09);background:#fff}
.chat-field{flex:1;min-width:0;padding:12px 15px;border-radius:var(--r-pill);border:1px solid var(--titanium);
  background:var(--canvas);font-size:.94rem}
.chat-field:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px var(--accent-soft)}
.chat-field.plate{font-family:var(--font-display);font-weight:700;font-size:1.15rem;letter-spacing:.08em;
  text-transform:uppercase;text-align:center;background:#F6CB27;color:#111;border-color:#E0B71E}
.chat-send{flex:none;width:44px;height:44px;border-radius:50%;background:var(--graphite);color:#fff;
  display:grid;place-items:center;transition:background var(--fast)}
.chat-send:hover{background:var(--accent)}
.chat-form.done{display:none}

@media(max-width:620px){
  .chat{right:0;left:0;bottom:0;width:100%;height:100svh;border-radius:0;border:0}
  .chat-launch{right:12px;bottom:calc(76px + env(safe-area-inset-bottom));padding:9px 16px 9px 9px}
  .chat-launch-txt small{display:none}
  body.chat-open .sticky{display:none}
}
@media (prefers-reduced-motion:reduce){.chat,.msg,.chat-car{animation:none}}

/* ============================================================
   FIGURES + CHECKLIST
   ============================================================ */
.fig{margin:0 0 26px;border:1px solid var(--titanium);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.fig svg{width:100%;height:auto;display:block;padding:12px 8px 0}
.fig figcaption{padding:14px 18px;border-top:1px solid var(--titanium);background:var(--canvas);
  font-size:.84rem;color:var(--ink-2);line-height:1.5}
.fig figcaption b{color:var(--ink)}

.cl-bar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:16px 20px;margin-bottom:26px;
  border:1px solid var(--titanium);border-radius:var(--r-lg);background:#fff;position:sticky;top:90px;z-index:4}
.cl-prog{flex:1;min-width:140px;height:6px;border-radius:3px;background:var(--titanium);overflow:hidden}
.cl-prog i{display:block;height:100%;width:0;background:var(--accent);transition:width var(--normal) var(--ease)}
.cl-count{font-size:.86rem;color:var(--ink-2);white-space:nowrap}
.cl-count b{font-family:var(--font-display);font-size:1.05rem;color:var(--ink)}
.cl-actions{display:flex;gap:8px;flex-wrap:wrap}
.cl-actions .btn{padding:11px 18px;font-size:.85rem;box-shadow:none}
.cl-group{margin-bottom:34px}
.cl-group h2{font-size:clamp(1.15rem,1.6vw,1.4rem);margin-bottom:12px;padding-bottom:10px;
  border-bottom:2px solid var(--accent);display:inline-block}
.cl-list{list-style:none;margin:0;padding:0}
.cl-list li{border-bottom:1px solid rgba(16,18,20,.08)}
.cl-item{display:grid;grid-template-columns:26px 1fr;gap:14px;align-items:start;padding:15px 4px;cursor:pointer}
.cl-item input{position:absolute;opacity:0;width:0;height:0}
.cl-box{width:24px;height:24px;border-radius:7px;border:2px solid var(--titanium);margin-top:2px;
  display:grid;place-items:center;transition:background var(--fast),border-color var(--fast)}
.cl-box::after{content:"";width:11px;height:6px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;
  rotate:-45deg;margin-top:-3px;opacity:0;transition:opacity var(--fast)}
.cl-item input:checked ~ .cl-box{background:var(--accent);border-color:var(--accent)}
.cl-item input:checked ~ .cl-box::after{opacity:1}
.cl-item input:focus-visible ~ .cl-box{outline:2px solid var(--accent);outline-offset:3px}
.cl-txt b{display:block;font-family:var(--font-display);font-size:1rem;font-weight:600;letter-spacing:-.02em}
.cl-txt span{display:block;font-size:.88rem;color:var(--ink-2);margin-top:3px;line-height:1.5}
.cl-item input:checked ~ .cl-txt b{color:var(--silver);text-decoration:line-through}
.cl-note{margin-top:8px}

@media print{
  .nav,.drawer,.scrollbar,.sticky,.chat,.chat-launch,.cookie,.final,.crumbs,.app,
  .cl-actions,footer,.page-hero-cta{display:none !important}
  body{font-size:11pt}
  .scene{padding-block:12px}
  .cl-bar{position:static;border:0;padding:0}
  .cl-item{break-inside:avoid;page-break-inside:avoid}
  .cl-box{border-color:#666}
  a[href]::after{content:""}
}

/* contact form */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,4vw,60px);align-items:start}
.contact-form textarea.input{resize:vertical;min-height:120px;font-family:var(--font-body)}
.contact-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:.88rem;color:var(--ink-2);margin:6px 0 18px}
.consent input{margin-top:5px;flex:none}
.opt-tag{font-size:.72rem;color:var(--silver);font-weight:500}
.ok{background:rgba(95,208,138,.14);border-left:3px solid #2E9E5B;color:#14612F;padding:12px 15px;
  border-radius:0 8px 8px 0;font-size:.9rem;font-weight:500;margin:0 0 16px}
.contact-aside{padding-top:6px}
.contact-aside p{color:var(--ink-2)}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:28px}}

/* ============================================================
   INLINE CAPTURE BAND — the form, everywhere it is useful
   ============================================================ */
.capband{background:var(--graphite);color:#fff;padding:clamp(26px,3.4vw,40px) 0}
.cap-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,440px);gap:clamp(20px,3vw,48px);align-items:center}
.cap-copy b{display:block;font-family:var(--font-display);font-size:clamp(1.25rem,2vw,1.7rem);
  font-weight:600;letter-spacing:-.03em;margin-bottom:6px}
.cap-copy span{display:block;color:rgba(255,255,255,.62);font-size:.94rem;line-height:1.5;max-width:46ch}
.cap-form{margin:0}
.cap-form .rig{background:#fff;border-color:transparent;box-shadow:0 20px 40px -18px rgba(0,0,0,.7)}
.cap-form .rig.focus{box-shadow:0 0 0 2px var(--accent-lift),0 20px 40px -18px rgba(0,0,0,.7)}
.cap-form .plate input{font-size:clamp(1.4rem,3vw,1.8rem);padding-block:13px}
.cap-form .go{width:54px;height:54px}
.cap-form .rig-err{color:#FFB4AC;text-align:left}
@media(max-width:820px){
  .cap-inner{grid-template-columns:1fr;gap:18px}
  .cap-copy span{max-width:none}
}

/* encouragement + alternative route inside the main card */
.rig-hint{font-size:.84rem;color:var(--ink-2);text-align:center;margin:12px 0 0}
.rig-alt{font-size:.84rem;color:var(--ink-3);text-align:center;margin:14px 0 0}
.linkish{font:inherit;color:var(--accent);font-weight:600;border-bottom:1px solid rgba(204,0,0,.35);padding-bottom:1px}
.linkish:hover{border-color:var(--accent)}
.final .rig-hint{color:rgba(255,255,255,.6)}
.final .rig-alt{color:rgba(255,255,255,.45)}
.final .linkish{color:var(--accent-lift);border-color:rgba(240,68,56,.4)}

/* sources */
.sources{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:14px;max-width:74ch}
.sources li{display:grid;grid-template-columns:16px 1fr;gap:12px;align-items:start}
.sources li::before{content:"";width:8px;height:8px;margin-top:8px;border-radius:2px;background:var(--accent)}
.sources a{font-weight:600}
.sources span{display:block;color:var(--ink-2);font-size:.9rem;line-height:1.5;margin-top:3px}
.src-note{margin-top:20px;max-width:74ch}
.statement{font-family:var(--font-display);font-size:clamp(1.1rem,1.7vw,1.45rem);font-weight:500;
  letter-spacing:-.025em;line-height:1.45;color:var(--ink-2);max-width:60ch;margin:0}
.statement br{display:none}

/* ============================================================
   CASE STUDIES
   ============================================================ */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.case-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--titanium);
  border-radius:var(--r-lg);padding:clamp(18px,2vw,24px);transition:border-color var(--fast),transform var(--fast) var(--ease)}
.case-card:hover{border-color:var(--ink);transform:translateY(-2px)}
.case-thumb{display:grid;place-items:center;aspect-ratio:16/10;border-radius:var(--r-md);background:var(--canvas);
  border:1px dashed var(--titanium);margin-bottom:16px;color:var(--silver);font-size:.8rem}
.case-card b{font-family:var(--font-display);font-size:1.15rem;font-weight:600;letter-spacing:-.03em}
.case-sub{color:var(--accent);font-size:.84rem;font-weight:600;margin:4px 0 8px}
.case-blurb{color:var(--ink-2);font-size:.92rem;line-height:1.5;flex:1}
.case-card .go{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-family:var(--font-display);
  font-weight:600;font-size:.88rem}
.case-card .go svg{width:15px;height:15px;transition:transform var(--fast) var(--ease)}
.case-card:hover .go svg{transform:translateX(3px)}

.case-photo{margin:0 0 28px}
.case-photo-slot{aspect-ratio:16/9;border-radius:var(--r-lg);background:var(--canvas);border:1px dashed var(--titanium);
  display:grid;place-items:center;text-align:center;color:var(--silver);font-size:.95rem;padding:24px}
.case-photo-slot small{display:block;color:var(--ink-3);font-size:.78rem;margin-top:6px}
.case-hero .s-head{border-bottom:0;margin-bottom:clamp(20px,2.5vw,30px)}

.assess{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px 24px}
.assess li{display:grid;grid-template-columns:16px 1fr;gap:11px;font-size:.94rem;color:var(--ink-2)}
.assess li::before{content:"";width:8px;height:8px;margin-top:7px;border-radius:2px;background:var(--accent)}

.gtake{margin:0;border-left:3px solid var(--accent);padding:4px 0 4px 24px;max-width:70ch}
.gtake blockquote{margin:0;font-family:var(--font-display);font-size:clamp(1.08rem,1.5vw,1.3rem);
  font-weight:500;letter-spacing:-.02em;line-height:1.5;color:var(--ink)}
.gtake blockquote p{margin:0 0 14px}
.gtake figcaption{display:flex;align-items:center;gap:12px;margin-top:18px}
.gt-av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--graphite);
  color:#fff;font-family:var(--font-display);font-weight:700;border:2px solid var(--accent)}
.gtake figcaption span span,.gtake figcaption>span:last-child{display:flex;flex-direction:column;
  font-size:.84rem;color:var(--ink-2);line-height:1.35}
.gtake figcaption b{font-family:var(--font-display);font-size:.98rem;color:var(--ink)}
@media(max-width:900px){.cases{grid-template-columns:repeat(2,1fr)}.assess{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.cases,.assess{grid-template-columns:1fr}}

/* case specification panel */
.case-spec{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--titanium);
  border:1px solid var(--titanium);border-radius:var(--r-md);overflow:hidden;margin:14px 0 0}
.case-spec div{background:#fff;padding:14px 18px}
.case-spec dt{font-size:.76rem;color:var(--silver);margin:0 0 3px}
.case-spec dd{margin:0;font-family:var(--font-display);font-size:1rem;font-weight:600;letter-spacing:-.02em}
.spec-note{margin-top:16px;max-width:70ch}
@media(max-width:900px){.case-spec{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.case-spec{grid-template-columns:1fr}}

/* ============================================================
   FOUNDER PAGE
   ============================================================ */
.founder-stage{background:var(--graphite);color:#fff;padding-block:clamp(120px,15vh,170px) clamp(56px,7vw,96px);
  position:relative;overflow:clip}
.founder-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);
  gap:clamp(32px,5vw,80px);align-items:center}
.founder-stage h1{font-size:clamp(4rem,12vw,9rem);line-height:.86;margin:6px 0 10px}
.founder-stage .scene-no{color:var(--accent-lift)}
.founder-role{font-family:var(--font-display);font-size:clamp(1rem,1.4vw,1.2rem);font-weight:500;
  color:rgba(255,255,255,.72);letter-spacing:-.02em;margin:0 0 22px}
.founder-stage .lede{color:rgba(255,255,255,.68);max-width:44ch}
.founder-facts{display:grid;grid-template-columns:repeat(3,auto);gap:clamp(20px,3vw,40px);
  margin:32px 0 34px;padding:22px 0;border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16)}
.founder-facts b{display:block;font-family:var(--font-display);font-size:clamp(1.8rem,3vw,2.6rem);
  font-weight:700;letter-spacing:-.04em;color:#fff;line-height:1}
.founder-facts span{display:block;font-size:.8rem;color:rgba(255,255,255,.55);line-height:1.4;margin-top:6px}
.founder-portrait{margin:0}
.portrait-slot{aspect-ratio:4/5;border-radius:var(--r-xl);display:grid;place-items:center;text-align:center;
  background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.22);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  color:rgba(255,255,255,.55);font-size:.94rem;padding:24px}
.portrait-slot small{display:block;color:rgba(255,255,255,.35);font-size:.76rem;margin-top:6px}
.founder-portrait figcaption{margin-top:14px}
.pill{display:inline-block;font-size:.76rem;font-weight:600;color:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:6px 14px}

.pull{background:var(--white);padding-block:clamp(50px,6vw,86px)}
.pull-quote{font-family:var(--font-display);font-size:clamp(1.6rem,4vw,3.2rem);font-weight:600;
  letter-spacing:-.04em;line-height:1.12;max-width:22ch;margin:0;color:var(--ink)}
.pull-quote em{font-style:normal;color:var(--accent)}

.qgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--titanium);
  border:1px solid var(--titanium);border-radius:var(--r-lg);overflow:hidden}
.qcard{background:#fff;padding:clamp(18px,2vw,26px);transition:background var(--fast)}
.qcard:hover{background:var(--canvas)}
.qn{display:block;font-family:var(--font-display);font-size:.8rem;font-weight:700;color:var(--accent);
  font-variant-numeric:tabular-nums;margin-bottom:12px}
.qcard b{display:block;font-family:var(--font-display);font-size:1.05rem;font-weight:600;letter-spacing:-.025em;margin-bottom:6px}
.qcard p{color:var(--ink-2);font-size:.88rem;line-height:1.5;margin:0}

.beliefs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px);margin-top:clamp(28px,3vw,40px)}
.belief{background:#fff;border:1px solid var(--titanium);border-left:3px solid var(--accent);
  border-radius:0 var(--r-lg) var(--r-lg) 0;padding:clamp(20px,2.2vw,28px)}
.belief b{display:block;font-family:var(--font-display);font-size:1.1rem;font-weight:600;letter-spacing:-.025em;margin-bottom:8px}
.belief p{color:var(--ink-2);font-size:.92rem;line-height:1.55;margin:0}

.journey{background:var(--deep);color:#fff;padding-block:clamp(72px,8vw,120px)}
.journey .s-head{border-bottom-color:rgba(255,255,255,.14)}
.journey .scene-no{color:var(--accent-lift)}
.jsteps{list-style:none;counter-reset:j;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);overflow:hidden}
.jsteps li{counter-increment:j;background:var(--deep);padding:clamp(20px,2.4vw,30px);position:relative}
.jsteps li::before{content:"0" counter(j);display:block;font-family:var(--font-display);font-size:.8rem;
  font-weight:700;color:var(--accent-lift);margin-bottom:10px;font-variant-numeric:tabular-nums}
.jsteps span{font-family:var(--font-display);font-size:clamp(1rem,1.3vw,1.18rem);font-weight:500;
  letter-spacing:-.02em;color:rgba(255,255,255,.9)}
.jclose{margin-top:clamp(28px,3vw,40px);font-size:clamp(1.05rem,1.5vw,1.3rem);color:rgba(255,255,255,.62);
  line-height:1.5;max-width:52ch}
.jclose b{color:#fff;font-family:var(--font-display);font-weight:600;letter-spacing:-.02em}

@media(max-width:1080px){.qgrid{grid-template-columns:repeat(2,1fr)}.jsteps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){
  .founder-grid{grid-template-columns:1fr;gap:30px}
  .founder-portrait{order:-1;max-width:420px}
  .beliefs{grid-template-columns:1fr}
}
@media(max-width:620px){
  .qgrid,.jsteps{grid-template-columns:1fr}
  .founder-facts{grid-template-columns:1fr;gap:16px}
}

/* ---- founder page: kill the dead space, show the cars ---- */
.founder-stage{padding-block:clamp(112px,13vh,150px) clamp(44px,5vw,72px)}
.founder-grid{align-items:center;gap:clamp(28px,4vw,64px)}
.founder-portrait{position:relative;margin:0}
.founder-car{width:100%;height:auto;display:block}
.portrait-inset{position:absolute;left:0;bottom:0;width:min(160px,34%);aspect-ratio:4/5;
  border-radius:var(--r-lg);display:grid;place-items:center;text-align:center;
  background:rgba(255,255,255,.07);border:1px dashed rgba(255,255,255,.28);
  backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
  box-shadow:0 24px 48px -20px rgba(0,0,0,.7);color:rgba(255,255,255,.6);font-size:.82rem;padding:12px}
.portrait-inset small{display:block;color:rgba(255,255,255,.35);font-size:.7rem;margin-top:4px}
.founder-portrait figcaption{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-top:12px}
.founder-facts{margin:26px 0 28px;padding:18px 0}
.pull{padding-block:clamp(38px,4.5vw,64px)}
.cars-scene{padding-block:clamp(56px,6vw,88px)}
.fcars{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,18px)}
.fcar{display:flex;flex-direction:column;background:#fff;border:1px solid var(--titanium);
  border-radius:var(--r-lg);padding:clamp(14px,1.4vw,18px);transition:border-color var(--fast),transform var(--fast) var(--ease)}
.fcar:hover{border-color:var(--ink);transform:translateY(-2px)}
.fcar img{width:100%;height:auto;margin-bottom:10px}
.fcar b{font-family:var(--font-display);font-size:1.12rem;font-weight:600;letter-spacing:-.03em}
.fcar span{color:var(--ink-2);font-size:.86rem;line-height:1.5;margin:6px 0 12px;flex:1}
.fcar em{font-style:normal;font-family:var(--font-display);font-weight:600;font-size:.86rem;color:var(--accent)}
.journey{padding-block:clamp(56px,6.5vw,96px)}
.jclose{margin-top:clamp(22px,2.4vw,32px);max-width:60ch}
.qgrid,.beliefs,.gens{align-items:stretch}
@media(max-width:1080px){.fcars{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){
  .founder-portrait{order:-1;max-width:none}
  .portrait-inset{width:min(140px,30%)}
  .founder-portrait figcaption{justify-content:flex-start}
}
@media(max-width:620px){.fcars{grid-template-columns:1fr}}

/* the prompt is instructional, so it should not look like a typed registration */
.plate input::placeholder{color:rgba(17,17,17,.42);font-size:.62em;letter-spacing:.12em;font-weight:600}
.cap-form .plate input::placeholder,.chat-field.plate::placeholder{font-size:.6em}

/* ============================================================
   CAPTURE CARD — wider, with more presence
   ============================================================ */
.plate-rig{width:min(660px,94vw)}
.rig-card{padding:clamp(22px,2.4vw,32px)}
.rig-title{font-size:1.28rem}
.rig-time{font-size:.84rem}
.rig-card .plate input{font-size:clamp(1.9rem,4.2vw,2.6rem);padding-block:20px;letter-spacing:.09em}
.rig-card .rig .go{width:68px;height:68px}
.rig-card .rig{gap:14px;padding:14px}
.rig-trust{grid-template-columns:repeat(4,1fr);gap:10px}
.rig-trust li{font-size:.79rem;gap:7px}
.rig-trust li::before{width:14px;height:14px}
@media(max-width:820px){.rig-trust{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.rig-trust{grid-template-columns:1fr}}

/* ============================================================
   DOCKED CAPTURE BAR — appears only when nothing else is on screen
   ============================================================ */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:84;background:rgba(22,24,27,.9);
  backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
  border-top:1px solid rgba(255,255,255,.14);
  transform:translateY(110%);transition:transform var(--normal) var(--ease)}
.dock.show{transform:none}
.dock[hidden]{display:none}
.dock-in{max-width:var(--max);margin-inline:auto;padding:12px var(--gutter);
  display:grid;grid-template-columns:1fr minmax(280px,420px) 36px;gap:20px;align-items:center}
.dock-copy b{display:block;font-family:var(--font-display);font-size:1.05rem;font-weight:600;
  letter-spacing:-.025em;color:#fff}
.dock-copy small{display:block;font-size:.78rem;color:rgba(255,255,255,.55);margin-top:2px}
.dock-form{margin:0}
.dock-form .rig{background:#fff;border-color:transparent;padding:6px 6px 6px 8px;gap:8px;box-shadow:none}
.dock-form .plate input{font-size:1.25rem;padding-block:9px}
.dock-form .go{width:44px;height:44px}
.dock-x{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:rgba(255,255,255,.6)}
.dock-x:hover{background:rgba(255,255,255,.1);color:#fff}
@media(max-width:900px){.dock{display:none}}

/* ============================================================
   CHAT NUDGE — one per session, dismissible, never mid-interaction
   ============================================================ */
.nudge{position:fixed;right:20px;bottom:96px;z-index:86;width:min(320px,calc(100vw - 40px));
  display:grid;grid-template-columns:34px 1fr;gap:12px;padding:16px 16px 14px;
  background:#fff;border:1px solid var(--titanium);border-radius:var(--r-lg);
  box-shadow:0 4px 12px rgba(16,24,32,.12),0 30px 60px -22px rgba(16,24,32,.45);
  opacity:0;transform:translateY(10px);transition:opacity var(--normal) var(--ease),transform var(--normal) var(--ease)}
.nudge.show{opacity:1;transform:none}
.nudge[hidden]{display:none}
.nudge p{grid-column:2;margin:0;font-size:.9rem;line-height:1.45;color:var(--ink)}
.nudge-go{grid-column:2;justify-self:start;margin-top:10px;padding:8px 16px;border-radius:var(--r-pill);
  background:var(--graphite);color:#fff;font-size:.82rem;font-weight:700}
.nudge-go:hover{background:var(--accent)}
.nudge-x{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;color:var(--ink-3)}
.nudge-x:hover{background:var(--canvas);color:var(--ink)}
@media(max-width:620px){.nudge{bottom:150px;right:12px}}
@media (prefers-reduced-motion:reduce){.dock,.nudge{transition:none}}

/* area coverage chips */
.areas{display:flex;flex-wrap:wrap;gap:8px}
.areas span{font-size:.86rem;font-weight:500;color:var(--ink-2);background:#fff;
  border:1px solid var(--titanium);border-radius:var(--r-pill);padding:8px 16px}

/* town coverage grid */
.townmap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--titanium);
  border:1px solid var(--titanium);border-radius:var(--r-md);overflow:hidden}
.town{background:#fff;padding:16px 18px;display:flex;flex-direction:column;gap:3px;
  transition:background var(--fast)}
.town:hover{background:var(--canvas)}
.town b{font-family:var(--font-display);font-size:1rem;font-weight:600;letter-spacing:-.025em;color:var(--ink)}
.town span{font-size:.78rem;color:var(--silver)}
@media(max-width:900px){.townmap{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.townmap{grid-template-columns:1fr}}

/* ============================================================
   FLOATING UI — one thing at a time
   Priority: chat panel > nudge > launcher. The sticky CTA stays
   unless the chat itself is open.
   ============================================================ */
body.nudge-open .chat-launch{opacity:0;pointer-events:none}
body.chat-open .chat-launch,body.chat-open .nudge,body.chat-open .sticky,body.chat-open .dock{display:none !important}
.chat-launch{transition:opacity var(--fast) var(--ease),transform var(--fast) var(--ease)}

@media(max-width:860px){
  /* a single stack above the sticky bar, with real clearance */
  .sticky{bottom:calc(10px + env(safe-area-inset-bottom))}
  .chat-launch{right:12px;bottom:calc(78px + env(safe-area-inset-bottom));padding:8px 16px 8px 8px}
  .chat-launch .chat-av{width:30px;height:30px;font-size:.85rem}
  .chat-launch-txt{font-size:.88rem}
  .nudge{left:12px;right:12px;width:auto;bottom:calc(78px + env(safe-area-inset-bottom));
    padding:14px 14px 12px;gap:10px;grid-template-columns:30px 1fr}
  .nudge .chat-av{width:30px;height:30px;font-size:.85rem}
  .nudge p{font-size:.88rem;line-height:1.4}
  .nudge-go{margin-top:8px;padding:9px 16px}
  /* the footer must not sit under the floating stack */
  footer{padding-bottom:calc(150px + env(safe-area-inset-bottom))}
}
@media(max-width:400px){
  .chat-launch-txt{display:none}
  .chat-launch{padding:9px;border-radius:50%}
}

/* ============================================================
   MOBILE NAV — burger left, wordmark centred
   The burger sat directly against the wordmark because the links
   and CTA are hidden below 860px, leaving nothing between them.
   ============================================================ */
@media(max-width:860px){
  .nav-in{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;
    gap:0;padding:8px 10px}
  .nav-in .burger{order:1;grid-column:1;justify-self:start}
  .nav-in .wordmark{order:2;grid-column:2;justify-self:center;font-size:1.02rem}
  .nav-in .nav-links,.nav-in .nav-cta{display:none}
  .burger{border-color:var(--crystal-line);background:rgba(255,255,255,.5)}
  .nav.on-dark .burger{background:rgba(255,255,255,.08)}
  /* keeps the wordmark optically centred despite the single button */
  .nav-in::after{content:"";grid-column:3;width:44px;height:44px}
}
@media(max-width:400px){
  .nav-in{grid-template-columns:40px 1fr 40px;padding:7px 8px}
  .nav-in::after{width:40px;height:40px}
  .burger{width:40px;height:40px}
}

/* ============================================================
   MOBILE NAV — a bar, not a floating lozenge
   The desktop capsule reads as bulky at phone width and its
   pill radius made it look like a blob rather than a nav.
   ============================================================ */
@media(max-width:860px){
  .nav{top:0;left:0;right:0}
  .nav-in{width:100%;border-radius:0;border-left:0;border-right:0;border-top:0;
    border-bottom:1px solid var(--crystal-line);
    background:rgba(255,255,255,.82);
    box-shadow:none;
    padding:0 8px;min-height:56px;
    grid-template-columns:44px 1fr 44px}
  .nav.tight .nav-in{width:100%;background:rgba(255,255,255,.93);padding:0 8px;
    box-shadow:0 1px 12px rgba(16,24,32,.08)}
  .nav.on-dark .nav-in{background:rgba(18,20,23,.82);border-bottom-color:rgba(255,255,255,.12);box-shadow:none}
  .nav-in .wordmark{font-size:.98rem;letter-spacing:-.01em}
  .burger{width:40px;height:40px;border:0;background:none}
  .nav.on-dark .burger{background:none}
  .nav-in::after{width:40px}
  /* content must clear a bar that now sits flush to the top */
  .hero{padding-top:calc(72px + 4vh)}
  .page-hero,.founder-stage,.guide-hero,.case-hero{padding-top:84px}
  .crumbs{padding-top:70px}
  body:not(.has-crumbs) .page-hero{padding-top:84px}
}
@media(max-width:400px){
  .nav-in{min-height:52px;grid-template-columns:40px 1fr 40px}
  .nav-in .wordmark{font-size:.92rem}
}

/* ============================================================
   MOBILE NAV + DRAWER — tightened
   ============================================================ */
@media(max-width:860px){
  .nav{top:0 !important}
  .nav-in{min-height:54px}

  /* drawer: no dead space at the top, tighter rows */
  .drawer{padding:0}
  .drawer-top{padding:10px 16px 10px 20px;min-height:54px}
  .drawer-top .wordmark{font-size:1rem}
  .drawer-close{width:38px;height:38px}
  .drawer-nav{padding:4px 20px 16px}
  .drawer-label{margin:16px 0 2px;font-size:.7rem}
  .drawer-label:first-child{margin-top:12px}
  .drawer-nav a{min-height:48px;padding:10px 0;font-size:1.04rem}
  .drawer-foot{padding:12px 20px calc(12px + env(safe-area-inset-bottom))}
  .drawer-foot .btn{padding:16px 26px}
}

/* ============================================================
   MOBILE NAV BAR — explicit height, no inherited vertical padding
   min-height plus inherited padding-block was leaving dead space
   above the wordmark. Fixed height removes the ambiguity.
   ============================================================ */
@media(max-width:860px){
  .nav{top:0 !important;padding:0}
  .nav-in{height:52px;min-height:0;padding:0 6px 0 4px;align-content:center;align-items:center;
    grid-template-columns:44px 1fr 44px;row-gap:0}
  .nav.tight .nav-in{height:52px;padding:0 6px 0 4px}
  .nav-in .wordmark{line-height:1;align-self:center}
  .nav-in .burger{align-self:center;height:36px;width:36px}
  .nav-in::after{height:36px;width:36px}
  .nav-in .burger span,.nav-in .burger span::before,.nav-in .burger span::after{width:16px}
  /* hero can start sooner now the bar is shorter */
  .hero{padding-top:calc(58px + 3vh)}
  .page-hero,.founder-stage,.guide-hero,.case-hero{padding-top:72px}
  .crumbs{padding-top:60px}
  body:not(.has-crumbs) .page-hero{padding-top:72px}
}
@media(max-width:400px){
  .nav-in{height:50px;grid-template-columns:40px 1fr 40px}
  .nav-in::after{width:34px;height:34px}
  .nav-in .burger{width:34px;height:34px}
}

/* ============================================================
   MOBILE NAV — balanced three-column, true optical centre
   Side columns are identical widths so the wordmark sits on the
   real centre line, and the burger gets a 44px tap target.
   ============================================================ */
@media(max-width:860px){
  .nav-in{height:56px;padding:0 10px;grid-template-columns:48px 1fr 48px;
    column-gap:8px;align-items:center}
  .nav.tight .nav-in{height:56px;padding:0 10px}

  .nav-in .burger{grid-column:1;justify-self:center;align-self:center;
    width:44px;height:44px;display:flex;align-items:center;justify-content:center;
    border:0;background:none;border-radius:12px;transition:background var(--fast) var(--ease)}
  .nav-in .burger:active{background:rgba(16,18,20,.06)}
  .nav.on-dark .burger:active{background:rgba(255,255,255,.1)}
  .nav-in .burger span,.nav-in .burger span::before,.nav-in .burger span::after{width:18px;height:1.6px}
  .nav-in .burger span::before{top:-6px}
  .nav-in .burger span::after{top:6px}

  .nav-in .wordmark{grid-column:2;justify-self:center;align-self:center;
    font-size:1.02rem;line-height:1;letter-spacing:-.005em;white-space:nowrap}
  .nav-in .wordmark em{letter-spacing:.055em}

  /* phantom column, matched to the burger so the centre is genuine */
  .nav-in::after{content:"";grid-column:3;width:44px;height:44px}

  .hero{padding-top:calc(62px + 3vh)}
  .page-hero,.founder-stage,.guide-hero,.case-hero{padding-top:76px}
  .crumbs{padding-top:64px}
  body:not(.has-crumbs) .page-hero{padding-top:76px}
}
@media(max-width:400px){
  .nav-in{height:54px;padding:0 8px;grid-template-columns:44px 1fr 44px;column-gap:6px}
  .nav-in .burger,.nav-in::after{width:40px;height:40px}
  .nav-in .wordmark{font-size:.95rem}
}

/* ============================================================
   MOBILE NAV — give the bar an actual presence
   A translucent white panel over a white page is invisible, so
   only the bottom hairline showed and the logo looked like it was
   sitting on a rule. Solid surface, flush to the top, real depth.
   ============================================================ */
@media(max-width:860px){
  .nav{top:0 !important;padding:0 !important}
  .nav-in{
    background:#fff !important;
    border:0 !important;
    border-bottom:1px solid rgba(16,18,20,.08) !important;
    box-shadow:0 1px 0 rgba(16,18,20,.02) !important;
    border-radius:0 !important;
    backdrop-filter:none;-webkit-backdrop-filter:none;
    height:58px;padding:0 10px}
  .nav.tight .nav-in{
    background:#fff !important;
    box-shadow:0 2px 14px rgba(16,24,32,.09) !important;
    border-bottom-color:transparent !important;
    height:58px;padding:0 10px}
  .nav.on-dark .nav-in{
    background:#141619 !important;
    border-bottom-color:rgba(255,255,255,.1) !important;
    box-shadow:none !important}

  /* everything sits on the bar's optical centre line */
  .nav-in{display:grid;grid-template-columns:48px 1fr 48px;align-items:center;column-gap:8px}
  .nav-in .burger,.nav-in::after{width:44px;height:44px;align-self:center;justify-self:center}
  .nav-in .wordmark{align-self:center;justify-self:center;line-height:1}

  .hero{padding-top:calc(64px + 3vh)}
  .page-hero,.founder-stage,.guide-hero,.case-hero{padding-top:78px}
  .crumbs{padding-top:66px}
  body:not(.has-crumbs) .page-hero{padding-top:78px}
}
@media(max-width:400px){
  .nav-in,.nav.tight .nav-in{height:54px;padding:0 8px}
  .nav-in{grid-template-columns:44px 1fr 44px}
  .nav-in .burger,.nav-in::after{width:40px;height:40px}
}

/* ============================================================
   MOBILE HEADER — a graphite bar, not a white ghost
   White-on-white can only ever be a hairline. A solid graphite bar
   reads instantly as a header, holds the wordmark properly, and
   stays constant across light and dark scenes so it never flickers.
   ============================================================ */
@media(max-width:860px){
  .nav{top:0 !important;padding:0 !important}

  .nav-in,
  .nav.tight .nav-in,
  .nav.on-dark .nav-in{
    height:62px;
    padding:0 6px 0 4px;
    background:var(--graphite) !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:0 1px 0 rgba(255,255,255,.06) inset !important;
    backdrop-filter:none;-webkit-backdrop-filter:none;
    display:grid;grid-template-columns:52px 1fr 52px;column-gap:6px;align-items:center;
  }
  .nav.tight .nav-in{box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 6px 20px rgba(0,0,0,.28) !important}

  /* wordmark: bigger, brighter, with room to breathe */
  .nav-in .wordmark,
  .nav.on-dark .wordmark{
    grid-column:2;justify-self:center;align-self:center;
    color:#fff !important;font-size:1.12rem;line-height:1;letter-spacing:-.01em}
  .nav-in .wordmark em,
  .nav.on-dark .wordmark em{color:rgba(255,255,255,.62) !important;letter-spacing:.07em;margin-left:.14em}

  /* burger: a proper control, not three floating lines */
  .nav-in .burger,
  .nav.on-dark .burger{
    grid-column:1;justify-self:center;align-self:center;
    width:44px;height:44px;border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.09) !important;border:0 !important;
    transition:background var(--fast) var(--ease)}
  .nav-in .burger:active{background:rgba(255,255,255,.18) !important}
  .nav-in .burger span,
  .nav-in .burger span::before,
  .nav-in .burger span::after{background:#fff !important;width:17px;height:1.7px;border-radius:2px}
  .nav-in .burger span::before{top:-5.5px}
  .nav-in .burger span::after{top:5.5px}

  .nav-in::after{content:"";grid-column:3;width:44px;height:44px}

  /* the red progress line reads properly against graphite */
  .scrollbar{background:rgba(255,255,255,.12)}

  .hero{padding-top:calc(68px + 3vh)}
  .page-hero,.founder-stage,.guide-hero,.case-hero{padding-top:82px}
  .crumbs{padding-top:70px}
  body:not(.has-crumbs) .page-hero{padding-top:82px}

  /* drawer header matches the bar so opening the menu is continuous */
  .drawer-top{background:var(--graphite);border-bottom:0;min-height:62px;padding:0 6px 0 20px}
  .drawer-top .wordmark{color:#fff;font-size:1.12rem}
  .drawer-top .wordmark em{color:rgba(255,255,255,.62)}
  .drawer-close{width:44px;height:44px;border:0;border-radius:12px;
    background:rgba(255,255,255,.09);color:#fff}
  .drawer-close:active{background:rgba(255,255,255,.18)}
}
@media(max-width:400px){
  .nav-in,.nav.tight .nav-in,.nav.on-dark .nav-in{height:58px;grid-template-columns:48px 1fr 48px}
  .nav-in .wordmark{font-size:1.04rem}
  .nav-in .burger,.nav-in::after{width:40px;height:40px}
}

/* ============================================================
   MOBILE HEADER — floating bar
   Detached from the top edge with real shadow so it sits above the
   page rather than being welded to it. A soft rectangle radius, not
   a full pill, so it reads as a bar and not a lozenge.
   ============================================================ */
@media(max-width:860px){
  .nav{top:calc(10px + env(safe-area-inset-top)) !important;left:0;right:0;padding:0 !important}

  .nav-in,
  .nav.tight .nav-in,
  .nav.on-dark .nav-in{
    width:calc(100% - 24px);
    height:60px;
    padding:0 8px 0 6px;
    border-radius:18px !important;
    background:rgba(28,30,34,.92) !important;
    backdrop-filter:blur(20px) saturate(160%);
    -webkit-backdrop-filter:blur(20px) saturate(160%);
    border:1px solid rgba(255,255,255,.09) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,.08) inset,
      0 8px 20px -8px rgba(0,0,0,.45),
      0 22px 44px -18px rgba(0,0,0,.55) !important;
    display:grid;grid-template-columns:50px 1fr 50px;column-gap:6px;align-items:center;
  }
  /* lifts a little further once you start scrolling */
  .nav.tight .nav-in{
    background:rgba(22,24,28,.96) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,.09) inset,
      0 10px 24px -8px rgba(0,0,0,.5),
      0 28px 56px -20px rgba(0,0,0,.6) !important;
  }

  /* the red progress line belongs to the page, not the floating bar */
  .scrollbar{background:transparent}

  .hero{padding-top:calc(84px + 3vh)}
  .page-hero,.founder-stage,.guide-hero,.case-hero{padding-top:96px}
  .crumbs{padding-top:86px}
  body:not(.has-crumbs) .page-hero{padding-top:96px}

  /* drawer opens from behind the floating bar */
  .drawer{padding-top:0}
  .drawer-top{background:var(--graphite);min-height:60px}
}
@media(max-width:400px){
  .nav{top:calc(8px + env(safe-area-inset-top)) !important}
  .nav-in,.nav.tight .nav-in,.nav.on-dark .nav-in{
    width:calc(100% - 20px);height:56px;border-radius:16px !important;
    grid-template-columns:46px 1fr 46px}
  .hero{padding-top:calc(78px + 3vh)}
}

/* ============================================================
   MOBILE HEADER — flex layout, absolute centred wordmark
   The grid was resolving to more than one row, which pushed the
   wordmark to the bottom and let the burger overflow the bar.
   Flex with an absolutely positioned wordmark removes any row
   ambiguity: the bar is exactly its stated height and everything
   is centred on it.
   ============================================================ */
@media(max-width:860px){
  .nav-in,
  .nav.tight .nav-in,
  .nav.on-dark .nav-in{
    display:flex !important;
    position:relative !important;
    align-items:center !important;
    justify-content:space-between !important;
    grid-template-columns:none !important;
    column-gap:0 !important;
    height:60px !important;
    min-height:0 !important;
    padding:0 8px !important;
    box-sizing:border-box;
    overflow:visible;
  }

  .nav-in .burger,
  .nav.on-dark .burger{
    position:relative !important;
    order:-1;
    flex:0 0 44px;
    width:44px !important;height:44px !important;
    margin:0 !important;
    align-self:center !important;
    justify-self:auto !important;
    grid-column:auto !important;
  }

  .nav-in .wordmark,
  .nav.on-dark .wordmark{
    position:absolute !important;
    left:50% !important;top:50% !important;
    transform:translate(-50%,-50%) !important;
    margin:0 !important;
    grid-column:auto !important;
    justify-self:auto !important;align-self:auto !important;
    display:inline-block !important;
    white-space:nowrap;
    font-size:1.1rem;line-height:1;
  }

  /* balance spacer on the right, same width as the burger */
  .nav-in::after{
    content:"" !important;
    position:relative !important;
    flex:0 0 44px;
    width:44px !important;height:44px !important;
    grid-column:auto !important;
  }
}
@media(max-width:400px){
  .nav-in,.nav.tight .nav-in,.nav.on-dark .nav-in{height:56px !important;padding:0 6px !important}
  .nav-in .burger,.nav-in::after{flex-basis:40px;width:40px !important;height:40px !important}
  .nav-in .wordmark{font-size:1.02rem}
}