@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Instrument+Serif:ital@0;1&family=Geist+Mono:wght@400;500&display=swap');

/* ── Crest RTO — Design Tokens (marketing site) ──
   NOTE: intentionally diverged from crest-rto-app/brand/brand.css (2026-08-06).
   The site is sans-dominant; serif is now reserved for ONE use — the pull quote.
   (2026-08-18: serif was previously also carrying the wordmark, hero emphasis,
   numerals and the rate figure. Six uses is not an accent, it is inconsistency.)
   The app's report renderers still use the original serif-led system — do not
   sync these two without deciding which system should win for product reports. */
:root {
  /* Colour — Institutional Ink palette */
  --ink:          #1A1815;
  --ink-soft:     #2D2A26;
  --paper:        #F2EEE5;   /* page ground */
  --paper-lift:   #FBFAF6;   /* raised surfaces — cards must separate from the ground */
  --paper-warm:   #E8E2D4;   /* alternate band */
  --bone:         #D6CFBF;
  --muted:        #6B6660;
  --line:         rgba(26, 24, 21, 0.09);
  --line-strong:  rgba(26, 24, 21, 0.16);
  --forest:       #1F3D2B;
  --forest-deep:  #14291C;
  --forest-soft:  #6B9577;

  /* RAG status colours */
  --rag-green:        #1a7a3c;
  --rag-green-bg:     rgba(26, 122, 60, 0.08);
  --rag-amber:        #92600a;
  --rag-amber-bg:     rgba(146, 96, 10, 0.08);
  --rag-red:          #a01c1c;
  --rag-red-bg:       rgba(160, 28, 28, 0.08);

  /* Typography — sans-dominant, serif reserved for the pull quote */
  --font-sans:    'Instrument Sans', -apple-system, system-ui, sans-serif;
  --font-serif:   'Instrument Serif', Georgia, serif;
  --font-mono:    'Geist Mono', 'Courier New', monospace;

  /* Spacing */
  --space-xs:   8px;
  --space-sm:   16px;
  --space-md:   24px;
  --space-lg:   40px;
  --space-xl:   64px;
  --space-2xl:  96px;
  --space-3xl:  140px;

  /* Border radius */
  --radius-sm:  3px;
  --radius-md:  6px;

  --shadow-sm:  0 1px 3px rgba(26,24,21,0.08);
  --shadow-md:  0 4px 16px rgba(26,24,21,0.10);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Focus — one visible treatment everywhere, never removed */
:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 3px;
  border-radius: 2px;
}
[data-dark] :focus-visible, .cta-band :focus-visible { outline-color: var(--forest-soft); }

/* ── Typography helpers ── */
.t-display {
  font-family: var(--font-sans);
  font-size: clamp(42px, 5.4vw, 72px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.038em;
}
.t-headline {
  font-family: var(--font-sans);
  font-size: clamp(30px, 3.7vw, 50px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.032em;
}
.t-subhead {
  font-family: var(--font-sans);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.018em;
}
.t-section {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
/* Second clause of a two-tone headline — same size, quieter weight + colour */
.t-quiet { color: var(--muted); font-weight: 500; }

.t-lede {
  font-family: var(--font-sans);
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--muted);
}
.t-body   { font-family: var(--font-sans); font-size: 16px; font-weight: 400; line-height: 1.62; }
.t-small  { font-family: var(--font-sans); font-size: 14px; font-weight: 400; line-height: 1.55; }
.t-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--forest);
}
.t-mono   { font-family: var(--font-mono); font-size: 13px; }
.t-muted  { color: var(--muted); }

/* ── RAG badges ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.badge-green  { background: var(--rag-green-bg);  color: var(--rag-green); }
.badge-amber  { background: var(--rag-amber-bg);  color: var(--rag-amber); }
.badge-red    { background: var(--rag-red-bg);    color: var(--rag-red); }
.badge-grey   { background: rgba(26,24,21,0.06);  color: var(--muted); }

/* ── Contour Mark ──
   Three nested contour lines around one summit: shared slope, constant spacing
   at the baseline. Replaces the three offset chevrons, which merged into a
   solid blob below ~48px because the stroke was 7 units on a 32 grid. */
.crest-mark path { stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: miter; fill: none; }

/* ── Dividers ── */
hr { border: none; border-top: 1px solid var(--bone); margin: var(--space-lg) 0; }