/* ============================================================
   CHES design system — layer 1: tokens, reset, typography.
   Three-colour palette: white, olive green, light blue. No orange —
   any text sitting on a green or blue surface is white, never accent-coloured.
   The custom property names (--navy, --green) are kept from the previous
   palette to avoid touching every usage site; only their hex values changed.
   ============================================================ */

:root {
  /* palette — the only four hex values in the system */
  --navy:   #2e6da4; /* the "light shade of blue" — headings, buttons, hero overlay */
  /* Spring green, lightened one step further after client review — the
     previous value read as too dark for accent text (hero, section headings).
     Still clears 4.75:1 against white, comfortably above the 4.5:1 floor. */
  --green:  #0f844b;
  /* Small green text (eyebrow labels, inline links) only. The brand green
     measures 4.13:1 on the darkened cream — under the 4.5:1 floor for text
     below 18px. This is one step darker, visually near-identical at label
     size, and clears 4.89:1. Buttons, bands, icons and large accents all
     keep --green so the site's green character is unchanged. */
  --green-ink: #0d7743;
  /* Warm cream page ground, darkened so the two surfaces read as a deliberate
     pair rather than an accident, and a warm off-white for card surfaces —
     pure white is not used anywhere on the site. */
  --cream:  #f2efe6;
  --white:  #fbfaf7;
  /* A lighter tint of --navy used only for full-width bands (utility bar,
     footer) — those read as too heavy at the full-strength blue. Headings,
     buttons and the hero overlay keep --navy unchanged. */
  --navy-band: #32769f;
  /* Dark slate for body copy and nav text. Blue is light enough that using it
     for small/paragraph text read as washed-out across multiple sections —
     blue is now reserved for headings only, where its size carries it fine. */
  --ink: #313d49;

  /* derived tints — all colour-mix, never new hex */
  --navy-90:   color-mix(in srgb, var(--navy) 90%, black);
  --navy-tint: color-mix(in srgb, var(--navy) 8%, var(--white));
  --green-dark: color-mix(in srgb, var(--green) 85%, black);
  --green-tint: color-mix(in srgb, var(--green) 8%, var(--white));

  --text:       var(--navy);
  --text-muted: var(--ink);
  --border:     color-mix(in srgb, var(--navy) 14%, var(--cream));

  --font-head: "Source Serif 4", Georgia, serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, sans-serif;

  --max-width: 1180px;
  --gutter: 1.5rem;
  --radius: 10px;
  --shadow:    0 1px 3px color-mix(in srgb, var(--navy) 12%, transparent);
  --shadow-lg: 0 8px 28px color-mix(in srgb, var(--navy) 16%, transparent);

  /* --ease drives small UI transitions (hover, focus, colour). --ease-soft is
     a longer-tailed curve for entrances: it decelerates far more gradually,
     which is what reads as "smooth" on scroll reveals rather than the abrupt
     settle of a standard ease-out. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
}

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.18;
  color: var(--navy);
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.1rem, 4.4vw, 3.2rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.22rem; }
h4 { font-size: 1.02rem; }

p  { margin: 0 0 1.1rem; color: var(--text-muted); }
ul { color: var(--text-muted); padding-left: 1.15rem; }
li { margin-bottom: 0.4rem; }

a { color: var(--green-ink); text-decoration: none; }
a:hover { color: var(--green-dark); text-decoration: underline; }

img { max-width: 100%; display: block; }

/* ---------- layout primitives ---------- */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding: clamp(3.5rem, 7vw, 6rem) 0; position: relative; }
.section--alt   { background: var(--white); }
.section--navy  { background: var(--navy); }
.section--navy h2, .section--navy h3 { color: var(--white); }
.section--navy p { color: color-mix(in srgb, var(--white) 82%, var(--navy)); }

/* Solid green dark band — used for the Impact and Support sections, so navy
   itself stays reserved for the utility bar and footer only. Never blended with
   navy: the site uses two distinct dark colours, not a mixed third hue. */
/* Uses --green directly, not --green-dark — the darkened variant read as
   almost black-green on the Impact and Support bands. White text on this
   still measures 4.75:1. */
.section--green { background: var(--green); }
.section--green h2, .section--green h3 { color: var(--white); }
.section--green p { color: color-mix(in srgb, var(--white) 88%, var(--green)); }

.lede { max-width: 62ch; font-size: 1.13rem; }

/* ---------- eyebrow: rule + letterspaced label above a heading ---------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 0.8rem;
  font-size: 0.775rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-ink);
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--green);
  flex: none;
}
/* On any dark green/blue band, accent text is white — never orange. */
.section--navy .eyebrow,
.section--green .eyebrow,
.page-head .eyebrow { color: var(--white); }
.section--navy .eyebrow::before,
.section--green .eyebrow::before,
.page-head .eyebrow::before { background: var(--white); }

/* ---------- two-tone headline: accent on the second phrase ---------- */

.h-two-tone .accent { color: var(--green); }
/* On ANY dark band the accent phrase is white. .page-head was missing from
   this list, which left the subpage h1 accent rendering green-on-blue at
   1.15:1 — effectively invisible. Every dark surface must be listed here. */
.section--navy .h-two-tone .accent,
.section--green .h-two-tone .accent,
.page-head .h-two-tone .accent { color: var(--white); }

/* ---------- inline statistic inside prose ---------- */

.stat-inline {
  font-weight: 700;
  color: var(--green-ink);
  font-family: var(--font-head);
}
.section--navy .stat-inline { color: var(--white); }

/* ---------- scroll reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  /* Longer duration on the soft curve — most of the travel happens early and
     the last few pixels ease out slowly, which is what reads as smooth. */
  transition: opacity 0.85s var(--ease-soft), transform 0.85s var(--ease-soft);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Staggered containers: the container itself stays put and each child animates
   on its own delay. Previously only the container animated and the children
   merely carried a delay on nothing — so the stagger never actually rendered.
   The container must therefore opt out of its own fade. */
.reveal[data-stagger] { opacity: 1; transform: none; transition: none; }
.reveal[data-stagger] > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.75s var(--ease-soft), transform 0.75s var(--ease-soft);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal[data-stagger].is-visible > * { opacity: 1; transform: none; }

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