/* ---------- self-hosted fonts (merged from fonts.css 13 Aug 2026: one fewer render-blocking request) ---------- */
/* Self-hosted fonts. Downloaded from Google Fonts 17 July 2026 and served from this origin,
   so no visitor data reaches Google before consent. Fonts remain under the SIL Open Font Licence.
   Do not re-point these at fonts.googleapis.com: that would reintroduce a pre-consent third party. */

/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-1.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-3.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;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-1.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-3.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;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-1.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-3.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;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-1.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-3.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;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-1.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-3.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;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/fraunces-4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/fraunces-5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/fraunces-6.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;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/fraunces-7.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/fraunces-8.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/fraunces-9.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;
}
/* latin-ext */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/splinesansmono-10.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/splinesansmono-11.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;
}
/* latin-ext */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/splinesansmono-10.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/splinesansmono-11.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;
}
/* latin-ext */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/splinesansmono-10.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/splinesansmono-11.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;
}

/* Metric-matched fallbacks: fallback text occupies near-identical space, so the
   swap to the real typeface causes no layout shift even when paint beats the font. */
@font-face { font-family: 'Fraunces-fb'; src: local('Georgia'); size-adjust: 86.77%; line-gap-override: 0%; }
@font-face { font-family: 'Archivo-fb'; src: local('Arial'); size-adjust: 98.53%; line-gap-override: 0%; }

/* ============================================================
   RANK MEDIA  ·  BRAND SYSTEM  ·  "THE LEDGER" (Navy Edition)
   Evidence over adjectives. White paper, navy ink, one blue
   highlighter. Fraunces / Archivo / Spline Sans Mono.
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* paper + ink */
  --paper:    #FFFFFF;
  --paper-2:  #F2F6FC;
  --card:     #FFFFFF;

  --ink:      #0A1B33;   /* navy ink: text, buttons          */
  --ink-2:    #3A4A63;
  --ink-3:    #5A6A82;   /* darkened from #6E7E96 on 17 Jul 2026: old value was 4.13:1 on white and 3.81:1 on paper-2, failing WCAG AA for the small mono-note captions it styles. This value is 5.50:1 / 5.07:1. */

  /* the brand colours */
  --navy:     #0B2545;   /* deep panels, case blocks         */
  --navy-2:   #07182F;   /* dark pages, footer               */
  --blue:     #2563EB;   /* action blue: hovers, accents     */
  --mark:     #BFD9FF;   /* the highlighter                  */
  --sky:      #EAF2FF;   /* soft tint                        */
  --up:       #2563EB;   /* deltas, live dots                */
  --gold:     #F5B301;   /* review stars only                */

  --rule:      rgba(10,27,51,.18);
  --rule-soft: rgba(10,27,51,.09);

  --serif: 'Fraunces', 'Fraunces-fb', Georgia, serif;
  --sans: 'Archivo', 'Archivo-fb', Helvetica, Arial, sans-serif;
  --mono:  'Spline Sans Mono', 'Courier New', monospace;

  --wrap: 1200px;
  --gut: clamp(20px, 4vw, 44px);
  --r: 6px;
  --r-lg: 12px;
}

/* ---------- base ---------- */
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink);
  background:
    radial-gradient(110% 70% at 100% 0%, rgba(37,99,235,.06), transparent 55%),
    radial-gradient(90% 70% at 0% 100%, rgba(191,217,255,.12), transparent 55%),
    linear-gradient(180deg, #FFFFFF 0%, #F3F7FF 50%, #EAF1FE 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
/* ledger grid: graph-paper rules with a dot at each intersection */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(rgba(10,27,51,.07) 1px, transparent 1px),
    linear-gradient(to right, rgba(10,27,51,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,27,51,.03) 1px, transparent 1px);
  background-size: 28px 28px;
}
body.theme-dark::before {
  background-image:
    radial-gradient(rgba(191,217,255,.065) 1px, transparent 1px),
    linear-gradient(to right, rgba(191,217,255,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(191,217,255,.035) 1px, transparent 1px);
}
main, header, footer { position: relative; z-index: 1; }

h1, h2, h3 { font-family: var(--serif); font-weight: 560; line-height: 1.04; letter-spacing: -0.022em; color: var(--ink); text-wrap: balance; }
h1 { font-size: clamp(2.8rem, 6.4vw, 5rem); font-variation-settings: "opsz" 144; }
h2 { font-size: clamp(2rem, 3.8vw, 3.1rem);  font-variation-settings: "opsz" 100; }
h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); font-weight: 540; }
h4 { font-family: var(--sans); font-size: 1.02rem; font-weight: 700; }
p  { color: var(--ink-2); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
em { font-family: var(--serif); font-style: italic; }
::selection { background: var(--mark); color: var(--ink); }

.wrap   { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gut); }
.narrow { max-width: 880px; margin-inline: auto; }

/* ---------- type utilities ---------- */
.eyebrow {
  font-family: var(--mono); font-size: .74rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
  display: flex; align-items: center; gap: 14px; margin-bottom: 22px;
}
.eyebrow .idx { color: var(--blue); font-weight: 600; }
.eyebrow::after { content: ""; height: 1px; background: var(--rule); flex: 0 0 64px; }
.eyebrow.center { justify-content: center; }
.eyebrow.center::before { content: ""; height: 1px; background: var(--rule); flex: 0 0 64px; }

.lede { font-size: clamp(1.08rem, 1.6vw, 1.26rem); line-height: 1.6; color: var(--ink-2); max-width: 56ch; }
.mono-note { font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; color: var(--ink-3); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* the highlighter — covers the full word, not a half-height underline swipe */
.hl {
  background-image: linear-gradient(100deg, var(--mark), var(--mark));
  background-repeat: no-repeat;
  background-size: 100% .94em;
  background-position: 0 72%;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  padding-inline: .12em;
}
.js .hl { background-size: 0% .94em; transition: background-size .9s cubic-bezier(.77,0,.18,1) .35s; }
.js .hl.hl-in, .js .in .hl { background-size: 100% .94em; }

.fl { font-style: italic; font-weight: 460; }
.num, .stat-n, .lrow .lr-meta { font-variant-numeric: tabular-nums; }

.delta { font-family: var(--mono); font-size: .78rem; font-weight: 600; color: var(--up); white-space: nowrap; }
.delta::before { content: "▲ "; font-size: .6rem; }

/* review stars + badge row */
.stars { color: var(--gold); letter-spacing: .12em; font-size: .92rem; }
.badge-row { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin-bottom: 26px; }
.badge-row .bdg {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
}
.badge-row .bdg b { color: var(--ink); font-weight: 600; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-weight: 700; font-size: .95rem; letter-spacing: .01em;
  padding: 16px 28px; border-radius: var(--r);
  background: var(--ink); color: #fff;
  border: 1.5px solid var(--ink); cursor: pointer;
  transition: background .22s, color .22s, border-color .22s, transform .22s, box-shadow .22s;
}
.btn:hover { background: var(--blue); border-color: var(--blue); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(37,99,235,.3); }
.btn .arr { transition: transform .22s; }
.btn:hover .arr { transform: translate(3px,-3px); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: 0 12px 30px rgba(10,27,51,.22); }
.btn-blue { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn-blue:hover { background: var(--ink); border-color: var(--ink); }
.btn-lg { padding: 19px 34px; font-size: 1.02rem; }

/* ---------- masthead + header ---------- */
.masthead {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.85); background: var(--navy-2);
  border-bottom: 2px solid var(--blue);
}
.masthead .wrap { display: flex; justify-content: space-between; gap: 18px; padding-block: 9px; }
.masthead span b { color: #fff; font-weight: 600; }
.masthead a:hover { color: #fff; }
.masthead .mh-r { display: flex; gap: 26px; }
@media (max-width: 720px) { .masthead .mh-r span.hide-s { display: none; } }

.header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255,255,255,.94); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule-soft);
}
.header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 26px; padding-block: 16px; }

.logo { font-family: var(--serif); font-size: 1.55rem; font-weight: 600; letter-spacing: -.02em; color: var(--ink); display: inline-flex; align-items: baseline; }
.logo i { font-style: normal; color: transparent; -webkit-text-stroke: 1.2px var(--ink); }
.logo .dot { width: .26em; height: .26em; background: var(--blue); border: 1.5px solid var(--ink); border-radius: 50%; display: inline-block; margin-left: .14em; }

.nav { display: flex; align-items: center; gap: 30px; }
.nav > a, .nav .nd > button {
  font-size: .94rem; font-weight: 600; color: var(--ink-2);
  background: none; border: none; cursor: pointer; font-family: var(--sans);
  display: inline-flex; align-items: center; gap: 6px; padding: 0;
}
.nav > a:hover, .nav .nd > button:hover { color: var(--blue); }
.nav > a.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--blue); }

.nd { position: relative; }
.nd-menu {
  position: absolute; top: calc(100% + 16px); left: 50%; transform: translate(-50%, 6px);
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgba(10,27,51,.16);
  min-width: 250px; padding: 10px; opacity: 0; visibility: hidden; transition: .22s;
}
.nd-menu.cols { min-width: 540px; display: grid; grid-template-columns: 1fr 1fr; }
.nd:hover .nd-menu, .nd:focus-within .nd-menu, .nd.open .nd-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nd-menu a { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 10px 14px; border-radius: 6px; font-size: .92rem; font-weight: 600; color: var(--ink-2); }
.nd-menu a small { font-family: var(--mono); font-size: .66rem; color: var(--ink-3); letter-spacing: .06em; }
.nd-menu a:hover { background: var(--navy); color: #fff; }
.nd-menu a:hover small { color: var(--mark); }
.nd-menu a.on { background: var(--paper-2); color: var(--ink); box-shadow: inset 3px 0 0 var(--blue); }
.nd-menu a.on small { color: var(--blue); }
.nd-menu .nd-all { border-top: 1px dashed var(--rule); margin-top: 6px; color: var(--ink); }
.caret { width: 9px; height: 9px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); }

.nav-cta { margin-left: 6px; }
.burger { display: none; background: none; border: 1.5px solid var(--ink); border-radius: var(--r); padding: 9px 12px; cursor: pointer; font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }

.m-nav { display: none; background: var(--paper); border-bottom: 1px solid var(--rule); }
.m-nav.open { display: block; }
.m-nav .wrap { padding-block: 18px 26px; display: grid; gap: 4px; }
.m-nav a { padding: 11px 4px; font-weight: 600; border-bottom: 1px solid var(--rule-soft); display: flex; justify-content: space-between; }
.m-nav .m-group { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); padding-top: 18px; }
.m-nav .m-ind { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 1080px) {
  .nav { display: none; }
  .burger { display: block; }
}

/* ---------- hero ---------- */
.hero { padding: clamp(64px, 9vw, 118px) 0 clamp(50px, 7vw, 92px); border-bottom: 1px solid var(--rule); position: relative; overflow: hidden; }
.hero::after {
  content: ""; position: absolute; top: -28vh; right: -22%; width: 70%; height: 115vh; /* vh not %, so late hero-height changes cannot shift this (was the whole mobile CLS) */
  background: radial-gradient(closest-side, var(--sky), transparent 72%);
  pointer-events: none; z-index: -1;
}
/* aurora blobs (homepage + interior page heroes) */
.hero .aurora, .page-hero .aurora { position: absolute; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.aurora i {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5;
  animation: aur 18s ease-in-out infinite alternate;
}
.aurora i:nth-child(1) { width: 480px; height: 480px; right: -120px; top: -140px; background: radial-gradient(circle, rgba(37,99,235,.35), transparent 65%); }
.aurora i:nth-child(2) { width: 380px; height: 380px; right: 18%; top: clamp(320px, 55vh, 620px); background: radial-gradient(circle, rgba(191,217,255,.8), transparent 65%); animation-delay: -6s; animation-duration: 22s; }
.aurora i:nth-child(3) { width: 300px; height: 300px; left: -120px; top: 22vh; background: radial-gradient(circle, rgba(96,165,250,.3), transparent 65%); animation-delay: -12s; }
.theme-dark .aurora i:nth-child(2) { background: radial-gradient(circle, rgba(37,99,235,.45), transparent 65%); }
@keyframes aur {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(-60px, 40px) scale(1.15); }
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.hero h1 { margin: 0 0 24px; max-width: 13ch; }
.hero .lede { margin-bottom: 34px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-foot { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 10px 28px; border-top: 1px solid var(--rule-soft); padding-top: 22px; }
.hero-foot span { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; color: var(--ink-3); }
.hero-foot b { color: var(--ink); font-weight: 600; }
.proof-line { font-family: var(--mono); font-size: .74rem; letter-spacing: .05em; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin-bottom: 18px; }
.proof-line b { color: var(--ink); font-weight: 700; }
.proof-line .pl-i { color: var(--blue); }
.proof-line .pl-pair { white-space: nowrap; } /* keep each stat glued to its label when the line wraps on mobile */
@media (max-width: 560px) { .proof-line .pl-x { display: none; } }
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; } .hero h1 { max-width: 17ch; } }

/* word-by-word headline reveal */
.js .split-w .w { display: inline-block; opacity: 0; transform: translateY(.28em); }
.js .split-w.in .w { animation: wup .45s cubic-bezier(.2,.65,.2,1) forwards; animation-delay: calc(var(--wi) * 50ms); }
@keyframes wup { to { opacity: 1; transform: none; } }

/* hero visual composition: viz panel + ledger card + floating chips */
.hero-vis { position: relative; }
.hero-vis .ph { position: absolute; inset: -44px -6% 122px 14%; z-index: 0; transform: rotate(2deg); } /* top in px: container-height changes must not move the panel (CLS) */
.hero-vis .lcard { position: relative; z-index: 2; margin-top: 12%; }
.float-chip {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--rule); border-radius: 999px;
  box-shadow: 0 14px 34px rgba(10,27,51,.18);
  font-family: var(--mono); font-size: .68rem; font-weight: 600; letter-spacing: .04em; color: var(--ink);
  padding: 10px 15px; white-space: nowrap;
  animation: floaty 6s ease-in-out infinite;
}
.float-chip .delta { font-size: .68rem; }
.float-chip.fc1 { top: -14px; right: 4%; animation-delay: -1s; }
.float-chip.fc2 { top: 136px; left: -4%; animation-delay: -3s; }
.float-chip.fc3 { bottom: -4%; right: 12%; animation-delay: -5s; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (max-width: 940px) {
  .hero-vis .ph { inset: -36px 0 180px 6%; }
  .float-chip.fc2 { left: 0; }
}
@media (max-width: 700px) {
  /* fc2/fc3 land on top of the ledger card at phone widths, attaching the wrong
     client's figure to the card. One chip is decoration enough on mobile. */
  .float-chip.fc2, .float-chip.fc3 { display: none; }
}

.page-hero { padding: clamp(52px, 7vw, 96px) 0 clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--rule); position: relative; overflow: hidden; }
.page-hero::after {
  content: ""; position: absolute; top: -30vh; right: -25%; width: 65%; height: 110vh;
  background: radial-gradient(closest-side, var(--sky), transparent 72%);
  pointer-events: none; z-index: -1;
}
.page-hero h1 { max-width: 26ch; margin-bottom: 22px; }
.page-hero .lede { margin-bottom: 30px; }

/* ---------- visual panels (animated, photo-swappable) ---------- */
.ph {
  position: relative; width: 100%; overflow: hidden;
  background: var(--navy-2);
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  isolation: isolate;
}
.ph .viz { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ph .viz::before {
  content: ""; position: absolute; inset: -28%;
  background:
    radial-gradient(38% 50% at 28% 30%, rgba(37,99,235,.95), transparent 60%),
    radial-gradient(42% 55% at 76% 66%, rgba(96,165,250,.72), transparent 64%),
    radial-gradient(34% 46% at 62% 20%, rgba(191,217,255,.58), transparent 60%),
    radial-gradient(55% 65% at 45% 92%, rgba(6,19,40,.96), transparent 72%);
  filter: blur(34px) saturate(1.3);
  animation: vizdrift 16s ease-in-out infinite alternate;
}
.ph .viz::after {
  content: ""; position: absolute; inset: -35%;
  background: conic-gradient(from 0deg, transparent 0 42%, rgba(255,255,255,.13) 50%, transparent 58% 100%);
  mix-blend-mode: screen; animation: spin 18s linear infinite;
}
@keyframes vizdrift {
  0%   { transform: translate(0,0) rotate(0deg) scale(1); }
  50%  { transform: translate(4%, -3%) rotate(4deg) scale(1.08); }
  100% { transform: translate(-4%, 3%) rotate(-3deg) scale(1.04); }
}
.ph::before { /* fine grain */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.ph::after { /* depth grid */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(82% 82% at 50% 45%, #000 30%, transparent 100%);
}
.ph-169 { aspect-ratio: 16 / 9; }
.ph-43 { aspect-ratio: 4 / 3; }
.ph-sq { aspect-ratio: 1; }
.ph-port { aspect-ratio: 4 / 5; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 2; }
.ph img.ph-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }

.media-band { padding-block: 0; }
.media-band .ph { box-shadow: 0 30px 70px rgba(10,27,51,.28); }

/* decorative glows never block clicks */
.cta-strip::before, .cta-final::before, .underdog::before, .mini-cta::before, .hero::after { pointer-events: none; }

/* ---------- tech stack marquee ---------- */
.logo-strip { border-block: 1px solid var(--rule); background: var(--card); padding: 20px 0; overflow: hidden; position: relative; }
.ls-seg { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--blue); font-weight: 700; padding-inline: 8px; }
.ls-seg::before { content: ""; width: 26px; height: 1px; background: var(--blue); opacity: .45; }
.logo-strip .ls-label {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
  text-align: center; display: block; margin-bottom: 16px;
}
.ls-track {
  display: flex; align-items: center; gap: 14px; width: max-content;
  animation: tick 38s linear infinite; padding-inline: 7px;
}
.logo-strip:hover .ls-track { animation-play-state: paused; }
.lchip {
  font-family: var(--sans); font-weight: 700; font-size: .84rem; color: var(--ink-2);
  border: 1px solid var(--rule); border-radius: 999px; padding: 10px 18px; background: var(--paper);
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  transition: border-color .2s, color .2s, transform .2s;
}
.lchip:hover { border-color: var(--blue); color: var(--ink); transform: translateY(-2px); }
.lchip .gdot { width: 9px; height: 9px; border-radius: 50%; background: conic-gradient(#4285F4 0 25%, #EA4335 0 50%, #FBBC05 0 75%, #34A853 0); }
.lchip .mdot { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.18); }
.gp-badge {
  display: inline-flex; flex-direction: column; gap: 2px; align-items: flex-start;
  border: 1.5px solid var(--navy); border-radius: var(--r); padding: 9px 16px; background: #fff; white-space: nowrap;
}
.gp-badge b { font-size: .88rem; font-weight: 800; color: var(--ink); }
.gp-badge span { font-family: var(--mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- ledger card (hero proof) ---------- */
.lcard {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg);
  box-shadow: 0 26px 70px rgba(10,27,51,.14), 0 2px 0 var(--navy);
  padding: 26px 26px 18px; position: relative;
}
.lcard::before {
  content: ""; position: absolute; inset: 8px; pointer-events: none;
  border: 1px dashed var(--rule-soft); border-radius: 6px;
}
.lcard-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 14px; border-bottom: 1.5px solid var(--navy); margin-bottom: 4px; }
.lcard-head .t { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; }
.lcard-head .live { font-family: var(--mono); font-size: .64rem; color: var(--blue); letter-spacing: .1em; }
.lcard-head .live::before { content: "● "; animation: pulse 2.4s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.lrow { display: flex; align-items: baseline; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--rule-soft); }
.lrow:last-of-type { border-bottom: none; }
.lrow .lr-k { font-size: .9rem; color: var(--ink-2); font-weight: 500; }
.lrow .lr-dots { flex: 1; border-bottom: 2px dotted var(--rule); transform: translateY(-4px); }
.lrow .lr-v { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.lcard-foot { padding-top: 12px; border-top: 1.5px solid var(--navy); margin-top: 4px; }

/* ---------- sections ---------- */
.sec { padding: clamp(64px, 9vw, 116px) 0; }
.sec-rule { border-top: 1px solid var(--rule); }
.sec-tint { background: var(--paper-2); border-block: 1px solid var(--rule); }
.sec-head { margin-bottom: clamp(36px, 5vw, 60px); display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 20px 40px; align-items: end; }
.sec-head h2 { max-width: 34ch; }
.sec-head .lede { grid-column: 1; max-width: 60ch; margin-top: 16px; }
@media (max-width: 760px) { .sec-head { grid-template-columns: 1fr; } }

/* ---------- service cards ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.svc {
  background: var(--card); border: 1px solid var(--rule); border-top: 3px solid var(--navy); border-radius: var(--r-lg);
  padding: 30px 28px 26px; display: flex; flex-direction: column; gap: 16px;
  transition: transform .26s, box-shadow .26s, border-color .26s; position: relative; overflow: hidden;
}
.svc:hover { transform: translateY(-5px); box-shadow: 0 24px 56px rgba(10,27,51,.14); border-top-color: var(--blue); }
.svc .s-idx { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; color: var(--ink-3); display: flex; justify-content: space-between; }
.svc .s-idx em { font-style: normal; color: var(--blue); }
.svc h3 { font-size: 1.6rem; }
.svc p { font-size: .96rem; }
.svc .s-rows { border-top: 1.5px solid var(--navy); margin-top: 4px; }
.svc .s-rows li { display: flex; gap: 8px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--rule-soft); font-size: .9rem; color: var(--ink-2); }
.svc .s-rows li::before { content: "→"; font-family: var(--mono); color: var(--blue); font-size: .8rem; }
.svc .s-cta { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 14px; }
.svc .s-price { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; color: var(--ink-3); }
.svc .s-price b { color: var(--ink); font-size: .86rem; }
.svc .s-link { font-weight: 700; font-size: .94rem; }
.svc .s-link:hover { box-shadow: inset 0 -2px 0 var(--blue); color: var(--blue); }
@media (max-width: 940px) { .svc-grid { grid-template-columns: 1fr; } }

/* ---------- THE INDUSTRY LEDGER ---------- */
.ledger { border-top: 2px solid var(--navy); }
.lgr {
  display: grid; grid-template-columns: 64px minmax(0,1fr) auto auto 56px;
  align-items: center; gap: 18px; padding: 20px 10px;
  border-bottom: 1px solid var(--rule); position: relative;
  transition: background .22s, color .22s; color: var(--ink);
}
.lgr .g-n   { font-family: var(--mono); font-size: .78rem; color: var(--ink-3); }
.lgr .g-t   { font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 560; letter-spacing: -.015em; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lgr .g-m   { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; color: var(--ink-3); text-align: right; }
.lgr .g-tag {
  font-family: var(--mono); font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  background: var(--mark); border: 1.2px solid var(--navy); padding: 4px 10px; border-radius: 999px; color: var(--navy);
  transform: rotate(-2deg);
}
.lgr .g-a   { justify-self: end; font-family: var(--mono); font-size: 1.1rem; transition: transform .22s; }
.lgr:hover  { background: var(--navy); color: #fff; }
.lgr:hover .g-n, .lgr:hover .g-m { color: rgba(255,255,255,.6); }
.lgr:hover .g-a { color: var(--mark); transform: translateX(6px); }
.lgr:hover .g-t { color: #fff; }
@media (max-width: 820px) {
  .lgr { grid-template-columns: 44px minmax(0,1fr) 34px; }
  .lgr .g-m { display: none; }
}
.lgr-more { padding: 26px 10px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; border-bottom: 1px solid var(--rule); }

/* rotating hero case cards */
.lcard-stack .lcard { transition: opacity .45s ease; }
.lcard-stack .lcard.off { display: none; }
.lcard-stack .lcard.fading { opacity: 0; }

/* A-Z industry filter */
.az-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 28px; }
.az-bar button { font-family: var(--mono); font-size: .74rem; font-weight: 700; letter-spacing: .04em; min-width: 36px; padding: 9px 11px; border: 1px solid var(--rule); border-radius: 6px; background: var(--card); color: var(--ink-2); cursor: pointer; transition: border-color .18s, color .18s, background .18s; }
.az-bar button:hover:not(:disabled):not(.on) { border-color: var(--blue); color: var(--blue); }
.az-bar button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.az-bar button:disabled { opacity: .3; cursor: default; }
.lgr-x, .lgr-x:hover { background: transparent; cursor: default; }
.lgr-x:hover .g-t { color: var(--ink); }
.lgr-x:hover .g-n, .lgr-x:hover .g-m { color: var(--ink-3); }
.lgr-x .g-t { font-size: clamp(1.1rem, 1.9vw, 1.45rem); }
.lgr.az-hide { display: none; }
.chip { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; padding: 7px 13px; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink-2); background: var(--card); }

/* ---------- stats band ---------- */
/* minmax(0,1fr), not 1fr: grid tracks default to min-width:auto, so the large display
   numerals set a min-content floor and push the grid wider than the page on a phone. */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 2px solid var(--navy); }
.stat { padding: 34px 26px; border-right: 1px solid var(--rule); }
.stat:last-child { border-right: none; }
.stat-n { font-family: var(--serif); font-size: clamp(2.4rem, 4.4vw, 3.6rem); font-weight: 600; letter-spacing: -.03em; line-height: 1; display: flex; align-items: baseline; gap: 6px; color: var(--ink); }
.stat-n sup { font-size: .42em; font-weight: 500; color: var(--blue); }
.stat-l { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-top: 12px; }
@media (max-width: 880px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat:nth-child(2) { border-right: none; } .stat:nth-child(-n+2) { border-bottom: 1px solid var(--rule); } }
@media (max-width: 460px) { .stat { padding: 26px 14px; } }

/* ---------- case study ---------- */
.case { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(30px, 5vw, 70px); align-items: center; }
.case-stat { background: var(--navy); color: rgba(255,255,255,.85); border-radius: var(--r-lg); padding: clamp(30px, 4vw, 48px); position: relative; overflow: hidden; box-shadow: 0 30px 70px rgba(11,37,69,.4); }
.case-stat::after { content: ""; position: absolute; inset: 10px; border: 1px dashed rgba(255,255,255,.22); border-radius: 6px; pointer-events: none; }
.case-stat .cs-eyebrow { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mark); margin-bottom: 22px; }
.case-stat .cs-big, .case-stat .rc-big { font-family: var(--serif); font-size: clamp(3.4rem, 7vw, 5.6rem); font-weight: 600; line-height: .95; letter-spacing: -.03em; color: #fff; }
.case-stat .rc-foot .mono-note, .case-stat .mono-note { color: rgba(255,255,255,.62); }
.case-stat .cs-cap { margin-top: 14px; color: rgba(255,255,255,.75); font-size: .95rem; }
.case-stat .cs-rows { margin-top: 26px; border-top: 1px solid rgba(255,255,255,.25); }
.case-stat .cs-rows .lrow { border-color: rgba(255,255,255,.14); }
.case-stat .cs-rows .lr-k { color: rgba(255,255,255,.72); }
.case-stat .cs-rows .lr-dots { border-color: rgba(255,255,255,.3); }
.case-stat .cs-rows .lr-v { color: var(--mark); font-size: 1.25rem; }
.case-body h2, .case-body h3 { margin-bottom: 18px; }
.case-body .q { font-family: var(--serif); font-size: clamp(1.2rem, 2vw, 1.5rem); font-style: italic; font-weight: 460; line-height: 1.45; color: var(--ink); border-left: 3px solid var(--blue); padding-left: 22px; margin: 26px 0 14px; }
.case-body .q-by { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding-left: 25px; }
@media (max-width: 940px) { .case { grid-template-columns: 1fr; } }

/* ---------- engine strip (Magnus) ---------- */
.engine { background: var(--navy-2); color: rgba(255,255,255,.85); border-block: 2px solid var(--navy); position: relative; overflow: hidden; }
.engine::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(191,217,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(191,217,255,.06) 1px, transparent 1px);
  background-size: 36px 36px;
}
.engine .wrap { position: relative; }
.engine .eyebrow { color: var(--mark); }
.engine .eyebrow .idx { color: var(--mark); }
.engine .eyebrow::after { background: rgba(191,217,255,.4); }
.engine h2 { color: #fff; max-width: 32ch; }
.engine .lede { color: rgba(255,255,255,.78); }
.engine-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(34px, 5vw, 80px); align-items: center; }
.engine-list { border-top: 1px solid rgba(255,255,255,.25); }
.engine-list li { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.14); align-items: baseline; }
.engine-list .n { font-family: var(--mono); font-size: .72rem; color: var(--mark); }
.engine-list b { color: #fff; font-weight: 700; display: block; }
.engine-list p { color: rgba(255,255,255,.66); font-size: .92rem; }
.engine .mono-note { color: rgba(255,255,255,.5); }
@media (max-width: 940px) { .engine-grid { grid-template-columns: 1fr; } }

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; background: var(--card); }
.step { padding: 34px 30px 30px; border-right: 1px solid var(--rule); position: relative; }
.step:last-child { border-right: none; }
.step .st-n { font-family: var(--serif); font-style: italic; font-size: 2.6rem; color: transparent; -webkit-text-stroke: 1.2px var(--blue); line-height: 1; }
.step h3 { margin: 16px 0 10px; font-size: 1.3rem; }
.step p { font-size: .94rem; }
.step .st-meta { margin-top: 16px; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
@media (max-width: 880px) { .steps { grid-template-columns: 1fr; } .step { border-right: none; border-bottom: 1px solid var(--rule); } .step:last-child { border-bottom: none; } }

/* ---------- ticker ---------- */
.ticker { border-block: 1px solid var(--rule); background: var(--card); overflow: hidden; padding: 13px 0; }
.ticker-track { display: flex; gap: 48px; width: max-content; animation: tick 46s linear infinite; }
.ticker span { font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.ticker span b { color: var(--blue); font-weight: 600; }
.ticker span i { font-style: normal; color: var(--ink-3); margin-right: 48px; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- quotes ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.quote { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 28px 26px; display: flex; flex-direction: column; gap: 18px; }
.quote .q-mark { font-family: var(--serif); font-size: 3rem; line-height: .6; color: var(--mark); -webkit-text-stroke: 1px var(--navy); }
.quote p { font-size: .98rem; color: var(--ink); }
.quote footer { margin-top: auto; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); border-top: 1px solid var(--rule-soft); padding-top: 14px; }
.quote footer b { color: var(--ink); display: block; font-size: .76rem; }
/* 4-up variant. Must be a class, not an inline style: an inline grid-template-columns
   outranks the media queries below and overflows the page on a phone. */
.quotes-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .quotes-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 940px) { .quotes, .quotes-4 { grid-template-columns: 1fr; } }
/* homepage proof band: uniform sector tag + stat, no inline overrides */
.quotes-4 .quote { gap: 12px; }
.quotes-4 .quote .q-sector { align-self: flex-start; }
.quotes-4 .quote .rnum { font-size: 2.5rem; }
.quotes-4 .quote .rcap { font-size: .9rem; color: var(--ink-2); }

/* ---------- RESULTS SCROLLER ---------- */
.rscroll { position: relative; }
.rs-track {
  display: flex; align-items: stretch; gap: 22px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; scroll-padding-left: 2px;
  padding: 6px 2px 20px; margin-inline: -2px;
  scrollbar-width: thin; scrollbar-color: var(--ink-3) var(--rule-soft);
}
.rs-track:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: var(--r); }
.rs-track::-webkit-scrollbar { height: 8px; }
.rs-track::-webkit-scrollbar-track { background: var(--rule-soft); border-radius: 999px; }
.rs-track::-webkit-scrollbar-thumb { background: var(--ink-3); border-radius: 999px; }
.rs-track::-webkit-scrollbar-thumb:hover { background: var(--blue); }

.rcard {
  scroll-snap-align: start; flex: 0 0 clamp(266px, 76vw, 344px);
  display: flex; flex-direction: column; gap: 15px;
  background: var(--card); border: 1px solid var(--rule); border-top: 3px solid var(--navy);
  border-radius: var(--r-lg); padding: 26px 24px 22px;
  position: relative; overflow: hidden;
  transition: transform .26s, box-shadow .26s, border-color .26s;
}
.rcard:hover { transform: translateY(-5px); box-shadow: 0 24px 56px rgba(10,27,51,.14); border-top-color: var(--blue); }
.rcard:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.rc-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-family: var(--mono); font-size: .63rem; letter-spacing: .12em; text-transform: uppercase;
}
.rc-sector { color: var(--blue); font-weight: 600; }
.rc-period { color: var(--ink-3); white-space: nowrap; }
.rc-big {
  font-family: var(--serif); font-size: clamp(2.3rem, 4.2vw, 3rem); font-weight: 600;
  line-height: .98; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.rc-cap { font-size: .94rem; color: var(--ink-2); }
.rc-rows { border-top: 1.5px solid var(--navy); margin-top: auto; }
.rc-rows .lrow { padding: 10px 0; }
.rc-rows .lr-k { font-size: .82rem; }
.rc-rows .lr-v { font-size: 1.05rem; }
.rc-foot { padding-top: 12px; border-top: 1px solid var(--rule-soft); }
.rc-foot .mono-note { display: block; line-height: 1.55; }

/* the anchor card: wider, navy, carries the long-run story */
.rcard-anchor {
  flex-basis: clamp(280px, 84vw, 468px);
  background: var(--navy); border-color: var(--navy); border-top-color: var(--blue);
  color: rgba(255,255,255,.82); box-shadow: 0 30px 70px rgba(11,37,69,.34);
}
.rcard-anchor:hover { box-shadow: 0 34px 80px rgba(11,37,69,.44); }
.rcard-anchor .rc-sector, .rcard-anchor .rc-period { color: var(--mark); }
.rcard-anchor .rc-big { font-size: clamp(2.6rem, 5vw, 3.5rem); color: #fff; }
.rcard-anchor .rc-cap { color: rgba(255,255,255,.78); }
.rcard-anchor .rc-rows { border-top-color: rgba(255,255,255,.3); }
.rcard-anchor .lrow { border-bottom-color: rgba(255,255,255,.14); }
.rcard-anchor .lr-k { color: rgba(255,255,255,.7); }
.rcard-anchor .lr-dots { border-bottom-color: rgba(255,255,255,.28); }
.rcard-anchor .lr-v { color: var(--mark); }
.rcard-anchor .rc-foot { border-top-color: rgba(255,255,255,.2); }
.rcard-anchor .mono-note { color: rgba(255,255,255,.58); }

/* prev / next controls */
.rs-nav { display: flex; align-items: center; gap: 10px; }
.rs-btn {
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  background: var(--card); border: 1.5px solid var(--ink); color: var(--ink);
  font-family: var(--mono); font-size: 1.05rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .22s, color .22s, border-color .22s, opacity .22s;
}
.rs-btn:hover:not([disabled]) { background: var(--ink); color: #fff; }
.rs-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.rs-btn[disabled] { opacity: .28; cursor: default; }
.rs-hint { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 760px) { .rs-nav { justify-content: flex-start; } }

@media (prefers-reduced-motion: reduce) {
  .rs-track { scroll-behavior: auto; }
}

/* ---------- FAQ ---------- */
.faq { border-top: 2px solid var(--navy); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 6px; font-family: var(--serif); font-size: clamp(1.1rem, 1.8vw, 1.4rem); font-weight: 560;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .fx { font-family: var(--mono); font-size: 1.2rem; color: var(--ink-3); transition: transform .25s; flex: 0 0 auto; }
.faq details[open] summary .fx { transform: rotate(45deg); color: var(--blue); }
.faq .fa { padding: 0 6px 24px; max-width: 70ch; color: var(--ink-2); }

/* ---------- CTA strip (mid-page) ---------- */
.cta-strip { background: var(--navy); color: #fff; border-block: 1px solid var(--rule); position: relative; overflow: hidden; }
.cta-strip::before {
  content: ""; position: absolute; inset: -60% -20%;
  background: radial-gradient(40% 60% at 80% 30%, rgba(37,99,235,.5), transparent 70%);
  filter: blur(40px); animation: vizdrift 14s ease-in-out infinite alternate;
}
.cta-strip .wrap { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding-block: 34px; }
.cta-strip h3 { color: #fff; font-size: clamp(1.3rem, 2.4vw, 1.8rem); max-width: 30ch; }
.cta-strip .hl { color: var(--navy); }
.cta-strip h2 { color: #fff; font-size: clamp(1.3rem, 2.4vw, 1.8rem); max-width: 30ch; }
.q-sector { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; -webkit-text-stroke: 0; color: var(--blue); }
.cta-strip .btn { background: var(--blue); border-color: var(--blue); color: #fff; }
.cta-strip .btn:hover { background: #fff; border-color: #fff; color: var(--navy); }

/* ---------- big text marquee ---------- */
.bigmarq { overflow: hidden; border-block: 1px solid var(--rule); padding: 18px 0; background: var(--paper); }
.bigmarq .bm-track { display: flex; gap: 56px; width: max-content; animation: tick 30s linear infinite; }
.bigmarq span {
  font-family: var(--serif); font-size: clamp(2rem, 4.6vw, 3.6rem); font-weight: 600; letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1.3px var(--ink); white-space: nowrap;
}
.bigmarq span b { color: var(--ink); -webkit-text-stroke: 0; font-weight: 600; }
.bigmarq span i { font-style: normal; color: var(--blue); -webkit-text-stroke: 0; margin-inline: 26px; }

/* ---------- defined industries grid ---------- */
.ind-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.ind-cell {
  padding: 18px 20px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-weight: 600; font-size: .92rem; color: var(--ink-2); background: var(--card);
  transition: background .2s, color .2s, padding-left .2s;
}
.ind-cell em { font-family: var(--mono); font-style: normal; font-size: .62rem; letter-spacing: .1em; color: var(--ink-3); text-transform: uppercase; }
.ind-cell:hover { background: var(--navy); color: #fff; padding-left: 26px; }
.ind-cell:hover em { color: var(--mark); }
@media (max-width: 980px) { .ind-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ind-grid { grid-template-columns: 1fr; } }

/* ---------- insights cards ---------- */
.ins-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ins-card {
  position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg);
  overflow: hidden; transition: transform .25s, box-shadow .25s;
}
.ins-card:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(10,27,51,.16); }
.ins-card .card-cover { position: absolute; inset: 0; z-index: 3; }
.ins-card .ph { border: none; border-radius: 0; aspect-ratio: 16/8.5; }
.ins-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.ins-tag { font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); font-weight: 600; }
.ins-card h3, .ins-card h2 { font-size: 1.25rem; line-height: 1.25; }
.ins-card p { font-size: .92rem; }
.ins-meta { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rule-soft); font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; color: var(--ink-3); display: flex; justify-content: space-between; }
@media (max-width: 940px) { .ins-grid { grid-template-columns: 1fr; } }

/* ---------- contact details / map ---------- */
.cd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cd-card { background: var(--card); border: 1px solid var(--rule); border-top: 3px solid var(--blue); border-radius: var(--r-lg); padding: 26px 24px; }
.cd-card .cd-k { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.cd-card .cd-v { font-family: var(--serif); font-size: 1.3rem; font-weight: 580; }
.cd-card p { font-size: .9rem; margin-top: 8px; }
@media (max-width: 880px) { .cd-grid { grid-template-columns: 1fr; } }

/* ---------- scroll progress + cursor ---------- */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--blue), var(--mark)); z-index: 300; pointer-events: none; }
/* custom cursor: instant dot + lagging ring with contextual label, inverts over any background */
.cur-dot, .cur-ring { position: fixed; top: 0; left: 0; z-index: 400; pointer-events: none; mix-blend-mode: difference; opacity: 0; will-change: left, top; }
.cur-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); transition: opacity .3s; }
.cur-ring {
  width: 40px; height: 40px; border: 1.5px solid #fff; border-radius: 50%;
  transform: translate(-50%, -50%); display: grid; place-items: center;
  transition: width .3s cubic-bezier(.2,.7,.2,1), height .3s cubic-bezier(.2,.7,.2,1), opacity .3s;
}
.cur-on .cur-dot, .cur-on .cur-ring { opacity: 1; }
.cur-dot.hide, .cur-ring.hide { opacity: 0 !important; }
.cur-ring .cl { font-family: var(--mono); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; opacity: 0; transform: scale(.5); transition: opacity .2s, transform .2s; }
.cur-ring.grow { width: 78px; height: 78px; }
.cur-ring.grow .cl { opacity: 1; transform: none; }
.has-cur { cursor: none; }
.has-cur input, .has-cur textarea, .has-cur select { cursor: auto; }
@media (hover: none), (pointer: coarse) { .cur-dot, .cur-ring { display: none; } .has-cur { cursor: auto; } }

/* ---------- spotlight cards (mouse-follow sheen) ---------- */
.svc::after, .ins-card::after, .quote::after, .pain-card::after, .cd-card::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(37,99,235,.15), transparent 55%);
  opacity: 0; transition: opacity .3s;
}
.svc:hover::after, .ins-card:hover::after, .quote:hover::after, .pain-card:hover::after, .cd-card:hover::after { opacity: 1; }
.theme-dark .svc::after, .theme-dark .ins-card::after, .theme-dark .quote::after, .theme-dark .pain-card::after {
  background: radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(191,217,255,.18), transparent 55%);
}

/* ---------- button sheen ---------- */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
  transform: skewX(-22deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  transition: left .6s cubic-bezier(.2,.7,.2,1);
}
.btn:hover::after { left: 150%; }

/* ---------- nav underline draw ---------- */
.nav > a:not(.btn) { position: relative; }
.nav > a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px;
  background: var(--blue); transform: scaleX(0); transform-origin: left;
  transition: transform .26s cubic-bezier(.2,.7,.2,1);
}
.nav > a:not(.btn):hover::after, .nav > a.on:not(.btn)::after { transform: scaleX(1); }
.nav > a.on { box-shadow: none; }
.theme-dark .nav > a.on { box-shadow: none; }

/* dark-theme badge row legibility */
.theme-dark .badge-row .bdg { color: rgba(255,255,255,.82); }
.theme-dark .badge-row .bdg b { color: #fff; }

/* ledger hover preview bubble */
.lgr-peek {
  position: fixed; z-index: 250; pointer-events: none;
  width: 190px; padding: 14px 16px; border-radius: var(--r-lg);
  background: var(--navy-2); color: #fff; border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 24px 60px rgba(7,24,47,.45);
  opacity: 0; transform: translate(-50%, -110%) scale(.9) rotate(-3deg);
  transition: opacity .18s, transform .18s;
}
.lgr-peek.on { opacity: 1; transform: translate(-50%, -118%) scale(1) rotate(-2deg); }
.lgr-peek .pk-t { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; color: #fff; }
.lgr-peek .pk-s { font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mark); display: block; margin-top: 6px; }

/* tilt targets */
.tilt { transform-style: preserve-3d; will-change: transform; transition: transform .2s ease-out; }

/* ---------- final CTA ---------- */
.cta-final { background: var(--navy); color: rgba(255,255,255,.85); border-top: 2px solid var(--blue); position: relative; overflow: hidden; }
.cta-final::before {
  content: ""; position: absolute; inset: -50% -20%;
  background: radial-gradient(35% 55% at 75% 35%, rgba(37,99,235,.55), transparent 70%), radial-gradient(30% 45% at 15% 80%, rgba(191,217,255,.25), transparent 70%);
  filter: blur(50px); animation: vizdrift 18s ease-in-out infinite alternate;
}
.cta-final .wrap { position: relative; }
.cta-final h2 { color: #fff; max-width: 28ch; }
.cta-final .lede { color: rgba(255,255,255,.72); }
.cta-final .hl { color: var(--navy); }
.cta-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(30px, 5vw, 70px); align-items: center; }
.cta-final .mono-note { color: rgba(255,255,255,.5); margin-top: 18px; }
.cta-final .btn { background: var(--blue); color: #fff; border-color: var(--blue); }
.cta-final .btn:hover { background: #fff; color: var(--navy); border-color: #fff; }
.cta-final .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.cta-final .btn-ghost:hover { background: #fff; color: var(--navy); }
@media (max-width: 880px) { .cta-grid { grid-template-columns: 1fr; } }

/* ---------- social proof strip ---------- */
.proof { border-block: 1px solid var(--rule); background: var(--card); }
.proof .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 0; padding-block: 26px; }
.proof .pf { display: inline-flex; align-items: center; gap: 12px; padding-inline: clamp(18px, 3vw, 40px); }
.proof .pf .big { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; color: var(--ink); line-height: 1; }
.proof .pf .stars { font-size: 1.05rem; }
.proof .pf small { font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); display: block; margin-top: 4px; }
.proof .pf .gmark { width: 22px; height: 22px; border-radius: 50%; background: conic-gradient(#4285F4 0 25%, #EA4335 0 50%, #FBBC05 0 75%, #34A853 0); flex: 0 0 auto; }
.proof .pf b { color: var(--ink); }
.proof .sep { width: 1px; height: 40px; background: var(--rule); }
@media (max-width: 760px) { .proof .sep { display: none; } .proof .wrap { gap: 18px 0; } }

/* ---------- elevated testimonial cards ---------- */
.quote .q-stars { color: var(--gold); letter-spacing: .12em; font-size: 1rem; }
.quote .q-person { display: flex; align-items: center; gap: 12px; margin-top: auto; border-top: 1px solid var(--rule-soft); padding-top: 14px; }
.quote .q-av { width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-family: var(--serif); font-weight: 600; font-size: .98rem; flex: 0 0 auto; }
.quote .q-person .q-id { display: flex; flex-direction: column; gap: 2px; }
.quote .q-person b { color: var(--ink); font-size: .82rem; }
.quote .q-person span { font-family: var(--mono); font-size: .64rem; letter-spacing: .06em; color: var(--ink-3); text-transform: uppercase; }
.quote .q-person .q-verified { margin-left: auto; font-family: var(--mono); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: var(--up); border: 1px solid var(--rule); border-radius: 999px; padding: 4px 8px; align-self: center; }

/* ---------- floating contact dock ---------- */
.dock { position: fixed; right: 20px; bottom: 20px; z-index: 220; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.dock .fab { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: .76rem; font-weight: 600; letter-spacing: .06em; border-radius: 999px; padding: 13px 20px; cursor: pointer; border: 1.5px solid; box-shadow: 0 14px 40px rgba(10,27,51,.32); transition: transform .22s, background .22s, color .22s; }
.dock .fab:hover { transform: translateY(-2px); }
.dock .fab-book { background: var(--blue); border-color: var(--blue); color: #fff; }
.dock .fab-book:hover { background: #fff; color: var(--navy); border-color: #fff; }
.dock .fab-ask { background: var(--navy); border-color: var(--navy); color: #fff; }
.dock .fab-ask:hover { background: #fff; color: var(--navy); }
.dock .fab .d { width: 8px; height: 8px; border-radius: 50%; background: var(--mark); animation: pulse 2.4s infinite; }
.dock .fab-book .d { background: #fff; }

/* mobile sticky contact bar */
.mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 220; display: none; }
.mbar a { flex: 1; text-align: center; padding: 15px 8px; font-weight: 700; font-size: .9rem; color: #fff; border-top: 1px solid rgba(255,255,255,.16); }
.mbar .b-ask { background: var(--navy-2); }
.mbar .b-call { background: var(--navy); }
.mbar .b-book { background: var(--blue); }
@media (max-width: 700px) { .dock { display: none; } .mbar { display: flex; } body { padding-bottom: 56px; } }

/* ---------- underdog statement ---------- */
.underdog { background: var(--navy); color: rgba(255,255,255,.85); border-block: 1px solid var(--rule); position: relative; overflow: hidden; text-align: center; }
.underdog::before { content: ""; position: absolute; inset: -40% -10%; background: radial-gradient(40% 60% at 50% 18%, rgba(37,99,235,.42), transparent 70%); filter: blur(50px); animation: vizdrift 16s ease-in-out infinite alternate; }
.underdog .wrap { position: relative; max-width: 880px; }
.underdog .eyebrow { color: rgba(255,255,255,.55); }
.underdog .eyebrow .idx { color: var(--mark); }
.underdog .eyebrow.center::before, .underdog .eyebrow::after { background: rgba(255,255,255,.25); }
.underdog h2 { color: #fff; font-size: clamp(2.3rem, 5vw, 3.7rem); margin-bottom: 22px; }
.underdog .lede { color: rgba(255,255,255,.8); margin: 0 auto 30px; }
.underdog .hl { color: var(--navy); }
.underdog .btn { background: var(--blue); border-color: var(--blue); color: #fff; }
.underdog .btn:hover { background: #fff; color: var(--navy); border-color: #fff; }

/* ---------- counters band ---------- */
.counters .stats { margin-top: 6px; }
.counters .mono-note { text-align: center; margin-top: 18px; }

/* ---------- footer (clearly separated) ---------- */
.footer {
  background: #04101F; color: rgba(255,255,255,.72); font-size: .92rem;
  border-top: 3px solid var(--blue); position: relative;
}
.footer::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: rgba(255,255,255,.25);
}
.footer a:hover { color: var(--mark); }
.f-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 40px; padding: clamp(48px, 6vw, 76px) 0 44px; }
.f-brand .logo { color: #fff; font-size: 1.7rem; }
.f-brand .logo i { -webkit-text-stroke-color: #fff; }
.f-brand p { color: rgba(255,255,255,.6); margin-top: 16px; max-width: 34ch; font-size: .9rem; }
.f-col .f-h { font-family: var(--mono); font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--mark); margin-bottom: 18px; }
.f-col li { padding: 5px 0; }
.f-col.f-ind ul { columns: 2; column-gap: 26px; }
.f-bottom { border-top: 1px solid rgba(255,255,255,.14); padding: 22px 0 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; color: rgba(255,255,255,.45); }
@media (max-width: 940px) { .f-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .f-top { grid-template-columns: 1fr; } }

/* the stamp */
.stamp { width: 116px; height: 116px; position: relative; flex: 0 0 auto; }
.stamp svg { width: 100%; height: 100%; animation: spin 26s linear infinite; }
.stamp text { font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; fill: currentColor; }
.stamp .stamp-c { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-style: italic; font-size: 1.5rem; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- forms ---------- */
.form { display: grid; gap: 16px; }
.form .f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label { display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 16px; font-family: var(--sans); font-size: .98rem; color: var(--ink);
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r);
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.18); }
.form-ok { display: none; background: var(--sky); border: 1.5px solid var(--blue); border-radius: var(--r); padding: 18px 20px; font-weight: 600; color: var(--ink); }
@media (max-width: 620px) { .form .f2 { grid-template-columns: 1fr; } }

/* ---------- calendly ---------- */
.calendly-wrap {
  border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden;
  background: var(--card); box-shadow: 0 26px 70px rgba(10,27,51,.12);
}
.calendly-wrap .calendly-inline-widget { min-width: 280px; height: 700px; }
.calendly-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1.5px solid var(--navy); }
.calendly-head .t { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--ink-2); }
.calendly-head .live { font-family: var(--mono); font-size: .64rem; color: var(--blue); letter-spacing: .1em; }
.calendly-head .live::before { content: "● "; animation: pulse 2.4s infinite; }

/* ---------- prose blocks ---------- */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(30px, 5vw, 80px); }
.split.rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split h2 { position: sticky; top: 120px; }
@media (max-width: 880px) { .split, .split.rev { grid-template-columns: 1fr; } .split h2 { position: static; } }

.inc { border-top: 2px solid var(--navy); }
.inc li { display: grid; grid-template-columns: 56px minmax(0,1fr) auto; gap: 18px; padding: 18px 4px; border-bottom: 1px solid var(--rule); align-items: baseline; }
.inc .i-n { font-family: var(--mono); font-size: .72rem; color: var(--ink-3); }
.inc b { font-weight: 700; color: var(--ink); }
.inc p { font-size: .92rem; color: var(--ink-2); margin-top: 3px; }
.inc .i-tag { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); white-space: nowrap; }
@media (max-width: 640px) { .inc li { grid-template-columns: 40px 1fr; } .inc .i-tag { display: none; } }

.pain { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pain-card { background: var(--card); border: 1px solid var(--rule); border-left: 4px solid var(--blue); border-radius: var(--r); padding: 26px 24px; }
.pain-card .p-q { font-family: var(--serif); font-style: italic; font-size: 1.18rem; font-weight: 480; color: var(--ink); margin-bottom: 12px; line-height: 1.4; }
.pain-card p { font-size: .92rem; }
@media (max-width: 880px) { .pain { grid-template-columns: 1fr; } }

/* ---------- DARK THEME (engine / white label) ---------- */
.theme-dark { background: var(--navy-2); color: rgba(255,255,255,.82); }
body.theme-dark::before { background-image: radial-gradient(rgba(191,217,255,.06) 1px, transparent 1px); }
.theme-dark h1, .theme-dark h2, .theme-dark h3 { color: #fff; }
.theme-dark p, .theme-dark .lede { color: rgba(255,255,255,.74); }
.theme-dark .header { background: rgba(7,24,47,.92); border-color: rgba(255,255,255,.12); }
.theme-dark .logo, .theme-dark .nav > a, .theme-dark .nav .nd > button { color: #fff; }
.theme-dark .logo i { -webkit-text-stroke-color: #fff; }
.theme-dark .nav > a:hover, .theme-dark .nav .nd > button:hover { color: var(--mark); }
.theme-dark .nav > a.on { box-shadow: inset 0 -2px 0 var(--blue); }
.theme-dark .burger { border-color: #fff; color: #fff; }
.theme-dark .m-nav { background: var(--navy-2); }
.theme-dark .eyebrow { color: rgba(255,255,255,.55); }
.theme-dark .eyebrow .idx { color: var(--mark); }
.theme-dark .eyebrow::after, .theme-dark .eyebrow.center::before { background: rgba(255,255,255,.25); }
.theme-dark .hl { color: var(--navy); }
/* dark-theme readability: components that previously inherited light-page ink */
.theme-dark .hero-foot span { color: rgba(255,255,255,.55); }
.theme-dark .hero-foot b { color: #fff; }
.theme-dark .inc .i-n { color: rgba(255,255,255,.5); }
.theme-dark .mono-note { color: rgba(255,255,255,.62); }
.theme-dark .st-meta { color: var(--mark); }
.theme-dark .askbar .ab-spark { color: var(--mark); }
/* on dark sections a highlighted word is navy-on-navy until its swipe arrives:
   start white, flip to navy as the mark fills in */
.js .cta-strip .hl, .js .cta-final .hl, .js .underdog .hl, .js .theme-dark .hl { color: #fff; transition: color .25s ease .45s; }
.js .cta-strip .in .hl, .js .cta-final .in .hl, .js .underdog .in .hl, .js .theme-dark .in .hl,
.js .cta-strip .hl.hl-in, .js .cta-final .hl.hl-in, .js .underdog .hl.hl-in, .js .theme-dark .hl.hl-in { color: var(--navy); }
.theme-dark .hero, .theme-dark .page-hero, .theme-dark .sec-rule { border-color: rgba(255,255,255,.15); }
.theme-dark .hero::after, .theme-dark .page-hero::after { background: radial-gradient(closest-side, rgba(37,99,235,.18), transparent 72%); }
.theme-dark .btn { background: var(--blue); color: #fff; border-color: var(--blue); }
.theme-dark .btn:hover { background: #fff; color: var(--navy); border-color: #fff; }
.theme-dark .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.theme-dark .btn-ghost:hover { background: #fff; color: var(--navy); }
.theme-dark .lcard { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.16); box-shadow: 0 26px 70px rgba(0,0,0,.4), 0 2px 0 var(--blue); }
.theme-dark .lcard::before { border-color: rgba(255,255,255,.1); }
.theme-dark .lcard-head { border-color: var(--blue); }
.theme-dark .lcard-head .t { color: rgba(255,255,255,.7); }
.theme-dark .lcard-head .live { color: var(--mark); }
.theme-dark .lrow { border-color: rgba(255,255,255,.1); }
.theme-dark .lrow .lr-k { color: rgba(255,255,255,.66); }
.theme-dark .lrow .lr-dots { border-color: rgba(255,255,255,.25); }
.theme-dark .lrow .lr-v { color: var(--mark); }
.theme-dark .lcard-foot { border-color: var(--blue); }
.theme-dark .mono-note { color: rgba(255,255,255,.45); }
.theme-dark .stats { border-color: rgba(255,255,255,.35); }
.theme-dark .stat { border-color: rgba(255,255,255,.14); }
.theme-dark .stat-n { color: #fff; }
.theme-dark .stat-n sup { color: var(--mark); }
.theme-dark .stat-l { color: rgba(255,255,255,.5); }
.theme-dark .inc, .theme-dark .faq { border-color: rgba(255,255,255,.35); }
.theme-dark .inc li, .theme-dark .faq details { border-color: rgba(255,255,255,.12); }
.theme-dark .inc b, .theme-dark .faq summary { color: #fff; }
.theme-dark .inc .i-tag { color: var(--mark); }
.theme-dark .faq .fa { color: rgba(255,255,255,.7); }
.theme-dark .faq summary .fx { color: rgba(255,255,255,.5); }
.theme-dark .faq details[open] summary .fx { color: var(--mark); }
.theme-dark .quote, .theme-dark .pain-card, .theme-dark .svc, .theme-dark .steps { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); }
.theme-dark .quote p, .theme-dark .pain-card .p-q { color: #fff; }
.theme-dark .step { border-color: rgba(255,255,255,.14); }
.theme-dark .step .st-n { -webkit-text-stroke-color: var(--mark); }
.theme-dark .field input, .theme-dark .field select, .theme-dark .field textarea { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); color: #fff; }
.theme-dark .ph { background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(255,255,255,.03)); border-color: rgba(255,255,255,.2); }
.theme-dark .ph .ph-label { color: rgba(255,255,255,.5); }
.theme-dark .ph .ph-label b { color: rgba(255,255,255,.75); }
.theme-dark ::selection { background: var(--blue); color: #fff; }

/* ---------- Magnus chip (hero AI signal) ---------- */
.ai-chip {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); background: var(--card);
  border: 1px solid var(--navy); border-radius: 999px;
  padding: 8px 16px; margin-bottom: 26px;
  transition: background .22s, transform .22s, border-color .22s;
}
.ai-chip .ai-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.18); animation: pulse 2.4s infinite; }
.ai-chip b { color: var(--blue); font-weight: 600; }
.ai-chip:hover { background: var(--sky); border-color: var(--blue); transform: translateY(-1px); }
.theme-dark .ai-chip { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.35); }
.theme-dark .ai-chip b { color: var(--mark); }
.theme-dark .ai-chip .ai-dot { background: var(--mark); }
.theme-dark .ai-chip:hover { background: var(--blue); border-color: var(--blue); }

/* ---------- Ask Magnus launcher (chatbot slot) ---------- */
.magnus-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 200;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: .76rem; font-weight: 600; letter-spacing: .08em;
  background: var(--navy); color: #fff;
  border: 1.5px solid var(--navy); border-radius: 999px;
  padding: 13px 20px; cursor: pointer;
  box-shadow: 0 14px 40px rgba(10,27,51,.35);
  transition: background .22s, color .22s, transform .22s;
}
.magnus-fab .m-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mark); animation: pulse 2.4s infinite; }
.magnus-fab:hover { background: var(--blue); border-color: var(--blue); transform: translateY(-2px); }
.magnus-pop {
  position: fixed; right: 20px; bottom: 150px; z-index: 221;
  width: min(330px, calc(100vw - 44px));
  background: #fff; color: var(--ink);
  border: 1.5px solid var(--navy); border-radius: var(--r-lg);
  box-shadow: 0 30px 80px rgba(10,27,51,.35);
  padding: 22px; display: none;
}
.magnus-pop.open { display: block; animation: mpop .25s cubic-bezier(.2,.65,.25,1); }
@keyframes mpop { from { opacity: 0; transform: translateY(10px); } }
.magnus-pop .mp-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1.5px solid var(--navy); padding-bottom: 12px; margin-bottom: 14px; }
.magnus-pop .mp-head b { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; }
.magnus-pop .mp-head span { font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.magnus-pop p { font-size: .9rem; color: var(--ink-2); margin-bottom: 14px; }
.magnus-pop .mp-links { display: grid; gap: 8px; }
.magnus-pop .mp-links a {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .88rem; font-weight: 600; padding: 10px 14px;
  border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper-2);
  transition: background .2s, color .2s;
}
.magnus-pop .mp-links a:hover { background: var(--navy); color: #fff; }
.magnus-pop .mp-note { font-family: var(--mono); font-size: .62rem; letter-spacing: .06em; color: var(--ink-3); margin-top: 12px; margin-bottom: 0; }

/* ---------- Ask Magnus hero bar ---------- */
.askbar {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1.5px solid var(--navy); border-radius: 999px;
  padding: 6px 6px 6px 18px; margin-top: 30px; max-width: 500px;
  box-shadow: 0 16px 38px rgba(10,27,51,.13); position: relative;
}
.askbar::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px; pointer-events: none;
  background: linear-gradient(110deg, transparent 20%, var(--blue), transparent 80%); background-size: 220% 100%; will-change: transform;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: shimmer-t 3.6s linear infinite;
}
@keyframes shimmer-t { from { background-position: 0 0; } to { background-position: -220% 0; } } /* note: border-mask shimmer cannot use transform without a wrapper; kept, runs on decoration only */
.askbar .ab-spark { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); font-weight: 600; white-space: nowrap; }
.askbar input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: var(--sans); font-size: .94rem; color: var(--ink); }
.askbar input::placeholder { color: var(--ink-3); }
.askbar .ab-go { flex: 0 0 auto; border: none; cursor: pointer; background: var(--ink); color: #fff; border-radius: 999px; padding: 11px 18px; font-family: var(--sans); font-weight: 700; font-size: .85rem; display: inline-flex; align-items: center; gap: 6px; transition: background .2s, transform .2s; }
.askbar .ab-go:hover { background: var(--blue); transform: translateY(-1px); }
.ab-suggest { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; max-width: 540px; }
.ab-suggest button { font-family: var(--mono); font-size: .68rem; letter-spacing: .02em; color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--rule); border-radius: 999px; padding: 8px 13px; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s; }
.ab-suggest button:hover { background: var(--navy); color: #fff; border-color: var(--navy); transform: translateY(-1px); }
.theme-dark .askbar { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.28); box-shadow: 0 16px 38px rgba(0,0,0,.35); }
.theme-dark .askbar input { color: #fff; }
.theme-dark .askbar input::placeholder { color: rgba(255,255,255,.5); }
.theme-dark .askbar .ab-go { background: var(--blue); }
.theme-dark .ab-suggest button { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.8); }
.theme-dark .ab-suggest button:hover { background: #fff; color: var(--navy); border-color: #fff; }
@media (max-width: 520px) { .askbar .ab-spark { display: none; } .askbar { padding-left: 14px; } }

/* ---------- mini CTA card (fills split left columns) ---------- */
.mini-cta { margin-top: 32px; background: var(--navy); color: #fff; border-radius: var(--r-lg); padding: 24px 26px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; max-width: 420px; position: relative; overflow: hidden; }
.mini-cta::before { content: ""; position: absolute; inset: -60% -25%; background: radial-gradient(40% 60% at 80% 20%, rgba(37,99,235,.55), transparent 70%); filter: blur(40px); animation: vizdrift 14s ease-in-out infinite alternate; }
.mini-cta > * { position: relative; z-index: 1; }
.mini-cta .mc-k { font-family: var(--serif); font-size: 1.3rem; font-weight: 580; color: #fff; line-height: 1.2; }
.mini-cta .mono-note { color: rgba(255,255,255,.6); }
.mini-cta .btn { background: var(--blue); border-color: var(--blue); color: #fff; }
.mini-cta .btn:hover { background: #fff; border-color: #fff; color: var(--navy); }
.theme-dark .mini-cta { border: 1px solid rgba(255,255,255,.16); }

/* Magnus popover: echoed question */
.magnus-pop .mp-q { font-family: var(--serif); font-style: italic; font-size: .95rem; color: var(--ink); border-left: 2px solid var(--blue); padding-left: 12px; margin-bottom: 12px; }

/* ============================================================
   LEGAL PAGES  (privacy / cookies / terms)
   Long-form statutory prose. Scoped to .legal only.
   ============================================================ */
.legal { max-width: 76ch; }
.legal > * + * { margin-top: 18px; }
.legal h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin-top: 56px; padding-top: 22px;
  border-top: 2px solid var(--navy);
  scroll-margin-top: 100px;
}
.legal h2:first-child { margin-top: 0; }
.legal h2 .l-n { font-family: var(--mono); font-size: .58em; font-weight: 500; color: var(--blue); margin-right: 12px; letter-spacing: .04em; }
.legal h3 { font-size: 1.16rem; margin-top: 32px; }
.legal p, .legal li { color: var(--ink-2); }
.legal a:not(.btn) { color: var(--blue); font-weight: 600; box-shadow: inset 0 -1px 0 rgba(37,99,235,.4); }
.legal a:not(.btn):hover { box-shadow: inset 0 -2px 0 var(--blue); }
.legal strong, .legal b { color: var(--ink); font-weight: 700; }
.legal ul, .legal ol { padding-left: 0; margin-top: 14px; }
.legal ul li { position: relative; padding: 7px 0 7px 26px; }
.legal ul li::before { content: "→"; position: absolute; left: 0; top: 7px; font-family: var(--mono); font-size: .8rem; color: var(--blue); }
.legal ol { list-style: none; counter-reset: lg; }
.legal ol li { position: relative; padding: 7px 0 7px 30px; counter-increment: lg; }
.legal ol li::before { content: counter(lg) "."; position: absolute; left: 0; top: 7px; font-family: var(--mono); font-size: .78rem; color: var(--blue); }

/* the dated stamp under the page-hero h1 */
.legal-date {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2); background: var(--card);
  border: 1px solid var(--navy); border-radius: 999px; padding: 8px 16px;
}
.legal-date b { color: var(--ink); font-weight: 600; }
.legal-date .d { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); flex: 0 0 auto; }

/* jump list */
.legal-toc { border-top: 2px solid var(--navy); margin-bottom: 8px; position: sticky; top: 100px; }
.legal-toc li { padding: 0; }
.legal-toc li::before { content: none; }
.legal-toc a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 11px 6px; border-bottom: 1px solid var(--rule-soft);
  font-size: .88rem; font-weight: 600; color: var(--ink-2);
}
.legal-toc a span { font-family: var(--mono); font-size: .64rem; color: var(--ink-3); }
.legal-toc a:hover { color: var(--blue); padding-left: 12px; transition: padding-left .2s, color .2s; }
@media (max-width: 880px) { .legal-toc { position: static; } }

/* definition-style key/value block (controller details, ICO details) */
.legal-kv { border-top: 1.5px solid var(--navy); margin-top: 18px; }
.legal-kv div { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 11px 2px; border-bottom: 1px solid var(--rule-soft); }
.legal-kv dt { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); flex: 0 0 168px; padding-top: 3px; }
.legal-kv dd { color: var(--ink); font-weight: 600; flex: 1; min-width: 200px; }
@media (max-width: 560px) { .legal-kv dt { flex-basis: 100%; } }

/* cookie + retention tables */
.legal-table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: .9rem; }
.legal-table caption {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); text-align: left; padding-bottom: 12px;
}
.legal-table th, .legal-table td { text-align: left; padding: 13px 14px 13px 0; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.legal-table thead th {
  font-family: var(--mono); font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); border-bottom: 1.5px solid var(--navy); white-space: nowrap;
}
.legal-table tbody th { font-weight: 700; color: var(--ink); }
.legal-table td { color: var(--ink-2); }
.legal-table code { font-family: var(--mono); font-size: .82em; color: var(--ink); background: var(--sky); padding: 2px 6px; border-radius: 4px; }
.legal-table .c-need { font-family: var(--mono); font-size: .6rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); background: var(--mark); border: 1.2px solid var(--navy); border-radius: 999px; padding: 3px 9px; white-space: nowrap; display: inline-block; }
.legal-table .c-opt { background: transparent; border-color: var(--rule); color: var(--ink-3); }
.legal-scroll { overflow-x: auto; }
@media (max-width: 700px) { .legal-table { min-width: 620px; } }

/* callout for the things that matter most */
.legal-note {
  background: var(--paper-2); border: 1px solid var(--rule); border-left: 4px solid var(--blue);
  border-radius: var(--r); padding: 20px 22px; margin-top: 22px;
}
.legal-note > * + * { margin-top: 10px; }
.legal-note p { font-size: .93rem; }
.legal-note .ln-k { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); font-weight: 600; }

/* ============================================================
   ARTICLES  (insights posts)
   Long-form editorial prose. Scoped to .article only.
   Measure held at ~68ch for readability.
   ============================================================ */
.article { max-width: 68ch; margin-inline: auto; }
.article > * + * { margin-top: 20px; }

.article h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin-top: 58px; padding-top: 24px;
  border-top: 2px solid var(--navy);
  scroll-margin-top: 100px;
}
.article h3 { font-size: 1.18rem; margin-top: 34px; }
.article h2 + p, .article h3 + p { margin-top: 14px; }
.article p, .article li { color: var(--ink-2); font-size: 1.04rem; line-height: 1.72; }
.article strong, .article b { color: var(--ink); font-weight: 700; }
.article em { font-family: var(--serif); font-style: italic; }
.article a:not(.btn) { color: var(--blue); font-weight: 600; box-shadow: inset 0 -1px 0 rgba(37,99,235,.4); }
.article a:not(.btn):hover { box-shadow: inset 0 -2px 0 var(--blue); }

/* opening paragraph carries a little more weight */
.article .art-lede { font-size: clamp(1.08rem, 1.5vw, 1.2rem); line-height: 1.6; color: var(--ink); }

/* lists */
.article ul, .article ol { padding-left: 0; margin-top: 16px; }
.article ul li { position: relative; padding: 7px 0 7px 26px; }
.article ul li::before { content: "→"; position: absolute; left: 0; top: 7px; font-family: var(--mono); font-size: .8rem; color: var(--blue); }
.article ol { list-style: none; counter-reset: ar; }
.article ol li { position: relative; padding: 7px 0 7px 32px; counter-increment: ar; }
.article ol li::before { content: counter(ar) "."; position: absolute; left: 0; top: 7px; font-family: var(--mono); font-size: .78rem; color: var(--blue); }

/* pull quote */
.article .art-pull {
  font-family: var(--serif); font-size: clamp(1.2rem, 2vw, 1.45rem); font-style: italic; font-weight: 460;
  line-height: 1.45; color: var(--ink);
  border-left: 3px solid var(--blue); padding-left: 22px; margin-block: 34px;
}

/* callout: the thing that matters most */
.article .art-note {
  background: var(--paper-2); border: 1px solid var(--rule); border-left: 4px solid var(--blue);
  border-radius: var(--r); padding: 20px 22px; margin-top: 26px;
}
.article .art-note > * + * { margin-top: 10px; }
.article .art-note p { font-size: .95rem; }
.article .art-note .an-k { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); font-weight: 600; }

/* worked example block: arithmetic, set in mono-ish ledger style */
.article .art-calc {
  background: var(--card); border: 1px solid var(--rule); border-top: 3px solid var(--navy);
  border-radius: var(--r-lg); padding: 22px 24px; margin-top: 26px;
}
.article .art-calc .ac-k { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.article .art-calc .lrow { padding: 10px 0; }
.article .art-calc .lr-k { font-size: .88rem; }
.article .art-calc .lr-v { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.article .art-calc .ac-out { border-top: 1.5px solid var(--navy); margin-top: 6px; padding-top: 12px; }
.article .art-calc .ac-out .lr-v { color: var(--blue); }

/* table */
.article .art-tbl { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: .92rem; }
.article .art-tbl th, .article .art-tbl td { text-align: left; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.article .art-tbl thead th {
  font-family: var(--mono); font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); border-bottom: 1.5px solid var(--navy); white-space: nowrap;
}
.article .art-tbl tbody th { font-weight: 700; color: var(--ink); }
.article .art-tbl td { color: var(--ink-2); }
.art-scroll { overflow-x: auto; }
@media (max-width: 700px) { .article .art-tbl { min-width: 560px; } }

/* sources */
.article .art-src { border-top: 1px solid var(--rule); margin-top: 46px; padding-top: 20px; }
.article .art-src h4 { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-bottom: 12px; }
.article .art-src ol { margin-top: 0; }
.article .art-src li { font-size: .86rem; padding: 5px 0 5px 30px; }
.article .art-src li::before { top: 5px; }

/* ---------- article hero furniture ---------- */
.art-date {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2); background: var(--card);
  border: 1px solid var(--navy); border-radius: 999px; padding: 8px 18px;
}
.art-date b { color: var(--ink); font-weight: 600; }
.art-date .d { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); flex: 0 0 auto; }
.art-date .sep { color: var(--rule); }
.page-hero .art-date { margin-bottom: 22px; }

/* breadcrumb */
.crumb { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 20px; }
.crumb a { color: var(--ink-3); }
.crumb a:hover { color: var(--blue); }
.crumb span { color: var(--rule); margin-inline: 8px; }

/* sign-off: brand level, no headcount claims */
.art-sign {
  max-width: 68ch; margin: 56px auto 0;
  border-top: 2px solid var(--navy); padding-top: 26px;
  display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start;
}
.art-sign .as-mark {
  width: 46px; height: 46px; border-radius: 50%; background: var(--navy); color: #fff;
  display: grid; place-items: center; font-family: var(--serif); font-size: 1.1rem; font-weight: 600; flex: 0 0 auto;
}
.art-sign .as-body { flex: 1; min-width: 240px; }
.art-sign .as-body b { font-size: .9rem; color: var(--ink); display: block; }
.art-sign .as-body p { font-size: .9rem; margin-top: 6px; }

@media (max-width: 640px) {
  .article h2 { margin-top: 44px; }
}

/* PRE-LAUNCH PLACEHOLDERS: every .todo must be resolved or removed before go-live */
mark.todo {
  background: #FFE95C; color: #0A1B33; font-weight: 800;
  font-family: var(--mono); font-size: .82em; letter-spacing: .02em;
  padding: 2px 8px; border-radius: 4px; border: 1.5px dashed #0A1B33;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* ---------- reveal motion ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.65,.25,1), transform .8s cubic-bezier(.2,.65,.25,1); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: .08s; } .js .reveal.d2 { transition-delay: .16s; }
.js .reveal.d3 { transition-delay: .24s; } .js .reveal.d4 { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .hl { background-size: 100% .94em; }
  html { scroll-behavior: auto; }
}

/* ---------- CLICK-TO-LOAD CALENDLY ---------- */
.cal-holder { display: flex; align-items: center; justify-content: center; }
.cal-consent { text-align: center; padding: clamp(28px,4vw,48px) clamp(20px,3vw,36px); max-width: 46ch; margin: 0 auto; }
.cal-consent .cal-c-t { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.cal-consent .cal-c-p { font-size: .88rem; color: var(--ink-2); margin-bottom: 22px; line-height: 1.6; }
.cal-consent .cal-c-alt { font-family: var(--mono); font-size: .72rem; color: var(--ink-2); margin-top: 18px; }
.cal-consent .cal-c-alt a, .cal-consent .cal-c-p a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.theme-dark .cal-consent .cal-c-t { color: #fff; }
.theme-dark .cal-consent .cal-c-p, .theme-dark .cal-consent .cal-c-alt { color: rgba(255,255,255,.72); }

/* ---------- FORM: consent + failure state ---------- */
.form-err { display: none; background: #FFF4F4; border: 1.5px solid #D64545; border-radius: var(--r); padding: 18px 20px; font-weight: 600; color: #8A2323; margin-top: 14px; }
.form-err a { color: #8A2323; text-decoration: underline; }
.field-consent { margin-top: 4px; }
.consent-lbl { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: .82rem; line-height: 1.55; color: var(--ink-2); font-weight: 400; text-transform: none; letter-spacing: 0; }
.consent-lbl input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--blue); }
.consent-lbl a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- ASK MAGNUS: capture form in the popover ---------- */
.magnus-pop .mp-form { display: block; margin-bottom: 4px; }
.magnus-pop .mp-lbl { display: block; font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
.magnus-pop .mp-form input[type="email"] { width: 100%; padding: 11px 13px; border: 1.5px solid rgba(10,27,51,.18); border-radius: 10px; font: inherit; font-size: .88rem; background: #fff; color: var(--ink); }
.magnus-pop .mp-form input[type="email"]:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.14); }
.magnus-pop .mp-form button { width: 100%; margin-top: 10px; padding: 11px 14px; border: 0; border-radius: 10px; background: var(--ink); color: #fff; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; transition: background .2s; }
.magnus-pop .mp-form button:hover { background: var(--blue); }
.magnus-pop .mp-form button:disabled { opacity: .6; cursor: default; }
.magnus-pop .mp-consent { font-size: .7rem !important; color: var(--ink-2); margin: 8px 0 0 !important; line-height: 1.5; }
.magnus-pop .mp-consent a { color: var(--blue); text-decoration: underline; }
.magnus-pop .form-ok, .magnus-pop .form-err { padding: 12px 14px; font-size: .8rem; margin-top: 10px; }

/* ---------- MOBILE: collapse the inline two-column grids ----------
   Several pages set `style="display:grid; grid-template-columns: 1fr 1fr"` directly on a
   .wrap or .pain. An inline declaration outranks any media query, so those sections stayed
   two-up on a phone: some overflowed the viewport, the rest were unreadably narrow.
   !important is what lets an author rule beat an inline style, which is exactly the case here.
   If you convert an inline grid to a class, it will match the normal rules and can drop out. */
@media (max-width: 880px) {
  .wrap[style*="grid-template-columns"],
  .pain[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ---------- mobile conversion pass ---------- */
@media (max-width: 760px) {
  /* iOS zooms any focused control under 16px; that zoom breaks the form flow.
     16px on touch widths kills the zoom without changing desktop. */
  .field input, .field select, .field textarea,
  .askbar input,
  .magnus-pop .mp-form input[type="email"] { font-size: 16px; }
  /* footer links render 13-16px tall; pad them to a usable thumb target */
  .footer a { display: inline-block; padding: 6px 0; }
  /* comfortable thumb targets on the A-Z industry filter */
  .az-bar button { min-height: 44px; min-width: 44px; }
}
@media (max-width: 480px) {
  /* masthead down to one line: the sticky mobile bar already carries Call */
  .masthead .mh-r { display: none; }
}
/* ---------- consent banner (equal-prominence choices, ICO-friendly) ---------- */
.consent { position: fixed; left: 20px; bottom: 20px; z-index: 300; max-width: 380px; background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 14px; padding: 18px 20px; box-shadow: 0 24px 60px rgba(10,27,51,.25); }
.consent .c-k { font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 8px; }
.consent .c-t { font-size: .92rem; line-height: 1.55; }
.consent .c-t a { text-decoration: underline; }
.consent .c-btns { display: flex; gap: 10px; margin-top: 14px; }
.consent .c-btns button { flex: 1; font: inherit; font-weight: 700; font-size: .88rem; padding: 11px 14px; border-radius: 10px; cursor: pointer; }
.consent .c-yes { background: var(--ink); color: #fff; border: 1.5px solid var(--ink); }
.consent .c-yes:hover { background: var(--blue); border-color: var(--blue); }
.consent .c-no { background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); }
.consent .c-no:hover { background: var(--paper-2); }
@media (max-width: 700px) { .consent { left: 10px; right: 10px; bottom: 66px; max-width: none; } }