/* ============================================================
   ChukAI — site design system  v0.2
   Light editorial base + navy bands. Self-hosted type, no CDN,
   no framework. Must render identically with no network.
   ============================================================ */

@font-face{font-family:"Inter"; src:url("../fonts/Inter-latin.woff2") format("woff2");
  font-weight:100 900; font-stretch:100%; font-style:normal; font-display:swap}
@font-face{font-family:"Instrument Serif"; src:url("../fonts/InstrumentSerif-latin.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap}
@font-face{font-family:"Instrument Serif"; src:url("../fonts/InstrumentSerif-italic-latin.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap}

:root{
  /* --- brand --- */
  --ink:#101826;           /* deep navy — dark bands, headings */
  --ink-2:#48566A;         /* body on light */
  --muted:#66707F;         /* captions, meta — 4.7:1 on paper */
  --brand:#3C77B4;         /* logo steel blue — fills, borders, marks */
  --brand-deep:#2C5C8F;    /* accent TEXT — 6.4:1 on paper */
  --brand-hover:#234A73;
  --brand-bright:#5AA0E6;  /* glows and accents on navy only */
  --brand-soft:#EAF1F8;
  --positive:#1C6B4E;      /* RESULTS ONLY — never decoration */
  --positive-soft:#E7F0EB;

  /* --- surfaces --- */
  --paper:#F6F8FA;
  --panel:#FFFFFF;
  --hair:#E4E9EE;
  --hair-2:#EEF1F5;

  /* --- on navy --- */
  --on-ink:#EEF3F9;
  --on-ink-2:#A9B7C9;
  --on-ink-hair:#243247;
  --on-ink-panel:#182334;
  --on-ink-positive:#63C79A;

  --flag:#B7892B;

  /* --- chart palette (validated: lightness band, chroma floor, CVD, contrast) --- */
  --c-mark:#0E7A4E;
  --c-compare:#3C77B4;
  --c-threshold:#B7892B;
  --c-seq-1:#93B8DD; --c-seq-2:#6899CB; --c-seq-3:#4A86C5; --c-seq-4:#2C5C8F; --c-seq-5:#1E4468;

  /* --- depth --- */
  --shadow:0 1px 2px rgba(16,24,38,.04), 0 10px 30px rgba(16,24,38,.06);
  --shadow-lift:0 2px 6px rgba(16,24,38,.05), 0 22px 52px rgba(16,24,38,.10);
  --shadow-hover:0 4px 10px rgba(16,24,38,.06), 0 30px 64px rgba(16,24,38,.14);

  /* --- type --- */
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:var(--serif);         /* display face: h1/h2/quotes/figures */
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --tight:-.032em;                /* Inter tracking (UI, small headings) */
  --tight-display:-.014em;        /* serif tracking — Didone forms need more air */

  --wrap:1200px;
  --radius:18px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink-2);
  font-family:var(--sans); font-size:17px; line-height:1.62;
  font-variant-numeric:tabular-nums; font-feature-settings:"cv05" 1,"ss01" 1;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-optical-sizing:auto;
}
img{max-width:100%; height:auto; display:block}
svg{display:block}
a{color:var(--brand-deep); text-decoration:none}
a:hover{color:var(--brand-hover); text-decoration:underline; text-underline-offset:3px}
::selection{background:var(--brand-soft)}

h1,h2,h3,h4{color:var(--ink); text-wrap:balance; margin:0}
h1,h2{font-family:var(--display); font-weight:400; letter-spacing:var(--tight-display)}
h1{font-size:clamp(42px,6.2vw,78px); line-height:1.04}
h2{font-size:clamp(31px,3.9vw,50px); line-height:1.1}
h3,h4{font-family:var(--sans); letter-spacing:var(--tight); font-weight:620}
h3{font-size:clamp(18px,1.5vw,20px); line-height:1.32; letter-spacing:-.018em}
h4{font-size:17px; line-height:1.3; letter-spacing:-.014em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
strong{color:var(--ink); font-weight:620}

:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:6px}
.skip{position:absolute; left:-9999px; top:0; background:var(--panel); color:var(--ink);
  padding:12px 18px; z-index:200; border-radius:0 0 10px 0}
.skip:focus{left:0}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 clamp(22px,4vw,44px)}
.narrow{max-width:780px}
.section{padding:clamp(64px,8vw,116px) 0}
.section--tight{padding:clamp(42px,5vw,68px) 0}
.band{background:var(--ink); color:var(--on-ink-2); position:relative; overflow:hidden}
.band::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(680px 340px at 88% 0%, rgba(90,160,230,.16), transparent 64%),
    radial-gradient(560px 320px at 4% 100%, rgba(60,119,180,.12), transparent 68%)}
.band > .wrap{position:relative; z-index:1}
.band h1,.band h2,.band h3,.band h4{color:var(--on-ink)}
.band strong{color:var(--on-ink)}
.band a:not(.btn){color:#8FB9E4}
.band .btn--primary{color:#fff}
.band .eyebrow{color:var(--on-ink-2)}
.band .small,.band .cap{color:var(--on-ink-2)}
.band .kpi .d{color:var(--on-ink-2)}
.band .rule{background:var(--on-ink-hair)}
.rule{height:1px; background:var(--hair); border:0; margin:0}

.grid{display:grid; gap:clamp(18px,2.2vw,26px)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){ .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} }

.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,4.5vw,64px); align-items:center}
@media (max-width:900px){ .split{grid-template-columns:1fr} }

/* ---------- type helpers ---------- */
.eyebrow{font-family:var(--mono); font-size:11.5px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--muted); display:flex; align-items:center; gap:9px; margin:0 0 18px; font-weight:500}
.eyebrow .dot{width:5px; height:5px; border-radius:50%; background:var(--brand); flex:none}
.band .eyebrow .dot{background:var(--on-ink-positive)}
.lede{font-size:clamp(17.5px,1.55vw,20.5px); line-height:1.52; color:var(--ink-2); letter-spacing:-.011em}
.band .lede{color:var(--on-ink-2)}
.take{color:var(--brand-deep); font-size:15.5px; font-weight:600; margin:0 0 18px; letter-spacing:-.008em}
.band .take{color:#8FB9E4}
.small{font-size:14px; line-height:1.58; color:var(--muted)}
.hl{color:var(--brand-deep); font-weight:600}
.band .hl{color:#8FB9E4}
.mono{font-family:var(--mono)}
.attrib{font-size:12.5px; color:var(--muted); margin-top:20px; font-family:var(--mono); line-height:1.65}
.band .attrib{color:var(--on-ink-2); opacity:.72}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--sans);
  font-size:15.5px; font-weight:600; line-height:1; letter-spacing:-.011em;
  padding:15px 24px; border-radius:11px; border:1px solid transparent; cursor:pointer;
  text-decoration:none; transition:background .18s ease, border-color .18s ease,
  color .18s ease, transform .18s ease, box-shadow .18s ease}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn--primary{background:var(--brand); color:#fff;
  box-shadow:0 1px 2px rgba(16,24,38,.12), 0 8px 22px rgba(60,119,180,.28)}
.btn--primary:hover{background:var(--brand-deep); color:#fff;
  box-shadow:0 2px 6px rgba(16,24,38,.14), 0 14px 32px rgba(60,119,180,.36)}
.btn--ghost{border-color:var(--hair); color:var(--ink); background:var(--panel); box-shadow:var(--shadow)}
.btn--ghost:hover{border-color:var(--brand); color:var(--brand-deep)}
.band .btn--ghost{background:rgba(255,255,255,.04); border-color:var(--on-ink-hair);
  color:var(--on-ink); box-shadow:none}
.band .btn--ghost:hover{border-color:#8FB9E4; color:#8FB9E4; background:rgba(255,255,255,.08)}
.btn-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.arrow-link{font-weight:600; font-size:15.5px; display:inline-flex; align-items:center; gap:7px;
  letter-spacing:-.011em}
.arrow-link::after{content:"→"; transition:transform .18s ease}
.arrow-link:hover{text-decoration:none}
.arrow-link:hover::after{transform:translateX(4px)}

/* ---------- header ---------- */
.site-header{position:sticky; top:0; z-index:100;
  background:rgba(16,24,38,.82); backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--on-ink-hair)}
.site-header .wrap{display:flex; align-items:center; gap:28px; height:74px}
.brand{position:relative; display:flex; align-items:center; gap:11px; text-decoration:none; flex:none;
  padding:8px 12px; margin-left:-12px; border-radius:12px;
  transition:background .22s ease, box-shadow .22s ease}
.brand::before{content:""; position:absolute; inset:0; border-radius:12px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09);
  opacity:0; transition:opacity .22s ease}
.brand:hover,.brand:focus-visible{text-decoration:none}
.brand:hover::before,.brand:focus-visible::before{opacity:1}
.brand:active::before{background:rgba(255,255,255,.10)}
.brand > *{position:relative; z-index:1}
/* the mark leans in slightly; the wordmark comes up to full white */
.brand .mark,.brand .word{transition:transform .24s cubic-bezier(.22,.61,.36,1), color .22s ease}
.brand:hover .mark{transform:scale(1.07)}
.brand .word{color:var(--on-ink)}
.brand:hover .word{color:#fff}
/* a quiet mono label, in the same register as the section eyebrows,
   shown only while the visitor is deciding whether to click */
.brand-home{font-family:var(--mono); font-size:9.5px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--on-ink-2); opacity:0; transform:translateX(-5px);
  padding-left:2px; white-space:nowrap;
  transition:opacity .22s ease, transform .22s cubic-bezier(.22,.61,.36,1)}
.brand:hover .brand-home,.brand:focus-visible .brand-home{opacity:.85; transform:none}
@media (max-width:960px){ .brand-home{display:none} }
@media (prefers-reduced-motion:reduce){
  .brand:hover .mark{transform:none}
  .brand-home{transform:none}
}
.brand .mark{width:29px; height:29px; flex:none}
.brand .word{font-family:var(--sans); font-size:20.5px; font-weight:640; letter-spacing:-.028em; color:#fff}
.nav{margin-left:auto; display:flex; align-items:center; gap:30px}
.nav a{font-size:14.5px; font-weight:500; color:var(--on-ink-2); text-decoration:none;
  letter-spacing:-.008em; transition:color .16s ease}
.nav a:hover,.nav a[aria-current="page"]{color:#fff; text-decoration:none}
.nav a[aria-current="page"]{font-weight:600}
.nav .btn{padding:11px 18px; font-size:14px}
.nav-toggle{display:none; margin-left:auto; background:none; border:1px solid var(--on-ink-hair);
  border-radius:10px; color:var(--on-ink); padding:9px 13px; font-size:14px; cursor:pointer}
@media (max-width:960px){
  .nav-toggle{display:block}
  .nav{position:absolute; top:74px; left:0; right:0; background:var(--ink); flex-direction:column;
    align-items:stretch; gap:0; padding:8px clamp(22px,4vw,44px) 24px; margin:0;
    border-bottom:1px solid var(--on-ink-hair); display:none}
  .nav[data-open="true"]{display:flex}
  .nav a{padding:14px 0; border-bottom:1px solid var(--on-ink-hair); font-size:16px}
  .nav .btn{margin-top:18px; justify-content:center; border-bottom:0}
}

/* ---------- hero ---------- */
.hero{background:var(--ink); color:var(--on-ink-2);
  padding:clamp(76px,10vw,150px) 0 clamp(64px,8vw,116px); position:relative; overflow:hidden}
/* aurora wash + hairline grid — the depth the flat navy was missing */
.hero::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px) 0 0/74px 74px,
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px) 0 0/74px 74px;
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 25%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 25%, transparent 78%)}
.hero::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(760px 420px at 82% -12%, rgba(90,160,230,.30), transparent 62%),
    radial-gradient(620px 380px at 8% 108%, rgba(60,119,180,.20), transparent 66%)}
.hero .wrap{position:relative; z-index:1}
.hero h1{max-width:16ch}
.hero .lede{max-width:58ch; margin-top:26px}
.hero--interior{padding:clamp(58px,7vw,104px) 0 clamp(48px,6vw,80px)}
.hero--interior h1{max-width:21ch}

/* ---------- cards ---------- */
.card{background:var(--panel); border:1px solid rgba(16,24,38,.055); border-radius:var(--radius);
  padding:clamp(22px,2.5vw,32px); box-shadow:var(--shadow)}
.card h3,.card > h2{margin-bottom:10px}
.card > h2{font-family:var(--sans); font-size:clamp(18px,1.5vw,20px); font-weight:620;
  letter-spacing:-.018em; line-height:1.32}
.card--flat{box-shadow:none; border:1px solid var(--hair)}
.band .card{background:rgba(255,255,255,.045); border:1px solid var(--on-ink-hair); box-shadow:none}

/* ---------- KPI ---------- */
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,22px)}
@media (max-width:760px){ .kpis{grid-template-columns:1fr} }
/* secondary 2-up stat block (customer stories). Must be a class, not an inline
   style, or it outranks the responsive rules and the numbers burst their cards. */
.kpis--pair{grid-template-columns:repeat(2,1fr)}
.kpis--pair .v{font-size:clamp(34px,4.2vw,46px)}
.kpis--pair .kpi{padding:clamp(18px,2.2vw,26px)}
@media (max-width:620px){ .kpis--pair{grid-template-columns:1fr} }
.kpi{background:var(--panel); border:1px solid rgba(16,24,38,.055); border-radius:var(--radius);
  padding:clamp(24px,2.8vw,34px); box-shadow:var(--shadow)}
.kpi .v{font-family:var(--display); font-size:clamp(46px,5.4vw,64px); font-weight:400;
  letter-spacing:-.016em; line-height:1; color:var(--positive)}
.kpi .k{font-size:15px; font-weight:620; color:var(--ink); margin-top:18px; letter-spacing:-.013em}
.kpi .d{font-size:13.8px; color:var(--muted); margin-top:5px; line-height:1.5}
.band .kpi{background:rgba(255,255,255,.045); border:1px solid var(--on-ink-hair); box-shadow:none}
.band .kpi .v{color:var(--on-ink-positive)}
.band .kpi .k{color:var(--on-ink)}

/* ---------- feature list (no boxes — hairline rows) ---------- */
.features{display:grid; grid-template-columns:repeat(2,1fr); gap:0 clamp(36px,5vw,72px)}
@media (max-width:820px){ .features{grid-template-columns:1fr} }
.feature{padding:26px 0; border-top:1px solid var(--hair)}
.feature h3{display:flex; align-items:baseline; gap:12px}
.feature .n{font-family:var(--mono); font-size:12px; color:var(--brand-deep); font-weight:600;
  letter-spacing:.06em; flex:none}
.feature p{font-size:16px; margin-top:10px; color:var(--ink-2)}

/* ---------- numbered steps ---------- */
.steps{display:grid; gap:clamp(16px,2vw,24px); grid-template-columns:repeat(2,1fr)}
@media (max-width:760px){ .steps{grid-template-columns:1fr} }
.step{background:rgba(255,255,255,.045); border:1px solid var(--on-ink-hair);
  border-radius:var(--radius); padding:clamp(24px,2.6vw,32px)}
.step .n{font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-ink-positive); margin-bottom:14px}
.step h3{font-size:21px; margin-bottom:11px}
.step p{font-size:15.8px; color:var(--on-ink-2); margin:0; line-height:1.6}

/* ---------- quote ---------- */
.quote{background:var(--panel); border:1px solid rgba(16,24,38,.055); border-radius:var(--radius);
  padding:clamp(30px,4vw,52px); box-shadow:var(--shadow); position:relative; overflow:hidden}
.quote::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--brand)}
.quote blockquote{margin:0; font-family:var(--display); color:var(--ink); font-weight:400;
  font-size:clamp(23px,2.6vw,34px); line-height:1.3; letter-spacing:-.012em; text-wrap:balance}
.quote figcaption{margin-top:26px; font-size:14px; color:var(--muted); line-height:1.5}
.quote figcaption b{display:block; color:var(--ink); font-size:15px; font-weight:620; letter-spacing:-.012em}

/* ---------- story ---------- */
.story{display:grid; border:1px solid rgba(16,24,38,.055); grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(28px,4vw,56px); align-items:center;
  background:var(--panel); border-radius:var(--radius);
  padding:clamp(26px,3.2vw,46px); box-shadow:var(--shadow-lift)}
@media (max-width:900px){ .story{grid-template-columns:1fr} }
.logo-chip{display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px;
  border:1px solid var(--hair); border-radius:10px; background:var(--hair-2);
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}

/* ---------- chart ---------- */
.chart-card{position:relative; background:var(--panel); border:1px solid var(--hair); border-radius:var(--radius);
  padding:clamp(20px,2.4vw,28px); box-shadow:var(--shadow)}
.chart-card .t{font-family:var(--sans); font-size:19px; font-weight:620; color:var(--ink); letter-spacing:-.018em}
.chart-card .s{font-size:13px; color:var(--muted); margin-top:4px}
.chart-card svg{width:100%; height:auto; overflow:visible; margin-top:14px}
.leg{display:flex; gap:18px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-2); margin-top:14px}
.leg i{display:inline-block; width:18px; height:0; vertical-align:middle; margin-right:6px}
.leg .l-line{border-top:2.5px solid var(--c-mark)}
.leg .l-tgt{border-top:2px dashed var(--c-threshold)}
.leg .l-base{border-top:1.5px solid var(--muted)}
.gridline{stroke:var(--hair-2); stroke-width:1}
.axis-txt{fill:var(--muted); font-family:var(--mono); font-size:11px}
.zero-line{stroke:var(--muted); stroke-width:1.5}
.tgt-line{stroke:var(--c-threshold); stroke-width:2; stroke-dasharray:5 4}
.tgt-txt{fill:var(--c-threshold); font-family:var(--mono); font-size:11px; font-weight:600}
.area{fill:var(--c-mark); opacity:.10}
.trend{fill:none; stroke:var(--c-mark); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round}
.dot{fill:var(--panel); stroke:var(--c-mark); stroke-width:2}
.dot-end{fill:var(--c-mark); stroke:var(--panel); stroke-width:2.5}
.cap{font-size:13px; color:var(--muted); margin-top:14px; line-height:1.58}
.plot-lbl{fill:var(--ink); font-family:var(--mono); font-size:11.5px; font-weight:600; text-anchor:middle}
.crosshair{stroke:var(--muted); stroke-width:1; opacity:0; pointer-events:none}
.hit{fill:transparent; cursor:crosshair}
.dot-hi{fill:var(--c-mark); stroke:var(--panel); stroke-width:2.5; opacity:0; pointer-events:none}
.tip{position:absolute; pointer-events:none; opacity:0; transform:translate(-50%,-100%);
  background:var(--ink); color:#fff; border-radius:10px; padding:10px 13px; font-size:12.5px;
  line-height:1.4; white-space:nowrap; box-shadow:var(--shadow-lift); transition:opacity .12s ease; z-index:4}
.tip b{display:block; font-family:var(--mono); font-size:14px; color:var(--on-ink-positive); font-weight:600}
.chart-card[data-active="true"] .crosshair,
.chart-card[data-active="true"] .dot-hi,
.chart-card[data-active="true"] .tip{opacity:1}

/* ---------- footer ---------- */
.site-footer{background:var(--ink); color:var(--on-ink-2); padding:clamp(56px,7vw,88px) 0 36px; font-size:14.5px}
.site-footer a{color:var(--on-ink-2); text-decoration:none}
.site-footer a:hover{color:#fff; text-decoration:none}
.footer-top{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:36px}
@media (max-width:860px){ .footer-top{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .footer-top{grid-template-columns:1fr} }
.footer-top h2{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-ink-2); opacity:.65; font-weight:500; margin-bottom:16px}
.footer-top ul{list-style:none; margin:0; padding:0; display:grid; gap:10px; font-size:14.5px}
.footer-bottom{margin-top:clamp(40px,5vw,58px); padding-top:24px; border-top:1px solid var(--on-ink-hair);
  display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; font-size:13px; color:var(--on-ink-2)}
.footer-bottom .spacer{margin-left:auto}

/* ---------- case-study components ---------- */
.rail .card h2{font-size:16px; margin-bottom:16px}
.rail dl{margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px 30px}
.rail dt{font-family:var(--mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); margin-bottom:4px}
.rail dd{margin:0; font-size:14.5px; color:var(--ink-2); line-height:1.55}
.subhead{font-family:var(--sans); font-size:21px; font-weight:620; color:var(--ink);
  letter-spacing:-.02em; margin:36px 0 12px; padding-bottom:8px; border-bottom:1px solid var(--hair-2)}
.prose{max-width:1000px; margin-inline:auto}
.prose p{font-size:18px; line-height:1.68}
.prose > section + section{margin-top:clamp(44px,5.5vw,68px)}
.ladder{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px}
.ladder button{flex:1 1 160px; text-align:left; background:var(--panel); border:1px solid var(--hair);
  border-radius:12px; padding:13px 16px; cursor:pointer; font-family:inherit; color:var(--ink-2);
  line-height:1.25; transition:border-color .18s ease, background .18s ease, transform .18s ease}
.ladder button:hover{border-color:var(--muted); transform:translateY(-1px)}
.ladder button.on{border-color:var(--brand); background:var(--brand-soft); color:var(--ink)}
.ladder button .nm{display:block; font-size:13px; font-weight:620; letter-spacing:-.012em}
.ladder button .amt{font-family:var(--mono); font-size:14px; font-weight:600; color:var(--positive)}
.viewport{overflow:hidden; border-radius:var(--radius); outline:none}
.viewport:focus-visible{box-shadow:0 0 0 2px var(--brand)}
.track{display:flex; transition:transform .38s cubic-bezier(.22,.61,.36,1)}
@media (prefers-reduced-motion:reduce){ .track{transition:none} }
.slide{flex:0 0 100%; min-width:0}
.lever{background:var(--panel); border:1px solid rgba(16,24,38,.055); border-radius:var(--radius);
  padding:clamp(24px,2.8vw,32px); box-shadow:var(--shadow)}
.lever h3{font-size:21px; margin:0 0 8px; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.lever h3 .q{font-family:var(--mono); font-size:11px; color:var(--brand-deep); letter-spacing:.08em}
.lever .result{background:var(--positive-soft); border-radius:12px; padding:16px 19px; margin-top:20px}
.lever .result .lab{font-family:var(--mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--positive); margin-bottom:5px}
.lever .result .txt{color:var(--ink); font-weight:500; font-size:15.5px}
.caro-nav{display:flex; align-items:center; gap:14px; justify-content:flex-end; margin-top:18px}
.caro-nav .counter{font-family:var(--mono); font-size:12.5px; color:var(--muted); margin-right:auto}
.caro-nav button{width:40px; height:40px; border-radius:999px; border:1px solid var(--hair);
  background:var(--panel); color:var(--ink); font-size:18px; line-height:1; cursor:pointer;
  display:grid; place-items:center; transition:border-color .18s ease, color .18s ease}
.caro-nav button:hover{border-color:var(--brand); color:var(--brand-deep)}
.footnote{background:var(--panel); border-left:3px solid var(--c-threshold);
  border-radius:12px; padding:17px 20px; font-size:14px; color:var(--ink-2); margin-top:24px;
  box-shadow:var(--shadow)}
.footnote b{color:var(--ink)}

/* ---------- form ---------- */
.formcard{background:var(--panel); border:1px solid rgba(16,24,38,.055); border-radius:var(--radius);
  padding:clamp(26px,3.2vw,40px); box-shadow:var(--shadow-lift)}
.field{margin-bottom:20px}
.field label{display:block; font-size:13.5px; font-weight:620; color:var(--ink); margin-bottom:7px;
  letter-spacing:-.01em}
.field input,.field textarea,.field select{width:100%; font:inherit; font-size:15.5px; color:var(--ink);
  background:var(--paper); border:1px solid var(--hair); border-radius:11px; padding:13px 15px;
  transition:border-color .16s ease, box-shadow .16s ease}
.field input:focus,.field textarea:focus{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); outline:none}
.field textarea{min-height:120px; resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}

/* ---------- motion ---------- */
.js [data-reveal]{opacity:0; transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1)}
.js [data-reveal].in{opacity:1; transform:none}
.card,.kpi,.story,.lever,.formcard{transition:box-shadow .25s ease, transform .25s ease}
.story:hover{box-shadow:var(--shadow-hover); transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important; animation:none!important}
  html{scroll-behavior:auto}
  .js [data-reveal]{opacity:1; transform:none}
}

/* ============================================================
   COMPOSITION — one centered spine
   Everything hangs off the same axis: section headers, hero,
   callouts and CTAs are centred; only long-form prose and
   multi-line lists stay left-aligned (centred prose is unreadable).
   ============================================================ */

/* .narrow previously set a max-width with no auto margin, so every
   narrow block hugged the left edge under a full-width grid. */
.narrow{max-width:820px; margin-inline:auto}

/* --- section headers: centred on every page --- */
.section > .wrap > .eyebrow,
.hero > .wrap > .eyebrow{justify-content:center}
.section > .wrap > .eyebrow,
.section > .wrap > h2,
.section > .wrap > .lede,
.section > .wrap > .attrib,
.section > .wrap > .take{text-align:center; margin-inline:auto; max-width:820px}
.section > .wrap > h2 + .lede,
.section > .wrap > h2 + .take{margin-top:16px}
.section > .wrap > .btn-row{justify-content:center}
/* the grid that follows a centred header needs its own breathing room */
.section > .wrap > .lede + .grid,
.section > .wrap > .lede + .features,
.section > .wrap > .lede + .steps,
.section > .wrap > .lede + .kpis,
.section > .wrap > h2 + .grid,
.section > .wrap > h2 + .features,
.section > .wrap > h2 + .steps,
.section > .wrap > h2 + .kpis{margin-top:clamp(36px,4.5vw,58px)}

/* --- hero: centred composition --- */
.hero > .wrap{text-align:center}
.hero h1,.hero .lede{margin-inline:auto}
.hero .btn-row{justify-content:center}
.hero--interior h1{max-width:20ch}

/* --- callout numbers read as callouts --- */
.kpi{text-align:center}
.kpi .k{margin-top:16px}

/* --- five features: 3 up, then 2 centred, tops aligned --- */
.features{display:flex; flex-wrap:wrap; justify-content:center;
  gap:0 clamp(28px,3.6vw,56px); grid-template-columns:none}
.feature{flex:1 1 290px; max-width:336px; padding:28px 0 30px; border-top:1px solid var(--hair)}
/* .feature is a hairline row, not a box — inside a card it must not strip the padding */
.card.feature{padding:clamp(22px,2.5vw,32px); border-top:0; max-width:none}
@media (max-width:820px){ .feature{max-width:none; flex:1 1 100%} }

/* --- even column tops instead of ragged bottoms --- */
.cols-even > *{border-top:1px solid var(--hair); padding-top:26px}

/* --- symmetric feature card --- */
.story{grid-template-columns:1fr 1fr}
/* repeated after the rule above: same specificity, so the later one wins and the
   card would otherwise stay two-up on a phone */
@media (max-width:900px){ .story{grid-template-columns:1fr} }

/* --- prose: centred column, centred section headings, left-aligned body --- */
.prose > section > .eyebrow{justify-content:center}
.prose > section > .eyebrow,
.prose > section > h2,
.prose > section > .take{text-align:center}
.prose > section > h2{margin-inline:auto}

/* --- a single centred panel under a centred header --- */
.panel-center{max-width:880px; margin-inline:auto}

/* ============================================================
   PIZAZZ — motion and texture, used where it earns its place.
   All of it is gated behind .js (set only when the visitor has
   not asked for reduced motion), so the static page is complete
   on its own and nothing is ever hidden without scripting.
   ============================================================ */

/* --- fine grain over the navy: tactile depth, no image files.
       Blended into the surface with `overlay`, so mid-grey noise leaves the
       navy's luminance where it was instead of lifting it toward grey. --- */
.hero,.band{background-color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-blend-mode:overlay}

/* --- the hero light breathes, very slowly --- */
@keyframes auroraDrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-2.5%,1.8%,0) scale(1.07)}
  100%{transform:translate3d(0,0,0) scale(1)}
}
.js .hero::after{inset:-16%; animation:auroraDrift 28s ease-in-out infinite}

/* --- headline arrives word by word --- */
@keyframes riseIn{to{opacity:1; transform:none}}
.js .hero h1 .w{display:inline-block; opacity:0; transform:translateY(.4em);
  animation:riseIn .72s cubic-bezier(.22,.61,.36,1) both}
.js .hero > .wrap > .eyebrow,
.js .hero > .wrap > .lede,
.js .hero > .wrap > .btn-row{opacity:0; transform:translateY(14px);
  animation:riseIn .8s cubic-bezier(.22,.61,.36,1) both}
.js .hero > .wrap > .eyebrow{animation-delay:.04s}
.js .hero > .wrap > .lede{animation-delay:.42s}
.js .hero > .wrap > .btn-row{animation-delay:.56s}

/* --- the proof chart draws itself when it comes into view --- */
.js .chart-card[data-draw] .trend{stroke-dasharray:var(--len); stroke-dashoffset:var(--len)}
.js .chart-card[data-draw] .area,
.js .chart-card[data-draw] .dot,
.js .chart-card[data-draw] .dot-end,
.js .chart-card[data-draw] .plot-lbl{opacity:0}
.js .chart-card[data-draw].drawn .trend{stroke-dashoffset:0;
  transition:stroke-dashoffset 1.5s cubic-bezier(.33,.7,.35,1)}
.js .chart-card[data-draw].drawn .area{opacity:.10; transition:opacity .8s ease .5s}
.js .chart-card[data-draw].drawn .dot,
.js .chart-card[data-draw].drawn .dot-end{opacity:1; transition:opacity .45s ease .95s}
.js .chart-card[data-draw].drawn .plot-lbl{opacity:1; transition:opacity .5s ease 1.35s}

/* --- microinteractions --- */
.nav a:not(.btn){position:relative}
.nav a:not(.btn)::after{content:""; position:absolute; left:0; right:100%; bottom:-7px; height:1.5px;
  background:#8FB9E4; transition:right .26s cubic-bezier(.22,.61,.36,1)}
.nav a:not(.btn):hover::after{right:0}
.nav a[aria-current="page"]::after{right:0; background:var(--on-ink-positive)}
@media (max-width:960px){ .nav a:not(.btn)::after{display:none} }
.step{transition:border-color .25s ease, background .25s ease, transform .25s ease}
.step:hover{border-color:rgba(99,199,154,.32); background:rgba(255,255,255,.07); transform:translateY(-2px)}
.feature{transition:border-color .25s ease}
.feature:hover{border-top-color:var(--brand)}
.logo-chip{transition:border-color .25s ease, color .25s ease}
.story:hover .logo-chip{border-color:var(--brand); color:var(--brand-deep)}

@media (prefers-reduced-motion:reduce){
  .js .hero::after{animation:none}
  .js .hero h1 .w,
  .js .hero > .wrap > .eyebrow,
  .js .hero > .wrap > .lede,
  .js .hero > .wrap > .btn-row{opacity:1; transform:none; animation:none}
  .js .chart-card[data-draw] .trend{stroke-dasharray:none; stroke-dashoffset:0}
  .js .chart-card[data-draw] .area{opacity:.10}
  .js .chart-card[data-draw] .dot,
  .js .chart-card[data-draw] .dot-end,
  .js .chart-card[data-draw] .plot-lbl{opacity:1}
}

/* ---------- team ---------- */
.people{display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.2vw,26px);
  margin-top:clamp(32px,4vw,50px)}
@media (max-width:900px){ .people{grid-template-columns:1fr} }
.person{display:grid; grid-template-columns:132px minmax(0,1fr); gap:clamp(18px,2vw,26px);
  align-items:stretch; text-align:left}
.person img{width:132px; height:132px; border-radius:14px; object-fit:cover; align-self:start}
/* bios differ in length, so pin the link to the bottom rather than let it float */
.person > div{display:flex; flex-direction:column}
.person h3{margin-bottom:2px}
.person .role{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin:0 0 12px}
.person p{font-size:15px; line-height:1.6; color:var(--ink-2)}
.person > div > p{margin-bottom:18px}
.person .li{align-self:flex-start; margin-top:auto}
/* small button variant, used for the profile links */
.btn--sm{padding:10px 15px; font-size:14px; border-radius:10px; gap:8px}
.li .li-mark{width:16px; height:16px; fill:#0A66C2; flex:none; transition:fill .18s ease}
.li:hover{border-color:#0A66C2}
.li:hover .li-mark{fill:#004182}
/* the third card sits under the founders, centred and card-width */
.person--wide{grid-column:1/-1; width:calc(50% - 13px); margin-inline:auto}
@media (max-width:900px){ .person--wide{width:100%} }
@media (max-width:560px){
  .person{grid-template-columns:104px minmax(0,1fr); gap:16px}
  .person img{width:104px; height:104px; border-radius:12px}
}

/* ============================================================
   Card groups arrive in sequence rather than all at once.
   Entry motion, not hover — it reads as craft without implying
   that anything here responds to a click.
   ============================================================ */
.js [data-reveal] :is(.grid,.steps,.features,.kpis,.people) > *{
  opacity:0; transform:translateY(12px);
  transition:opacity .5s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1)}
.js [data-reveal].in :is(.grid,.steps,.features,.kpis,.people) > *{opacity:1; transform:none}
.js [data-reveal].in :is(.grid,.steps,.features,.kpis,.people) > :nth-child(1){transition-delay:.04s}
.js [data-reveal].in :is(.grid,.steps,.features,.kpis,.people) > :nth-child(2){transition-delay:.10s}
.js [data-reveal].in :is(.grid,.steps,.features,.kpis,.people) > :nth-child(3){transition-delay:.16s}
.js [data-reveal].in :is(.grid,.steps,.features,.kpis,.people) > :nth-child(4){transition-delay:.22s}
.js [data-reveal].in :is(.grid,.steps,.features,.kpis,.people) > :nth-child(5){transition-delay:.28s}
.js [data-reveal].in :is(.grid,.steps,.features,.kpis,.people) > :nth-child(6){transition-delay:.34s}
.js [data-reveal].in :is(.grid,.steps,.features,.kpis,.people) > :nth-child(7){transition-delay:.40s}
.js [data-reveal].in :is(.grid,.steps,.features,.kpis,.people) > :nth-child(n+8){transition-delay:.46s}

/* A card that is genuinely a link target: the whole card is clickable via the
   stretched link inside it, so hover feedback here is honest. */
.card--link{position:relative; transition:box-shadow .25s ease, transform .25s ease}
.card--link .arrow-link::before{content:""; position:absolute; inset:0; border-radius:var(--radius)}
.card--link:hover{box-shadow:var(--shadow-hover); transform:translateY(-2px)}
.card--link:hover .arrow-link{color:var(--brand-hover)}
.card--link:hover .arrow-link::after{transform:translateX(4px)}
.card--link:focus-within{box-shadow:0 0 0 2px var(--brand), var(--shadow-lift)}

@media (prefers-reduced-motion:reduce){
  .js [data-reveal] :is(.grid,.steps,.features,.kpis,.people) > *{
    opacity:1; transform:none; transition:none}
  .card--link:hover{transform:none}
}

/* ---------- customer marks ---------- */
.cust-logo{width:auto; height:46px; max-width:100%}
@media (max-width:560px){ .cust-logo{height:38px} }
/* the six operating brands, shown rather than asserted */
.brandstrip{width:100%; max-width:940px; height:auto; margin:clamp(26px,3vw,38px) auto 0;
  opacity:.78; transition:opacity .3s ease}
.brandstrip:hover{opacity:1}

/* ---------- compressed model loop (Home) ---------- */
.looptrack{list-style:none; margin:clamp(34px,4vw,52px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:0}
.looptrack li{position:relative; padding:26px 22px 0; text-align:center;
  font-size:16px; font-weight:600; letter-spacing:-.012em; color:var(--on-ink);
  border-top:1px solid var(--on-ink-hair)}
.looptrack li::before{content:""; position:absolute; top:-4.5px; left:50%; margin-left:-4.5px;
  width:9px; height:9px; border-radius:50%; background:var(--on-ink-positive)}
.looptrack .n{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  color:var(--on-ink-positive); font-weight:500; margin-bottom:8px}
@media (max-width:820px){
  .looptrack{grid-template-columns:repeat(2,1fr)}
  .looptrack li{padding:22px 14px 0; font-size:15px}
}
@media (max-width:460px){ .looptrack{grid-template-columns:1fr} }

/* ---------- contact form states ---------- */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.formnote{margin-top:14px; font-size:13.5px; line-height:1.55; color:var(--muted);
  padding:12px 14px; background:var(--paper); border-radius:10px}
.formsent{text-align:center; padding:clamp(18px,3vw,32px) 0}
.formsent h3{color:var(--positive)}

/* ---------- checkbox row ---------- */
.field-check{display:flex; align-items:flex-start; gap:11px; margin:0 0 22px;
  padding:14px 15px; background:var(--paper); border:1px solid var(--hair); border-radius:11px}
.field-check input{width:17px; height:17px; margin:1px 0 0; flex:none; accent-color:var(--brand)}
.field-check label{margin:0; font-size:14.5px; font-weight:500; color:var(--ink-2); line-height:1.45}
.field-check:focus-within{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}