/* DirectiveNow — shared stylesheet. Moved verbatim from the one-page
   index.html, in document order; read AGENTS.md before editing. */

/* ============================================================
   DIRECTIVENOW — HOMEPAGE PROTOTYPE
   Visual system: "Midnight & Signal"
   Committed single visual world (no OS theme inversion):
   the light/dark alternation IS the narrative structure.
   ============================================================ */

:root{
  /* --- Brand: 2 colours. Midnight Navy + Signal Amber. --- */
  --ink-950:#060C17;   /* deepest well / footer */
  --ink-900:#0A1526;   /* dark band ground */
  --ink-850:#0E1B30;   /* panel surface on dark */
  --ink-800:#132441;   /* raised surface on dark */
  --ink-700:#1B2E4E;   /* strong hairline on dark */
  --ink-600:#22385C;   /* hairline on dark */

  --steel-300:#CFD9E6; /* secondary text on dark */
  --steel-400:#AFC0D2; /* muted text on dark */
  --steel-500:#A3B4C8; /* faint text on dark — lifted from #6E8299, which
                          measured 4.46:1 against the panel ground and so
                          failed AA on the smallest mono captions. --loss
                          keeps the old hex: it is a chart fill, not text. */

  --paper-0:#FFFFFF;
  --paper-50:#F2F5F8;  /* light band ground (blue-biased) */
  --paper-100:#E8EDF2; /* light alt surface */
  --line-light:#D7DFE8;
  --line-light-2:#C3CEDA;

  --slate-900:#10203A; /* headings on light */
  --slate-700:#24344C; /* body on light */
  --slate-500:#2E4058; /* muted on light */

  --amber:#F0A32C;     /* signal — UI accent */
  --amber-hi:#FFC163;  /* highlight on dark */
  --amber-ink:#704307; /* amber for large marks on light */

  /* --- Semantic (reserved, never used as decoration) --- */
  --booked:#3FBE97;         /* chart mark, dark band (validated) */
  --booked-ink:#0B5038;     /* chart mark, light band (validated) */
  --booked-soft:rgba(37,160,126,.14);
  --series-1:#C88220;       /* chart amber, dark band (validated) */
  --series-1-ink:#B9720F;   /* chart amber, light band (validated) */
  --loss:#6E8299;           /* loss = absence: steel + hatch + label */

  /* --- Type --- */
  --f-display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-body:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --t-micro:11px;
  --t-small:13.5px;
  --t-body:16.5px;
  --t-lead:18.5px;

  /* --- Space (8px base) --- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;
  --sp-section:clamp(76px,9vw,128px);

  /* --- Layout --- */
  --w-wide:1320px;
  --w-content:1180px;
  --w-prose:660px;
  --gutter:clamp(20px,4vw,40px);
  --nav-h:76px;

  /* --- Form --- */
  --r-sm:3px;   /* chips, inputs */
  --r-md:5px;   /* panels, cards */
  --r-lg:8px;   /* only the largest instrument panels */
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--ink-900);
  color:var(--steel-300);
  font-family:var(--f-body);
  font-size:var(--t-body);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,canvas{max-width:100%}
a{color:inherit}
::selection{background:var(--amber);color:var(--ink-950)}

/* Skip link: 57 focusable elements sit between the top of the page and the
   content, and a keyboard user met all of them on every load. Off-screen
   until focused, then it lands in the top-left like any other control. */
.skip{
  position:absolute;left:12px;top:-64px;z-index:200;
  padding:11px 18px;border-radius:6px;
  background:var(--amber);color:var(--ink-950);
  font:600 14px/1 var(--f-body);text-decoration:none;
  transition:top .18s var(--ease);
}
.skip:focus{top:12px}
.skip:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.skip{transition:none}}
/* Deliberately NOT display:contents. That would drop the landmark from the
   accessibility tree in several engines, which is the one thing this element
   exists to provide. A plain block is safe here: <main> has no default
   styling, sets no overflow or transform, and so creates neither a scroll
   container nor a containing block that could freeze a view timeline. */

/* ---------- Bands: contextual surface tokens ---------- */
.band{
  padding-block:var(--sp-section);
  background:var(--bg);
  color:var(--text-2);
  position:relative;
}
.band--dark{
  --bg:var(--ink-900); --surface:var(--ink-850); --surface-2:var(--ink-800);
  --text:#FFFFFF; --text-2:var(--steel-300); --text-3:var(--steel-400);
  --text-lead:#D8E2EE;
  --line:var(--ink-600); --line-2:var(--ink-700);
  --mark:var(--series-1); --mark-pos:var(--booked); --accent-text:var(--amber);
}
.band--deep{ --bg:var(--ink-950) }
.band--light{
  --bg:var(--paper-50); --surface:var(--paper-0); --surface-2:var(--paper-100);
  --text:var(--slate-900); --text-2:var(--slate-700); --text-3:var(--slate-500);
  --text-lead:#1E2C42;
  --line:var(--line-light); --line-2:var(--line-light-2);
  --mark:var(--series-1-ink); --mark-pos:var(--booked-ink); --accent-text:var(--amber-ink);
}
.wrap{max-width:var(--w-content);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--wide{max-width:var(--w-wide)}

/* Dot-grid texture on dark grounds: engineering paper, 3% */
.band--dark::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(143,163,186,.30) 1px,transparent 1px);
  background-size:26px 26px;opacity:.16;
}
.band--dark>*{position:relative;z-index:1}

/* Ruler-tick divider: the transition device between bands */
.tick-rule{height:26px;position:relative;overflow:hidden;background:var(--bg)}
.tick-rule::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);
}
.tick-rule::after{
  content:"";position:absolute;left:0;right:0;top:0;height:8px;
  background-image:linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:16px 100%;opacity:.85;
}
.tick-rule--major::after{background-size:64px 100%;height:13px}

/* ---------- Type ---------- */
h1,h2,h3,h4{
  font-family:var(--f-display);
  color:var(--text);
  font-weight:700;
  letter-spacing:-.022em;
  line-height:1.04;
  text-wrap:balance;
  margin:0;
  font-stretch:110%;
}
.h1{font-size:clamp(38px,5.6vw,70px);line-height:.98;letter-spacing:-.03em}
.h2{font-size:clamp(29px,3.5vw,46px)}
.h3{font-size:clamp(19px,1.5vw,23px);letter-spacing:-.014em;font-stretch:100%}
.h4{font-size:16px;letter-spacing:-.008em;font-stretch:100%;font-weight:600}
p{margin:0}
.lead{font-size:clamp(16.5px,1.5vw,var(--t-lead));line-height:1.6;color:var(--text-lead,var(--text-2));max-width:62ch}
.prose{max-width:var(--w-prose)}
.small{font-size:var(--t-small);line-height:1.55}
.muted{color:var(--text-3)}

.eyebrow{
  font-family:var(--f-mono);font-size:var(--t-micro);font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent-text);
  display:flex;align-items:center;gap:10px;margin-bottom:var(--sp-5);
}
.eyebrow::before{
  content:"";width:7px;height:7px;background:var(--amber);flex:none;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.eyebrow--plain::before{display:none}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.num{font-family:var(--f-display);font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:-.03em;font-stretch:104%}

.sec-head{display:grid;gap:var(--sp-5);margin-bottom:var(--sp-8)}
@media(min-width:900px){
  .sec-head--split{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--sp-7);align-items:end}
  .sec-head--split .lead{max-width:52ch}
}

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--amber);--btn-fg:var(--ink-950);--btn-bd:var(--amber);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:0 26px;
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bd);
  border-radius:var(--r-sm);
  font-family:var(--f-body);font-size:15px;font-weight:600;letter-spacing:-.005em;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
}
.btn:hover{background:#FFB44A;border-color:#FFB44A;transform:translateY(-1px);box-shadow:0 6px 18px -8px rgba(240,163,44,.75)}
.btn:active{transform:translateY(0)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--text);--btn-bd:var(--line-2)}
.btn--ghost:hover{background:transparent;border-color:var(--amber);color:var(--amber);transform:none;box-shadow:none}
.btn--sm{min-height:44px;padding:0 18px;font-size:14px}
.btn--block{width:100%}
:where(a,button,input,select,summary):focus-visible{
  outline:2px solid var(--amber);outline-offset:3px;border-radius:var(--r-sm);
}

/* ---------- Reveal system (rests visible; JS hides only below-fold) ---------- */
[data-rv]{transition:opacity .62s var(--ease),transform .62s var(--ease)}
html.js [data-rv].is-off{opacity:0;transform:translateY(16px)}
@media (prefers-reduced-motion:reduce){
  html.js [data-rv].is-off{opacity:1;transform:none}
  [data-rv]{transition:none}
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:80;height:var(--nav-h);
  display:flex;align-items:center;
  background:transparent;border-bottom:1px solid transparent;
  transition:height .28s var(--ease),background .28s var(--ease),border-color .28s var(--ease),backdrop-filter .28s var(--ease);
}
.nav.is-stuck{
  height:62px;background:rgba(10,21,38,.88);backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--ink-700);
}
.nav__in{max-width:var(--w-wide);margin-inline:auto;padding-inline:var(--gutter);width:100%;
  display:flex;align-items:center;gap:var(--sp-6)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none;color:#F2F5F8}
.logo__mark{width:26px;height:26px;flex:none}
.logo__wm{
  font-family:var(--f-display);font-weight:700;font-size:16.5px;letter-spacing:.005em;
  color:#fff;font-stretch:112%;text-transform:uppercase;
}
.logo__wm span{color:var(--amber)}
.nav__links{display:none;gap:26px;margin-left:auto;align-items:center}
@media(min-width:1060px){.nav__links{display:flex}}
.nav__link{
  font-size:14px;color:var(--steel-300);text-decoration:none;position:relative;
  padding:6px 0;transition:color .18s var(--ease);
}
.nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--amber);
  transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease);
}
.nav__link:hover{color:#fff}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)}
.nav__link.is-active{color:#fff}
.nav__cta{margin-left:auto}
@media(min-width:1060px){.nav__cta{margin-left:14px}}
.nav__burger{
  margin-left:auto;width:46px;height:46px;display:grid;place-items:center;
  background:transparent;border:1px solid var(--ink-700);border-radius:var(--r-sm);cursor:pointer;
}
@media(min-width:1060px){.nav__burger{display:none}}
@media(max-width:700px){.nav__cta{display:none}}
.nav__burger span{display:block;width:17px;height:1.5px;background:#fff;position:relative}
.nav__burger span::before,.nav__burger span::after{
  content:"";position:absolute;left:0;width:17px;height:1.5px;background:#fff;transition:transform .24s var(--ease)}
.nav__burger span::before{top:-5px}.nav__burger span::after{top:5px}

.drawer{
  position:fixed;inset:0;z-index:90;background:var(--ink-950);
  display:flex;flex-direction:column;padding:var(--gutter);
  transform:translateY(-100%);transition:transform .4s var(--ease);visibility:hidden;
}
.drawer.is-open{transform:translateY(0);visibility:visible}
.drawer__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-7)}
.drawer__close{width:46px;height:46px;background:transparent;border:1px solid var(--ink-700);
  border-radius:var(--r-sm);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.drawer__links{display:flex;flex-direction:column;gap:2px;margin-bottom:auto}
.drawer__links a{
  font-family:var(--f-display);font-size:26px;font-weight:600;font-stretch:106%;
  color:#fff;text-decoration:none;padding:14px 0;border-bottom:1px solid var(--ink-800);
  letter-spacing:-.02em;
}
.drawer__foot{padding-top:var(--sp-6);display:grid;gap:12px}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  padding-top:calc(var(--nav-h) + clamp(48px,7vw,86px));
  padding-bottom:clamp(56px,7vw,92px);
  position:relative;overflow:hidden;
}
.hero__glow{
  position:absolute;pointer-events:none;width:900px;height:700px;
  right:-180px;top:-180px;
  background:radial-gradient(closest-side,rgba(240,163,44,.13),rgba(240,163,44,0) 72%);
}
.hero__grid{display:grid;gap:clamp(40px,5vw,64px);align-items:start}
@media(min-width:1000px){.hero__grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(40px,4.5vw,72px)}}
.hero h1{margin-bottom:var(--sp-5)}
.hero h1 em{font-style:normal;color:var(--amber);position:relative;white-space:nowrap}
.hero__sub{max-width:53ch;margin-bottom:var(--sp-6);color:var(--text-lead,var(--steel-300))}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:var(--sp-5)}
.hero__note{font-family:var(--f-mono);font-size:12px;color:var(--steel-500);letter-spacing:.04em}

/* ---------- Instrument panel (hero readout) ---------- */
.panel{
  background:var(--ink-850);border:1px solid var(--ink-700);border-radius:var(--r-lg);
  overflow:hidden;
}
.panel__bar{
  display:flex;align-items:center;gap:10px;padding:13px 18px;
  border-bottom:1px solid var(--ink-700);background:rgba(255,255,255,.016);
}
.panel__title{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel-400)}
.panel__live{margin-left:auto;display:flex;align-items:center;gap:7px;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-400)}
.dot-live{width:6px;height:6px;border-radius:50%;background:var(--booked);box-shadow:0 0 0 0 rgba(37,160,126,.55);animation:pulse 2.8s infinite}
@media(max-width:420px){
  .panel__bar{flex-wrap:wrap;gap:6px 10px}
  .panel__live{margin-left:0}
  .panel__title,.panel__live{font-size:10px;letter-spacing:.1em}
}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,160,126,.5)}70%{box-shadow:0 0 0 7px rgba(37,160,126,0)}100%{box-shadow:0 0 0 0 rgba(37,160,126,0)}}
@media (prefers-reduced-motion:reduce){.dot-live{animation:none}}

.chain{display:grid;grid-template-columns:1fr;border-bottom:1px solid var(--ink-700)}
@media(min-width:520px){.chain{grid-template-columns:1fr 1fr}}
.chain__cell{padding:18px 18px 16px;border-bottom:1px solid var(--ink-700);position:relative}
@media(min-width:520px){
  .chain__cell:nth-child(odd){border-right:1px solid var(--ink-700)}
  .chain__cell:nth-child(3),.chain__cell:nth-child(4){border-bottom:0}
}
.chain__cell:last-child{border-bottom:0}
.chain__k{display:flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:10.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--steel-500);margin-bottom:9px}
.chain__step{color:var(--amber);font-weight:500}
.chain__v{display:block;font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(21px,2.2vw,27px);line-height:1.15;color:#fff}
.chain__v--pos{color:var(--amber-hi)}
.chain__d{font-family:var(--f-mono);font-size:11.5px;color:var(--steel-400);margin-top:5px}
.chain__d b{color:var(--booked);font-weight:500}

.panel__strip{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--ink-700)}
.strip__i{padding:14px 18px;border-right:1px solid var(--ink-700)}
.strip__i:last-child{border-right:0}
.strip__k{font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--steel-500);display:block;margin-bottom:5px}
.strip__v{display:block;font-family:var(--f-display);font-weight:700;font-size:19px;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.panel__chart{padding:16px 18px 14px}

/* ---- the hero loop, running ----
   pathLength="1000" normalises the path so the dash maths is exact and
   independent of the geometry: a 70-unit lit segment travels a 1000-unit
   circuit, and each node fires at its own fraction of that trip. Change
   the shape later and the timing still holds. */
.panel__loop{padding:20px 18px 6px}
.loopfig{display:block;width:100%;height:auto;overflow:visible}
.loopfig__track{fill:none;stroke:var(--ink-600);stroke-width:1.5}
.loopfig__pulse{
  fill:none;stroke:var(--amber);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:70 930;stroke-dashoffset:1000;opacity:0;
  filter:drop-shadow(0 0 5px rgba(240,163,44,.6));
}
.loopfig__ix{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;fill:var(--amber);text-anchor:middle}
.loopfig__lb{font-family:var(--f-display);font-weight:700;font-size:15px;letter-spacing:-.01em;fill:#fff;text-anchor:middle}
.loopfig__n--key .loopfig__lb{fill:var(--amber-hi)}
.loopfig__n circle{fill:var(--ink-850);stroke:var(--steel-500);stroke-width:1.5}
.loopfig__ret{font-family:var(--f-mono);font-size:11px;letter-spacing:.07em;fill:var(--steel-300);text-anchor:middle}
.loopfig__ret--sub{fill:var(--steel-500);font-size:10.5px}

/* Motion only on the .motion tier, which is never set under
   prefers-reduced-motion -- so the reduced path is a static circuit with
   the track drawn and nothing moving. */
html.motion .loopfig__pulse{opacity:1;animation:loop-run 7s linear infinite}
@keyframes loop-run{from{stroke-dashoffset:1000} to{stroke-dashoffset:0}}

/* Each node lights as the pulse reaches it. The delays are the node's
   distance along the circuit as a share of the 7s lap. */
html.motion .loopfig__n circle{
  animation:loop-ping 7s linear infinite;
  animation-delay:calc(var(--i,0) * 0.98s);
}
@keyframes loop-ping{
  0%   {fill:var(--ink-850);stroke:var(--steel-500);r:7}
  3%   {fill:var(--amber);stroke:var(--amber-hi);r:9.5}
  12%  {fill:var(--ink-850);stroke:var(--steel-500);r:7}
  100% {fill:var(--ink-850);stroke:var(--steel-500);r:7}
}

@media(max-width:520px){
  /* three mono labels across a 375px panel have ~77px of content width
     each; anything longer wraps and knocks its cell out of alignment */
  .strip__k{font-size:9px;letter-spacing:.08em}
  .strip__v{font-size:17px}
  .strip__i{padding:12px 12px}
  .panel__loop{padding:16px 12px 4px}
  .loopfig__lb{font-size:13px}
  .loopfig__ret{font-size:10px}
}

/* The equation, in place of the sparkline. It is the page's whole argument
   in one line and, unlike a chart, it asserts nothing about any account. */
.panel__eq{padding:15px 18px 16px;border-bottom:1px solid var(--ink-700);
  background:linear-gradient(90deg,rgba(240,163,44,.07),transparent 70%)}
.eq__k{display:block;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel-500);margin-bottom:10px}
.eq__row{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 10px}
.eq__out{font-family:var(--f-display);font-weight:700;font-size:clamp(17px,1.7vw,20px);
  letter-spacing:-.02em;color:var(--amber);font-style:normal}
.eq__op{font-family:var(--f-mono);font-size:16px;color:var(--steel-300);font-style:normal;font-weight:500}
.eq__term{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.04em;color:var(--steel-300);
  padding:4px 9px;border:1px solid var(--ink-600);border-radius:4px;background:rgba(255,255,255,.02)}
@media(max-width:400px){.eq__row{gap:6px 8px}.eq__term{font-size:11.5px;padding:3px 7px}}
.panel__foot{padding:11px 18px;border-top:1px solid var(--ink-700);background:rgba(0,0,0,.18);
  font-family:var(--f-mono);font-size:10.5px;color:var(--steel-500);letter-spacing:.02em}

/* ---------- Proof bar ---------- */
.proof{border-top:1px solid var(--ink-700);border-bottom:1px solid var(--ink-700);background:var(--ink-950)}
.proof__in{max-width:var(--w-wide);margin-inline:auto;padding-inline:var(--gutter);
  display:grid;gap:0}
@media(min-width:860px){.proof__in{grid-template-columns:repeat(3,1fr)}}
.proof__i{padding:22px 0;display:flex;gap:14px;align-items:flex-start;border-bottom:1px solid var(--ink-800)}
@media(min-width:860px){
  .proof__i{padding:26px 30px;border-bottom:0;border-right:1px solid var(--ink-800)}
  .proof__i:first-child{padding-left:0}
  .proof__i:last-child{border-right:0;padding-right:0}
}
.proof__i:last-child{border-bottom:0}
.proof__ic{flex:none;margin-top:2px}
.proof__t{color:#fff;font-weight:600;font-size:15px;margin-bottom:3px}
.proof__d{font-size:13.5px;color:var(--steel-400);line-height:1.5}

.trades{display:flex;flex-wrap:wrap;gap:0;max-width:var(--w-wide);margin-inline:auto;
  padding:14px var(--gutter);border-top:1px solid var(--ink-800);align-items:center}
.trades__lbl{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--steel-500);margin-right:18px;padding-block:4px}
.trades__i{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.13em;color:var(--steel-300);
  padding:4px 14px;border-left:1px solid var(--ink-800)}
.trades__i:first-of-type{border-left:0;padding-left:0}


/* ============================================================
   THE LEAK
   ============================================================ */
.leak__flow{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(20px,3vw,32px);
  box-shadow:0 1px 2px rgba(16,32,52,.05);
}
.leak__head{display:flex;flex-wrap:wrap;gap:16px;align-items:baseline;justify-content:space-between;
  padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:22px}
.leak__ht{font-family:var(--f-mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-3)}
.leak__score{display:flex;align-items:baseline;gap:10px}
.leak__score .num{font-size:clamp(30px,3.6vw,40px);color:var(--slate-900)}
.leak__arrow{font-family:var(--f-mono);color:var(--text-3);font-size:15px}
.leak__score .out{color:var(--booked-ink)}

.bar{display:flex;height:58px;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line-2)}
.seg{position:relative;transition:filter .2s var(--ease);cursor:default;border-right:2px solid var(--surface)}
.seg:last-child{border-right:0}
.seg--loss{
  background-color:#DCE3EB;
  background-image:repeating-linear-gradient(45deg,rgba(110,130,153,.55) 0 2px,transparent 2px 6px);
}
.seg--out{background:var(--booked-ink)}
.seg:hover{filter:brightness(.94)}
.seg--out:hover{filter:brightness(1.1)}
.seg__n{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-mono);
  font-size:12px;font-weight:600;color:#24344C}
.seg--out .seg__n{color:#fff;font-size:14px}
html.js .bar .seg{transform-origin:left;animation:none}

.legend{display:grid;gap:0;margin-top:22px;border-top:1px solid var(--line)}
@media(min-width:760px){.legend{grid-template-columns:1fr 1fr;column-gap:34px}}
.leg{display:flex;align-items:flex-start;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.leg__sw{width:14px;height:14px;flex:none;margin-top:4px;border-radius:2px;border:1px solid var(--line-2);
  background-color:#DCE3EB;background-image:repeating-linear-gradient(45deg,rgba(110,130,153,.55) 0 2px,transparent 2px 6px)}
.leg__sw--out{background:var(--booked-ink);border-color:var(--booked-ink);background-image:none}
.leg__n{font-family:var(--f-mono);font-size:13px;font-weight:600;color:var(--slate-900);flex:none;width:34px;text-align:right;
  font-variant-numeric:tabular-nums}
.leg__t{font-size:14.5px;color:var(--text-2);line-height:1.45}
.leg__t b{color:var(--slate-900);font-weight:600}
.leak__foot{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;
  font-family:var(--f-mono);font-size:11.5px;color:var(--text-3)}

.fix-note{
  margin-top:var(--sp-6);display:flex;gap:16px;align-items:flex-start;
  padding:20px 22px;background:var(--paper-100);border:1px solid var(--line);
  border-left:3px solid var(--amber-ink);border-radius:var(--r-sm);
}
.fix-note p{font-size:15.5px;color:var(--slate-700)}
.fix-note b{color:var(--slate-900)}

/* ============================================================
   THE LOOP
   ============================================================ */
.loop{display:grid;gap:0;border-top:1px solid var(--line)}
@media(min-width:900px){.loop{grid-template-columns:repeat(3,1fr)}}
.step{padding:34px 0;border-bottom:1px solid var(--line);position:relative}
@media(min-width:900px){
  .step{padding:36px 34px;border-bottom:0;border-right:1px solid var(--line)}
  .step:first-child{padding-left:0}
  .step:last-child{border-right:0;padding-right:0}
}
.step:last-child{border-bottom:0}
.step__n{
  font-family:var(--f-mono);font-size:12px;font-weight:600;letter-spacing:.1em;
  color:var(--amber);margin-bottom:16px;display:flex;align-items:center;gap:12px;
}
.step__n::after{content:"";height:1px;flex:1;background:var(--line-2);opacity:.6}
.step h3{margin-bottom:12px;color:var(--text)}
.step p{font-size:15.5px;color:var(--text-2);margin-bottom:18px}
.step__fig{margin-bottom:20px}
.chip{
  display:inline-flex;align-items:center;gap:8px;padding:7px 12px;
  border:1px solid var(--line-2);border-radius:999px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--text-3);
}
.chip b{color:var(--text);font-weight:500}
.chips{display:flex;flex-wrap:wrap;gap:8px}

.flowline{
  margin-top:var(--sp-8);border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);display:grid;overflow:hidden;
}
@media(min-width:780px){.flowline{grid-template-columns:repeat(4,1fr)}}
.fl{padding:20px 22px;border-bottom:1px solid var(--line);position:relative}
@media(min-width:780px){.fl{border-bottom:0;border-right:1px solid var(--line)}
  .fl:last-child{border-right:0}}
.fl:last-child{border-bottom:0}
.fl__k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:8px;display:block}
.fl__v{display:block;font-family:var(--f-display);font-weight:700;font-size:clamp(20px,2.2vw,26px);color:var(--text);
  letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.fl__s{display:block;font-family:var(--f-mono);font-size:11.5px;color:var(--text-3);margin-top:6px}
.fl--end .fl__v{color:var(--amber)}
.fl__mark{position:absolute;right:-1px;top:50%;transform:translate(50%,-50%);z-index:2;
  width:22px;height:22px;background:var(--surface);border:1px solid var(--line);border-radius:50%;
  display:none;place-items:center;font-family:var(--f-mono);font-size:11px;color:var(--text-3)}
@media(min-width:780px){.fl:not(:last-child) .fl__mark{display:grid}}

/* ============================================================
   HEATMAP / DATA
   ============================================================ */
.data-grid{display:grid;gap:var(--sp-6)}
@media(min-width:1080px){.data-grid{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:var(--sp-6);align-items:stretch}}
.hm{background:var(--ink-850);border:1px solid var(--ink-700);border-radius:var(--r-md);padding:clamp(18px,2.4vw,26px);
  display:flex;flex-direction:column}
.hm__t{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--steel-400);margin-bottom:16px}
.hm__grid{display:grid;grid-template-columns:34px repeat(12,minmax(0,1fr));gap:3px;align-items:center}
.hm__hr{grid-column:2/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px}
.hm__hl{font-family:var(--f-mono);font-size:9px;color:var(--steel-500);text-align:center;letter-spacing:.02em}
.hm__d{font-family:var(--f-mono);font-size:10px;color:var(--steel-400);letter-spacing:.08em}
.hm__c{aspect-ratio:1.75/1;border-radius:2px;position:relative;cursor:default;
  /* Square cells grew with the column width, so on a wide screen the
     grid ran past a screen height for what is a 7x12 table. Wider than
     tall keeps every cell on one screen; the floor stops them turning
     into slivers once the columns get narrow. */
  min-height:22px;max-height:46px;
  transition:transform .16s var(--ease),box-shadow .16s var(--ease),opacity .5s var(--ease)}
.hm__c:hover{transform:scale(1.22);box-shadow:0 0 0 2px var(--ink-850),0 0 0 3px var(--amber);z-index:3}
html.js .hm__c.is-off{opacity:0}
.hm__lg{display:flex;align-items:center;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--ink-700);
  font-family:var(--f-mono);font-size:10px;color:var(--steel-500);letter-spacing:.1em;flex-wrap:wrap}
.hm__ramp{display:flex;gap:2px}
.hm__ramp i{width:20px;height:9px;border-radius:1px;display:block}
.hm__ann{margin-top:16px;display:grid;gap:10px}
.ann{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--steel-300);line-height:1.45}
.ann__b{flex:none;width:11px;height:11px;border-radius:2px;margin-top:4px;border:1.5px solid var(--amber)}
.ann__b--low{border-color:var(--steel-500)}
.ann b{color:#fff;font-weight:600}

.stl{background:var(--ink-850);border:1px solid var(--ink-700);border-radius:var(--r-md);
  padding:clamp(18px,2.4vw,26px);display:flex;flex-direction:column}
.stl__rows{display:grid;gap:14px;margin-top:auto;padding-top:8px}
.stl__r{display:grid;grid-template-columns:74px minmax(0,1fr) 46px;align-items:center;gap:12px}
.stl__k{font-family:var(--f-mono);font-size:11.5px;color:var(--steel-300);letter-spacing:.02em}
.stl__track{height:11px;background:rgba(143,163,186,.12);border-radius:2px;overflow:hidden}
.stl__fill{display:block;height:100%;background:var(--series-1);border-radius:0 2px 2px 0;
  transition:width .9s var(--ease)}
.stl__r:first-child .stl__fill{background:var(--amber)}
.stl__v{font-family:var(--f-mono);font-size:12.5px;color:#fff;text-align:right;font-variant-numeric:tabular-nums}
.stl__note{margin-top:20px;padding-top:16px;border-top:1px solid var(--ink-700);
  font-size:13.5px;color:var(--steel-400);line-height:1.5}
.stl__note b{color:#fff;font-weight:600}
.foot-note{margin-top:var(--sp-6);font-family:var(--f-mono);font-size:11px;color:var(--steel-500);letter-spacing:.02em;line-height:1.6}

/* ============================================================
   SERVICES — hairline grid, not floating cards
   ============================================================ */
.svc{display:grid;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
@media(min-width:640px){.svc{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.svc{grid-template-columns:repeat(3,1fr)}}
.svc__i{padding:24px 26px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);
  transition:background .18s var(--ease);position:relative}
.svc__i:hover{background:var(--paper-50)}
.svc__i::after{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--amber);
  transition:width .3s var(--ease)}
.svc__i:hover::after{width:100%}
.svc__h{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.svc__i h4{color:var(--slate-900)}
.svc__i p{font-size:14px;color:var(--text-3);line-height:1.5}
.svc__ic{flex:none;color:var(--amber-ink)}

/* ============================================================
   WHY / INDUSTRIES / PROCESS
   ============================================================ */
.why{display:grid;gap:0;border-top:1px solid var(--line)}
@media(min-width:820px){.why{grid-template-columns:1fr 1fr;column-gap:var(--sp-7)}}
.why__i{padding:28px 0;border-bottom:1px solid var(--line)}
.why__i h3{font-size:20px;margin-bottom:10px;color:var(--slate-900);display:flex;align-items:baseline;gap:11px}
.why__i h3::before{content:"";width:9px;height:9px;flex:none;background:var(--amber);border-radius:1px;transform:translateY(-2px)}
.why__i p{font-size:15.5px;color:var(--text-2)}

.ind{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
@media(min-width:720px){.ind{grid-template-columns:1fr 1fr}}
.ind__i{padding:26px 28px;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.ind__h{display:flex;align-items:baseline;gap:12px;margin-bottom:10px}
.ind__h h3{font-size:clamp(21px,1.9vw,25px);line-height:1.2;letter-spacing:-.015em;color:var(--slate-900)}
/* Direct child on purpose. The heading splitter wraps h3 text in a
   <span class="w"> for its reveal, so a descendant selector here also
   caught the trade name itself and rendered it as 12px amber mono
   instead of a heading. */
.ind__h > span{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;color:#8A5409;font-weight:500}
.ind__i p{font-size:14.5px;color:var(--text-2);line-height:1.55}
.ind__more{grid-column:1/-1;padding:22px 28px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--paper-100);
  border-top:1px solid var(--line)}
/* Amber tags. The ground carries the colour and the text stays ink: brand
   amber on a light band is only 3.5:1 as a text colour, so tinting the pill
   reads unmistakably yellow while the trade name keeps full legibility. */
.ind__more span{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;color:#3D2A06;
  padding:5px 11px;background:rgba(240,163,44,.22);border:1px solid rgba(240,163,44,.55);border-radius:2px}
.ind__more .lbl{background:transparent;border:0;color:var(--text-3);padding-left:0}
/* ---- the long trade list travels ----
   Nine more trades is a wrapping block that nobody reads to the end. Running
   them past instead keeps the row one line tall and makes the length itself
   the point: the list is longer than the space. */
.ind__more{flex-wrap:nowrap}
.ind__vp{
  flex:1;min-width:0;overflow:clip;
  /* the ends fade rather than cutting, so items are never half-sliced */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 26px,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 26px,#000 calc(100% - 26px),transparent);
}
.ind__track{display:flex;flex-wrap:nowrap;width:max-content;gap:8px}
html.motion .ind--marquee .ind__track{animation:m-marquee 30s linear infinite}
/* pause on hover and while a keyboard user is inside it, so a name can
   actually be read rather than chased */
html.motion .ind--marquee:hover .ind__track,
html.motion .ind--marquee:focus-within .ind__track{animation-play-state:paused}

/* No motion tier: it falls back to the wrapping block it was before, rather
   than a clipped single line with eight trades hidden off the right edge. */
html:not(.motion) .ind__more{flex-wrap:wrap}
html:not(.motion) .ind__vp{overflow:visible;-webkit-mask-image:none;mask-image:none}
html:not(.motion) .ind__track{flex-wrap:wrap;width:auto}
@media (prefers-reduced-motion:reduce){
  .ind__more{flex-wrap:wrap}
  .ind__vp{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .ind__track{flex-wrap:wrap;width:auto;animation:none!important}
}

/* Photo slots — art-direction placeholders for the build */
.shots{display:grid;gap:12px;margin-top:var(--sp-6)}
@media(min-width:640px){.shots{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.shots{grid-template-columns:repeat(4,1fr)}}
.shot{
  aspect-ratio:4/5;border:1px dashed var(--line-light-2);border-radius:var(--r-sm);
  background:linear-gradient(150deg,#E4EAF1,#D6DFE9);
  padding:16px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;
}
.shot::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(60,80,104,.28) 1px,transparent 1px);background-size:14px 14px;opacity:.5}
.shot>*{position:relative}
.shot__k{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#42556F}
.shot__t{font-family:var(--f-mono);font-size:11.5px;line-height:1.5;color:#24344C}
.shot__t b{display:block;font-family:var(--f-display);font-size:15px;font-weight:700;color:var(--slate-900);
  letter-spacing:-.02em;margin-bottom:6px;font-stretch:104%}

/* The original layout: bare columns, a horizontal rail above each stage
   with a small hollow marker and a connector reaching toward the next one.
   Five across on a wide screen rather than the old four, because there are
   five stages now. */
.proc{position:relative;display:grid;gap:0;margin-top:var(--sp-7)}
@media(min-width:760px){.proc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1080px){.proc{grid-template-columns:repeat(5,minmax(0,1fr))}}
.proc__i{padding:0 0 30px;position:relative}
@media(min-width:760px){.proc__i{padding:0 26px 30px 0}}
.proc__rail{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.proc__dot{
  width:11px;height:11px;border-radius:50%;flex:none;
  background:var(--surface);border:2px solid var(--amber);
  font-size:0;color:transparent;                /* the number is for a11y order only */
}
.proc__line{height:1px;flex:1;background:var(--line-2)}
.proc__w{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent-text);margin-bottom:8px}
/* Matches the CLASS, not the element. These titles are <h3 class="h4">:
   h3 for the document outline (they sit under the section's h2), .h4 for
   the type scale. An element selector here silently stopped applying when
   the tag changed, which left them at 16px with no margin. */
.proc__i .h4{font-size:18px;margin-bottom:9px;color:var(--text);font-stretch:104%}
/* The deliverable is the part a reader is actually buying, so it is set
   apart from the description rather than trailing it as another sentence. */
/* Expandable, so a stage stays short by default and the columns keep the
   airy look they had with the old four-word descriptions. Native <details>:
   the same control the FAQ and the plan cards already use, which means it
   works with no JS, is keyboard-operable and is findable by in-page search
   in browsers that expand matches. */
.proc__more{margin-top:12px;padding-top:11px;border-top:1px solid var(--line-2)}
.proc__more summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:9px;
  padding:9px 15px;border:1px solid var(--line);border-radius:999px;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-text);background:rgba(240,163,44,.05);
}
html.motion .proc__more summary{transition:background-color var(--m-fast) var(--ease),border-color var(--m-fast) var(--ease),color var(--m-fast) var(--ease)}
.proc__more summary:hover{background:rgba(240,163,44,.12);border-color:var(--accent-text)}
.proc__more summary::-webkit-details-marker{display:none}
.proc__more summary::after{
  content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);
}
html.motion .proc__more summary::after{transition:transform var(--m-fast) var(--ease)}
.proc__more[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.proc__more summary:hover{color:var(--text)}
.proc__more summary:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px}
.proc__more-in{overflow:hidden}
.proc__more p{margin:13px 0 0;font-size:15px;line-height:1.62;color:var(--text-2);max-width:70ch}
/* the panel slides its own content up slightly as the box opens, so the
   text arrives rather than being revealed by a shutter */
html.motion .proc__more[open] .proc__more-in>p{animation:m-rise-sm .34s var(--ease) both}
@media(prefers-reduced-motion:no-preference){.proc__more[open] p{animation:m-answer .26s var(--ease)}}
/* a finger needs more than a 12px line of mono to aim at */
@media (any-pointer:coarse),(hover:none){.proc__more summary{min-height:44px}}
.proc__i p{font-size:14.5px;color:var(--text-2);line-height:1.55}
.terms{margin-top:var(--sp-6);padding:20px 24px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);display:flex;flex-wrap:wrap;gap:10px 30px}
.terms__i{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--text-2)}
.terms__i b{color:var(--text);font-weight:600}


/* ============================================================
   FINAL CTA
   ============================================================ */
.cta{position:relative;overflow:hidden}
.cta__glow{position:absolute;pointer-events:none;width:1000px;height:760px;left:50%;top:-260px;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(240,163,44,.15),rgba(240,163,44,0) 70%)}
.cta__grid{display:grid;gap:var(--sp-7)}
@media(min-width:960px){.cta__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,5vw,72px);align-items:start}}
.cta h2{margin-bottom:var(--sp-5)}
.cta__body{color:var(--text-lead,var(--steel-300));max-width:50ch;margin-bottom:var(--sp-6)}
.gets{display:grid;gap:0;border-top:1px solid var(--ink-700)}
.get{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--ink-700);align-items:flex-start}
.get__ic{flex:none;margin-top:2px}
.get__t{color:#fff;font-weight:600;font-size:15px;margin-bottom:2px}
.get__d{font-size:13.5px;color:var(--steel-400);line-height:1.5}

.form{background:var(--ink-850);border:1px solid var(--ink-700);border-radius:var(--r-lg);padding:clamp(22px,3vw,32px)}
.form__t{font-family:var(--f-mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--steel-400);margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--ink-700)}
.fields{display:grid;gap:14px}
@media(min-width:520px){.fields{grid-template-columns:1fr 1fr}.f--full{grid-column:1/-1}}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--steel-500)}
.field input,.field select{
  height:50px;padding:0 14px;background:var(--ink-900);color:#fff;
  border:1px solid var(--ink-700);border-radius:var(--r-sm);
  font-family:var(--f-body);font-size:15px;width:100%;
  transition:border-color .18s var(--ease),background .18s var(--ease);
  appearance:none;
}
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--steel-400) 50%),linear-gradient(135deg,var(--steel-400) 50%,transparent 50%);
  background-position:calc(100% - 19px) 22px,calc(100% - 14px) 22px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px;
}
.field input::placeholder{color:var(--steel-500)}
/* A colour-only focus cue fails for anyone who cannot resolve the amber
   against the navy. Keep the border change and add a real ring. */
.field input:focus-visible,.field select:focus-visible,.form__submit:focus-visible{
  border-color:var(--amber);background:#0C1929;
  outline:2px solid var(--amber);outline-offset:2px}
.field input:focus,.field select:focus{border-color:var(--amber);background:#0C1929}

/* Error state is never signalled by colour alone: the field gets a border,
   an icon-free message underneath and aria-invalid for assistive tech. */
.field__err{margin:0;font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;
  color:#F2856F;line-height:1.45}
.field input[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:#E1614C}
.form__alert{margin:16px 0 0;padding:12px 14px;border:1px solid #E1614C;border-radius:var(--r-sm);
  background:rgba(225,97,76,.10);color:#F2856F;font-size:14px;line-height:1.5}
.form.is-busy .form__submit{opacity:.6;pointer-events:none}

/* Honeypot: out of flow and out of the accessibility tree, but still a
   real rendered input so bots that skip display:none still fill it. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.form__submit{margin-top:20px}
.form__fine{margin-top:14px;font-family:var(--f-mono);font-size:11px;color:var(--steel-500);line-height:1.6;text-align:center}
.form__ok{display:none;padding:26px 4px;text-align:center}
.form__ok h3{color:#fff;margin-bottom:10px;font-size:22px}
.form__ok p{color:var(--steel-400);font-size:14.5px}
.form.is-sent .fields,.form.is-sent .form__submit,.form.is-sent .form__fine{display:none}
.form.is-sent .form__ok{display:block}

/* ============================================================
   FOOTER
   ============================================================ */
.ft{background:var(--ink-950);border-top:1px solid var(--ink-700);padding-block:var(--sp-8) var(--sp-6)}
.ft__grid{display:grid;gap:var(--sp-7)}
@media(min-width:620px){.ft__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6) var(--sp-7)}}
@media(min-width:1000px){.ft__grid{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:var(--sp-7)}}
.ft__blurb{font-size:14.5px;color:var(--steel-400);max-width:34ch;margin-top:16px;line-height:1.6}
.ft .ft__h{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.15em;text-transform:none;
  color:var(--steel-500);font-weight:500;margin-bottom:16px}
.ft__col{display:flex;flex-direction:column;gap:11px}
.ft__col a{font-size:14.5px;overflow-wrap:anywhere;color:var(--steel-300);text-decoration:none;transition:color .16s var(--ease);width:fit-content}
.ft__col a:hover{color:var(--amber)}

/* Contact links carry their channel's mark. currentColor on the path means
   the icon inherits the link's colour, so idle / hover / focus are one rule
   rather than three. Inline SVG, not an icon font: the page loads no
   external scripts and should not start for two glyphs. */
.ft__col--icon a{display:inline-flex;align-items:center;gap:10px;overflow-wrap:anywhere}
.ft__col--icon svg{width:17px;height:17px;flex:none;color:var(--steel-500)}
html.motion .ft__col--icon svg{transition:color var(--m-fast) var(--ease),translate var(--m-fast) var(--ease)}
.ft__col--icon a:hover svg{color:var(--amber);translate:1px 0}
@media (prefers-reduced-motion:reduce){.ft__col--icon svg{transition:none!important}}
.ft__bot{margin-top:var(--sp-8);padding-top:22px;border-top:1px solid var(--ink-800);
  display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;
  font-family:var(--f-mono);font-size:11px;color:var(--steel-500);letter-spacing:.02em}
.ft__bot .sp{margin-left:auto}

/* ============================================================
   MOBILE STICKY CTA
   ============================================================ */
.mbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:rgba(6,12,23,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:1px solid var(--ink-700);
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:14px;
  transform:translateY(110%);transition:transform .34s var(--ease);
}
.mbar.is-on{transform:translateY(0)}
@media(min-width:900px){.mbar{display:none}}
.mbar__t{flex:1;min-width:0}
.mbar__t b{display:block;color:#fff;font-size:13.5px;font-weight:600;line-height:1.25}
.mbar__t span{font-family:var(--f-mono);font-size:10.5px;color:var(--steel-500);letter-spacing:.05em}

/* ============================================================
   RESPONSIVE: real transformations, not shrinks
   ============================================================ */
@media(max-width:900px){
  body{font-size:16px}
  .hero__glow{width:600px;right:-200px}
}
@media(max-width:620px){
  :root{--nav-h:66px}
  .h1{font-size:clamp(33px,8.6vw,44px)}
  .proof__in{padding-inline:var(--gutter)}
  .seg__n{font-size:10px}
  .bar{height:46px}
  .trades{gap:4px 0}
  .terms{flex-direction:column;gap:12px}
  .ft__bot .sp{margin-left:0}
}
/* Heatmap collapse: 12 hourly cols → 4 named blocks */
.hm__c--m{display:none}
@media(max-width:860px){
  .hm__grid{grid-template-columns:40px repeat(4,minmax(0,1fr));gap:5px}
  .hm__hr{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
  .hm__c--d{display:none}
  .hm__c--m{display:block;aspect-ratio:2.1/1;border-radius:2px}
  .hm__hl{font-size:9.5px}
}


  .hm__hl--m{display:none}
  @media(max-width:860px){ .hm__hl--d{display:none} .hm__hl--m{display:block} }


:root{
  --m-fast:170ms;
  --m-base:300ms;
  --m-slow:620ms;
  --m-spring:cubic-bezier(.34,1.4,.64,1);
}

/* ============ shared keyframes ============ */
@keyframes m-rise   {from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none}}
@keyframes m-rise-sm{from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none}}
@keyframes m-slide-l{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
@keyframes m-fade   {from{opacity:0} to{opacity:1}}
@keyframes m-line   {from{opacity:0;transform:translateY(105%)} to{opacity:1;transform:none}}
@keyframes m-wipe   {from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)}}
@keyframes m-scale-x{from{transform:scaleX(0)} to{transform:scaleX(1)}}
@keyframes m-pop    {from{opacity:0;transform:scale(.4)} to{opacity:1;transform:scale(1)}}
@keyframes m-cell   {from{opacity:0;transform:scale(.55)} to{opacity:1;transform:scale(1)}}

/* ============ 1. LOAD CHOREOGRAPHY (hero) ============ */
/* The hero is the only thing that animates on load. Everything below the
   fold waits for the reader rather than playing to an empty room. */
.h1--split .ln{display:block;overflow:hidden}
.h1--split .ln>span{display:block}

html.motion .h1--split .ln>span,
html.motion .hero .eyebrow,
html.motion .hero__sub,
html.motion .hero__actions,
html.motion .hero__note,
html.motion .hero .panel{
  animation:m-line var(--m-slow) var(--ease) both;
}
html.motion .hero .eyebrow  {animation-name:m-rise-sm;animation-delay:.05s}
html.motion .h1--split .ln:nth-child(1)>span{animation-delay:.16s}
html.motion .h1--split .ln:nth-child(2)>span{animation-delay:.25s}
html.motion .h1--split .ln:nth-child(3)>span{animation-delay:.34s}
html.motion .hero__sub      {animation-name:m-rise-sm;animation-delay:.50s}
html.motion .hero__actions  {animation-name:m-rise-sm;animation-delay:.60s}
html.motion .hero__note     {animation-name:m-fade;  animation-delay:.72s}
html.motion .hero .panel    {animation-name:m-rise;   animation-delay:.42s}

/* the readout's rows cascade after the panel lands */
html.motion .hero .chain__cell{animation:m-rise-sm .5s var(--ease) both}
html.motion .hero .chain__cell:nth-child(1){animation-delay:.62s}
html.motion .hero .chain__cell:nth-child(2){animation-delay:.70s}
html.motion .hero .chain__cell:nth-child(3){animation-delay:.78s}
html.motion .hero .chain__cell:nth-child(4){animation-delay:.86s}

/* ============ 2. AMBIENT ============ */
@keyframes m-drift{
  0%  {transform:translate3d(0,0,0) scale(1)}
  50% {transform:translate3d(2.5%,-2%,0) scale(1.06)}
  100%{transform:translate3d(0,0,0) scale(1)}
}
html.motion .hero__glow{animation:m-drift 46s ease-in-out infinite;will-change:transform}

@keyframes m-pulse{
  0%,100%{opacity:1;   box-shadow:0 0 0 0 rgba(37,160,126,.55)}
  70%    {opacity:.85; box-shadow:0 0 0 6px rgba(37,160,126,0)}
}
html.motion .dot-live{animation:m-pulse 2.4s ease-out infinite}

/* Two equal sets form one continuous row; each set fills the viewport. */
@keyframes m-marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.proof--marquee{overflow:clip}
.proof--marquee .proof__in{
  display:flex;
  flex-wrap:nowrap!important;
  gap:0;
  width:max-content;
  max-width:none;
  margin:0;
  padding:0;
  animation:m-marquee 24s linear infinite;
}
.proof--marquee:hover .proof__in{animation-play-state:paused}
.proof--marquee .proof__i{
  flex:0 0 max(320px,calc(100vw / 3));
  max-width:none;
  padding:26px 30px;
  border-bottom:0;
  border-right:1px solid var(--ink-800);
}
.proof--marquee .proof__i[aria-hidden="true"]{user-select:none}
@media(prefers-reduced-motion:reduce){
  .proof--marquee .proof__i[aria-hidden="true"]{display:none}
}

/* ============ 3. SCROLL-DRIVEN (tier 1) ============ */
@supports (animation-timeline: view()){
  html.cssmotion [data-rv]{transition:none}
  html.cssmotion [data-rv].is-off{opacity:1;transform:none}

  /* the general reveal: everything marked [data-rv] rises as it enters */
  html.cssmotion [data-rv]{
    animation:m-rise linear both;
    animation-timeline:view();
    animation-range:entry 2% cover 20%;
  }
  /* the hero panel already animated on load; don't re-run it on scroll */
  html.cssmotion .hero [data-rv]:not(.panel){animation:none}

  /* --- section heads lead their own section --- */
  html.cssmotion .sec-head{animation-range:entry 0% cover 16%}

  /* --- THE LEAK: the bar wipes open, then each legend row lands in turn.
         Scroll is the reader carving into their own hundred calls. --- */
  html.cssmotion #leak .bar{
    animation:m-wipe linear both;
    animation-timeline:view();
    animation-range:entry 18% cover 42%;
  }
  html.cssmotion #leak .leg{
    animation:m-slide-l linear both;
    animation-timeline:view();
    animation-range:entry calc(26% + var(--i,0)*7%) entry calc(62% + var(--i,0)*7%);
  }

  /* --- THE LOOP: three stages arrive in the order they are run --- */
  html.cssmotion #loop .step{
    animation:m-rise linear both;
    animation-timeline:view();
    animation-range:entry calc(4% + var(--i,0)*10%) cover calc(18% + var(--i,0)*10%);
  }

  /* --- THE HEAT MAP sweeps left to right under the reader's thumb.
         Every cell reads the GRID's crossing, not its own: a named view
         timeline on .hm is visible to its descendants, so all 112 cells
         share one clock and --i (the column) is what separates them.
         view() per-cell would resolve row by row instead, because each
         cell has its own vertical position. --- */
  html.cssmotion .hm{view-timeline-name:--hmgrid}
  html.cssmotion .hm__c{
    animation:m-cell linear both;
    animation-timeline:--hmgrid;
    animation-range:entry 26% entry calc(52% + var(--i,0)*3.2%);
  }

  /* --- THE PROCESS ladder builds left to right, stage by stage.
         .proc__line is a horizontal flex:1 connector, so this is scaleX
         from the left, not a vertical draw.

         The clock is named on .proc rather than taken per-element: the
         connectors all sit at the same height, so a per-element view()
         hands them identical timing and the ladder draws in unison. One
         shared timeline plus --i builds it in reading order — each dot
         lands first, then the line reaches from it toward the next. --- */
  html.cssmotion .proc{view-timeline-name:--procladder}
  /* Ranges run against cover, not entry. The entry phase of a wide, shallow
     element is only its own height of scrolling — roughly 200px here — and
     a four-stage build inside that is gone before it registers. Cover spans
     the element's whole crossing, so the ladder builds over ~500px. */
  /* The badge lights as the reader reaches its stage and stays lit --
     fill:both holds the end state, so scrolling back up shows a rail that
     is lit down to where you got to. */
  html.cssmotion .proc__dot{
    animation:m-pop linear both;
    animation-timeline:--procladder;
    animation-range:cover calc(6% + var(--i,0)*7%) cover calc(18% + var(--i,0)*7%);
  }
  html.cssmotion .proc__line{
    transform-origin:left center;
    animation:m-scale-x linear both;
    animation-timeline:--procladder;
    animation-range:cover calc(11% + var(--i,0)*7%) cover calc(27% + var(--i,0)*7%);
  }
  html.cssmotion .proc__i .proc__w{
    animation:m-rise-sm linear both;
    animation-timeline:--procladder;
    animation-range:cover calc(9% + var(--i,0)*7%) cover calc(22% + var(--i,0)*7%);
  }
  html.cssmotion .proc__i .h4{
    animation:m-rise-sm linear both;
    animation-timeline:--procladder;
    animation-range:cover calc(12% + var(--i,0)*7%) cover calc(25% + var(--i,0)*7%);
  }
  html.cssmotion .proc__i>p{
    animation:m-rise-sm linear both;
    animation-timeline:--procladder;
    animation-range:cover calc(15% + var(--i,0)*7%) cover calc(29% + var(--i,0)*7%);
  }

  /* --- the ruler dividers travel, like a tape drawn past the reader.
         The whole brand is measurement; this is the page admitting it. --- */
  @keyframes m-ticks{from{background-position-x:-16px} to{background-position-x:16px}}
  @keyframes m-ticks-major{from{background-position-x:-64px} to{background-position-x:64px}}
  html.cssmotion .tick-rule::after{
    animation:m-ticks linear both;
    animation-timeline:view();
    animation-range:cover 0% cover 100%;
  }
  html.cssmotion .tick-rule--major::after{animation-name:m-ticks-major}

  /* --- service / industry / trade cards cascade in their grids --- */
  html.cssmotion .svc__i,
  html.cssmotion .why__i,
  html.cssmotion .trades__i,
  html.cssmotion .terms__i{
    animation:m-rise-sm linear both;
    animation-timeline:view();
    animation-range:entry calc(4% + var(--i,0)*6%) cover calc(16% + var(--i,0)*6%);
  }

  /* The four terms sit on ONE row, so a per-element view() gives them the
     same crossing and --i buys nothing -- they were arriving in unison.
     A clock named on the strip is what turns them back into a sequence.
     Stated after the group rule above so it wins on order. */
  html.cssmotion .terms{view-timeline-name:--terms}
  html.cssmotion .terms__i{
    animation-timeline:--terms;
    animation-range:entry calc(16% + var(--i,0)*11%) entry calc(62% + var(--i,0)*11%);
  }

  /* --- speed-to-lead bars fill on scroll, matching the heat map beside
         them rather than firing on a timer --- */
  /* A named clock on the rows container, not per-bar view(): each bar is
     11px tall, so its own entry phase is a few pixels of scroll and the
     --i stagger meant nothing. Shared clock plus a tight range fills all
     five inside roughly a third of the panel's crossing. */
  html.cssmotion .stl__rows{view-timeline-name:--stl}
  html.cssmotion .stl__fill{
    animation:m-scale-x linear both;
    animation-timeline:--stl;
    animation-range:entry calc(26% + var(--i,0)*4%) entry calc(52% + var(--i,0)*4%);
    transform-origin:left center;
  }
}

/* ============ 4. INTERACTION ============ */
html.motion .btn{
  transition:transform var(--m-fast) var(--ease),
             box-shadow var(--m-fast) var(--ease),
             background-color var(--m-fast) var(--ease),
             color var(--m-fast) var(--ease);
}
html.motion .btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px -8px rgba(240,163,44,.55)}
html.motion .btn:active{transform:translateY(0);transition-duration:60ms}

/* nav links: the underline wipes from the side you came from */
.nav__link{position:relative}
.nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:-5px;height:1.5px;
  background:var(--amber);transform:scaleX(0);transform-origin:right center;
}
html.motion .nav__link::after{transition:transform var(--m-base) var(--ease)}
.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link.is-active::after{transform:scaleX(1);transform-origin:left center}

/* cards lift, and their rule brightens with them */
html.motion .svc__i,
html.motion .why__i,
html.motion .step,
html.motion .trades__i{
  transition:transform var(--m-base) var(--ease),
             border-color var(--m-base) var(--ease),
             background-color var(--m-base) var(--ease);
}
html.motion .svc__i:hover,
html.motion .why__i:hover,
html.motion .step:hover,
html.motion .trades__i:hover{transform:translateY(-3px);border-color:var(--line-2)}

html.motion .seg{transition:filter var(--m-fast) var(--ease),transform var(--m-fast) var(--ease)}
html.motion .hm__c{transition:transform var(--m-fast) var(--m-spring),box-shadow var(--m-fast) var(--ease)}
html.motion .chip,html.motion .tag{transition:background-color var(--m-fast) var(--ease),border-color var(--m-fast) var(--ease)}

/* the nav settles when it sticks rather than snapping */
html.motion .nav{transition:background-color var(--m-base) var(--ease),
                            box-shadow var(--m-base) var(--ease),
                            border-color var(--m-base) var(--ease)}

/* form: label lifts to meet a focused field */
html.motion .field label{transition:color var(--m-fast) var(--ease),transform var(--m-fast) var(--ease)}
html.motion .field:focus-within label{color:var(--amber);transform:translateX(2px)}
html.motion .field input,html.motion .field select{
  transition:border-color var(--m-fast) var(--ease),background-color var(--m-fast) var(--ease)}
html.motion .form__ok{animation:m-rise .5s var(--ease) both}

/* mobile drawer and sticky bar slide rather than appear */
html.motion .drawer{transition:transform var(--m-base) var(--ease),opacity var(--m-base) var(--ease)}
html.motion #mbar{transition:transform var(--m-base) var(--ease),opacity var(--m-base) var(--ease)}

/* ============ 5. REDUCED MOTION ============ */
/* .motion is never added under prefers-reduced-motion, so tiers 1 and 2
   cannot run. This is the belt-and-braces for anything that slipped in
   through a media query or a browser that reports the preference late. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:1ms!important;
    animation-iteration-count:1!important;
    transition-duration:1ms!important;
    scroll-behavior:auto!important;
  }
  .h1--split .ln>span,.hero .panel,.hero__sub,.hero__actions,
  .proof--marquee .proof__in{animation:none!important;opacity:1!important;transform:none!important}
  .proof--marquee .proof__in{width:auto;flex-wrap:wrap!important}
}


/* ============ BACKGROUND 1: scene grading ============
   One fixed plate. Bands are position:relative with z-index:auto, so they
   create no stacking context: a fixed z-index:0 layer paints above their
   grounds and below .band--dark>* (z-index:1). Grounds get graded, text
   does not. Very low alpha — this is the difference between one flat
   ground for 9,000px and a page that feels like it passes through places. */
.tint{position:fixed;inset:0;pointer-events:none;z-index:0}
@keyframes m-grade{
  0%  {background-color:rgba(10,21,38,0)}
  18% {background-color:rgba(18,26,44,.22)}
  38% {background-color:rgba(10,20,30,.18)}
  58% {background-color:rgba(32,22,16,.16)}
  78% {background-color:rgba(14,24,40,.22)}
  100%{background-color:rgba(10,21,38,0)}
}
html.cssmotion .tint{
  animation:m-grade linear both;
  animation-timeline:scroll(root);
}

/* ============ BACKGROUND 2: the dot grid drifts ============
   The engineering-paper texture already on dark bands, now parallaxing
   against the content as each band crosses the viewport. */
@keyframes m-grid{from{background-position:0 -46px} to{background-position:0 46px}}
html.cssmotion .band--dark::before{
  animation:m-grid linear both;
  animation-timeline:view();
  animation-range:cover 0% cover 100%;
}

/* ============ BACKGROUND 3: signal sweep ============
   A slow amber sheen crossing each dark band, like a trace refreshing.
   Staggered so no two bands sweep in unison. */
@keyframes m-sweep{
  0%      {transform:translateX(-70%) skewX(-14deg);opacity:0}
  10%     {opacity:1}
  60%     {opacity:1}
  100%    {transform:translateX(190%) skewX(-14deg);opacity:0}
}
html.motion .band--dark::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:38%;
  pointer-events:none;z-index:0;
  background:linear-gradient(100deg,
    transparent 0%,
    rgba(240,163,44,.035) 42%,
    rgba(255,193,99,.075) 50%,
    rgba(240,163,44,.035) 58%,
    transparent 100%);
  animation:m-sweep 17s cubic-bezier(.5,0,.5,1) infinite;
}
html.motion .band--dark:nth-of-type(2n)::after{animation-delay:-6s;animation-duration:21s}
html.motion .band--dark:nth-of-type(3n)::after{animation-delay:-12s;animation-duration:19s}

/* ============ BACKGROUND 4: blueprint rule on light bands ============
   Light bands are paper. Give them a faint drafting grid that slides a
   few pixels as they pass — legible only as depth, never as pattern. */
html.motion .band--light{position:relative;isolation:auto}
html.motion .band--light::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(90deg,rgba(94,114,144,.14) 1px,transparent 1px),
    linear-gradient(rgba(94,114,144,.14) 1px,transparent 1px);
  background-size:96px 96px;
  opacity:.5;
}
@keyframes m-blueprint{from{background-position:0 -30px,0 -30px} to{background-position:0 30px,0 30px}}
html.cssmotion .band--light::before{
  animation:m-blueprint linear both;
  animation-timeline:view();
  animation-range:cover 0% cover 100%;
}
html.motion .band--light>*{position:relative;z-index:1}

/* ============ BACKGROUND 5: hero depth ============
   Two extra layers on the existing glow div: a slow counter-rotating
   wash and a horizon scanline that sweeps once every few seconds. */
html.motion .hero__glow::before,
html.motion .hero__glow::after{content:"";position:absolute;inset:-30%;pointer-events:none}
@keyframes m-wash{from{transform:rotate(0deg) scale(1)} to{transform:rotate(360deg) scale(1.12)}}
html.motion .hero__glow::before{
  background:conic-gradient(from 0deg,transparent 0deg,rgba(240,163,44,.07) 70deg,transparent 150deg,transparent 360deg);
  animation:m-wash 64s linear infinite;
}
@keyframes m-scan{
  0%  {transform:translateY(-120%);opacity:0}
  18% {opacity:.9}
  82% {opacity:.9}
  100%{transform:translateY(320%);opacity:0}
}
html.motion .hero__glow::after{
  inset:0;height:1px;top:0;
  background:linear-gradient(90deg,transparent,rgba(255,193,99,.5),transparent);
  animation:m-scan 9s cubic-bezier(.4,0,.5,1) infinite;
}

/* ============ ELEMENT 1: nav scroll progress ============
   The page's whole proposition is measurement. A literal measure of how
   far you have read is on-brand rather than decorative. */
html.cssmotion .nav::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--amber),var(--amber-hi));
  transform-origin:left center;transform:scaleX(0);
  animation:m-scale-x linear both;
  animation-timeline:scroll(root);
}

/* ============ ELEMENT 2: buttons take a shine ============ */
.btn{position:relative;overflow:hidden}
html.motion .btn::after{
  content:"";position:absolute;top:0;bottom:0;left:-40%;width:34%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.30),transparent);
  transform:translateX(-140%) skewX(-18deg);pointer-events:none;
}
@keyframes m-shine{to{transform:translateX(520%) skewX(-18deg)}}
html.motion .btn:hover::after{animation:m-shine .72s var(--ease)}
html.motion .btn--ghost::after{background:linear-gradient(100deg,transparent,rgba(240,163,44,.22),transparent)}

/* ============ ELEMENT 3: section heads draw their own rule ============ */
html.motion .sec-head{position:relative}
html.motion .sec-head::after{
  content:"";position:absolute;left:0;bottom:-18px;height:1px;width:100%;
  background:linear-gradient(90deg,var(--accent-text),transparent 62%);
  transform:scaleX(0);transform-origin:left center;opacity:.55;
}
@supports (animation-timeline: view()){
  html.cssmotion .sec-head::after{
    animation:m-scale-x linear both;
    animation-timeline:view();
    animation-range:entry 12% cover 24%;
  }
}

/* ============ ELEMENT 4: the eyebrow settles ============ */
@keyframes m-track{from{opacity:0;letter-spacing:.42em} to{opacity:1;letter-spacing:.16em}}
@supports (animation-timeline: view()){
  html.cssmotion .eyebrow{
    animation:m-track linear both;
    animation-timeline:view();
    animation-range:entry 4% cover 18%;
  }
}

/* ============ ELEMENT 5: status pills and tags pop in ============ */
@supports (animation-timeline: view()){
  html.cssmotion .st,html.cssmotion .tag{
    animation:m-pop linear both;
    animation-timeline:view();
    animation-range:entry 10% entry 62%;
  }
}
html.motion .st::before{transition:transform var(--m-fast) var(--m-spring)}

/* ============ ELEMENT 6: SVG traces draw themselves ============
   stroke-dashoffset is set inline by the reveal script; on a scroll
   timeline the path draws under the reader's own scroll instead. */
@keyframes m-draw{from{stroke-dashoffset:var(--len,600)} to{stroke-dashoffset:0}}
@supports (animation-timeline: view()){
  html.cssmotion .draw,html.cssmotion .spark{
    animation:m-draw linear both;
    animation-timeline:view();
    animation-range:entry 16% cover 34%;
  }
}

/* ============ ELEMENT 7: icons answer their card ============ */
html.motion .proof__ic,html.motion .svc__h svg,html.motion .fix-note svg{
  transition:transform var(--m-base) var(--m-spring)}
html.motion .proof__i:hover .proof__ic{transform:translateY(-2px) scale(1.12)}
html.motion .svc__i:hover .svc__h svg{transform:rotate(-8deg) scale(1.1)}

/* ============ ELEMENT 8: heat-map column highlight ============ */
html.motion .hm__c:hover{z-index:4}
html.motion .hm__lg .hm__ramp{transition:filter var(--m-base) var(--ease)}
html.motion .hm:hover .hm__ramp{filter:brightness(1.15)}

/* ============ ELEMENT 9: footer and text links ============ */
html.motion .ft a,html.motion .tlink{
  background-image:linear-gradient(var(--accent-text),var(--accent-text));
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size var(--m-base) var(--ease),color var(--m-fast) var(--ease);
}
html.motion .ft a:hover,html.motion .ft a:focus-visible,
html.motion .tlink:hover,html.motion .tlink:focus-visible{background-size:100% 1px}

/* ============ ELEMENT 10: the leak bar breathes on hover ============ */
html.motion .bar:hover .seg{filter:brightness(.9)}
html.motion .bar .seg:hover{filter:brightness(1.06);transform:translateY(-2px)}

/* ============ reduced motion: every layer above stops ============ */
@media (prefers-reduced-motion:reduce){
  .tint,
  .band--dark::after,
  .hero__glow::before,.hero__glow::after,
  .btn::after{display:none!important}
  .band--light::before{animation:none!important}
  .sec-head::after,.nav::after{transform:scaleX(1)!important;animation:none!important}
  .eyebrow{letter-spacing:.16em!important}
}


/* ============ POINTER GLOW ============
   One fixed layer that follows the pointer. Position comes from --mx/--my,
   written on a rAF tick, so the browser only ever composites a transform.
   Hidden entirely on touch: there is no cursor to follow, and painting a
   520px radial on every tap is pure cost. */
.cursorglow{
  position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;
  pointer-events:none;z-index:2;opacity:0;
  background:radial-gradient(circle closest-side,
    rgba(240,163,44,.13),rgba(240,163,44,.05) 45%,transparent 70%);
  transform:translate3d(var(--mx,-9999px),var(--my,-9999px),0);
  transition:opacity .4s var(--ease);
  will-change:transform;
}
html.motion .cursorglow.is-on{opacity:1}
@media (hover:none),(pointer:coarse){.cursorglow{display:none}}

/* card spotlight: the same idea, local to whatever you are pointing at.
   --px/--py are percentages within the card, so one delegated listener
   serves every card on the page. */
html.motion .svc__i,html.motion .step,html.motion .why__i,html.motion .trades__i{position:relative}
html.motion .svc__i::before,html.motion .step::before,
html.motion .why__i::before,html.motion .trades__i::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  border-radius:inherit;opacity:0;
  background:radial-gradient(220px circle at var(--px,50%) var(--py,50%),
    rgba(240,163,44,.16),rgba(240,163,44,.05) 40%,transparent 70%);
  transition:opacity .32s var(--ease);
}
html.motion .svc__i:hover::before,html.motion .step:hover::before,
html.motion .why__i:hover::before,html.motion .trades__i:hover::before{opacity:1}
html.motion .svc__i>*,html.motion .step>*,
html.motion .why__i>*,html.motion .trades__i>*{position:relative;z-index:1}

/* ============ TEXT ============
   Words are wrapped in script. The timeline name is declared on the block
   itself and every block reuses the SAME name: a name resolves to the
   nearest ancestor that declares it, so each paragraph drives its own
   words without needing a unique name per paragraph.
   --step is the per-word offset, computed from the word count so a long
   paragraph does not run past the end of its own scroll range. */

/* lede text lights up word by word as it is read */
@keyframes m-word{from{color:var(--tx-dim)} to{color:var(--tx-lit)}}
.tx{--tx-dim:var(--text-3);--tx-lit:var(--text-2)}
@supports (animation-timeline: view()){
  html.cssmotion .tx{view-timeline-name:--tx}
  html.cssmotion .tx .w{
    animation:m-word linear both;
    animation-timeline:--tx;
    /* Two numbers set the pace: the 5% gap between start and end is how
       long a single word takes to light, and --step (below) is how far
       apart consecutive words fire. Both are deliberately tight — a lede
       is read in about a second, and a scrub slower than reading turns
       the copy into a progress bar. */
    animation-range:cover calc(12% + var(--i,0)*var(--step,1)*1%)
                    cover calc(17% + var(--i,0)*var(--step,1)*1%);
  }
}

/* headings assemble a word at a time */
.hx .w{display:inline-block}
@supports (animation-timeline: view()){
  html.cssmotion .hx{view-timeline-name:--hx}
  html.cssmotion .hx .w{
    animation:m-rise-sm linear both;
    animation-timeline:--hx;
    animation-range:entry calc(8% + var(--i,0)*var(--step,3)*1%)
                    cover calc(21% + var(--i,0)*var(--step,3)*1%);
  }
}

/* sub-heads and card titles rise on their own crossing — they sit at
   distinct heights, so they do not need a shared clock */
@supports (animation-timeline: view()){
  html.cssmotion .h3:not(.hx),html.cssmotion .h4{
    animation:m-rise-sm linear both;
    animation-timeline:view();
    animation-range:entry 6% cover 20%;
  }
}

/* the hero's amber phrase carries a slow highlight across it.
   Guarded: without background-clip:text the text would render invisible. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  @keyframes m-shimmer{from{background-position:0 0} to{background-position:200% 0}}
  html.motion .h1--split em{
    background-image:linear-gradient(100deg,
      var(--amber) 0%,var(--amber) 18%,var(--amber-hi) 32%,
      #FFE7BE 42%,var(--amber-hi) 52%,var(--amber) 70%,var(--amber) 100%);
    background-size:220% 100%;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
    animation:m-shimmer 8s linear infinite;
  }
}

/* links and inline emphasis inside prose */
html.motion .lead a,html.motion p a{transition:color var(--m-fast) var(--ease)}

@media (prefers-reduced-motion:reduce){
  .cursorglow{display:none!important}
  .tx .w{color:inherit!important;animation:none!important}
  .hx .w{animation:none!important;opacity:1!important;transform:none!important}
  .h1--split em{animation:none!important}
}


/* ---- scroll-container trap ----
   overflow:hidden makes an element a scroll container. A descendant using
   animation-timeline:view() is then measured against THAT box rather than
   the page, and since these boxes never scroll, the timeline resolves once
   and sits frozen — 85 elements across this page were stuck that way.

   overflow:clip clips identically without establishing a scrollport, so
   the timelines resolve against the real one. The hidden declaration each
   of these already carries stays as the fallback for engines without clip.

   Note clip does not establish a block formatting context the way hidden
   does. Nothing here floats and every one of these is a flex or grid
   parent, so there is no float to contain and no margin to collapse. */
@supports (overflow: clip){
  .hero,.cta,.proof,.panel,.svc,.stl__track{overflow:clip}
}


/* ============================================================
     DEPTH — 3D + TRANSLUCENCY
     ============================================================ */

/* ---- the transform-property split ----
   A CSS animation outranks every normal declaration, so an entrance that
   animates `transform` with fill:both owns that property forever and any
   :hover transform silently loses. (That is exactly what had killed the
   card hover lift.) `translate` and `rotate` are independent properties
   that compose with `transform`, so the scroll entrance takes those and
   `transform` is left free for the pointer tilt. */
@keyframes m-rise-t {from{opacity:0;translate:0 22px;rotate:x -7deg} to{opacity:1;translate:0 0;rotate:x 0deg}}

.card3d{
  transform-style:preserve-3d;
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
}
html.motion .card3d{
  transition:transform 220ms var(--ease),
             box-shadow var(--m-base) var(--ease),
             border-color var(--m-base) var(--ease),
             background-color var(--m-base) var(--ease);
  will-change:transform;
}
/* leaving is slower than arriving, so the card settles rather than snaps */
html.motion .card3d:not(:hover){transition-duration:420ms}
html.motion .card3d:hover{
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(16px);
  box-shadow:0 22px 46px -22px rgba(0,0,0,.6);
}
/* the parent owns the vanishing point, so cards in one grid share it and
   the row reads as a single plane rather than 12 unrelated boxes */
html.motion .svc,html.motion .loop,html.motion .why,html.motion .trades{perspective:1400px}

@supports (animation-timeline: view()){
  /* these four take the translate/rotate entrance instead of the transform one */
  html.cssmotion .svc__i,html.cssmotion .why__i,
  html.cssmotion .trades__i,html.cssmotion .step{animation-name:m-rise-t}
}

/* ---- translucency ----
   Only the surface goes translucent. Text keeps full opacity: a legible
   page is worth more than a legible-ish page that looks like frosted glass. */
.band--dark{
  --glass:rgba(14,27,48,.62);
  --glass-2:rgba(19,36,65,.58);
  --glass-edge:rgba(255,255,255,.075);
  --glass-line:rgba(143,163,186,.16);
}
.band--light{
  /* Kept high and white-biased on purpose. The card surface these replace
     was opaque white; anything darker drags the muted body colour under
     4.5:1 against it — measured at 4.28:1 with a .62 paper-100 fill, which
     fails AA. Glass reads on the dark bands anyway, where the ground has
     something behind it worth seeing through to. */
  --glass:rgba(255,255,255,.78);
  --glass-2:rgba(255,255,255,.74);
  --glass-edge:rgba(255,255,255,.9);
  --glass-line:rgba(94,114,144,.14);
}

@supports ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  /* The large instrument panels get real backdrop blur — few enough of
     them that the compositor cost stays bounded. */
  /* Scoped to dark bands deliberately. These four panels are hard-coded to
     --ink-850 in every context — .ledger is a dark instrument sitting
     inside a LIGHT band on purpose. Feeding them the band-relative --glass
     turned the ledger white while its table text stayed styled for dark
     (amber on near-white measured 1.58:1). And translucency is wrong for
     them on paper anyway: ink-850 at 62% over paper-50 resolves to a mid
     grey, not a dark inset. On a light band they stay opaque. */
  html.motion .band--dark .panel,
  html.motion .band--dark .hm,html.motion .band--dark .stl{
    background-color:rgba(14,27,48,.62);
    -webkit-backdrop-filter:blur(16px) saturate(118%);
    backdrop-filter:blur(16px) saturate(118%);
  }
  /* box-shadow deliberately NOT set here: these selectors are 0-3-1 and
     would outrank the .card3d depth rule at 0-2-1, leaving the panels
     with an edge highlight and no cast shadow. */

  /* Cards get translucency and the same lit top edge but NO backdrop
     filter: there are 25 of them, and 25 blur layers is where this kind
     of design starts costing frames on a mid-range laptop. Over the
     dot-grid ground the translucency alone already reads as glass. */
  html.motion .svc__i,html.motion .step,
  html.motion .why__i,html.motion .trades__i{
    background-color:var(--glass-2);
  }
}

/* content floats above its own card surface while the card tips */
html.motion .card3d>*{transform:translateZ(18px)}

/* The shipped hover uses the `background` SHORTHAND, which resets
   background-color to an opaque paper-50 — so a glass card flicked darker
   at the exact moment it lifted. Keep it glass, just a touch brighter. */
@supports ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  html.motion .svc__i:hover,html.motion .why__i:hover,
  html.motion .trades__i:hover,html.motion .step:hover{
    background-color:var(--glass);
  }
}

@media (prefers-reduced-motion:reduce){
  .card3d,.card3d:hover{transform:none!important;transition:none!important}
  .card3d>*{transform:none!important}
}
/* a coarse pointer has no cursor to lean toward */
@media (hover:none),(pointer:coarse){
  .card3d,.card3d:hover{transform:none!important}
  .card3d>*{transform:none!important}
}


/* ============================================================
     SCROLL WORD REVEAL
     Ported from the motion/react ScrollWordReveal component. Same
     constants, same per-word ranges, no runtime: the component drove
     opacity through useTransform on every frame, and a view timeline
     reaches the identical result without React, without motion, and
     without re-rendering 12 spans per scroll event.
     ============================================================ */
/* Colour, not opacity: the Originkit component tweens `color` from
   dimColor to highlightColor. Its palette is written for a dark ground
   (#FFF on rgba(255,255,255,.15)), which would be invisible on this
   page's light bands, so the two ends resolve from the band's own tokens
   instead of being hard-coded. */
@keyframes m-swr{from{color:var(--swr-dim)} to{color:var(--swr-lit)}}

.band--dark .swr{--swr-dim:rgba(255,255,255,.15);--swr-lit:#FFFFFF}
/* An accent word inside a heading must land on the accent colour, not on
   the heading's. Overriding the token on the span inherits to the .w
   spans the splitter creates inside it, so the amber survives the scrub
   instead of being animated to white. */
/* :not(.w) matters. After splitting, the heading holds both the accent
   span and the generated word spans as children — a bare `span` selector
   catches every word and ambers the entire heading. The accent span is
   the only child that is not a .w, and the token inherits from it to the
   .w it now wraps. */
.bjl__title>span:not(.w){--swr-dim:rgba(240,163,44,.18);--swr-lit:#F0A32C}
.band--light .swr{--swr-dim:rgba(16,32,58,.16);--swr-lit:var(--slate-900)}

.swr .w{display:inline-block}
@supports (animation-timeline: view()){
  html.cssmotion .swr{view-timeline-name:--swr}
  html.cssmotion .swr .w{
    animation:m-swr linear both;
    animation-timeline:--swr;
    /* GSAP's stagger normalised: with a default 0.5s tween and a 0.1s
       word stagger, the scrubbed timeline runs 0.5 + 0.1(n-1) long, so
       word i occupies [0.1i, 0.1i+0.5] of it. --swr-step and --swr-win
       carry those two fractions scaled into the active scroll band. */
    animation-range:cover calc(var(--swr-a,10) * 1% + var(--i,0) * var(--swr-step,0) * 1%)
                    cover calc(var(--swr-a,10) * 1% + var(--i,0) * var(--swr-step,0) * 1% + var(--swr-win,20) * 1%);
  }
  html.cssmotion .swr.hx .w{animation-name:m-swr}
}

/* The component's vertical progress rail, scaleY-linked to scroll.
   Sits beside the section head rather than the viewport edge, so each
   statement gets its own measure instead of one global bar. */
@keyframes m-scale-y{from{transform:scaleY(0)} to{transform:scaleY(1)}}
@media (min-width:900px){
  html.motion .sec-head::before{
    content:"";position:absolute;left:-22px;top:4px;bottom:4px;width:2px;
    background:linear-gradient(180deg,var(--accent-text),transparent);
    opacity:.55;transform:scaleY(0);transform-origin:top center;
  }
  @supports (animation-timeline: view()){
    html.cssmotion .sec-head::before{
      animation:m-scale-y linear both;
      animation-timeline:view();
      animation-range:entry 6% cover 42%;
    }
  }
}

@media (prefers-reduced-motion:reduce){
  /* the component returns undefined style under useReducedMotion, i.e.
     fully opaque and the rail at rest — same outcome here */
  .swr .w{animation:none!important;opacity:1!important;color:inherit!important}
  .sec-head::before{animation:none!important;transform:scaleY(1)!important}
}


/* ============================================================
     BOX DEPTH
     Tilt alone reads as a picture being rotated. What makes a box look
     solid is the lighting staying consistent while it moves: a lit top
     edge, a shaded bottom edge, and a cast shadow that grows as it rises.
     No extruded side face — that would fight the glass surfaces.
     ============================================================ */
.card3d{
  --tilt-lift:16px;
  --inner-lift:18px;
  --depth:0 10px 24px -16px rgba(0,0,0,.55);
  --depth-hi:0 30px 56px -26px rgba(0,0,0,.66);
  --edge-lo:rgba(0,0,0,.22);
}
/* bigger boxes lift less and cast softer, wider shadows — a heavy object
   does not leap off the page the way a small one does */
.card3d--panel{
  --tilt-lift:9px;  --inner-lift:10px;
  --depth:0 16px 38px -24px rgba(0,0,0,.55);
  --depth-hi:0 34px 66px -30px rgba(0,0,0,.6);
}
.card3d--wide{
  --tilt-lift:6px;  --inner-lift:7px;
  --depth:0 18px 44px -30px rgba(0,0,0,.5);
  --depth-hi:0 30px 64px -34px rgba(0,0,0,.55);
}

html.motion .card3d{
  box-shadow:
    inset 0 1px 0 var(--glass-edge,rgba(255,255,255,.07)),
    inset 0 -1px 0 var(--edge-lo),
    var(--depth);
}
html.motion .card3d:hover{
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))
            translateZ(var(--tilt-lift,16px));
  box-shadow:
    inset 0 1px 0 var(--glass-edge,rgba(255,255,255,.07)),
    inset 0 -1px 0 var(--edge-lo),
    var(--depth-hi);
}
html.motion .card3d>*{transform:translateZ(var(--inner-lift,18px))}

/* .panel and .ledger carry overflow:clip for their rounded corners, and
   any overflow but visible forces transform-style:flat — so those two
   tilt as a solid slab with no interior parallax. Everything else here
   is overflow:visible and keeps its depth. */

/* Only DIRECT children are lifted. A grandchild's translateZ is flattened
   the moment any intermediate box is transform-style:flat — .bar and
   .legend both are — so per-segment and per-row lifts were dead code. */

@media (prefers-reduced-motion:reduce){
  .card3d,.card3d:hover{transform:none!important}
  .card3d>*{transform:none!important}
}
@media (hover:none),(pointer:coarse){
  .card3d,.card3d:hover{transform:none!important}
  .card3d>*{transform:none!important}
}


/* ============================================================
     EXPANDABLE CARD DETAIL
     Height animates through grid-template-rows 0fr -> 1fr, which is the
     only way to transition to an intrinsic height without measuring it in
     script. The inner element carries the overflow so the text clips
     cleanly while the row collapses.
     ============================================================ */
.more__t{
  display:flex;align-items:center;gap:8px;
  margin-top:16px;padding:0;border:0;background:none;cursor:pointer;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-text);
  align-self:flex-start;
}
html.motion .more__t{transition:color var(--m-fast) var(--ease),gap var(--m-fast) var(--ease)}
.more__t:hover{color:var(--text)}
.more__t:hover .more__i{transform:translateY(1px)}
.more__t:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px}
.more__i{flex:none}
html.motion .more__i{transition:transform var(--m-base) var(--m-spring)}
.more__t[aria-expanded="true"] .more__i{transform:rotate(180deg)}
.more__t[aria-expanded="true"]:hover .more__i{transform:rotate(180deg) translateY(1px)}

.more{display:grid;grid-template-rows:0fr}
html.motion .more{transition:grid-template-rows 400ms var(--ease)}
.more__in{overflow:hidden;min-height:0}
.more__t[aria-expanded="true"] + .more{grid-template-rows:1fr}

.more__in p{
  font-size:14px;line-height:1.62;color:var(--text-3);
  margin:14px 0 0;
}
.more__in p:first-child{
  margin-top:16px;padding-top:16px;border-top:1px solid var(--line);
}
/* the paragraphs fade in slightly behind the row opening, so the text is
   not visibly squashed while the box is still finding its height */
html.motion .more__t[aria-expanded="true"] + .more .more__in p{
  animation:m-rise-sm .42s var(--ease) both;
}
html.motion .more__t[aria-expanded="true"] + .more .more__in p:nth-child(1){animation-delay:.10s}
html.motion .more__t[aria-expanded="true"] + .more .more__in p:nth-child(2){animation-delay:.17s}
html.motion .more__t[aria-expanded="true"] + .more .more__in p:nth-child(3){animation-delay:.24s}

/* Deliberately NOT align-items:start.
   .step, .svc__i and .why__i are all bordered grids — .step and .svc__i
   carry a border-right that draws the vertical divider between columns,
   and every one of them has a border-bottom. Letting an open card grow
   while its row-mates stay short leaves those rules ragged at different
   heights, which reads as broken rather than airy. The default stretch
   keeps the dividers level; the cost is empty space in the row-mate,
   which is the cheaper of the two. */

@media (prefers-reduced-motion:reduce){
  .more{transition:none!important}
  .more__in p{animation:none!important;opacity:1!important;transform:none!important}
  .more__i{transition:none!important}
}


/* ============================================================
     BOOKED-JOB CALCULATOR
     The page argues that lead metrics and job metrics diverge. This lets
     a visitor watch it happen on their own figures: dragging the booking number
     leaves cost per lead untouched and swings cost per booked job hard.
     One slider, and the thesis proves itself.
     ============================================================ */
.ar{
  margin-top:var(--sp-7);
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);
  overflow:clip;
}
.ar__bar{
  display:flex;align-items:center;gap:12px;padding:15px 20px;
  border-bottom:1px solid var(--line);background:var(--surface-2);
}
.ar__reset{
  margin-left:auto;background:none;border:1px solid var(--line-2);border-radius:var(--r-sm);
  padding:5px 11px;cursor:pointer;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-3);
}
html.motion .ar__reset{transition:color var(--m-fast) var(--ease),border-color var(--m-fast) var(--ease)}
.ar__reset:hover{color:var(--text);border-color:var(--accent-text)}
.ar__reset:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

.ar__grid{display:grid;gap:0}
@media(min-width:860px){.ar__grid{grid-template-columns:1fr 1fr}}

.ar__inputs{padding:clamp(18px,2.4vw,26px);display:grid;gap:22px;align-content:start}
@media(min-width:860px){.ar__inputs{border-right:1px solid var(--line)}}
.ar__f{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:baseline}
.ar__f label{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-3);
}
.ar__hint{color:var(--accent-text);letter-spacing:.08em}
.ar__v{font-size:19px;color:var(--text);font-variant-numeric:tabular-nums;text-align:right}
.ar__f--key .ar__v{color:var(--accent-text)}
.ar__f input[type=range]{grid-column:1/-1;width:100%;margin:0;accent-color:var(--amber);height:22px;cursor:pointer}
.ar__f input[type=range]:focus-visible{outline:2px solid var(--amber);outline-offset:4px;border-radius:2px}

.ar__out{padding:clamp(18px,2.4vw,26px);display:grid;gap:14px;align-content:start}
.ar__row{display:grid;gap:3px}
.ar__k{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.ar__n{font-family:var(--f-display);font-weight:700;letter-spacing:-.022em;font-variant-numeric:tabular-nums;
  font-size:26px;color:var(--text);line-height:1.05}
.ar__d{font-size:12.5px;color:var(--text-3);line-height:1.5}
.ar__row--flat{opacity:.72}
.ar__row--hero .ar__n{font-size:clamp(34px,4.6vw,46px);color:var(--accent-text)}
.ar__pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;
  padding-top:14px;border-top:1px solid var(--line)}
.ar__pair .ar__n{font-size:17px}
.ar__delta{
  margin:0;padding:9px 12px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--bg);
  font-family:var(--f-mono);font-size:11px;line-height:1.5;color:var(--text-2);min-height:1px;
}
.ar__delta b{color:var(--accent-text);font-weight:600}
.ar__note{
  margin:0;padding:12px 20px;border-top:1px solid var(--line);
  font-size:11px;line-height:1.55;color:var(--text-3);
}
/* the hero figure pulses briefly whenever it changes, so a drag reads as
   a live instrument rather than a static number that happens to differ */
@keyframes ar-tick{0%{color:var(--amber-hi)}100%{color:var(--accent-text)}}
html.motion .ar__n.is-tick{animation:ar-tick .5s var(--ease)}

/* --- the panel's own contents arrive in order ---
   Shared named timelines, not per-element view(): the fields sit at the same
   height as each other, so a per-element view() gives them identical timing
   and --i buys nothing. One clock per column is what makes it a cascade. */
@supports (animation-timeline: view()){
  html.cssmotion .ar__inputs{view-timeline-name:--arin}
  html.cssmotion .ar__inputs .ar__f{
    animation:m-rise-sm linear both;
    animation-timeline:--arin;
    animation-range:entry calc(8% + var(--i,0)*7%) cover calc(22% + var(--i,0)*7%);
  }
  html.cssmotion .ar__out{view-timeline-name:--arout}
  html.cssmotion .ar__out>*{
    animation:m-rise-sm linear both;
    animation-timeline:--arout;
    animation-range:entry calc(8% + var(--i,0)*6%) cover calc(22% + var(--i,0)*6%);
  }
}
@media(prefers-reduced-motion:reduce){
  .ar__inputs .ar__f,.ar__out>*{animation:none!important;opacity:1!important;translate:none!important}
}


/* ============================================================
     MOTION — PIPELINE, GRIDS, FOOTER
     ============================================================ */

/* ---- 1. the flowline actually flows ----
   Spend -> Calls -> Booked Jobs -> Revenue is a pipeline, and the four
   chevrons between the stages were static. A pulse travelling left to
   right along them states the direction the page has been arguing for
   in prose. Staggered by position, so it reads as one signal moving
   through rather than four things blinking. */
@keyframes m-flow{
  0%,100%{opacity:.28;transform:translateX(0)}
  45%    {opacity:1;  transform:translateX(4px)}
}
html.motion .fl__mark{animation:m-flow 2.6s ease-in-out infinite;will-change:opacity,transform}
html.motion .fl:nth-child(1) .fl__mark{animation-delay:0s}
html.motion .fl:nth-child(2) .fl__mark{animation-delay:.30s}
html.motion .fl:nth-child(3) .fl__mark{animation-delay:.60s}
html.motion .fl:nth-child(4) .fl__mark{animation-delay:.90s}
/* the stages themselves arrive in the same order as the flow */
@supports (animation-timeline: view()){
  html.cssmotion .flowline{view-timeline-name:--flow}
  html.cssmotion .fl{
    animation:m-rise-sm linear both;
    animation-timeline:--flow;
    animation-range:cover calc(6% + var(--i,0)*7%) cover calc(26% + var(--i,0)*7%);
  }
}
html.motion .fl{transition:background-color var(--m-fast) var(--ease)}
html.motion .fl:hover{background-color:rgba(240,163,44,.05)}

/* ---- 2. the industries grid joins the other card grids ----
   It was the one card grid on the page with no entrance, no hover and
   no tilt, which read as an oversight rather than a choice. */
@supports (animation-timeline: view()){
  html.cssmotion .ind__i{
    animation:m-rise-t linear both;
    animation-timeline:view();
    animation-range:entry calc(4% + var(--i,0)*6%) cover calc(18% + var(--i,0)*6%);
  }
}
@supports ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  html.motion .ind__i{background-color:var(--glass-2)}
  html.motion .ind__i:hover{background-color:var(--glass)}
}
html.motion .ind__i{position:relative}
html.motion .ind__i::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  border-radius:inherit;opacity:0;
  background:radial-gradient(220px circle at var(--px,50%) var(--py,50%),
    rgba(240,163,44,.16),rgba(240,163,44,.05) 40%,transparent 70%);
  transition:opacity .32s var(--ease);
}
html.motion .ind__i:hover::before{opacity:1}
html.motion .ind__i>*{position:relative;z-index:1}

/* ---- 4. the footer resolves rather than appearing ---- */
@supports (animation-timeline: view()){
  html.cssmotion .ft__grid>*{
    animation:m-rise-sm linear both;
    animation-timeline:view();
    animation-range:entry calc(2% + var(--i,0)*8%) entry calc(46% + var(--i,0)*8%);
  }
}

@media (prefers-reduced-motion:reduce){
  .fl__mark{animation:none!important;opacity:1!important;transform:none!important}
  .fl,.ind__i,.ft__grid>*{animation:none!important;opacity:1!important;transform:none!important}
  .ind__i::before{display:none!important}
}


/* ============================================================
     TRAVELLING NAV INDICATOR + SMALL POLISH
     ============================================================ */

/* One bar that moves between sections, rather than five that each fade
   their own underline. It reads as a position within the document —
   which is what a scrollspy is actually telling you — instead of five
   independent on/off states. */
.nav__links{position:relative}
.nav__ind{
  position:absolute;left:0;bottom:-5px;height:1.5px;width:0;
  background:linear-gradient(90deg,var(--amber),var(--amber-hi));
  opacity:0;pointer-events:none;transform:translateX(0);
  border-radius:2px;
}
html.motion .nav__ind{
  transition:transform 420ms var(--ease),
             width     420ms var(--ease),
             opacity   240ms var(--ease);
  will-change:transform,width;
}
/* Where the indicator is running, the per-link active underline would
   double it up. Hover keeps its own — that is a pointer state, not a
   position state, and the two should stay distinguishable. */
.nav--ind .nav__link.is-active::after{transform:scaleX(0)}
.nav--ind .nav__link:hover::after,
.nav--ind .nav__link:focus-visible::after{transform:scaleX(1)}

/* chips arrive rather than being present */
@supports (animation-timeline: view()){
  html.cssmotion .chip{
    animation:m-pop linear both;
    animation-timeline:view();
    animation-range:entry 12% entry 68%;
  }
}

@media (prefers-reduced-motion:reduce){
  .nav__ind{transition:none!important}
  .chip{animation:none!important;opacity:1!important;transform:none!important}
}


/* ============================================================
     MOBILE
     Three separate concerns, deliberately not one media query:
     size (what fits), input (what a finger can hit), and cost
     (what a phone GPU can paint at 60fps).
     ============================================================ */

/* ---- 1. SIZE ---- */
@media (max-width:600px){
  /* A marquee chip was 420px on a 375px screen, so no chip could ever be
     read in full. Sized to leave a sliver of the next one visible, which
     is also what tells you the strip scrolls. */
  .proof--marquee .proof__i{flex-basis:82vw;max-width:none}

  /* The calculator's readout stacks under its inputs; the hero figure was
     sized for a half-width column. */
  .ar__row--hero .ar__n{font-size:clamp(30px,11vw,40px)}
  .ar__pair{grid-template-columns:1fr 1fr;gap:10px}
  .ar__f{grid-template-columns:1fr auto}

  /* Long mono strings are the usual source of phantom horizontal scroll. */
  .ar__note,.ar__delta,.form__fine,.foot-note{overflow-wrap:anywhere}
}

/* ---- 2. INPUT ----
   A finger is about 44px. These were 22-27px, which on a phone means
   mis-taps rather than missed taps: the target is hit, just not the one
   intended. Padding rather than height where height would move layout.

   any-pointer, not pointer. `pointer` describes the PRIMARY input, so an
   iPad with a keyboard case, a Surface, or any touchscreen laptop reports
   pointer:fine and would have been sized for a mouse while the person
   taps the screen. any-pointer:coarse asks whether a finger is available
   at all, which is the actual question. Disabling tilt and the cursor
   glow still keys off the primary pointer further down — those are about
   whether there IS a cursor, which is a different question. */
@media (any-pointer:coarse),(hover:none){
  html #arith .ar__f input[type=range]{height:44px}

  .more__t{min-height:44px;align-items:center}
  /* Carries the #arith id on purpose. The component rule is
     `#arith .ar__reset` at (1,1,0) and sets min-height:40px — an ID beats
     any number of classes, so a plain `.ar__reset` (0,1,0) or even
     `html .ar__reset` (0,1,1) loses to it and the finger target silently
     shrank to 40px. An accessibility floor has to outrank the component
     styling it is protecting, not tie with it. */
  html #arith .ar__reset{min-height:44px;padding-inline:16px}
  .logo{min-height:44px;display:inline-flex;align-items:center}

  /* Footer and inline links get a taller hit box without changing how
     the text sits, so the columns keep their rhythm. */
  .ft a,.tlink,.nav__link,.drawer__links a,.drawer__foot a{
    display:inline-block;padding-block:12px;   /* 11px landed these at 43 */
  }
  .ft__grid{row-gap:4px}
}

/* ---- 3. COST ----
   Every one of these paints a full band every frame. On a desktop GPU
   that is free; on a mid-range phone it is the difference between a
   smooth scroll and a stuttering one. The page keeps its scroll-driven
   motion — that runs on the compositor — and sheds the ambient loops
   and the blur, which do not. */
@media (max-width:820px){
  /* backdrop-filter is the single most expensive thing here. The glass
     surfaces keep their translucency and edge; only the blur goes. */
  html.motion .band--dark .panel,
  html.motion .band--dark .hm,
  html.motion .band--dark .stl{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    background-color:rgba(12,24,43,.92);
  }

  /* ambient loops: continuous repaints with nothing to communicate */
  html.motion .band--dark::after{display:none}     /* signal sweep   */
  html.motion .hero__glow::before{display:none}    /* rotating wash  */
  html.motion .fl__mark{animation:none;opacity:.85}

  /* the hero glow keeps drifting but stops being resized every frame */
  @keyframes m-drift-sm{
    0%,100%{transform:translate3d(0,0,0)}
    50%    {transform:translate3d(2%,-1.5%,0)}
  }
  html.motion .hero__glow{animation-name:m-drift-sm}

  /* scene grading and the grids stay: they are scroll-driven, so they
     cost nothing when the page is still */
}

/* A phone that also asks for reduced motion should get the quietest
   version of all, not the mobile compromise. */
@media (max-width:820px) and (prefers-reduced-motion:reduce){
  html.motion .hero__glow,.cursorglow{animation:none!important;display:none!important}
}


/* ============================================================
     CROSS-PLATFORM
     Fixes for things that only go wrong on a specific engine, each one
     found by checking rather than by assuming.
     ============================================================ */

/* ---- iOS Safari: the 16px rule ----
   Focusing a form control whose font-size is under 16px makes iOS zoom
   the page in, and it does NOT zoom back out. The fields were 15px, so
   tapping either form on an iPhone left the visitor zoomed and scrolling
   sideways. Scoped to touch so the desktop type scale is untouched. */
@media (any-pointer:coarse),(hover:none){
  .field input,.field select,
  .ar__f input,
  input,select,textarea{font-size:16px}
}

/* iOS paints a grey block on tap. Removing it needs a real :active state
   to replace the feedback, or taps start to feel dead. */
@media (any-pointer:coarse),(hover:none){
  a,button,[role="button"],summary{-webkit-tap-highlight-color:transparent}
  .btn:active,.more__t:active,.ar__reset:active,.nav__link:active{opacity:.72}
}

/* ---- iPhone notch / home indicator ----
   .mbar already padded for the home indicator; the full-screen drawer did
   not, so its top row sat under the notch in landscape and its CTA under
   the indicator in portrait. */
.drawer{
  padding-top:calc(var(--gutter) + env(safe-area-inset-top,0px));
  padding-bottom:calc(var(--gutter) + env(safe-area-inset-bottom,0px));
  padding-left:calc(var(--gutter) + env(safe-area-inset-left,0px));
  padding-right:calc(var(--gutter) + env(safe-area-inset-right,0px));
  overscroll-behavior:contain;     /* no scroll chaining to the page behind */
  overflow-y:auto;
}

/* ---- Tablet ----
   An iPad with a keyboard case reports hover:hover and pointer:fine, so
   it correctly gets the pointer effects. An iPad on its own does not, and
   the touch rules above apply. Nothing to special-case; the only thing
   worth pinning is that a 768–1024 portrait tablet gets the two-column
   grids rather than the phone stack, which the existing breakpoints
   already do. What it should NOT inherit is the phone's reduced motion
   budget when it has the GPU for it. */
@media (min-width:768px) and (max-width:820px) and (pointer:fine){
  html.motion .band--dark .panel,
  html.motion .band--dark .hm,
  html.motion .band--dark .stl{
    -webkit-backdrop-filter:blur(16px) saturate(118%);
    backdrop-filter:blur(16px) saturate(118%);
    background-color:rgba(14,27,48,.62);
  }
}

/* ---- Windows high-contrast / forced colours ----
   Forced-colors strips backgrounds and shadows. Anything that carried
   meaning through colour alone needs a border to survive. */
@media (forced-colors:active){
  .card3d,.panel,.hm,.stl,.ar{border:1px solid CanvasText}
  .tint,.cursorglow,.band--dark::after,.hero__glow{display:none!important}
  .swr .w,.tx .w{color:CanvasText!important;animation:none!important}
  .btn{border:1px solid CanvasText}
  .nav__ind,.sec-head::after{forced-color-adjust:none}
}

/* ---- Printing ----
   Someone will print the audit page. Motion and fixed chrome have no
   meaning on paper. */
@media print{
  .nav,.mbar,.drawer,.cursorglow,.tint{display:none!important}
  *{animation:none!important;transition:none!important;
    opacity:1!important;transform:none!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .more{grid-template-rows:1fr!important}   /* expandables print open */
  .band{background:#fff!important;color:#000!important}
}


/* Booked-Job Loop: a connected operating sequence, independent of card tilt/reveals. */
#loop.bjl{background:#0A1526;padding-block:110px;overflow:clip}
.bjl__head{display:grid;grid-template-columns:1.15fr 1fr;gap:80px;align-items:end;margin-bottom:70px}
.bjl__eyebrow,.bjl__label{font:500 12px/1.5 var(--f-mono);letter-spacing:.1em;color:#F0A32C}
.bjl__eyebrow{text-transform:uppercase;margin-bottom:22px;display:flex;align-items:center;gap:12px}
.bjl__eyebrow::before{content:"";width:24px;height:2px;background:#F0A32C}
.bjl__title{font:700 clamp(42px,4.6vw,72px)/1.03 var(--f-display);letter-spacing:-.045em;max-width:660px;color:#F3F6FA;text-wrap:balance}
.bjl__title span{color:#F0A32C}
.bjl__intro{font-size:19px;line-height:1.7;color:#CBD5E3;max-width:500px;margin:0 0 3px}
.bjl__stages{position:relative}
.bjl__stages::before{content:"";position:absolute;left:27px;top:50px;bottom:62px;width:1px;background:#926629}
.bjl__stage{position:relative;display:grid;grid-template-columns:56px minmax(220px,.85fr) minmax(0,1.25fr);gap:36px;padding:44px 0 48px;border-top:1px solid #283A51}
.bjl__node{position:relative;width:56px;height:56px;display:grid;place-items:center;border:1px solid #B17B2C;border-radius:50%;background:#0A1526;color:#F0A32C;font:500 16px var(--f-mono);box-shadow:0 0 0 9px #0A1526}
.bjl__label{margin:0 0 20px;letter-spacing:.025em}
.bjl__heading h3{font:600 clamp(26px,2.4vw,36px)/1.17 var(--f-display);letter-spacing:-.025em;color:#F3F6FA;max-width:370px;text-wrap:balance}
.bjl__copy{padding-top:0}
.bjl__copy p{font-size:16px;line-height:1.8;color:#CBD5E3;margin:0 0 22px}
.bjl__copy .bjl__closing{color:#F3F6FA;font-weight:500}
.bjl__copy .bjl__note{margin:28px 0 0;padding:14px 18px;border-left:2px solid #F0A32C;background:#101F33;color:#DAC49E;font-size:13px;line-height:1.65}
.bjl__footer{border-top:1px solid #283A51;padding:32px 0 0 92px;display:flex;justify-content:flex-end}
.bjl__cta{display:inline-flex;gap:32px;align-items:center;padding:20px 25px;background:#F0A32C;color:#0A1526;font-size:17px;font-weight:600;text-decoration:none;border-radius:3px;transition:background .2s}
.bjl__cta:hover{background:#FFBD50}
.bjl__cta:focus-visible{outline:3px solid #F3F6FA;outline-offset:5px}
.bjl__cta span{font-size:25px;line-height:1}
@media(max-width:1000px){.bjl__head{gap:36px}.bjl__stage{gap:24px;grid-template-columns:56px minmax(180px,.8fr) minmax(0,1.2fr)}}
@media(max-width:720px){
 #loop.bjl{padding-block:64px}
 .bjl__head{grid-template-columns:1fr;gap:25px;margin-bottom:38px}
 .bjl__intro{font-size:17px}
 .bjl__stage{grid-template-columns:40px minmax(0,1fr);gap:18px;padding:30px 0 34px}
 .bjl__node{width:40px;height:40px;font-size:12px;box-shadow:0 0 0 6px #0A1526}
 .bjl__stages::before{left:19px;top:40px;bottom:50px}
 .bjl__heading h3{max-width:100%;font-size:28px}
 .bjl__label{font-size:10px;margin-bottom:13px}
 .bjl__copy{grid-column:2}
 .bjl__copy p{font-size:15px;line-height:1.75}
 .bjl__copy .bjl__note{padding:12px 14px}
 .bjl__footer{padding:26px 0 0;justify-content:stretch}
 .bjl__cta{width:100%;justify-content:space-between;gap:12px;font-size:15px;padding:18px}
}


/* Interactive calculator: midnight controls, paper results, 100-call conversion display. */
#arith{padding-block:clamp(56px,7vw,74px);background:#0A1526}
#arith .sec-head{margin-bottom:26px}
#arith .ar{margin-top:0;border:1px solid #314259;border-radius:16px;box-shadow:0 25px 70px #03091455;background:#101F33}
#arith .ar__bar{padding:12px 22px;background:#14253C;border-bottom:1px solid #314259}
.ar__instrument{display:flex;align-items:center;gap:12px;font:500 12px var(--f-mono);color:#D6E0ED}
.ar__instrument>span{display:grid;place-items:center;width:28px;height:28px;background:#F0A32C;color:#0A1526;border-radius:6px;font-size:21px}
#arith .ar__reset{color:#D3DCE8;min-height:34px;border-color:#42536A;font-size:10px}
#arith .ar__grid{grid-template-columns:1fr 1.1fr}
#arith .ar__inputs{padding:24px;gap:16px;align-content:space-between;border-right:0}
#arith .ar__f{gap:8px 12px;padding:0 4px}
#arith .ar__f label{color:#D8E2EE;text-transform:none;font-family:var(--f-body);font-size:14px;letter-spacing:0}
#arith .ar__v{font-size:21px;color:#F3F6FA}
#arith .ar__f--key{background:#F0A32C0B;border:1px solid #80602E;border-radius:10px;padding:13px 14px;margin-inline:-10px}
#arith .ar__f--key .ar__v{color:#F0A32C}
#arith .ar__hint{display:block;font:10px/1.5 var(--f-mono);letter-spacing:.06em;color:#F0A32C;margin-top:5px}
#arith .ar__f input[type=range]{appearance:none;-webkit-appearance:none;height:30px;background:transparent;outline-offset:3px}
#arith .ar__out{background:#F1F4F8;padding:22px 26px;gap:14px;color:#0A1526}
.ar__conversion{padding-bottom:15px;border-bottom:1px solid #CED6E0}
.ar__conversion-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:11px;font-size:12px;color:#24344C}
.ar__conversion-head strong{font:500 11px var(--f-mono);color:#0A1526}
#arith input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(to right,#F0A32C var(--fill),#34465C var(--fill))}
#arith input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:linear-gradient(to right,#F0A32C var(--fill),#34465C var(--fill))}
#arith input[type=range]::-webkit-slider-thumb{appearance:none;width:22px;height:22px;background:#F9B947;border:4px solid #101F33;border-radius:50%;margin-top:-8px;box-shadow:0 0 0 2px #F0A32C;transition:box-shadow .2s}
#arith input[type=range]::-moz-range-thumb{width:14px;height:14px;background:#F9B947;border:4px solid #101F33;border-radius:50%;box-shadow:0 0 0 2px #F0A32C}
#arith input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 2px #F0A32C,0 0 0 8px #F0A32C22}
.ar__dots{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:4px}
.ar__dots i{height:7px;border-radius:2px;background:#D2DAE4;scale:.82}
.ar__dots i.is-booked{background:#AC6508;scale:1}
/* The wave. --d is how many cells this one sits from the boundary that
   moved, set in JS, so the fill breaks outward from the edge instead of
   always starting at cell 0 — and runs backwards when the rate drops.
   Dragging changes one cell at a time, so --d is 0 and the control stays
   immediate; only a jump (reset, PageUp, a tap further along the track)
   is long enough to read as a sweep. Gated on .motion, which is never
   set under prefers-reduced-motion, so the reduced path is a plain
   instant repaint. */
html.motion .ar__dots i{transition:background .32s var(--ease),scale .32s var(--ease);
  transition-delay:calc(var(--d,0) * 7ms)}
.ar__legend{display:flex;gap:14px;margin-top:8px;color:#24344C;font-size:10.5px}
.ar__legend span{display:flex;gap:6px;align-items:center}
.ar__legend span::before{content:"";width:6px;height:6px;background:#AC6508;border-radius:1px}
.ar__legend span+span::before{background:#D2DAE4}

/* ---- cost per lead vs cost per booked job, as bars ----
   v5's colours came from the band tokens, which resolve to the DARK band's
   greys — and this panel is a light card sitting inside a dark band, so the
   labels measured 2.35:1 on it. Everything here is therefore stated against
   #F1F4F8 explicitly, the same way the rest of the output column is. */
.ar__vs{display:grid;gap:8px;margin:2px 0;padding:12px 0 0;border-top:1px solid #CED6E0}
.ar__vs-row{display:grid;grid-template-columns:94px minmax(0,1fr) 64px;align-items:center;gap:10px}
.ar__vs-k{font-family:var(--f-mono);font-size:9.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#24344C;white-space:nowrap}
.ar__vs-track{position:relative;height:8px;border-radius:3px;background:#D2DAE4;overflow:hidden}
.ar__vs-track i{position:absolute;inset:0 auto 0 0;width:var(--w,0%);border-radius:3px;background:#526078}
/* The width tween is the whole effect: the bar physically grows as the
   booking number falls, which is the sentence the section is making. */
html.motion .ar__vs-track i{transition:width 380ms var(--ease)}
.ar__vs-row--hero .ar__vs-track{height:12px}
.ar__vs-row--hero .ar__vs-track i{background:linear-gradient(90deg,#AC6508,#F0A32C)}
.ar__vs-v{font-family:var(--f-display);font-weight:700;font-size:13px;font-variant-numeric:tabular-nums;color:#2E4058;text-align:right}
/* #AC6508 on this ground is 4.13:1 — under AA for 14px bold — so the amber
   stays in the bar and the figure takes the panel's ink, matching the big
   cost-per-booked-job number directly above it. */
.ar__vs-row--hero .ar__vs-v{color:#0A1526;font-size:14px}
@media(max-width:600px){
  .ar__vs-row{grid-template-columns:66px minmax(0,1fr) 58px;gap:8px}
  .ar__vs-k{font-size:8.5px}
}
@media(prefers-reduced-motion:reduce){.ar__vs-track i{transition:none!important}}
#arith .ar__row--hero{grid-row:2;gap:5px;background:#E4EBF4;border-left:3px solid #F0A32C;border-radius:0 8px 8px 0;padding:13px 16px}
#arith .ar__row--hero .ar__n{font-size:clamp(40px,4.2vw,58px);color:#0A1526;letter-spacing:-.065em}
#arith .ar__k{color:#24344C;font-size:10.5px;font-weight:600;letter-spacing:.09em}
#arith .ar__d{color:#24344C;font-size:12.5px}
#arith .ar__row--flat{opacity:1;display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;padding:11px 16px;background:#E4EBF4;border-left:3px solid #8296AE;border-radius:0 8px 8px 0}
#arith .ar__row--flat .ar__n{font-size:19px;color:#26354B;margin-left:auto}
#arith .ar__row--flat .ar__d{flex-basis:100%;font-size:11.5px}
#arith .ar__pair{padding:0;border:0;gap:16px}
#arith .ar__pair .ar__n{color:#0A1526;font-size:28px;margin-top:6px}
#arith .ar__delta{background:#E5EBF2;border:0;border-radius:6px;color:#26354B;font-family:var(--f-body);font-size:12px;line-height:1.6;min-height:80px;padding:14px 16px}
#arith .ar__delta b{color:#0A1526}
#arith .ar__note{padding:20px 30px;color:#B8C6D6;font-size:11px;background:#0D1A2B}
@media(max-width:859px){#arith .ar__grid{grid-template-columns:1fr}#arith .ar__inputs{gap:22px;padding:28px}#arith .ar__out{padding:28px}}
@media(max-width:480px){#arith{padding-block:48px}#arith .ar__bar{padding:11px 16px}#arith .ar__inputs,#arith .ar__out{padding:18px 16px}#arith .ar__f--key{margin-inline:-6px;padding:11px 10px}#arith .ar__f label{font-size:12.5px}#arith .ar__v{font-size:19px}.ar__conversion-head{font-size:10.5px}.ar__conversion-head strong{font-size:9px}.ar__dots{gap:3px}.ar__dots i{height:6px}#arith .ar__pair .ar__n{font-size:19px}#arith .ar__note{padding:14px 16px}}
@media(prefers-reduced-motion:reduce){#arith *,#arith *::before{transition:none!important;animation:none!important}}


/* Footer content stays fully legible, including at the end of the scroll. */
html .ft .ft__grid > *{animation:none!important;opacity:1!important;transform:none!important;translate:none!important}
.ft .ft__blurb{color:#C5D0DF;font-size:16px;line-height:1.7}
.ft .ft__h{color:#F0A32C;font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:none}
.ft .ft__col a{color:#E2E9F2;font-size:16px;line-height:1.6}
.ft .ft__col a:hover,.ft .ft__col a:focus-visible{color:#FFBE55}
.ft .ft__col a:focus-visible{outline:2px solid #F0A32C;outline-offset:5px;border-radius:2px}
.ft .ft__bot{color:#CCD6E4;font-size:13px;line-height:1.7;border-top-color:#314259}


.leak-context{margin-top:28px;padding:clamp(24px,4vw,48px);border:1px solid #D5DFEA;border-left:3px solid #F0A32C;border-radius:6px;background:#FFFFFF;box-shadow:0 12px 35px #0A15260A}
.leak-context p{max-width:960px;font-size:17px;line-height:1.8;color:#24344C;margin:0 0 22px}
.leak-context .leak-context__lead{font:600 clamp(23px,2.5vw,32px)/1.3 var(--f-display);letter-spacing:-.025em;color:#132441;max-width:850px;margin-bottom:24px}
.leak-context .leak-context__turn{font-weight:600;color:#132441}
.leak-context p:last-child{margin-bottom:0}
@media(max-width:600px){.leak-context p{font-size:16.5px;line-height:1.72}.leak-context .leak-context__lead{font-size:23px;line-height:1.3}}


/* Compact editorial note; motion never controls content visibility. */
.leak-context{position:relative;overflow:clip;padding:28px 32px;display:grid;grid-template-columns:1fr 1fr;gap:14px 32px;margin-top:22px;border-left-width:3px}
.leak-context p{font-size:16.5px;line-height:1.72;margin:0;max-width:none}
.leak-context .leak-context__lead{grid-column:1/-1;font-size:clamp(20px,2vw,25px);line-height:1.3;max-width:none;margin:0 0 3px}
.leak-context p:nth-child(2){grid-column:1;grid-row:2/4}
.leak-context .leak-context__turn{font-size:16.5px;line-height:1.72}
.leak-context::after{content:"";position:absolute;inset:0 auto auto 0;height:2px;width:100%;background:linear-gradient(90deg,#F0A32C,transparent 80%);transform-origin:left}
@keyframes leak-note-text{from{translate:0 12px}to{translate:0 0}}
@keyframes leak-note-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:no-preference){
 .leak-context.is-entering p{animation:leak-note-text .65s cubic-bezier(.16,1,.3,1) both}
 .leak-context.is-entering p:nth-child(2){animation-delay:.08s}
 .leak-context.is-entering p:nth-child(3){animation-delay:.16s}
 .leak-context.is-entering p:nth-child(4){animation-delay:.24s}
 .leak-context.is-entering::after{animation:leak-note-line 1.2s cubic-bezier(.16,1,.3,1) both}
 .leak-context{transition:border-color .25s,box-shadow .25s}
 .leak-context:hover{border-color:#D9AD65;box-shadow:0 8px 24px #0A152610}
}
@media(max-width:640px){
 .leak-context{padding:22px;grid-template-columns:1fr;gap:13px}
 .leak-context p:nth-child(2){grid-column:auto;grid-row:auto}
 .leak-context .leak-context__lead{font-size:21px}
 .leak-context p{font-size:16.5px;line-height:1.72}
}


.leak-context--cost{align-items:start;grid-template-columns:1.2fr 1fr}
.leak-context--cost .leak-context__explanation{display:grid;gap:14px;min-width:0}
.leak-context--cost .leak-context__lead{font-size:20px;line-height:1.4}
.leak-context--cost p:nth-child(2){grid-column:auto;grid-row:auto}
.leak-context__table{width:100%;border-collapse:collapse;text-align:left;font-size:14.5px;color:#132441}
.leak-context__table th,.leak-context__table td{padding:12px 14px;border-bottom:1px solid #D5DFEA;line-height:1.5}
.leak-context__table thead th{font-size:12.5px;background:#F1F4F8;color:#24344C;font-weight:600}
.leak-context__table tbody th{font-weight:600}
.leak-context__table td{font-family:var(--f-mono);white-space:nowrap;color:#0B5038;font-weight:600}
/* ---- the table argues, rather than just listing ----
   The conclusion below claims a four-fold spread between channels. A bar
   behind each figure makes that spread visible instead of asking the reader
   to do the arithmetic. --w is the band's midpoint as a share of the widest
   band, so the bars are a true relative picture and assert nothing the row
   does not already state. */
.leak-context__table td{position:relative;isolation:isolate}
.pctbar{
  position:absolute;left:0;top:50%;translate:0 -50%;z-index:-1;
  height:23px;width:var(--w,0%);border-radius:3px;
  background:linear-gradient(90deg,rgba(11,80,56,.22),rgba(11,80,56,.05));
  transform-origin:left center;
}
/* Drawn by default. Only the tier that actually has a timeline to drive them
   starts them collapsed -- otherwise a browser that never reaches .cssmotion
   (reduced motion, or a tab that loaded hidden) would leave the bars at
   scaleX(0) with nothing to ever animate them open. */
html.cssmotion .pctbar{transform:scaleX(0)}
@supports (animation-timeline: view()){
  /* One clock named on the table, not a per-row view(): the rows are ~45px
     apart, so per-element timelines hand them near-identical timing and the
     --i stagger would buy nothing. */
  html.cssmotion .leak-context__table{view-timeline-name:--leakpct}
  html.cssmotion .pctbar{
    animation:m-scale-x linear both;
    animation-timeline:--leakpct;
    animation-range:entry calc(20% + var(--i,0)*9%) cover calc(16% + var(--i,0)*9%);
  }
  html.cssmotion .leak-context__table tbody tr{
    animation:m-rise-sm linear both;
    animation-timeline:--leakpct;
    animation-range:entry calc(12% + var(--i,0)*9%) cover calc(8% + var(--i,0)*9%);
  }
}
@media(prefers-reduced-motion:reduce){.pctbar{transform:none!important;animation:none!important}}
.leak-context--cost .leak-context__conclusion{grid-column:1/-1;border-top:1px solid #D5DFEA;padding-top:15px;font-size:16.5px;line-height:1.6;font-weight:600;color:#132441}
@media(prefers-reduced-motion:no-preference){.leak-context--cost.is-entering .leak-context__table{animation:leak-note-text .75s .12s cubic-bezier(.16,1,.3,1) both}}
@media(max-width:700px){.leak-context--cost{grid-template-columns:1fr}.leak-context__table th,.leak-context__table td{padding:10px}.leak-context--cost .leak-context__lead{font-size:19px}}


.questions{padding-block:90px}.questions__title{font:650 clamp(32px,4vw,52px)/1.12 var(--f-display);letter-spacing:-.035em;color:#132441;margin-bottom:36px}
.questions__list{border:1px solid #D5DFEA;border-radius:8px;background:#fff;overflow:clip}
.questions details+details{border-top:1px solid #D5DFEA}
.questions summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;cursor:pointer;padding:24px 28px;font:600 18px/1.5 var(--f-body);color:#132441}
.questions summary::-webkit-details-marker{display:none}.questions summary::after{content:"+";color:#7A4A08;font-size:24px;flex:none}.questions details[open] summary::after{content:"−"}
.questions summary:hover{background:#F5F7FA}.questions summary:focus-visible{outline:2px solid #B9720F;outline-offset:-4px}
.questions details[open] summary{color:#7A4A08;background:#FFFBF4}
.questions details p{padding:18px 28px 26px;font-size:16px;line-height:1.8;color:#24344C;max-width:990px;margin:0}
@keyframes faq-answer-in{from{translate:0 -6px}to{translate:0 0}}
@media(prefers-reduced-motion:no-preference){.questions details[open] p{animation:faq-answer-in .25s ease-out}}
@media(max-width:600px){.questions{padding-block:60px}.questions summary{padding:20px;font-size:16px;gap:16px}.questions details p{padding:18px 20px 22px;font-size:15px}}


.commitments{padding-top:40px;padding-bottom:90px}
.commitments__head{max-width:760px;margin-bottom:36px}
.commitments__head h2{font:650 clamp(32px,3.6vw,50px)/1.13 var(--f-display);letter-spacing:-.035em;color:#132441}
.commitments__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.commitments__item{display:flex;gap:22px;padding:30px;background:#fff;border:1px solid #D5DFEA;border-radius:7px}
.commitments__number{font:500 12px var(--f-mono);color:#7A4A08;flex:none;padding-top:5px}
.commitments__item h3{font:600 23px/1.25 var(--f-display);letter-spacing:-.02em;color:#132441;margin-bottom:14px}
.commitments__item p{font-size:15px;line-height:1.75;color:#24344C;margin:0}
@media(prefers-reduced-motion:no-preference){.commitments__item{transition:border-color .25s,box-shadow .25s}.commitments__item:hover{border-color:#C2944E;box-shadow:0 8px 24px #0A15260A}}
@media(max-width:700px){.commitments{padding-block:30px 60px}.commitments__grid{grid-template-columns:1fr;gap:14px}.commitments__item{padding:24px;gap:16px}.commitments__item h3{font-size:21px}}


.capabilities{padding-block:90px}
.capabilities__head{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:end;margin-bottom:38px}
.capabilities__head h2{font:650 clamp(32px,3.6vw,50px)/1.13 var(--f-display);letter-spacing:-.035em;color:#132441}
.capabilities__head>p{font-size:17px;line-height:1.75;color:#24344C;margin:0}
.capabilities__grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.capabilities__card{padding:32px;border:1px solid #D5DFEA;border-radius:8px;background:#fff;display:flex;flex-direction:column;min-width:0}
.capabilities__index{font:500 12px var(--f-mono);color:#7A4A08;margin-bottom:20px}
.capabilities__card h3{font:600 clamp(25px,2.4vw,32px)/1.2 var(--f-display);letter-spacing:-.025em;color:#132441;margin-bottom:15px}
.capabilities__position{font-size:16px;line-height:1.6;color:#132441;margin:0 0 24px}
.capabilities__position strong{font-weight:600}
.capabilities__card ul{padding:0;margin:0 0 26px;list-style:none}
.capabilities__card li{padding:15px 0;border-top:1px solid #E0E6EF;font-size:15px;line-height:1.75;color:#24344C}
.capabilities__card li strong{color:#132441;font-weight:600}
.capabilities__outcome{margin:auto 0 0;padding:17px 20px;background:#FFFBF4;border-left:2px solid #F0A32C;font-size:14px;line-height:1.7;color:#54390E}
@media(prefers-reduced-motion:no-preference){.capabilities__card{transition:border-color .25s,box-shadow .25s}.capabilities__card:hover{border-color:#C2944E;box-shadow:0 8px 24px #0A152609}}
@media(max-width:760px){.capabilities{padding-block:60px}.capabilities__head{grid-template-columns:1fr;gap:22px;margin-bottom:28px}.capabilities__grid{grid-template-columns:1fr;gap:18px}.capabilities__card{padding:24px}.capabilities__head>p{font-size:16px}}


.plan-section{padding-block:70px}
.plan-section__head{margin-bottom:30px}
.plan-section__head h2{font:650 clamp(32px,3.5vw,48px)/1.12 var(--f-display);letter-spacing:-.035em;color:#F3F6FA}
.plan-section__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.plan-card{min-width:0;padding:27px;border:1px solid #314259;border-radius:10px;background:#101F33;display:flex;flex-direction:column;position:relative;overflow:clip}
.plan-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:#F0A32C;transform:scaleX(0);transform-origin:left;transition:transform .35s}
.plan-card:hover::before,.plan-card:focus-within::before{transform:scaleX(1)}
.plan-card__number{font:12px var(--f-mono);color:#F0A32C;margin-bottom:18px}
.plan-card h3{font:600 26px/1.2 var(--f-display);letter-spacing:-.025em;color:#F3F6FA;margin-bottom:14px}
.plan-card p{font-size:14px;line-height:1.7;color:#CBD5E3;margin:0 0 18px}
.plan-card .plan-card__position{min-height:72px;color:#E2E9F2}.plan-card__position strong{font-weight:500}
.plan-card h4{font:500 10px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#F0A32C;margin:0 0 10px}
.plan-card .plan-card__fit{min-height:96px}
.plan-card details{border-top:1px solid #314259;border-bottom:1px solid #314259;margin-bottom:22px}
.plan-card summary{display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;cursor:pointer;font-size:13px;font-weight:500;color:#E2E9F2;padding:16px 0}
.plan-card summary::-webkit-details-marker{display:none}
.plan-card summary span{font-size:22px;color:#F0A32C;transition:transform .2s}
.plan-card details[open] summary span{transform:rotate(45deg)}
.plan-card__details{padding:8px 0 2px}
.plan-card__details ul{margin:0 0 22px;padding-left:18px}.plan-card__details li{font-size:13px;line-height:1.7;color:#CBD5E3;margin-bottom:8px}
.plan-card__details h4{margin-top:16px}
.plan-card__cta{margin-top:auto;font-size:13px;padding:14px 12px;display:flex;justify-content:space-between;gap:10px}
.plan-section__note{font-size:12px;line-height:1.7;color:#BDC9DA;margin:22px 0 0;max-width:980px}
.plan-card summary:focus-visible{outline:2px solid #F0A32C;outline-offset:4px}
@keyframes plan-enter{from{translate:0 18px}to{translate:0 0}}
@media(prefers-reduced-motion:no-preference){
 .plan-card{transition:border-color .25s,box-shadow .25s}
 .plan-card:hover{border-color:#9B743C;box-shadow:0 12px 30px #0002}
 .plan-section.is-entering .plan-card{animation:plan-enter .7s calc(var(--plan-index)*.1s) cubic-bezier(.16,1,.3,1) both}
 .plan-card details[open] .plan-card__details{animation:plan-enter .3s ease-out}
}
@media(prefers-reduced-motion:reduce){.plan-card::before,.plan-card summary span{transition:none}}
@media(max-width:1000px){.plan-section__grid{gap:14px}.plan-card{padding:22px}.plan-card h3{font-size:23px}.plan-card .plan-card__position{min-height:96px}.plan-card .plan-card__fit{min-height:144px}}
@media(max-width:760px){.plan-section{padding-block:55px}.plan-section__grid{grid-template-columns:1fr}.plan-card .plan-card__position,.plan-card .plan-card__fit{min-height:0}.plan-card{padding:25px}}


.plan-compare{padding-block:0 70px}
.plan-compare__head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:25px}
.plan-compare__head h2{font:600 clamp(30px,3vw,42px)/1.15 var(--f-display);letter-spacing:-.025em;color:#F3F6FA}
.plan-compare__head>p{font-size:13px;color:#BDC9DA;margin:0}
.plan-compare__scroll{overflow:auto;border:1px solid #314259;border-radius:10px;background:#101F33}
.plan-compare__table{border-collapse:separate;border-spacing:0;width:100%;min-width:650px;text-align:left;table-layout:fixed}
.plan-compare__table th,.plan-compare__table td{padding:12px 18px;border-bottom:1px solid #273950;font-size:13px;line-height:1.45;color:#D6DFEA}
.plan-compare__table th:first-child{width:34%}
.plan-compare__table thead th{padding-block:20px;background:#182C44;color:#F3F6FA;font:600 15px/1.4 var(--f-display)}
.plan-compare__table thead th:first-child{font:11px var(--f-mono);color:#BDC9DA}
.plan-compare__table tbody th{font-weight:500;color:#E2E9F2}
.plan-compare__table th:not(:first-child),.plan-compare__table td{text-align:center}
.plan-compare__table tr>:nth-child(3){background:#F0A32C07}
.plan-compare__table thead th:nth-child(3){box-shadow:inset 0 3px #F0A32C;color:#FFBD50;background:#27303B}
.plan-compare__table .is-included{color:#A7DCC9}
.plan-compare__table tbody tr:last-child>*{border-bottom:0}
.plan-compare__toggle{display:flex;justify-content:center;gap:16px;align-items:center;width:100%;padding:16px;background:#14253C;border:1px solid #314259;border-radius:6px;margin-top:12px;font:500 13px var(--f-body);color:#F0A32C;cursor:pointer}
.plan-compare__toggle[hidden]{display:none}
.plan-compare.is-collapsed .plan-compare__extra{display:none}
.plan-compare__toggle:focus-visible,.plan-compare__scroll:focus-visible{outline:2px solid #F0A32C;outline-offset:4px}
@keyframes compare-enter{from{translate:0 8px}to{translate:0 0}}
@media(prefers-reduced-motion:no-preference){
 .plan-compare.is-entering tbody tr{animation:compare-enter .45s calc(var(--row)*.035s) ease-out both}
 .plan-compare__table tbody tr>*{transition:background-color .2s}
 .plan-compare__table tbody tr:hover>*{background-color:#21364E}
 .plan-compare__toggle{transition:background-color .2s}.plan-compare__toggle:hover{background:#20344B}
}
@media(max-width:700px){.plan-compare{padding-bottom:55px}.plan-compare__head{display:block}.plan-compare__head>p{margin-top:14px}.plan-compare__table th,.plan-compare__table td{padding:11px 13px;font-size:12px}.plan-compare__table th:first-child{width:32%}}


/* The nav is position:fixed at 76px, so every anchor jump parked its
   target heading underneath it. Page-wide, not calculator-specific -
   kept when the calculator was reverted to v1. */
section[id]{scroll-margin-top:calc(var(--nav-h) + 18px)}


/* ============================================================
     RECONNECTION
     The rebuild renamed the markup underneath the motion layer, so five
     sections fell out of it: loop 0%, plans 1%, services 2%, faq 3%,
     why 4%. Nothing here is a new effect — it points the existing,
     already-tuned keyframes at the new class names.
     ============================================================ */

/* Spotlight needs a positioned box; two of the four rebuilt families are
   position:static. */
html.motion .capabilities__card,
html.motion .commitments__item{position:relative}

/* --- cascades ---
   A named timeline on each container, never per-element view(): the items
   in a row sit at the same height, so a per-element timeline gives them
   identical timing and --i buys nothing. */
@supports (animation-timeline: view()){
  html.cssmotion .bjl__stages{view-timeline-name:--bjl}
  html.cssmotion .bjl__stage{
    animation:m-rise-t linear both;
    animation-timeline:--bjl;
    animation-range:entry calc(6% + var(--i,0)*9%) cover calc(22% + var(--i,0)*9%);
  }

  html.cssmotion .capabilities__grid{view-timeline-name:--caps}
  html.cssmotion .capabilities__card{
    animation:m-rise-t linear both;
    animation-timeline:--caps;
    animation-range:entry calc(6% + var(--i,0)*7%) cover calc(20% + var(--i,0)*7%);
  }

  html.cssmotion .plan-section__grid{view-timeline-name:--plans}
  html.cssmotion .plan-card{
    animation:m-rise-t linear both;
    animation-timeline:--plans;
    animation-range:entry calc(6% + var(--i,0)*9%) cover calc(22% + var(--i,0)*9%);
  }

  html.cssmotion .commitments__grid{view-timeline-name:--commit}
  html.cssmotion .commitments__item{
    animation:m-rise-t linear both;
    animation-timeline:--commit;
    animation-range:entry calc(6% + var(--i,0)*8%) cover calc(20% + var(--i,0)*8%);
  }

  /* the FAQ answers arrive in reading order */
  html.cssmotion .questions__list{view-timeline-name:--faq}
  html.cssmotion .questions__list details{
    animation:m-rise-sm linear both;
    animation-timeline:--faq;
    animation-range:entry calc(2% + var(--i,0)*4%) entry calc(30% + var(--i,0)*4%);
  }

  /* the mono index labels print on, like every other instrument caption */
  html.cssmotion .bjl__label,
  html.cssmotion .capabilities__index,
  html.cssmotion .plan-card__number,
  html.cssmotion .commitments__number{
    animation:m-label linear both;
    animation-timeline:view();
    animation-range:entry 10% cover 24%;
  }
}

/* --- spotlight on the rebuilt cards --- */
html.motion .bjl__stage::before,
html.motion .capabilities__card::before,
html.motion .plan-card::before,
html.motion .commitments__item::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  border-radius:inherit;opacity:0;
  background:radial-gradient(220px circle at var(--px,50%) var(--py,50%),
    rgba(240,163,44,.14),rgba(240,163,44,.04) 40%,transparent 70%);
  transition:opacity .32s var(--ease);
}
html.motion .bjl__stage:hover::before,
html.motion .capabilities__card:hover::before,
html.motion .plan-card:hover::before,
html.motion .commitments__item:hover::before{opacity:1}
html.motion .bjl__stage>*,
html.motion .capabilities__card>*,
html.motion .plan-card>*,
html.motion .commitments__item>*{position:relative;z-index:1}

/* --- FAQ disclosure --- */
.questions__list summary{cursor:pointer;list-style:none}
.questions__list summary::-webkit-details-marker{display:none}
.questions__list summary::after{
  content:"";width:9px;height:9px;flex:none;margin-left:auto;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transform-origin:center;
}
html.motion .questions__list summary::after{transition:transform var(--m-base) var(--m-spring)}
.questions__list details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
html.motion .questions__list summary{transition:color var(--m-fast) var(--ease)}
.questions__list summary:hover{color:var(--accent-text)}
.questions__list summary:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px}
@keyframes m-answer{from{opacity:0;translate:0 -6px} to{opacity:1;translate:0 0}}
html.motion .questions__list details[open] p{animation:m-answer .34s var(--ease) both}

@media (prefers-reduced-motion:reduce){
  .bjl__stage,.capabilities__card,.plan-card,.commitments__item,
  .questions__list details,.bjl__label,.capabilities__index,
  .plan-card__number,.commitments__number{
    animation:none!important;opacity:1!important;
    translate:none!important;rotate:none!important;clip-path:none!important}
  .questions__list summary::after,.questions__list details[open] p{
    transition:none!important;animation:none!important}
}


/* The comparison table was left with only its eyebrow moving. Rows fill in
   like the ledger's, and the ticks pop as their row lands.

   The timeline is hosted on the SECTION, not on .plan-compare__scroll:
   that wrapper carries overflow-x:auto, which makes it a scroll container,
   and a view timeline hosted there is measured against a box that never
   scrolls vertically — it resolves once and sits frozen. That cost a full
   debugging round on the ledger. */
@supports (animation-timeline: view()){
  html.cssmotion #compare{view-timeline-name:--cmp}
  html.cssmotion .plan-compare__table tbody tr{
    animation:m-slide-l linear both;
    animation-timeline:--cmp;
    animation-range:entry calc(14% + var(--i,0)*2.6%) entry calc(40% + var(--i,0)*2.6%);
  }
  html.cssmotion .plan-compare__table .is-included{
    animation:m-pop linear both;
    animation-timeline:--cmp;
    animation-range:entry calc(18% + var(--i,0)*2.6%) entry calc(44% + var(--i,0)*2.6%);
  }
}
html.motion .plan-compare__table tbody tr{transition:background-color var(--m-fast) linear}
html.motion .plan-compare__table tbody tr:hover{background:rgba(240,163,44,.06)}
@media (prefers-reduced-motion:reduce){
  .plan-compare__table tbody tr,.plan-compare__table .is-included{
    animation:none!important;opacity:1!important;transform:none!important}
}


/* ============================================================
     PINNING — the one idiom from fristnor not yet ported
     fristnor holds an element still while its content advances (two
     pinned triggers and a snap). Everything else of its vocabulary is
     already here: scene grading, scrubbed staggers, the word highlight,
     scrubbed counters. This page had no pinned moment at all.
     Done with position:sticky rather than a scroll library — the stage
     node already sits in its own 56px gutter column, so it can hold
     there for the length of its own stage and hand over to the next.
     ============================================================ */
@media (min-width:900px){
  /* Specificity matters here: the spotlight block sets
     `html.motion .bjl__stage > * { position: relative }` at (0,2,1) to lift
     card content above the glow, which silently outranks a bare .bjl__node
     at (0,1,0) and left this as relative. Matching that weight is what
     makes it stick. */
  html.motion .bjl__stage>.bjl__node,
  .bjl__stage>.bjl__node{
    position:sticky;
    top:calc(var(--nav-h) + 30px);
    align-self:start;          /* without this the grid cell stretches and never sticks */
    z-index:2;
  }

  /* A rail behind the node, filling as you read that stage. The node is
     what holds; the rail is what says how much of the stage is left. */
  .bjl__stage{position:relative}
  .bjl__stage::before{
    content:"";position:absolute;left:27px;top:8px;bottom:8px;width:2px;
    background:var(--line-2);opacity:.45;
  }
  .bjl__stage::after{
    content:"";position:absolute;left:27px;top:8px;width:2px;height:calc(100% - 16px);
    background:linear-gradient(180deg,var(--amber),var(--amber-hi));
    transform:scaleY(0);transform-origin:top center;
  }
  @supports (animation-timeline: view()){
    html.cssmotion .bjl__stage::after{
      animation:m-scale-y linear both;
      animation-timeline:view();
      animation-range:cover 12% cover 72%;
    }
  }

  /* the node lights while its stage owns the viewport and dims once the
     next takes over — the handoff fristnor's snap makes explicit */
  @keyframes m-node-live{
    0%     {border-color:var(--line-2);color:var(--text-3)}
    18%,74%{border-color:var(--amber);color:var(--amber)}
    100%   {border-color:var(--line-2);color:var(--text-3)}
  }
  @supports (animation-timeline: view()){
    html.cssmotion .bjl__node{
      animation:m-node-live linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
  }
}

@media (prefers-reduced-motion:reduce){
  .bjl__node{position:static!important;animation:none!important}
  .bjl__stage::after{animation:none!important;transform:scaleY(1)!important}
}


/* ============================================================
     BACKGROUND — closing the light/dark asymmetry
     Dark bands carry two ambient layers (the dot grid and the signal
     sweep); light bands carried only the blueprint grid. Rather than
     inventing a second visual language for paper, this is a COARSER
     blueprint at a different drift rate — two grids moving at different
     speeds is parallax, which reads as depth rather than as pattern.
     An amber sweep on paper would read as a smudge, so it is not that.
     ============================================================ */
html.motion .band--light::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(90deg,rgba(94,114,144,.10) 1px,transparent 1px),
    linear-gradient(rgba(94,114,144,.10) 1px,transparent 1px);
  background-size:288px 288px;          /* 3x the fine grid beneath it */
  opacity:.55;
}
@keyframes m-blueprint-coarse{
  from{background-position:0 14px,0 14px}
  to  {background-position:0 -14px,0 -14px}
}
@supports (animation-timeline: view()){
  /* Drifts against the fine grid, and in the opposite direction, so the
     two separate as you pass rather than moving as one sheet. */
  html.cssmotion .band--light::after{
    animation:m-blueprint-coarse linear both;
    animation-timeline:view();
    animation-range:cover 0% cover 100%;
  }
}

/* A paper ground has a warmth to it. One very soft radial per light band,
   drifting slowly — under 3% alpha, so it registers as the ground not
   being flat rather than as a visible shape. */
@keyframes m-paper{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%    {transform:translate3d(-2%,1.5%,0) scale(1.06)}
}
html.motion .band--light>.wrap{position:relative;z-index:1}
html.motion .band--light{isolation:isolate}

/* the footer is the one dark band with no ambient layer of its own */
html.motion .ft::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(240,163,44,.45),transparent);
  pointer-events:none;
}
@keyframes m-foot{
  0%,100%{opacity:.25;transform:scaleX(.6)}
  50%    {opacity:1;  transform:scaleX(1)}
}
html.motion .ft::after{transform-origin:center;animation:m-foot 9s ease-in-out infinite}

/* Cost: these are full-band paints. The mobile budget already drops the
   dark sweep and the rotating wash below 820px; the new light layer goes
   with them for the same reason. */
@media (max-width:820px){
  html.motion .band--light::after{display:none}
  html.motion .ft::after{animation:none;opacity:.5;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .band--light::after{animation:none!important}
  .ft::after{animation:none!important;opacity:.5!important;transform:none!important}
}


/* ============================================================
     HEAT MAP — crosshair readout
     A browser tooltip shows one cell in isolation after a delay, which is
     the wrong affordance for a grid whose whole point is reading an hour
     against a weekday. Hovering now holds the row and column lit and
     prints the value beneath.
     ============================================================ */
.hm__probe{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;
  color:var(--text-3);min-height:34px;
}
.hm__probe b{color:#fff;font-weight:600;letter-spacing:.1em}
.hm__probe .hm__probe-v{
  color:var(--amber);font-family:var(--f-display);font-weight:700;
  font-size:17px;letter-spacing:-.01em;font-variant-numeric:tabular-nums;
}
.hm__probe-sw{
  width:11px;height:11px;border-radius:2px;flex:none;
  background:var(--probe-bg,rgba(240,163,44,.2));
  box-shadow:0 0 0 1px var(--line-2);
}
.hm__probe-hint{color:var(--text-3);opacity:.75}

/* Dimming uses filter, not opacity: the cells' reveal animation owns
   opacity and would simply outrank it. */
html.motion .hm__c{transition:filter .18s var(--ease),box-shadow .18s var(--ease)}
.hm__grid.is-probing .hm__c{filter:saturate(.2) brightness(.55)}
.hm__grid.is-probing .hm__c.is-row,
.hm__grid.is-probing .hm__c.is-col{filter:none}
.hm__grid.is-probing .hm__c.is-hit{
  filter:none;
  box-shadow:0 0 0 2px var(--ink-850),0 0 0 3px var(--amber);
  z-index:5;
}
/* The cell you last read keeps a quieter ring after the pointer leaves,
   so the figure in the readout still has something to point at. Dimmer
   than .is-hit on purpose: it is a held reading, not a live one. */
.hm__c.is-held{box-shadow:0 0 0 2px var(--ink-850),0 0 0 3px rgba(240,163,44,.55);z-index:4}
.hm__grid.is-probing .hm__c.is-held{box-shadow:none}
.hm__grid.is-probing .hm__c.is-held.is-hit{
  box-shadow:0 0 0 2px var(--ink-850),0 0 0 3px var(--amber);
}

/* the day and hour labels light with their line */
.hm__d.is-active,.hm__hl.is-active{color:var(--amber)}
html.motion .hm__d,html.motion .hm__hl{transition:color .18s var(--ease)}

@media (hover:none),(pointer:coarse){
  /* no sustained hover to drive it; the per-cell title still works */
  .hm__grid.is-probing .hm__c{filter:none}
  .hm__probe{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hm__c,.hm__d,.hm__hl{transition:none!important}
}


/* ============================================================
   PHONE READABILITY
   The audience is 30-60 year old owners reading this on a phone,
   often outdoors and often not wearing the glasses they need for
   14px. Nothing here was failing contrast -- the worst measured
   5.4:1 -- so this is a SIZE pass, not a colour one, with a lift
   only on the few greys that were thin enough to read as faint.

   16px is the floor for anything that is a sentence. Labels,
   eyebrows and mono captions stay small on purpose: they are
   scanned, not read, and growing them would crowd the copy this
   block exists to make legible.

   Last in the sheet so it wins on order rather than by carrying
   !important or inflating specificity.
   ============================================================ */
@media (max-width:640px){
  /* --- sentences --- */
  .lead,.hero__sub,.cta__body{font-size:17px;line-height:1.62}
  .svc__i p,.why__i p,.ind__i p,.trades__i p,.proc__i p,.step p,
  .capabilities__card p,.plan-card p,.commitments__item p,
  .bjl__stage p,.form__ok p{font-size:16px;line-height:1.62}
  /* .questions details p is (0,1,2) and sets 15px in its own 600px block,
     so this has to match that shape to win on order rather than lose to it. */
  .questions__list details p{font-size:16px;line-height:1.62}
  .capabilities__card li,.plan-card li,.questions__list li{font-size:15.5px;line-height:1.6}
  .capabilities__outcome,.plan-card__fit{font-size:15.5px;line-height:1.6}
  .bjl__closing{font-size:16.5px;line-height:1.6}
  .leg__t,.fix-note{font-size:15.5px;line-height:1.6}
  .questions__list summary{font-size:16px;line-height:1.5}

  /* --- secondary copy: smaller than a sentence, still read --- */
  .bjl__note,.stl__note,.leak__foot,.shot__t,.small{font-size:14.5px;line-height:1.55}
  .ar__d,.proc__w{font-size:13.5px}

  /* --- fine print: lifted off 11px, and off the faintest grey ---
     --steel-500 measured 5.4:1 here; at this size that reads thin
     even though it passes, so the disclaimers move up one step. */
  .foot-note,.form__fine,.plan-section__note,.hero__note{font-size:13px;line-height:1.6}
  html #arith .ar__note,html #arith .ar__delta{font-size:13px;line-height:1.6}
  .foot-note,.form__fine,.hero__note{color:#A3B4C8}
}


/* ============================================================
   HEAT MAP — second view, peak markers, touch and keyboard
   The grid already held the argument; it just could not be read in the
   unit the page actually sells on. Cost per booked job is the same cell
   divided into the composite's cost per lead, so the money view invents
   nothing -- it is the grid's own arithmetic, stated in dollars.
   ============================================================ */
.hm__head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.hm__head .hm__t{margin-bottom:0}
.hm__views{display:flex;gap:2px;padding:2px;background:var(--ink-900);border:1px solid var(--ink-700);border-radius:6px}
.hm__view{
  appearance:none;border:0;background:transparent;cursor:pointer;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);padding:7px 11px;border-radius:4px;
}
html.motion .hm__view{transition:background-color var(--m-fast) var(--ease),color var(--m-fast) var(--ease)}
.hm__view:hover{color:var(--text)}
.hm__view.is-on{background:var(--amber);color:#0A1526;font-weight:600}
.hm__view:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* Peak and trough carry a permanent ring, so the headline reading is
   visible without a pointer ever touching the grid. */
.hm__c.is-peak{box-shadow:0 0 0 2px var(--ink-850),0 0 0 3px #FFFFFF}
.hm__c.is-trough{box-shadow:0 0 0 2px var(--ink-850),0 0 0 3px rgba(255,255,255,.38)}
.hm__grid.is-probing .hm__c.is-peak,.hm__grid.is-probing .hm__c.is-trough{box-shadow:none}

.hm__marks{display:flex;gap:8px 26px;flex-wrap:wrap;margin-top:14px;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;color:var(--text-3)}
.hm__mark{display:flex;align-items:center;gap:8px}
.hm__mark i{width:9px;height:9px;border-radius:2px;flex:none;background:var(--amber);
  box-shadow:0 0 0 2px var(--ink-850),0 0 0 3px #FFFFFF}
.hm__mark--low i{background:rgba(240,163,44,.18);box-shadow:0 0 0 2px var(--ink-850),0 0 0 3px rgba(255,255,255,.38)}
.hm__mark b{color:#fff;font-weight:600}
.hm__mark span{color:var(--amber)}

/* Row and column means, shown only while a cell is being read. */
.hm__probe-avg{color:var(--text-3);letter-spacing:.06em}
.hm__probe-avg b{color:var(--text-2);font-weight:600;letter-spacing:.06em}

/* The grid takes focus as one widget and arrow keys walk it, so the
   readout is reachable without a pointer at all. */
.hm__grid:focus-visible{outline:2px solid var(--amber);outline-offset:6px;border-radius:3px}
.hm__c.is-cursor{box-shadow:0 0 0 2px var(--ink-850),0 0 0 3px var(--amber);z-index:4}

@media (hover:none),(pointer:coarse){
  /* Tapping pins a cell, so the readout earns its place on touch after all. */
  .hm__probe{display:flex}
  .hm__grid.is-probing .hm__c{filter:saturate(.2) brightness(.55)}
  .hm__grid.is-probing .hm__c.is-row,.hm__grid.is-probing .hm__c.is-col{filter:none}
  .hm__c{cursor:pointer}
  .hm__views{width:100%;justify-content:stretch}
  /* 26px buttons on a finger. The floor has to be stated here because the
     component rule sizes them by padding for a mouse. */
  .hm__view{flex:1;min-height:44px;display:flex;align-items:center;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.hm__view{transition:none!important}}


/* ============================================================
   HEAT MAP — tracking crosshair lines
   The row/column lighting snaps to whole cells, which is right for
   reading a value but gives the pointer nothing to follow between them.
   Two hairlines track the cursor continuously over the top, the same way
   .cursorglow does: position arrives as --hx/--hy written on a rAF tick,
   so the browser only ever composites a transform.
   ============================================================ */
.hm__grid{position:relative}
.hm__grid::before,.hm__grid::after{
  content:"";position:absolute;pointer-events:none;z-index:4;opacity:0;
  background:linear-gradient(var(--xh-dir,to bottom),
    transparent,rgba(240,163,44,.55) 18%,rgba(240,163,44,.55) 82%,transparent);
  transition:opacity .22s var(--ease);
  will-change:transform;
}
/* vertical hairline */
.hm__grid::before{
  top:-6px;bottom:-6px;left:0;width:1px;
  transform:translate3d(var(--hx,-9999px),0,0);
}
/* horizontal hairline */
.hm__grid::after{
  left:-6px;right:-6px;top:0;height:1px;--xh-dir:to right;
  transform:translate3d(0,var(--hy,-9999px),0);
}
html.motion .hm__grid.is-tracking::before,
html.motion .hm__grid.is-tracking::after{opacity:1}

/* No cursor to follow, and two extra composited layers per tap is pure
   cost -- the tap-to-pin ring already carries the reading on touch. */
@media (hover:none),(pointer:coarse){
  .hm__grid::before,.hm__grid::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hm__grid::before,.hm__grid::after{transition:none!important}
}


/* ============================================================
   SITE NAV — floating glass pill for the multi-page site
   Replaces the one-page scroll-spy nav. It keeps the IDs the core
   script needs unguarded: #nav (stuck state), #burger, #drawer,
   #drawerClose and #mbar. New class names on purpose, so none of
   the old .nav* rules above can reach it.
   Closed panels use visibility:hidden, so the AGENTS.md "nothing
   left below 0.5 opacity" check still returns 0.
   ============================================================ */
.snav{position:fixed;inset:14px 0 auto 0;z-index:80;padding-inline:var(--gutter);pointer-events:none}
.snav__bar{
  pointer-events:auto;max-width:var(--w-wide);margin-inline:auto;height:64px;
  display:flex;align-items:center;gap:var(--sp-4);padding:0 8px 0 22px;border-radius:999px;
  background:rgba(10,21,38,.62);border:1px solid rgba(207,217,230,.12);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.snav.is-stuck .snav__bar{
  background:rgba(10,21,38,.88);border-color:rgba(207,217,230,.16);
  box-shadow:0 24px 48px -28px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.05);
}
html.motion .snav__bar{transition:background-color var(--m-base) var(--ease),box-shadow var(--m-base) var(--ease),border-color var(--m-base) var(--ease)}
.snav .logo{flex:0 0 auto}

.snav__links{margin-inline:auto}
.snav__list{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.snav__item{position:relative}
.snav__link,.snav__trigger{
  display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 15px;border-radius:999px;
  font:500 14px/1 var(--f-body);color:var(--steel-300);text-decoration:none;
  background:transparent;border:0;cursor:pointer;white-space:nowrap;
}
html.motion .snav__link,html.motion .snav__trigger{transition:color var(--m-fast) var(--ease),background-color var(--m-fast) var(--ease)}
.snav__link:hover,.snav__trigger:hover,.snav__item.is-open>.snav__trigger,
.snav__link:focus-visible,.snav__trigger:focus-visible{color:#fff;background:rgba(207,217,230,.08)}
.snav__link[aria-current="page"],.snav__trigger[data-current]{color:#fff;background:rgba(240,163,44,.13)}
.snav__chev{width:10px;height:10px;opacity:.7}
html.motion .snav__chev{transition:rotate var(--m-fast) var(--ease)}
.snav__item.is-open .snav__chev{rotate:180deg}

.snav__panel{
  position:absolute;top:calc(100% + 16px);left:50%;width:340px;padding:8px;border-radius:20px;
  background:var(--ink-850);border:1px solid var(--ink-700);
  box-shadow:0 24px 48px -28px rgba(0,0,0,.85),0 2px 0 rgba(255,255,255,.02) inset;
  translate:-50% -6px;scale:.98;transform-origin:50% 0;opacity:0;visibility:hidden;
}
html.motion .snav__panel{transition:opacity 220ms var(--ease),translate 220ms var(--ease),scale 220ms var(--ease),visibility 0s linear 220ms}
.snav__item.is-open .snav__panel{opacity:1;visibility:visible;translate:-50% 0;scale:1;transition-delay:0s}
/* hover bridge across the gap, so the pointer can travel into the panel */
.snav__panel::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.snav__panel a{display:block;padding:12px 14px;border-radius:13px;text-decoration:none}
html.motion .snav__panel a{transition:background-color var(--m-fast) var(--ease)}
.snav__panel a:hover,.snav__panel a:focus-visible{background:var(--ink-800)}
.snav__panel a[aria-current="page"] .snav__pt{color:var(--amber-hi)}
.snav__pt{display:block;color:#fff;font:600 14px/1.3 var(--f-body)}
.snav__pd{display:block;margin-top:3px;color:var(--steel-500);font:400 12.5px/1.45 var(--f-body)}

.snav__actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.snav__ghost{
  display:inline-flex;align-items:center;height:46px;padding:0 20px;border-radius:999px;
  font:500 14px/1 var(--f-body);color:#fff;text-decoration:none;
  border:1px solid rgba(207,217,230,.2);background:transparent;
}
html.motion .snav__ghost{transition:border-color var(--m-fast) var(--ease),color var(--m-fast) var(--ease)}
.snav__ghost:hover,.snav__ghost:focus-visible{border-color:var(--amber);color:var(--amber-hi)}
.snav .btn{border-radius:999px;min-height:46px;padding:0 22px}

.snav__burger{
  display:none;place-items:center;width:46px;height:46px;border-radius:50%;cursor:pointer;
  background:rgba(207,217,230,.08);border:1px solid rgba(207,217,230,.16);
}
.snav__burger span{display:block;position:relative;width:16px;height:0}
.snav__burger span::before,.snav__burger span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:#fff}
.snav__burger span::before{top:-4px}
.snav__burger span::after{top:3px}

@media (max-width:1079px){
  .snav__links,.snav__ghost{display:none}
  .snav__actions{margin-left:auto}
  .snav__burger{display:grid}
}
@media (max-width:520px){
  .snav{inset-block-start:10px;padding-inline:12px}
  .snav__bar{height:60px;padding-left:18px}
  .snav__cta{display:none}          /* the mobile bar (#mbar) carries the CTA */
}
@media (prefers-reduced-motion:reduce){
  .snav__panel,.snav__chev,.snav__bar{transition:none!important}
}
@media (forced-colors:active){
  .snav__bar,.snav__panel{border:1px solid CanvasText}
}
@media print{ .snav{display:none!important} }

/* ============================================================
   PAGE HEAD — subpages only. Gives each page a real <h1> and
   clears the floating nav; the home page keeps its hero.
   ============================================================ */
.phead{padding-top:calc(var(--nav-h) + clamp(64px,9vw,120px));padding-bottom:clamp(44px,5.5vw,80px);border-bottom:1px solid var(--ink-700)}
.phead__crumb{display:flex;align-items:center;gap:10px;margin:0 0 var(--sp-5);font:500 12px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--steel-500)}
.phead__crumb a{color:var(--steel-300);text-decoration:none}
.phead__crumb a:hover{color:var(--amber-hi)}
.phead__crumb [aria-current]{color:var(--amber)}
.phead__t{
  margin:0 0 var(--sp-5);max-width:17ch;text-wrap:balance;color:#fff;
  font-family:var(--f-display);font-weight:600;font-stretch:106%;
  font-size:clamp(38px,5.4vw,70px);line-height:1.02;letter-spacing:-.022em;
}
.phead .lead{max-width:58ch;margin:0}

/* ============================================================
   CTA BAND — the audit offer without the form, closing every
   page except /teardown/ (which carries the form itself).
   ============================================================ */
.ctab{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-7);flex-wrap:wrap}
.ctab__copy{max-width:720px}
.ctab__copy .lead{margin-bottom:0}
.ctab__act{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:640px){ .ctab__act,.ctab__act .btn{width:100%} }


/* ============================================================
   FLUID PASS — Apple's interface principles, applied to the chrome
   (nav, menus, sheet, page heads, page-to-page movement).
   Motion rules from AGENTS.md still hold: independent translate /
   scale / rotate properties only, overflow:clip never hidden,
   and every hidden state is a closed control, never content.
   ============================================================ */

/* --- Springs. Generated from Apple's two designer parameters,
       damping ratio + response, sampled into linear(). Default is
       critically damped (1.0, .35s): settles with no overshoot.
       The bounce curve (0.8, .4s) is kept for things that were
       thrown — never for something that simply appeared. --- */
:root{
  --spring:var(--ease);            --spring-dur:.5s;
  --spring-bounce:var(--ease);     --spring-bounce-dur:.54s;
}
@supports (transition-timing-function:linear(0, 1)){
  :root{
    --spring:linear(0, 0.0233, 0.0803, 0.1558, 0.2398, 0.3254, 0.4083, 0.4859, 0.5568, 0.6205, 0.6769, 0.7262, 0.769, 0.8059, 0.8374, 0.8642, 0.8869, 0.906, 0.9221, 0.9355, 0.9468, 0.9561, 0.9639, 0.9703, 0.9756, 0.98, 0.9836, 0.9866, 0.9891, 0.9911, 0.9927, 0.9941, 0.9952, 0.9961, 0.9968, 0.9974, 0.9979, 0.9983, 0.9986, 0.9989, 1);
    --spring-dur:.52s;
    --spring-bounce:linear(0, 0.0201, 0.0716, 0.1436, 0.2274, 0.3164, 0.4058, 0.492, 0.5728, 0.6465, 0.7125, 0.7704, 0.8203, 0.8627, 0.8982, 0.9273, 0.9508, 0.9694, 0.9838, 0.9947, 1.0026, 1.0082, 1.0118, 1.014, 1.015, 1.0151, 1.0147, 1.0138, 1.0126, 1.0113, 1.0099, 1.0086, 1.0073, 1.0061, 1.005, 1.0041, 1.0032, 1.0025, 1.0019, 1.0014, 1);
    --spring-bounce-dur:.54s;
  }
}

/* --- Response: feedback lives on the press, not the release. --- */
.btn:active,.snav__link:active,.snav__trigger:active,.snav__ghost:active,
.snav__burger:active,.phead__chip:active,.drawer__links a:active{scale:.97;transition:scale 90ms ease-out}

/* --- Material: the nav is a translucent layer content passes under.
       A brighter top edge is light catching the glass. --- */
.snav__bar{
  background:rgba(10,21,38,.58);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(0,0,0,.25);
}
.snav.is-stuck .snav__bar{
  background:rgba(10,21,38,.78);
  box-shadow:0 24px 48px -28px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.3);
}
/* Scroll edge effect instead of a hard line: once the page moves,
   content dissolves softly where it slides under the floating bar. */
.snav::before{
  content:"";position:fixed;inset:0 0 auto 0;height:112px;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(6,12,23,.5),rgba(6,12,23,0));
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  -webkit-mask-image:linear-gradient(to bottom,#000 35%,transparent);mask-image:linear-gradient(to bottom,#000 35%,transparent);
  opacity:0;
}
html.motion .snav::before{transition:opacity var(--m-base) var(--ease)}
.snav.is-stuck::before{opacity:1}

/* --- Dropdowns materialise out of their trigger (scale + blur +
       fade from the top edge) and collapse back along the same path.
       Near-solid on purpose: the panel lives inside the bar, and the
       bar's backdrop-filter makes it the backdrop root — a translucent
       panel here blurs nothing and lets the headline behind show
       through sharp. Heavier material, deeper shadow instead. --- */
.snav__panel{
  background:rgba(14,27,48,.97);
  border-color:rgba(207,217,230,.13);
  box-shadow:0 32px 64px -32px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.07);
  scale:.95;translate:-50% -8px;filter:blur(5px);
}
.snav__item.is-open .snav__panel{filter:none}
html.motion .snav__panel{
  transition:opacity 180ms var(--ease),translate var(--spring-dur) var(--spring),
             scale var(--spring-dur) var(--spring),filter 220ms var(--ease),visibility 0s linear var(--spring-dur);
}
html.motion .snav__item.is-open .snav__panel{transition-delay:0s}
/* the rows inside settle a beat after the glass, top to bottom */
html.motion .snav__item.is-open .snav__panel a{animation:fl-row var(--spring-dur) var(--spring) both}
html.motion .snav__item.is-open .snav__panel a:nth-child(2){animation-delay:30ms}
html.motion .snav__item.is-open .snav__panel a:nth-child(3){animation-delay:60ms}
@keyframes fl-row{from{opacity:0;translate:0 -4px}}
html.motion .snav__chev{transition:rotate var(--spring-dur) var(--spring)}

/* --- The menu button becomes the close button: the thing you
       pressed is the thing that undoes it. --- */
.snav__burger span::after{top:2.5px}
html.motion .snav__burger span::before,html.motion .snav__burger span::after{
  transition:translate var(--spring-dur) var(--spring),rotate var(--spring-dur) var(--spring);
}
.snav__burger[aria-expanded="true"] span::before{translate:0 3.25px;rotate:45deg}
.snav__burger[aria-expanded="true"] span::after{translate:0 -3.25px;rotate:-45deg}

/* --- Mobile menu: a sheet anchored to the button that opened it.
       Replaces the full-screen slab. A scrim dims the page (a modal
       task), the bar stays above it so the anchor stays visible. --- */
.drawer{
  display:block;padding:0;background:transparent;z-index:79;
  transform:none;visibility:hidden;
}
.drawer.is-open{transform:none;visibility:visible}
html.motion .drawer{transition:visibility 0s linear var(--spring-dur)}
html.motion .drawer.is-open{transition-delay:0s}
.drawer__scrim{position:absolute;inset:0;background:rgba(4,8,16,.58);opacity:0}
html.motion .drawer__scrim{transition:opacity 280ms var(--ease)}
.drawer.is-open .drawer__scrim{opacity:1}
.drawer__sheet{
  position:absolute;top:84px;right:12px;left:12px;margin-left:auto;max-width:420px;
  display:flex;flex-direction:column;padding:8px 10px 10px;border-radius:26px;
  background:rgba(14,27,48,.86);border:1px solid rgba(207,217,230,.14);
  -webkit-backdrop-filter:blur(30px) saturate(1.6);backdrop-filter:blur(30px) saturate(1.6);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.07);
  transform-origin:calc(100% - 31px) -22px;            /* the menu button */
  opacity:0;scale:.88;translate:0 -6px;filter:blur(6px);
  touch-action:none;user-select:none;-webkit-user-select:none;
}
.drawer.is-open .drawer__sheet{opacity:1;scale:1;translate:0 0;filter:none}
html.motion .drawer__sheet{
  transition:opacity 200ms var(--ease),scale var(--spring-dur) var(--spring),
             translate var(--spring-dur) var(--spring),filter 240ms var(--ease);
}
.drawer__top{display:flex;align-items:center;justify-content:space-between;margin:0;padding:10px 12px 6px}
.drawer__label{font:500 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--steel-500)}
/* the morphing menu button is the visible close; this one stays for
   keyboard and screen-reader users and shows itself on focus */
.drawer__close{width:34px;height:34px;border-radius:50%;font-size:18px;border-color:rgba(207,217,230,.16);opacity:0}
.drawer__close:focus-visible{opacity:1}
.drawer__links{margin:0;gap:0}
.drawer__links a{
  display:flex;align-items:center;justify-content:space-between;
  font-size:22px;padding:14px 14px;border-radius:16px;border-bottom:0;letter-spacing:-.02em;
}
.drawer__links a + a{box-shadow:inset 0 1px 0 rgba(207,217,230,.07)}
.drawer__links a:hover,.drawer__links a:focus-visible{background:rgba(207,217,230,.07)}
.drawer__links a[aria-current="page"]::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber)}
html.motion .drawer.is-open .drawer__links a{animation:fl-row var(--spring-dur) var(--spring) both;animation-delay:calc(40ms + var(--i,0) * 28ms)}
.drawer__foot{padding:14px 4px 4px;gap:10px}
.drawer__foot .btn{border-radius:999px;min-height:52px}
.drawer__mail{font:400 12.5px/1 var(--f-mono);color:var(--steel-500);text-align:center;text-decoration:none;padding:8px 0}
.drawer__grab{width:38px;height:5px;border-radius:3px;margin:8px auto 2px;background:rgba(207,217,230,.28)}
.drawer.is-dragging .drawer__grab{background:rgba(207,217,230,.5)}

/* --- Page head: depth from light, not decoration; wayfinding chips. --- */
.phead{position:relative;overflow:clip}          /* clip, never hidden — AGENTS.md */
.phead > .wrap{position:relative}
.phead__glow{
  position:absolute;inset:-30% -10% auto auto;width:min(900px,80vw);aspect-ratio:1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(240,163,44,.13),rgba(240,163,44,.04) 45%,transparent 70%);
}
.phead__t{letter-spacing:-.032em;line-height:.98;font-optical-sizing:auto}
.phead .lead{color:var(--steel-300)}
.phead__toc{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:var(--sp-6)}
.phead__toc-l{font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--steel-500);margin-right:8px}
.phead__chip{
  display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;
  font:500 14px/1 var(--f-body);color:#fff;text-decoration:none;
  background:rgba(207,217,230,.06);border:1px solid rgba(207,217,230,.14);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.phead__chip svg{width:12px;height:12px;opacity:.6}
html.motion .phead__chip{transition:border-color var(--m-fast) var(--ease),background-color var(--m-fast) var(--ease)}
html.motion .phead__chip svg{transition:translate var(--spring-dur) var(--spring),opacity var(--m-fast) var(--ease)}
.phead__chip:hover,.phead__chip:focus-visible{border-color:rgba(240,163,44,.55);background:rgba(240,163,44,.08)}
.phead__chip:hover svg,.phead__chip:focus-visible svg{translate:0 2px;opacity:1}   /* hint the direction it goes */
@media (any-pointer:coarse){ .phead__chip{height:44px} }

/* anchored jumps land clear of the floating bar */
main section[id]{scroll-margin-top:104px}

/* --- Continuity between pages: the bar holds still while the page
       beneath it changes. Old content sinks away quickly, new content
       rises on the default spring. Opted into only when motion is. --- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .snav{view-transition-name:site-nav}
  .mbar{view-transition-name:site-mbar}
  ::view-transition-old(root){animation:fl-vt-out 180ms cubic-bezier(.4,0,1,1) both}
  ::view-transition-new(root){animation:fl-vt-in var(--spring-dur) var(--spring) both}
}
@keyframes fl-vt-out{to{opacity:0;translate:0 -6px}}
@keyframes fl-vt-in{from{opacity:0;translate:0 12px}}

/* --- The three accessibility signals, each with its own answer. --- */
@media (prefers-reduced-motion:reduce){
  .snav__panel,.drawer__sheet{scale:1!important;translate:none;filter:none!important}
  .snav__panel{translate:-50% 0!important}
  .snav__panel,.drawer__sheet,.drawer__scrim{transition:opacity 160ms linear,visibility 0s linear 160ms!important}
  .snav__item.is-open .snav__panel,.drawer.is-open .drawer__sheet{transition-delay:0s!important}
  .snav__panel a,.drawer__links a{animation:none!important}
  .btn:active,.snav__link:active,.snav__trigger:active,.snav__ghost:active,.snav__burger:active,.phead__chip:active{scale:1}
}
@media (prefers-reduced-transparency:reduce){
  .snav__bar,.snav__panel,.drawer__sheet,.phead__chip{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .snav__bar,.snav.is-stuck .snav__bar{background:var(--ink-900)}
  .snav__panel,.drawer__sheet{background:var(--ink-850)}
  .phead__chip{background:var(--ink-800)}
  .snav::before{display:none}
}
@media (prefers-contrast:more){
  .snav__bar,.snav__panel,.drawer__sheet{background:var(--ink-950);border-color:rgba(255,255,255,.7)}
  .phead__chip{border-color:rgba(255,255,255,.7)}
}


/* ============================================================
   PHONE HERO — the first screen most visitors ever see.
   Hierarchy from size + weight + leading as a set: the claim
   dominates, the proof reads as secondary, the action sits
   under the thumb. Tracking tightens as display type grows.
   ============================================================ */
@media (max-width:640px){
  section.hero.band{padding-top:calc(var(--nav-h) + 30px)}
  .hero .eyebrow{font-size:10.5px;letter-spacing:.12em;line-height:1.5;text-wrap:balance;margin-bottom:18px;align-items:flex-start}
  .hero .eyebrow::before{margin-top:4px}
  .hero h1.h1{font-size:clamp(42px,12.6vw,56px);line-height:.95;letter-spacing:-.037em;margin-bottom:20px}
  .hero .hero__sub{font-size:16.5px;line-height:1.55;margin-bottom:28px;text-wrap:pretty}
  .hero .hero__actions{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:26px}
  .hero .hero__actions .btn{width:100%;min-height:54px;font-size:16px}
  .hero .hero__note{display:grid;gap:10px;font-size:12.5px;letter-spacing:.02em;line-height:1.35}
  .hero .hero__dot{display:none}
  .hero .hero__note > span:not(.hero__dot){position:relative;padding-left:22px}
  .hero .hero__note > span:not(.hero__dot)::before{
    content:"";position:absolute;left:2px;top:.28em;width:8px;height:4px;
    border-left:1.5px solid var(--amber);border-bottom:1.5px solid var(--amber);rotate:-45deg;
  }
}
@media (max-width:360px){
  .hero .eyebrow{font-size:10px;letter-spacing:.1em}
}


/* ============================================================
   SUBPAGES — page heads use the site's own split head (claim
   left, supporting copy right) so the width is spent, not left
   empty; the audit page puts its form in the first screen.
   ============================================================ */
.phead__grid{display:grid;gap:var(--sp-5)}
.phead__main .phead__t{margin-bottom:0}
.phead__side .lead{color:var(--steel-300)}
.phead__side .lead a{color:var(--amber-hi);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.phead__side .phead__toc{margin-top:var(--sp-5)}
@media (min-width:1000px){
  .phead__grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:end;gap:clamp(48px,6vw,104px)}
  .phead__side{padding-bottom:10px}
}
/* the head already carries the top of the page; don't stack two
   full section paddings on top of each other */
main .phead + .band,main .phead + .tick-rule + .band{padding-top:clamp(56px,6.5vw,96px)}

/* /teardown/ — the section is the page head */
.cta--page{padding-top:calc(var(--nav-h) + clamp(44px,6vw,88px))}
.cta--page .phead__crumb{margin-bottom:var(--sp-5)}
.cta--page .cta__t{font-size:clamp(36px,4.6vw,60px);line-height:1;letter-spacing:-.03em;text-wrap:balance;margin-bottom:var(--sp-5)}
@media (max-width:959px){
  /* phones: headline, one line of why, then the form — the proof points
     follow it instead of pushing it out of the first screen */
  .cta--page .cta__grid{display:flex;flex-direction:column;gap:0}
  .cta--page .cta__grid > div[data-rv]{display:contents}
  .cta--page .phead__crumb{order:1}
  .cta--page .cta__t{order:2;margin-bottom:var(--sp-4)}
  .cta--page .cta__body{order:3;margin-bottom:var(--sp-6)}
  .cta--page .form{order:4}
  .cta--page .gets{order:5;margin-top:var(--sp-6)}
}
/* the sticky "get your audit" bar has nothing to offer on the audit page */
.page-teardown .mbar{display:none!important}


/* ============================================================
   QA FIXES (2026-09-30) — each one found by the automated pass.
   ============================================================ */
/* NOTE: overflow-x on <html> (even clip) freezes every view() timeline
   in Chromium — tested 2026-09-30: the process steps stopped animating
   and stuck half-visible. Never clip the root; clip the offending
   section instead (see below). */
/* The two content sections still at overflow:visible let their entrance
   states widen the page, so How it works and Services could be dragged
   sideways 100-195px on desktop (inherited from the one-pager). Every
   neighbouring section already uses clip; these two now match. clip on a
   section — unlike the root — creates no scroll container. */
#data,#plans{overflow-x:clip}

/* A closing menu stays painted for ~0.5s while it fades; it must not
   catch clicks meant for the page underneath during that time. */
.snav__panel{pointer-events:none}
.snav__item.is-open .snav__panel{pointer-events:auto}

/* Process ladder: the 7%-per-step stagger suits the stacked phone
   layout, but on the 2- and 5-column layouts the last steps were still
   blank while the whole row sat on screen. Compressed so the row
   finishes by the time it reaches the middle of the viewport. */
@media (min-width:760px){
  html.cssmotion .proc__line{animation-range:cover calc(8% + var(--i,0)*3%) cover calc(20% + var(--i,0)*3%)}
  html.cssmotion .proc__i .proc__w{animation-range:cover calc(6% + var(--i,0)*3%) cover calc(16% + var(--i,0)*3%)}
  html.cssmotion .proc__i .h4{animation-range:cover calc(8% + var(--i,0)*3%) cover calc(18% + var(--i,0)*3%)}
  html.cssmotion .proc__i>p{animation-range:cover calc(10% + var(--i,0)*3%) cover calc(21% + var(--i,0)*3%)}
}

/* The consent banner (privacy-controls.css, z-index 10000) sat above the open
   mobile menu: it covered the menu's call to action and caught taps meant for
   the dimmed page. It steps aside while the menu is open and returns when it
   closes. Analytics stay denied until a choice is made, either way. */
html:has(.drawer.is-open) .privacy-banner{visibility:hidden}

/* audit form: optional fields say so; everything else is required */
.field__opt{font-weight:400;opacity:.65;text-transform:none;letter-spacing:0}
.form__req{margin:0 0 var(--sp-4);font:400 13px/1.4 var(--f-body);color:var(--steel-400)}

/* headings retagged h3 -> h2 for a correct outline keep their look */
.ind__h h2{font-size:clamp(21px,1.9vw,25px);line-height:1.2;letter-spacing:-.015em;color:var(--slate-900)}
.form__ok h2{color:#fff;margin-bottom:10px;font-size:22px}


/* ---- Keep reading: descriptive links between the pages that belong together ---- */
.related{padding-block:clamp(40px,5vw,64px);border-top:1px solid var(--ink-700)}
.related__l{margin:0 0 var(--sp-4);font:500 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--steel-500)}
.related__grid{display:grid;gap:12px}
@media (min-width:760px){ .related__grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.related__i{display:flex;flex-direction:column;gap:6px;padding:20px 22px;border-radius:16px;text-decoration:none;
  background:rgba(207,217,230,.04);border:1px solid rgba(207,217,230,.12)}
html.motion .related__i{transition:border-color var(--m-fast) var(--ease),background-color var(--m-fast) var(--ease)}
.related__i:hover,.related__i:focus-visible{border-color:rgba(240,163,44,.55);background:rgba(240,163,44,.06)}
.related__t{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#fff;font:600 16px/1.3 var(--f-body)}
.related__t svg{width:13px;height:13px;flex:none;opacity:.55}
html.motion .related__t svg{transition:translate var(--spring-dur) var(--spring),opacity var(--m-fast) var(--ease)}
.related__i:hover .related__t svg,.related__i:focus-visible .related__t svg{translate:3px 0;opacity:1}
.related__d{color:var(--steel-400);font:400 14px/1.5 var(--f-body)}
.related__i:active{scale:.985}
/* in-answer links on the FAQ */
.questions__list details a{color:var(--amber-ink,#704307);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* ==== Free tools: /cost-per-lead/ and /leak-check/ (2026-10-06) ====
   Built on the calculator panel's vocabulary (.ar__bar, .ar__k, .ar__note)
   so the two tools read as instruments from the same set. No entrance
   animation hides anything: every value is in the markup at rest. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:clip;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tool{padding-top:clamp(28px,4vw,56px)}

/* ---- calculator ---- */
.cx{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:clip}
.cx__grid{display:grid}
@media(min-width:960px){.cx__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.cx__in{padding:clamp(18px,2.4vw,28px);display:grid;gap:22px;align-content:start;margin:0}
@media(min-width:960px){.cx__in{border-right:1px solid var(--line)}}
.cx__in fieldset{border:0;margin:0;padding:0;display:grid;gap:14px}
.cx__in fieldset+fieldset{padding-top:20px;border-top:1px solid var(--line)}
.cx__in legend{padding:0;margin-bottom:12px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent-text)}
.cx__f{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:4px 14px;align-items:center}
.cx__f label{font-weight:600;font-size:15px;color:var(--text)}
.cx__h{grid-column:1;grid-row:2;margin:0;font-size:12.5px;line-height:1.45;color:var(--text-3)}
.cx__inp{grid-column:2;grid-row:1/3;display:flex;align-items:center;gap:6px;height:46px;padding:0 12px;
  background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r-sm);
  font-family:var(--f-mono);font-size:14px;color:var(--text-3)}
html.motion .cx__inp{transition:border-color var(--m-fast) var(--ease),box-shadow var(--m-fast) var(--ease)}
.cx__inp:focus-within{border-color:var(--amber);box-shadow:0 0 0 3px rgba(240,163,44,.18)}
.cx__inp.is-bad{border-color:#E1614C}
.cx__inp input{flex:1;min-width:0;width:100%;height:100%;border:0;background:none;outline:none;
  font:600 16px/1 var(--f-mono);color:var(--text);text-align:right;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.cx__inp input::-webkit-outer-spin-button,.cx__inp input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
@media(max-width:420px){.cx__f{grid-template-columns:minmax(0,1fr) 124px}}

.cx__out{padding:clamp(18px,2.4vw,28px);display:grid;gap:20px;align-content:start}
.cx__hero{display:grid;gap:4px}
.cx__big{font-family:var(--f-display);font-weight:800;letter-spacing:-.03em;line-height:1;
  font-size:clamp(52px,7vw,84px);color:var(--accent-text);font-variant-numeric:tabular-nums}
.cx__pair,.cx__money{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;padding-top:16px;border-top:1px solid var(--line)}
.cx__pair>div,.cx__money>div{display:grid;gap:4px}
.cx__mid{font-family:var(--f-display);font-weight:700;font-size:28px;letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums}
.cx__sm{font-family:var(--f-display);font-weight:700;font-size:19px;color:var(--text);font-variant-numeric:tabular-nums}
.cx__sm.is-neg{color:#F08A78}
.cx__be{margin:0;padding:10px 12px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--bg);
  font-size:13.5px;line-height:1.5;color:var(--text-2)}
.cx__be b{color:var(--text)}
.cx__be.is-over{border-color:rgba(225,97,76,.55)}
.cx__be.is-over b{color:#F08A78}

.cx__fun{display:grid;gap:8px}
.cx__step{display:grid;grid-template-columns:84px minmax(0,1fr) 56px;gap:12px;align-items:center}
.cx__sk{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.cx__track{height:12px;border-radius:2px;background:repeating-linear-gradient(135deg,transparent 0 4px,rgba(163,180,200,.12) 4px 5px);overflow:clip}
.cx__track i{display:block;height:100%;width:var(--w,100%);background:var(--steel-400);border-radius:2px}
.cx__step[data-step="booked"] .cx__track i,.cx__step[data-step="done"] .cx__track i{background:var(--booked)}
html.motion .cx__track i{transition:width .45s var(--ease)}
.cx__sv{text-align:right;font-family:var(--f-mono);font-size:14px;color:var(--text)}
.cx__step.is-leak .cx__sk{color:var(--accent-text)}
.cx__leak{margin:0;font-size:14px;line-height:1.55;color:var(--text-2)}
.cx__leak b{color:var(--accent-text);font-weight:600}

.cx__lt{margin:0 0 10px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.cx__lifts{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cx__lifts li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm)}
.cx__lifts li.is-best{border-color:var(--amber);background:rgba(240,163,44,.07)}
.cx__lifts .k{font-size:14px;color:var(--text)}
.cx__lifts .v{font-family:var(--f-mono);font-size:13px;color:var(--booked);text-align:right}
.cx__lifts .d{grid-column:1/-1;font-size:12.5px;color:var(--text-3)}
.cx__lifts .tag{margin-left:8px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)}

.cx__act{display:flex;flex-wrap:wrap;gap:10px;padding-top:4px}
.cx__act .btn{flex:1 1 auto;justify-content:center}

/* ---- the guide under the calculator ---- */
.guide__eq{display:grid;gap:14px;margin-bottom:var(--sp-7)}
@media(min-width:820px){.guide__eq{grid-template-columns:repeat(3,1fr)}}
.guide__card{padding:22px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface)}
.guide__card p{margin:0;color:var(--text-2);font-size:14.5px;line-height:1.55}
.guide__card--hero{border-color:var(--series-1-ink);box-shadow:inset 0 3px 0 var(--amber)}
.guide__k{font-family:var(--f-mono);font-size:10.5px!important;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)!important;margin-bottom:10px!important}
.guide__f{font-family:var(--f-display);font-weight:700;font-size:21px!important;letter-spacing:-.015em;color:var(--text)!important;margin-bottom:8px!important}
.guide__why{max-width:var(--w-prose);margin-bottom:var(--sp-7)}
.guide__why h3{margin-bottom:12px}
.guide__why p{color:var(--text-2);line-height:1.65;margin:0}
.guide__why a,.guide__qa a{color:var(--accent-text)}

/* ---- leak check ---- */
.lc{display:grid;gap:clamp(20px,3vw,36px)}
@media(min-width:960px){.lc{grid-template-columns:minmax(0,1fr) 300px;align-items:start}
  .lc__side{position:sticky;top:calc(var(--nav-h) + 20px)}
  .lc__res{grid-column:1/-1}}
.lc__form{margin:0}
.lc__qs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.lc__q fieldset{margin:0;padding:18px clamp(16px,2vw,22px);border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface)}
html.motion .lc__q fieldset{transition:border-color var(--m-base) var(--ease)}
.lc__q.is-done fieldset{border-color:var(--line)}
.lc__q.is-missing fieldset{border-color:#E1614C}
.lc__q legend{display:grid;gap:6px;padding:0;margin-bottom:14px;float:left;width:100%}
.lc__q legend+*{clear:both}
.lc__meta{display:flex;gap:10px;align-items:baseline;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.lc__n{color:var(--accent-text)}
.lc__area{color:var(--text-3)}
.lc__t{font-family:var(--f-display);font-weight:600;font-size:clamp(17px,1.6vw,19px);line-height:1.35;color:var(--text);letter-spacing:-.008em}
.lc__opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.lc__o{position:relative;display:block;cursor:pointer}
.lc__o input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.lc__o span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 10px;text-align:center;
  border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--bg);
  font-size:14px;line-height:1.25;color:var(--text-2)}
html.motion .lc__o span{transition:background var(--m-fast) var(--ease),border-color var(--m-fast) var(--ease),color var(--m-fast) var(--ease),scale var(--m-fast) var(--ease)}
.lc__o:hover span{border-color:var(--steel-500);color:var(--text)}
html.motion .lc__o:active span{scale:.97}
.lc__o input:focus-visible+span{outline:2px solid var(--amber);outline-offset:2px}
.lc__o input:checked+span{border-color:var(--amber);background:rgba(240,163,44,.12);color:var(--text);font-weight:600}
.lc__o input[value="0"]:checked+span{border-color:#E1614C;background:rgba(225,97,76,.1)}
.lc__o input[value="2"]:checked+span{border-color:var(--booked);background:rgba(63,190,151,.1)}
.lc__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:18px}
.lc__prog{margin:0;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:var(--text-3)}
.lc__prog .num{color:var(--text)}
.lc__miss{margin:12px 0 0;font-size:13.5px;color:#F08A78}
.lc__miss:empty{display:none}

.lc__side{padding:22px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface);display:grid;gap:10px}
.lc__score,.lc__big{margin:0;font-family:var(--f-display);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--text);font-variant-numeric:tabular-nums}
.lc__score{font-size:56px}
.lc__score small,.lc__big small{font-size:.36em;font-weight:600;color:var(--text-3);letter-spacing:0;margin-left:4px}
.lc__meter{height:8px;border-radius:4px;background:var(--bg);border:1px solid var(--line);overflow:clip}
.lc__meter i{display:block;height:100%;width:var(--w,0%);background:var(--amber);border-radius:4px}
html.motion .lc__meter i{transition:width .5s var(--ease)}
@media(max-width:959px){.lc__side{order:-1}}

.lc__res{padding:clamp(20px,3vw,36px);border:1px solid var(--amber);border-radius:var(--r-lg);background:var(--surface);
  display:grid;gap:clamp(20px,3vw,32px);outline:none}
@media(min-width:960px){.lc__res{grid-template-columns:260px minmax(0,1fr)}.lc__act{grid-column:1/-1}}
.lc__big{font-size:clamp(72px,9vw,104px);color:var(--accent-text)}
.lc__vt{margin:10px 0 0;font-size:15px;line-height:1.55;color:var(--text-2)}
.lc__fix h3{margin-bottom:14px;color:var(--text)}
.lc__leaks{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:lk}
.lc__leaks li{counter-increment:lk;display:grid;grid-template-columns:28px minmax(0,1fr);gap:4px 12px;padding:14px 0;border-top:1px solid var(--line)}
.lc__leaks li::before{content:counter(lk,decimal-leading-zero);grid-row:1/4;font-family:var(--f-mono);font-size:12px;color:var(--accent-text);padding-top:3px}
.lc__leaks .t{font-weight:600;color:var(--text);font-size:15.5px}
.lc__leaks .t small{margin-left:8px;font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);font-weight:400}
.lc__leaks .w{margin:0;font-size:14px;line-height:1.55;color:var(--text-2)}
.lc__leaks .f{margin:0;font-size:14px;line-height:1.55;color:var(--text)}
.lc__leaks .f b{color:var(--booked);font-weight:600}
.lc__res[hidden],.lc__more[hidden]{display:none}
.lc__score.is-empty{color:var(--text-3)}
.guide .questions{padding-block:0}
.lc__more{margin-top:8px}
.lc__more summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.lc__more summary:hover{color:var(--text)}
@keyframes lc-in{from{opacity:.001;translate:0 14px}to{opacity:1;translate:0 0}}
html.motion .lc__res.is-in{animation:lc-in .6s var(--ease) both}

/* ---- the audit form says what is attached ---- */
.form__attach{margin:16px 0 0;padding:10px 12px;border:1px dashed var(--line-2);border-radius:var(--r-sm);
  font-size:13px;line-height:1.5;color:var(--steel-300);display:flex;gap:10px;align-items:center;justify-content:space-between}
.form__attach button{flex:none;background:none;border:0;padding:6px 4px;min-height:32px;cursor:pointer;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel-400)}
.form__attach button:hover{color:var(--amber)}

@media (prefers-reduced-motion:reduce){
  .cx__track i,.lc__meter i{transition:none!important}
  .lc__res.is-in{animation:none!important}
}

/* ---- footer wordmark (hover footer) ----
   Resting state is fully drawn and faintly visible; motion only adds the
   draw-in and the pointer reveal. */
.ft{position:relative;overflow:clip}
.ft>.wrap{position:relative;z-index:1}
.ft__bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(125% 125% at 50% 10%,transparent 55%,rgba(240,163,44,.10) 100%)}
.ft__word{position:relative;z-index:1;max-width:var(--w-wide);margin:clamp(20px,3vw,40px) auto calc(-1 * clamp(10px,2vw,28px));
  padding-inline:var(--gutter);user-select:none;-webkit-user-select:none}
.ft__word svg{display:block;width:100%;height:auto;overflow:visible}
.ft__w{fill:transparent;stroke-width:1.1px;vector-effect:non-scaling-stroke;font-family:var(--f-display);font-weight:700;font-stretch:125%;font-size:150px;letter-spacing:0}
.ft__w--rest{stroke:var(--ink-600)}
@media(max-width:700px){.ft__w--rest{stroke:var(--ink-700)}.ft__w--draw{stroke:rgba(240,163,44,.7)!important}}
.ft__w--draw{stroke:rgba(240,163,44,.55);stroke-dasharray:1400;stroke-dashoffset:0}
.ft__w--glow{stroke-width:2.4px;opacity:0;filter:drop-shadow(0 0 6px rgba(255,165,36,.35))}
html.motion .ft__w--glow{transition:opacity .35s var(--ease)}
.ft__word.is-hot .ft__w--glow{opacity:1}
html.motion .ft__word.is-armed .ft__w--draw{stroke-dashoffset:1400}
html.motion .ft__word.is-armed.is-in .ft__w--draw{stroke-dashoffset:0;transition:stroke-dashoffset 4s cubic-bezier(.65,0,.35,1)}
@media (prefers-reduced-motion:reduce){.ft__word.is-armed .ft__w--draw{stroke-dashoffset:0!important;transition:none!important}}

/* ==== Tap targets (2026-10-23) ====
   Grow the touchable area to 44px without moving anything: padding grows
   the box, an equal negative margin keeps the layout where it was. */
.phead__crumb a{padding:16px 6px;margin:-16px -6px}
.ft .ft__col a{min-width:44px}
@media (any-pointer:coarse){
  .ar__reset{min-height:44px;padding-inline:16px}
}

/* ==== Nine leaks: tilt cascade, scroll-driven (home, 2026-10-23) ====
   Resting layout (no JS, reduced motion) is a plain grid of cards: nothing
   is hidden. html.tc-on (set by script) turns the section into a sticky
   stage; scroll sets a target position along the line, and two springs
   chase it — a stiff one for the slide, a looser one for the tilt — so each
   card swings into place a beat behind the line. */
.tc{overflow-x:clip;background:var(--ink-950)}
.tc__head{margin-bottom:var(--sp-6)}
.tc__head .h2{max-width:18ch}
.tc__head .lead{max-width:56ch;margin-top:var(--sp-4)}
.tc__line{list-style:none;margin:0 auto;padding:0 var(--gutter);max-width:var(--w-wide);
  display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.tc__card{aspect-ratio:1/1}
.tc__face{position:relative;display:flex;flex-direction:column;gap:12px;height:100%;padding:clamp(18px,2.2vw,26px);
  border:1px solid var(--ink-600);border-radius:14px;text-decoration:none;color:var(--steel-300);
  background:linear-gradient(160deg,var(--ink-800),var(--ink-850) 55%,var(--ink-900));
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 18px 40px -18px rgba(0,0,0,.6)}
.tc__top{display:flex;align-items:baseline;gap:10px;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.tc__n{color:var(--amber)}
.tc__area{color:var(--steel-500)}
.tc__t{font-family:var(--f-display);font-weight:700;font-size:clamp(22px,2.3vw,30px);line-height:1.08;letter-spacing:-.02em;color:#fff;text-wrap:balance}
.tc__w{font-size:14.5px;line-height:1.55;color:var(--steel-300);text-wrap:pretty}
.tc__go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.tc__go svg{width:12px;height:12px}
.tc__face:hover{border-color:var(--ink-700)}
.tc__face:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
.tc__bar{display:none}

html.tc-on .tc__run{height:calc(100svh + (var(--n) - 1) * 34svh)}
html.tc-on .tc__stage{position:sticky;top:0;height:100svh;display:grid;grid-template-rows:auto 1fr auto;
  padding-top:calc(var(--nav-h) + clamp(12px,3vh,36px));padding-bottom:clamp(14px,3vh,28px);overflow:clip}
html.tc-on .tc__head{margin-bottom:0}
html.tc-on .tc__head .lead{font-size:16px}
html.tc-on .tc__line{position:relative;display:block;width:var(--tc-s);height:var(--tc-s);margin:auto;padding:0;
  --tc-s:clamp(220px,min(34vw,42svh),360px);--tc-k:1.02}
html.tc-on .tc__card{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform}
html.tc-on .tc__card:not(.is-front) .tc__face{pointer-events:none}
html.tc-on .tc__card .tc__w,html.tc-on .tc__card .tc__go{opacity:.35}
html.tc-on .tc__card.is-front .tc__w,html.tc-on .tc__card.is-front .tc__go{opacity:1}
html.motion.tc-on .tc__card .tc__w,html.motion.tc-on .tc__card .tc__go{transition:opacity .3s var(--ease)}
html.tc-on .tc__card.is-front .tc__face{border-color:rgba(240,163,44,.55)}
html.tc-on .tc__bar{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;padding-inline:var(--gutter)}
.tc__count{font-family:var(--f-mono);font-size:12px;color:var(--steel-500);font-variant-numeric:tabular-nums}
.tc__count b{color:#fff;font-weight:600}
.tc__dots{display:flex;gap:6px}
.tc__dots i{width:6px;height:6px;border-radius:3px;background:var(--steel-500);opacity:.35}
html.motion .tc__dots i{transition:width .3s var(--ease),opacity .3s var(--ease),background-color .3s var(--ease)}
.tc__dots i.is-on{width:22px;opacity:1;background:var(--amber)}
@media (max-width:640px){
  html.tc-on .tc__head .lead{display:none}
  html.tc-on .tc__line{--tc-s:clamp(200px,60vw,290px);--tc-k:.78}
  html.tc-on .tc__stage{padding-bottom:92px}
  .tc__w{font-size:13.5px}
  html.tc-on .tc__dots{display:none}
}
@media (prefers-reduced-motion:reduce){html.tc-on .tc__run{height:auto}}

/* ==== Leak score card (glass, half-circle gauge, rolling digits) 2026-10-23 ==== */
@media(min-width:960px){.lc__res{grid-template-columns:minmax(0,360px) minmax(0,1fr)}.lc__fix{grid-column:1/-1}}
.sc{position:relative;display:grid;gap:14px;padding:22px 22px 24px;border-radius:22px;isolation:isolate;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015) 45%,rgba(255,255,255,.04)),rgba(10,21,38,.55);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.18),inset -1px -1px 0 rgba(255,255,255,.04),inset 0 0 24px rgba(255,255,255,.04),0 30px 60px -28px rgba(0,0,0,.7)}
.sc::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 0%,var(--glow,rgba(240,163,44,.18)),transparent 70%)}
.sc[data-tone="low"]{--glow:rgba(225,97,76,.22)}
.sc[data-tone="high"]{--glow:rgba(63,190,151,.22)}
.sc__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sc__t{margin:0;font-family:var(--f-display);font-weight:600;font-size:19px;color:#fff;letter-spacing:-.01em}
.sc__badge{padding:6px 12px;border-radius:999px;font:600 10.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  border:1px solid rgba(240,163,44,.45);background:rgba(240,163,44,.14);color:var(--amber-hi);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.15)}
.sc[data-tone="low"] .sc__badge{border-color:rgba(225,97,76,.5);background:rgba(225,97,76,.16);color:#F6A493}
.sc[data-tone="high"] .sc__badge{border-color:rgba(63,190,151,.5);background:rgba(63,190,151,.16);color:#9EE6CC}
.sc__gauge{position:relative;padding-bottom:4px}
.sc__gauge svg{display:block;width:100%;max-width:280px;margin:0 auto;overflow:visible}
.sc__tr{fill:none;stroke:rgba(255,255,255,.08);stroke-width:9;stroke-linecap:round}
.sc__fg{fill:none;stroke-width:9;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--v,0));
  filter:drop-shadow(0 0 6px rgba(255,255,255,.12))}
html.motion .sc__fg{transition:stroke-dashoffset 1.4s cubic-bezier(.65,0,.35,1) .35s}
.sc__num{position:absolute;left:0;right:0;bottom:0;display:grid;justify-items:center;gap:2px}
.sc__digits{display:inline-flex;height:1em;overflow:hidden;font-family:var(--f-display);font-weight:700;font-size:54px;line-height:1;
  letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.sc__d{display:inline-block;height:1em;overflow:hidden}
.sc__strip{display:flex;flex-direction:column;translate:0 calc(var(--d,0) * -1em)}
.sc__strip span{height:1em;line-height:1}
html.motion .sc__strip{transition:translate var(--dur,1s) cubic-bezier(.33,1,.68,1) var(--delay,.4s)}
.sc__of{font:500 10.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--steel-500)}
.sc .lc__vt{margin:0;text-align:center;text-wrap:pretty}

.sc__areas{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start}
@media(min-width:600px){.sc__areas{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sc__area{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:14px;border-radius:16px;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.01)),rgba(10,21,38,.5);
  border:1px solid rgba(255,255,255,.09);box-shadow:inset 1px 1px 0 rgba(255,255,255,.1)}
.sc__area svg{grid-row:1/3;width:54px;height:auto;overflow:visible}
.sc__area .sc__tr{stroke-width:5}
.sc__mini{fill:none;stroke-width:5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--v,0));stroke:var(--amber)}
.sc__area[data-tone="low"] .sc__mini{stroke:#E1614C}
.sc__area[data-tone="high"] .sc__mini{stroke:var(--booked)}
.sc__an{font:500 10px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--steel-400)}
.sc__area b{font-family:var(--f-display);font-weight:700;font-size:22px;color:#fff;letter-spacing:-.02em}
.sc__area b small{font-size:.55em;color:var(--steel-500);margin-left:1px}
@keyframes sc-mini{from{stroke-dashoffset:100}}
@keyframes sc-in{from{opacity:.001;translate:0 10px}}
html.motion .lc__res.is-in .sc__mini{animation:sc-mini 1.1s cubic-bezier(.65,0,.35,1) both;animation-delay:calc(.6s + var(--i) * 90ms)}
html.motion .lc__res.is-in .sc__area{animation:sc-in .6s var(--ease) both;animation-delay:calc(.3s + var(--i) * 70ms)}
@media (prefers-reduced-motion:reduce){.sc__fg,.sc__strip{transition:none!important}.sc__mini,.sc__area{animation:none!important}}
.sc__area svg{width:50px;flex:none}
.sc__an,.sc__area b{justify-self:start;text-align:left}
.sc__an{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.sc__area{grid-template-columns:50px minmax(0,1fr)}
@media(max-width:420px){.sc__area{padding:12px;column-gap:10px;grid-template-columns:42px minmax(0,1fr)}.sc__area svg{width:42px}.sc__an{font-size:9.5px;letter-spacing:.08em}}
.sc__an{white-space:normal;overflow:visible;text-overflow:clip}
@media(max-width:600px){
  .sc__area{grid-template-columns:42px minmax(0,1fr);grid-template-areas:"g n" "l l";row-gap:8px}
  .sc__area svg{grid-area:g;grid-row:auto}
  .sc__area b{grid-area:n}
  .sc__an{grid-area:l;font-size:10px;letter-spacing:.1em}
}

/* ==== Leak check v2: live gauge, answer states, current question (2026-10-23) ==== */
.lc__live{padding:22px}
.lc__live .sc__digits,.lc__ln{font-family:var(--f-display);font-weight:700;font-size:46px;line-height:1;letter-spacing:-.03em;color:#fff}
.sc[data-tone="none"]{--glow:rgba(175,192,210,.10)}
.sc[data-tone="none"] .sc__badge{border-color:var(--ink-600);background:rgba(255,255,255,.04);color:var(--steel-400)}
.lc__la{transition:none}
html.motion .lc__la{transition:stroke-dashoffset .7s cubic-bezier(.33,1,.68,1)}
html.motion .lc__live .sc__badge{transition:color .3s,background-color .3s,border-color .3s}
.lc__ticks{list-style:none;margin:2px 0 0;padding:0;display:grid;grid-template-columns:repeat(9,1fr);gap:5px}
.lc__ticks li{height:6px;border-radius:3px;background:rgba(255,255,255,.08)}
html.motion .lc__ticks li{transition:background-color .3s var(--ease),scale .3s var(--ease)}
.lc__ticks li[data-ans="2"]{background:var(--booked)}
.lc__ticks li[data-ans="1"]{background:var(--amber)}
.lc__ticks li[data-ans="0"]{background:#E1614C}
.lc__sidecount{margin:0;font:500 12px/1 var(--f-mono);letter-spacing:.06em;color:var(--steel-400)}
.lc__sidecount b{color:#fff;font-weight:600}
.lc__sidenote{margin:0}

/* answers: an icon each, colour only once chosen */
.lc__o span{gap:8px}
.lc__o svg{width:15px;height:15px;flex:none;opacity:.55}
.lc__o input:checked+span svg{opacity:1}
.lc__o input[value="2"]:checked+span svg{color:var(--booked)}
.lc__o input[value="1"]:checked+span svg{color:var(--amber)}
.lc__o input[value="0"]:checked+span svg{color:#F08A78}
/* answered card: a status chip and a coloured edge */
.lc__q fieldset{position:relative;overflow:clip}
.lc__q fieldset::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent}
html.motion .lc__q fieldset::before{transition:background-color .3s var(--ease)}
.lc__q[data-ans="2"] fieldset::before{background:var(--booked)}
.lc__q[data-ans="1"] fieldset::before{background:var(--amber)}
.lc__q[data-ans="0"] fieldset::before{background:#E1614C}
.lc__meta{width:100%}
.lc__state{margin-left:auto;font:600 10px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase}
.lc__state:empty{display:none}
.lc__q[data-ans="2"] .lc__state{color:var(--booked)}
.lc__q[data-ans="1"] .lc__state{color:var(--amber)}
.lc__q[data-ans="0"] .lc__state{color:#F08A78}
@keyframes lc-pop{0%{scale:.8;opacity:0}60%{scale:1.06}100%{scale:1;opacity:1}}
html.motion .lc__q[data-ans] .lc__state:not(:empty){animation:lc-pop .35s var(--ease)}
/* the question you're on */
.lc__q.is-current fieldset{border-color:rgba(240,163,44,.45);box-shadow:0 0 0 1px rgba(240,163,44,.12),0 18px 40px -24px rgba(240,163,44,.35)}
.lc__q.is-done:not(.is-current) .lc__t{color:var(--steel-300)}
html.motion .lc__q fieldset{transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}

/* phones: the live panel becomes a slim strip pinned under the nav */
@media(max-width:959px){
  .lc__live{position:sticky;top:calc(var(--nav-h) - 4px);z-index:20;padding:12px 14px;gap:8px;border-radius:16px;
    display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"num ticks badge" "num count count";align-items:center;column-gap:14px}
  .lc__live .sc__head{display:contents}
  .lc__live .sc__t{display:none}
  .lc__live .sc__badge{grid-area:badge;padding:5px 9px;font-size:9.5px}
  .lc__live .lc__lg{grid-area:num;padding:0}
  .lc__live .lc__lg svg,.lc__live .sc__of,.lc__sidenote{display:none}
  .lc__live .sc__num{position:static}
  .lc__ln{font-size:30px}
  .lc__ticks{grid-area:ticks;margin:0}
  .lc__sidecount{grid-area:count;font-size:11px}
}
.sc__badge{white-space:nowrap}
@media(max-width:600px){.lc__ext{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}

/* ==== Leak check: the nine leaks, explained (crawlable) ==== */
.ex__list{list-style:none;margin:0 0 var(--sp-8);padding:0;display:grid;gap:14px}
@media(min-width:760px){.ex__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.ex__list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ex__i{padding:22px;border:1px solid var(--line-2);border-radius:14px;background:var(--surface);display:grid;gap:10px;align-content:start;scroll-margin-top:calc(var(--nav-h) + 20px)}
.ex__h{display:flex;align-items:baseline;gap:10px;font:500 10.5px/1 var(--f-mono);letter-spacing:.13em;text-transform:uppercase}
.ex__n{color:var(--amber-ink)}
.ex__area{color:var(--text-3)}
.ex__w{margin-left:auto;color:var(--text-3)}
.ex__i h3{margin:0;color:var(--text)}
.ex__i p{margin:0;font-size:14.5px;line-height:1.6;color:var(--text-2);text-wrap:pretty}
.ex__fix{padding-top:10px;border-top:1px solid var(--line)}
.ex__fix b{color:var(--booked-ink)}
.ex__faq h2{margin-bottom:var(--sp-5)}
.ex .questions{padding-block:0}