/* --- Self-hosted fonts -------------------------------------------------
   Latin subset, variable weight, served from this domain. Removing the
   Google Fonts stylesheet takes the last render-blocking request off every
   page, and stops a visitor's IP reaching Google on page load, which is
   what the privacy page says we do not do. SIL OFL 1.1; licences in
   assets/fonts/. */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-display:swap;
  font-weight:200 800;src:url(../fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Public Sans";font-style:normal;font-display:swap;
  font-weight:100 900;src:url(../fonts/public-sans-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-display:swap;
  font-weight:100 800;src:url(../fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ============================================================
   ONE GROUND · ONE ACCENT · ONE SIGNAL · ONE DARK MOMENT
   ground  = every section background, top to bottom
   surface = cards only
   accent  = teal, the only accent hue on the page
   signal  = clay, used ONLY to mark the traditional chain
   band    = the single dark block, at the closing CTA
   ============================================================ */
:root{
  --ground:#F7FAFA; --surface:#FFFFFF; --surface-2:#EEF4F4;
  --ink:#0C1F27; --ink-2:#25404A; --muted:#57707A; --faint:#8AA1A9;
  --line:#DDE7E7; --line-2:#C6D5D5;
  --accent:#0E9E92; --accent-deep:#086B63; --accent-soft:#DDF2EF; --accent-ink:#053F3A;
  --signal:#C0552E; --signal-soft:#F9E7DF;
  --on-accent:#FFFFFF;
  --race-work:#E2EBEC; --race-work-ink:#3C5865; --race-rest:#F1F6F6;
  --grid:rgba(12,31,39,.07); --aura-a:rgba(14,158,146,.16); --aura-b:rgba(14,158,146,.07);
  --btn-bg:#0B6C64; --btn-bg-h:#095A53; --btn-fg:#FFFFFF;
  --band:#0C1F27; --band-ink:#EAF3F3; --band-muted:#8FA9B0; --band-line:#20404A;
  --shadow:0 1px 2px rgba(12,31,39,.05), 0 14px 32px -16px rgba(12,31,39,.16);
  --shadow-lift:0 2px 4px rgba(12,31,39,.06), 0 30px 60px -24px rgba(12,31,39,.26);
  --r-s:6px; --r-m:12px; --r-l:20px; --maxw:1200px;
  --display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --body:"Public Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
/* Light is the default for everyone. Dark is opt-in via the toggle
   (data-theme="dark"), persisted in localStorage. No OS sniffing. */
:root[data-theme="dark"]{
  --ground:#08171C; --surface:#0E2229; --surface-2:#132C34;
  --ink:#E9F2F2; --ink-2:#C4D6D8; --muted:#8CA5AB; --faint:#67818A;
  --line:#1A343C; --line-2:#27484F;
  --accent:#2ED3C0; --accent-deep:#7FEADD; --accent-soft:#0C3733; --accent-ink:#B4F3EA;
  --signal:#E58460; --signal-soft:#33190F;
  --on-accent:#042320;
  --race-work:#1C343D; --race-work-ink:#A7BFC6; --race-rest:#0C1E24;
  --grid:rgba(190,225,230,.085); --aura-a:rgba(46,211,192,.16); --aura-b:rgba(46,211,192,.06);
  --btn-bg:#2ED3C0; --btn-bg-h:#4BE0CE; --btn-fg:#04231F;
  --band:#0E2229; --band-ink:#E9F2F2; --band-muted:#8CA5AB; --band-line:#27484F;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 32px -16px rgba(0,0,0,.6);
  --shadow-lift:0 2px 4px rgba(0,0,0,.5), 0 30px 60px -24px rgba(0,0,0,.75);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--display); font-weight:700; letter-spacing:-.028em; line-height:1.06; text-wrap:balance; margin:0}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:3px; border-radius:3px}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px}
@media (max-width:920px){.wrap{padding:0 20px}}

.eyebrow{
  font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent-deep); display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:22px; height:1.5px; background:var(--accent); flex:none}
.lede{font-size:19px; color:var(--muted); max-width:62ch; line-height:1.62}

.no-js .rv, .no-js .hero-copy > *, .no-js .hero-term, .no-js .race, .no-js .termline{opacity:1 !important; transform:none !important; animation:none !important}
.rv{opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1; transform:none; transition:none}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.06s !important}
}

.spine{position:fixed; left:26px; top:0; bottom:0; width:2px; background:var(--line); z-index:5; pointer-events:none}
.spine::after{content:""; position:absolute; left:0; top:0; width:2px; height:var(--progress,0%); background:var(--accent)}
.spine-dot{
  position:fixed; left:20px; width:14px; height:14px; border-radius:50%;
  background:var(--ground); border:2px solid var(--line); z-index:6; pointer-events:none;
  transition:border-color .35s, background .35s, transform .35s;
}
.spine-dot.lit{border-color:var(--accent); background:var(--accent); transform:scale(1.15)}
@media (max-width:1120px){.spine,.spine-dot{display:none}}

/* ============ NAV ============ */
header.nav{
  position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--ground) 84%, transparent);
  backdrop-filter:blur(14px) saturate(1.4); border-bottom:1px solid transparent; transition:border-color .3s, background .3s;
}
header.nav.stuck{border-bottom-color:var(--line); background:color-mix(in srgb, var(--ground) 95%, transparent)}
.nav-in{display:flex; align-items:center; gap:8px; height:68px; max-width:var(--maxw); margin:0 auto; padding:0 32px}
@media (max-width:920px){.nav-in{padding:0 20px}}
.logo{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:800; font-size:19px; letter-spacing:-.03em; text-decoration:none; margin-right:22px; color:var(--ink)}
.logo-mark{width:26px; height:26px; flex:none}
.logo span.sub{color:var(--accent-deep); font-weight:600}
.nav-links{display:flex; align-items:center; gap:2px; margin-right:auto}
.nav-item{position:relative}
.nav-link{
  display:flex; align-items:center; gap:5px; padding:9px 13px; border-radius:var(--r-s);
  font-size:14.5px; font-weight:500; color:var(--ink-2); text-decoration:none;
  transition:background .18s,color .18s; background:none; border:0; font-family:var(--body); cursor:pointer;
}
.nav-link:hover{background:var(--surface-2); color:var(--ink)}
.nav-link svg{transition:transform .22s}
.nav-item.open .nav-link svg{transform:rotate(180deg)}
.mega{
  position:absolute; top:calc(100% + 10px); left:-12px; width:520px; padding:20px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l);
  box-shadow:var(--shadow-lift); display:grid; grid-template-columns:1fr 1fr; gap:4px 18px;
  opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .2s, transform .2s, visibility .2s;
}
.nav-item.open .mega{opacity:1; visibility:visible; transform:translateY(0)}
.mega.mega-sm{width:340px}
.mega-h{grid-column:1/-1; font-family:var(--mono); font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--faint); padding:0 8px 8px}
.mega a{display:block; padding:8px 10px; border-radius:var(--r-s); text-decoration:none; font-size:14px; color:var(--ink-2); transition:background .15s,color .15s}
.mega a:hover{background:var(--accent-soft); color:var(--accent-ink)}
.burger{display:none; background:none; border:1px solid var(--line-2); border-radius:var(--r-s); padding:8px 10px; cursor:pointer; color:var(--ink)}
@media (max-width:920px){.nav-links{display:none} .burger{display:block; margin-left:auto}}
@media (max-width:520px){header.nav .nav-cta{display:none}}
.mobile-menu{display:none; border-top:1px solid var(--line); background:var(--surface); padding:14px 20px 22px}
.mobile-menu.show{display:block}
.mobile-menu a{display:block; padding:11px 4px; text-decoration:none; font-weight:500; border-bottom:1px solid var(--line); font-size:15.5px}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--body); font-size:15px; font-weight:600; text-decoration:none;
  padding:13px 20px; border-radius:8px; border:1px solid transparent; cursor:pointer; letter-spacing:-.005em;
  transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .2s, background .2s, color .2s, border-color .2s;
}
.btn svg{transition:transform .22s cubic-bezier(.2,.8,.3,1)}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:var(--btn-bg); color:var(--btn-fg); box-shadow:0 1px 2px rgba(12,31,39,.14)}
.btn-primary:hover{background:var(--btn-bg-h); transform:translateY(-1px); box-shadow:0 4px 14px -4px rgba(12,31,39,.28)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:transparent; border-color:var(--line-2); color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink-2); background:var(--surface-2); transform:translateY(-1px)}
.btn-sm{padding:10px 17px; font-size:14px}
.btn.is-loading{pointer-events:none; opacity:.72}
.btn.is-loading svg{animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.nav-cta{margin-left:10px}
.link-arrow{
  display:inline-flex; align-items:center; gap:9px; font-size:15px; font-weight:600; color:var(--ink);
  text-decoration:none; padding:6px 2px; border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s, gap .2s;
}
.link-arrow:hover{color:var(--accent-deep); border-bottom-color:color-mix(in srgb,var(--accent) 50%,transparent); gap:13px}

/* ============ HERO ============ */
.hero{padding:54px 0 68px; position:relative; overflow:hidden}
@media (max-width:820px){.hero{padding:40px 0 58px}}
/* the square field */
.hero-field{
  position:absolute; inset:-1px; z-index:0; pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(94% 72% at 64% 26%, #000 6%, transparent 76%);
  -webkit-mask-image:radial-gradient(94% 72% at 64% 26%, #000 6%, transparent 76%);
}
.hero-aura{
  position:absolute; z-index:0; pointer-events:none; right:-10%; top:-24%; width:74%; height:120%;
  background:radial-gradient(42% 38% at 54% 40%, var(--aura-a), transparent 72%),
             radial-gradient(30% 26% at 66% 74%, var(--aura-b), transparent 74%);
  filter:blur(8px);
}
.hero > .wrap{position:relative; z-index:1}
.hero-top{display:grid; grid-template-columns:1.02fr .98fr; gap:52px; align-items:center}
@media (max-width:1000px){.hero-top{grid-template-columns:1fr; gap:34px; align-items:start}}
.hero-copy > *{opacity:0; animation:up .75s cubic-bezier(.2,.75,.28,1) forwards}
.hero-copy > *:nth-child(1){animation-delay:.05s}
.hero-copy > *:nth-child(2){animation-delay:.13s}
.hero-copy > *:nth-child(3){animation-delay:.21s}
.hero-copy > *:nth-child(4){animation-delay:.29s}
.hero-copy > *:nth-child(5){animation-delay:.37s}
.hero-copy > *:nth-child(6){animation-delay:.45s}
@keyframes up{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}
h1.hero-h{font-size:clamp(36px,4.3vw,56px); font-weight:800; letter-spacing:-.04em; line-height:1.02; margin:18px 0 0; max-width:13ch}

/* ---- deploy console: a terminal is dark by nature, so it uses the page's single black ---- */
.hero-term{opacity:0; animation:up .8s cubic-bezier(.2,.75,.28,1) .3s forwards}
.console{
  background:var(--band); border:1px solid var(--band-line); border-radius:14px;
  box-shadow:var(--shadow-lift); overflow:hidden; font-family:var(--mono); color:var(--band-ink);
}
.console-bar{
  display:flex; align-items:center; gap:9px; padding:12px 16px; border-bottom:1px solid var(--band-line);
  font-size:11px; letter-spacing:.05em; color:var(--band-muted);
}
.dot3{display:flex; gap:6px; margin-right:6px}
.dot3 i{width:9px; height:9px; border-radius:50%; background:var(--band-line)}
.dot3 i:nth-child(1){background:#C0552E} .dot3 i:nth-child(2){background:#C1922F} .dot3 i:nth-child(3){background:var(--accent)}
.console-body{padding:18px 18px 20px; font-size:12.5px; line-height:2.05; min-height:238px}
.termline{opacity:0; animation:clIn .34s ease forwards; white-space:nowrap}
@keyframes clIn{from{opacity:0; transform:translateX(-6px)}to{opacity:1; transform:none}}
.termline .d{color:var(--band-muted)}
.termline .ok{color:var(--accent); font-weight:600}
.caret{display:inline-block; width:8px; height:14px; background:var(--accent); vertical-align:-2px; animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.console-foot{
  border-top:1px solid var(--band-line); padding:14px 18px; display:flex; align-items:center; gap:12px;
  background:rgba(255,255,255,.02);
}
.avatar{
  width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--accent); color:#04231F; font-family:var(--display); font-weight:800; font-size:14px;
}
.console-foot .nm{font-family:var(--body); font-size:14px; font-weight:600; line-height:1.3}
.console-foot .rl{font-size:10.5px; color:var(--band-muted); letter-spacing:.04em; margin-top:2px}
.pill-live{
  margin-left:auto; font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent); border-radius:100px; padding:4px 10px;
  display:flex; align-items:center; gap:6px; white-space:nowrap;
}
.pill-live i{width:6px; height:6px; border-radius:50%; background:var(--accent); animation:livedot 1.9s ease-in-out infinite}
@keyframes livedot{0%,100%{opacity:1}50%{opacity:.4}}
@media (max-width:560px){.console-body{font-size:11px; min-height:214px} .console-foot .rl{display:none}}
h1.hero-h .dot{color:var(--accent)}
.hero-sub{margin-top:22px; font-family:var(--display); font-weight:500; font-size:clamp(19px,2vw,24px); line-height:1.3; letter-spacing:-.02em; color:var(--ink-2)}
.hero-body{margin-top:20px; font-size:17px; line-height:1.6; color:var(--muted); max-width:48ch}
.hero-body b{color:var(--ink); font-weight:600}
.hero-cta{display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:26px}
.hero-micro{margin-top:16px; font-family:var(--mono); font-size:12px; color:var(--faint)}

/* ---- the race: x-axis is the CALENDAR, shared by both lanes ---- */
.race{
  margin-top:44px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-l); padding:26px 28px 22px; box-shadow:var(--shadow);
  opacity:0; animation:up .8s cubic-bezier(.2,.75,.28,1) .54s forwards;
}
@media (max-width:600px){.race{padding:20px 16px 16px; margin-top:36px}}
.race-head{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap}
.race-head .t{font-family:var(--display); font-weight:700; font-size:17px; letter-spacing:-.02em}
.race-head .s{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-left:auto; font-variant-numeric:tabular-nums}
.ruler{position:relative; height:18px; margin:16px 0 2px}
.ruler .tk{position:absolute; top:0; transform:translateX(-50%); font-family:var(--mono); font-size:9.5px; letter-spacing:.09em; color:var(--faint); white-space:nowrap}
.ruler .tk::after{content:""; position:absolute; left:50%; top:12px; width:1px; height:5px; background:var(--line-2)}

.lane{display:grid; grid-template-columns:152px 1fr 96px; gap:16px; align-items:center; padding:9px 0}
@media (max-width:760px){.lane{grid-template-columns:1fr; gap:8px; padding:12px 0}}
.lane-name .n{font-family:var(--display); font-weight:700; font-size:15.5px; letter-spacing:-.01em; line-height:1.2}
.lane-name .k{font-family:var(--mono); font-size:9.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--faint); margin-top:4px}
.lane-track{position:relative; height:46px; border-radius:8px; background:var(--surface-2)}
.segs{position:absolute; inset:0; display:flex; border-radius:8px; overflow:hidden}
.segs.lit{clip-path:inset(0 100% 0 0)}
.seg{
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase;
  border-right:1px solid var(--surface); white-space:nowrap; padding:0 4px;
}
.seg:last-child{border-right:0}
/* not-yet-reached: the plan, drawn as a whisper */
.segs.base .seg{opacity:.55; background:var(--race-rest); color:transparent}
.segs.base .seg.wait{background:transparent}
/* reached: work is neutral (someone is busy), clay marks ONLY the waiting */
.segs.lit .seg.work{background:var(--race-work); color:var(--race-work-ink)}
.segs.lit .seg.own{background:var(--accent-soft); color:var(--accent-ink)}
.segs.lit .seg.wait{
  background-color:color-mix(in srgb,var(--signal) 9%,transparent);
  background-image:radial-gradient(color-mix(in srgb,var(--signal) 55%,transparent) 1px, transparent 1px);
  background-size:6px 6px; background-position:1px 1px;
  box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--signal) 45%,transparent);
  color:var(--signal);
}
.lane-b .lane-track{background:transparent; border:1px dashed var(--line-2)}
.lane-b .work-zone{
  position:absolute; left:0; top:0; bottom:0; width:var(--split,33.333%); min-width:3px;
}
.free-zone .fz-short{display:none}
.lane-b .free-zone{
  position:absolute; right:0; top:0; bottom:0; left:var(--split,33.333%);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:0 8px;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint);
}
.playhead{position:absolute; top:-7px; bottom:-7px; width:2px; background:var(--ink); opacity:.5; border-radius:2px; pointer-events:none}
.playhead::before{content:""; position:absolute; top:0; left:-3px; width:8px; height:8px; border-radius:50%; background:var(--ink)}
.flag{
  position:absolute; top:50%; transform:translateY(-50%) scale(.4); opacity:0; z-index:2;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.11em; text-transform:uppercase; font-weight:600;
  background:var(--accent); color:var(--on-accent); border-radius:100px; padding:5px 11px; white-space:nowrap;
  transition:opacity .3s, transform .45s cubic-bezier(.2,1.6,.4,1);
}
.flag.on{opacity:1; transform:translateY(-50%) scale(1)}
#flagA{right:8px; transform-origin:right center}
.lane-track.shipped .segs .seg:last-child{color:transparent}
#flagB{left:calc(var(--split,33.333%) + 9px); transform-origin:left center}
.flag.clay{background:var(--signal); color:#fff}
.lane-out{font-family:var(--mono); font-size:11px; text-align:right; color:var(--faint); letter-spacing:.06em; text-transform:uppercase}
@media (max-width:760px){.lane-out{text-align:left}}
.lane-out b{display:block; font-family:var(--display); font-size:24px; letter-spacing:-.03em; line-height:1.1; font-variant-numeric:tabular-nums}
.lane-a .lane-out b{color:var(--signal)}
.lane-b .lane-out b{color:var(--accent-deep)}
.race-foot{
  margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:8px 20px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11px; color:var(--muted); min-height:20px;
}
.race-foot .key{display:inline-flex; align-items:center; gap:7px}
.race-foot .sw{width:14px; height:10px; border-radius:2px; flex:none}
.race-foot .sw.w{background:var(--race-work); border:1px solid var(--line-2)}
.race-foot .sw.h{
  background-color:color-mix(in srgb,var(--signal) 12%,transparent);
  background-image:radial-gradient(color-mix(in srgb,var(--signal) 65%,transparent) 1px,transparent 1px);
  background-size:5px 5px; border:1px solid color-mix(in srgb,var(--signal) 40%,transparent);
}
.race-foot .sw.o{background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 48%,transparent)}
.race-status{margin-left:auto; color:var(--ink-2); text-align:right}
.race-status b{font-weight:600; color:var(--ink)}
@media (max-width:860px){.race-status{margin-left:0; width:100%; text-align:left}}

/* ============ TALK MODAL ============ */
.modal[hidden]{display:none}
.modal{position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:20px}
.modal-scrim{position:absolute; inset:0; background:rgba(6,18,23,.62); backdrop-filter:blur(3px); animation:fade .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-card{
  position:relative; width:100%; max-width:520px; max-height:calc(100vh - 40px); overflow-y:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow-lift); padding:28px 28px 26px; animation:pop .28s cubic-bezier(.2,.9,.3,1);
}
@keyframes pop{from{opacity:0; transform:translateY(14px) scale(.98)}to{opacity:1; transform:none}}
.modal-x{
  position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%;
  border:1px solid var(--line); background:var(--surface); color:var(--muted); cursor:pointer;
  font-size:18px; line-height:1; display:grid; place-items:center; transition:color .2s, border-color .2s;
}
.modal-x:hover{color:var(--ink); border-color:var(--line-2)}
.modal-card h3{font-size:24px; margin:14px 0 8px}
.modal-card .sub{font-size:15px; color:var(--muted); line-height:1.55}
.talk-choice{display:flex; flex-direction:column; gap:12px; margin-top:22px}
.talk-opt{
  display:flex; align-items:flex-start; gap:14px; text-align:left; width:100%; cursor:pointer;
  padding:18px; border-radius:12px; border:1px solid var(--line); background:var(--surface);
  font-family:var(--body); transition:border-color .2s, transform .2s, background .2s;
}
.talk-opt:hover{border-color:var(--accent); transform:translateY(-2px); background:var(--surface-2)}
.talk-opt .ic{width:38px; height:38px; border-radius:10px; flex:none; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-ink)}
.talk-opt .tt{display:block; font-family:var(--display); font-weight:700; font-size:16.5px; color:var(--ink); letter-spacing:-.01em}
.talk-opt .ds{display:block; font-size:13.5px; color:var(--muted); margin-top:4px; line-height:1.45}
.talk-form{margin-top:22px; display:flex; flex-direction:column; gap:14px}
.fld label{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:6px}
.fld input,.fld textarea{
  width:100%; font-family:var(--body); font-size:15px; color:var(--ink); background:var(--surface);
  border:1px solid var(--line-2); border-radius:8px; padding:11px 13px; transition:border-color .2s;
}
.fld input:focus,.fld textarea:focus{outline:none; border-color:var(--accent)}
.fld textarea{resize:vertical; min-height:92px; line-height:1.5}
.fld .hint{font-size:12px; color:var(--faint); margin-top:5px}
.fld-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:520px){.fld-row{grid-template-columns:1fr}}
.hp{position:absolute; left:-9999px; opacity:0; height:0; width:0}
.talk-back{background:none; border:0; cursor:pointer; font-family:var(--body); font-size:14px; color:var(--muted); padding:6px 0; text-align:left}
.talk-back:hover{color:var(--accent-deep)}
.talk-note{font-family:var(--mono); font-size:11px; color:var(--faint); text-align:center}
.talk-msg{padding:14px; border-radius:10px; font-size:14.5px; line-height:1.5; display:none}
.talk-msg.ok{display:block; background:var(--accent-soft); color:var(--accent-ink)}
.talk-msg.bad{display:block; background:var(--signal-soft); color:var(--signal)}

/* ============ SECTIONS ============ */
.sec{padding:92px 0; position:relative}
.sec + .sec{border-top:1px solid var(--line)}
@media (max-width:700px){.sec{padding:60px 0}}
.sec-head{max-width:74ch}
.sec-head h2{font-size:clamp(30px,3.6vw,45px); margin:16px 0 0}
.sec-head .lede{margin-top:18px}

.stats{display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:var(--r-l); background:var(--surface); overflow:hidden}
.stat{padding:26px 24px; border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat .n{font-family:var(--display); font-size:38px; font-weight:800; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums}
.stat .n small{font-size:22px; color:var(--accent-deep)}
.stat .l{margin-top:8px; font-size:13.5px; color:var(--muted); line-height:1.45}
@media (max-width:820px){.stats{grid-template-columns:1fr 1fr} .stat:nth-child(2){border-right:0} .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}}

.marquee-lbl{text-align:center; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-bottom:22px}
.marquee{overflow:hidden; position:relative; mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex; gap:12px; width:max-content; animation:slide 44s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.chip{font-family:var(--mono); font-size:13px; font-weight:500; color:var(--ink-2); white-space:nowrap; border:1px solid var(--line); background:var(--surface); border-radius:100px; padding:9px 18px}

.contrast{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:44px}
@media (max-width:820px){.contrast{grid-template-columns:1fr}}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); padding:28px; transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s, border-color .3s}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--line-2)}
.card.neg{border-color:color-mix(in srgb,var(--signal) 30%,var(--line))}
.card.pos{border-color:color-mix(in srgb,var(--accent) 36%,var(--line))}
.card-tag{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; display:inline-flex; padding:5px 11px; border-radius:100px; margin-bottom:16px}
.card.neg .card-tag{background:var(--signal-soft); color:var(--signal)}
.card.pos .card-tag{background:var(--accent-soft); color:var(--accent-ink)}
.card h3{font-size:22px; margin-bottom:14px}
.tick{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px}
.tick li{display:flex; gap:11px; font-size:15.5px; color:var(--ink-2); line-height:1.5}
.tick li svg{flex:none; margin-top:4px}

.math-wrap{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:44px; align-items:stretch}
.net-panel{display:flex; flex-direction:column}
.net-panel .net-metrics{margin-top:auto; padding-top:16px}
@media (max-width:900px){.math-wrap{grid-template-columns:1fr}}
.net-panel{border:1px solid var(--line); border-radius:var(--r-l); padding:24px; background:var(--surface)}
.net-panel.is-neg{border-color:color-mix(in srgb,var(--signal) 30%,var(--line))}
.net-panel.is-pos{border-color:color-mix(in srgb,var(--accent) 36%,var(--line))}
.net-panel h3{font-size:19px}
.net-panel .sub{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-top:6px}
.net-svg{width:100%; height:300px; display:block; margin-top:8px}
.net-svg .edge-base{stroke:color-mix(in srgb,var(--signal) 26%,transparent); stroke-width:1}
/* traffic never stops on the six-role chain */
.net-svg .edge{stroke:var(--signal); stroke-width:1.4; opacity:0; stroke-dasharray:5 26; stroke-linecap:round}
.net-svg.drawn .edge{opacity:.8; animation:chatter 2.1s linear infinite}
@keyframes chatter{from{stroke-dashoffset:31} to{stroke-dashoffset:0}}
/* one line, one direction, one arrival */
.net-svg .edge-rail{stroke:color-mix(in srgb,var(--accent) 34%,transparent); stroke-width:1.6}
.net-svg .edge-pos{stroke:var(--accent); stroke-width:2.4; stroke-linecap:round; stroke-dasharray:16 86; opacity:0}
.net-svg.drawn .edge-pos{opacity:1; animation:deliver 2.8s cubic-bezier(.5,0,.5,1) infinite}
@keyframes deliver{from{stroke-dashoffset:102} to{stroke-dashoffset:0}}
.net-svg .fde-ring{transition:none}
.net-svg.drawn .fde-ring{animation:landed 2.8s ease-out infinite}
@keyframes landed{0%,72%{stroke-width:2; opacity:.75}84%{stroke-width:3.4; opacity:1}100%{stroke-width:2; opacity:.75}}
.net-svg.drawn .fde-pulse{animation:landedPulse 2.8s ease-out infinite}
@keyframes landedPulse{0%,74%{r:22; opacity:0}86%{opacity:.5}100%{r:52; opacity:0}}
@media (prefers-reduced-motion:reduce){
  .net-svg .edge,.net-svg .edge-pos{opacity:.7; animation:none; stroke-dasharray:none}
}
.node-g{cursor:pointer}
.node-g circle.body{transition:fill .25s, stroke .25s}
.node-g:hover circle.body,.node-g:focus circle.body{fill:var(--signal-soft); stroke:var(--signal)}
.node-g text{font-family:var(--mono); font-size:9.5px; letter-spacing:.05em; fill:var(--muted); text-anchor:middle; pointer-events:none; text-transform:uppercase}
.node-g:hover text{fill:var(--ink)}
.net-readout{height:94px; display:flex; align-items:center; margin-top:6px; padding:12px 14px; border-radius:var(--r-m); background:var(--surface-2); border:1px solid var(--line); font-size:14px; color:var(--muted); line-height:1.5}
.net-readout p{margin:0}
.net-readout b{color:var(--ink); font-weight:600}
.net-metrics{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap}
.metric{flex:1; min-width:112px; border:1px solid var(--line); border-radius:var(--r-m); padding:13px 14px; background:var(--surface-2)}
.metric .v{font-family:var(--display); font-size:27px; font-weight:800; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums}
.metric.neg .v{color:var(--signal)} .metric.pos .v{color:var(--accent-deep)}
.metric .k{font-family:var(--mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--faint); margin-top:7px}

/* ---- evidence ---- */
.evidence{margin-top:36px; border:1px solid var(--line); border-radius:var(--r-l); background:var(--surface); overflow:hidden}
.ev-head{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; padding:24px 26px 20px}
.ev-note{margin-left:auto; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
.ev-grid{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line)}
@media (max-width:840px){.ev-grid{grid-template-columns:1fr}}
.ev{
  padding:24px 26px 20px; border-right:1px solid var(--line); min-width:0;
  display:flex; flex-direction:column; gap:10px;
}
.ev:last-child{border-right:0}
@media (max-width:840px){.ev{border-right:0; border-bottom:1px solid var(--line)} .ev:last-child{border-bottom:0}}
.ev .v{font-family:var(--display); font-size:46px; font-weight:800; letter-spacing:-.045em; line-height:.95; color:var(--signal); font-variant-numeric:tabular-nums}
.ev .ev-claim{font-size:14.5px; color:var(--ink-2); line-height:1.5}
.ev .ev-claim b{font-weight:600; color:var(--ink)}
.ev .src{
  margin-top:auto; padding-top:12px; font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint); display:flex; align-items:center; gap:6px;
}
.ev-turn{padding:22px 26px; border-top:1px solid var(--line); background:var(--accent-soft); font-size:16px; color:var(--accent-ink); line-height:1.6}
.ev-turn b{font-weight:700}
.same-note{margin-top:28px; text-align:center; padding:18px 14px 16px; border:1px dashed var(--line-2); border-radius:var(--r-m)}
.tools-row{display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:16px}
.tools-row .lbl{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); width:100%; margin-bottom:4px}
.tool{font-family:var(--mono); font-size:12px; padding:5px 10px; border-radius:var(--r-s); background:var(--surface); border:1px solid var(--line); color:var(--ink-2)}
.same-note p{font-family:var(--mono); font-size:12.5px; color:var(--muted)}
.same-note b{color:var(--accent-deep)}

.work-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px}
@media (max-width:900px){.work-grid{grid-template-columns:1fr}}
.work{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden; display:flex; flex-direction:column; transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s, border-color .3s}
.work:hover{transform:translateY(-6px); box-shadow:var(--shadow-lift); border-color:var(--accent)}
.work-top{height:130px; position:relative; overflow:hidden; border-bottom:1px solid var(--line); background:var(--surface-2)}
.work-top canvas{position:absolute; inset:0; width:100%; height:100%}
.work-body{padding:22px; display:flex; flex-direction:column; gap:12px; flex:1}
.work-ind{font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--accent-deep)}
.work h3{font-size:20px}
.work p{font-size:15px; color:var(--muted); line-height:1.55}
.stack{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:8px}
.stack span{font-family:var(--mono); font-size:11px; padding:4px 9px; border-radius:var(--r-s); background:var(--surface-2); border:1px solid var(--line); color:var(--ink-2)}

.quotes{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:44px}
@media (max-width:820px){.quotes{grid-template-columns:1fr}}
.quote{margin:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); padding:26px; display:flex; flex-direction:column; gap:16px; transition:border-color .3s, transform .3s}
.quote:hover{border-color:var(--accent); transform:translateY(-3px)}
.quote .mark{font-family:var(--display); font-size:42px; line-height:.6; color:var(--accent); opacity:.32; height:20px}
.quote p{font-size:16.5px; line-height:1.6; color:var(--ink-2)}
.quote footer{display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:6px}
.quote .av{width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-ink); font-family:var(--display); font-weight:800; font-size:14px}
.quote .who{font-size:14.5px; font-weight:600; line-height:1.3}
.quote .role{font-family:var(--mono); font-size:11px; color:var(--faint)}

.steps{display:grid; grid-template-columns:repeat(3,1fr); margin-top:48px; border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden; background:var(--surface)}
@media (max-width:860px){.steps{grid-template-columns:1fr}}
.step{padding:30px 26px; border-right:1px solid var(--line)}
.step:last-child{border-right:0}
@media (max-width:860px){.step{border-right:0; border-bottom:1px solid var(--line)} .step:last-child{border-bottom:0}}
.step-n{font-family:var(--mono); font-size:12px; font-weight:600; color:var(--accent-deep); letter-spacing:.14em}
.step h3{font-size:20px; margin:14px 0 10px}
.step p{font-size:15px; color:var(--muted); line-height:1.55}
.step-when{margin-top:16px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-deep); border-top:1px solid var(--line); padding-top:12px}

.faq{margin-top:40px; border-top:1px solid var(--line)}
.q{border-bottom:1px solid var(--line)}
.q button{width:100%; display:flex; align-items:center; gap:18px; text-align:left; background:none; border:0; cursor:pointer; padding:24px 4px; font-family:var(--display); font-weight:600; font-size:19px; color:var(--ink); letter-spacing:-.02em}
.q button:hover{color:var(--accent-deep)}
.q .ico{margin-left:auto; flex:none; width:26px; height:26px; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center; transition:transform .3s, background .3s, border-color .3s, color .3s}
.q.open .ico{transform:rotate(45deg); background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.q .a{max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.3,.8,.3,1)}
.q .a p{padding:0 60px 26px 4px; color:var(--muted); font-size:16px; line-height:1.65; max-width:78ch}

/* ---- THE one dark moment ---- */
.band{background:var(--band); color:var(--band-ink); border-radius:var(--r-l); padding:56px 48px; position:relative; overflow:hidden}
@media (max-width:860px){.band{padding:40px 26px}}
.band::before{content:""; position:absolute; inset:auto -20% -60% 42%; height:300px; background:radial-gradient(50% 50% at 50% 50%, color-mix(in srgb,var(--accent) 30%,transparent), transparent 70%)}
.band-in{position:relative; display:grid; grid-template-columns:1.2fr .8fr; gap:34px; align-items:center}
@media (max-width:860px){.band-in{grid-template-columns:1fr}}
.band h2{font-size:clamp(28px,3.3vw,41px); margin-top:16px}
.band p{color:var(--band-muted); margin-top:16px; font-size:17px; max-width:52ch}
.band .eyebrow{color:var(--accent)}
.band-actions{display:flex; flex-direction:column; gap:12px}
.band .btn-primary{background:var(--accent); color:#04231F}
.band .btn-ghost{background:transparent; border-color:var(--band-line); color:var(--band-ink)}
.band .btn-ghost:hover{border-color:var(--accent); color:var(--accent)}

footer.ft{padding:72px 0 40px; border-top:1px solid var(--line); margin-top:92px}
.ft-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:36px}
@media (max-width:900px){.ft-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ft-grid{grid-template-columns:1fr}}
.ft h4,.ft h3{font-family:var(--mono); font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--faint); font-weight:600; margin-bottom:16px}
.ft ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.ft a{font-size:14.5px; color:var(--muted); text-decoration:none; transition:color .18s}
.ft a:hover{color:var(--accent-deep)}
.office{font-size:14px; color:var(--muted); line-height:1.55; margin-bottom:18px}
.office b{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); margin-bottom:6px}
.office a{color:var(--accent-deep); font-weight:500}
.ft-bottom{margin-top:52px; padding-top:24px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:16px; align-items:center; font-size:13.5px; color:var(--faint)}
.ft-social{margin-left:auto; display:flex; gap:8px}
.ft-social a{width:34px; height:34px; border-radius:var(--r-s); border:1px solid var(--line); display:grid; place-items:center; color:var(--muted); transition:border-color .2s,color .2s}
.ft-social a:hover{border-color:var(--accent); color:var(--accent-deep)}

/* ============================================================
   RESPONSIVE OVERRIDES: last in the cascade on purpose.
   These beat the base rules by source order; putting them
   earlier lets a later same-specificity rule silently win.
   ============================================================ */
@media (max-width:860px){
  .lane-track .seg{font-size:0; letter-spacing:0; padding:0}
  .lane.lane-b .lane-track .free-zone{justify-content:flex-end; padding-right:12px; font-size:9.5px; letter-spacing:.09em}
  .free-zone .fz-long{display:none}
  .free-zone .fz-short{display:inline}
}
@media (max-width:760px){
  .lane{grid-template-columns:1fr; gap:8px; padding:12px 0}
  .lane .lane-out{display:flex; align-items:baseline; gap:8px; text-align:left}
  .lane .lane-out b{display:inline; font-size:21px}
  .race-head .s{margin-left:0; width:100%}
}
@media (max-width:520px){
  header.nav .nav-cta{display:none}
}

/* ============================================================
   INTERNAL PAGES — breadcrumb, page hero, service grids
   ============================================================ */
.crumbs{font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--faint); padding:26px 0 0}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--accent-deep)}
.crumbs span{margin:0 8px; opacity:.6}

.page-hero{padding:34px 0 66px; position:relative; overflow:hidden}
.page-hero .hero-field{position:absolute; inset:-1px; z-index:0; pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(78% 76% at 26% 16%, #000 0%, transparent 72%);
  -webkit-mask-image:radial-gradient(78% 76% at 26% 16%, #000 0%, transparent 72%);}
.page-hero > .wrap{position:relative; z-index:1}
.page-hero h1{font-size:clamp(34px,4.4vw,56px); font-weight:800; letter-spacing:-.04em; line-height:1.02; margin:16px 0 0; max-width:16ch}
.page-hero .lede{margin-top:20px; font-size:19px}
.page-hero .hero-cta{display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:30px}

.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:36px}
@media (max-width:940px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.svc-grid{grid-template-columns:1fr}}
.svc{display:flex; flex-direction:column; gap:10px; padding:24px; text-decoration:none;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  transition:transform .25s cubic-bezier(.2,.8,.3,1), border-color .25s, box-shadow .25s}
.svc:hover{transform:translateY(-4px); border-color:var(--accent); box-shadow:var(--shadow)}
.svc .k{font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--accent-deep)}
.svc h3{font-size:19px; letter-spacing:-.02em}
.svc p{font-size:14.5px; color:var(--muted); line-height:1.55}
.svc .go{margin-top:auto; padding-top:10px; font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:7px; transition:color .2s, gap .2s}
.svc:hover .go{color:var(--accent-deep); gap:11px}

.split{display:grid; grid-template-columns:1fr 1fr; gap:44px; margin-top:40px; align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr; gap:28px}}
.numlist{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:22px; counter-reset:n}
.numlist li{display:grid; grid-template-columns:38px 1fr; gap:16px; align-items:start}
.numlist li::before{counter-increment:n; content:counter(n,decimal-leading-zero);
  font-family:var(--mono); font-size:12px; font-weight:600; color:var(--accent-deep);
  border:1px solid var(--line); border-radius:8px; padding:7px 0; text-align:center; background:var(--surface)}
.numlist h4{font-size:17px; letter-spacing:-.01em}
.numlist p{font-size:15px; color:var(--muted); line-height:1.55; margin-top:5px}
.fit-note{margin-top:14px; font-family:var(--mono); font-size:11.5px; color:var(--faint)}

/* ============================================================
   INTERNAL PAGE TEMPLATE v2
   Deliberately NOT the homepage: compact dark masthead + hard
   facts up front, a sticky rail that keeps booking in reach,
   and one signature device per service.
   ============================================================ */
.pg-head{background:var(--band); color:var(--band-ink); position:relative; overflow:hidden}
.pg-head::after{content:""; position:absolute; inset:auto -10% -70% 45%; height:280px;
  background:radial-gradient(50% 50% at 50% 50%, color-mix(in srgb,var(--accent) 26%,transparent), transparent 70%)}
.pg-head > .wrap{position:relative; z-index:1; padding-top:26px; padding-bottom:34px}
.pg-head .crumbs{color:var(--band-muted); padding-top:0}
.pg-head .crumbs a{color:var(--band-muted)}
.pg-head .crumbs a:hover{color:var(--accent)}
.pg-head .eyebrow{color:var(--accent); margin-top:22px}
.pg-head h1{font-size:clamp(32px,3.9vw,48px); font-weight:800; letter-spacing:-.04em; line-height:1.03; margin:14px 0 0; max-width:19ch}
.pg-head .defn{margin-top:16px; font-size:18px; line-height:1.6; color:var(--band-muted); max-width:62ch}
.pg-head .defn b{color:var(--band-ink); font-weight:600}

.factstrip{display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:30px;
  border:1px solid var(--band-line); border-radius:12px; overflow:hidden; background:rgba(255,255,255,.03)}
@media (max-width:900px){.factstrip{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.factstrip{grid-template-columns:1fr}}
.fact{padding:16px 18px; border-right:1px solid var(--band-line)}
.fact:last-child{border-right:0}
@media (max-width:900px){.fact{border-bottom:1px solid var(--band-line)}}
.fact .k{font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--band-muted)}
.fact .v{font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:-.015em; margin-top:6px; color:var(--band-ink)}

.pg-layout{display:grid; grid-template-columns:216px minmax(0,1fr); gap:56px; align-items:start; padding:56px 0 20px}
@media (max-width:1000px){.pg-layout{grid-template-columns:minmax(0,1fr); gap:0; padding-top:40px}}
.rail{position:sticky; top:92px}
@media (max-width:1000px){.rail{display:none}}
.rail h4,.rail .rail-h{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-bottom:14px}
.rail ul{list-style:none; padding:0; margin:0 0 26px; display:flex; flex-direction:column; gap:2px; border-left:1px solid var(--line)}
.rail ul a{display:block; padding:8px 0 8px 16px; margin-left:-1px; border-left:2px solid transparent;
  font-size:14px; color:var(--muted); text-decoration:none; transition:color .2s, border-color .2s}
.rail ul a:hover{color:var(--ink)}
.rail ul a.on{color:var(--accent-deep); border-left-color:var(--accent); font-weight:600}
.rail-book .btn-primary{color:var(--btn-fg)}
.rail-book{border:1px solid var(--line); border-radius:12px; padding:16px; background:var(--surface)}
.rail-book p{font-size:13px; color:var(--muted); line-height:1.5; margin-bottom:12px}
.rail-book .btn{width:100%; font-size:14px; padding:11px 14px}
.rail-book .note{font-family:var(--mono); font-size:10px; color:var(--faint); text-align:center; margin-top:9px}

.pg-body{min-width:0}
.pg-body > section{padding:0 0 62px; scroll-margin-top:96px}
.pg-body h2{font-size:clamp(25px,2.7vw,33px); letter-spacing:-.03em}
.pg-body .lede{font-size:17px; margin-top:14px}
.pg-body .eyebrow{margin-bottom:12px}

/* --- signature device: who owns each job --- */
.own{margin-top:26px; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--surface)}
.own-head{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:0; border-bottom:1px solid var(--line); background:var(--surface-2)}
.own-head div{padding:13px 16px; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}
.own-head div + div{border-left:1px solid var(--line); text-align:center}
.own-row{display:grid; grid-template-columns:1.5fr 1fr 1fr; border-bottom:1px solid var(--line); transition:background .2s}
.own-row:last-child{border-bottom:0}
.own-row:hover{background:var(--surface-2)}
.own-row .job{padding:13px 16px; font-size:14.5px; color:var(--ink-2)}
.own-row .who{padding:13px 10px; border-left:1px solid var(--line); text-align:center; display:flex; align-items:center; justify-content:center}
.chip-role{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 10px; border-radius:100px; background:var(--signal-soft); color:var(--signal); white-space:nowrap}
.chip-one{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 10px; border-radius:100px; background:var(--accent-soft); color:var(--accent-ink); white-space:nowrap;
  opacity:0; transform:scale(.8); transition:opacity .35s, transform .35s cubic-bezier(.2,1.4,.4,1)}
.own.lit .chip-one{opacity:1; transform:none}
.own.lit .own-row:nth-child(1) .chip-one{transition-delay:.05s}
.own.lit .own-row:nth-child(2) .chip-one{transition-delay:.12s}
.own.lit .own-row:nth-child(3) .chip-one{transition-delay:.19s}
.own.lit .own-row:nth-child(4) .chip-one{transition-delay:.26s}
.own.lit .own-row:nth-child(5) .chip-one{transition-delay:.33s}
.own.lit .own-row:nth-child(6) .chip-one{transition-delay:.40s}
.own.lit .own-row:nth-child(7) .chip-one{transition-delay:.47s}
.own.lit .own-row:nth-child(8) .chip-one{transition-delay:.54s}
.own-foot{padding:14px 16px; border-top:1px solid var(--line); background:var(--surface-2);
  font-family:var(--mono); font-size:11.5px; color:var(--muted)}
.own-foot b{color:var(--accent-deep); font-weight:600}
@media (max-width:640px){
  .own-head,.own-row{grid-template-columns:1fr 88px 88px}
  .own-row .job{font-size:13px; padding:11px 12px}
  .chip-role,.chip-one{font-size:9px; padding:4px 7px}
}

/* --- compare engagements --- */
.cmp{margin-top:24px; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--surface)}
.cmp-tabs{display:flex; border-bottom:1px solid var(--line); background:var(--surface-2); overflow-x:auto}
.cmp-tabs button{flex:1; min-width:150px; padding:14px 16px; background:none; border:0; cursor:pointer;
  font-family:var(--body); font-size:14px; font-weight:600; color:var(--muted); white-space:nowrap;
  border-bottom:2px solid transparent; transition:color .2s, border-color .2s, background .2s}
.cmp-tabs button:hover{color:var(--ink); background:var(--surface)}
.cmp-tabs button.on{color:var(--accent-deep); border-bottom-color:var(--accent); background:var(--surface)}
.cmp-body dl{margin:0; display:grid; grid-template-columns:200px 1fr}
@media (max-width:600px){.cmp-body dl{grid-template-columns:1fr}}
.cmp-body dt{padding:14px 18px; font-family:var(--mono); font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--faint); border-bottom:1px solid var(--line); border-right:1px solid var(--line)}
.cmp-body dd{margin:0; padding:14px 18px; font-size:15px; color:var(--ink-2); line-height:1.5; border-bottom:1px solid var(--line)}
@media (max-width:600px){.cmp-body dt{border-right:0; padding-bottom:4px; border-bottom:0} .cmp-body dd{padding-top:0}}
.cmp-body dl > :nth-last-child(-n+2){border-bottom:0}
.cmp-body.swap{opacity:0}
.cmp-body{transition:opacity .18s}

/* ============================================================
   MOTION LAYER — 2026 techniques, not 2015 ones.
   1. Cross-document View Transitions: pages morph, no JS, no SPA.
   2. Scroll-driven animations (animation-timeline): tied to scroll
      position, run off the main thread, no IntersectionObserver.
   3. linear() spring easing instead of cubic-bezier approximations.
   All three degrade to the old behaviour where unsupported.
   ============================================================ */
:root{
  --spring: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%,
            .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%,
            1.015 55%, 1.017 63.9%, 1.001);
  --ease-out: linear(0, .22, .41 12%, .58, .71 24%, .84 32%, .93 42%, .98 54%, 1);
}

@view-transition{ navigation: auto; }
::view-transition-group(root){ animation-duration:.42s; animation-timing-function:var(--ease-out) }
::view-transition-old(root){ animation:vtOut .22s var(--ease-out) both }
::view-transition-new(root){ animation:vtIn .42s var(--ease-out) both }
@keyframes vtOut{to{opacity:0; transform:translateY(-8px)}}
@keyframes vtIn{from{opacity:0; transform:translateY(14px)}}
/* the chrome stays put while the content morphs */
header.nav{view-transition-name:site-nav}
footer.ft{view-transition-name:site-foot}
.pg-head h1{view-transition-name:pg-title}
.pg-head .factstrip{view-transition-name:pg-facts}

@media (prefers-reduced-motion:reduce){ @view-transition{ navigation: none; } }

@supports (animation-timeline: view()){
  /* every internal-page section reveals its own children, no classes needed */
  html.sda .pg-body > section > *{
    animation:sectionIn linear both;
    animation-timeline:view();
    animation-range:entry 1% cover 20%;
  }
  html.sda .pg-body > section > .own,
  html.sda .pg-body > section > .cmp{animation-range:entry 1% cover 14%}

  /* section reveals: scroll-linked, off the main thread */
  html.sda .rv{
    opacity:0; transform:translateY(24px);
    animation:rvScroll linear both;
    animation-timeline:view();
    animation-range:entry 6% cover 22%;
  }
  @keyframes rvScroll{to{opacity:1; transform:none}}
  @keyframes sectionIn{
    from{opacity:0; transform:translateY(26px)}
    to{opacity:1; transform:none}
  }

  /* The matrix owns the timeline, not the chips. A 26px chip has a 26px
     scroll range and would snap; anchored to the panel, each row resolves
     under your thumb and un-resolves if you scroll back. */
  html.sda .own{view-timeline-name:--ownscroll; view-timeline-axis:block}
  html.sda .own .chip-one{
    animation:chipScrub linear both;
    animation-timeline:--ownscroll;
  }
  html.sda .own .chip-role{
    animation:roleFade linear both;
    animation-timeline:--ownscroll;
  }
  html.sda .own-row:nth-child(2) .chip-one, html.sda .own-row:nth-child(2) .chip-role{animation-range:cover 10% cover 32%}
  html.sda .own-row:nth-child(3) .chip-one, html.sda .own-row:nth-child(3) .chip-role{animation-range:cover 14% cover 36%}
  html.sda .own-row:nth-child(4) .chip-one, html.sda .own-row:nth-child(4) .chip-role{animation-range:cover 18% cover 40%}
  html.sda .own-row:nth-child(5) .chip-one, html.sda .own-row:nth-child(5) .chip-role{animation-range:cover 22% cover 44%}
  html.sda .own-row:nth-child(6) .chip-one, html.sda .own-row:nth-child(6) .chip-role{animation-range:cover 26% cover 48%}
  html.sda .own-row:nth-child(7) .chip-one, html.sda .own-row:nth-child(7) .chip-role{animation-range:cover 30% cover 52%}
  html.sda .own-row:nth-child(8) .chip-one, html.sda .own-row:nth-child(8) .chip-role{animation-range:cover 34% cover 56%}
  html.sda .own-row:nth-child(9) .chip-one, html.sda .own-row:nth-child(9) .chip-role{animation-range:cover 38% cover 60%}
  @keyframes chipScrub{
    from{opacity:0; transform:scale(.72) translateX(-8px); filter:blur(2px)}
    to{opacity:1; transform:none; filter:blur(0)}
  }
  @keyframes roleFade{from{opacity:1}to{opacity:.4}}

  @media (prefers-reduced-motion:reduce){
    html.sda .rv, html.sda .own .chip-one, html.sda .own .chip-role,
    html.sda .pg-body > section > *{animation:none; opacity:1; transform:none; filter:none}
  }
}

/* the fact strip is above the fold, so it lands on load, not on scroll */
.factstrip .fact{opacity:0; animation:factIn .6s var(--spring) both}
.factstrip .fact:nth-child(1){animation-delay:.14s}
.factstrip .fact:nth-child(2){animation-delay:.20s}
.factstrip .fact:nth-child(3){animation-delay:.26s}
.factstrip .fact:nth-child(4){animation-delay:.32s}
.factstrip .fact:nth-child(5){animation-delay:.38s}
@keyframes factIn{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
.pg-head h1{animation:factIn .7s var(--spring) .04s both}
.pg-head .defn{animation:factIn .7s var(--spring) .10s both}
.no-js .factstrip .fact,.no-js .pg-head h1,.no-js .pg-head .defn{opacity:1; animation:none}

/* spring easing on the things you touch */
.btn{transition:transform .34s var(--spring), box-shadow .2s, background .2s, color .2s, border-color .2s}
.svc{transition:transform .42s var(--spring), border-color .25s, box-shadow .3s}
.talk-opt{transition:transform .42s var(--spring), border-color .2s, background .2s}
.chip-one{transition:opacity .4s, transform .5s var(--spring)}

/* ============================================================
   FLOW FIGURE — one animated diagram per service page.
   A live current runs the path; each node pulses at the exact
   moment the current reaches it (delay = its position on the line).
   ============================================================ */
.flowfig{margin:30px 0 0; padding:26px 20px 18px; border:1px solid var(--line);
  border-radius:14px; background:var(--surface); overflow:hidden}
.flowfig svg{width:100%; height:auto; display:block; overflow:visible}
.flowfig figcaption{margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--muted); text-align:center}
.flowfig figcaption b{color:var(--accent-deep); font-weight:600}

.ff-rail{stroke:var(--line-2); stroke-width:2; fill:none; stroke-linecap:round}
.ff-flow{stroke:var(--accent); stroke-width:3; fill:none; stroke-linecap:round;
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 55%,transparent))}
.ff-flow.run{animation:ffRun var(--dur,4.2s) linear infinite}
@keyframes ffRun{from{stroke-dashoffset:var(--len)} to{stroke-dashoffset:0}}

.ff-gate{stroke:var(--signal); stroke-width:2.5; stroke-linecap:round; opacity:.75}
.ff-gate-l{fill:var(--signal); font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-anchor:middle; text-transform:uppercase}

.ff-node circle.ring{fill:var(--surface); stroke:var(--line-2); stroke-width:2}
.ff-node circle.core{fill:var(--accent); opacity:.16}
.ff-node.on circle.ring{stroke:var(--accent)}
.ff-node circle.ping{fill:none; stroke:var(--accent); stroke-width:2; opacity:0}
.ff-node.live circle.ping{animation:ffPing var(--dur,4.2s) ease-out infinite; animation-delay:var(--at)}
@keyframes ffPing{0%{r:var(--r); opacity:.75}22%{opacity:.45}42%{r:calc(var(--r) * 2.4); opacity:0}100%{opacity:0}}
.ff-node.live circle.ring{animation:ffLift var(--dur,4.2s) ease-out infinite; animation-delay:var(--at)}
@keyframes ffLift{0%{stroke-width:2}6%{stroke-width:3.4}26%{stroke-width:2}100%{stroke-width:2}}
.ff-label{font-family:var(--mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase;
  fill:var(--muted); text-anchor:middle}
.ff-label.key{fill:var(--ink); font-weight:600}
.ff-sub{font-family:var(--mono); font-size:9px; letter-spacing:.08em; fill:var(--faint); text-anchor:middle}
.ff-owner{font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; text-anchor:middle}
.ff-owner.us{fill:var(--accent-deep)} .ff-owner.you{fill:var(--signal)}
/* Labels that sit beside a node rather than above it set their own anchor. */
.ff-label[text-anchor="end"],.ff-owner[text-anchor="end"],.ff-sub[text-anchor="end"]{text-anchor:end}
.ff-label[text-anchor="start"],.ff-owner[text-anchor="start"],.ff-sub[text-anchor="start"]{text-anchor:start}

@media (prefers-reduced-motion:reduce){
  .ff-flow.run{animation:none; stroke-dashoffset:0; stroke-dasharray:none !important; opacity:.5}
  .ff-node.live circle.ping,.ff-node.live circle.ring{animation:none}
}

.exgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:26px}
@media (max-width:900px){.exgrid{grid-template-columns:1fr}}
.ex{padding:22px; border:1px solid var(--line); border-radius:12px; background:var(--surface); display:flex; flex-direction:column; gap:9px; min-width:0}
.ex .k{font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--accent-deep)}
.ex h4,.ex h3{font-size:17px; letter-spacing:-.015em}
.ex p{font-size:14.5px; color:var(--muted); line-height:1.55}
.ex .out{margin-top:auto; padding-top:10px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11px; color:var(--ink-2)}
.ex .out b{color:var(--accent-deep); font-weight:600}

.stackwrap{margin-top:24px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface)}
.stackrow{display:grid; grid-template-columns:150px minmax(0,1fr); border-bottom:1px solid var(--line)}
.stackrow:last-child{border-bottom:0}
@media (max-width:600px){.stackrow{grid-template-columns:minmax(0,1fr)}}
.stackrow .lbl{padding:16px 18px; font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint); border-right:1px solid var(--line)}
@media (max-width:600px){.stackrow .lbl{border-right:0; padding-bottom:0}}
.stackrow .chips{padding:14px 18px; display:flex; flex-wrap:wrap; gap:7px}
.stackrow .chips span{font-family:var(--mono); font-size:11.5px; padding:5px 10px; border-radius:6px;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink-2)}

.engpick{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:24px}
@media (max-width:820px){.engpick{grid-template-columns:1fr}}
.engpick a{padding:18px; border:1px solid var(--line); border-radius:12px; background:var(--surface);
  text-decoration:none; display:flex; flex-direction:column; gap:7px; min-width:0;
  transition:transform .4s var(--spring), border-color .25s, box-shadow .3s}
.engpick a:hover{transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--shadow)}
.engpick .n{font-family:var(--display); font-weight:700; font-size:16px; color:var(--ink); letter-spacing:-.015em}
.engpick .w{font-size:13.5px; color:var(--muted); line-height:1.5}
.engpick .go{margin-top:auto; padding-top:8px; font-family:var(--mono); font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
.engpick a:hover .go{color:var(--accent-deep)}

/* --- Flow figure on narrow screens ------------------------------------
   Scaling a 900px diagram down to a phone makes the labels unreadable.
   Below 760px the figure keeps its real width and scrolls sideways
   instead, with a hint so nobody misses that there is more to the right. */
.flowfig .ff-hint{display:none; margin:8px 20px 0; font-family:var(--mono);
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
@media (max-width:760px){
  .flowfig{padding-left:0; padding-right:0}
  .flowfig .ff-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding:0 20px; scrollbar-width:thin}
  .flowfig .ff-scroll svg{width:660px; max-width:none}
  .flowfig figcaption{margin-left:20px; margin-right:20px}
  .flowfig .ff-hint{display:block}
}

/* --- Contact page -----------------------------------------------------
   Two choice panels, the message form beside its direct-route column, and
   the office cards. Nothing here is reused elsewhere, so it is scoped by
   its own class names rather than borrowing the service page components. */
.ways{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:26px}
.way{padding:26px; border:1px solid var(--line); border-radius:14px; background:var(--surface);
  display:flex; flex-direction:column; gap:12px; min-width:0}
.way.alt{background:var(--surface-2)}
.way .tag{font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent-deep); align-self:flex-start; padding:5px 9px; border-radius:6px;
  background:var(--accent-soft)}
.way.alt .tag{color:var(--ink-2); background:var(--surface); border:1px solid var(--line)}
.way h3{font-size:22px; letter-spacing:-.02em}
.way p{font-size:15px; color:var(--muted); line-height:1.6}
.way .tick{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px}
.way .tick li{display:flex; gap:9px; align-items:flex-start; font-size:14px; color:var(--ink-2); line-height:1.5}
.way .tick svg{flex:none; margin-top:2px}
.way .go{margin-top:auto; padding-top:8px}
.way .go .btn{width:100%; justify-content:center}

.btn-ghost-ink{background:transparent; color:var(--ink); border:1px solid var(--line-2);
  display:inline-flex; align-items:center; justify-content:center; gap:8px}
.btn-ghost-ink:hover{border-color:var(--ink); background:var(--surface)}

.formwrap{display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:26px; margin-top:26px;
  align-items:start}
.talk-form.page{display:flex; flex-direction:column; gap:16px; padding:26px;
  border:1px solid var(--line); border-radius:14px; background:var(--surface)}
.fld .opt{text-transform:none; letter-spacing:0}
.formside{padding:24px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2)}
.formside .k{font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--faint); margin-bottom:10px}
.formside .big{display:block; font-family:var(--mono); font-size:14px; color:var(--accent-deep);
  text-decoration:none; margin-bottom:6px; word-break:break-all}
.formside .big:hover{text-decoration:underline}
.formside p{font-size:13.5px; color:var(--muted); line-height:1.55; margin-top:12px}
.formside a{color:var(--accent-deep)}

.offices{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:26px}
.office{padding:24px; border:1px solid var(--line); border-radius:14px; background:var(--surface)}
.office .k{font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent-deep)}
.office h3{font-size:19px; letter-spacing:-.015em; margin:6px 0 12px}
.office address{font-style:normal; font-size:14.5px; color:var(--muted); line-height:1.65}
.office .ph{display:inline-block; margin-top:12px; font-family:var(--mono); font-size:13.5px;
  color:var(--accent-deep); text-decoration:none}
.office .ph:hover{text-decoration:underline}
.office .role{margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
  font-size:13px; color:var(--faint); line-height:1.5}

@media (max-width:900px){
  .ways{grid-template-columns:1fr}
  .formwrap{grid-template-columns:minmax(0,1fr)}
  .offices{grid-template-columns:1fr}
}

/* --- Work page --------------------------------------------------------
   Case studies are read one at a time, so they stack full width rather
   than competing in a grid. */
.cases{display:flex; flex-direction:column; gap:20px; margin-top:26px}
.case{padding:28px; border:1px solid var(--line); border-radius:16px; background:var(--surface);
  min-width:0; scroll-margin-top:96px}
.case-h{display:flex; gap:16px; align-items:flex-start}
.case-h .num{font-family:var(--mono); font-size:12px; color:var(--faint); padding-top:4px; flex:none}
.case-h .k{font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent-deep)}
.case-h h3{font-size:24px; letter-spacing:-.02em; margin-top:5px}
.case-lede{margin-top:14px; font-size:16px; line-height:1.6; color:var(--ink-2); max-width:64ch}
.case-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:22px;
  padding-top:22px; border-top:1px solid var(--line)}
.case-grid .cbk{font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--faint); margin-bottom:8px}
.case-grid p{font-size:14px; line-height:1.6; color:var(--muted)}
.case-stack{display:flex; flex-wrap:wrap; gap:7px; margin-top:20px}
.case-stack span{font-family:var(--mono); font-size:11.5px; padding:5px 10px; border-radius:6px;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink-2)}
.quotes.trio{margin-top:26px; grid-template-columns:repeat(3,1fr); gap:16px}
.quotes.trio .quote{padding:22px; border-radius:14px}
.quotes.trio .quote p{font-size:15px}

@media (max-width:1000px){.quotes.trio{grid-template-columns:1fr}}
@media (max-width:820px){.case-grid{grid-template-columns:1fr}}

/* --- Insights ---------------------------------------------------------
   An index of posts, and the reading column on a post itself. */
.postlist{display:flex; flex-direction:column; gap:16px; margin-top:26px}
.post{display:block; padding:26px; border:1px solid var(--line); border-radius:16px;
  background:var(--surface); text-decoration:none; min-width:0;
  transition:transform .4s var(--spring), border-color .25s, box-shadow .3s}
.post:hover{transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--shadow)}
.post .meta{display:flex; flex-wrap:wrap; gap:14px; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--faint)}
.post .meta .cat{color:var(--accent-deep)}
.post h3{font-size:23px; letter-spacing:-.02em; color:var(--ink); margin:10px 0 0; max-width:34ch}
.post p{font-size:15px; line-height:1.6; color:var(--muted); margin-top:10px; max-width:66ch}
.post .go{margin-top:16px; font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint)}
.post:hover .go{color:var(--accent-deep)}

.prose > * + *{margin-top:18px}
.prose h3{font-size:21px; letter-spacing:-.02em; margin-top:34px}
.prose p{font-size:16.5px; line-height:1.72; color:var(--ink-2); max-width:68ch}
.prose ul{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:9px; max-width:66ch}
.prose li{font-size:16px; line-height:1.65; color:var(--ink-2)}
.prose a{color:var(--accent-deep)}
.prose b{font-weight:600; color:var(--ink)}

.pullstat{margin:30px 0; padding:26px 28px; border-left:3px solid var(--accent);
  background:var(--surface); border-radius:0 14px 14px 0; border-top:1px solid var(--line);
  border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
.pullstat .n{font-family:var(--display); font-weight:800; font-size:44px; letter-spacing:-.035em;
  line-height:1; color:var(--ink)}
.pullstat p{margin-top:10px; font-size:16px; line-height:1.6; color:var(--ink-2); max-width:60ch}
.pullstat .src{margin-top:12px; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint)}

.sources{margin-top:22px; padding:22px 24px; border:1px solid var(--line); border-radius:14px;
  background:var(--surface-2)}
.sources h4,.sources h3{font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--faint); font-weight:400}
.sources ol{margin:12px 0 0; padding-left:20px; display:flex; flex-direction:column; gap:10px}
.sources li{font-size:13.5px; line-height:1.55; color:var(--muted)}
.sources a{color:var(--accent-deep); word-break:break-word}

/* --- Hire a Pro role pages -------------------------------------------
   The interview-signal table is the thing that makes these pages worth
   reading, so it gets real structure rather than another bullet list. */
.rolegrid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:26px}
.role{display:flex; flex-direction:column; gap:8px; padding:22px; border:1px solid var(--line);
  border-radius:14px; background:var(--surface); text-decoration:none; min-width:0;
  transition:transform .4s var(--spring), border-color .25s, box-shadow .3s}
.role:hover{transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--shadow)}
.role .k{font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent-deep)}
.role .n{font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:-.02em; color:var(--ink)}
.role .w{font-size:14px; color:var(--muted); line-height:1.55}
.role .go{margin-top:auto; padding-top:8px; font-family:var(--mono); font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
.role:hover .go{color:var(--accent-deep)}

.vet{counter-reset:v; display:flex; flex-direction:column; gap:0; margin-top:26px;
  border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--surface)}
.vet .step{display:grid; grid-template-columns:46px minmax(0,1fr); gap:16px; padding:20px 22px;
  border-bottom:1px solid var(--line)}
.vet .step:last-child{border-bottom:0}
.vet .step::before{counter-increment:v; content:counter(v, decimal-leading-zero);
  font-family:var(--mono); font-size:11px; color:var(--faint); padding-top:3px}
.vet h4,.vet h3{font-size:16px; letter-spacing:-.015em}
.vet p{font-size:14px; color:var(--muted); line-height:1.6; margin-top:6px}
.vet .cut{margin-top:8px; font-family:var(--mono); font-size:11px; color:var(--signal)}

.tells{display:flex; flex-direction:column; gap:14px; margin-top:26px}
.tell{padding:22px; border:1px solid var(--line); border-radius:14px; background:var(--surface)}
.tell .q{font-family:var(--display); font-weight:700; font-size:17px; letter-spacing:-.015em;
  color:var(--ink)}
.tell .pair{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:14px;
  padding-top:14px; border-top:1px solid var(--line)}
.tell .lbl{font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  margin-bottom:7px}
.tell .good .lbl{color:var(--accent-deep)}
.tell .bad .lbl{color:var(--signal)}
.tell .pair p{font-size:14px; line-height:1.6; color:var(--muted)}

@media (max-width:820px){
  .rolegrid{grid-template-columns:1fr}
  .tell .pair{grid-template-columns:1fr}
}
.grouph{margin-top:32px; font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint); font-weight:400}
.grouph:first-of-type{margin-top:26px}
.mega-all{grid-column:1 / -1; margin-top:6px; padding-top:12px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent-deep)}
.case-go{display:inline-block; margin-top:18px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent-deep); text-decoration:none;
  border-bottom:1px solid transparent; transition:border-color .2s}
.case-go:hover{border-bottom-color:var(--accent)}

.exgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:26px}
@media (max-width:900px){.exgrid{grid-template-columns:1fr}}
.ex{padding:22px; border:1px solid var(--line); border-radius:12px; background:var(--surface); display:flex; flex-direction:column; gap:9px; min-width:0}
.ex .k{font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--accent-deep)}
.ex h4,.ex h3{font-size:17px; letter-spacing:-.015em}
.ex p{font-size:14.5px; color:var(--muted); line-height:1.55}
.ex .out{margin-top:auto; padding-top:10px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11px; color:var(--ink-2)}
.ex .out b{color:var(--accent-deep); font-weight:600}

.stackwrap{margin-top:24px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface)}
.stackrow{display:grid; grid-template-columns:150px minmax(0,1fr); border-bottom:1px solid var(--line)}
.stackrow:last-child{border-bottom:0}
@media (max-width:600px){.stackrow{grid-template-columns:minmax(0,1fr)}}
.stackrow .lbl{padding:16px 18px; font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint); border-right:1px solid var(--line)}
@media (max-width:600px){.stackrow .lbl{border-right:0; padding-bottom:0}}
.stackrow .chips{padding:14px 18px; display:flex; flex-wrap:wrap; gap:7px}
.stackrow .chips span{font-family:var(--mono); font-size:11.5px; padding:5px 10px; border-radius:6px;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink-2)}

.engpick{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:24px}
@media (max-width:820px){.engpick{grid-template-columns:1fr}}
.engpick a{padding:18px; border:1px solid var(--line); border-radius:12px; background:var(--surface);
  text-decoration:none; display:flex; flex-direction:column; gap:7px; min-width:0;
  transition:transform .4s var(--spring), border-color .25s, box-shadow .3s}
.engpick a:hover{transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--shadow)}
.engpick .n{font-family:var(--display); font-weight:700; font-size:16px; color:var(--ink); letter-spacing:-.015em}
.engpick .w{font-size:13.5px; color:var(--muted); line-height:1.5}
.engpick .go{margin-top:auto; padding-top:8px; font-family:var(--mono); font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
.engpick a:hover .go{color:var(--accent-deep)}

/* --- Theme toggle ------------------------------------------------------ */
.theme-tg{width:34px; height:34px; flex:none; display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--ink-2);
  transition:border-color .2s, color .2s, background .2s}
.theme-tg:hover{border-color:var(--accent); color:var(--accent-deep)}
.theme-tg .moon{display:none}
:root[data-theme="dark"] .theme-tg .sun{display:none}
:root[data-theme="dark"] .theme-tg .moon{display:block}
header.nav.on-dark .theme-tg{background:transparent; border-color:rgba(255,255,255,.22); color:#D7E6E8}
header.nav.on-dark .theme-tg:hover{border-color:var(--accent)}
@media (max-width:900px){.theme-tg{margin-left:auto}}