/* LeadsAvenue.ai
   Voice: Inter. Signs and numerals: Overpass (the highway-sign face the client desks use). Data: Overpass Mono.
   Palette is the brand's own: asphalt black, lane-line green, signal amber, plus the desk's flag red. */

@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"Overpass";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/overpass-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"Overpass Mono";font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/fonts/overpass-mono-latin-wght-normal.woff2) format("woff2")}

:root{
  --bg:#050705; --surface:#0a0e0b; --surface-2:#0e1410; --text:#e9eae7;
  --n100:#f4f6f4; --n200:#e3e7e3; --n300:#c9cfc8; --n400:#a7afa6; --n500:#8e968d; --n600:#6d746c; --n700:#4c524b; --n800:#2f342e; --n900:#1a1e19;
  --green:#5fd16e; --g100:#eafbec; --g200:#cdf3d3; --g300:#a7e8b1; --g600:#45b055; --g700:#2e7a3a; --g800:#1d4f26; --g900:#122e18;
  --sign:#1c6a30; --sign-dim:#0f2a17; --sign-lit:#23833b;
  --amber:#e8b34a; --tag:#ffd23a; --tag-ink:#17150a;
  --flag:#ff6b5f; --flag-ink:#1a0605; --flag-deep:#3a1512;
  --line:rgba(233,234,231,.10); --line-2:rgba(233,234,231,.06);
  --voice:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --signf:"Overpass","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --data:"Overpass Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --pad:clamp(20px,5vw,72px);
  --hdr:66px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.6 var(--voice);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,canvas{max-width:100%}
a{color:var(--g300);text-decoration:none}
a:hover{color:var(--g200)}
h1,h2,h3,h4,p,figure,dl,dd,ol,ul,blockquote{margin:0}
ol,ul{padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}
::selection{background:var(--g800);color:var(--g100)}
section{scroll-margin-top:var(--hdr)}
[hidden]{display:none!important}

/* ---------- utilities ---------- */
.wrap{max-width:1280px;margin:0 auto;padding-inline:var(--pad)}
.grow{flex:1}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 14px;background:var(--green);color:#050705;border-radius:6px;font-weight:600}
.skip:focus{top:12px}
.fine{font-size:13.5px;line-height:1.55;color:var(--n500);max-width:78ch}
.sec{position:relative;padding:clamp(84px,12vh,150px) 0;border-top:1px solid var(--line)}

/* the street-sign blade that names a section */
.blade{display:inline-block;margin:0 0 26px;padding:8px 12px 5px;border-radius:4px;background:var(--sign);color:#fff;font:800 12.5px/1 var(--signf);letter-spacing:.1em;text-transform:uppercase;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.92),0 0 0 2px var(--sign)}
.blade-flag{background:var(--flag);color:var(--flag-ink);box-shadow:inset 0 0 0 1.5px var(--flag-ink),0 0 0 2px var(--flag)}
.blade-caution{background:var(--tag);color:var(--tag-ink);box-shadow:inset 0 0 0 1.5px var(--tag-ink),0 0 0 2px var(--tag)}

.h2{max-width:21ch;font:700 clamp(32px,4.5vw,62px)/1.03 var(--voice);letter-spacing:-.033em;text-wrap:balance}
.h2.wide{max-width:none}
.h2.wide span{display:block}
.h2.long{font-size:clamp(28px,3.7vw,50px);line-height:1.06}
.lede{margin-top:26px;max-width:64ch;font-size:clamp(17px,1.36vw,20px);line-height:1.6;color:var(--n300);text-wrap:pretty}
h3{font:700 21px/1.25 var(--voice);letter-spacing:-.015em}

.more{display:inline-block;margin-top:18px;font-weight:600;font-size:15.5px;color:var(--g200);text-decoration:underline;text-decoration-color:var(--g700);text-underline-offset:5px;text-decoration-thickness:1.5px}
.more:hover{text-decoration-color:var(--green)}

.btn{display:inline-flex;align-items:center;gap:12px;padding:13px 20px;border:1px solid var(--green);border-radius:8px;background:transparent;color:var(--g200);font:600 14.5px/1.2 var(--voice);letter-spacing:-.01em;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.btn:hover{background:rgba(95,209,110,.12);color:var(--g100)}
.btn-sm{padding:10px 18px;font-size:13px;font-weight:500}
.btn-lg{padding:16px 26px;font-size:15px}
.btn-quiet{border-color:var(--n800);color:var(--n300);font-weight:500;font-size:14.5px;padding-inline:22px}
.btn-quiet:hover{border-color:var(--g700);color:var(--g200);background:transparent}
.btn-solid{justify-content:center;width:100%;padding:16px 22px;background:var(--green);color:#050705;font-size:16px;font-weight:700}
.btn-solid:hover{background:var(--g300);color:#050705}
.btn-solid[disabled]{opacity:.6;cursor:progress}

.pill{display:inline-block;margin-left:8px;padding:3px 6px 2px;border:1px solid var(--n700);border-radius:4px;font:700 10.5px/1 var(--signf);letter-spacing:.07em;text-transform:uppercase;color:var(--n400);white-space:nowrap;vertical-align:1px}
.pill.ok{border-color:var(--g700);color:var(--g300)}

/* a lane-line dash for a bullet */
.ticks{display:grid;gap:11px}
.ticks li{position:relative;padding-left:28px;font-size:15.5px;line-height:1.5;color:var(--n300)}
.ticks li::before{content:"";position:absolute;left:0;top:.68em;width:16px;height:3px;border-radius:2px;background:var(--green)}
.ticks.cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 40px}

/* a guide-sign plate that carries one proven number */
.plate{position:relative;display:grid;gap:8px;align-content:start;min-width:0;padding:26px 26px 22px;border-radius:14px;background:var(--sign-dim);color:#fff;transition:background .2s}
.plate::after{content:"";position:absolute;inset:6px;border:2px solid rgba(255,255,255,.72);border-radius:9px;pointer-events:none}
.plate b{font:900 clamp(46px,5.2vw,74px)/.82 var(--signf);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.plate span{font:700 16px/1.28 var(--signf);letter-spacing:.005em;text-wrap:balance}
.plate i{margin-top:6px;font:500 13px/1.3 var(--voice);font-style:normal;color:var(--g200)}
a.plate:hover{background:var(--sign);color:#fff}
.plate-flag{background:var(--flag-deep)}
.plate-flag::after{border-color:rgba(255,107,95,.85)}
.plate-flag b{color:var(--flag)}
.plate-flag i{color:#ffc9c3}
a.plate-flag:hover{background:#4a1a16}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:70;display:flex;align-items:center;gap:clamp(12px,2vw,30px);height:var(--hdr);padding:0 clamp(18px,4vw,44px);background:rgba(5,7,5,.74);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.hdr-logo{display:flex;align-items:center;gap:10px;flex:none;color:var(--text)}
.hdr-logo img{display:block;height:26px;width:auto}
.hdr-logo span{font-size:15px;font-weight:600;letter-spacing:.03em}
.hdr-logo b{font-weight:600;color:var(--green)}
.hdr-nav{display:flex;align-items:center;gap:clamp(14px,1.8vw,26px);flex:none}
.hdr-nav a{font-size:13px;font-weight:500;color:var(--n400);white-space:nowrap}
.hdr-nav a:hover{color:var(--text)}
@media(max-width:1060px){.hdr-nav{display:none}}

/* ---------- hero: the film, then the promise ---------- */
.vignette{position:fixed;inset:0;z-index:60;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%,transparent 45%,rgba(0,0,0,.5) 100%);transition:opacity 1100ms ease}
.hero{position:relative;display:flex;align-items:center;min-height:100vh;min-height:100svh;overflow:hidden;background:#000}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%;filter:brightness(1.22) saturate(1.06)}
.hero-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:transparent;opacity:1;transition:opacity 0ms cubic-bezier(.33,0,.5,1)}
/* the film always fills the hero. A window taller than it is wide gets the upright cut, framed on the road */
@media(max-aspect-ratio:1/1){.hero-film{object-position:center 45%}}
/* in a wide window the film is fitted to what is on screen, even when the hero runs longer than the window */
@media(min-aspect-ratio:1/1){.hero-film{bottom:auto;height:min(100%,100svh)}}
.hero-scrim{position:absolute;inset:0;transition:opacity 1100ms ease}
.hero-scrim-x{background:linear-gradient(90deg,rgba(5,7,5,.9) 0%,rgba(5,7,5,.66) 44%,rgba(5,7,5,.28) 100%)}
.hero-scrim-y{background:linear-gradient(0deg,rgba(5,7,5,.82) 0%,rgba(5,7,5,.14) 44%,rgba(5,7,5,.6) 100%)}
.hero-in{position:relative;z-index:1;width:100%;max-width:1280px;margin:0 auto;padding:clamp(96px,12.6vh,140px) var(--pad) clamp(64px,9vh,104px)}
.hero-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 26px;font-size:10.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--green)}
.hero-eyebrow span{width:36px;height:1px;background:linear-gradient(90deg,transparent,var(--green))}
.hero h1{max-width:19ch;font-size:clamp(40px,5.6vw,84px);line-height:.98;font-weight:700;letter-spacing:-.035em;text-wrap:balance}
.hero h1 span{display:block;color:var(--green)}
.hero-sub{margin-top:30px;max-width:58ch;font-size:clamp(16px,1.3vw,19px);line-height:1.6;color:var(--n300);text-wrap:pretty}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:38px}
.hero-pills{display:none}
.hero-strip{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;margin-top:clamp(44px,7vh,72px);padding-top:26px;border-top:1px solid var(--line)}
.hero-strip span{font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--n400)}
.hero-strip span.on{color:var(--green)}
.hero-strip i{font-style:normal;color:var(--n700)}
.hero-strip em{font-style:normal;font-size:12.5px;color:var(--n500)}
.hero-lockup{min-height:44px;margin-top:24px}
.hl{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px}
.hl img{display:block;height:31px;width:auto}
.hl span{font-size:12.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--n400)}
.hl button{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--n800);border-radius:8px;background:transparent;color:var(--n500);font:500 11px/1.2 var(--voice);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.hl button i{font-style:normal;font-size:13px;line-height:1}
.hl button:hover{border-color:var(--g700);color:var(--g200)}

/* film states. Without script the copy simply shows over the still. */
.hc{transition:opacity 900ms ease}
.hc2{transition:opacity 1100ms ease 150ms}
.hc3{transition:opacity 1100ms ease 400ms}
.hc4{transition:opacity 900ms ease 650ms}
.hc5{transition:opacity 900ms ease 850ms}
.hl{transition:opacity 900ms ease 400ms}
.js .hero.is-film .hc,.js .hero.is-film .hl{opacity:0}
.js .hero.is-film .hero-scrim{opacity:.15}
.js .hero.is-film ~ .vignette,.js .vignette.dim{opacity:.3}
.js .hero.is-wait .hero-bg{opacity:0}
.hero.film-out .hero-film{opacity:0;transition-duration:1400ms}
.hero.no-film .hero-film{display:none}

@media(max-width:1060px){
  .hero-pills{display:flex;gap:10px;margin-top:34px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .hero-pills::-webkit-scrollbar{display:none}
  .hero-pills a{flex:none;padding:9px 15px;border:1px solid var(--n800);border-radius:999px;font-size:13px;font-weight:500;color:var(--n300);white-space:nowrap}
}
@media(max-width:900px){
  .hero{align-items:flex-end}
  .hero-bg{top:auto;bottom:0;height:clamp(300px,46vh,520px);object-position:center 62%;-webkit-mask-image:linear-gradient(180deg,transparent,#000 42%);mask-image:linear-gradient(180deg,transparent,#000 42%)}
  .hero-in{padding-top:calc(74px + 26px);padding-bottom:clamp(52px,8vh,84px)}
  .hero h1{font-size:clamp(34px,8.6vw,46px)}
  .hero-eyebrow{letter-spacing:.16em}
  .hdr-logo img{height:38px}
  .hdr-logo span{font-size:18px}
  .hdr .btn-sm{padding:9px 13px;font-size:12.5px}
}
/* on a phone held upright the film is pushed in a little and its last frame stays behind the headline */
@media(max-width:900px) and (max-aspect-ratio:1/1){
  .hero-film{object-position:center 70%;transform:scale(1.28);transform-origin:50% 68%}
  .hero.film-out .hero-film{opacity:1}
}
@media(max-width:420px){.hdr-logo span{display:none}}

/* ---------- the rail: mile markers down the left edge ---------- */
.rail{position:fixed;z-index:40;left:max(12px,calc((100vw - 1280px)/2 + 18px));top:50%;transform:translateY(-50%);opacity:0;pointer-events:none;transition:opacity .3s}
.rail.on{opacity:1;pointer-events:auto}
.rail ol{display:grid;gap:13px}
.rail li{position:relative}
.rail li + li::before{content:"";position:absolute;left:13px;top:-10px;width:2px;height:7px;border-radius:1px;background:var(--n800)}
.rail a{display:flex;align-items:center;gap:10px}
.rail b{display:grid;place-items:center;width:28px;height:30px;padding-top:2px;border-radius:4px;background:var(--n900);color:var(--n500);font:800 13px/1 var(--signf);font-variant-numeric:tabular-nums;transition:background .2s,color .2s}
.rail span{padding:6px 9px 4px;border-radius:4px;background:var(--sign);color:#fff;font:800 11px/1 var(--signf);letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;box-shadow:inset 0 0 0 1px rgba(255,255,255,.85);opacity:0;transform:translateX(-4px);transition:opacity .15s,transform .15s;pointer-events:none}
.rail a:hover span,.rail a:focus-visible span{opacity:1;transform:none}
.rail a:hover b{color:var(--text)}
.rail li.on b{background:var(--sign);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.9)}
.rail li.done::before,.rail li.on::before{background:var(--green)}
@media(max-width:1180px){.rail{display:none}}

/* ---------- 1 · what we do ---------- */
.lanes{margin-top:clamp(40px,6vh,72px)}
/* each lane: the picture that proves it, then the claim and its number. The second lane mirrors the first. */
.lane{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(26px,4.5vw,76px);align-items:center;padding:clamp(34px,5vh,56px) 0;border-top:1px solid var(--line)}
.lane-flip .lane-fig{order:2}
.lane-fig{margin:0}
.lane-b{display:grid;justify-items:start}
.lane-n{font:900 clamp(64px,6.4vw,96px)/.76 var(--signf);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:2px var(--green);margin-bottom:18px}
.lane-b h3{max-width:20ch;font-size:clamp(24px,2.4vw,34px);line-height:1.12;letter-spacing:-.025em;text-wrap:balance}
.lane-b p{margin-top:14px;max-width:52ch;color:var(--n300)}
.lane-b .plate{width:100%;max-width:360px;margin-top:24px}
.join{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,360px);gap:clamp(18px,3vw,48px);align-items:center;padding:clamp(34px,5vh,54px) 0 0;border-top:1px solid var(--line)}
.join p{max-width:30ch;font:600 clamp(22px,2.5vw,34px)/1.2 var(--voice);letter-spacing:-.025em;text-wrap:balance}
.join strong{font-weight:600;color:var(--flag)}
/* the overhead message board between the two lanes: amber light through a black perforated face */
.vms{padding:clamp(92px,12vh,124px) 0 clamp(50px,7vh,80px);border-top:1px solid var(--line)}
.vms-sign{position:relative;max-width:1060px;margin:0 auto}
.vms-sign::before{content:"";position:absolute;left:-14px;right:-14px;top:-62px;height:14px;border-block:3px solid var(--n800);background:repeating-linear-gradient(58deg,var(--n800) 0 2px,transparent 2px 13px),repeating-linear-gradient(-58deg,var(--n800) 0 2px,transparent 2px 13px)}
.vms-sign::after{content:"";position:absolute;left:16%;right:16%;top:-48px;height:40px;border-inline:5px solid var(--n800)}
.vms-board{--dot:5px;position:relative;z-index:1;padding:clamp(26px,3.6vw,50px) clamp(16px,3vw,52px);border-radius:8px;background:#1b1810;box-shadow:0 0 0 8px #191d19,0 0 0 10px #2c332c,0 44px 80px -40px #000;font:700 clamp(25px,4.5vw,62px)/1.14 var(--data);letter-spacing:.01em;text-transform:uppercase;text-align:center;color:#ffc04a;text-shadow:0 0 .09em rgba(255,182,52,.95),0 0 .42em rgba(255,140,20,.5)}
.vms-board span{display:block;text-wrap:balance}
.vms-board::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle,transparent 37%,#070706 47%) 0 0/var(--dot) var(--dot);pointer-events:none}
.js .vms[data-in] .vms-board span{opacity:0}
.js .vms[data-in].in .vms-board span{animation:vmsOn .6s steps(1,end) .1s both}
.js .vms[data-in].in .vms-board span:nth-child(2){animation-delay:.45s}
.js .vms[data-in].in .vms-board span:nth-child(3){animation-delay:.8s}
@keyframes vmsOn{0%{opacity:0}18%{opacity:.9}32%{opacity:.15}50%{opacity:1}64%{opacity:.55}78%,100%{opacity:1}}
@media(max-width:1100px){.vms-board{--dot:4px}}
@media(max-width:700px){
  .vms{padding:88px 0 52px}
  .vms-board{--dot:3px;padding:24px 14px;box-shadow:0 0 0 6px #191d19,0 0 0 8px #2c332c,0 34px 60px -34px #000}
  .vms-sign::before{left:-10px;right:-10px;top:-58px}
  .vms-sign::after{left:12%;right:12%;top:-44px;height:38px;border-inline-width:4px}
}
/* the three things, named under "We do three things" as links to each one */
.three{display:flex;flex-wrap:wrap;align-items:center;row-gap:10px;margin-top:24px}
.three a{display:inline-flex;align-items:center;gap:10px;padding:5px 20px;font:700 16px/1.2 var(--signf);letter-spacing:.01em;color:var(--n200)}
.three a:first-child{padding-left:0}
.three a + a{border-left:1px solid var(--n700)}
.three b{display:grid;place-items:center;width:27px;height:29px;padding-top:2px;border-radius:4px;background:var(--sign);color:#fff;font:800 13.5px/1 var(--signf);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.9);transition:background .15s}
.three a:hover{color:#fff}
.three a:hover b,.three a:focus-visible b{background:var(--sign-lit)}
@media(max-width:560px){
  .three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
  .three a{justify-content:flex-start}
  .three a{flex-direction:column;align-items:flex-start;gap:8px;padding:2px 10px 2px 12px;font-size:14.5px}
  .three a:first-child{padding-left:0}
}
.lane{scroll-margin-top:calc(var(--hdr) + 18px)}
/* where each of the three gets its own chapter, the chapter's sign carries the same number and name */
.ch-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-bottom:26px}
.ch-head .blade{margin:0}
.thing{display:inline-flex;align-items:flex-end;gap:9px;color:inherit}
.thing .lane-n{margin:0;font-size:42px;-webkit-text-stroke-width:1.5px}
.thing .lane-v{padding-bottom:.1em;font-size:17px}
.thing:hover .lane-v{color:var(--g200)}
/* each lane's number, with the verb that names the step */
.lane-h{display:flex;align-items:flex-end;gap:14px;margin-bottom:18px}
.lane-h .lane-n{margin:0}
.lane-v{padding-bottom:.16em;font:800 clamp(19px,1.7vw,23px)/1 var(--signf);letter-spacing:.005em;color:var(--green)}
@media(max-width:900px){
  .lane{grid-template-columns:1fr;gap:22px}
  .lane-flip .lane-fig{order:0}
  .lane-n{font-size:58px;margin:8px 0 12px;-webkit-text-stroke-width:1.5px}
  .lane-h{margin:8px 0 12px}
  .lane-b .plate{max-width:none}
  .join{grid-template-columns:1fr}
}

/* ---------- 2 · the pixel ---------- */
.stage{margin-top:clamp(40px,6vh,64px);padding:clamp(28px,4vh,44px) 0 clamp(26px,4vh,40px);background:linear-gradient(180deg,#070b08,#0a100c);border-block:1px solid var(--line)}
.seg,.viewer-tabs{display:flex;flex-wrap:wrap;gap:8px}
.seg button,.viewer-tabs button{padding:11px 15px 8px;border:0;border-radius:5px;background:transparent;color:var(--n400);font:800 12.5px/1 var(--signf);letter-spacing:.09em;text-transform:uppercase;cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--n800);transition:color .15s,box-shadow .15s,background .15s}
.seg button:hover,.viewer-tabs button:hover{color:var(--text);box-shadow:inset 0 0 0 1.5px var(--n600)}
.seg button[aria-selected="true"],.viewer-tabs button[aria-selected="true"]{background:var(--sign);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.92),0 0 0 2px var(--sign)}
.flow{margin-top:28px}
.before{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px 36px;padding:16px 22px;border:1px dashed var(--n800);border-radius:12px;color:var(--n500)}
.before h3{font:600 13.5px/1.3 var(--voice);letter-spacing:0;color:var(--n400)}
.ga{display:flex;flex-wrap:wrap;gap:6px 30px}
.ga div{display:flex;gap:10px;font:500 13px/1.3 var(--data)}
.ga dt{color:var(--n600)}
.ga dd{color:var(--n400)}
.before p{font-size:14px;line-height:1.4;color:var(--n500)}
.beam{position:relative;width:2px;height:60px;margin-left:46px}
.beam span{position:absolute;inset:0;border-radius:2px;background:linear-gradient(180deg,rgba(95,209,110,0),var(--green))}
.beam span::after{content:"";position:absolute;left:-2px;top:-40%;width:6px;height:40%;border-radius:3px;background:linear-gradient(180deg,transparent,#eafbec,transparent);opacity:0}
.beam em{position:absolute;left:20px;top:50%;transform:translateY(-50%);font:800 10.5px/1.2 var(--signf);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--green);white-space:nowrap}
.stage.run .beam span::after{animation:beam 900ms ease-out 1}
@keyframes beam{0%{top:-40%;opacity:0}20%{opacity:1}100%{top:100%;opacity:0}}

.rec{min-width:0;border-radius:16px;overflow:hidden;background:#0c130f;box-shadow:0 0 0 1px rgba(95,209,110,.24),0 40px 90px -50px #000}
.rec-h{padding:20px 24px 20px;background:linear-gradient(180deg,#1f7034,#195c2a);color:#fff}
.rec-when{font:700 12px/1.3 var(--signf);letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.76)}
.rec-name{margin-top:9px;font:900 clamp(30px,3.7vw,48px)/.94 var(--signf);letter-spacing:-.012em;text-transform:uppercase}
.rec-loc{margin-top:9px;font:700 13.5px/1.3 var(--signf);letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.76)}
.rec-b{display:grid;grid-template-columns:minmax(170px,230px) minmax(0,1fr) minmax(0,1.05fr);gap:22px 34px;padding:26px 28px 28px}
.rec-big{display:grid;gap:8px;align-content:start}
.rec-big b{font:900 clamp(60px,7.4vw,108px)/.8 var(--signf);letter-spacing:-.04em;color:var(--tag);font-variant-numeric:tabular-nums}
.rec-big[data-len="l"] b{font-size:clamp(50px,5.6vw,80px)}
.rec-big[data-len="xl"] b{font-size:clamp(40px,4.3vw,62px)}
.rec-big > span{font:800 14.5px/1.2 var(--signf);letter-spacing:.07em;text-transform:uppercase}
.rec-big em{font-style:normal;font-size:14px;line-height:1.4;color:var(--n400)}
.rec-kv{display:grid;gap:0;align-content:start}
.rec-kv div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;padding:9px 0;border-top:1px solid var(--line-2)}
.rec-kv div:first-child{border-top:0;padding-top:2px}
.rec-kv dt{font-size:13px;color:var(--n500);padding-top:2px}
.rec-kv dd{font-size:15px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.rec-kv small{display:block;margin-top:1px;font-size:12px;font-weight:400;color:var(--n500)}
.rec-kv .tel{color:var(--text);font-family:var(--data);font-weight:600;text-decoration:underline;text-decoration-color:var(--g700);text-underline-offset:4px}
.rec-trail{padding-left:30px;border-left:1px solid var(--line)}
.rec-trail h4{font:800 11.5px/1 var(--signf);letter-spacing:.14em;text-transform:uppercase;color:var(--n500)}
.rec-trail ol{margin-top:12px;display:grid;gap:8px}
.rec-trail li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:2px 12px;align-items:baseline;font-size:15px}
.rec-trail time{font:500 12.5px/1.3 var(--data);color:var(--n500);white-space:nowrap}
.rec-trail li i{grid-column:2;font-style:normal;font-size:13px;color:var(--n500)}
.rec-trail li.hit span{justify-self:start;padding:3px 8px 1px;border-radius:4px;background:var(--tag);color:var(--tag-ink);font:800 13.5px/1.35 var(--signf)}
.rec-trail li.gap{grid-template-columns:1fr;padding-left:108px;font-size:13px;color:var(--n600)}
.rv.sc{font-family:var(--data);color:var(--g300);opacity:.8;letter-spacing:0}
.rec-big b .rv.sc{color:var(--g600)}
.stage .fine{margin-top:22px}

.facts{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:clamp(26px,3.4vw,54px);margin-top:clamp(44px,6vh,70px)}
.facts h3{margin-bottom:16px}
.facts p{font-size:15.5px;color:var(--n300)}
.facts p + p{margin-top:12px}
@media(max-width:1080px){
  .rec-b{grid-template-columns:minmax(150px,210px) minmax(0,1fr)}
  .rec-trail{grid-column:1 / -1;padding:18px 0 0;border-left:0;border-top:1px solid var(--line)}
}
@media(max-width:1000px){
  .facts{grid-template-columns:1fr}
  .before{grid-template-columns:1fr}
}
@media(max-width:640px){
  .rec-b{grid-template-columns:1fr;padding:20px 18px}
  .rec-h{padding:18px}
  .rec-big{grid-template-columns:auto 1fr;align-items:end;column-gap:14px}
  .rec-big em{grid-column:1 / -1}
  .rec-kv div{grid-template-columns:84px minmax(0,1fr)}
  .rec-trail li{grid-template-columns:1fr}
  .rec-trail li i{grid-column:1}
  .rec-trail li.gap{padding-left:0}
  .beam{margin-left:26px;height:46px}
}

/* ---------- 3 · the desk ---------- */
.viewer{margin-top:clamp(36px,5vh,56px)}
.frame{margin-top:16px;border-radius:14px;overflow:hidden;background:#09100c;box-shadow:0 0 0 1px var(--n800),0 50px 110px -60px #000}
.frame-bar{display:flex;align-items:center;gap:10px;height:40px;padding:0 16px;background:#0c130f;border-bottom:1px solid var(--line);color:var(--n500)}
.frame-addr{font:500 12.5px/1 var(--data);color:var(--n400)}
.frame-tag{margin-left:auto;font:800 10.5px/1 var(--signf);letter-spacing:.12em;text-transform:uppercase;color:var(--n500)}
.vp img{display:block;width:100%;height:auto}
.vp p{padding:18px 22px 20px;border-top:1px solid var(--line);font-size:15.5px;line-height:1.55;color:var(--n300);max-width:none}
.vp-tall{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);align-items:start}
.vp-tall img{max-height:760px;object-fit:cover;object-position:top;-webkit-mask-image:linear-gradient(180deg,#000 86%,transparent);mask-image:linear-gradient(180deg,#000 86%,transparent)}
.vp-tall p{border-top:0;border-left:1px solid var(--line);align-self:stretch;padding:34px 30px;font-size:clamp(17px,1.5vw,21px);line-height:1.5;color:var(--n200)}
.viewer > .fine{margin-top:14px}
.always{margin-top:clamp(40px,6vh,64px);padding-top:30px;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(200px,.5fr) minmax(0,1.5fr);gap:20px 48px}
.pan-hint{display:none}
@media(max-width:820px){
  .vp:not(.vp-tall){overflow-x:auto;-webkit-overflow-scrolling:touch}
  .vp:not(.vp-tall) img{width:860px;max-width:none}
  .vp:not(.vp-tall) p{position:sticky;left:0;width:calc(100vw - 2 * var(--pad))}
  .pan-hint{display:inline;color:var(--g300)}
  .vp-tall{grid-template-columns:1fr}
  .vp-tall img{max-height:520px}
  .vp-tall p{border-left:0;border-top:1px solid var(--line);padding:18px 22px 20px;font-size:15.5px}
  .always{grid-template-columns:1fr}
  .ticks.cols{grid-template-columns:1fr}
  .frame-tag{display:none}
}

/* ---------- 4 · past customers ---------- */
.flag{background:linear-gradient(180deg,var(--bg) 0,#0d0706 clamp(90px,14vh,160px),#070605 46%,var(--bg) 100%)}
.flag-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,3vw,44px);align-items:end}
.flag-n{font:900 clamp(132px,22vw,330px)/.72 var(--signf);letter-spacing:-.055em;color:var(--flag);font-variant-numeric:tabular-nums;margin-left:-.03em;padding-top:.09em}
.flag .h2{max-width:19ch;padding-bottom:.12em}
.field{margin-top:clamp(40px,6vh,70px)}
.field canvas{display:block;width:100%;height:auto;aspect-ratio:1440 / 420}
.field figcaption{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:16px;font-size:13.5px;color:var(--n400)}
.field figcaption span{display:inline-flex;align-items:center;gap:9px}
.k{display:inline-block;width:9px;height:9px;border-radius:50%}
.k-all{width:5px;height:5px;background:#2c3a30}
.k-away{background:var(--flag);box-shadow:0 0 0 3px rgba(255,107,95,.22)}
.k-site{background:var(--green);box-shadow:0 0 0 3px rgba(95,209,110,.25)}
.tales{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px clamp(18px,2.4vw,34px);margin-top:clamp(44px,6vh,70px)}
.tales li{padding-top:16px;border-top:2px solid var(--flag)}
.tales b{display:block;font:800 13px/1.25 var(--signf);letter-spacing:.09em;text-transform:uppercase;color:var(--flag)}
.tales p{margin-top:10px;font-size:15.5px;line-height:1.5;color:var(--n300)}
.tales-g li{border-top-color:var(--green)}
.tales-g b{color:var(--green)}
.rule{margin-top:34px;max-width:70ch;padding-left:16px;border-left:2px solid var(--n800);font-size:14.5px;color:var(--n400)}
@media(max-width:900px){
  .flag-head{grid-template-columns:1fr}
  .tales{grid-template-columns:repeat(2,minmax(0,1fr))}
  .field canvas{aspect-ratio:1440 / 760}
}
@media(max-width:520px){.tales{grid-template-columns:1fr}}

/* ---------- 5 · intent leads ---------- */
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,44px);margin-top:clamp(44px,6vh,72px)}
.steps > li{counter-increment:step;display:grid;grid-template-rows:auto auto auto 1fr;align-content:start}
.steps > li::before{content:counter(step);display:grid;place-items:center;width:34px;height:38px;padding-top:3px;margin-bottom:18px;border-radius:5px;background:var(--sign);color:#fff;font:900 18px/1 var(--signf);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.9)}
.steps h3{font-size:22px}
.steps p{margin-top:10px;font-size:15.5px;color:var(--n300)}
.steps figure{align-self:end;margin-top:22px;padding:20px 20px 18px;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.steps figcaption{margin-top:16px;font-size:14.5px;line-height:1.5;color:var(--n400)}
.steps figcaption b{color:var(--text);font-weight:700}
.zip-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}
.zip-grid i{aspect-ratio:1;border-radius:3px;background:var(--n900)}
.zip-grid i.on{background:var(--green);box-shadow:0 0 14px rgba(95,209,110,.55)}
.twice-row{position:relative;height:74px;font:800 11.5px/1.2 var(--signf);letter-spacing:.08em;text-transform:uppercase;color:var(--n300)}
.twice-row span{position:absolute;top:0;bottom:0;width:62%;display:flex;align-items:center;border:1.5px solid var(--n600);border-radius:37px}
.twice-row span:first-child{left:0;padding-left:18px;padding-right:26%}
.twice-row span:last-child{right:0;justify-content:flex-end;text-align:right;padding-right:18px;padding-left:26%}
.twice-row i{position:absolute;top:1.5px;bottom:1.5px;left:38%;width:24%;border-radius:37px;background:var(--green);box-shadow:0 0 24px rgba(95,209,110,.5)}
.apex-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px}
.apex-row b{font:900 46px/.8 var(--signf);letter-spacing:-.03em;color:var(--n400)}
.apex-row b:last-child{font-size:64px;color:var(--tag)}
.apex-row i{height:22px;background:linear-gradient(90deg,var(--n700),var(--tag));clip-path:polygon(0 0,100% 42%,100% 58%,0 100%)}
.range{margin-top:clamp(50px,7vh,84px);padding-top:clamp(34px,5vh,50px);border-top:1px solid var(--line)}
.range h3{font-size:clamp(24px,2.6vw,36px);line-height:1.1;letter-spacing:-.028em}
.range dl{display:grid;grid-template-columns:1fr 1.7fr 1fr;gap:clamp(22px,3vw,48px);align-items:end;margin-top:34px}
.range dt{font:900 clamp(40px,4.6vw,64px)/.82 var(--signf);letter-spacing:-.035em;color:var(--n200);font-variant-numeric:tabular-nums}
.range .wide dt{font-size:clamp(60px,9.6vw,138px);color:var(--green)}
.range dd{margin-top:14px;max-width:34ch;font-size:15px;line-height:1.5;color:var(--n400)}
@media(max-width:900px){
  .steps{grid-template-columns:1fr}
  .range dl{grid-template-columns:1fr}
}

/* ---------- 6 · the scrub ---------- */
.cut{margin-top:clamp(40px,6vh,64px);display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:26px clamp(26px,4vw,64px);align-items:center}
.cut-bars{display:grid;gap:10px}
.bar{display:grid;grid-template-columns:clamp(92px,9.5vw,132px) minmax(0,1fr);column-gap:18px;align-items:center;padding:8px 0}
.bar b{grid-row:1 / 3;font:900 clamp(30px,3.3vw,46px)/1 var(--signf);letter-spacing:-.025em;font-variant-numeric:tabular-nums;color:var(--n300)}
.bar i{display:block;width:var(--w);height:18px;border-radius:3px;background:var(--n700)}
.bar span{grid-column:2;margin-top:8px;font-size:14.5px;line-height:1.35;color:var(--n400)}
.bar.keep b{color:var(--green)}
.bar.keep i{background:var(--green);box-shadow:0 0 22px rgba(95,209,110,.35)}
.bar.keep span{color:var(--text)}
.cut-rate{display:grid;gap:26px}
.cut-rate b{display:block;font:900 clamp(54px,6.4vw,92px)/.8 var(--signf);letter-spacing:-.04em;color:var(--amber);font-variant-numeric:tabular-nums}
.cut-rate .good b{color:var(--green)}
.cut-rate span{display:block;margin-top:12px;max-width:30ch;font-size:15px;line-height:1.45;color:var(--n300)}
.cut .fine{grid-column:1 / -1}
.scrub-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);margin-top:clamp(50px,7vh,84px);padding-top:clamp(34px,5vh,50px);border-top:1px solid var(--line)}
.cuts{width:100%;margin-top:18px;border-collapse:collapse;font-size:15px}
.cuts thead th{padding:0 14px 10px 0;text-align:left;font:800 11px/1.2 var(--signf);letter-spacing:.13em;text-transform:uppercase;color:var(--n500)}
.cuts td,.cuts tbody th{padding:14px 14px 14px 0;border-top:1px solid var(--line);text-align:left;vertical-align:top;line-height:1.45}
.cuts tbody th{font-weight:600;color:var(--text);width:30%}
.cuts td{color:var(--n400)}
.cuts td b{font:900 19px/1 var(--signf);color:var(--green);font-variant-numeric:tabular-nums}
.cuts.tally tbody th{width:auto}
.cuts.tally td,.cuts.tally thead th:last-child{padding-right:0;text-align:right;white-space:nowrap}
.checks{counter-reset:chk;margin-top:18px;display:grid}
.checks li{counter-increment:chk;display:grid;grid-template-columns:30px 1fr;padding:10px 0;border-top:1px solid var(--line);font-size:15px;color:var(--n300)}
.checks li::before{content:counter(chk);font:600 13px/1.7 var(--data);color:var(--green)}
@media(max-width:900px){
  .cut,.scrub-grid{grid-template-columns:1fr}
  .cut-rate{grid-template-columns:1fr 1fr}
  .cut-rate > :only-child{grid-column:1 / -1}
}
@media(max-width:560px){
  .cuts thead{display:none}
  .cuts tr{display:grid;padding:14px 0;border-top:1px solid var(--line)}
  .cuts td,.cuts tbody th{border:0;padding:2px 0;width:auto}
  .cuts.tally tr{grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:baseline}
}

/* ---------- 7 · what we did: the exits ---------- */
.gantry{display:none}
.exits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:92px 26px;margin-top:clamp(84px,11vh,120px)}
.exit{--sg:var(--sign-dim);--ring:rgba(255,255,255,.5);position:relative;display:grid;grid-template-rows:auto auto 1fr auto;gap:8px;min-height:268px;padding:34px 32px 30px;border-radius:16px;background:var(--sg);color:#bfd6c4;box-shadow:inset 0 0 0 7px var(--sg),inset 0 0 0 9.5px var(--ring);transition:background .25s,color .25s,box-shadow .25s}
/* the overhead truss each sign hangs from, and its two hangers */
.exit::before{content:"";position:absolute;left:-13px;right:-13px;top:-52px;height:14px;border-block:3px solid var(--n800);background:repeating-linear-gradient(58deg,var(--n800) 0 2px,transparent 2px 13px),repeating-linear-gradient(-58deg,var(--n800) 0 2px,transparent 2px 13px)}
.exit::after{content:"";position:absolute;left:13%;right:13%;top:-38px;height:38px;border-inline:5px solid var(--n800);pointer-events:none}
.exit-tab{position:absolute;z-index:1;right:34px;top:-29px;height:30px;padding:9px 14px 0;border-radius:8px 8px 0 0;background:var(--sg);color:#fff;font:800 13px/1 var(--signf);letter-spacing:.1em;text-transform:uppercase;box-shadow:inset 0 2.5px 0 var(--ring),inset 2.5px 0 0 var(--ring),inset -2.5px 0 0 var(--ring);transition:background .25s,box-shadow .25s}
.exit-k{font-size:15px;font-weight:500;color:inherit}
.exit-n{max-width:15ch;font:800 clamp(27px,2.7vw,38px)/1.02 var(--signf);letter-spacing:-.012em;color:#fff;text-wrap:balance}
.exit-l{align-self:end;margin-top:18px;font-size:15px;line-height:1.5}
/* the yellow panel under a sign is an advisory: six months at this pace, never a result. White is a fact. */
.exit-p{display:block;margin-top:14px;padding:11px 14px 10px;border-radius:6px;background:var(--tag);color:var(--tag-ink);box-shadow:inset 0 0 0 2px var(--tag),inset 0 0 0 3.5px var(--tag-ink);font:700 15px/1.3 var(--signf);text-wrap:balance}
.exit-p i{display:block;margin-bottom:6px;font:800 10.5px/1 var(--signf);font-style:normal;letter-spacing:.11em;text-transform:uppercase}
.exit-p b{font:900 25px/1 var(--signf);letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.exit-p-fact{background:#fff;color:var(--sign-dim);box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3.5px var(--sign-dim)}
.exits-note{margin-top:26px}
.exit-l b{font-weight:700;color:#fff}
.exit-a{position:absolute;right:28px;top:28px;width:26px;height:26px;color:#fff;opacity:.55;transition:opacity .2s,transform .2s}
.exit:hover,.exit:focus-visible,.exit-lead{--sg:var(--sign-lit);--ring:#fff;color:#e6f6e9}
.exit:hover .exit-a,.exit:focus-visible .exit-a,.exit-lead .exit-a{opacity:1}
.exit:hover .exit-a{transform:translate(2px,-2px)}
.exit:focus-visible{outline-offset:6px}
@media(max-width:1020px){.exits{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
  .exits{grid-template-columns:1fr;gap:76px}
  .exit{min-height:0}
}

/* ---------- 8 · straight talk ---------- */
.talk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(34px,5vh,54px) clamp(26px,3.4vw,54px);margin-top:clamp(44px,6vh,72px)}
.talk div{padding-top:20px;border-top:2px solid var(--tag)}
.talk h3{max-width:22ch;font-size:20px;text-wrap:balance}
.talk p{margin-top:12px;font-size:15.5px;color:var(--n300)}
@media(max-width:900px){.talk{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.talk{grid-template-columns:1fr}}

/* ---------- founders ---------- */
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(30px,5vw,84px);align-items:start}
.about-copy p{margin-top:20px;max-width:56ch;color:var(--n300)}
.about-copy .h2 + p{margin-top:28px}
.about-copy .about-place{color:var(--n500);font-size:14.5px}
/* the kinds of business behind it, as a row of small guide signs */
.about-cats{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px;max-width:56ch}
.about-cats li{padding:7px 11px 5px;border-radius:5px;background:var(--sign-dim);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.62);font:700 14px/1 var(--signf);letter-spacing:.01em;color:#fff}
.about-cats li.more-cats{background:transparent;box-shadow:inset 0 0 0 1.5px var(--n700);color:var(--n400)}
.about-copy .about-pull{margin-top:30px;font:600 clamp(19px,1.55vw,22px)/1.45 var(--voice);letter-spacing:-.01em;color:var(--text);text-wrap:pretty}
.founders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.founder img{display:block;width:100%;height:auto;aspect-ratio:3 / 4;object-fit:cover;border-radius:12px}
.founder figcaption{margin-top:16px}
.founder b{display:block;font:800 19px/1.2 var(--signf)}
.founder span{display:block;margin-top:2px;font-size:13px;color:var(--n500)}
.founder blockquote{margin-top:12px;font-size:14.5px;line-height:1.55;color:var(--n300)}
@media(max-width:900px){.about-grid{grid-template-columns:1fr}}
@media(max-width:480px){.founders{grid-template-columns:1fr}}

/* ---------- 9 · start ---------- */
.start{overflow:hidden;background:#030403}
.start-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%;opacity:.7}
.start::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,7,5,.86),rgba(5,7,5,.5) 55%,rgba(5,7,5,.2)),linear-gradient(0deg,rgba(5,7,5,.9),transparent 36%,rgba(5,7,5,.6) 78%,var(--bg))}
.start-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,5vw,84px);align-items:start}
.start-steps{counter-reset:st;display:grid;gap:14px;margin-top:34px;max-width:56ch}
.start-steps li{counter-increment:st;display:grid;grid-template-columns:44px 1fr;align-items:start;font-size:16.5px;color:var(--n200)}
.start-steps li::before{content:counter(st);display:grid;place-items:center;width:28px;height:31px;padding-top:2px;border-radius:4px;background:var(--sign);color:#fff;font:900 15px/1 var(--signf);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.9)}
.start-form{padding:clamp(22px,3vw,32px);border-radius:16px;background:rgba(7,10,8,.84);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 0 1px var(--n800)}
.start-form form{display:grid}
.start-form label{margin:16px 0 7px;font-size:13px;font-weight:500;color:var(--n400)}
.start-form label:first-of-type{margin-top:0}
.start-form input,.start-form textarea{width:100%;padding:13px 14px;border:1px solid var(--n800);border-radius:8px;background:#080c09;color:var(--text);font:400 16px/1.4 var(--voice)}
.start-form textarea{resize:vertical;min-height:88px}
.start-form input:focus,.start-form textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(95,209,110,.18)}
.start-form input::placeholder{color:var(--n600)}
.start-form .btn-solid{margin-top:22px}
.start-form .fine{margin-top:14px}
.form-msg{min-height:0;font-size:14px;color:var(--amber)}
.form-msg:not(:empty){margin-top:12px}
.hp{position:absolute;left:-9999px}
.start-done h3{font-size:28px;letter-spacing:-.02em}
.start-done p{margin-top:12px;color:var(--n300)}
@media(max-width:900px){.start-grid{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.ftr{border-top:1px solid var(--line);padding-top:clamp(50px,7vh,80px);background:#030403}
.ftr-top{display:grid;grid-template-columns:1.2fr 1fr 1.2fr 1.1fr;gap:34px clamp(22px,3vw,48px)}
.ftr-brand{display:flex;align-items:flex-start;gap:14px}
.ftr-brand img{display:block;width:58px;height:auto}
.ftr-brand b{display:block;font-size:17px;font-weight:700}
.ftr-brand span{display:block;font-size:13.5px;color:var(--n500)}
.ftr-col{display:grid;gap:9px;align-content:start;justify-items:start}
.ftr-col h2{margin-bottom:6px;font:800 11.5px/1 var(--signf);letter-spacing:.14em;text-transform:uppercase;color:var(--n500)}
.ftr-col a:not(.btn){font-size:14.5px;color:var(--n300)}
.ftr-col a:not(.btn):hover{color:var(--g200)}
.ftr-go p{max-width:26ch;font-size:14.5px;color:var(--n400);margin-bottom:8px}
.ftr-art{margin-top:clamp(30px,5vh,56px)}
.ftr-art img{display:block;width:100%;height:auto;max-width:1500px;margin:0 auto;mix-blend-mode:screen}
.ftr-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-block:22px 34px;border-top:1px solid var(--line);font-size:13px;color:var(--n500)}
.ftr-base p:first-child{font:800 12.5px/1.6 var(--signf);letter-spacing:.14em;text-transform:uppercase;color:var(--n400)}
@media(max-width:900px){.ftr-top{grid-template-columns:1fr 1fr}}
@media(max-width:640px){
  .ftr-art{overflow:hidden}
  .ftr-art img{width:190%;max-width:none;margin-left:-45%}
}
@media(max-width:520px){.ftr-top{grid-template-columns:1fr}}

/* ---------- case-study pages ---------- */
.case-hero{position:relative;overflow:hidden;padding:calc(var(--hdr) + clamp(48px,8vh,96px)) 0 clamp(54px,8vh,96px);background:#030403}
.case-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%;opacity:.62}
.case-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,7,5,.9),rgba(5,7,5,.55) 60%,rgba(5,7,5,.3)),linear-gradient(0deg,var(--bg),rgba(5,7,5,.2) 40%,rgba(5,7,5,.7))}
.case-hero .wrap{position:relative;z-index:1}
.back{display:block;width:max-content;margin-bottom:30px;font-size:13.5px;font-weight:500;color:var(--n400)}
.back::before{content:"";display:inline-block;width:14px;height:2px;margin-right:9px;border-radius:2px;background:var(--green);vertical-align:4px}
.back:hover{color:var(--text)}
.case-hero h1{max-width:15ch;font:700 clamp(38px,5.8vw,86px)/.99 var(--voice);letter-spacing:-.036em;text-wrap:balance}
.case-hero .lede{max-width:66ch}
.plates{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:clamp(36px,5vh,56px)}
.plates .plate{background:rgba(15,42,23,.92)}
.plates .plate b{font-size:clamp(40px,4.6vw,66px)}
.plates .plate span{font-size:15px}
.plates .plate.long b{font-size:clamp(34px,3.7vw,54px);line-height:.98}
.plates .plate-flag{background:rgba(58,21,18,.94)}
.plates-3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* six months at this pace: a yellow advisory panel under the real plates */
.pace{margin-top:16px;padding:24px 28px 22px;border-radius:14px;background:var(--tag);color:var(--tag-ink);box-shadow:inset 0 0 0 6px var(--tag),inset 0 0 0 8px var(--tag-ink)}
.pace h2{font:800 12.5px/1 var(--signf);letter-spacing:.11em;text-transform:uppercase}
.pace dl{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:16px clamp(18px,3vw,44px);margin-top:16px}
.pace dt{font:900 clamp(40px,4.6vw,66px)/.84 var(--signf);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.pace dd{margin-top:9px;max-width:26ch;font:700 15.5px/1.28 var(--signf);text-wrap:balance}
.pace p{margin-top:18px;padding-top:13px;border-top:1.5px solid rgba(23,21,10,.4);max-width:104ch;font:500 13.5px/1.5 var(--voice)}
@media(max-width:700px){
  .pace{padding:22px 22px 20px}
  .pace dl{grid-template-columns:1fr}
}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,84px);align-items:start}
.split > div > .h2{max-width:none;font-size:clamp(28px,3.5vw,48px);line-height:1.06}
.split-tight{margin-top:clamp(40px,6vh,60px);padding-top:30px;border-top:1px solid var(--line)}
.split-tight p,.prose p{font-size:16px;color:var(--n300)}
.split-tight h3{margin-bottom:10px}
.prose > p + p{margin-top:16px}
.prose h3{margin:34px 0 14px}
.prose > p + .ticks,.prose > .ticks + p,.prose > p + .log{margin-top:22px}
.prose .blade + .h2{margin-bottom:30px}
.prose .h2{font-size:clamp(28px,3.4vw,46px)}
.shot{margin-top:clamp(34px,5vh,52px)}
.shot + .shot{margin-top:22px}
.shot figcaption{padding:16px 22px 18px;border-top:1px solid var(--line);font-size:15.5px;line-height:1.55;color:var(--n300)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(20px,3vw,44px);margin-top:clamp(34px,5vh,52px)}
.stats div{padding:20px 0 22px;border-top:1px solid var(--line)}
.stats dt{font:900 clamp(34px,3.6vw,50px)/.86 var(--signf);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--text)}
.stats dt i{font-style:normal;font-size:.5em;vertical-align:.3em;margin:0 .34em;color:var(--n600)}
.stats dd{margin-top:11px;max-width:26ch;font-size:14.5px;line-height:1.45;color:var(--n400)}
.stats dt.tight,.duo .stats dt.tight{font-size:clamp(21px,2.35vw,31px);line-height:1.1;letter-spacing:-.02em;white-space:nowrap}
.stats-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.stats-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pair{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start;margin-top:clamp(34px,5vh,52px)}
.pair .shot{margin-top:0}
.shot-tall .vp img{max-height:820px;object-fit:cover;object-position:top;-webkit-mask-image:linear-gradient(180deg,#000 88%,transparent);mask-image:linear-gradient(180deg,#000 88%,transparent)}
.pair .prose h3:first-child{margin-top:0;font-size:clamp(22px,2.3vw,30px);line-height:1.15;letter-spacing:-.022em}
.pair-flip{grid-template-columns:minmax(0,1fr) minmax(0,330px);margin-top:0}
.phone{margin:0;justify-self:center}
.phone img{display:block;width:100%;max-width:330px;height:auto;border-radius:34px;box-shadow:0 0 0 1px var(--n700),0 0 0 9px #0b0f0c,0 0 0 10px var(--n800),0 50px 90px -40px #000}
.phone figcaption{margin-top:22px;text-align:center;font-size:13.5px;color:var(--n500)}
.log{display:grid;margin-top:6px}
.log li{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;padding:11px 0;border-top:1px solid var(--line);font-size:15px;color:var(--n300)}
.log time{font:600 13px/1.75 var(--data);color:var(--green)}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(26px,4vw,64px);margin-top:clamp(40px,6vh,64px)}
.duo h3{font:800 clamp(22px,2.2vw,28px)/1.1 var(--signf);letter-spacing:-.005em}
.duo .stats{margin-top:22px}
.duo .stats dt{font-size:clamp(30px,3vw,42px)}
.case-cta{overflow:hidden;background:#030403}
.case-cta::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,7,5,.9),rgba(5,7,5,.5) 60%,rgba(5,7,5,.25)),linear-gradient(0deg,rgba(5,7,5,.92),transparent 40%,rgba(5,7,5,.6) 78%,var(--bg))}
.case-cta .wrap{position:relative;z-index:1}
.case-cta .btn{margin-top:34px}
.next{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(50px,8vh,90px)}
.next a{display:grid;gap:8px;padding:20px 20px 18px;border-radius:12px;background:rgba(15,42,23,.9);color:#fff;font:800 19px/1.15 var(--signf);box-shadow:inset 0 0 0 5px rgba(15,42,23,1),inset 0 0 0 6.5px rgba(255,255,255,.5);transition:background .2s,box-shadow .2s}
.next a span{font:800 11.5px/1 var(--signf);letter-spacing:.12em;text-transform:uppercase;color:var(--g200)}
.next a:hover{background:var(--sign-lit);box-shadow:inset 0 0 0 5px var(--sign-lit),inset 0 0 0 6.5px #fff}
.plain-hero{padding-top:calc(var(--hdr) + clamp(70px,12vh,140px));border-top:0;min-height:70vh}
.rec-static{margin-top:clamp(40px,6vh,60px)}
.card-note{margin-top:14px}
.sub{margin-top:clamp(46px,7vh,70px)}
.keygrid{margin-top:clamp(36px,5vh,56px);padding-top:0;border-top:0}
.keygrid .cuts{margin-top:0}
.keygrid .cuts tbody th{width:42%}
.keygrid .cuts td b{display:inline-block;margin-bottom:5px;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.keygrid h3{margin-bottom:16px}
/* unit chart: one mark is one named visitor */
.units{display:grid;grid-template-columns:minmax(0,90fr) auto minmax(0,122fr);gap:0 clamp(30px,5vw,76px);margin-top:clamp(36px,5vh,56px)}
.units-g p{max-width:30ch;font-size:15.5px;line-height:1.4;color:var(--n300)}
.units-g p b{display:block;margin-bottom:12px;font:900 clamp(46px,5.4vw,76px)/.82 var(--signf);letter-spacing:-.035em;color:var(--text);font-variant-numeric:tabular-nums}
.units-local p b{color:var(--green)}
.dots{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.dots i,.key i{flex:none;width:13px;height:13px;border-radius:50%;background:var(--n700)}
.dots i.l,.key i.l{background:var(--green)}
.dots i.p,.key i.p{background:var(--amber)}
.dots i.t,.key i.t{background:var(--tag);box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--tag)}
.units-line{position:relative;width:0;border-left:3px dashed rgba(232,179,74,.55)}
.units-line span{position:absolute;left:50%;top:-4px;transform:translateX(-50%);padding:7px 9px 4px;border-radius:4px;background:var(--tag);color:var(--tag-ink);font:800 11.5px/1 var(--signf);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;box-shadow:inset 0 0 0 1.5px var(--tag-ink),0 0 0 2px var(--tag)}
.key{display:flex;flex-wrap:wrap;gap:10px 30px;grid-column:1 / -1;margin-top:34px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--n400)}
.key span{display:inline-flex;align-items:center;gap:11px}
@media(max-width:820px){
  .units{grid-template-columns:1fr}
  .units-line{width:auto;height:0;margin:44px 0 36px;border-left:0;border-top:3px dashed rgba(232,179,74,.55)}
  .units-line span{left:0;top:-14px;transform:none}
  .dots{gap:7px}
  .dots i{width:12px;height:12px}
}

/* a titled row of figures */
.ledger{display:grid;grid-template-columns:minmax(170px,.36fr) minmax(0,1.64fr);gap:0 clamp(20px,3vw,48px);margin-top:clamp(40px,6vh,64px)}
.ledger > h3{padding-top:22px;border-top:1px solid var(--line);font:800 clamp(20px,2vw,25px)/1.12 var(--signf);letter-spacing:.005em;text-wrap:balance}
.ledger > .stats{margin-top:0}
.ledger .stats dt{font-size:clamp(30px,3.1vw,44px)}
@media(max-width:820px){
  .ledger{grid-template-columns:1fr}
  .ledger > h3{padding-bottom:6px}
  .ledger > h3 + .stats div:first-child{border-top:0}
}

/* horizontal bars and a stacked split */
.hbars{display:grid;gap:14px;margin-top:clamp(30px,4vh,44px)}
.hbars li{display:grid;grid-template-columns:minmax(150px,250px) minmax(0,1fr) 96px;gap:8px 20px;align-items:center}
.hbars span{font-size:15.5px;line-height:1.3;color:var(--n200)}
.hbars span small{display:block;margin-top:2px;font-size:13px;color:var(--n500)}
.hbars i{display:block;width:var(--w);min-width:4px;height:18px;border-radius:3px;background:var(--sign-lit)}
.hbars li:first-child i{background:var(--green);box-shadow:0 0 22px rgba(95,209,110,.3)}
.hbars b{justify-self:end;font:900 22px/1 var(--signf);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.split3{display:flex;gap:4px;height:46px;margin-top:clamp(30px,4vh,44px)}
.split3 i{flex:var(--w) 1 0;min-width:0;border-radius:4px;background:var(--sign)}
.split3 i.a{background:var(--tag)}
.split3 i.b{background:var(--green)}
.split3-key{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px clamp(18px,3vw,44px);margin-top:20px}
.split3-key div{padding-top:14px;border-top:3px solid var(--sign)}
.split3-key .a{border-top-color:var(--tag)}
.split3-key .b{border-top-color:var(--green)}
.split3-key dt{font:900 clamp(30px,3.4vw,46px)/.9 var(--signf);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.split3-key dd{margin-top:9px;font-size:14.5px;line-height:1.45;color:var(--n400)}
.split3-key dd b{display:block;margin-bottom:2px;font:800 12.5px/1.2 var(--signf);letter-spacing:.1em;text-transform:uppercase;color:var(--text)}
@media(max-width:640px){
  .hbars li{grid-template-columns:minmax(0,1fr) auto}
  .hbars span{grid-column:1}
  .hbars b{grid-column:2;grid-row:1}
  .hbars i{grid-column:1 / -1}
  .split3-key{grid-template-columns:1fr}
}

/* a five-lane road: one lane for each kind of visitor */
.road{margin-top:clamp(34px,5vh,54px);border-block:3px solid var(--n300);background:#090c0a}
.road li{display:grid;grid-template-columns:clamp(70px,8vw,112px) minmax(0,1.15fr) minmax(0,1fr);gap:8px clamp(16px,2.6vw,40px);align-items:center;min-height:104px;padding:20px clamp(16px,2.4vw,30px)}
.road li + li{background:repeating-linear-gradient(90deg,rgba(233,234,231,.5) 0 30px,transparent 30px 62px) top / 100% 2px no-repeat}
.road b{font:900 clamp(46px,5vw,68px)/.8 var(--signf);letter-spacing:-.03em;color:var(--green);font-variant-numeric:tabular-nums}
.road li.none b{color:var(--n700)}
.road h3{font:800 clamp(19px,1.9vw,24px)/1.15 var(--signf);letter-spacing:.005em}
.road p{margin-top:5px;font-size:15px;line-height:1.45;color:var(--n400)}
.road .cars{display:flex;gap:14px;justify-content:flex-end}
.road .cars i{position:relative;width:54px;height:24px;border-radius:7px 11px 11px 7px;background:var(--green);box-shadow:16px 0 30px 2px rgba(95,209,110,.28)}
.road .cars i::after{content:"";position:absolute;right:3px;top:4px;bottom:4px;width:4px;border-radius:2px;background:var(--g100)}
.road .cars em{font-style:normal;font-size:13.5px;color:var(--n600)}
@media(max-width:760px){
  .road li{grid-template-columns:54px minmax(0,1fr);min-height:0}
  .road .cars{grid-column:2;justify-content:flex-start;margin-top:6px}
  .road .cars i{width:40px;height:18px}
}

/* map figures. Geometry is generated by tools/figs.mjs */
.mapfig{margin-top:clamp(30px,5vh,52px)}
.usmap{display:block;width:100%;height:auto;max-width:1120px;overflow:visible}
.usmap .land{fill:#0b130e}
.usmap .bord{fill:none;stroke:rgba(233,234,231,.13);stroke-width:.9;stroke-linejoin:round}
.usmap .lit{fill:#143a20}
.usmap .home{fill:var(--sign-lit);stroke:#fff;stroke-width:1.5;stroke-linejoin:round}
.usmap .arc{fill:none;stroke:var(--green);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1);transition-delay:calc(var(--i) * 120ms)}
.js .mapfig:not(.in) .arc{stroke-dashoffset:1}
.usmap .dot{fill:var(--green)}
.usmap .ring{fill:none;stroke:var(--tag);stroke-width:2}
.usmap .here{fill:var(--tag)}
.usmap text{font:800 15px/1 var(--signf);letter-spacing:.06em;fill:var(--n300);paint-order:stroke;stroke:#050705;stroke-width:4px;stroke-linejoin:round}
.usmap text tspan{fill:#fff}
.usmap .t-home{font-size:17px;fill:var(--tag)}
.usmap .t-home tspan{fill:var(--tag)}
.usmap .top{fill:var(--sign-lit)}
.usmap-all .land{fill:var(--sign-dim)}
.usmap-all .bord{stroke:rgba(5,7,5,.85);stroke-width:1.1}
.usmap .lead{fill:none;stroke:var(--n500);stroke-width:1}
.usmap .pin{fill:var(--tag);stroke:#050705;stroke-width:1.5}
.usmap .t-top .n{font-size:21px;letter-spacing:-.01em;fill:#fff}
.usmap .t-top .s{font-size:12px;letter-spacing:.1em;text-transform:uppercase;fill:var(--g200)}
.map-key{display:none}
.mapfig .fine{margin-top:18px}
@media(max-width:760px){
  .usmap text,.usmap .lead{display:none}
  .map-key{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
  .map-key li{display:flex;align-items:baseline;gap:7px;padding:7px 10px 5px;border-radius:5px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);font-size:13.5px;color:var(--n300)}
  .map-key b{font:900 16px/1 var(--signf);color:var(--green);font-variant-numeric:tabular-nums}
  .map-key .k-home b{color:var(--tag)}
}
@media(max-width:1000px){
  .plates{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split,.pair,.pair-flip,.duo{grid-template-columns:1fr}
  .next{grid-template-columns:1fr}
}
@media(max-width:820px){
  .shot .vp{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .shot:not(.shot-tall) .vp img{width:860px;max-width:none}
  .shot:not(.shot-tall) .frame-bar::after{content:"Swipe to pan";margin-left:auto;font:800 10.5px/1 var(--signf);letter-spacing:.12em;text-transform:uppercase;color:var(--g300);white-space:nowrap}
  .shot:not(.shot-tall) .frame-addr{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(max-width:520px){
  .plates,.plates-3{grid-template-columns:1fr}
  .stats-3{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ==========================================================================
   The visual layer: pictograms, tiles, swipe cards and the "what if" card
   ========================================================================== */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.14em}

/* a service-sign tile: a white pictogram on sign green, with the sign's white border */
.st{display:inline-grid;place-items:center;flex:none;width:48px;height:48px;border-radius:10px;background:var(--sign);color:#fff;font-size:26px;box-shadow:inset 0 0 0 2.5px var(--sign),inset 0 0 0 4px rgba(255,255,255,.92)}
.st-r{background:var(--flag);color:var(--flag-ink);box-shadow:inset 0 0 0 2.5px var(--flag),inset 0 0 0 4px var(--flag-ink)}
.st-y{background:var(--tag);color:var(--tag-ink);box-shadow:inset 0 0 0 2.5px var(--tag),inset 0 0 0 4px var(--tag-ink)}
/* the yellow diamond of a warning sign */
.dia{position:relative;display:inline-grid;place-items:center;flex:none;width:60px;height:60px;color:var(--tag-ink);font-size:25px}
.dia::before{content:"";position:absolute;inset:9px;transform:rotate(45deg);border-radius:7px;background:var(--tag);box-shadow:inset 0 0 0 2px var(--tag),inset 0 0 0 3.5px var(--tag-ink)}
.dia .ic{position:relative;stroke-width:2.3}

/* ---------- 1 · what if ---------- */
.whatif{position:relative;border-top:1px solid var(--line);background:radial-gradient(70% 55% at 78% 46%,rgba(28,106,48,.2),transparent 72%),var(--bg)}
.wi-stage{padding:clamp(80px,11vh,130px) 0 clamp(36px,5vh,60px)}
.wi-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:clamp(30px,5vw,96px);align-items:center}
.wi-copy .blade{margin-bottom:22px}
.wi-head{display:grid}
.wi-kick{max-width:30ch;font:600 clamp(19px,1.65vw,24px)/1.35 var(--voice);letter-spacing:-.012em;color:var(--n300)}
.wi-beats{display:grid;gap:clamp(12px,1.8vh,20px);margin-top:clamp(22px,3vh,34px)}
.wi-beats li > span{display:block;font:700 clamp(28px,2.75vw,42px)/1.06 var(--voice);letter-spacing:-.032em;color:var(--text);text-wrap:balance}
.wi-beats li small{display:block;margin-top:10px;max-width:34ch;font-size:clamp(16px,1.3vw,19px);line-height:1.45;color:var(--n300)}
.wi-beats li:last-child > span{color:var(--green)}

.wi-card{position:relative;min-width:0;border-radius:18px;overflow:hidden;background:#0b120e;box-shadow:0 0 0 1px rgba(95,209,110,.28),0 50px 100px -50px #000,0 0 90px -34px rgba(95,209,110,.32)}
.wc-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:15px;align-items:center;padding:18px 20px;background:linear-gradient(180deg,#1f7034,#195c2a);color:#fff;transition:background .45s ease}
.wc-av{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 2px rgba(255,255,255,.78);font:900 18px/1 var(--signf);letter-spacing:.02em}
.wc-av i{font-style:normal}
.wc-av .ic{display:none;font-size:30px;color:var(--n400)}
.wc-id{display:grid;grid-template-areas:"who" "sub";min-width:0}
.wc-anon,.wc-name{grid-area:who;align-self:center;transition:opacity .35s ease}
.wc-anon{font:600 15px/1.2 var(--data);color:var(--n300);opacity:0}
.wc-name{font:900 clamp(26px,2.5vw,33px)/.95 var(--signf);letter-spacing:-.01em;text-transform:uppercase}
.wc-sub{grid-area:sub;margin-top:7px;font:700 11.5px/1.3 var(--signf);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.wc-rows{padding:4px 20px}
.wc-row{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:10px;min-height:46px;padding:8px 0;border-top:1px solid var(--line-2);font-size:15.5px;font-weight:600}
.wc-row:first-child{border-top:0}
.wc-k{display:grid;color:var(--green);font-size:20px}
.wc-mask{display:none;font:500 15px/1.2 var(--data);letter-spacing:.05em;color:var(--n700)}
.wc-v{min-width:0;overflow-wrap:anywhere}
.wc-v .pill{margin-left:6px;font-style:normal}
.wc-v .tel{font-family:var(--data);text-decoration:underline;text-decoration-color:var(--g700);text-underline-offset:4px}
.wc-trail{padding:14px 20px 16px;border-top:1px solid var(--line)}
.wc-label{display:flex;align-items:center;gap:8px;font:800 11.5px/1 var(--signf);letter-spacing:.14em;text-transform:uppercase;color:var(--n500)}
.wc-label .ic{font-size:17px;color:var(--green)}
.wc-trail ol{display:grid;gap:7px;margin-top:12px}
.wc-trail li{display:grid;grid-template-columns:74px minmax(0,1fr) auto;gap:10px;align-items:baseline;min-height:22px;font-size:14.5px;line-height:1.35;color:var(--n200)}
.wc-trail time{font:500 12px/1.3 var(--data);color:var(--n500);white-space:nowrap}
.wc-trail li.hit span{justify-self:start;padding:3px 8px 1px;border-radius:4px;background:var(--tag);color:var(--tag-ink);font:800 13.5px/1.35 var(--signf)}
.wc-trail li i{font-style:normal;font-size:12.5px;color:var(--n400);white-space:nowrap}
/* the 62 more details: a few of them, then the rest implied */
.wc-more{padding:13px 20px 14px;border-top:1px solid var(--line)}
.wc-more .wc-label .ic{font-size:17px;color:var(--green)}
.wc-n{display:inline-block;min-width:2.1em;padding:4px 5px 2px;border-radius:4px;background:var(--tag);color:var(--tag-ink);font:900 13px/1 var(--signf);letter-spacing:0;text-align:center;font-variant-numeric:tabular-nums}
.whatif.live .wi-card:not(.s4) .wc-n{background:var(--n800);color:transparent}
.wc-more ul{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.wc-more li{display:inline-flex;align-items:baseline;gap:6px;padding:5px 9px 4px;border-radius:6px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);font-size:13.5px;line-height:1.25;color:var(--n100);white-space:nowrap}
.wc-more li i{font:800 9.5px/1 var(--signf);font-style:normal;letter-spacing:.11em;text-transform:uppercase;color:var(--n500)}
.wc-more li.wc-plus{background:transparent;box-shadow:inset 0 0 0 1px var(--g800);color:var(--g300);font-weight:600}
.wc-flag{display:grid;gap:7px;padding:14px 20px 15px;border-top:1px solid rgba(255,107,95,.42);background:var(--flag-deep);font-size:14.5px;line-height:1.4;color:#ffd9d4}
.wc-fl{display:inline-flex;align-items:center;gap:8px;font:800 12px/1 var(--signf);letter-spacing:.13em;text-transform:uppercase;color:var(--flag)}
.wc-fl .ic{font-size:16px}
.wc-flag b{color:#fff}
.wc-call{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;padding:16px 20px 18px;border-top:1px solid var(--line)}
.wc-btn{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:999px;background:var(--green);color:#050705;font:800 15px/1 var(--voice)}
.wc-btn .ic{font-size:18px;stroke-width:2.2}
.wc-say{padding:10px 14px;border-radius:14px 14px 14px 4px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);font-size:14.5px;font-style:italic;color:var(--n200)}
.wi-foot{padding-bottom:clamp(64px,9vh,112px)}
.wi-foot p:first-child{max-width:62ch;font-size:clamp(16px,1.25vw,18px);color:var(--n300)}
.wi-foot .more{margin:0 0 0 4px}
.wi-foot .fine{margin-top:14px}

/* the scroll-driven version: the stage holds still while the card fills in, one line per stretch of scrolling */
.whatif.live .wi-track{height:calc(100vh + 8 * 44vh)}
.whatif.live .wi-stage{position:sticky;top:var(--hdr);display:flex;align-items:center;height:calc(100vh - var(--hdr));padding:20px 0}
@supports (height:100svh){
  .whatif.live .wi-track{height:calc(100svh + 8 * 44svh)}
  .whatif.live .wi-stage{height:calc(100svh - var(--hdr))}
}
.whatif.live .wi-stage > .wrap{width:100%}
.whatif.live .wi-beats li{opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .4s ease}
.whatif.live .wi-beats li.past{opacity:.28;transform:none}
.whatif.live .wi-beats li.on{opacity:1;transform:none}
.whatif.live .wi-card:not(.s2) .wc-top{background:linear-gradient(180deg,#1b221e,#141a16)}
.whatif.live .wi-card:not(.s2) .wc-av{background:transparent;box-shadow:inset 0 0 0 2px var(--n700)}
.whatif.live .wi-card:not(.s2) .wc-av i{display:none}
.whatif.live .wi-card:not(.s2) .wc-av .ic{display:block}
.whatif.live .wi-card:not(.s2) .wc-anon{opacity:1}
.whatif.live .wi-card:not(.s2) .wc-name{opacity:0}
.whatif.live .wi-card:not(.s2) .wc-sub{color:var(--n500)}
.whatif.live .wi-card .wc-v{display:none}
.whatif.live .wi-card .wc-mask{display:block}
.whatif.live .wi-card.s1 .f1 .wc-v,.whatif.live .wi-card.s3 .f3 .wc-v{display:block;animation:wcIn .5s ease both}
.whatif.live .wi-card.s1 .f1,.whatif.live .wi-card.s3 .f3,.whatif.live .wi-card.s5 .wc-trail{animation:wcHi 1.1s ease both}
.whatif.live .wi-card.s2 .wc-top{animation:wcTop 1.1s ease both}
.whatif.live .wi-card.s1 .f1 .wc-mask,.whatif.live .wi-card.s3 .f3 .wc-mask{display:none}
.whatif.live .wi-card:not(.s1) .f1 .wc-k,.whatif.live .wi-card:not(.s3) .f3 .wc-k{color:var(--n700)}
.whatif.live .wi-card:not(.s5) .wc-trail li > *{visibility:hidden}
.whatif.live .wi-card:not(.s5) .wc-trail li{border-radius:4px;background:linear-gradient(90deg,var(--n900) 0 62%,transparent 62%)}
.whatif.live .wi-card:not(.s5) .wc-trail .wc-label .ic{color:var(--n700)}
.whatif.live .wi-card.s5 .wc-trail li{animation:wcIn .45s ease both}
.whatif.live .wi-card.s5 .wc-trail li:nth-child(2){animation-delay:.12s}
.whatif.live .wi-card.s5 .wc-trail li:nth-child(3){animation-delay:.24s}
.whatif.live .wi-card.s5 .wc-trail li:nth-child(4){animation-delay:.36s}
.whatif.live .wi-card:not(.s6) .wc-flag{background:linear-gradient(var(--n900),var(--n900)) left 20px top 17px/34% 9px no-repeat,linear-gradient(var(--n900),var(--n900)) left 20px top 36px/72% 12px no-repeat;border-top-color:var(--line)}
.whatif.live .wi-card:not(.s6) .wc-flag > *{visibility:hidden}
.whatif.live .wi-card.s6 .wc-flag{animation:wcFlag .55s ease both}
.whatif.live .wi-card:not(.s7) .wc-call > *{visibility:hidden}
.whatif.live .wi-card:not(.s7) .wc-call{background:linear-gradient(var(--n900),var(--n900)) left 20px center/132px 42px no-repeat}
.whatif.live .wi-card.s7 .wc-btn{animation:wcIn .4s ease both,wcRing 1.4s ease .4s 2}
.whatif.live .wi-card.s7 .wc-say{animation:wcIn .45s ease .25s both}
/* step 4: the 62 more details */
.whatif.live .wi-card:not(.s4) .wc-more li{color:transparent;background:var(--n900);box-shadow:none}
.whatif.live .wi-card:not(.s4) .wc-more li > i{visibility:hidden}
.whatif.live .wi-card:not(.s4) .wc-more .wc-label{color:var(--n700)}
.whatif.live .wi-card:not(.s4) .wc-more .wc-label .ic{color:var(--n700)}
.whatif.live .wi-card.s4 .wc-more{animation:wcHi 1.1s ease both}
.whatif.live .wi-card.s4 .wc-more li{animation:wcIn .4s ease both}
.whatif.live .wi-card.s4 .wc-more li:nth-child(2){animation-delay:.07s}
.whatif.live .wi-card.s4 .wc-more li:nth-child(3){animation-delay:.14s}
.whatif.live .wi-card.s4 .wc-more li:nth-child(4){animation-delay:.21s}
.whatif.live .wi-card.s4 .wc-more li:nth-child(5){animation-delay:.28s}
.whatif.live .wi-card.s4 .wc-more li:nth-child(6){animation-delay:.42s}
@keyframes wcIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes wcHi{from{background:rgba(95,209,110,.16)}to{background:transparent}}
@keyframes wcTop{from{filter:brightness(1.45)}to{filter:none}}
@keyframes wcFlag{from{opacity:0;background:#7a2a22}to{opacity:1;background:var(--flag-deep)}}
@keyframes wcRing{0%,100%{box-shadow:0 0 0 0 rgba(95,209,110,.55)}60%{box-shadow:0 0 0 14px rgba(95,209,110,0)}}

@media(max-width:900px){
  .wi-grid{grid-template-columns:minmax(0,1fr);gap:22px}
  .wi-card{width:100%;max-width:480px}
  /* on a phone only the current line shows, in the same place as the opening line */
  .whatif.live .wi-stage{align-items:flex-start;padding:16px 0 12px}
  .whatif.live .wi-copy .blade{display:none}
  .whatif.live .wi-head{grid-template-areas:"x"}
  .whatif.live .wi-kick,.whatif.live .wi-beats,.whatif.live .wi-beats li{grid-area:x}
  .whatif.live .wi-beats{display:grid;grid-template-areas:"x";margin-top:0}
  .whatif.live .wi-kick{transition:opacity .35s ease}
  .whatif.live.begun .wi-kick{opacity:0}
  .whatif.live .wi-beats li.past{opacity:0;transform:translateY(-10px)}
  .whatif.live .wi-beats li > span{font-size:clamp(27px,7.6vw,38px)}
  .whatif.live .wi-beats li small{margin-top:7px;font-size:15.5px}
  .whatif.live .wi-kick{font-size:clamp(21px,5.6vw,26px);color:var(--text)}
}
@media(max-width:520px){
  .wc-top{padding:14px 16px;gap:12px}
  .wc-av{width:44px;height:44px;font-size:16px}
  .wc-name{font-size:25px}
  .wc-rows{padding:2px 16px}
  .wc-row{min-height:40px;padding:6px 0;font-size:14.5px}
  .wc-trail{padding:12px 16px 13px}
  .wc-more{padding:11px 16px 12px}
  .wc-more ul{flex-wrap:nowrap;gap:5px;margin-top:9px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 78%,transparent);mask-image:linear-gradient(90deg,#000 78%,transparent)}
  .wc-more li{padding:4px 8px 3px;font-size:13px}
  .wc-row.f1{font-size:14px}
  .wc-v .pill{margin-left:4px;padding-inline:5px;font-size:9.5px}
  .wc-trail ol{gap:6px;margin-top:10px}
  .wc-trail li{grid-template-columns:minmax(0,1fr) auto;font-size:14px}
  .wc-trail time{display:none}
  .wc-flag{padding:12px 16px 13px;font-size:14px}
  .wc-call{padding:13px 16px 15px;gap:10px}
  .wc-btn{padding:11px 16px;font-size:14px}
  .wc-say{font-size:13.5px;padding:8px 12px}
}

/* ---------- illustrations (tools/scenes.mjs) ---------- */
.scn{display:block;width:100%;height:auto}
.scn text{font-family:var(--signf)}
.scn .t-mono{font:500 14px var(--data);fill:var(--n500)}
.scn .t-ini{font-weight:900;font-size:15px;fill:#fff;letter-spacing:.02em}
.scn .t-q{font-weight:800;font-size:17px;fill:var(--n600)}
.scn .t-chip{font-weight:800;font-size:18.5px;fill:#fff;letter-spacing:0}
.scn .t-note{font:500 14px var(--voice);fill:var(--n500)}
.scn .t-tag{font-weight:800;font-size:16px;letter-spacing:.06em;text-transform:uppercase}
.scn .t-lbl{font-weight:800;font-size:14px;letter-spacing:.06em;text-transform:uppercase;fill:var(--n300)}
/* with script, marks pop in and lines draw once a picture is on screen; without it, everything simply shows */
.js [data-in] .pop{opacity:0;transform:scale(.7);transform-box:fill-box;transform-origin:center;transition:opacity .5s ease,transform .5s cubic-bezier(.3,1.4,.5,1);transition-delay:calc(var(--d,0) * 110ms + 150ms)}
.js [data-in].in .pop{opacity:1;transform:none}
.js [data-in] .flow{stroke-dashoffset:1;transition:stroke-dashoffset 1s ease;transition-delay:calc(var(--d,0) * 140ms)}
.js [data-in].in .flow{stroke-dashoffset:0}
.scn .t-big{font-weight:900;font-size:24px;fill:#050705;letter-spacing:-.01em}

/* ---------- sign tiles in a list ---------- */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tiles-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tiles-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tiles li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:15px;align-items:center;min-height:82px;padding:16px 18px 16px 16px;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font-size:15px;line-height:1.42;color:var(--n200)}
@media(max-width:1000px){.tiles,.tiles-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){
  .tiles,.tiles-2,.tiles-3{gap:10px}
  .tiles li{grid-template-columns:1fr;align-content:start;gap:12px;min-height:0;padding:14px 14px 15px;font-size:14px;line-height:1.38}
  .tiles .st{width:42px;height:42px;font-size:22px}
}

/* ---------- 3 · the pixel: what comes back, how it goes on, what we don't promise ---------- */
.facts{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.facts-back{grid-column:1 / -1}
.facts-back h3{margin-bottom:18px}
.facts-not{align-self:start;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;padding:26px 26px 24px;border-radius:14px;background:rgba(255,210,58,.05);box-shadow:inset 0 0 0 1px rgba(255,210,58,.22)}
.facts-not .dia{grid-row:1 / span 3;margin:-6px 0 0 -6px}
.facts-not h3{margin-bottom:10px}
.code{margin:0 0 20px;border-radius:12px;overflow:hidden;background:#070b08;box-shadow:inset 0 0 0 1px var(--n800)}
.code-bar{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;background:#0d1410;border-bottom:1px solid var(--line)}
.code-bar i{width:9px;height:9px;border-radius:50%;background:var(--n800)}
.code-bar span{margin-left:8px;font:500 12px/1 var(--data);color:var(--n500)}
.code pre{margin:0;padding:16px 18px;overflow-x:auto;font:500 14px/1.75 var(--data);color:var(--n400)}
.code .c-dim{color:var(--n600)}
.code .c-hit{display:inline-block;margin:2px -8px;padding:2px 8px;border-radius:5px;background:rgba(95,209,110,.14);box-shadow:inset 0 0 0 1px rgba(95,209,110,.5),0 0 26px -6px rgba(95,209,110,.6);color:var(--g100)}
.code figcaption{display:flex;flex-wrap:wrap;gap:8px 18px;padding:12px 18px 14px;border-top:1px solid var(--line);font-size:13.5px;color:var(--n300)}
.code figcaption span{display:inline-flex;align-items:center;gap:7px}
.code figcaption .ic{font-size:16px;color:var(--green)}
@media(max-width:1000px){.facts{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){
  .code pre{padding:14px;font-size:12.5px}
  .facts-not{padding:20px 18px 18px;column-gap:12px}
  .facts-not .dia{width:52px;height:52px;font-size:21px}
}

/* ---------- 4 · the desk: the phone, and what every desk has ---------- */
.always{grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center}
.always h3{margin-bottom:18px}
.always-phone img{max-width:300px}
@media(max-width:820px){
  .always{grid-template-columns:1fr}
  .always-phone img{max-width:250px;margin:0 auto}
}

/* ---------- 5 · past customers: one card per story ---------- */
.tales-cards li{display:grid;align-content:start;gap:12px;padding:20px 20px 22px;border-top:0;border-radius:14px;background:linear-gradient(180deg,#140b0a,#0b0807);box-shadow:inset 0 0 0 1px rgba(255,107,95,.24)}
.tales-cards b{color:var(--flag)}
.tales-cards p{margin-top:0}
.tc-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;margin-bottom:4px}
.tc-top .st{width:40px;height:40px;font-size:21px}
.tc-gap{position:relative;display:grid;place-items:center;height:40px;font:800 11px/1 var(--signf);letter-spacing:.1em;text-transform:uppercase;color:var(--n300)}
.tc-gap i{position:absolute;left:0;right:0;top:50%;border-top:2px dashed var(--n700)}
.tc-gap span{position:relative;padding:3px 7px 1px;border-radius:4px;background:#130b0a}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags em{padding:4px 8px 2px;border-radius:4px;background:var(--tag);color:var(--tag-ink);font:800 13px/1.3 var(--signf);font-style:normal}


/* ---------- 6 · intent leads: the pictures in the steps and the scales ---------- */
.steps figure .scn{max-width:380px;margin:0 auto}
.range-fig{display:block;height:92px;margin-bottom:18px}
.range-fig .scn{width:auto;height:100%;max-width:100%}
.range .wide .range-fig{height:112px}

/* ---------- 7 · the scrub: a record caught contradicting itself ---------- */
.scrub-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.contra{margin:26px 0 0}
.ct-card{position:relative;padding:18px 20px 20px;border-radius:14px;background:#0c120e;box-shadow:0 0 0 1px var(--n800),0 40px 80px -50px #000}
.ct-h{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:12px;border-bottom:1px solid var(--line);font:800 12px/1 var(--signf);letter-spacing:.13em;text-transform:uppercase;color:var(--n400)}
.ct-h em{font-style:normal;color:var(--n600)}
.ct-pair{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-2)}
.ct-pair > div{display:grid;gap:4px;padding:9px 12px 8px;border-radius:8px;background:rgba(232,179,74,.07);box-shadow:inset 0 0 0 1.5px rgba(232,179,74,.55)}
.ct-k{font-size:12px;color:var(--n400)}
.ct-pair b{font:900 22px/1 var(--signf);color:var(--text);font-variant-numeric:tabular-nums}
.ct-pair i{font:900 24px/1 var(--signf);font-style:normal;color:var(--amber)}
.ct-stamp{position:absolute;right:14px;top:8px;padding:8px 14px 5px;border:3px solid var(--flag);border-radius:8px;color:var(--flag);font:900 22px/1 var(--signf);letter-spacing:.12em;text-transform:uppercase;transform:rotate(-9deg);background:rgba(10,8,7,.82);box-shadow:0 0 0 4px rgba(10,8,7,.82)}
.contra figcaption{margin-top:12px;font-size:13.5px;color:var(--n500)}
.js .contra[data-in] .ct-stamp{opacity:0;transform:rotate(-9deg) scale(1.6);transition:opacity .3s ease .5s,transform .35s cubic-bezier(.2,1.5,.4,1) .5s}
.js .contra[data-in].in .ct-stamp{opacity:1;transform:rotate(-9deg)}
.checks-ic li{grid-template-columns:34px 1fr;align-items:center}
.checks-ic li::before{display:none}
.checks-ic .ic{font-size:19px;color:var(--green)}
@media(max-width:900px){.scrub-top{grid-template-columns:1fr}.contra{margin-top:6px}}
@media(max-width:520px){
  .ct-card{padding:14px 14px 16px}
  .ct-pair{gap:8px}
  .ct-pair > div{padding:8px 10px 7px}
  .ct-pair b{font-size:19px}
  .ct-stamp{right:8px;top:6px;font-size:17px}
}

/* ---------- 8 · the exits: a pictogram on every sign ---------- */
.exit-ic{position:absolute;left:32px;top:-24px;z-index:1;display:grid;place-items:center;width:46px;height:46px;border-radius:10px;background:var(--sg);color:#fff;font-size:25px;box-shadow:inset 0 0 0 2.5px var(--sg),inset 0 0 0 4px var(--ring);transition:background .25s,box-shadow .25s}
.exit-k{margin-top:10px}

/* ---------- 9 · straight talk: a warning sign on every point ---------- */
.talk .dia{margin:-4px 0 6px -6px}
.talk div{border-top-width:0;padding-top:0}

/* ---------- 10 · start: the steps get their signs ---------- */
.start-steps li{grid-template-columns:auto 1fr;gap:16px;align-items:center}
.start-steps li::before{display:none}
.start-steps .st{width:44px;height:44px;font-size:23px}

/* ---------- swipe cards: a row you swipe through on a phone ---------- */
.swipe-hint{display:none}
@media(max-width:700px){
  .swipe{display:grid!important;grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:84%;gap:12px!important;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--pad));padding:4px var(--pad) 8px;scroll-padding-inline:var(--pad);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .swipe::-webkit-scrollbar{display:none}
  .swipe > *{scroll-snap-align:start}
  .talk.swipe > div{padding:20px 18px 22px;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1px rgba(255,210,58,.25)}
  .swipe-hint{display:flex;align-items:center;gap:8px;margin-top:12px;font:800 11.5px/1 var(--signf);letter-spacing:.12em;text-transform:uppercase;color:var(--g300)}
  .swipe-hint .ic{font-size:16px}
}

/* ==========================================================================
   Case pages: the same visual layer
   ========================================================================== */
/* on a phone the hero plates sit two to a row, so the numbers arrive in one screen */
@media(max-width:520px){
  .plates,.plates-3{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .plates .plate{padding:18px 16px 16px;gap:7px}
  .plates .plate::after{inset:5px}
  .plates .plate b{font-size:clamp(30px,9vw,40px)}
  .plates .plate.long b{font-size:clamp(25px,7.4vw,32px)}
  .plates .plate span{font-size:13px;line-height:1.3}
}
/* story cards in green, for the pages' "what it surfaced" */
.tales-g.tales-cards li{background:linear-gradient(180deg,#0b140e,#080d0a);box-shadow:inset 0 0 0 1px rgba(95,209,110,.22)}
.tales-g.tales-cards b{color:var(--green)}
.tales-cards > li > .st{margin-bottom:2px}
@media(min-width:701px){.tales-cards{gap:16px}}

/* a dated log, drawn as a road with a stop for each day */
.log li{position:relative;grid-template-columns:76px minmax(0,1fr);padding:12px 0 12px 22px;border-top:0}
.log li::before{content:"";position:absolute;left:4px;top:0;bottom:0;width:2px;background:var(--n800)}
.log li::after{content:"";position:absolute;left:0;top:17px;width:10px;height:10px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 2.5px var(--green)}
.log li:first-child::before{top:20px}
.log li:last-child::before{bottom:auto;height:20px}

/* two bars side by side: theirs against ours */
.vs{display:grid;gap:18px;margin-top:22px}
.vs > div{display:grid;gap:8px}
.vs h4{font:800 12px/1.2 var(--signf);letter-spacing:.12em;text-transform:uppercase;color:var(--n400)}
.vs p{display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;gap:12px;font-size:14px;color:var(--n300)}
.vs p i{display:block;width:var(--w);min-width:6px;height:16px;border-radius:3px;background:var(--n700)}
.vs p.ours i{background:var(--green);box-shadow:0 0 18px rgba(95,209,110,.35)}
.vs p b{font:900 20px/1 var(--signf);font-variant-numeric:tabular-nums;color:var(--n300)}
.vs p.ours b{color:var(--green)}

/* rings: one share of a whole, drawn as a gauge */
.rings{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px clamp(18px,3vw,40px);margin-top:clamp(30px,4vh,44px)}
.rings > div{display:grid;justify-items:start;gap:14px}
.ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--green) calc(var(--p) * 1%),#1b2620 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 13px),#000 calc(100% - 12px));mask:radial-gradient(farthest-side,transparent calc(100% - 13px),#000 calc(100% - 12px))}
.ring-w{position:relative;width:112px;height:112px}
.ring-w b{position:absolute;inset:0;display:grid;place-items:center;font:900 28px/1 var(--signf);letter-spacing:-.02em;color:var(--text)}
.rings dd{max-width:22ch;font-size:14.5px;line-height:1.45;color:var(--n400)}
@media(max-width:820px){.rings{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* waffles: a hundred squares, so "87 of every 100" can be seen */
.waffles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px clamp(20px,3vw,48px);margin-top:clamp(30px,4vh,44px)}
.waffle{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;max-width:220px}
.waffle i{aspect-ratio:1;border-radius:2px;background:#1b2620}
.waffle i.l{background:var(--green)}
.waffle i.p{background:repeating-linear-gradient(45deg,var(--green) 0 2px,#1b2620 2px 4px)}
.waffle i.w{background:var(--g200)}
.waffles dt{margin-top:16px;font:900 clamp(30px,3.2vw,44px)/.9 var(--signf);letter-spacing:-.03em;color:var(--text)}
.waffles dd{margin-top:9px;max-width:30ch;font-size:14.5px;line-height:1.45;color:var(--n400)}
@media(max-width:820px){.waffles{grid-template-columns:1fr 1fr}.waffles > div:first-child{grid-column:1 / -1}}
@media(max-width:480px){.waffle{gap:3px}}

/* a row of houses, one for each named visitor */
.houses{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(30px,4vh,44px)}
.houses i{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:9px;background:#0d1610;box-shadow:inset 0 0 0 1px var(--line);font-size:26px;color:var(--n600)}
.houses i.own{color:var(--green)}
.houses i.away::after{content:"";position:absolute;right:-3px;top:-3px;width:12px;height:12px;border-radius:50%;background:var(--tag);box-shadow:0 0 0 3px var(--bg)}
.houses-key{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:16px;font-size:14px;color:var(--n400)}
.houses-key span{display:inline-flex;align-items:center;gap:9px}
.houses-key .ic{font-size:20px}
.houses-key .own{color:var(--green)}
.houses-key .rent{color:var(--n600)}
.houses-key .dot{width:11px;height:11px;border-radius:50%;background:var(--tag)}

/* icon counters: what was read before anyone was named */
.counters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:22px}
.counters div{display:grid;gap:10px;padding:16px;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.counters .st{width:42px;height:42px;font-size:22px}
.counters b{font:900 30px/.9 var(--signf);letter-spacing:-.02em;color:var(--text)}
.counters span{font-size:13.5px;line-height:1.35;color:var(--n400)}
@media(max-width:1100px){.counters{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* the read key: each page, and the signal it sends */
.signals{display:grid;gap:10px}
.signals li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 16px;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.signals .st{width:42px;height:42px;font-size:22px}
.signals .sig-t{display:block;font-size:15.5px;font-weight:600;line-height:1.35;color:var(--text)}
.signals p{margin-top:3px;font-size:14px;line-height:1.4;color:var(--n400)}
.meter{display:grid;justify-items:end;gap:6px;font:800 11px/1 var(--signf);letter-spacing:.1em;text-transform:uppercase;color:var(--n500);white-space:nowrap}
.meter span{display:flex;align-items:flex-end;gap:3px;height:22px}
.meter span i{width:7px;border-radius:2px;background:#1f2a23}
.meter span i:nth-child(1){height:8px}.meter span i:nth-child(2){height:15px}.meter span i:nth-child(3){height:22px}
.meter[data-n="3"] span i,.meter[data-n="2"] span i:nth-child(-n+2),.meter[data-n="1"] span i:first-child{background:var(--green)}
.meter[data-n="3"]{color:var(--green)}
@media(max-width:520px){.signals li{grid-template-columns:auto minmax(0,1fr);row-gap:10px}.meter{grid-column:2;justify-items:start;grid-auto-flow:column;align-items:end}}
.tiles-1{grid-template-columns:1fr}
.tiles-1 li{min-height:0}
@media(max-width:560px){
  .tiles-1 li{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px}
}
.prose .tiles{margin-top:18px}
.chart-h{font:800 13px/1.3 var(--signf);letter-spacing:.11em;text-transform:uppercase;color:var(--n400)}
.chart-h + .hbars{margin-top:20px}
.chart-note{margin-top:14px}
.chart-note b{color:var(--text)}
.hbars-sm{margin-top:20px;gap:10px}
.hbars-sm li{grid-template-columns:minmax(120px,170px) minmax(0,1fr) 54px}
.hbars-sm span{font-size:14.5px}
.hbars-sm b{font-size:19px}
@media(max-width:640px){.hbars-sm li{grid-template-columns:minmax(0,1fr) auto}}
.situ-fig{margin:30px 0 0;max-width:520px}
.houses-fig{margin:clamp(30px,4vh,44px) 0 0}
.houses-fig .houses{margin-top:0}
/* men as a share of the list, against an even split */
.mf{display:grid;gap:12px;margin-top:22px}
.mf p{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:14px;font-size:14px;color:var(--n400)}
.mf b{position:relative;display:block;height:30px;border-radius:5px;background:#1b2620;overflow:hidden}
.mf b::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--m);background:var(--sign-lit)}
.mf b::after{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;border-left:2px dashed rgba(255,255,255,.55)}
.mf i{position:relative;z-index:1;display:block;padding:7px 10px 0;font:800 13px/1 var(--signf);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:#fff}
/* a short phone screen: everything in the "what if" stage tightens so the whole card still fits */
@media(max-width:900px) and (max-height:740px){
  .whatif.live .wi-stage{padding:8px 0 6px}
  .whatif.live .wi-grid{gap:14px}
  .whatif.live .wi-beats li > span{font-size:clamp(24px,6.6vw,30px)}
  .whatif.live .wi-beats li small{margin-top:5px;font-size:14px;line-height:1.35}
  .whatif.live .wi-kick{font-size:20px}
  .whatif.live .wc-top{padding:11px 14px;gap:11px}
  .whatif.live .wc-av{width:38px;height:38px;font-size:14px}
  .whatif.live .wc-av .ic{font-size:24px}
  .whatif.live .wc-name{font-size:21px}
  .whatif.live .wc-sub{margin-top:4px;font-size:10.5px}
  .whatif.live .wc-anon{font-size:13.5px}
  .whatif.live .wc-rows{padding:0 14px}
  .whatif.live .wc-row{min-height:34px;padding:4px 0;font-size:13.5px}
  .whatif.live .wc-k{font-size:17px}
  .whatif.live .wc-trail{padding:9px 14px 10px}
  .whatif.live .wc-more{padding:8px 14px 9px}
  .whatif.live .wc-more ul{margin-top:7px}
  .whatif.live .wc-more li{font-size:12.5px}
  .whatif.live .wc-trail li:first-child{display:none}
  .whatif.live .wi-beats li small{display:none}
  .whatif.live .wc-row.f1{font-size:13px}
  .whatif.live .wc-trail ol{gap:4px;margin-top:8px}
  .whatif.live .wc-trail li{min-height:20px;font-size:13px}
  .whatif.live .wc-trail li.hit span{font-size:12.5px;padding:2px 7px 0}
  .whatif.live .wc-flag{gap:4px;padding:9px 14px 10px;font-size:13px}
  .whatif.live .wc-call{padding:9px 14px 11px;gap:8px}
  .whatif.live .wc-btn{padding:9px 14px;font-size:13.5px}
  .whatif.live .wc-say{padding:7px 10px;font-size:12.5px}
}

/* the same visit twice: what analytics shows, then what the desk shows */
.ba{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.15fr);align-items:center;gap:12px;margin:30px 0 0;max-width:620px}
.ba-k{display:flex;align-items:center;gap:7px;font:800 11px/1.2 var(--signf);letter-spacing:.12em;text-transform:uppercase;color:var(--n500)}
.ba-before{display:grid;gap:12px;padding:16px;border:1px dashed var(--n800);border-radius:12px}
.ba-before dl{display:grid;gap:6px}
.ba-before dl div{display:grid;grid-template-columns:62px 1fr;gap:8px;font:500 12.5px/1.35 var(--data)}
.ba-before dt{color:var(--n600)}
.ba-before dd{color:var(--n400)}
.ba-arrow{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--sign);color:#fff;font-size:19px;box-shadow:0 0 0 4px rgba(28,106,48,.25)}
.ba-after{display:grid;gap:8px;padding:16px 16px 17px;border-radius:12px;background:linear-gradient(180deg,#123f20,#0f2a17);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
.ba-after .ba-k{color:var(--g200)}
.ba-after .ba-k .ic{font-size:15px}
.ba-after b{font:900 19px/1.15 var(--signf);color:#fff;text-wrap:balance}
.ba-v{font-size:14px;color:var(--g100)}
.ba-v strong{color:var(--tag);font-weight:700}
@media(max-width:560px){
  .ba{grid-template-columns:1fr;justify-items:stretch}
  .ba-arrow{justify-self:center;transform:rotate(90deg)}
}

/* ---------- 8 · your AI officer ---------- */
.ai-k{margin:clamp(54px,7vh,86px) 0 24px;font:700 clamp(22px,2vw,28px)/1.15 var(--voice);letter-spacing:-.022em;color:var(--text)}
/* one road through the business: a lane line with a stop at every department */
.ai-road{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px}
.ai-road::before{content:"";position:absolute;left:24px;right:24px;top:23px;height:2px;background:repeating-linear-gradient(90deg,rgba(95,209,110,.7) 0 12px,transparent 12px 24px);transform-origin:0 50%}
.ai-road li{position:relative;display:grid;align-content:start;gap:10px}
.ai-road .st{position:relative;z-index:1;box-shadow:inset 0 0 0 2.5px var(--sign),inset 0 0 0 4px rgba(255,255,255,.92),0 0 0 7px var(--bg)}
.ai-road b{margin-top:6px;font:800 19px/1.1 var(--signf);color:#fff}
.ai-road p{font-size:15px;line-height:1.5;color:var(--n300)}
@media(max-width:1100px){
  .ai-road{grid-template-columns:minmax(0,1fr);gap:0;max-width:640px}
  .ai-road::before{left:23px;right:auto;top:24px;bottom:30px;width:2px;height:auto;background:repeating-linear-gradient(180deg,rgba(95,209,110,.7) 0 12px,transparent 12px 24px);transform-origin:50% 0}
  .ai-road li{grid-template-columns:48px minmax(0,1fr);column-gap:18px;row-gap:3px;padding:0 0 26px}
  .ai-road li:last-child{padding-bottom:0}
  .ai-road .st{grid-row:span 2}
  .ai-road b{margin-top:3px}
}
/* what a good one does: four steps, in order */
.ai-steps{counter-reset:ai;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.4vw,34px)}
.ai-steps li{counter-increment:ai;display:grid;align-content:start;gap:8px;padding-top:18px;border-top:2px solid var(--sign-lit)}
.ai-steps li::before{content:counter(ai);margin-bottom:10px;font:900 54px/.8 var(--signf);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px var(--green)}
.ai-steps b{font:800 21px/1.1 var(--signf);color:#fff}
.ai-steps p{font-size:15.5px;line-height:1.5;color:var(--n300)}
@media(max-width:1000px){.ai-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}}
@media(max-width:560px){.ai-steps{grid-template-columns:minmax(0,1fr);row-gap:28px}.ai-steps li::before{font-size:46px}}
/* any size */
.ai-size ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ai-size li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;row-gap:4px;align-items:start;padding:20px 20px 21px;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.ai-size .st{grid-row:span 2}
.ai-size b{margin-top:4px;font:800 19px/1.15 var(--signf);color:#fff}
.ai-size p{font-size:15px;line-height:1.5;color:var(--n300)}
@media(max-width:900px){.ai-size ul{grid-template-columns:minmax(0,1fr)}}

/* ==========================================================================
   The road between chapters. A stretch of lane line leads down to each chapter's sign,
   the sign catches the headlights as it arrives, and the chapter's title rolls up into place.
   All of it is tied to the scroll itself, so it moves only as fast as the reader does.
   Browsers without scroll-linked animation, and anyone who asks for less motion, get it all standing still.
   ========================================================================== */
.seam{position:absolute;z-index:2;top:-64px;left:calc(max(0px,(100% - 1280px) / 2) + var(--pad) + 13px);width:2px;height:calc(clamp(84px,12vh,150px) + 64px - 18px);background:repeating-linear-gradient(180deg,rgba(95,209,110,.62) 0 10px,transparent 10px 21px);transform-origin:50% 0;pointer-events:none}
.sec .blade{position:relative}
.blade-flag{--glow:rgba(255,107,95,.6)}
.blade-caution{--glow:rgba(255,210,58,.5)}
@media(max-width:900px){
  /* on a phone the lane line is the boundary; the hairline across the page goes */
  .sec,.whatif{border-top-color:transparent}
}
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .sec{view-timeline:--chapter block}
    .seam{animation:seamDraw linear both;animation-timeline:--chapter;animation-range:entry 0% entry 38%}
    .sec .blade{animation:signLit linear both;animation-timeline:view();animation-range:cover 0% cover 30%}
    .sec .blade::after{content:"";position:absolute;inset:-4px;border-radius:7px;box-shadow:0 0 24px 4px var(--glow,rgba(95,209,110,.6));opacity:0;pointer-events:none;animation:signGlow linear both;animation-timeline:view();animation-range:cover 4% cover 42%}
    .sec .h2,.sec .lede,.sec .flag-n{animation:chapterIn linear both;animation-timeline:view();animation-range:cover 0% cover 26%}
    .ai-road{view-timeline:--road block}
    .ai-road::before{animation:roadX linear both;animation-timeline:--road;animation-range:entry 30% cover 55%}
    .ai-road li{animation:stopIn linear both;animation-timeline:view();animation-range:cover 0% cover 30%}
    @media(max-width:1100px){.ai-road::before{animation-name:roadY;animation-range:entry 10% exit 10%}}
  }
}
@keyframes seamDraw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes signLit{from{opacity:.28}to{opacity:1}}
@keyframes signGlow{0%{opacity:0}55%{opacity:1}100%{opacity:0}}
@keyframes chapterIn{from{opacity:.1;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes roadX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes roadY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes stopIn{from{opacity:.25}to{opacity:1}}