/* =============================================================================
   Applied Intelligence — styles.css
   Clean, bright, trustworthy. Apple/Stripe restraint. Light theme.
   ========================================================================== */

/* ---- Self-hosted fonts (latin subset, OFL: see assets/fonts/OFL.txt) -----
   Was Google Fonts; now local, so there is no third-party request on load.
   Hanken Grotesk ships as ONE variable file covering the whole 400-800 range
   the site uses, so every weight costs a single download. Instrument Serif is
   static; every use on the site (.ital, .step__n, .bs-n and the .worker__line
   curly quotes) is the ITALIC cut, so only that file is ever fetched. The
   roman face below is declared but currently unreferenced — an unused
   @font-face costs no bytes, and it keeps the upright cut one rule away.
   unicode-range matches Google's own latin subset, so non-latin text still
   falls through to the system stack. */
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fonts/hanken-grotesk-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/instrument-serif-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/instrument-serif-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Design tokens ------------------------------------------------------- */
:root {
  --bg:        #ffffff;
  --bg-soft:   #f5f7fa;
  --bg-ink:    #0a0e1a;      /* dark sections (phone, cockpit) */
  --bg-ink-2:  #0e1424;

  --ink:       #0b1220;      /* primary text */
  --ink-2:     #333d4f;
  --muted:     #5b6474;      /* secondary text */
  --muted-2:   #6e7686;   /* AA-safe on white for small text */

  /* --accent is the brand blue, but it is only 4.49:1 on white — two
     thousandths short of AA. It stays for NON-TEXT use (fills behind large
     glyphs, rules, dots, glows, shadows). Anything that is text, or a fill
     carrying white text, uses --accent-ink (6.68:1) and --accent-ink-2 for
     its hover (7.99:1). */
  --accent:    #2f6bff;      /* confident blue — decorative only  4.49:1 */
  --accent-ink:#1e4fd6;      /* the TEXT/fill blue                6.68:1 */
  --accent-ink-2:#1a45bd;    /* its hover, still AA               7.99:1 */
  --accent-soft:#eaf0ff;

  /* Dark register: the work page and the dark bands on the light pages.
     Every value is checked against --bg-ink (#0a0e1a) for AA.
     --accent is only 4.3:1 on ink, so anything accented on dark uses
     --accent-lift instead, never --accent. */
  --ink-hi:     #f6f8fc;     /* headings on dark        19.1:1 */
  --ink-body:   #c7cede;     /* body on dark            12.2:1 */
  --ink-dim:    #8f9ab0;     /* secondary on dark        6.8:1 */
  --ink-faint:  #7f8aa0;     /* small-caps labels        5.6:1 */
  --accent-lift:#7aa2ff;     /* the house blue, on dark  7.8:1 */
  --hair:      rgba(255,255,255,.09);
  --hair-2:    rgba(255,255,255,.15);

  --green:     #16a34a;      /* booked / success */
  --green-soft:#e7f6ec;

  --line:      rgba(11, 18, 32, 0.09);
  --line-2:    rgba(11, 18, 32, 0.06);

  --shadow-sm: 0 1px 2px rgba(11,18,32,.05), 0 1px 3px rgba(11,18,32,.06);
  --shadow-md: 0 10px 30px rgba(11,18,32,.08), 0 2px 8px rgba(11,18,32,.05);
  --shadow-lg: 0 30px 70px rgba(11,18,32,.14), 0 8px 24px rgba(11,18,32,.08);

  --radius:    18px;
  --radius-sm: 12px;
  --radius-lg: 28px;

  --maxw: 1160px;
  --pad: clamp(1.15rem, 4vw, 2rem);

  /* per-worker accent tones */
  --tone-cyan:   #0ea5b7;
  --tone-amber:  #e08a00;
  --tone-green:  #16a34a;
  --tone-brand:  #2f6bff;
  --tone-teal:   #0d9488;
  --tone-red:    #e0533d;
  --tone-indigo: #5b5bf0;
  --tone-violet: #8b5cf6;
  --tone-gold:   #d99413;
}

/* ---- Reset / base -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; letter-spacing: -0.02em; line-height: 1.08; font-weight: 800; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* The editorial serif-italic device (one per section) */
.ital, em {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: -0.01em;
}

/* ---- Layout -------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }
.wrap--narrow { max-width: 820px; }
.section { padding-block: clamp(4rem, 9vw, 7.5rem); }
.section--tight { padding-block: clamp(2rem, 4vw, 3rem); }
.center { text-align: center; }
.center-cta { display: flex; justify-content: center; margin-top: 2.4rem; }

/* ---- Typographic helpers ------------------------------------------------- */
.eyebrow, .kicker {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-ink);        /* 6.68:1 on white (--accent was 4.49) */
}
.kicker { margin-bottom: 1rem; }
.section__title {
  font-size: clamp(1.9rem, 4.6vw, 3.25rem);
  max-width: 20ch;
}
.section__lead {
  margin-top: 1.25rem;
  max-width: 60ch;
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  color: var(--muted);
}
.section__lead.center { margin-inline: auto; }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: 0 1.4rem;
  border-radius: 999px;
  font-family: inherit; font-weight: 700; font-size: 0.98rem;
  cursor: pointer; border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space: nowrap;
}
/* fill is --accent-ink, not --accent: white on --accent is 4.49:1, white on
   --accent-ink is 6.68:1 and on the hover 7.99:1. The glow keeps the brighter
   brand blue, because a shadow carries no text. */
.btn--primary { background: var(--accent-ink); color: #fff; box-shadow: 0 6px 18px rgba(47,107,255,.28); }
.btn--primary:hover { background: var(--accent-ink-2); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(47,107,255,.34); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
/* glass button — for use on the dark hero video */
.btn--glass {
  background: rgba(255,255,255,.08); color: #fff;
  border-color: rgba(255,255,255,.28);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.btn--glass:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.55); transform: translateY(-2px); }
.btn--lg { min-height: 54px; padding: 0 1.7rem; font-size: 1.02rem; }
.btn--xl { min-height: 60px; padding: 0 2.2rem; font-size: 1.1rem; }

/* ---- Nav ----------------------------------------------------------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
/* .nav--solid: sub-pages (work, terms, privacy) have no dark hero behind the
   bar, so it carries the stuck-state treatment from first paint. Same values as
   .is-stuck on purpose, so the two never drift apart. */
.nav.is-stuck,
.nav.nav--solid {
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--line);
}
.nav--solid .nav__brand,
.nav--solid .nav__links a { color: var(--ink); }
.nav--solid .nav__links a:hover { color: var(--accent-ink); }
/* .nav--ink: the same stuck-state bar, inverted, for pages that are ink from
   first paint (work.html). A white slab over --bg-ink reads as browser chrome,
   so the dark register gets dark glass instead. Written as .nav.nav--ink so it
   outranks .nav.is-stuck if the scroll handler ever adds that class here. */
.nav.nav--ink {
  background: rgba(10,14,26,.72);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom-color: var(--hair);
}
.nav--ink .nav__brand { color: var(--ink-hi); }
.nav--ink .nav__links a { color: var(--ink-body); }
.nav--ink .nav__links a:hover { color: var(--ink-hi); }
.nav--ink .nav__links a.is-current { color: var(--ink-hi); }
.nav--ink .nav__links a.is-current::after { background: var(--accent-lift); }
/* on ink the primary pill inverts: --accent-lift plate, --bg-ink type (7.74:1).
   A deep-blue fill on a dark bar goes muddy and loses the CTA. */
.nav--ink .nav__cta,
body[data-page="work"] .btn--primary {
  background: var(--accent-lift); color: var(--bg-ink);
  box-shadow: 0 6px 18px rgba(47,107,255,.22);
}
.nav--ink .nav__cta:hover,
body[data-page="work"] .btn--primary:hover {
  background: #a3c0ff; color: var(--bg-ink);
  box-shadow: 0 12px 26px rgba(122,162,255,.28);
}
/* Over the dark video hero, nav text/brand go light until the nav sticks. */
.nav--over-hero:not(.is-stuck) .nav__brand,
.nav--over-hero:not(.is-stuck) .nav__links a { color: #fff; }
.nav--over-hero:not(.is-stuck) .nav__links a:hover { color: rgba(255,255,255,.75); }
.nav__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0.7rem var(--pad);
  display: flex; align-items: center; gap: 1.5rem;
}
.nav__brand { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; }
.nav__brand .brand-mark { width: 34px; height: 34px; flex: none; border-radius: 9px; }
.nav__brand .brand-word { font-weight: 800; font-size: 1.28rem; letter-spacing: -0.03em; }
.nav__brand .brand-short { font-weight: 800; font-size: 1.28rem; letter-spacing: -0.02em; display: none; }
.nav__links { display: flex; gap: 1.6rem; margin-left: auto; }
.nav__links a { font-size: 0.95rem; font-weight: 600; color: var(--ink-2); transition: color .15s; display: inline-flex; align-items: center; min-height: 44px; }
.nav__links a:hover { color: var(--accent-ink); }
/* the page you are already on (work.html marks its own link) */
.nav__links a.is-current { color: var(--ink); }
.nav__links a.is-current::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 2px;
  border-radius: 2px; background: var(--accent);
}
.nav__links a.is-current { position: relative; }
.nav__cta { margin-left: 0; }

/* ---- Hero (full-bleed cinematic video) ----------------------------------- */
.hero {
  position: relative; isolation: isolate;
  min-height: 100svh; min-height: 100dvh;
  display: flex; align-items: center;
  padding-top: clamp(7rem, 14vh, 9rem); padding-bottom: clamp(4rem, 9vh, 7rem);
  overflow: hidden; background: var(--bg-ink);
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* poster shows first (LCP), fades to slightly richer once playing */
  filter: saturate(1.05) contrast(1.02);
}
/* layered scrim: darken bottom-left for copy legibility + brand tint */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(6,9,18,.86) 0%, rgba(6,9,18,.55) 45%, rgba(6,9,18,.25) 100%),
    linear-gradient(0deg, rgba(6,9,18,.85) 0%, rgba(6,9,18,.15) 40%, rgba(6,9,18,.35) 100%),
    radial-gradient(120% 90% at 80% 10%, rgba(47,107,255,.28), transparent 55%);
}
.hero__inner { position: relative; max-width: 900px; }
.eyebrow--on-dark { color: #9db8ff; }
.hero__title {
  margin-top: 1.2rem; color: #fff;
  font-size: clamp(2.7rem, 7vw, 5.4rem);
  letter-spacing: -0.04em; line-height: 1.02;
  max-width: 16ch;
}
.hero__title .ital { color: #9db8ff; }
.hero__sub {
  margin-top: 1.6rem; max-width: 46ch;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem); line-height: 1.5;
  color: rgba(255,255,255,.82);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.4rem; }
.hero__proof {
  margin-top: 1.8rem; font-size: 0.94rem; font-weight: 600;
  color: rgba(255,255,255,.66);
  display: inline-flex; align-items: center; gap: .55rem;
}
.hero__proof::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #4ade80; box-shadow: 0 0 0 0 rgba(74,222,128,.6);
  animation: pulseDot 2.4s ease-out infinite;
}
@keyframes pulseDot {
  0% { box-shadow: 0 0 0 0 rgba(74,222,128,.5); }
  70% { box-shadow: 0 0 0 9px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}
/* word-by-word hero headline reveal (JS splits into .hw spans) */
/* display:inline-block is UNCONDITIONAL so the h1 height is stable from first
   paint (no reflow when .is-ready lands → no CLS). Only the reveal state below
   is gated behind .is-ready. */
.hero__title .hw { display: inline-block; }
.js.is-ready .hero__title .hw { opacity: 0; transform: translateY(28px); }
.js.is-ready .hero__title .hw.in { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
/* scroll cue — a real anchor, so the box is a 44x48 transparent hit area and
   the 26x42 pill is drawn by ::before, centred inside it. bottom is pulled up
   by the 3px of extra chrome so the pill sits exactly where it always did. */
.hero__cue {
  position: absolute; left: 50%; bottom: calc(1.6rem - 3px); transform: translateX(-50%);
  width: 44px; height: 48px;
  display: grid; place-items: start center; padding-top: 12px; z-index: 1;
}
.hero__cue::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.4); border-radius: 999px;
}
.hero__cue span { width: 4px; height: 8px; border-radius: 2px; background: rgba(255,255,255,.8); animation: cueDrop 1.8s ease-in-out infinite; }
@keyframes cueDrop { 0%,100% { transform: translateY(0); opacity: .3; } 40% { transform: translateY(9px); opacity: 1; } }

/* neural constellation canvas (drawn by wireHeroNet, desktop only).
   Sits above video + scrim inside the media stack, below the copy; low opacity
   so it reads as atmosphere, not noise. */
.hero__net {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  opacity: .45; pointer-events: none;
}

/* rotating second line of the h1 (wireHeroRotate). Block span keeps the
   original <br> line break; transform/opacity only, height locked by JS. */
.hero__rot {
  display: block;
  transition: opacity .45s cubic-bezier(.2,.7,.2,1), transform .45s cubic-bezier(.2,.7,.2,1);
}
.hero__rot.is-out { opacity: 0; transform: translateY(-14px); }
.hero__rot.is-pre { transition: none; opacity: 0; transform: translateY(14px); }

/* live crew-at-work feed (wireHeroFeed, desktop only) */
.hero__feed {
  position: absolute; z-index: 1;
  right: var(--pad); top: 54%;
  /* sits below the headline band; width shrinks at narrow desktop so it
     always clears the CTA buttons column (right edge ~710px) */
  width: min(300px, calc(100vw - 760px));
  pointer-events: none;
}
/* honesty micro-label above the cards: these events are simulated */
.hero__feed-note {
  position: absolute; left: 2px; bottom: 100%; margin-bottom: .45rem;
  font-size: .66rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.48); white-space: nowrap;
}
.feed-card {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .8rem .95rem;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 30px rgba(6,9,18,.35);
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1);
}
.feed-card.in { opacity: 1; transform: translateY(0); }
.feed-card__chip {
  flex: none; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--tone, var(--accent)) 32%, transparent);
  border: 1px solid color-mix(in srgb, var(--tone, var(--accent)) 60%, transparent);
  color: #fff; font-size: .68rem; font-weight: 800;
}
.feed-card__body { flex: 1; min-width: 0; }
.feed-card__top { display: flex; align-items: baseline; gap: .6rem; }
.feed-card__name { font-size: .78rem; font-weight: 800; color: #fff; letter-spacing: .01em; }
.feed-card__time { margin-left: auto; font-size: .7rem; font-weight: 600; color: rgba(255,255,255,.55); font-variant-numeric: tabular-nums; }
.feed-card__text { margin-top: .15rem; font-size: .86rem; line-height: 1.4; color: rgba(255,255,255,.85); }

/* Mobile / narrow: the constellation stays (lighter, tuned in JS) and the feed
   becomes a single centred notification card in a fixed-height slot near the
   bottom of the hero, clear of the copy, CTAs, proof line and scroll cue. */
@media (max-width: 1024px) {
  /* reserve a bottom band for the notification card by shifting the centred
     hero copy up (bigger padding-bottom than padding-top pulls the flex
     centre upward), so the card never overlaps the proof line or scroll cue. */
  .hero {
    padding-top: 6.5rem;
    padding-bottom: 12rem;
  }
  .hero__feed {
    left: 50%; right: auto; top: auto;
    bottom: calc(5.6rem + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    width: min(340px, 90vw);
    height: 74px;                 /* fixed slot → cycling never shifts layout */
  }
  .feed-card--solo { align-items: center; }
  .hero__feed-note { left: 50%; transform: translateX(-50%); }
}

/* ---- Phone (shared frame) ------------------------------------------------ */
.phone {
  position: relative; width: 100%; max-width: 300px; margin: 0 auto;
  border-radius: 42px; padding: 11px;
  background: linear-gradient(160deg, #2a2e38, #12151c);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.05);
}
.phone__screen {
  position: relative; border-radius: 32px; overflow: hidden;
  background: #0b0d12; aspect-ratio: 9 / 19; display: flex; flex-direction: column;
}
.phone__notch {
  position: absolute; left: 50%; top: 9px; transform: translateX(-50%);
  width: 96px; height: 20px; border-radius: 999px; background: #000; z-index: 5;
}
.phone__statusbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 22px 4px; font-size: 10px; color: rgba(255,255,255,.8); font-weight: 600; z-index: 4;
}
.phone__statusbar .batt { display: inline-block; width: 16px; height: 9px; border: 1px solid rgba(255,255,255,.5); border-radius: 2px; margin-left: 4px; }

/* SMS thread inside phone */
.sms { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.sms__header {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03);
}
.sms__avatar {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; flex: none;
}
.sms__name { font-size: 13px; font-weight: 700; color: #fff; line-height: 1.2; }
.sms__status { font-size: 10px; color: rgba(255,255,255,.5); }
.sms__body {
  flex: 1; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px; padding: 14px 12px;
}
.bubble {
  max-width: 82%; padding: 8px 12px; font-size: 13px; line-height: 1.35; color: #fff;
  border-radius: 16px;
}
/* --accent-ink, not --accent: this bubble carries white text (6.68:1) */
.bubble--ai { align-self: flex-end; background: var(--accent-ink); border-bottom-right-radius: 5px; }
.bubble--customer { align-self: flex-start; background: rgba(255,255,255,.11); border-bottom-left-radius: 5px; }
.bubble__meta { font-size: 9px; color: rgba(255,255,255,.4); margin-top: 3px; padding-inline: 4px; }
.bubble--ai + .bubble__meta { text-align: right; }
/* confirm card */
.sms__confirm {
  margin: 4px 8px 12px; padding: 11px 13px; border-radius: 14px;
  background: var(--green-soft); border: 1px solid rgba(22,163,74,.25);
}
.sms__confirm .tick { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; color: var(--green); text-transform: uppercase; letter-spacing: .04em; }
.sms__confirm .when { font-size: 14px; font-weight: 800; color: #0b1220; margin-top: 3px; }
.sms__confirm .line { font-size: 11px; color: #47506080; color: #566; margin-top: 2px; }

/* reveal state for bubbles (JS-driven) */
.js .bubble, .js .sms__confirm { opacity: 0; transform: translateY(8px) scale(.98); }
.js .bubble.in, .js .sms__confirm.in { opacity: 1; transform: none; transition: opacity .35s ease, transform .35s ease; }

/* ---- Trust strip --------------------------------------------------------- */
.trust { text-align: center; }
.trust__line { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); }
.trust__logos { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1rem, 4vw, 2.6rem); margin-top: 1.3rem; }
.trust__logos span { font-weight: 700; font-size: clamp(.95rem, 1.6vw, 1.15rem); color: var(--ink-2); opacity: .72; }

/* ---- Stat grid ----------------------------------------------------------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px,100%), 1fr)); gap: 1.2rem; margin-top: 2.8rem; }
.stat {
  background: var(--bg-soft); border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
}
.stat__value { font-size: clamp(2.1rem, 4vw, 3rem); font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.stat__label { margin-top: .5rem; font-size: 0.98rem; color: var(--muted); line-height: 1.4; }
/* attribution line under the stat row (borrowed research, not our results) */
.stat-note { margin-top: 1.1rem; font-size: .82rem; line-height: 1.5; color: var(--muted-2); max-width: 92ch; }

/* ---- Steps (diagnosis / how / guarantee) --------------------------------- */
.steps { display: grid; gap: 1.2rem; margin-top: 2.8rem; }
.steps--3 { grid-template-columns: repeat(auto-fit, minmax(min(260px,100%), 1fr)); }
.steps--4 { grid-template-columns: repeat(auto-fit, minmax(min(230px,100%), 1fr)); }
.step {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.7rem 1.6rem; box-shadow: var(--shadow-sm);
}
.step__n { font-family: "Instrument Serif", serif; font-style: italic; font-size: 1.5rem; color: var(--accent); font-weight: 500; }
.step__title { margin-top: .6rem; font-size: 1.25rem; font-weight: 800; }
.step__text { margin-top: .55rem; font-size: 1rem; color: var(--muted); }

/* ---- Watch a lead book itself -------------------------------------------- */
.book-itself { background: var(--bg-ink); color: #fff; overflow: hidden; }
.book-itself .kicker { color: #7ea2ff; }
.book-itself .section__title { color: #fff; }
.book-itself .section__title .ital { color: #9db8ff; }
.book-itself .section__lead { color: rgba(255,255,255,.62); }
.book-itself__grid { display: grid; grid-template-columns: 1fr 0.82fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.book-steps { margin-top: 2.4rem; display: flex; flex-direction: column; gap: .2rem; }
/* The resting state is dimmed with COLOUR, never opacity. At opacity .38 the
   numeral composited to 2.08:1 and the label to 3.55:1 on --bg-ink, so three
   of the four steps were unreadable. Resting now measures 6.34:1 (numeral)
   and 6.80:1 (label); the active step still jumps to 9.84:1 and 19.9:1 and
   lights its own hairline, so the progression still reads at a glance. */
.book-steps li {
  display: flex; gap: 1rem; align-items: baseline; padding: 1rem 0;
  border-top: 1px solid rgba(255,255,255,.1);
  transition: color .4s ease, border-color .4s ease;
}
.book-steps li .bs-n { font-family: "Instrument Serif", serif; font-style: italic; font-size: 1.05rem; color: #7f92cf; flex: none; transition: color .4s ease; }
.book-steps li .bs-label { font-size: clamp(1.02rem, 1.8vw, 1.22rem); font-weight: 600; color: var(--ink-dim); transition: color .4s ease; }
.book-steps li.active { border-top-color: rgba(255,255,255,.3); }
.book-steps li.active .bs-n { color: #9db8ff; }
.book-steps li.active .bs-label { color: #fff; }
.book-itself__phone { display: flex; justify-content: center; }

/* ---- Roster -------------------------------------------------------------- */
.roster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px,100%), 1fr)); gap: 1.3rem; margin-top: 2.8rem; }
.worker {
  --tone: var(--accent);
  /* AA-safe darkened tone for TEXT on white (glyphs, by-line, initial).
     The bright --tone stays for glow / hover-border / backgrounds. */
  --tone-ink: color-mix(in srgb, var(--tone) 62%, var(--ink));
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.5rem; box-shadow: var(--shadow-sm); text-align: center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.worker:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--tone) 40%, var(--line)); }
.worker__figure {
  position: relative; height: 208px; margin: -0.3rem auto 0.6rem; border-radius: var(--radius);
  display: grid; place-items: center; overflow: hidden;
  background:
    radial-gradient(90% 70% at 50% 42%, color-mix(in srgb, var(--tone) 18%, transparent), transparent 72%),
    var(--bg-soft);
}
/* tone glow orb behind the character */
.worker__figure::before {
  content: ""; position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--tone) 55%, transparent), transparent 70%);
  filter: blur(22px); opacity: .8; z-index: 0;
}
.worker__figure.has-img {
  background-image:
    var(--fig),
    radial-gradient(90% 70% at 50% 42%, color-mix(in srgb, var(--tone) 18%, transparent), transparent 72%),
    linear-gradient(var(--bg-soft), var(--bg-soft));
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center bottom, center, center;
  background-size: contain, cover, cover;
}
/* idle float on the whole card's figure (compositor-safe) */
.worker__figure { animation: figFloat 6s ease-in-out infinite; }
.worker:nth-child(2n) .worker__figure { animation-duration: 7s; animation-delay: -1.5s; }
.worker:nth-child(3n) .worker__figure { animation-duration: 6.6s; animation-delay: -3s; }
@keyframes figFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.worker:hover .worker__figure { animation-play-state: paused; }
.worker__initial { position: relative; z-index: 1; font-weight: 800; font-size: 2.4rem; color: var(--tone-ink); }
.worker__figure.has-img .worker__initial { display: none; }
.worker__outcome { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.worker__by {
  font-size: .8rem; font-weight: 700; letter-spacing: .02em; margin-top: .45rem; color: var(--tone-ink);
}
.worker__by span { color: var(--muted-2); text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; }
.worker__line { margin-top: 1.1rem; font-size: 1.02rem; color: var(--ink-2); line-height: 1.45; font-weight: 500; }
/* font-style: italic is load-bearing, not decoration. These two curly quotes
   were the only glyphs on the home page resolving to the ROMAN cut of
   Instrument Serif, which pulled a whole 15,040 B font file for two
   characters. Set italic and the third font file leaves the network entirely,
   because .ital and .step__n already use that cut. */
.worker__line::before { content: "\201C"; color: var(--tone-ink); font-family: "Instrument Serif", serif; font-style: italic; }
.worker__line::after { content: "\201D"; color: var(--tone-ink); font-family: "Instrument Serif", serif; font-style: italic; }
.worker__also { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--line); font-size: .9rem; color: var(--muted); }
.worker__also b { color: var(--ink-2); font-weight: 700; }

.roster-more { margin-top: 2.6rem; text-align: center; }
.roster-more__label { font-size: .82rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-2); }
.roster-more__line { max-width: 58ch; margin-inline: auto; margin-top: .7rem; color: var(--muted); font-size: 1.05rem; }
.roster-more__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1rem; }
.chip { border: 1px solid var(--line); border-radius: 999px; padding: .5rem 1rem; font-size: .92rem; font-weight: 600; color: var(--ink-2); background: var(--bg); }

/* ---- Proof band (three recent builds, links into work.html) --------------
   A dark moment dropped onto the light home page: the same device the
   guarantee band uses, in the register the work page is built in. Three
   screenshots that drift slowly once revealed, so the band reads as craft
   rather than a logo wall. Cards are rendered by renderProof() in script.js,
   which also sets --chapter (the client's own colour) on each one. */
.proof { background: var(--bg); padding-block: clamp(3rem, 6vw, 5.5rem); }
/* The band is pulled out by exactly the wrap's own gutter and given that
   gutter back as padding, so its CONTENT sits on the page grid — the same
   x as every other section's copy — while the ink plate bleeds one gutter
   wider than the text column. Before this the band started its content 52px
   inboard of the grid and read as a card that had drifted. */
.proof__band {
  position: relative; isolation: isolate;
  margin-inline: calc(var(--pad) * -1);
  background: var(--bg-ink); border-radius: var(--radius-lg);
  padding: clamp(2.2rem, 5vw, 4rem) var(--pad) clamp(2rem, 4.4vw, 3.4rem);
  box-shadow: 0 40px 80px -44px rgba(11,18,32,.5);
  overflow: hidden;
}
/* one soft wash of the house blue, falling from the top edge */
.proof__band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(78% 60% at 50% -8%, rgba(47,107,255,.22) 0%, rgba(47,107,255,.05) 46%, transparent 66%);
}
.proof__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: clamp(1.2rem, 3vw, 2.4rem); flex-wrap: wrap;
  margin-bottom: clamp(1.8rem, 3.6vw, 2.6rem);
}
.proof__head-copy { max-width: 34rem; }
.proof__band .lbl { color: var(--ink-faint); }
.proof__band .section__title {
  margin-top: .9rem;
  font-size: clamp(1.75rem, 3.6vw, 2.7rem); max-width: 19ch; color: var(--ink-hi);
}
.proof__band .section__title .ital { color: var(--accent-lift); }
.proof__band .section__lead { color: var(--ink-dim); font-size: 1.02rem; max-width: 52ch; }
/* quiet outline link, so the band keeps a single primary CTA on the page */
.ghost-link {
  display: inline-flex; align-items: center; gap: .55rem; flex: none;
  min-height: 44px; padding: .6rem 1.25rem; border-radius: 999px;
  font-size: 1rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink-hi);
  border: 1px solid var(--hair-2); background: rgba(255,255,255,.03);
  transition: gap .3s cubic-bezier(.22,.61,.36,1), background .3s ease, border-color .3s ease;
}
.ghost-link:hover { gap: .9rem; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.3); }
.proof__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.9rem, 2vw, 1.4rem); }
.proof-card {
  display: block; overflow: hidden;
  background: var(--bg-ink-2); border: 1px solid var(--hair); border-radius: var(--radius);
  transition: transform .35s cubic-bezier(.22,.61,.36,1), border-color .35s cubic-bezier(.22,.61,.36,1);
}
.proof-card:hover { transform: translateY(-3px); border-color: var(--hair-2); }
/* the shot overflows its window, then drifts once in view */
.proof-card__media { position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: #000; }
/* The motion here is a slow push-in, NOT a vertical pan. A translate slid the
   client's hero up and out of the window, so the one thing the card exists to
   show was never settled and never fully visible (Nicholas, 2026-08-20:
   "you cant see the hero properly it drifts off it"). Scaling from a top-centre
   origin keeps the hero framed for the whole cycle and, because the image only
   ever grows past 1, there is no crop-slack to run out of. */
.proof-card__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  transform-origin: 50% 0;
}
.proof-card__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10,14,26,.55) 100%);
}
/* Staggered by a third of the cycle each, so the three plates drift out of
   phase and the band reads as three live windows rather than one sliding
   sheet. Negative delays start each card mid-cycle without a jump.
   Transform only — the whole pan stays on the compositor. */
.js.is-ready .proof-card.in .proof-card__media img { animation: proofPan 22s ease-in-out infinite alternate; }
.js.is-ready .proof-card:nth-child(2).in .proof-card__media img { animation-delay: -7s; }
.js.is-ready .proof-card:nth-child(3).in .proof-card__media img { animation-delay: -14s; }
@keyframes proofPan { from { transform: scale(1); } to { transform: scale(1.06); } }
.proof-card__body { padding: clamp(.95rem, 1.9vw, 1.2rem) clamp(.95rem, 1.9vw, 1.2rem) clamp(1.05rem, 2.1vw, 1.35rem); }
/* One house mark above the name, NOT the client's own colour. The three
   --chapter values that land here are #f5a600, #d9b25f and #e3c08a — three
   shades of the same gold — so at this size the per-client system carried no
   information and just read as "amber" three times. The colour identity is
   earned on work.html, where each chapter owns a whole screen; here the mark
   goes back to the house accent and does one job: mark the start of a card. */
.proof-card__body::before {
  content: ""; display: block; width: 34px; height: 3px; border-radius: 2px;
  background: var(--accent-lift); margin-bottom: .85rem;
}
.proof-card__name { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.015em; color: var(--ink-hi); line-height: 1.3; }
.proof-card__line { margin-top: .35rem; font-size: .9rem; line-height: 1.45; color: var(--ink-dim); }
/* The hairline belongs to the band and must run the full width of the card
   grid; the measure belongs to the copy. A one-column grid does both without
   a wrapper: the element itself stays full width (so border-top spans), while
   its text — raw, or wrapped in a <p>, whichever the markup ends up being —
   is laid into an anonymous grid item capped at 76ch. */
.proof__honest {
  margin-top: clamp(1.4rem, 3vw, 1.9rem); padding-top: clamp(1.1rem, 2.4vw, 1.5rem);
  border-top: 1px solid var(--hair);
  font-size: .9rem; line-height: 1.5; color: var(--ink-dim);
  display: grid; grid-template-columns: minmax(0, 76ch); gap: .6rem;
}
@media (max-width: 900px) { .proof__head { align-items: flex-start; } }
@media (max-width: 720px) { .proof__grid { grid-template-columns: 1fr; } }
/* Below --maxw + two gutters (1160 + 64) the wrap has no outer margin left,
   so the band's one-gutter bleed takes it to the viewport edge. A radius at
   the viewport edge just notches white out of the corners, so at that point
   it commits and becomes a straight full-bleed band. */
@media (max-width: 1223px) { .proof__band { border-radius: 0; } }

/* ---- Cockpit ------------------------------------------------------------- */
.cockpit { background: var(--bg-soft); }
.cockpit__grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.check-list { margin-top: 1.8rem; display: flex; flex-direction: column; gap: .85rem; }
.check-list li { display: flex; gap: .7rem; align-items: flex-start; font-size: 1.05rem; color: var(--ink-2); }
.check-list li::before {
  content: ""; flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%;
  background: var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat;
}
/* dashboard mock panel */
/* light like the real cockpit: reads as a product screenshot, not a mockup,
   and breaks the run of dark panels (cockpit / ROI / pricing) */
.dash {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.2rem; box-shadow: var(--shadow-lg); color: var(--ink);
}
.dash__bar { display: flex; align-items: center; gap: 8px; padding: 4px 6px 12px; }
.dash__dot { width: 10px; height: 10px; border-radius: 50%; }
.dash__title { margin-left: 8px; font-size: .8rem; color: var(--muted); font-weight: 600; }
.dash__sample {
  margin-left: auto; font-size: .62rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted-2);
  border: 1px solid var(--line); border-radius: 999px; padding: .18rem .55rem;
}
.dash__health {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: .8rem; padding: .55rem .8rem; border-radius: 11px;
  background: var(--green-soft); border: 1px solid rgba(22,163,74,.22);
  font-size: .78rem; font-weight: 700; color: #116a34;
}
.dash__pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none;
  box-shadow: 0 0 0 3px rgba(22,163,74,.18);
}
.dash__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.dash__kpi { background: var(--bg-soft); border: 1px solid var(--line-2); border-radius: 14px; padding: .9rem; }
.dash__kpi .v { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.dash__kpi .k { font-size: .72rem; color: var(--muted); margin-top: 2px; }
.dash__kpi .v.up { color: var(--green); }
.dash__feed { margin-top: .8rem; display: flex; flex-direction: column; gap: .4rem; }
.dash__item { background: var(--bg-soft); border: 1px solid var(--line-2); border-radius: 11px; overflow: hidden; }
.dash__row {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: inherit; padding: .6rem .75rem; font-size: .82rem; min-height: 44px;
}
.dash__row:hover { background: rgba(11,18,32,.03); }
.dash__row .who { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.dash__row .txt { color: var(--ink-2); }
.dash__row .tag { margin-left: auto; font-size: .68rem; color: var(--muted-2); font-weight: 600; white-space: nowrap; }
.dash__chev { flex: none; width: 8px; height: 8px; border-right: 2px solid var(--muted-2); border-bottom: 2px solid var(--muted-2); transform: rotate(45deg); transition: transform .25s ease; margin-top: -3px; }
.dash__item.open .dash__chev { transform: rotate(-135deg); margin-top: 3px; }
.dash__detail { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.dash__detail-inner { padding: .2rem .75rem .8rem; border-top: 1px dashed var(--line); margin: 0 .1rem; }
.dash__meta { display: flex; flex-wrap: wrap; gap: .35rem; padding-top: .6rem; }
.dash__meta span {
  font-size: .68rem; font-weight: 700; color: var(--accent-ink);
  background: var(--accent-soft); border-radius: 999px; padding: .22rem .6rem;
}
.dash__convo { margin-top: .6rem; display: flex; flex-direction: column; gap: .35rem; }
.dash__convo p { font-size: .8rem; line-height: 1.45; color: var(--ink-2); }
.dash__convo b { color: var(--ink); font-weight: 700; }

/* ---- ROI calculator ------------------------------------------------------ */
.roi-calc { display: grid; grid-template-columns: 1fr 0.9fr; gap: clamp(1.5rem, 4vw, 3rem); margin-top: 2.8rem; align-items: stretch; }
.roi-inputs { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.8rem; box-shadow: var(--shadow-sm); }
.roi-field { margin-bottom: 1.6rem; }
.roi-field:last-child { margin-bottom: 0; }
.roi-field__top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .6rem; }
.roi-field__label { font-weight: 700; font-size: .98rem; }
/* 17.85px/800 is below the AA large-text threshold (18.66px bold), so this
   number needs the 4.5:1 token, not the 4.49:1 brand blue. */
.roi-field__val { font-weight: 800; font-size: 1.05rem; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
/* 44px transparent hit area (AA tap target); visible 6px track lives on the
   pseudo-elements. The 26px thumbs are re-centred on the thin track. */
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%;
  height: 44px; background: transparent; outline: none; cursor: pointer; touch-action: none;
}
input[type="range"]:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: var(--accent-soft); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--accent-soft); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); border: 3px solid #fff; box-shadow: var(--shadow-md); cursor: pointer;
  margin-top: -10px;
}
input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border: 3px solid #fff; border-radius: 50%; background: var(--accent); box-shadow: var(--shadow-md); cursor: pointer; }
.roi-result {
  background: var(--bg-ink); color: #fff; border-radius: var(--radius-lg); padding: 2rem;
  display: flex; flex-direction: column; justify-content: center; box-shadow: var(--shadow-lg);
}
.roi-result__label { font-size: .82rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.roi-result__big { font-size: clamp(2.6rem, 6vw, 4rem); font-weight: 800; letter-spacing: -.03em; margin: .3rem 0; color: #fff; font-variant-numeric: tabular-nums; }
.roi-result__big .cur { color: #4ade80; }
.roi-result__sub { color: rgba(255,255,255,.7); font-size: 1rem; }
.roi-result__yr { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .95rem; color: rgba(255,255,255,.8); }
.roi-result__yr b { color: #4ade80; font-weight: 800; }

/* ---- Pricing compare ----------------------------------------------------- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; margin-top: 2.8rem; }
.compare__card { border-radius: var(--radius-lg); padding: 2rem; border: 1px solid var(--line); }
.compare__card--human { background: var(--bg-soft); }
.compare__card--ai { background: var(--bg-ink); color: #fff; border-color: transparent; box-shadow: var(--shadow-lg); position: relative; }
.compare__title { font-size: 1.3rem; font-weight: 800; }
.compare__card--ai .compare__title::after { content: "Recommended"; margin-left: .7rem; font-size: .65rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; background: var(--accent); color: #fff; padding: .2rem .55rem; border-radius: 999px; vertical-align: middle; }
.compare__list { margin-top: 1.4rem; display: flex; flex-direction: column; gap: .9rem; }
.compare__list li { display: flex; gap: .7rem; align-items: flex-start; font-size: 1.02rem; }
.compare__card--human .compare__list li { color: var(--muted); }
.compare__card--human .compare__list li::before { content: "\2013"; color: var(--muted-2); font-weight: 800; }
.compare__card--ai .compare__list li::before {
  content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%;
  background: rgba(74,222,128,.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234ade80' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.pricing__note { text-align: center; margin-top: 1.8rem; font-size: .95rem; color: var(--muted-2); font-weight: 600; }

/* ---- Pricing value stack ------------------------------------------------- */
.value-stack {
  margin-block: 2rem;
  /* tinted flagship surface: separates from the grey human compare card */
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: var(--radius-lg);
  padding: 2rem;
}
.value-stack__label { display: block; font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.value-stack__list {
  margin-top: 1.3rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 2rem;
}
@media (max-width: 720px) {
  .value-stack__list { grid-template-columns: 1fr; }
}

/* ---- Pricing scarcity ---------------------------------------------------- */
.pricing__scarcity {
  display: flex; align-items: flex-start; gap: .6rem;
  width: fit-content; max-width: 60ch; margin-inline: auto; margin-top: 1.6rem;
  padding: .7rem 1.15rem; border-radius: 999px;
  background: color-mix(in srgb, var(--tone-amber) 8%, var(--bg-soft));
  border: 1px solid color-mix(in srgb, var(--tone-amber) 22%, var(--line));
  font-size: .95rem; font-weight: 600; color: var(--ink-2); line-height: 1.45;
  text-align: left;
}
.pricing__scarcity::before {
  content: ""; flex: none; width: 10px; height: 10px; margin-top: .45rem; border-radius: 50%;
  background: var(--tone-amber); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tone-amber) 18%, transparent);
}

/* ---- Guarantee promise band (THE headline 30-Day Promise) ---------------- */
.guarantee__promise {
  display: flex; align-items: center; gap: 1.5rem;
  margin-block: 2.5rem;
  padding: 2rem clamp(1.5rem, 4vw, 2.4rem);
  background: var(--bg-ink); color: #fff;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.guarantee__seal {
  flex: none; width: 92px; height: 92px; border-radius: 50%;
  display: grid; place-content: center; text-align: center;
  background: radial-gradient(120% 120% at 50% 20%, color-mix(in srgb, var(--accent) 85%, #fff), var(--accent));
  color: #fff;
  box-shadow: 0 10px 26px rgba(47,107,255,.45), inset 0 0 0 1px rgba(255,255,255,.35),
              0 0 0 6px rgba(47,107,255,.16);
}
.guarantee__seal b { font-size: 1.8rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.guarantee__seal span {
  display: block; margin-top: .1rem; font-size: .62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.85);
}
.guarantee__body { flex: 1; min-width: 0; }
.guarantee__badge {
  display: inline-block; font-size: .78rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: #9db8ff;
}
.guarantee__statement {
  margin-top: .55rem; font-size: clamp(1.2rem, 2.2vw, 1.35rem);
  font-weight: 700; line-height: 1.4; color: #fff; max-width: 60ch;
}
.guarantee__statement .ital { color: #9db8ff; }
.guarantee__fine { margin-top: .9rem; font-size: .85rem; line-height: 1.5; color: rgba(255,255,255,.7); max-width: 68ch; }
@media (max-width: 640px) {
  .guarantee__promise { flex-direction: column; text-align: center; gap: 1.1rem; }
  .guarantee__body { text-align: center; }
  .guarantee__statement, .guarantee__fine { margin-inline: auto; }
}

/* ---- Guarantee as a full-bleed DARK section (its own moment) -------------- */
.guarantee--dark { background: var(--bg-ink); color: #fff; }
.guarantee--dark .kicker { color: #7ea2ff; }
.guarantee--dark .section__title { color: #fff; }
.guarantee--dark .section__title .ital { color: #9db8ff; }
/* three supporting step cards restyled for dark */
.guarantee--dark .step {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.1);
  box-shadow: none;
}
.guarantee--dark .step__n { color: #7ea2ff; }
.guarantee--dark .step__title { color: #fff; }
.guarantee--dark .step__text { color: rgba(255,255,255,.72); }
/* promise band becomes a subtly bordered translucent panel (not a solid card)
   so it still stands out against the dark section. Seal keeps its blue gradient. */
.guarantee--dark .guarantee__promise {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: none;
}

/* ---- FAQ ----------------------------------------------------------------- */
.faq-list { margin-top: 2.2rem; border-top: 1px solid var(--line); max-width: 760px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.4rem 0; min-height: 44px; font-family: inherit; font-size: clamp(1.05rem, 2vw, 1.2rem); font-weight: 700; color: var(--ink);
}
.faq-q__icon { flex: none; width: 26px; height: 26px; position: relative; transition: transform .3s ease; }
.faq-q__icon::before, .faq-q__icon::after { content: ""; position: absolute; background: var(--accent); border-radius: 2px; }
.faq-q__icon::before { left: 4px; right: 4px; top: 12px; height: 2px; }
.faq-q__icon::after { top: 4px; bottom: 4px; left: 12px; width: 2px; transition: transform .3s ease; }
.faq-item.open .faq-q__icon::after { transform: scaleY(0); }
.faq-a { overflow: hidden; max-height: 0; transition: max-height .35s ease; }
.faq-a__inner { padding-bottom: 1.4rem; color: var(--muted); font-size: 1.06rem; max-width: 62ch; }

/* ---- Final CTA ----------------------------------------------------------- */
.final-cta { background: linear-gradient(180deg, var(--bg) 0%, var(--accent-soft) 100%); }
.final-cta__title { font-size: clamp(2.1rem, 5vw, 3.4rem); max-width: 18ch; margin-inline: auto; }
.final-cta__ps { margin-top: 1.4rem; font-size: .92rem; color: var(--muted); font-weight: 600; }

/* ---- Booking section (final CTA) ----------------------------------------- */
.booking {
  display: grid; grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 3rem; align-items: stretch;
}
.booking__info {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 2rem; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; text-align: left;
}
.booking__label {
  font-size: .8rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent-ink);      /* 13.6px small text: 6.68:1, not 4.49:1 */
}
.booking__points { margin-top: 1.4rem; display: flex; flex-direction: column; gap: 1.15rem; }
.booking__point b { display: block; font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.booking__point span { display: block; margin-top: .3rem; font-size: .97rem; color: var(--muted); line-height: 1.5; }
.booking__note {
  margin-top: auto; padding-top: 1.4rem; border-top: 1px dashed var(--line);
  font-size: .9rem; font-weight: 600; color: var(--muted-2);
}
.booking__cal {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); overflow: hidden;
  min-height: 560px; display: flex;
}
.booking__frame { width: 100%; border: 0; min-height: 560px; flex: 1; }
.booking__form {
  margin: auto; width: 100%; max-width: 380px; padding: 1.8rem 2rem;
  display: flex; flex-direction: column; gap: .8rem; text-align: left;
}
.booking__form-title { font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; text-align: center; margin-bottom: .2rem; }
.booking__form label span { display: block; font-size: .82rem; font-weight: 700; color: var(--ink-2); margin-bottom: .3rem; }
.booking__form input[type="text"], .booking__form input[type="tel"], .booking__form input[type="email"] {
  width: 100%; min-height: 44px; padding: 0 .9rem;
  border: 1px solid var(--line); border-radius: 12px; font-family: inherit; font-size: 1rem;
  background: var(--bg); color: var(--ink);
}
.booking__form input:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 1px; }
.booking__hp { position: absolute; left: -9999px; }
.booking__form .btn { width: 100%; margin-top: .3rem; }
.booking__form-note { font-size: .84rem; color: var(--muted-2); font-weight: 600; text-align: center; }
.booking__form-msg { display: none; text-align: center; font-weight: 700; color: var(--ink-2); }
.booking__form-msg.is-ok { display: block; font-size: 1.05rem; color: var(--green); }
.booking__form-msg:not(:empty) { display: block; }
/* preferred-times chip group */
.chip-row__label { display: block; font-size: .82rem; font-weight: 700; color: var(--ink-2); margin-bottom: .4rem; }
.chip-row__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
/* 44px minimum: these chips sit inside the form that feeds the lead pipeline,
   so a missed tap is a missed lead. Was 36px. */
.chip-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink-2);
  font-family: inherit; font-weight: 600; font-size: .86rem;
  min-height: 44px; padding: .5rem 1rem; border-radius: 999px; cursor: pointer;
}
.chip-toggle:hover { border-color: var(--accent); }
.chip-toggle:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 1px; }
.chip-toggle.is-on {
  background: var(--accent-soft); border-color: var(--accent);
  color: var(--accent-ink); font-weight: 700;
}
@media (max-width: 900px) {
  .booking { grid-template-columns: 1fr; }
  .booking__cal { min-height: 520px; }
  .booking__frame { min-height: 520px; }
  .booking__info { order: 2; }   /* calendar first on mobile: action above rationale */
}

/* ---- Footer -------------------------------------------------------------- */
/* Three left-aligned columns — brand+blurb / links / legal+entity — instead of
   two blocks pinned to opposite edges with ~500px of dead air between them and
   five right-aligned ragged-left strings on the right. .footer__meta goes
   display:contents so its children become columns of .footer__inner directly;
   each one is placed explicitly, so this holds even if the markup order moves.
   Below 760px the whole thing falls back to the stacked, left-aligned mobile
   composition, which was already the better-composed of the two. */
.footer { background: var(--bg-ink); color: rgba(255,255,255,.7); padding-block: 3rem; }
.footer__inner { display: flex; flex-direction: column; gap: 1.6rem; }
.footer__brand { display: inline-flex; align-items: center; gap: .55rem; }
.footer__brand .brand-mark { width: 30px; height: 30px; flex: none; border-radius: 8px; }
.footer__brand .brand-word { font-size: 1.4rem; font-weight: 800; color: #fff; letter-spacing: -.03em; }
.footer__blurb { margin-top: .6rem; max-width: 42ch; font-size: .95rem; }
.footer__meta { display: flex; flex-direction: column; gap: .1rem; font-size: .95rem; }
.footer__legal { font-size: .82rem; color: rgba(255,255,255,.5); }
/* One affordance for every link in the footer: no resting underline, --ink-dim,
   underline on hover. Terms/Privacy used to be the only underlined items here,
   which made the quietest links on the site the loudest. */
.footer__meta a,
.footer__links a {
  display: inline-flex; align-items: center; min-height: 44px;
  width: fit-content;
  color: var(--ink-dim); text-decoration: none;
}
.footer__meta a:hover,
.footer__links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 0 1.9rem; }
.footer__links a { font-size: .88rem; }
@media (min-width: 761px) {
  .footer__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(1.6rem, 4vw, 3.5rem); row-gap: .1rem;
    align-items: start;
  }
  .footer__inner > div:first-child { grid-area: 1 / 1 / 4 / 2; }
  .footer__meta { display: contents; }
  .footer__meta > [data-footer-email]           { grid-area: 1 / 2; }
  .footer__meta > a:not([data-footer-email])    { grid-area: 2 / 2; }
  .footer__meta > .footer__links                { grid-area: 3 / 2; align-self: center; }
  .footer__meta > .footer__legal                { grid-area: 1 / 3; align-self: center; }
  .footer__meta > [data-bind="brand.location"]  { grid-area: 2 / 3; align-self: center; }
}

/* ---- Legal documents (terms.html, privacy.html) --------------------------
   Reading pages: no JS, .nav--solid from first paint. They open on an ink
   masthead so they belong to the same site as the hero and the work page,
   then break to white for the body, where a 64ch measure carries fifteen
   sections far better than the ~72ch they used to run. Padding-top clears the
   fixed nav (the masthead takes that job over when it is present). */
.legal { padding-top: clamp(6.5rem, 13vh, 8.5rem); padding-bottom: clamp(4rem, 9vw, 7rem); }
/* --legal-col is the reading column, gutters included: 64ch, down from 70ch.
   Measured, that takes a paragraph from ~78 rendered characters a line to
   ~70, which is where fifteen sections stop reading as a wall. The masthead
   and the section rail both key off this one token, which is what keeps the
   h1, the body copy and the rail on a single vertical. */
.legal { --legal-col: 64ch; }
.legal-doc { max-width: var(--legal-col); }
.legal-doc__head { padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); }
.legal-doc__kicker {
  display: inline-block;
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: .9rem;
}
.legal-doc h1 { font-size: clamp(2rem, 5vw, 3rem); }
.legal-doc__lead {
  margin-top: 1.1rem;
  font-size: clamp(1.05rem, 1.6vw, 1.18rem);
  color: var(--muted);
}
.legal-doc__updated {
  margin-top: 1.1rem;
  font-size: .9rem; font-weight: 600;
  color: var(--muted-2);
}
.legal-doc__section { margin-top: clamp(2.2rem, 5vw, 3rem); }
.legal-doc__section > h2 {
  font-size: clamp(1.25rem, 2.6vw, 1.55rem);
  letter-spacing: -0.015em;
}
/* the muted small-caps rung above each h2 */
.legal-doc__section > .legal-doc__kicker { margin-bottom: .55rem; }
.legal-doc p { margin-top: 1rem; color: var(--ink-2); }
.legal-doc h3 {
  margin-top: 1.8rem;
  font-size: 1.05rem; font-weight: 700;
  letter-spacing: -0.005em;
}
.legal-doc a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
/* hover stays AA (--accent is 4.49:1); the thicker rule carries the change */
.legal-doc a:hover { color: var(--accent-ink-2); text-decoration-thickness: 2px; }
.legal-doc ul { margin-top: 1rem; list-style: none; }
.legal-doc ul li {
  position: relative;
  margin-top: .7rem; padding-left: 1.35rem;
  color: var(--ink-2);
}
.legal-doc ul li::before {
  content: ""; position: absolute; left: .25rem; top: .68em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); opacity: .55;
}
/* the promise, quoted word for word from the marketing page */
.legal-doc__quote {
  margin-top: 1.4rem;
  padding: 1.15rem 1.35rem;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.legal-doc__quote p { margin-top: 0; color: var(--ink); font-weight: 600; }
/* placeholder awaiting a real value from Nicholas — the deploy gate greps for it */
.legal-doc mark[data-todo] {
  background: #fff4d6; color: #7a5200;
  padding: .1em .4em; border-radius: 5px;
  font-weight: 700; font-size: .95em;
}
@media (max-width: 560px) {
  .legal-doc__quote { padding: 1rem 1.1rem; }
}

/* ---- Legal masthead (the ink block these pages open on) ------------------
   Expected markup — a straightforward wrapper around the existing header,
   as the FIRST child of <main class="legal">:

     <main class="legal" id="top">
       <div class="legal-masthead">
         <div class="legal-masthead__inner">
           <header class="legal-doc__head">   <- unchanged: kicker, h1,
             ...                                  .legal-doc__lead,
           </header>                              .legal-doc__updated
         </div>
       </div>
       <article class="wrap legal-doc"> ... </article>
     </main>

   The masthead is full-bleed, carries its own clearance under the fixed nav,
   and hands the page back to white at its lower edge. .legal drops its own
   padding-top when a masthead is present so there is no white sliver above. */
.legal:has(> .legal-masthead) { padding-top: 0; }
.legal-masthead {
  position: relative; isolation: isolate;
  background: var(--bg-ink); color: var(--ink-body);
  padding-top: clamp(6.5rem, 13vh, 8.5rem);
  padding-bottom: clamp(2.6rem, 5vw, 4rem);
  margin-bottom: clamp(2.6rem, 6vw, 4.5rem);
}
/* one wash of the house blue falling from the top edge, as on .proof__band */
.legal-masthead::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 130% at 22% -20%, rgba(47,107,255,.20) 0%, rgba(47,107,255,.05) 48%, transparent 70%);
}
/* same box as .legal-doc, so the h1 and the body copy share one left edge */
.legal-masthead__inner {
  width: 100%; max-width: var(--legal-col); margin: 0 auto;
  padding-inline: var(--pad);
}
/* the head keeps its own class; only its register changes inside the ink */
.legal-masthead .legal-doc__head { padding-bottom: 0; border-bottom: 0; }
.legal-masthead .legal-doc__kicker { color: var(--accent-lift); }
.legal-masthead h1 { color: var(--ink-hi); font-size: clamp(2.2rem, 5.4vw, 3.4rem); }
.legal-masthead .legal-doc__lead { color: var(--ink-body); max-width: 54ch; }
.legal-masthead .legal-doc__updated { color: var(--ink-faint); }

/* ---- Legal section rail (desktop only) -----------------------------------
   These documents run fifteen sections down a 64ch column with ~380px of dead
   margin either side. The rail moves into the left void and gives the reader
   a map they can jump from. Expected markup — a sibling BEFORE the article:

     <nav class="legal-rail" aria-label="On this page">
       <p class="legal-rail__label">On this page</p>
       <ol>
         <li><a href="#who-we-are">Who we are</a></li>
         ...one <li> per .legal-doc__section, in document order...
       </ol>
     </nav>

   Numbering is generated by a counter, so the rail always matches the 01..15
   kickers without repeating them in the markup. Add .is-current to a link if
   a highlight is ever wanted; there is no JS on these pages today. */
.legal-rail { display: none; }
.legal-doc__section { scroll-margin-top: 5.5rem; }
@media (min-width: 1100px) {
  /* Column 2 is exactly --legal-col wide with a 1fr void either side, so the
     reading column stays where it has always been — dead centre, same left
     edge as the masthead — and the rail simply moves into the void that was
     already there. Every placement stays scoped to :has(> .legal-rail): with
     no rail in the markup the page must keep its ordinary centred .wrap. */
  .legal:has(> .legal-rail) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--legal-col)) minmax(0, 1fr);
    column-gap: clamp(1rem, 2vw, 2rem);
    align-items: start;
  }
  .legal:has(> .legal-rail) > .legal-masthead { grid-column: 1 / -1; }
  .legal:has(> .legal-rail) > .legal-rail { display: block; grid-column: 1; justify-self: end; }
  .legal:has(> .legal-rail) > .legal-doc { grid-column: 2; }

  .legal-rail {
    position: sticky; top: 100px;
    width: min(15rem, 100%);
    padding-right: clamp(.5rem, 1.5vw, 1.25rem);
  }
  .legal-rail__label {
    font-size: .72rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
    color: var(--muted-2); margin-bottom: .9rem;
  }
  .legal-rail ol { counter-reset: rail; border-left: 1px solid var(--line); }
  .legal-rail li { margin: 0; }
  .legal-rail a {
    display: flex; gap: .6rem; align-items: baseline;
    padding: .42rem 0 .42rem .9rem; margin-left: -1px;
    border-left: 2px solid transparent;
    font-size: .88rem; line-height: 1.35; color: var(--muted);
    transition: color .18s ease, border-color .18s ease;
  }
  .legal-rail a::before {
    counter-increment: rail;
    content: counter(rail, decimal-leading-zero);
    flex: none; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
    color: var(--muted-2); font-variant-numeric: tabular-nums;
  }
  .legal-rail a:hover,
  .legal-rail a.is-current { color: var(--ink); border-left-color: var(--accent-ink); }
  .legal-rail a:hover::before,
  .legal-rail a.is-current::before { color: var(--accent-ink); }
}

/* ---- Scroll reveal (gated behind .is-ready so no-JS shows everything) ----- */
.js.is-ready .reveal { opacity: 0; transform: translateY(26px); }
.js.is-ready .reveal.in { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.js.is-ready .reveal[data-delay="1"].in { transition-delay: .08s; }
.js.is-ready .reveal[data-delay="2"].in { transition-delay: .16s; }
.js.is-ready .reveal[data-delay="3"].in { transition-delay: .24s; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 960px) {
  .hero { min-height: 100svh; min-height: 100dvh; }
  .hero__inner { max-width: 100%; }
  .hero__sub { max-width: 34ch; }
  .book-itself__grid,
  .cockpit__grid,
  .roi-calc,
  .compare { grid-template-columns: 1fr; }
  .book-itself__phone { order: -1; }
  .nav__links { display: none; }
  /* mark + compact "AISA" wordmark so brand + CTA fit on one row */
  .nav__brand .brand-word { display: none; }
  .nav__brand .brand-short { display: inline; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .compare { gap: 1rem; }
  .hero__actions .btn { width: 100%; }
}

/* full-height helpers using the dvh cascade (kills iOS address-bar jump) */
.min-vh { min-height: 100vh; min-height: 100svh; min-height: 100dvh; }

/* safe-area padding for any fixed bottom UI (future sticky CTA) */
.safe-bottom { padding-bottom: calc(1.2rem + env(safe-area-inset-bottom)); }

/* ---- Sticky mobile CTA (shown only <= 960px, revealed past the hero) ------ */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding: .7rem var(--pad);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  transform: translateY(120%); opacity: 0; pointer-events: none;
  transition: transform .3s ease, opacity .3s ease;
}
.sticky-cta .btn { width: 100%; }
.sticky-cta.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
@media (min-width: 961px) { .sticky-cta { display: none; } }

/* ---- Reduced motion: show everything, kill transforms -------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
  .js.is-ready .reveal,
  .js .bubble, .js .sms__confirm { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js.is-ready .hero__title .hw { opacity: 1 !important; transform: none !important; }
  /* .book-steps needs no override: resting/active is colour, never opacity */
  .hero__rot { transition: none !important; opacity: 1 !important; transform: none !important; }
  .hero__feed, .hero__net { display: none !important; }
}

/* accessible focus */
:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; border-radius: 6px; }

/* skip link (visible on keyboard focus) */
.skip-link {
  position: absolute; top: -60px; left: 12px; z-index: 200;
  background: var(--accent-ink); color: #fff; font-weight: 700;
  padding: .7rem 1.1rem; border-radius: 0 0 10px 10px; text-decoration: none;
  transition: top .18s ease;
}
.skip-link:focus { top: 0; }

/* =============================================================================
   WORK PAGE — dark cinema (work.html)
   The site inverted to ink. Each client gets a full-bleed chapter: a huge name
   with one Instrument Serif word in their own colour, a centred reel under a
   soft bloom, an overlapping triptych of stills, then the written case.
   Every colour is a token, and every accent on ink is AA at its size.
   ========================================================================== */

/* the page itself, so overscroll and the footer seam stay ink */
body[data-page="work"] { background: var(--bg-ink); color: var(--ink-body); }

.work {
  background: var(--bg-ink);
  overflow: hidden;                       /* the ghost numerals sit past the wrap */
  /* one type scale for the whole dark register, so the page reads as a set */
  --step--2: .72rem;
  --step--1: clamp(.8125rem, .79rem + .08vw, .875rem);
  --step-0:  clamp(1rem, .965rem + .18vw, 1.0938rem);
  --step-1:  clamp(1.08rem, 1.02rem + .34vw, 1.3rem);
  --ease-out: cubic-bezier(.22,.61,.36,1);
}
.work p { line-height: 1.6; }

/* ---- small-caps label, the only label style on the page ------------------ */
.lbl {
  font-size: var(--step--2, .72rem);
  font-weight: 700; letter-spacing: .19em; text-transform: uppercase;
  color: var(--ink-faint); line-height: 1.4;
}
.lbl--lit { color: var(--chapter, var(--accent-lift)); }

/* label, hairline, label */
.rule-row { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.rule-row > i { display: block; width: 34px; height: 1px; background: var(--hair-2); flex: none; }

/* ---- Hero ---------------------------------------------------------------- */
.work-hero {
  position: relative; isolation: isolate;
  padding-top: clamp(7.5rem, 15vh, 10rem);
  padding-bottom: clamp(2.6rem, 5vw, 4.2rem);
}
/* soft cinema bloom in the house blue. A radial gradient, not a blurred box:
   same softness, none of the filter cost on a page this tall. */
.work-hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: -16%; transform: translateX(-50%);
  width: min(1240px, 130%); aspect-ratio: 2 / 1;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(47,107,255,.20) 0%, rgba(47,107,255,.11) 32%, rgba(47,107,255,.04) 54%, transparent 74%);
}
.work-hero__title {
  margin-top: clamp(1.3rem, 2.6vw, 2rem);
  font-size: clamp(2.7rem, 1.55rem + 5.1vw, 5.75rem);
  line-height: .95; letter-spacing: -.038em; max-width: 15ch;
  color: var(--ink-hi); font-weight: 800;
}
.work-hero__title .ital { color: var(--accent-lift); }
.work-hero__sub {
  margin-top: clamp(1.2rem, 2.4vw, 1.8rem);
  font-size: var(--step-1); line-height: 1.5; color: var(--ink-body); max-width: 46ch;
}

/* the title-card index of the three chapters */
.work-index {
  margin-top: clamp(2.4rem, 5vw, 4rem);
  border-top: 1px solid var(--hair);
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.work-index__item {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: 1.35rem 1.35rem 1.5rem 0;
  border-right: 1px solid var(--hair);
  transition: background .3s var(--ease-out, ease);
}
.work-index li:last-child .work-index__item { border-right: 0; }
.work-index li:not(:first-child) .work-index__item { padding-left: 1.35rem; }
a.work-index__item:hover { background: rgba(255,255,255,.03); }
a.work-index__item:hover .work-index__name { color: var(--chapter, var(--accent-lift)); }
.work-index__n {
  flex: none; font-size: var(--step--1); font-weight: 800; letter-spacing: .06em;
  line-height: 1.5; font-variant-numeric: tabular-nums;
  color: var(--chapter, var(--ink-faint));
}
.work-index__name {
  display: block; color: var(--ink-hi); font-weight: 700; font-size: var(--step-0);
  line-height: 1.35; letter-spacing: -.012em; transition: color .3s var(--ease-out, ease);
}
.work-index__what { display: block; margin-top: .15rem; color: var(--ink-dim); font-size: var(--step--1); line-height: 1.45; }

/* ---- Honesty band -------------------------------------------------------- */
.honesty { padding-block: clamp(1.6rem, 3.4vw, 2.6rem) clamp(.4rem, 1.4vw, 1rem); }
.honesty__inner {
  background: var(--bg-ink-2);
  border: 1px solid var(--hair); border-left: 3px solid var(--accent-lift);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 2.6vw, 1.7rem) clamp(1.2rem, 3vw, 2.1rem);
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 3vw, 1.9rem); align-items: start;
}
.honesty__tag { white-space: nowrap; padding-top: .18rem; color: var(--accent-lift); }
.honesty p { font-size: var(--step-0); color: var(--ink-body); max-width: 74ch; }

/* ---- Chapter ------------------------------------------------------------- */
.chapter {
  position: relative;
  padding-block: clamp(3.4rem, 8vw, 6.5rem) clamp(3.4rem, 8vw, 6rem);
  scroll-margin-top: 4.5rem;              /* a fragment jump clears the fixed nav */
}
/* Vignette: keeps each chapter feeling like a lit screen in a dark room. Kept
   shallow and late on purpose, so the tone at the chapter's own edge is close
   to the page and the joins between chapters stay invisible. */
.chapter::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(135% 92% at 50% 38%, transparent 56%, rgba(0,0,0,.26) 100%);
}
.chapter > .wrap { position: relative; z-index: 1; }

.chapter__head { position: relative; margin-bottom: clamp(2.1rem, 5vw, 3.6rem); }
/* the outlined chapter numeral, sitting in the empty right column */
.chapter__ghost {
  position: absolute; z-index: -1; right: -.03em; top: 50%; transform: translateY(-52%);
  font-size: clamp(7rem, 15vw, 13.5rem); font-weight: 800; line-height: .7; letter-spacing: -.06em;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--chapter, #ffffff) 26%, transparent);
  pointer-events: none; user-select: none;
}
.chapter__meta { margin-bottom: clamp(1rem, 2.4vw, 1.5rem); }
.chapter__meta > i { background: var(--chapter, var(--hair-2)); opacity: .7; width: 26px; }
.chapter__name {
  font-size: clamp(2.5rem, 1.4rem + 4.9vw, 5.25rem);
  line-height: .92; letter-spacing: -.042em; max-width: 13ch;
  color: var(--ink-hi); font-weight: 800;
}
.chapter__name .ital { color: var(--chapter, var(--accent-lift)); }

/* ---- The reel ------------------------------------------------------------ */
.reel { margin: 0 0 clamp(2.4rem, 6vw, 4.6rem); }
.reel__stage { position: relative; padding-block: clamp(.9rem, 2.6vw, 1.9rem); }
/* House blue, with a low wash of the client's own colour beneath it. The box
   is deliberately much larger than the frame: the halo lives in the gradient's
   falloff, so there is no blur() filter to pay for on a page this tall.
   The box no longer spills sideways (it used to run -11% past the stage, i.e.
   20px past the viewport at 390px, saved only by .work's overflow clip). The
   horizontal radii are scaled up by the same 1.22x instead — 52% -> 63% and
   44% -> 54% — so the halo is pixel-for-pixel what it was, with nothing
   outside the box. */
.reel__bloom {
  position: absolute; z-index: 0; inset: -17% 0 -21%; pointer-events: none;
  background:
    radial-gradient(63% 50% at 50% 46%, rgba(47,107,255,.40) 0%, rgba(47,107,255,.20) 34%, rgba(47,107,255,.07) 54%, transparent 74%),
    radial-gradient(54% 40% at 50% 88%, color-mix(in srgb, var(--chapter, #2f6bff) 20%, transparent) 0%, transparent 70%);
}
.frame {
  position: relative; z-index: 1;
  border-radius: var(--radius); overflow: hidden;
  background: #11172a; border: 1px solid var(--hair-2);
  box-shadow: 0 2px 0 rgba(255,255,255,.05) inset, 0 40px 90px -30px rgba(0,0,0,.9), 0 8px 26px -12px rgba(0,0,0,.7);
}
.frame__bar {
  display: flex; align-items: center; gap: .9rem;
  padding: .65rem .85rem; background: #0d1322; border-bottom: 1px solid rgba(255,255,255,.07);
}
.dots { display: flex; gap: 6px; flex: none; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.16); }
.frame__url {
  flex: 1; min-width: 0; text-align: center;
  font-size: var(--step--1); color: var(--ink-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: rgba(255,255,255,.05); border-radius: 999px; padding: .25rem .9rem;
}
.frame__live {
  flex: none; display: flex; align-items: center; gap: .45rem;
  font-size: var(--step--2); font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--chapter, var(--accent-lift));
}
.frame__live i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--chapter, var(--accent-lift));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chapter, #7aa2ff) 16%, transparent);
}
.frame__view { position: relative; background: #000; aspect-ratio: var(--reel-ar, 1280 / 800); }
.reel__video { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
/* soft top and bottom scrim so the transport reads over any frame */
.frame__view::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, transparent 22%, transparent 58%, rgba(4,6,12,.72) 100%);
}
/* The transport button. It used to be a 72px disc floating at 40% height, dead
   centre, which sat on top of every client's headline — the one thing the reel
   is there to show. It now lives at the head of the HUD as a real control:
   play when the reel is stopped, pause while it runs. 44px hit area, drawn
   smaller, so it reads as a transport and not a billboard. */
.reel__toggle {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0; margin: 0 -.15rem;
  border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28);
  color: #fff; -webkit-appearance: none; appearance: none;
  transition: background .25s var(--ease-out, ease), border-color .25s var(--ease-out, ease);
}
.reel__toggle:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.46); }
.reel__toggle svg { width: 13px; height: auto; fill: currentColor; }
.reel__toggle .i-play { transform: translateX(1px); }   /* optical centring of the triangle */
.reel__toggle .i-pause,
.reel.is-playing .reel__toggle .i-play { display: none; }
.reel.is-playing .reel__toggle .i-pause { display: block; }
/* The client sites' own headlines were ghosting through this scrim — Goldy's
   "100 / 100% / 0 / FREE" band and Shocked Solar's "SCROLL TO SEE THE
   STANDARD" both read straight through it, with the 2px progress rail cutting
   across the letterforms. The gradient now reaches full strength by 40% and
   the strip blurs what is behind it, so the transport sits on a clean plate. */
.reel__hud {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: clamp(.7rem, 2vw, 1.25rem);
  padding: clamp(1.6rem, 3.4vw, 2.1rem) clamp(1rem, 2.6vw, 1.6rem) clamp(.85rem, 2.2vw, 1.35rem);
}
/* the scrim itself, so the blur and the mask never touch the HUD's own text */
.reel__hud::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(4,6,12,0) 0%, rgba(4,6,12,.9) 40%, rgba(4,6,12,.95) 72%, rgba(4,6,12,.97) 100%);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 42%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 42%);
}
.reel__hud .lbl { color: rgba(255,255,255,.82); }
.reel__rail { flex: 1; min-width: 40px; height: 2px; background: rgba(255,255,255,.2); border-radius: 2px; overflow: hidden; }
.reel__rail i {
  display: block; height: 100%; width: 0;
  background: var(--chapter, var(--accent-lift));
  transition: width .3s linear;
}
.reel__time {
  flex: none; font-size: var(--step--2); font-weight: 700; letter-spacing: .14em;
  color: rgba(255,255,255,.82); font-variant-numeric: tabular-nums;
}
.reel__cap { margin-top: .9rem; font-size: var(--step--1); color: var(--ink-dim); line-height: 1.5; max-width: 62ch; }
.reel__cap b { color: var(--ink-body); font-weight: 600; margin-right: .3em; }

/* ---- The overlapping offset triptych ------------------------------------- */
.stills { margin-bottom: clamp(2.4rem, 6vw, 4.5rem); }
.triptych {
  display: flex; align-items: flex-start; justify-content: center;
  padding: .9rem 0 .4rem;
  --still-ar: 3 / 2;                       /* one shape, so captions share a baseline */
}
/* the columns are equal and never overlap, so the captions stay in clean
   lanes. Only the plates spill past their column, which is what makes the
   offset read as a stack of prints rather than a grid. */
.tri { flex: 0 0 33.333%; min-width: 0; margin: 0; position: relative; }
.tri--a { z-index: 1; }
.tri--c { z-index: 2; }
.tri--b { z-index: 3; }
.tri__plate {
  position: relative; border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--hair-2); background: #000;
  aspect-ratio: var(--still-ar);
  box-shadow: 0 30px 60px -26px rgba(0,0,0,.95), 0 6px 18px -8px rgba(0,0,0,.8);
}
.tri__plate img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.tri--a .tri__plate { width: 110%; transform: rotate(-2.5deg) translateY(20px); }
.tri--b .tri__plate { width: 110%; margin-left: -5%; transform: rotate(1.5deg) translateY(-16px) scale(1.05); }
.tri--c .tri__plate { width: 110%; margin-left: -10%; transform: rotate(-1deg) translateY(34px); }
.tri__n {
  position: absolute; left: 9px; top: 9px; z-index: 2;
  font-size: .62rem; font-weight: 800; letter-spacing: .16em;
  color: rgba(255,255,255,.9); background: rgba(6,9,17,.6);
  border: 1px solid rgba(255,255,255,.18); border-radius: 6px; padding: .1rem .45rem;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.tri figcaption {
  margin-top: clamp(2.2rem, 4.6vw, 3.5rem);
  font-size: var(--step--1); color: var(--ink-dim); line-height: 1.45;
  padding-right: clamp(.9rem, 2vw, 1.6rem);
}

/* ---- The written case ---------------------------------------------------- */
.case {
  display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 5vw, 4rem); align-items: start;
}
.case__body p { font-size: var(--step-1); line-height: 1.56; color: var(--ink-body); }
.work .chips { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: clamp(1.4rem, 3vw, 2rem); }
.work .chip {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .45rem .95rem .45rem .75rem;
  background: rgba(255,255,255,.035); border-color: var(--hair);
  font-size: var(--step--1); color: var(--ink-body); font-weight: 500; line-height: 1.3;
}
.work .chip i { width: 5px; height: 5px; border-radius: 50%; background: var(--chapter, var(--accent-lift)); flex: none; }

.spec {
  background: var(--bg-ink-2); border: 1px solid var(--hair); border-radius: var(--radius);
  padding: clamp(1.2rem, 2.8vw, 1.75rem);
}
.spec dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1.1rem; }
.spec dt { margin-bottom: .3rem; }
.spec dd { margin: 0; color: var(--ink-hi); font-weight: 600; font-size: var(--step-0); line-height: 1.35; letter-spacing: -.012em; }
.spec__rule { height: 1px; background: var(--hair); margin-block: clamp(1.2rem, 2.6vw, 1.6rem); }
.status { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--step-0); color: var(--ink-body); line-height: 1.5; }
.status i {
  flex: none; width: 7px; height: 7px; border-radius: 50%; margin-top: .55em;
  background: var(--chapter, var(--accent-lift));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--chapter, #7aa2ff) 14%, transparent);
}
/* min-height 44px: this is the page's only outbound link to a live client
   site, and it measured 142.9 x 30.8. The underline stays on the text, so the
   extra height is padding above it, not a taller rule. */
.visit {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 44px;
  margin-top: clamp(1rem, 2.4vw, 1.4rem);
  font-size: var(--step-0); font-weight: 700; letter-spacing: -.01em;
  color: var(--accent-lift);
  border-bottom: 1px solid rgba(122,162,255,.35); padding-bottom: .25rem;
  transition: gap .3s var(--ease-out, ease), border-color .3s var(--ease-out, ease);
}
.visit:hover { gap: .95rem; border-color: var(--accent-lift); }
.visit span { font-size: 1.1em; line-height: 1; }

/* ---- The rule between chapters, in the next chapter's colour -------------- */
.leader { padding-block: clamp(1.2rem, 4vw, 2.6rem) clamp(2.6rem, 7vw, 5rem); }
/* full-bleed link, so the only missing dimension was height (was 28.3px) */
.leader__link { display: flex; align-items: center; min-height: 44px; gap: clamp(.9rem, 2.4vw, 1.6rem); }
.leader__lead, .leader__name { white-space: nowrap; color: var(--ink-dim); }
.leader__name b { color: var(--ink-hi); font-weight: 700; letter-spacing: .14em; }
.leader__rule {
  flex: 1; min-width: 30px; height: 1px; position: relative;
  background: linear-gradient(90deg,
    var(--chapter, var(--accent-lift)) 0%,
    color-mix(in srgb, var(--chapter, #7aa2ff) 55%, transparent) 26%,
    rgba(255,255,255,.12) 40%, rgba(255,255,255,.12) 100%);
  transform-origin: left center;
}
.leader__rule::after {
  content: ""; position: absolute; left: 38%; top: 50%; transform: translate(-50%,-50%);
  width: 7px; height: 7px; border-radius: 50%; background: var(--chapter, var(--accent-lift));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--chapter, #7aa2ff) 16%, transparent);
}
/* the rule draws across as the next chapter arrives (JS-only, so no-JS keeps it) */
.js.is-ready .leader .leader__rule { transform: scaleX(0); }
.js.is-ready .leader.in .leader__rule { transform: scaleX(1); transition: transform 1.1s cubic-bezier(.2,.7,.2,1) .1s; }
.leader__link:hover .leader__name b { color: var(--chapter, var(--accent-lift)); }

/* ---- Also shipped (the smaller entries) ---------------------------------- */
.also { padding-block: clamp(1rem, 3vw, 2rem) clamp(2.6rem, 7vw, 5rem); }
.also__head { margin-bottom: clamp(1.2rem, 2.6vw, 1.8rem); }
.also__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(1rem, 2.4vw, 1.6rem); }
/* a lone entry should not stretch the full measure: it is a footnote, not a chapter */
.also__grid:has(> :only-child) { max-width: 46rem; }
.also-card {
  display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); align-items: stretch;
  background: var(--bg-ink-2); border: 1px solid var(--hair); border-radius: var(--radius);
  overflow: hidden; transition: border-color .35s var(--ease-out, ease), transform .35s var(--ease-out, ease);
}
.also-card:hover { border-color: var(--hair-2); transform: translateY(-3px); }
/* These thumbnails are 200x150 on an all-ink page: nothing in them is legible
   at that size, so a bright-white client site (Greenwood) was the loudest
   block on the page for no information. Sit them back with a slight
   desaturate/dim plus an ink scrim, and let the card's hover bring them up. */
.also-card__shot { position: relative; background: #000; aspect-ratio: 4 / 3; }
.also-card__shot img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  filter: saturate(.9) brightness(.72) contrast(1.02);
  transition: filter .35s var(--ease-out, ease);
}
.also-card__shot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(10,14,26,.42) 0%, rgba(10,14,26,.16) 55%, rgba(10,14,26,.34) 100%);
}
.also-card:hover .also-card__shot img { filter: saturate(1) brightness(.9) contrast(1.02); }
.also-card__body { padding: clamp(1rem, 2.2vw, 1.4rem); display: flex; flex-direction: column; gap: .4rem; align-self: center; }
.also-card__name { font-size: var(--step-0); font-weight: 700; color: var(--ink-hi); letter-spacing: -.015em; }
.also-card__line { font-size: var(--step--1); color: var(--ink-dim); line-height: 1.45; }
.also-card__meta { margin-top: .25rem; }

/* ---- Closing CTA --------------------------------------------------------- */
.work-cta {
  position: relative; isolation: isolate;
  border-top: 1px solid var(--hair);
  padding-block: clamp(3.4rem, 8vw, 6rem);
  text-align: center;
}
.work-cta::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 0; transform: translateX(-50%);
  width: min(1000px, 120%); aspect-ratio: 2.4 / 1;
  background: radial-gradient(50% 50% at 50% 0%, rgba(47,107,255,.16) 0%, rgba(47,107,255,.05) 45%, transparent 72%);
}
.work-cta__inner { display: flex; flex-direction: column; align-items: center; }
.work-cta__title {
  margin-top: 1rem;
  font-size: clamp(1.9rem, 1.2rem + 3.2vw, 3.4rem);
  line-height: 1.02; letter-spacing: -.035em; max-width: 17ch;
  color: var(--ink-hi); font-weight: 800;
}
.work-cta__title .ital { color: var(--accent-lift); }
.work-cta__sub { margin-top: 1.1rem; max-width: 54ch; color: var(--ink-dim); font-size: var(--step-0); }
.work-cta .btn { margin-top: clamp(1.6rem, 3.4vw, 2.2rem); }

/* ---- Film grain, on the two poster moments only -------------------------- */
.work-hero, .proof__band { position: relative; }
.work-hero::after, .proof__band::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity: .05; mix-blend-mode: overlay;
}

/* ---- Focus + selection on ink -------------------------------------------- */
body[data-page="work"] :focus-visible { outline-color: var(--accent-lift); }
.work ::selection { background: rgba(122,162,255,.28); color: #fff; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .case { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .work-index { grid-template-columns: 1fr; }
  .work-index__item { border-right: 0; border-bottom: 1px solid var(--hair); padding: 1rem 0; }
  .work-index li:not(:first-child) .work-index__item { padding-left: 0; }
  .work-index li:last-child .work-index__item { border-bottom: 0; }
  .also-card { grid-template-columns: 1fr; }
  .also-card__shot { aspect-ratio: 16 / 9; }
}
@media (max-width: 720px) {
  .honesty__inner { grid-template-columns: 1fr; gap: .8rem; }
  /* the triptych unstacks: three plates, straight, in their own lane */
  .triptych { flex-direction: column; gap: 1.7rem; padding-top: 0; }
  .tri { flex: 1 1 auto; width: 100%; }
  .tri--a .tri__plate, .tri--b .tri__plate, .tri--c .tri__plate { transform: none; width: 100%; margin-left: 0; }
  .tri figcaption { margin-top: .7rem; padding-right: 0; }
  /* The ghost numeral sits above the label instead of behind the name. It is
     KEPT rather than hidden — it is the page's cinema device and the only
     thing marking a chapter break on a narrow screen — but the head needed
     room: at 3.4rem the outline ended at y52 and "CHAPTER 01" started at
     y54.4, two pixels apart, so the number read twice in a row. */
  .chapter__ghost { font-size: 5.2rem; top: -6px; right: 0; transform: none; }
  .chapter__head { padding-top: 4.6rem; }
  .frame__url { font-size: .72rem; padding: .2rem .6rem; }
  .reel__hud { padding: 1.3rem .85rem .7rem; gap: .6rem; }
  .leader__link { flex-wrap: wrap; gap: .7rem; }
  .leader__rule { order: 3; flex-basis: 100%; }
  .spec dl { gap: 1rem; }
}
@media (max-width: 420px) {
  .spec dl { grid-template-columns: 1fr; }
}

/* Reduced motion: the reel never gets a src (see work.js), the rule never
   draws, and nothing on the page moves. */
@media (prefers-reduced-motion: reduce) {
  .js.is-ready .leader .leader__rule,
  .js.is-ready .leader.in .leader__rule { transform: none !important; transition: none !important; }
  .reel__rail i { transition: none !important; }
}

/* =============================================================================
   LEAK AUDIT PAGE (audit.html)
   A light page like index.html, but the whole middle of it is one instrument:
   a nine-question stepper that becomes the Leak Map. Mobile first, 44px+ tap
   targets everywhere, and nothing here moves under prefers-reduced-motion.
   Status colour is never the only cue: every bar and pill carries a word.
   ========================================================================== */
body[data-page="audit"] { background: var(--bg); }

/* ---- Header, audit page only -------------------------------------------- *
   The ads that point at this page all promise "no call required" and are all
   signed Applied Intelligence. So on THIS page the header shows the full
   wordmark at every width (the compact "AISA" appears in no creative and reads
   as a different company), and it carries no booking button at all. Every rule
   here is scoped to body[data-page="audit"], so index, work, terms and privacy
   keep the shared nav exactly as it was.
   ------------------------------------------------------------------------- */
/* the quiet fact that replaces the CTA: never a button, desktop only */
body[data-page="audit"] .nav__note {
  margin-left: 1.4rem; flex: none;
  font-size: .9rem; font-weight: 600; color: var(--ink-2);
  white-space: nowrap;
}
@media (max-width: 960px) {
  /* the nav links are already hidden at this width, so the brand is alone on
     the bar and there is room for the real name. Type and mark step down a
     little so the lockup still clears the 44px row on a 320px screen. */
  body[data-page="audit"] .nav__brand .brand-word { display: inline; font-size: 1.06rem; }
  body[data-page="audit"] .nav__brand .brand-mark { width: 30px; height: 30px; }
  /* below the fold the same words sit in .audit-meta, so the header keeps only
     the name rather than crowding it */
  body[data-page="audit"] .nav__note { display: none; }
}
@media (max-width: 360px) {
  body[data-page="audit"] .nav__brand .brand-word { font-size: .98rem; letter-spacing: -0.04em; }
}
/* One focused reading column for the whole page: hero, instrument, map and
   method all share a single left rail. Narrowing .audit-hero__inner instead
   would centre that one .wrap on its own and break the rail. */
.audit .wrap { max-width: 900px; }

/* ---- Hero ---------------------------------------------------------------- */
.audit-hero {
  padding-top: clamp(6.5rem, 13vh, 8.5rem);
  padding-bottom: clamp(1.6rem, 4vw, 2.6rem);
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--bg) 78%);
}
.audit-hero__title {
  margin-top: .4rem;
  font-size: clamp(2.05rem, 5.4vw, 3.5rem);
  letter-spacing: -0.035em;
  max-width: 18ch;
}
.audit-hero__sub {
  margin-top: 1.2rem; max-width: 56ch;
  font-size: clamp(1.04rem, 1.6vw, 1.2rem); color: var(--muted); line-height: 1.55;
}
/* the effort / time / payoff cues, as three quiet facts */
.audit-meta {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: 1.5rem;
}
.audit-meta li {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .42rem .85rem; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--line);
  font-size: .86rem; font-weight: 700; color: var(--ink-2);
}
.audit-meta li::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
}
.audit-hero__note {
  margin-top: 1.2rem; max-width: 62ch;
  font-size: .92rem; line-height: 1.55; color: var(--muted-2); font-weight: 600;
}
.audit-noscript {
  margin-top: 1rem; padding: 1.1rem 1.3rem; border-radius: var(--radius);
  background: var(--bg-soft); border: 1px solid var(--line); color: var(--ink-2);
}
.audit-noscript a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---- The stage ----------------------------------------------------------- */
.audit-stage { padding-bottom: clamp(2.5rem, 6vw, 4rem); }
/* reserved so the page does not jump when the module paints */
.audit-stage__mount { min-height: 520px; }

/* ---- The instrument panel ------------------------------------------------ */
.audit-panel {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: clamp(1.2rem, 3.5vw, 2rem);
}

/* progress rail */
.audit-rail__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.audit-rail__count {
  font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-ink);
}
.audit-back {
  display: inline-flex; align-items: center; gap: .3rem;
  min-height: 44px; padding: 0 .7rem; margin-right: -.7rem;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: .9rem; font-weight: 700; color: var(--muted);
}
.audit-back:hover { color: var(--accent-ink); }
.audit-back[hidden] { display: none; }
.audit-back__arrow { font-size: 1.05rem; line-height: 1; }
.audit-rail__track {
  margin-top: .7rem; height: 5px; border-radius: 999px;
  background: var(--accent-soft); overflow: hidden;
}
.audit-rail__track > i {
  display: block; height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-ink));
  transition: width .45s cubic-bezier(.22,.61,.36,1);
}

/* ---- The live leak counter ---------------------------------------------- */
.audit-meter {
  display: grid; grid-template-rows: 0fr;
  opacity: 0; margin-bottom: 0;
  transition: grid-template-rows .45s cubic-bezier(.22,.61,.36,1),
              opacity .35s ease, margin-bottom .45s ease;
}
.audit-meter__clip { overflow: hidden; min-height: 0; }
.audit-meter.is-live { grid-template-rows: 1fr; opacity: 1; margin-bottom: .2rem; }
.audit-meter__box {
  margin-top: 1.4rem;
  padding: 1.15rem clamp(1rem, 3vw, 1.5rem);
  border-radius: var(--radius);
  background: var(--bg-ink); color: #fff;
  box-shadow: var(--shadow-md);
}
.audit-meter__label {
  display: block; font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55);
}
.audit-meter__fig {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5rem;
  margin-top: .25rem;
  font-size: clamp(1.45rem, 6.2vw, 2.3rem); font-weight: 800; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: #fff;
}
.audit-meter__fig .num { white-space: nowrap; color: #4ade80; }
.audit-meter__fig .sep { color: rgba(255,255,255,.45); font-weight: 600; }
/* zeroed instrument: one $0, not "$0 – $0" */
.audit-meter__fig.is-zero .sep,
.audit-meter__fig.is-zero .num:last-child { display: none; }
.audit-meter__sub { display: block; margin-top: .45rem; font-size: .8rem; color: rgba(255,255,255,.62); }
.audit-meter__hint { display: block; margin-top: .2rem; font-size: .8rem; color: rgba(255,255,255,.45); }

/* ---- The question -------------------------------------------------------- */
.audit-q { margin-top: 1.6rem; overflow: hidden; transition: height .34s cubic-bezier(.22,.61,.36,1); }
.audit-qi { transition: opacity .24s ease, transform .24s ease; }
.audit-qi.is-enter { opacity: 0; transform: translateY(10px); }
.audit-qi.is-leave { opacity: 0; transform: translateY(-8px); }
/* Section moment: a light label, and the run's one intro line the first time
   you land in it. Deliberately not a heavy divider and not an extra screen. */
.audit-sec { margin-bottom: .85rem; }
.audit-sec__label {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-ink);
}
.audit-sec__label::before {
  content: ""; width: 16px; height: 2px; border-radius: 2px; background: var(--accent);
  transition: width .4s cubic-bezier(.22,.61,.36,1);
}
.audit-sec.is-fresh .audit-sec__label::before { width: 28px; }
.audit-sec__intro {
  margin-top: .3rem; font-size: .95rem; line-height: 1.5; color: var(--muted); max-width: 52ch;
}
.audit-qi__title {
  font-size: clamp(1.35rem, 3.4vw, 1.95rem); letter-spacing: -.025em; max-width: 22ch;
}
.audit-qi__title:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 6px; border-radius: 8px; }
.audit-qi__help { margin-top: .55rem; font-size: .95rem; color: var(--muted); }

/* answer chips: big, honest tap targets */
.audit-opts { margin-top: 1.35rem; display: flex; flex-direction: column; gap: .55rem; }
.qopt {
  display: flex; align-items: center; gap: .8rem; width: 100%;
  min-height: 56px; padding: .75rem 1.1rem;
  text-align: left; cursor: pointer;
  background: var(--bg); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 14px;
  font-family: inherit; font-size: 1.02rem; font-weight: 600; line-height: 1.35;
  transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.qopt:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 55%, var(--bg)); }
.qopt:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; }
.qopt:active { transform: scale(.995); }
.qopt__tick {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--line); background: var(--bg);
  transition: border-color .16s ease, background .16s ease;
}
.qopt.is-on {
  border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); font-weight: 700;
  box-shadow: 0 6px 18px rgba(47,107,255,.14);
}
.qopt.is-on .qopt__tick {
  border-color: var(--accent-ink);
  background: var(--accent-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ===========================================================================
   THE LEAK MAP
   ========================================================================= */
.leakmap { max-width: 100%; }
.leakmap__head {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--line);
}
.leakmap__kicker {
  font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-ink);
}
.leakmap__doc { font-size: .85rem; color: var(--muted-2); font-weight: 600; }
.leakmap__keep {
  margin-left: auto;
  font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--green); background: var(--green-soft);
  padding: .28rem .7rem; border-radius: 999px;
}

/* the sting: always visible, never blurred */
.leakmap__sting {
  margin-top: 1.6rem; padding: clamp(1.4rem, 4vw, 2.2rem);
  border-radius: var(--radius-lg);
  background: var(--bg-ink); color: #fff; box-shadow: var(--shadow-lg);
}
.leakmap__lead { font-size: .95rem; font-weight: 700; color: rgba(255,255,255,.62); }
.leakmap__big {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .6rem;
  margin-top: .35rem;
  font-size: clamp(1.85rem, 8.2vw, 3.4rem); font-weight: 800; letter-spacing: -.04em;
  line-height: 1.05; font-variant-numeric: tabular-nums; color: #fff;
}
.leakmap__big .num { white-space: nowrap; color: #4ade80; }
.leakmap__big .sep { color: rgba(255,255,255,.4); font-weight: 600; }
.leakmap__big--words { color: #4ade80; max-width: 16ch; }
.leakmap__per {
  display: block; margin-top: .3rem;
  font-size: 1.05rem; font-weight: 700; color: rgba(255,255,255,.75);
}
.leakmap__weekly { margin-top: 1rem; font-size: 1rem; color: rgba(255,255,255,.82); max-width: 48ch; }
.leakmap__fine {
  margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.13);
  font-size: .84rem; line-height: 1.5; color: rgba(255,255,255,.62); max-width: 60ch;
}

/* the thank-you / error slot */
.leakmap__flash:empty { display: none; }
.audit-flash {
  margin-top: 1.4rem; padding: clamp(1.2rem, 3.5vw, 1.8rem);
  border-radius: var(--radius-lg);
  background: var(--green-soft); border: 1px solid color-mix(in srgb, var(--green) 26%, transparent);
}
.audit-flash:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; }
.audit-flash--warn {
  background: color-mix(in srgb, var(--tone-amber) 9%, var(--bg-soft));
  border-color: color-mix(in srgb, var(--tone-amber) 30%, transparent);
}
.audit-flash__title { display: block; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.audit-flash__body { margin-top: .5rem; font-size: 1rem; color: var(--ink-2); max-width: 58ch; }
/* The call stays the primary act; the download sits beside it, never above. */
.audit-flash__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem;
  margin-top: 1.2rem;
}
.audit-flash__cta { margin-top: 0; }
.audit-pdf { display: flex; align-items: center; min-height: 54px; }
.audit-pdf__prep {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .92rem; font-weight: 600; color: var(--muted);
}
.audit-pdf__spin {
  flex: none; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-top-color: var(--accent-ink);
  animation: audit-spin .8s linear infinite;
}
@keyframes audit-spin { to { transform: rotate(360deg); } }
.audit-pdf__btn { background: var(--bg); }
.audit-pdf__fail {
  font-size: .9rem; line-height: 1.5; font-weight: 600; color: var(--muted-2); max-width: 46ch;
}
.audit-flash__note { margin-top: .85rem; font-size: .93rem; color: var(--muted); max-width: 56ch; }
.audit-flash__alt { margin-top: .5rem; font-size: .9rem; font-weight: 600; color: var(--muted-2); }
.audit-flash__scarcity { margin-top: .9rem; font-size: .85rem; font-weight: 700; color: var(--ink-2); }
.audit-flash__mail {
  display: inline-block; margin-top: .8rem; font-weight: 700;
  color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px;
}

/* ---- optional preferred-call-time row (thank-you screen only) -------------
   A quiet extra under the call, never a second form: it reuses the enquiry
   box's chip language wholesale (.chip-row__label / .chip-row__chips /
   .chip-toggle) so it reads as the same offer, and sits on its own hairline so
   it reads as an aside rather than as another thing to do. */
.audit-times {
  margin-top: 1.15rem; padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--green) 24%, transparent);
}
.audit-times__label { margin-bottom: .55rem; font-size: .9rem; max-width: 46ch; }
/* the row sits on the green flash panel, so the chips need their own surface */
.audit-times .chip-toggle { background: var(--bg); }
.audit-times__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .9rem; margin-top: .85rem;
}
.audit-times__btn { min-height: 44px; padding: 0 1.3rem; background: var(--bg); }
.audit-times__btn[disabled] { opacity: .5; cursor: default; }
.audit-times__btn[disabled]:hover { border-color: var(--line); transform: none; }
.audit-times__note { font-size: .86rem; font-weight: 600; color: var(--muted-2); }
.audit-times__ok {
  font-size: .96rem; font-weight: 700; line-height: 1.5; color: var(--green); max-width: 46ch;
}
.audit-times__ok:empty { display: none; }

/* ---- the gated breakdown ------------------------------------------------- */
.leakmap__lockwrap { position: relative; margin-top: 2rem; }
.leakmap__lockwrap.is-locked { min-height: 760px; }
.leakmap__body.is-locked {
  max-height: 720px; overflow: hidden;
  filter: blur(7px); pointer-events: none; user-select: none; -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(180deg, #000 52%, rgba(0,0,0,.35) 86%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 52%, rgba(0,0,0,.35) 86%, transparent 100%);
}
.leakmap__h {
  font-size: clamp(1.25rem, 2.6vw, 1.6rem); letter-spacing: -.02em;
  margin-top: 2.2rem;
}
.leakmap__h:first-child { margin-top: 0; }

/* five channel rows */
.leak-rows { margin-top: 1.2rem; display: flex; flex-direction: column; gap: .9rem; }
.leak-row {
  padding: 1.1rem clamp(1rem, 3vw, 1.4rem);
  border: 1px solid var(--line); border-left: 4px solid var(--st);
  border-radius: var(--radius-sm); background: var(--bg);
  --st: var(--muted-2); --st-ink: var(--muted-2); --st-bg: var(--bg-soft);
}
.leak-row[data-status="critical"] { --st: #e0533d; --st-ink: #b42318; --st-bg: color-mix(in srgb, #e0533d 12%, #fff); }
.leak-row[data-status="high"]     { --st: var(--tone-amber); --st-ink: #8a5300; --st-bg: color-mix(in srgb, var(--tone-amber) 14%, #fff); }
.leak-row[data-status="medium"]   { --st: var(--accent); --st-ink: var(--accent-ink); --st-bg: var(--accent-soft); }
.leak-row[data-status="ok"]       { --st: var(--green); --st-ink: #15803d; --st-bg: var(--green-soft); }
.leak-row__head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.leak-row__name { font-size: 1.12rem; font-weight: 800; letter-spacing: -.015em; }
.leak-row__pills { flex: none; display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
/* "Estimated": this channel rode on our assumption, not their number */
.leak-row__est {
  font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted-2); background: var(--bg-soft);
  border: 1px dashed var(--line); padding: .22rem .6rem; border-radius: 999px;
}
.leak-row__pill {
  flex: none; font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--st-ink); background: var(--st-bg);
  padding: .28rem .65rem; border-radius: 999px;
}
.leak-row__worker { margin-top: .2rem; font-size: .85rem; color: var(--muted-2); font-weight: 600; }
.leak-row__wname { font-weight: 800; color: var(--ink-2); }
.leak-row__track {
  margin-top: .8rem; height: 8px; border-radius: 999px;
  background: var(--bg-soft); overflow: hidden;
}
.leak-row__track > i {
  display: block; height: 100%; width: 0%; border-radius: 999px;
  background: var(--st);
  transition: width .85s cubic-bezier(.22,.61,.36,1);
}
.leak-row__fig {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .4rem;
  margin-top: .7rem;
  font-size: clamp(1.05rem, 3.4vw, 1.35rem); font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.leak-row__fig .num { white-space: nowrap; }
.leak-row__fig .sep { color: var(--muted-2); font-weight: 600; }
.leak-row__per { font-size: .88rem; font-weight: 700; color: var(--muted-2); }
.leak-row__nofig {
  margin-top: .7rem; font-size: .95rem; font-weight: 700; color: var(--ink-2);
  line-height: 1.5; max-width: 58ch;
}
/* their own words, quoted back, sitting above our read of them */
.leak-row__echo {
  margin-top: .8rem; padding: .6rem .85rem;
  border-left: 3px solid color-mix(in srgb, var(--st) 55%, var(--line));
  border-radius: 0 8px 8px 0; background: var(--bg-soft);
  font-size: .93rem; line-height: 1.55; color: var(--ink-2); max-width: 62ch;
}
.leak-row__echo-lead { font-weight: 800; color: var(--ink); }
.leak-row__note { margin-top: .5rem; font-size: .93rem; line-height: 1.55; color: var(--muted); max-width: 62ch; }
/* server-only sourced comparison; quiet, italic, clearly a different voice */
.leak-row__bench {
  margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed var(--line);
  font-size: .86rem; line-height: 1.5; font-style: italic; color: var(--muted-2); max-width: 62ch;
}

/* "The maths": always open on every priced card — the worked arithmetic from
   THEIR answers to THEIR number is the pain, so it never hides behind a tap.
   Ledger-panel treatment mirroring the PDF: soft fill, defined edge, small-caps
   label. Server-built strings only, so it never appears on the pre-gate map. */
.leak-maths {
  display: block; margin-top: .95rem;
  padding: .85rem 1rem .95rem;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 10px);
}
.leak-maths__label {
  display: block; margin-bottom: .4rem;
  font-size: .72rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink);
}
.leak-maths__text {
  font-size: .92rem; line-height: 1.62; color: var(--ink-2); max-width: 66ch;
  font-variant-numeric: tabular-nums;
}

/* start here */
.startbox {
  display: flex; align-items: center; gap: 1.3rem;
  margin-top: 2.2rem; padding: clamp(1.3rem, 3.5vw, 1.9rem);
  border-radius: var(--radius-lg);
  background: var(--bg-ink); color: #fff; box-shadow: var(--shadow-lg);
}
.startbox__seal {
  flex: none; width: 78px; height: 78px; border-radius: 50%;
  display: grid; place-content: center; text-align: center;
  background: radial-gradient(120% 120% at 50% 20%, color-mix(in srgb, var(--accent) 85%, #fff), var(--accent));
  box-shadow: 0 10px 26px rgba(47,107,255,.42), inset 0 0 0 1px rgba(255,255,255,.35);
}
.startbox__seal b { font-size: 1.9rem; font-weight: 800; line-height: 1; color: #fff; }
.startbox__seal span {
  display: block; margin-top: .1rem; font-size: .58rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.88);
}
.startbox__body { flex: 1; min-width: 0; }
.startbox__badge {
  display: inline-block; font-size: .74rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: #9db8ff;
}
.startbox__who { margin-top: .3rem; font-size: .92rem; color: rgba(255,255,255,.7); font-weight: 600; }
.startbox__wname { font-size: 1.25rem; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.startbox__line { margin-top: .6rem; font-size: 1.02rem; line-height: 1.55; color: rgba(255,255,255,.86); max-width: 60ch; }

/* the twelve-week order */
.roadmap { margin-top: 1.2rem; display: flex; flex-direction: column; gap: .9rem; }
.roadmap__item {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1rem clamp(.9rem, 3vw, 1.3rem);
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-soft);
}
.roadmap__weeks {
  flex: none; min-width: 7.6rem;
  font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-ink); padding-top: .2rem;
}
.roadmap__body { min-width: 0; }
.roadmap__who { font-size: .86rem; color: var(--muted-2); font-weight: 600; }
.roadmap__wname { font-size: 1.02rem; font-weight: 800; color: var(--ink); }
.roadmap__action { margin-top: .3rem; font-size: .96rem; line-height: 1.55; color: var(--ink-2); max-width: 60ch; }
.leakmap__chain {
  margin-top: 1.8rem; padding: 1.1rem 1.3rem;
  border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--accent-soft);
  font-size: 1rem; line-height: 1.6; color: var(--ink-2); max-width: 66ch;
}

/* ---- the capture card ---------------------------------------------------- */
.leakmap__gate {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem 0;
}
.gate__card {
  width: 100%; max-width: 440px;
  padding: clamp(1.4rem, 4vw, 2rem);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.97);
  border: 1px solid var(--line);
  box-shadow: 0 40px 90px rgba(11,18,32,.22), 0 10px 30px rgba(11,18,32,.12);
  text-align: left;
}
@supports ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .gate__card {
    background: rgba(255,255,255,.9);
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
  }
}
.gate__kicker {
  display: block; font-size: .74rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink);
}
.gate__title { display: block; margin-top: .35rem; font-size: clamp(1.35rem, 3.6vw, 1.7rem); font-weight: 800; letter-spacing: -.025em; }
.gate__sub { margin-top: .6rem; font-size: .96rem; line-height: 1.55; color: var(--muted); }
.gate__list { margin-top: 1rem; gap: .5rem; }
.gate__list li { font-size: .95rem; }
.gate__form { margin-top: 1.3rem; display: flex; flex-direction: column; gap: .75rem; }
.gate__field label span { display: block; font-size: .82rem; font-weight: 700; color: var(--ink-2); margin-bottom: .3rem; }
.gate__field input {
  width: 100%; min-height: 48px; padding: 0 .9rem;
  border: 1px solid var(--line); border-radius: 12px;
  font-family: inherit; font-size: 1rem; background: var(--bg); color: var(--ink);
}
.gate__field input:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 1px; }
/* Optional fields sit at lower visual weight and on a tighter rhythm, so the
   card gains a line without gaining presence. */
.gate__field--soft label span { font-weight: 600; font-size: .78rem; color: var(--muted-2); margin-bottom: .2rem; }
.gate__field--soft input { min-height: 42px; font-size: .95rem; background: var(--bg-soft); }
.gate__field--soft input:focus { background: var(--bg); }
.gate__field input[aria-invalid="true"] { border-color: #b42318; }
.gate__err { display: none; margin-top: .3rem; font-size: .82rem; font-weight: 700; color: #b42318; }
.gate__err.is-on { display: block; }
.gate__btn { width: 100%; margin-top: .2rem; }
.gate__note { font-size: .84rem; font-weight: 600; color: var(--muted-2); text-align: center; line-height: 1.5; }
.gate__msg { text-align: center; font-weight: 700; color: #b42318; }
.gate__msg:empty { display: none; }

/* ---- Method + sources (never gated) -------------------------------------- */
.audit-method {
  padding-block: clamp(2.5rem, 6vw, 4rem);
  background: var(--bg-soft); border-top: 1px solid var(--line);
}
.audit-method__title { font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: -.025em; }
.audit-method__lead { margin-top: .8rem; font-size: 1.02rem; line-height: 1.6; color: var(--muted); max-width: 62ch; }
.audit-method .check-list { max-width: 68ch; }
.audit-method .check-list li { font-size: .98rem; color: var(--ink-2); }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 720px) {
  .startbox { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .roadmap__item { flex-direction: column; gap: .5rem; }
  .roadmap__weeks { padding-top: 0; }
  /* The card is nearly the full width of a phone, so without extra room above
     and below it there is no blurred map left to see, and the gate stops being
     a gate. Give it a taller locked well than the card needs. */
  .leakmap__lockwrap.is-locked { min-height: 900px; }
  .leakmap__body.is-locked { max-height: 880px; }
  .audit-stage__mount { min-height: 560px; }
}
@media (max-width: 420px) {
  .leakmap__head { gap: .4rem .7rem; }
  .leakmap__keep { margin-left: 0; }
  .qopt { font-size: .98rem; padding: .7rem .9rem; }
}

/* ---- Reduced motion: nothing on this page moves -------------------------- */
@media (prefers-reduced-motion: reduce) {
  .audit-rail__track > i,
  .audit-sec__label::before,
  .audit-meter,
  .audit-q,
  .audit-qi,
  .leak-row__track > i { transition: none !important; }
  /* the global rule kills the animation; keep the dot readable as a static ring */
  .audit-pdf__spin { animation: none !important; border-top-color: var(--accent-ink); }
  .audit-qi.is-enter, .audit-qi.is-leave { opacity: 1 !important; transform: none !important; }
  .qopt:active { transform: none; }
  /* the optional times row is an aside on the thank-you screen: it must not
     lift under the cursor when the visitor has asked for stillness */
  .audit-times__btn:hover { transform: none; }
}