/* ============================================================================
   site.css — Que Advisory
   ----------------------------------------------------------------------------
   Design system and all page styles. No framework, no build step, no external
   font or image requests. Organised in numbered sections — search the number.

   VISUAL LANGUAGE
   Editorial and institutional, in the register of a private-bank or chambers
   publication rather than a software product. Three deliberate choices:

     1. A SERIF display face for headings. This is the single strongest signal
        of institutional gravitas, and it is what separates an advisory firm's
        site from a SaaS landing page. Body copy stays sans for legibility.

     2. WARM NEUTRALS. Porcelain and ink rather than grey and blue. Cool greys
        read as technology; warm neutrals read as print, paper and permanence.

     3. RESTRAINT. One accent colour, used sparingly. Hairline rules instead of
        heavy borders. Ornament only where it marks a structural boundary.

   THEMES
     light — "Porcelain & Brass"   ivory ground, ink text, brass accent
     dark  — "Ink & Gold"          near-black, gold accent, celadon highlight

   Every colour is a token in section 01. Never hard-code a colour below it.
   test/integrity.test.js verifies the accent against both the base and the
   banded background, in both themes, plus body text and button labels.
   ========================================================================== */


/* ==========================================================================
   01 · DESIGN TOKENS
   ========================================================================== */

:root {
  /* --- Type ------------------------------------------------------------- */
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
               Arial, 'Noto Sans',
               /* CJK — body. Named explicitly so Chinese does not fall back to
                  a low-quality system default. */
               'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
               'Source Han Sans SC', 'Noto Sans CJK SC', sans-serif;
  /* System serif stack — no webfont request. Iowan and Palatino first: both
     are far more elegant than the Georgia/ Times fallbacks behind them. */
  --font-display: 'Iowan Old Style', 'Palatino Linotype', Palatino,
                  'Book Antiqua', Georgia, 'Times New Roman',
                  /* CJK — display. A serif (宋/明) face, so Chinese headings
                     read with the same formality as the Latin ones. */
                  'Songti SC', 'SimSun', 'Source Han Serif SC',
                  'Noto Serif CJK SC', serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas,
               'Liberation Mono', monospace;

  /* Fluid type scale. clamp() removes the need for heading media queries. */
  --t-xs:   0.8125rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-md:   1.0625rem;
  --t-lg:   clamp(1.125rem, 0.4vw + 1.03rem, 1.25rem);
  --t-xl:   clamp(1.3rem,  0.7vw + 1.14rem, 1.5rem);
  --t-2xl:  clamp(1.6rem,  1.2vw + 1.32rem, 2rem);
  --t-3xl:  clamp(1.95rem, 2vw + 1.5rem, 2.75rem);
  --t-4xl:  clamp(2.3rem,  3.2vw + 1.55rem, 3.75rem);

  /* --- Space (4px base) ------------------------------------------------- */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.25rem;
  --s-6:  1.5rem;
  --s-8:  2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;

  --section-y: clamp(3.75rem, 7vw, 7rem);
  --container: 76rem;
  --container-narrow: 44rem;

  --radius-sm: 4px;
  --radius:    6px;
  --radius-lg: 10px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  220ms;
  --dur-slow: 520ms;

  /* --- LIGHT THEME — "Porcelain & Brass" ---------------------------------
     A porcelain ground (青白), ink text, brass accent, celadon (青瓷) as the
     secondary. Warm throughout, and deliberately not blue. */
  --ink:    #14171A;
  --ink-2:  #333A40;
  --ink-3:  #5E666D;
  --ink-4:  #676E76;

  --bg:        #F8F6F1;
  --bg-2:      #F1EDE4;
  --bg-3:      #E7E2D6;
  --surface:   #FFFFFF;
  --surface-2: #FBF9F5;

  --line:   #E2DCD0;
  --line-2: #CBC3B2;
  --line-3: #EFEAE1;

  /* Brass. 5.39:1 on --bg, 4.98:1 on --bg-2, 4.51:1 on --bg-3 — clears AA on
     every ground it is used over, which matters because it carries body-size
     links and section eyebrows on the banded sections too. */
  --accent:      #7E6112;
  --accent-2:    #6E5410;
  --accent-soft: #FAF3DF;
  --accent-line: #E3D3A4;
  --accent-ink:  #FFFFFF;   /* 5.82:1 on the accent fill */

  /* Celadon — the secondary. Used for data, supporting marks and the
     assessment's calmer states. */
  --celadon:      #4F6E60;
  --celadon-soft: #EAF0ED;
  --celadon-line: #C4D4CC;

  /* Obsidian-ink ground for inverted bands. A green-black, not a navy. */
  --brand:     #0E1613;
  --brand-2:   #182A23;
  --brand-ink: #F2F4F0;
  --brand-mut: #A8B5AE;   /* muted text on the brand ground */

  --good: #1D6B4A;  --good-soft: #E7F2EC;
  --warn: #8A5502;  --warn-soft: #FAF0DC;
  --bad:  #A32B21;  --bad-soft:  #FAEAE8;
  --info: #1A5578;  --info-soft: #E8F1F6;

  /* Sequential scale for data visualisation. A warm earth ramp, distinct from
     the brand accent so a chart never reads as highlighted content. */
  --viz-1: #9E3B2E;
  --viz-2: #9A6614;
  --viz-3: #7D6408;
  --viz-4: #4A7D3C;
  --viz-5: #1F6B52;

  /* --- Ornament --------------------------------------------------------- */
  --gold-1: #A9862E;
  --gold-2: #DCC27E;
  --gold-3: #7E6112;
  --sheen:  linear-gradient(100deg, var(--gold-3), var(--gold-1) 38%, var(--gold-2) 56%, var(--gold-1));
  --hairline: linear-gradient(90deg, transparent, var(--accent-line) 20%, var(--accent-line) 80%, transparent);

  /* Shadows tilt warm. A neutral black shadow on a warm ground reads grey. */
  --shadow-sm: 0 1px 2px rgba(56, 44, 18, 0.05);
  --shadow:    0 1px 2px rgba(56, 44, 18, 0.04),
               0 10px 24px -10px rgba(56, 44, 18, 0.14);
  --shadow-lg: 0 2px 6px rgba(56, 44, 18, 0.05),
               0 28px 52px -20px rgba(56, 44, 18, 0.20);
  --shadow-gold: 0 14px 40px -18px rgba(126, 97, 18, 0.40);
  --ring: 0 0 0 3px rgba(126, 97, 18, 0.26);

  --grain-opacity: 0.032;

  color-scheme: light;
}

/* -------------------------------------------------------------------------
   DARK THEME — "Ink & Gold"
   ---------------------------------------------------------------------- */
[data-theme='dark'] {
  --ink:    #EFF2F0;
  --ink-2:  #C4CCC8;
  --ink-3:  #93A09A;
  --ink-4:  #7A8A83;

  --bg:        #0A0E0D;
  --bg-2:      #101614;
  --bg-3:      #18211E;
  --surface:   #0E1412;
  --surface-2: #131B18;

  --line:   #1E2A26;
  --line-2: #2C3C36;
  --line-3: #16201D;

  --accent:      #D4AF5A;   /* 9.32:1 on --bg, 8.79:1 on --bg-2 */
  --accent-2:    #E0C070;
  --accent-soft: #1C2016;
  --accent-line: #3B3719;
  --accent-ink:  #101614;   /* 8.79:1 on the accent fill */

  --celadon:      #8FB3A3;
  --celadon-soft: #121E1A;
  --celadon-line: #26382F;

  --brand:     #111917;
  --brand-2:   #1B2A25;
  --brand-ink: #EFF2F0;
  --brand-mut: #8FA098;

  --good: #5CC08D;  --good-soft: #0E2018;
  --warn: #D4AF5A;  --warn-soft: #1C2016;
  --bad:  #E8756C;  --bad-soft:  #241413;
  --info: #6AA9DD;  --info-soft: #0D1A22;

  --viz-1: #E0705F;
  --viz-2: #DFA84E;
  --viz-3: #D6C356;
  --viz-4: #8DBD63;
  --viz-5: #4FB98D;

  --gold-1: #C9A227;
  --gold-2: #F0DCA0;
  --gold-3: #D4AF5A;
  --sheen:  linear-gradient(100deg, var(--gold-3), var(--gold-1) 38%, var(--gold-2) 56%, var(--gold-1));
  --hairline: linear-gradient(90deg, transparent, var(--accent-line) 20%, var(--accent-line) 80%, transparent);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow:    0 1px 2px rgba(0, 0, 0, 0.4),
               0 10px 24px -10px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.45),
               0 28px 52px -20px rgba(0, 0, 0, 0.7);
  --shadow-gold: 0 14px 40px -18px rgba(212, 175, 90, 0.32);
  --ring: 0 0 0 3px rgba(212, 175, 90, 0.30);

  --grain-opacity: 0.045;

  color-scheme: dark;
}


/* ==========================================================================
   02 · RESET & BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  font-family: var(--font-sans);
  font-size: var(--t-md);
  line-height: 1.68;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
svg { height: auto; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-2); }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--accent-soft); color: var(--ink); }

/* Chinese typography. Letter-spacing exists to separate Latin words; applied
   to CJK it reads as broken spacing, so it is removed for the Chinese
   rendering. Line-height is opened slightly, since CJK glyphs are denser and
   sit taller than Latin lowercase. */
html:lang(zh) h1,
html:lang(zh) h2,
html:lang(zh) h3,
html:lang(zh) h4 { letter-spacing: 0; line-height: 1.28; }
html:lang(zh) .eyebrow { letter-spacing: 0.06em; }
html:lang(zh) body { line-height: 1.8; }
html:lang(zh) .hero h1 { line-height: 1.2; }
hr { border: 0; border-top: 1px solid var(--line); }


/* ==========================================================================
   03 · TYPOGRAPHY
   ========================================================================== */

/* Display headings are serif. Tightened tracking, generous leading. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

h1 { font-size: var(--t-4xl); letter-spacing: -0.02em; line-height: 1.08; }
h2 { font-size: var(--t-3xl); letter-spacing: -0.016em; }
h3 { font-size: var(--t-xl); line-height: 1.28; }
h4 { font-size: var(--t-lg); line-height: 1.32; }

p { text-wrap: pretty; }
p + p { margin-top: var(--s-4); }

/* Small caps label that opens each section. Letterspaced, never shouty. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-5);
}
.eyebrow::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
  flex: none;
}
.eyebrow--plain::before { display: none; }

.lead {
  font-size: var(--t-lg);
  color: var(--ink-2);
  line-height: 1.64;
  max-width: 60ch;
}

.muted { color: var(--ink-3); }
.small { font-size: var(--t-sm); line-height: 1.62; }
.tiny  { font-size: var(--t-xs); line-height: 1.58; }

.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* Drop cap for the opening paragraph of a statement section. */
.dropcap::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 3.4em;
  line-height: 0.82;
  padding: 0.06em 0.1em 0 0;
  color: var(--accent);
  font-weight: 600;
}


/* ==========================================================================
   04 · LAYOUT
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.75rem);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.section--band { background: var(--bg-2); }

.section-head { max-width: 52rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section-head h2 { margin-bottom: var(--s-5); }
.section-head p { color: var(--ink-3); font-size: var(--t-lg); line-height: 1.64; }

.grid { display: grid; gap: var(--s-6); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: var(--s-3) var(--s-5);
  background: var(--accent); color: var(--accent-ink);
  font-weight: 600; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; color: var(--accent-ink); }


/* ==========================================================================
   05 · HEADER
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }

.site-header__inner { display: flex; align-items: center; gap: var(--s-4); min-height: 4.5rem; }

.brand {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-display);
  font-weight: 600; font-size: 1.3rem; letter-spacing: -0.012em;
  color: var(--ink); text-decoration: none; margin-right: auto;
}
.brand:hover { color: var(--ink); }

/* Wordmark: a monogram plate in the brand ground with a brass glyph. */
.brand__mark {
  width: 2.1rem; height: 2.1rem; flex: none;
  border-radius: var(--radius-sm);
  background: var(--brand); color: var(--accent);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1rem; font-weight: 600;
}
[data-theme='dark'] .brand__mark { background: var(--accent); color: var(--accent-ink); }

.brand__suffix {
  font-family: var(--font-sans);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-3);
  padding-left: var(--s-3); margin-left: var(--s-1);
  border-left: 1px solid var(--line-2);
  align-self: center;
}

.nav { display: flex; align-items: center; gap: var(--s-1); }

.nav__link {
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-sm);
  font-size: var(--t-sm); font-weight: 550;
  color: var(--ink-2); text-decoration: none; white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__link:hover { background: var(--bg-3); color: var(--ink); }

.header-tools { display: flex; align-items: center; gap: var(--s-2); }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 2.25rem; height: 2.25rem; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: transparent; color: var(--ink-3); cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.icon-btn:hover { border-color: var(--line-2); color: var(--ink); background: var(--surface); }
.icon-btn svg { width: 1.05rem; height: 1.05rem; }

.lang-btn {
  display: inline-flex; align-items: center; gap: 0.15rem;
  width: auto; padding-inline: var(--s-3);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.04em;
  white-space: nowrap;
}
.lang-btn span { color: var(--ink-4); transition: color var(--dur) var(--ease); }
.lang-btn span.is-active { color: var(--accent); }

.theme-btn .icon-moon { display: none; }
[data-theme='dark'] .theme-btn .icon-sun  { display: none; }
[data-theme='dark'] .theme-btn .icon-moon { display: block; }

.nav-toggle { display: none; }


/* ==========================================================================
   06 · BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 0.78rem 1.5rem;
  border: 1px solid transparent; border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--t-sm); font-weight: 600; letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 1rem; height: 1rem; flex: none; }

.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--accent-2); color: var(--accent-ink); box-shadow: var(--shadow); }

.btn--secondary { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn--secondary:hover { border-color: var(--ink-3); background: var(--surface); color: var(--ink); }

.btn--ghost { background: transparent; color: var(--ink-2); }
.btn--ghost:hover { background: var(--bg-3); color: var(--ink); }

/* On the inverted brand ground. */
.btn--onBrand { background: var(--accent); color: var(--accent-ink); }
.btn--onBrand:hover { background: var(--accent-2); color: var(--accent-ink); }
.btn--outline-light { background: transparent; border-color: color-mix(in srgb, var(--brand-ink) 28%, transparent); color: var(--brand-ink); }
.btn--outline-light:hover { border-color: var(--brand-ink); color: var(--brand-ink); background: color-mix(in srgb, #fff 8%, transparent); }

.btn--lg { padding: 0.95rem 1.9rem; font-size: var(--t-base); }
.btn--sm { padding: 0.5rem 0.95rem; font-size: var(--t-xs); }
.btn--block { width: 100%; }

.btn:disabled, .btn[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; transform: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* Text link with a trailing rule that extends on hover — an editorial cue. */
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-sm); font-weight: 600;
  color: var(--accent); text-decoration: none;
}
.link-arrow svg { width: 0.9rem; height: 0.9rem; transition: transform var(--dur) var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }


/* ==========================================================================
   07 · HERO
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--brand);
  color: var(--brand-ink);
  padding-block: clamp(4rem, 9vw, 8rem) clamp(3.5rem, 7vw, 6rem);
  isolation: isolate;
}

/* Architectural skyline, drawn as layered SVG. Sits behind the copy at low
   contrast so it reads as depth rather than as an illustration to look at.

   The SVG scales with preserveAspectRatio="...slice" (set on the element),
   which behaves like object-fit: cover for an inline SVG — so the same rule
   also works if you swap in an <img>, where object-fit does apply. */
.hero__art {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
}

/* Skyline depth layers. Distant massing is a flat, barely-there fill; near
   towers are outlined and carry a lit-window pattern. Keeping the layers as
   separate groups is what produces the sense of recession. */
.hero__art .b-far { fill: var(--brand-ink); opacity: 0.05; }
.hero__art .b-mid { fill: var(--brand-ink); opacity: 0.09; }
.hero__art .tower { fill: var(--brand-ink); opacity: 0.05; }
.hero__art .tower-edge { stroke: var(--accent); stroke-width: 1.25; fill: none; opacity: 0.42; }
.hero__art .w-lit { fill: var(--accent); opacity: 0.42; }
.hero__art .w-dim { fill: var(--gold-2); opacity: 0.18; }
/* Warm haze from the lower right, so the towers appear lit from within. */
.hero__glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70rem 40rem at 72% 88%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%),
    radial-gradient(48rem 30rem at 88% 20%, color-mix(in srgb, var(--gold-2) 12%, transparent), transparent 66%),
    linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--brand) 82%, transparent) 100%);
}
.hero.grain::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: var(--grain-opacity); 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='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero__inner { position: relative; max-width: 46rem; }

.hero .eyebrow { color: var(--accent); }
.hero h1 { color: var(--brand-ink); margin-bottom: var(--s-6); }
.hero h1 .hero__h1-b { display: block; color: var(--brand-mut); font-weight: 400; font-style: italic; }

.hero__sub {
  font-size: var(--t-lg); line-height: 1.66;
  color: color-mix(in srgb, var(--brand-ink) 82%, transparent);
  max-width: 52ch; margin-bottom: var(--s-8);
}

/* A hairline of brass between the headline and the supporting copy. */
.hero__rule {
  width: 4rem; height: 1px; margin-bottom: var(--s-6);
  background: var(--sheen);
}

.hero__note {
  margin-top: var(--s-5); font-size: var(--t-sm);
  color: var(--brand-mut);
  display: flex; align-items: center; gap: var(--s-2);
}
.hero__note svg { width: 0.9rem; height: 0.9rem; color: var(--accent); flex: none; }

/* --- Credential strip -------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 1px;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  background: color-mix(in srgb, var(--brand-ink) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-ink) 14%, transparent);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.stat { background: color-mix(in srgb, var(--brand) 92%, #000); padding: var(--s-6) var(--s-5); }
.stat__v {
  font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 600;
  color: var(--brand-ink); letter-spacing: -0.02em; line-height: 1.05;
  margin-bottom: var(--s-2); font-variant-numeric: lining-nums tabular-nums;
}
.stat__l { font-size: var(--t-sm); color: var(--brand-mut); line-height: 1.5; }


/* ==========================================================================
   08 · MARQUEE
   ========================================================================== */

.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: var(--bg-2);
  padding-block: var(--s-4);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: slide 52s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }

.marquee__group { display: flex; align-items: center; gap: var(--s-10); padding-inline: var(--s-5); flex: none; }
.marquee__item {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-size: var(--t-sm); font-weight: 550; letter-spacing: 0.02em;
  color: var(--ink-3); white-space: nowrap;
}
.marquee__item::before {
  content: ''; width: 0.28rem; height: 0.28rem; border-radius: 50%;
  background: var(--accent); opacity: 0.5; flex: none;
}


/* ==========================================================================
   09 · CARDS & PANELS
   ========================================================================== */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card h3 { margin-bottom: var(--s-3); }
.card p { color: var(--ink-3); font-size: var(--t-base); line-height: 1.64; }

.card--lift:hover { border-color: var(--line-2); box-shadow: var(--shadow); }

/* Numbered index used across services and process steps. Serif, restrained. */
.card__num, .step__num {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.1em;
  color: var(--ink-4); margin-bottom: var(--s-4);
}

.card--flag { border-left: 2px solid var(--accent); }

/* Panel — a bordered block used for the assessment promo and callouts. */
.panel { border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.panel--brand { background: var(--brand); border-color: var(--brand-2); color: var(--brand-ink); }
.panel--brand h2, .panel--brand h3 { color: var(--brand-ink); }
.panel--brand p { color: var(--brand-mut); }
.panel--brand .eyebrow { color: var(--accent); }
.panel--brand .checklist svg { color: var(--accent); }

.panel__body { padding: clamp(1.75rem, 4vw, 3.25rem); }
.panel--split { display: grid; grid-template-columns: 1.06fr 0.94fr; }
.panel--split > * { min-width: 0; }
.panel__aside {
  border-left: 1px solid var(--brand-2);
  background: color-mix(in srgb, var(--brand-2) 70%, transparent);
  padding: clamp(1.75rem, 4vw, 3.25rem);
  display: flex; flex-direction: column; justify-content: center;
}

.checklist { list-style: none; padding: 0; display: grid; gap: var(--s-4); }
.checklist li { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start; font-size: var(--t-base); line-height: 1.6; }
.checklist svg { width: 1rem; height: 1rem; margin-top: 0.36rem; flex: none; }
.checklist--good svg { color: var(--celadon); }
.checklist--bad svg  { color: var(--bad); }


/* ==========================================================================
   10 · ILLUSTRATED SERVICE CARDS
   Each service carries its own SVG panel rather than a stock icon. The
   illustration sits in a tinted well at the top of the card, so the grid reads
   as editorial content rather than as a list of bullet points.
   ========================================================================== */

.svc {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.svc:hover {
  border-color: var(--accent-line);
  box-shadow: var(--shadow), var(--shadow-gold);
  transform: translateY(-2px);
}

/* The illustration well. A soft tinted ground keeps the linework legible in
   both themes without the art needing its own colour variants. */
.svc__art {
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(150deg, var(--surface-2), var(--bg-3));
  border-bottom: 1px solid var(--line);
  display: grid; place-items: center;
  padding: var(--s-5);
  position: relative;
  overflow: hidden;
}
.svc__art svg { width: 100%; height: 100%; }
[data-theme='dark'] .svc__art { background: linear-gradient(150deg, var(--surface-2), var(--bg)); }

/* Illustration strokes. Two weights so the art has depth. */
.il-fill   { fill: var(--accent); opacity: 0.10; }
.il-line   { fill: none; stroke: var(--ink-3); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0.72; }
.il-accent { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.il-soft   { fill: none; stroke: var(--ink-4); stroke-width: 1; stroke-linecap: round; opacity: 0.5; }
.il-solid  { fill: var(--accent); }
.il-celadon{ fill: none; stroke: var(--celadon); stroke-width: 1.5; stroke-linecap: round; }

.svc__body { padding: var(--s-6); flex: 1; display: flex; flex-direction: column; }
.svc__body h3 { margin-bottom: var(--s-3); }
.svc__body p { color: var(--ink-3); font-size: var(--t-sm); line-height: 1.66; flex: 1; }

/* Deliverable list under each service. */
.svc__list { list-style: none; padding: 0; margin-top: var(--s-5); display: grid; gap: var(--s-2); }
.svc__list li {
  font-size: var(--t-xs); color: var(--ink-3); line-height: 1.5;
  padding-left: var(--s-4); position: relative;
}
.svc__list li::before {
  content: ''; position: absolute; left: 0; top: 0.58em;
  width: 0.3rem; height: 1px; background: var(--accent);
}


/* Scope note under the services grid. Deliberately plain rather than alarming:
   it clarifies what we do not execute ourselves without reading as a
   disclaimer, because the surrounding services are all still ours to direct. */
.svc-note {
  margin-top: var(--s-8);
  max-width: 80ch;
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: var(--t-sm);
  line-height: 1.72;
}

/* Founding-client offer. Framed as an opportunity, so it takes the accent
   tint rather than the muted treatment used for caveats. */
.fee-highlight {
  margin-top: var(--s-8);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
}
.fee-highlight h3 { margin-bottom: var(--s-3); color: var(--ink); }
.fee-highlight p { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.72; max-width: 74ch; }

/* Footnote under the engagement criteria. Dashed border signals "aside". */
.fit-note {
  margin-top: var(--s-6);
  max-width: 82ch;
  padding: var(--s-5) var(--s-6);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  color: var(--ink-3);
  font-size: var(--t-sm);
  line-height: 1.72;
}


/* ==========================================================================
   11 · PROCESS
   ========================================================================== */

.process { display: grid; gap: 0; }

.step {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--s-6);
  padding-block: var(--s-8);
  border-bottom: 1px solid var(--line);
}
.step:first-child { border-top: 1px solid var(--line); }

.step__n {
  font-family: var(--font-display);
  font-size: var(--t-2xl); font-weight: 400; line-height: 1;
  color: var(--accent); opacity: 0.7;
  font-variant-numeric: lining-nums;
}
.step__b h3 { margin-bottom: var(--s-3); }
.step__b p { color: var(--ink-3); max-width: 62ch; }
.step__meta {
  display: block; margin-top: var(--s-4);
  font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 600;
}


/* ==========================================================================
   12 · MARKET TABLE
   ========================================================================== */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}

table.tracks { width: 100%; border-collapse: collapse; min-width: 48rem; }
table.tracks th, table.tracks td {
  text-align: left; padding: var(--s-5) var(--s-6);
  vertical-align: top; border-bottom: 1px solid var(--line);
}
table.tracks thead th {
  background: var(--surface-2);
  font-family: var(--font-sans);
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap;
}
table.tracks tbody tr:last-child td { border-bottom: 0; }
table.tracks tbody tr:hover td { background: var(--surface-2); }
table.tracks th:nth-child(1) { width: 19%; }
table.tracks th:nth-child(2) { width: 25%; }
table.tracks th:nth-child(3) { width: 56%; }

.track__name { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 600; color: var(--ink); display: block; margin-bottom: var(--s-1); }
.track__suits { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.58; }
.track__detail { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.66; }

@media (max-width: 48rem) {
  .table-wrap { border: 0; background: transparent; overflow: visible; }
  table.tracks { min-width: 0; display: block; }
  table.tracks thead { display: none; }
  table.tracks tbody, table.tracks tr, table.tracks td { display: block; width: 100%; }
  table.tracks tr {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: var(--s-5); margin-bottom: var(--s-4);
  }
  table.tracks td { border: 0; padding: 0 0 var(--s-3); }
  table.tracks td:last-child { padding-bottom: 0; }
  table.tracks td:nth-child(2)::before,
  table.tracks td:nth-child(3)::before {
    content: attr(data-label); display: block;
    font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.11em;
    text-transform: uppercase; color: var(--ink-4); margin-bottom: var(--s-2);
  }
}


/* ==========================================================================
   13 · ENGAGEMENT CRITERIA
   ========================================================================== */

.fit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--s-6); }

.fit-col {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); padding: var(--s-6);
}
.fit-col--yes { border-top: 2px solid var(--celadon); }
.fit-col--no  { border-top: 2px solid var(--bad); }

.fit-col__head {
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-5);
  font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: var(--t-lg);
}
.fit-col__head svg { width: 1.1rem; height: 1.1rem; flex: none; }
.fit-col--yes .fit-col__head svg { color: var(--celadon); }
.fit-col--no  .fit-col__head svg { color: var(--bad); }

.fit-col ul { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.fit-col li {
  font-size: var(--t-base); color: var(--ink-2); line-height: 1.6;
  padding-left: var(--s-5); position: relative;
}
.fit-col li::before {
  content: ''; position: absolute; left: 0; top: 0.66em;
  width: 0.35rem; height: 1px; background: var(--line-2);
}
.fit-col--yes li::before { background: var(--celadon); }
.fit-col--no  li::before { background: var(--bad); }


/* ==========================================================================
   14 · FAQ
   ========================================================================== */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }

.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-5);
  padding: var(--s-5) 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-lg);
  color: var(--ink); line-height: 1.4;
  transition: color var(--dur) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }

.faq summary::after {
  content: ''; flex: none; width: 1rem; height: 1rem; margin-top: 0.42rem;
  background-image: linear-gradient(var(--ink-3), var(--ink-3)), linear-gradient(var(--ink-3), var(--ink-3));
  background-size: 100% 1px, 1px 100%;
  background-position: center, center; background-repeat: no-repeat;
  transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }

.faq__answer {
  padding: 0 0 var(--s-6); max-width: 68ch;
  color: var(--ink-2); font-size: var(--t-base); line-height: 1.72;
  animation: faq-in 240ms var(--ease);
}
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }


/* ==========================================================================
   15 · FORMS
   ========================================================================== */

.form { display: grid; gap: var(--s-5); }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--s-5); }
.field { display: grid; gap: var(--s-2); }

.field label { font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.field .optional { color: var(--ink-4); font-weight: 400; }

.field input, .field select, .field textarea {
  width: 100%; padding: 0.7rem 0.85rem;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); font-size: var(--t-base);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  appearance: none;
}
.field textarea { min-height: 7rem; resize: vertical; line-height: 1.62; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235E666D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.85rem center;
  padding-right: 2.4rem; cursor: pointer;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--ring);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-4); }

/* The dropdown LIST is drawn by the OS with its own (light) background, so the
   options must be given dark-on-light colours regardless of the page theme or
   the surrounding band. Without this, the CTA band's near-white text made the
   options unreadable against the native white popup. */
.field select option,
.cta-band .field select option {
  background-color: #FFFFFF;
  color: #14171A;
}

.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--bad); }
.field__error { font-size: var(--t-xs); color: var(--bad); display: none; align-items: center; gap: var(--s-2); }
.field.is-invalid .field__error { display: flex; }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); justify-content: space-between; }

.form__status {
  margin-top: var(--s-4); padding: var(--s-4) var(--s-5);
  border-radius: var(--radius); font-size: var(--t-base);
  display: none; align-items: flex-start; gap: var(--s-3);
}
.form__status.is-visible { display: flex; }
.form__status--ok  { background: var(--good-soft); color: var(--good); border: 1px solid color-mix(in srgb, var(--good) 28%, transparent); }
.form__status--err { background: var(--bad-soft);  color: var(--bad);  border: 1px solid color-mix(in srgb, var(--bad) 28%, transparent); }
.form__status svg { width: 1rem; height: 1rem; flex: none; margin-top: 0.28rem; }
.form__status a { color: inherit; font-weight: 600; }

.spinner {
  width: 0.95rem; height: 0.95rem;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* ==========================================================================
   16 · MARKET SELECTOR
   ========================================================================== */

.market-pick { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

.market-card {
  position: relative; display: block; width: 100%; text-align: left;
  padding: var(--s-6);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.market-card:hover { border-color: var(--accent-line); box-shadow: var(--shadow), var(--shadow-gold); transform: translateY(-2px); }
.market-card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-gold); }

.market-card__flag {
  width: 2.2rem; height: 2.2rem; border-radius: var(--radius-sm);
  display: grid; place-items: center; margin-bottom: var(--s-4);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--accent); font-weight: 700; font-size: var(--t-xs); letter-spacing: 0.04em;
}
.market-card__name { display: block; font-family: var(--font-display); font-size: var(--t-lg); font-weight: 600; color: var(--ink); margin-bottom: var(--s-1); }
.market-card__markets {
  display: block; font-size: var(--t-xs); font-weight: 650; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); margin-bottom: var(--s-3);
}
.market-card__note { display: block; font-size: var(--t-sm); color: var(--ink-3); line-height: 1.58; }

.market-card.is-selected::after {
  content: ''; position: absolute; top: var(--s-5); right: var(--s-5);
  width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--accent);
}


/* ==========================================================================
   17 · ELIGIBILITY CHECK
   ========================================================================== */

.qc { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.qc__body { padding: clamp(1.5rem, 3.5vw, 2.75rem); }

.qc__step { display: none; }
.qc__step.is-active { display: block; animation: step-in 260ms var(--ease); }

.qc__meta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  margin-bottom: var(--s-5);
  font-size: var(--t-xs); letter-spacing: 0.11em; text-transform: uppercase;
  font-weight: 650; color: var(--ink-4);
}
.qc__dots { display: flex; gap: 0.3rem; }
.qc__dot { width: 1.5rem; height: 2px; background: var(--bg-3); transition: background var(--dur) var(--ease); }
.qc__dot.is-done, .qc__dot.is-now { background: var(--accent); }

.qc__q {
  font-family: var(--font-display); font-size: var(--t-xl); font-weight: 600;
  color: var(--ink); line-height: 1.3; letter-spacing: -0.012em;
  margin-bottom: var(--s-6); max-width: 34ch;
}

.qc__options { display: grid; gap: var(--s-2); }
.qc__opt {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  width: 100%; text-align: left; padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink-2); font-size: var(--t-base);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.qc__opt:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateX(3px); }
.qc__opt svg { width: 0.95rem; height: 0.95rem; flex: none; color: var(--accent); opacity: 0; transition: opacity var(--dur) var(--ease); }
.qc__opt:hover svg { opacity: 1; }

.qc__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line);
}

.qc__verdict { display: grid; gap: var(--s-5); }

.qc__badge {
  display: inline-flex; align-items: center; gap: var(--s-3); align-self: start;
  padding: 0.4rem 0.95rem; border-radius: 99px;
  font-size: var(--t-sm); font-weight: 650; letter-spacing: 0.01em;
}
.qc__badge svg { width: 1rem; height: 1rem; }
.qc__badge--yes { background: var(--good-soft); color: var(--good); }
.qc__badge--mid { background: var(--warn-soft); color: var(--warn); }
.qc__badge--no  { background: var(--bad-soft);  color: var(--bad); }

.qc__headline { font-family: var(--font-display); font-size: var(--t-xl); font-weight: 600; color: var(--ink); line-height: 1.32; }
.qc__meter { height: 5px; background: var(--bg-3); overflow: hidden; }
.qc__meter-fill { height: 100%; width: 0%; background: var(--sheen); transition: width 700ms var(--ease); }


/* ==========================================================================
   18 · ASSESSMENT — progress & questions
   ========================================================================== */

.assess__progress-wrap {
  position: sticky; top: 4.5rem; z-index: 40;
  background: color-mix(in srgb, var(--bg) 93%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  padding-block: var(--s-3);
}
.assess__progress-meta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  font-size: var(--t-xs); letter-spacing: 0.09em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-4); margin-bottom: var(--s-2);
}
.assess__bar { height: 2px; background: var(--bg-3); overflow: hidden; }
.assess__bar-fill { height: 100%; width: 0%; background: var(--accent); transition: width 320ms var(--ease); }

.assess__stage { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 6vw, 5rem); }
.assess__step { display: none; }
.assess__step.is-active { display: block; animation: step-in 260ms var(--ease); }
@keyframes step-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.assess__dim {
  font-family: var(--font-sans); font-size: var(--t-xs); font-weight: 650;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent);
  margin-bottom: var(--s-3);
}
.assess__q {
  font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 600;
  color: var(--ink); line-height: 1.24; letter-spacing: -0.014em;
  margin-bottom: var(--s-3); max-width: 32ch;
}
.assess__hint { color: var(--ink-3); font-size: var(--t-sm); margin-bottom: var(--s-8); }

.options { display: grid; gap: var(--s-2); max-width: 44rem; }

.option {
  position: relative; display: grid; grid-template-columns: auto 1fr;
  gap: var(--s-4); align-items: center;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.option:hover { border-color: var(--line-2); background: var(--surface-2); }

.option input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

.option__mark {
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  border: 1.5px solid var(--line-2); display: grid; place-items: center; flex: none;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.option__mark::after {
  content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--accent-ink); transform: scale(0); transition: transform 160ms var(--ease);
}
.option__label { font-size: var(--t-base); color: var(--ink-2); line-height: 1.55; }

/* :has() styles the row from the hidden radio; .is-selected is the JS
   fallback for browsers without it. Both are listed together so the two
   paths can never drift apart. */
.option:has(input:checked), .option.is-selected {
  border-color: var(--accent); background: var(--accent-soft);
}
.option:has(input:checked) .option__mark, .option.is-selected .option__mark { border-color: var(--accent); background: var(--accent); }
.option:has(input:checked) .option__mark::after, .option.is-selected .option__mark::after { transform: scale(1); }
.option:has(input:checked) .option__label, .option.is-selected .option__label { color: var(--ink); font-weight: 550; }
.option:has(input:focus-visible) { box-shadow: var(--ring); border-color: var(--accent); }

.assess__nav {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line);
  max-width: 44rem;
}

.assess__intro { max-width: 46rem; }
.assess__intro ul { margin: var(--s-6) 0; }

.assess__error {
  display: none; margin-top: var(--s-4); padding: var(--s-3) var(--s-4);
  background: var(--bad-soft); color: var(--bad); font-size: var(--t-sm);
  border: 1px solid color-mix(in srgb, var(--bad) 28%, transparent);
}
.assess__error.is-visible { display: block; }


/* ==========================================================================
   19 · RESULTS
   ========================================================================== */

.result { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); }

.result__top {
  display: grid; grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface);
}

.dial { position: relative; width: clamp(9rem, 20vw, 12rem); aspect-ratio: 1; flex: none; }
.dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dial__track { fill: none; stroke: var(--bg-3); stroke-width: 9; }
.dial__value { fill: none; stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset 900ms var(--ease), stroke 400ms var(--ease); }
.dial__inner { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.dial__score {
  font-family: var(--font-display); font-size: clamp(2.25rem, 5.5vw, 3rem);
  font-weight: 600; color: var(--ink); letter-spacing: -0.03em; line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.dial__of { font-size: var(--t-xs); color: var(--ink-4); letter-spacing: 0.1em; margin-top: 0.3rem; }

.band {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 0.22rem 0.75rem; border-radius: 99px;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  margin-bottom: var(--s-4);
}
.band--1 { background: var(--bad-soft);  color: var(--bad);  }
.band--2 { background: var(--warn-soft); color: var(--warn); }
.band--3 { background: var(--info-soft); color: var(--info); }
.band--4 { background: var(--good-soft); color: var(--good); }
.band--5 { background: var(--good-soft); color: var(--good); }

.result__headline { font-family: var(--font-display); font-size: var(--t-xl); color: var(--ink); font-weight: 600; line-height: 1.34; margin-bottom: var(--s-3); }
.result__summary { color: var(--ink-3); font-size: var(--t-base); line-height: 1.66; }

.dims { display: grid; gap: var(--s-6); }
.dims__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }

.radar-box {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); padding: var(--s-5); display: grid; place-items: center;
}
.radar-box svg { width: 100%; max-width: 24rem; overflow: visible; }
.radar-grid  { fill: none; stroke: var(--line); stroke-width: 1; }
.radar-axis  { stroke: var(--line); stroke-width: 1; }
.radar-shape { fill: color-mix(in srgb, var(--accent) 16%, transparent); stroke: var(--accent); stroke-width: 1.75; stroke-linejoin: round; }
.radar-dot   { fill: var(--accent); }
.radar-label { fill: var(--ink-3); font-size: 10px; font-weight: 600; font-family: var(--font-sans); }

.bars { display: grid; gap: var(--s-5); }
.bar__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-2); }
.bar__name { font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.bar__weight { font-size: var(--t-xs); color: var(--ink-4); font-weight: 500; }
.bar__score { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; flex: none; }
.bar__track { height: 3px; background: var(--bg-3); overflow: hidden; }
.bar__fill { height: 100%; width: 0%; transition: width 800ms var(--ease), background 400ms var(--ease); }
.bar__note { font-size: var(--t-xs); color: var(--ink-3); margin-top: var(--s-2); line-height: 1.55; }

.gap {
  border: 1px solid var(--line); border-left: 2px solid var(--warn);
  border-radius: var(--radius); background: var(--surface); padding: var(--s-5);
}
.gap--critical { border-left-color: var(--bad); }
.gap__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.gap__dim { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); }
.gap__q { font-family: var(--font-display); font-size: var(--t-base); font-weight: 600; color: var(--ink); line-height: 1.45; width: 100%; }
.gap__body { display: grid; gap: var(--s-3); }
.gap__issue { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.62; }
.gap__fix {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-3);
  padding: var(--s-4); border-radius: var(--radius-sm);
  background: var(--bg-3); font-size: var(--t-sm); line-height: 1.62; color: var(--ink-2);
}
.gap__fix svg { width: 0.95rem; height: 0.95rem; color: var(--accent); flex: none; margin-top: 0.26rem; }
.gap__fix strong { color: var(--ink); font-weight: 650; }

.tag {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.15rem 0.55rem; border-radius: 99px;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.tag--critical { background: var(--bad-soft); color: var(--bad); }
.tag--warn     { background: var(--warn-soft); color: var(--warn); }
.tag svg { width: 0.7rem; height: 0.7rem; }

.route {
  padding: clamp(1.5rem, 3.5vw, 2.5rem); border-radius: var(--radius-lg);
  background: var(--brand); color: var(--brand-ink); border: 1px solid var(--brand-2);
}
.route h3 { color: var(--brand-ink); margin-bottom: var(--s-3); }
.route p { color: var(--brand-mut); font-size: var(--t-base); line-height: 1.7; }
.route .eyebrow { color: var(--accent); }

.gate {
  border: 1px solid var(--accent-line); border-radius: var(--radius-lg);
  background: var(--accent-soft); padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
.gate h3 { margin-bottom: var(--s-3); }
.gate p { color: var(--ink-2); font-size: var(--t-base); margin-bottom: var(--s-5); max-width: 52ch; }
.gate__form { display: grid; grid-template-columns: 1fr auto; gap: var(--s-3); max-width: 34rem; }
.gate__form .field { min-width: 0; }
.gate__err { font-size: var(--t-sm); color: var(--bad); margin-top: var(--s-3); display: none; }
.gate__err.is-visible { display: block; }

.locked { display: none; }
.locked.is-unlocked { display: block; }

.result__section { display: grid; gap: var(--s-5); }
.result__section > h3 { font-size: var(--t-2xl); }

.disclaimer {
  padding: var(--s-5); border-radius: var(--radius);
  background: var(--bg-3); border: 1px solid var(--line);
  font-size: var(--t-sm); color: var(--ink-3); line-height: 1.66;
}
.disclaimer strong { color: var(--ink-2); font-weight: 650; }

.result__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line); }

.share-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

.next-steps { display: grid; gap: var(--s-4); }
.next-step {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: start;
  padding: var(--s-5); border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface);
}
.next-step__i {
  width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; flex: none;
  font-family: var(--font-display); font-size: var(--t-sm); font-weight: 600;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.next-step h4 { margin-bottom: var(--s-1); font-size: var(--t-base); }
.next-step p { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.58; margin-bottom: var(--s-3); }


/* ==========================================================================
   20 · CTA BAND
   ========================================================================== */

.cta-band {
  border-radius: var(--radius-lg);
  background: var(--brand); color: var(--brand-ink);
  padding: clamp(2rem, 5vw, 3.5rem);
  border: 1px solid var(--brand-2);
}
.cta-band__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.cta-band h2 { color: var(--brand-ink); margin-bottom: var(--s-4); }
.cta-band p { color: var(--brand-mut); }
.cta-band .eyebrow { color: var(--accent); }
.cta-band .field label { color: var(--brand-ink); }
.cta-band .field input, .cta-band .field select, .cta-band .field textarea {
  /* background-COLOR, not the `background` shorthand. The shorthand resets
     background-repeat to its initial value (repeat), which made the select's
     chevron tile across the whole control — it rendered as a row of "VVVVV".
     Any future override here must stay on longhands for the same reason. */
  background-color: color-mix(in srgb, #fff 7%, transparent);
  border-color: color-mix(in srgb, var(--brand-ink) 20%, transparent);
  color: var(--brand-ink);
}
.cta-band .field input::placeholder, .cta-band .field textarea::placeholder { color: color-mix(in srgb, var(--brand-ink) 42%, transparent); }
.cta-band .field input:focus, .cta-band .field select:focus, .cta-band .field textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(212, 175, 90, 0.26);
}
.cta-band .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23C4CCC8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.cta-band .form__status--ok  { background: color-mix(in srgb, var(--good) 20%, transparent); color: var(--brand-ink); }
.cta-band .form__status--err { background: color-mix(in srgb, var(--bad) 20%, transparent);  color: var(--brand-ink); }
.cta-band .form__status a { color: var(--accent); }

.cta-band__contact { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
.cta-band__item { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-base); color: var(--brand-ink); text-decoration: none; }
a.cta-band__item:hover { color: var(--accent); }
.cta-band__item svg { width: 1rem; height: 1rem; color: var(--accent); flex: none; }


/* ==========================================================================
   21 · FOOTER
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(2.75rem, 5vw, 4rem) var(--s-8);
  background: var(--bg-2); font-size: var(--t-sm);
}
.footer__grid {
  display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem); margin-bottom: var(--s-8);
}
.footer__brand p { color: var(--ink-3); max-width: 34ch; margin-top: var(--s-4); line-height: 1.62; }
.footer__h {
  font-family: var(--font-sans); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-4); margin-bottom: var(--s-4);
}
.footer__list { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.footer__list a, .footer__list span { color: var(--ink-2); text-decoration: none; }
.footer__list a:hover { color: var(--accent); }

.footer__disclaimer {
  padding-top: var(--s-6); border-top: 1px solid var(--line);
  color: var(--ink-4); font-size: var(--t-xs); line-height: 1.68; max-width: 96ch;
}
.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-4); margin-top: var(--s-6); color: var(--ink-4); font-size: var(--t-xs);
}

/* Shown only when the registered company name differs from the brand, so a
   reader is not left wondering why two names appear. Spans the full width
   beneath the copyright line. */
.footer__trading { flex-basis: 100%; color: var(--ink-4); font-size: var(--t-xs); }


/* ==========================================================================
   22 · PRINT-ONLY ELEMENTS
   Shown only on paper. Kept out of the screen layout entirely so it can never
   affect spacing.
   ========================================================================== */

.print-only { display: none; }


/* ==========================================================================
   23 · ORNAMENT
   ========================================================================== */

/* Hairline rule with a centred diamond, used to mark a structural boundary. */
.ornament { display: flex; align-items: center; gap: var(--s-4); margin-block: clamp(2.5rem, 5vw, 4rem); }
.ornament::before, .ornament::after { content: ''; flex: 1; height: 1px; background: var(--hairline); }
.ornament__mark { width: 0.4rem; height: 0.4rem; flex: none; transform: rotate(45deg); background: var(--sheen); }

.ticked { position: relative; }
.ticked::before, .ticked::after {
  content: ''; position: absolute; width: 0.7rem; height: 0.7rem;
  border-color: var(--accent-line); border-style: solid; pointer-events: none;
}
.ticked::before { top: 0.5rem; left: 0.5rem; border-width: 1px 0 0 1px; }
.ticked::after  { bottom: 0.5rem; right: 0.5rem; border-width: 0 1px 1px 0; }


/* ==========================================================================
   24 · UTILITIES & MOTION
   ========================================================================== */

.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;
}

.stack { display: grid; gap: var(--s-5); }
.stack--lg { gap: var(--s-8); }
.stack--sm { gap: var(--s-3); }
.center { text-align: center; }
.center .section-head { margin-inline: auto; }
.center .lead { margin-inline: auto; }
.mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }
.mb-0 { margin-bottom: 0; }
.nowrap { white-space: nowrap; }

.reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

.reveal[data-delay='1'] { transition-delay: 60ms; }
.reveal[data-delay='2'] { transition-delay: 120ms; }
.reveal[data-delay='3'] { transition-delay: 180ms; }
.reveal[data-delay='4'] { transition-delay: 240ms; }
.reveal[data-delay='5'] { transition-delay: 300ms; }
.reveal[data-delay='6'] { transition-delay: 360ms; }


/* ==========================================================================
   25 · RESPONSIVE
   ========================================================================== */

@media (max-width: 64rem) {
  .nav { display: none; }
  .nav-toggle { display: inline-grid; }
  .nav.is-open {
    display: flex; flex-direction: column; align-items: stretch; gap: var(--s-1);
    position: absolute; left: 0; right: 0; top: 100%;
    padding: var(--s-4) clamp(1.25rem, 4vw, 2.75rem) var(--s-6);
    background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg);
  }
  .nav.is-open .nav__link { padding: var(--s-3) var(--s-2); font-size: var(--t-md); }
  .nav.is-open .nav__cta { margin-top: var(--s-3); }

  .panel--split { grid-template-columns: 1fr; }
  .panel__aside { border-left: 0; border-top: 1px solid var(--brand-2); }
  .cta-band__grid { grid-template-columns: 1fr; }
  .dims__grid { grid-template-columns: 1fr; }
  .radar-box { order: -1; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .hero__inner { max-width: 100%; }
}

@media (max-width: 44rem) {
  body { font-size: var(--t-base); }
  .result__top { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .result__top .result__summary { max-width: 44ch; }
  .step { grid-template-columns: 1fr; gap: var(--s-3); padding-block: var(--s-6); }
  .gate__form { grid-template-columns: 1fr; }
  .form__foot { flex-direction: column; align-items: stretch; }
  .form__foot .btn { width: 100%; }
  .assess__nav, .qc__foot { flex-direction: column-reverse; align-items: stretch; }
  .assess__nav .btn, .qc__foot .btn { width: 100%; }
  .footer__grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
}

/* Privacy notice (privacy.html). Legal text is held in full per language
   rather than in the i18n dictionaries, so the language toggle shows one
   block and hides the others. Without JS, html[lang] stays 'en'. */
[data-lang-block] { display: none; }
html[lang='en'] [data-lang-block='en'],
html[lang='bm'] [data-lang-block='bm'],
html[lang='zh'] [data-lang-block='zh'] { display: block; }
.legal h2 { font-size: var(--t-xl); margin: var(--s-8) 0 var(--s-3); }
.legal p, .legal li { color: var(--ink-2); }
.legal ul { padding-left: 1.25rem; }
.legal li + li { margin-top: var(--s-2); }

/* Small phones (375px and below): brand + three header controls overran the
   viewport and pushed the menu button off-screen. Drop the suffix, tighten. */
@media (max-width: 26rem) {
  .site-header__inner { gap: var(--s-2); }
  .brand__suffix { display: none; }
  .header-tools { gap: var(--s-1); }
  .lang-btn { padding-inline: var(--s-2); }
  /* A long nowrap label ("Begin the readiness assessment") was wider than a
     320px screen and shifted the whole page sideways. Let it wrap. */
  .btn { white-space: normal; text-align: center; max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
}


/* ==========================================================================
   26 · IMAGERY SLOTS
   Placeholders for real photography. Drop an <img> inside and it fills the
   frame; the SVG fallback is shown only while the slot is empty.
   ========================================================================== */

.figure { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--bg-3); }
.figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.figure--wide { aspect-ratio: 21 / 9; }
.figure--tall { aspect-ratio: 4 / 5; }
.figure--square { aspect-ratio: 1 / 1; }

.figure figcaption {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: var(--s-6) var(--s-5) var(--s-5);
  background: linear-gradient(transparent, color-mix(in srgb, var(--brand) 88%, transparent));
  color: var(--brand-ink); font-size: var(--t-sm); line-height: 1.5;
}


/* ==========================================================================
   27 · PRINT
   ========================================================================== */

@media print {
  :root {
    --bg: #fff; --bg-2: #fff; --bg-3: #F2F0EA;
    --surface: #fff; --surface-2: #FAF9F6;
    --ink: #000; --ink-2: #222; --ink-3: #555; --ink-4: #777;
    --line: #CCC; --line-2: #BBB; --line-3: #E5E5E5;
    --accent: #6E5410; --accent-2: #6E5410; --accent-soft: #F7F2E4; --accent-line: #C9BB94;
    --brand: #111; --brand-2: #111; --brand-ink: #fff; --brand-mut: #CCC;
    --shadow-sm: none; --shadow: none; --shadow-lg: none; --shadow-gold: none;
  }

  @page { margin: 15mm; }

  /* PRINT CLIPPING FIX — do not remove.
     overflow-x: hidden on html/body is a common cause of a browser printing
     only the first page. Print needs the document to flow, so the overflow
     lock is released and every height constraint removed. */
  html, body {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    width: auto !important;
  }
  body {
    /* Keep the palette's ink and rules rather than letting the browser drop
       backgrounds entirely. */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Nothing may be sticky or fixed on paper. */
  * { position: static !important; }

  .print-only { display: block !important; }
  .print-head {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 8pt;
    margin-bottom: 16pt;
    border-bottom: 1px solid #999;
  }
  .print-head__brand { font-weight: 700; font-size: 12pt; letter-spacing: 0.02em; }
  .print-head__doc { font-size: 10pt; color: #444; }
  .print-head__date { font-size: 9pt; color: #666; }

  .site-header, .site-footer, .skip-link, .assess__progress-wrap,
  .assess__nav, .result__actions, .gate, .btn, .nav, .header-tools,
  .marquee, .hero__art, .hero__glow, .ornament, .share-row, .qc { display: none !important; }

  body { font-size: 10.5pt; background: #fff; color: #000; }
  .section, .assess__stage { padding-block: 0 !important; }
  .container { max-width: none; padding-inline: 0; }

  /* Show the report, and only the report — but ONLY when one exists.
     readiness.js adds .has-report to <html> once results have been rendered.
     Gating on that class rather than suppressing the intro and flow
     unconditionally matters: printing from the intro screen should produce the
     intro, not a blank report with empty sections. */
  html.has-report #assessIntro,
  html.has-report #assessFlow { display: none !important; }
  html.has-report #assessResult,
  html.has-report #assessResult[hidden] { display: block !important; }

  .assess__step { display: none !important; }
  .assess__step.is-result { display: block !important; }
  /* The report is meant to be complete on paper, so the soft email gate is
     opened for printing. It is a lead-capture gate, not a security boundary. */
  .locked { display: block !important; }
  #gate { display: none !important; }

  /* Long URLs after link text are noisy in a document; the report contains
     almost no external links, and the ones it has are not useful on paper. */
  .radar-box svg { max-width: 100%; }
  .reveal { opacity: 1 !important; transform: none !important; }

  .gap, .card, .svc, .fit-col, .route, .panel, .result__top, .radar-box, .next-step {
    break-inside: avoid; page-break-inside: avoid;
  }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }

  /* Solid fills print unpredictably — use a rule instead. */
  .route, .cta-band, .panel--brand, .hero { background: #fff !important; color: #000 !important; border: 1px solid #999; }
  .route h3, .cta-band h2, .panel--brand h2, .panel--brand h3, .hero h1 { color: #000 !important; }
  .route p, .cta-band p, .panel--brand p, .hero__sub, .stat__l { color: #333 !important; }

  .radar-shape { fill: rgba(0,0,0,0.08); stroke: #000; }
  .radar-dot { fill: #000; }
  .il-line, .il-soft { stroke: #666; }
  .il-accent, .il-celadon { stroke: #000; }

  a { color: #000; text-decoration: none; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 8pt; color: #555; }
  a[href^='#']::after, a[href^='mailto']::after { content: ''; }
}