/* 01-tokens.css */
/* ==========================================================================
   Josudan Foundation: design tokens
   --------------------------------------------------------------------------
   Copied unchanged from the African Greeneurs site (EARN Funnel repo,
   public/styles.css sections 1 to 9, October 2026), so both sites share one
   design system. Change a token there and copy it here, never one side only.

   Built on the official EARN corporate identity:
     EARN Blue   #00AFEF   giving, governance, partners, EARN touchpoints
     EARN Green  #a2bb55   programmes, youth, African Greeneurs touchpoints
     Black       #000000
     White       #FFFFFF
   Typeface: Arial only. No web fonts are loaded anywhere on this site.

   Rules
   - Components use tokens only; never hardcode a new value in a component.
   - No hues outside the EARN palette. Neutrals are tints of black.
   - EARN Blue and EARN Green fail AA as text on white (2.5:1 and 2.2:1), so
     brand text uses the -700 blue / -800 green shades. The original hues are
     fills (with black text, 8.4:1 and 9.8:1), borders and accents.
   - Arial ships in two weights (400, 700). Hierarchy comes from size,
     letter-spacing, case and colour.
   ========================================================================== */

/* ---------- 1. Primitive tokens ---------- */
:root {
  /* Brand */
  --earn-blue: #00AFEF;
  --earn-green: #a2bb55;
  --earn-black: #000000;
  --earn-white: #ffffff;

  /* Blue ramp (derived from EARN Blue) */
  --blue-900: #00354a;
  --blue-800: #00506e;
  --blue-700: #006f97;   /* 5.6:1 on white: smallest blue for text */
  --blue-600: #008fc4;
  --blue-500: #00AFEF;
  --blue-400: #38c3f3;
  --blue-300: #7ad7f7;
  --blue-200: #b5e8fb;
  --blue-100: #ddf4fd;
  --blue-050: #f0fafe;

  /* Green ramp (derived from EARN Green) */
  --green-900: #3c471f;
  --green-800: #55642c;  /* 6.5:1 on white: smallest green for text */
  --green-700: #6f8339;  /* 4.2:1: large text and non-text only */
  --green-600: #89a246;
  --green-500: #a2bb55;
  --green-400: #b5c979;
  --green-300: #c8d89d;
  --green-200: #dbe6c1;
  --green-100: #edf2e0;
  --green-050: #f7faf1;

  /* Neutrals (tints of EARN Black) */
  --ink-1000: #000000;
  --ink-900: #111111;
  --ink-800: #1f1f1f;
  --ink-700: #3a3a3a;
  --ink-600: #555555;    /* 7.5:1 */
  --ink-500: #6b6b6b;    /* 5.3:1: smallest grey for text */
  --ink-400: #949494;    /* decorative only */
  --ink-300: #c4c4c4;
  --ink-200: #e3e3e3;
  --ink-100: #f2f2f2;
  --ink-050: #f8f8f8;
  --paper: #ffffff;

  /* Error: the one hue outside the palette, kept restrained and secondary. */
  --red-700: #b3261e;
  --red-100: #fbeeed;
  --red-200: #f1c9c6;

  /* ---------- 2. Semantic tokens ---------- */
  --color-heading: var(--ink-1000);
  --color-text: var(--ink-800);
  --color-text-muted: var(--ink-600);
  --color-text-subtle: var(--ink-500);
  --color-surface: var(--paper);
  --color-surface-alt: var(--ink-050);
  --color-surface-sunk: var(--ink-100);
  --color-border: var(--ink-200);
  --color-border-strong: var(--ink-300);
  --color-link: var(--blue-700);
  --color-link-hover: var(--blue-900);
  --text-green: var(--green-800);
  --text-blue: var(--blue-700);
  --focus-ring: var(--blue-700);
  --scrim: 0, 0, 0; /* EARN Black, as an rgb triplet for media scrims */

  --success-fg: var(--green-800);
  --success-bg: var(--green-100);
  --success-border: var(--green-300);
  --notice-fg: var(--blue-800);
  --notice-bg: var(--blue-050);
  --notice-border: var(--blue-200);
  --danger: var(--red-700);
  --danger-bg: var(--red-100);
  --danger-border: var(--red-200);

  /* ---------- 3. Typography ---------- */
  --font-sans: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font: var(--font-sans); /* legacy alias */

  --weight-regular: 400;
  --weight-bold: 700;

  /* Type scale (1rem = 16px) */
  --text-2xs: 0.6875rem;  /* 11: dev flags only */
  --text-xs: 0.75rem;     /* 12: eyebrows, badges */
  --text-sm: 0.875rem;    /* 14: meta, helper, tags */
  --text-md: 1rem;        /* 16: body, inputs */
  --text-lg: 1.125rem;    /* 18: lead, card titles */
  --text-xl: 1.375rem;    /* 22: section subheads */
  --text-2xl: 1.75rem;    /* 28: small display */
  --text-3xl: clamp(2rem, 1.5rem + 2.2vw, 2.75rem);   /* 32 to 44: page titles */
  --text-4xl: clamp(2.5rem, 1.6rem + 4vw, 4.25rem);   /* 40 to 68: hero display */

  --leading-none: 0.95;
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-display: -0.03em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-caps: 0.06em;
  --tracking-eyebrow: 0.16em;

  --measure: 62ch;
  --measure-narrow: 44ch;

  /* ---------- 4. Space (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---------- 5. Shape ---------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;     /* fields, small cards */
  --radius-lg: 16px;     /* cards, tiles */
  --radius-xl: 24px;     /* feature panels */
  --radius-pill: 999px;  /* buttons, chips, badges, tags */
  --border-thin: 1px;
  --border-base: 2px;

  /* Legacy aliases used by the application and sponsor flows */
  --r-sm: var(--radius-sm);
  --r-md: var(--radius-md);
  --r-lg: var(--radius-lg);
  --r-xl: var(--radius-xl);
  --r-pill: var(--radius-pill);

  /* ---------- 6. Elevation (shadows are tints of EARN Black) ---------- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .04);
  --shadow-md: 0 6px 16px -4px rgba(0, 0, 0, .10), 0 2px 4px rgba(0, 0, 0, .04);
  --shadow-lg: 0 22px 48px -12px rgba(0, 0, 0, .18), 0 4px 12px rgba(0, 0, 0, .05);
  --shadow-up: 0 -8px 24px -8px rgba(0, 0, 0, .14);
  --shadow-chip: var(--shadow-xs);

  /* ---------- 7. Motion ---------- */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 600ms;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-emphasis: cubic-bezier(.2, .8, .2, 1);

  /* ---------- 8. Layout ---------- */
  --wrap-narrow: 680px;  /* forms, prose */
  --wrap: 1040px;        /* landing */
  --wrap-wide: 1240px;   /* storefront, course pages */
  --gutter: 16px;
  --topbar-h: 64px;
  --z-raised: 1;
  --z-sticky: 30;
  --z-overlay: 50;

  /* ---------- 9. Path accent (overridden per path) ---------- */
  --accent: var(--green-500);
  --accent-hover: var(--green-600);
  --accent-on: var(--ink-1000);          /* text on an --accent fill */
  --accent-text: var(--green-800);       /* accent-coloured text on white */
  --accent-strong: var(--green-800);
  --accent-deep: var(--green-900);
  --accent-tint: var(--green-100);
  --accent-tint-soft: var(--green-050);
  --accent-border: var(--green-300);
}

@media (min-width: 768px) {
  :root { --gutter: 24px; --topbar-h: 72px; }
}
@media (min-width: 1200px) {
  :root { --gutter: 32px; }
}

/* Green: African Greeneurs / training touchpoints */
.path-applicant,
.path-training {
  --accent: var(--green-500);
  --accent-hover: var(--green-600);
  --accent-on: var(--ink-1000);
  --accent-text: var(--green-800);
  --accent-strong: var(--green-800);
  --accent-deep: var(--green-900);
  --accent-tint: var(--green-100);
  --accent-tint-soft: var(--green-050);
  --accent-border: var(--green-300);
}

/* ---------- Josudan Foundation additions (tokens only) ---------- */

/* Blue: giving, governance, partners and EARN touchpoints. The Foundation's
   default path, so Donate and every giving action read blue. */
:root,
.path-give {
  --accent: var(--blue-500);
  --accent-hover: var(--blue-400);
  --accent-on: var(--ink-1000);
  --accent-text: var(--blue-700);
  --accent-strong: var(--blue-700);
  --accent-deep: var(--blue-900);
  --accent-tint: var(--blue-100);
  --accent-tint-soft: var(--blue-050);
  --accent-border: var(--blue-300);
}

:root {
  /* Status colours stay inside the palette (brand rule: no other hues where
     avoidable). Errors are black and bold, with an icon and a heavy outline,
     so they never rely on colour. Success is green-800 on a green tint. */
  --danger: var(--ink-1000);
  --danger-bg: var(--ink-050);
  --danger-border: var(--ink-1000);

  /* Depth, as on the African Greeneurs site (its public/depth.css). */
  --frame: 0px;
  --ledge: 5px;
  --ledge-hover: 9px;
  --slab-shadow:
    0 var(--ledge) 0 var(--frame-line, var(--ink-300)),
    0 calc(var(--ledge) + 10px) 22px -6px rgba(0, 0, 0, .28),
    0 calc(var(--ledge) + 34px) 60px -22px rgba(0, 0, 0, .38);
  --slab-shadow-hover:
    0 var(--ledge-hover) 0 var(--frame-line, var(--ink-300)),
    0 calc(var(--ledge-hover) + 14px) 28px -6px rgba(0, 0, 0, .30),
    0 calc(var(--ledge-hover) + 46px) 80px -24px rgba(0, 0, 0, .42);
  --photo-shadow: 0 2px 0 var(--frame-line, var(--ink-300)), 0 18px 40px -14px rgba(0, 0, 0, .45);
  --ease-out-soft: cubic-bezier(.16, 1, .3, 1);

  /* The brand bar: EARN Blue then EARN Green, a hard split, never a blend. */
  --brand-bar: linear-gradient(90deg, var(--earn-blue) 0 55%, var(--earn-green) 55% 100%);
}


/* 02-base.css */
/* ==========================================================================
   Base, page ground and layout
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar-h) + var(--space-6)); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--color-link); text-underline-offset: 0.18em; }
a:hover { color: var(--color-link-hover); }
h1, h2, h3, h4 { color: var(--color-heading); font-weight: var(--weight-bold); }
p { margin: 0 0 var(--space-4); }
address { font-style: normal; }

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--ink-1000);
  color: var(--paper);
  font-weight: var(--weight-bold);
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.skip-link:focus { top: var(--space-3); color: var(--paper); }

/* Black framing at the sides on large screens, as on the AG site. */
@media (min-width: 1024px) {
  :root { --frame: 6px; }
  html { background: var(--earn-black); }
  body { margin-inline: var(--frame); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 0 48px rgba(0, 0, 0, .9); }
}
@media (min-width: 1280px) { :root { --frame: 12px; } }
@media (min-width: 1500px) {
  body { max-width: 1440px; margin-inline: auto; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 0 80px 10px rgba(0, 0, 0, .95); }
}

/* Page ground: soft brand washes plus the faint EARN globe watermark. */
.page {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(1100px 520px at 88% -8%, var(--blue-050) 0%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(900px 480px at 6% 102%, var(--green-050) 0%, rgba(255, 255, 255, 0) 60%),
    var(--paper);
  overflow: hidden;
}
/* Decorative, so it lives in CSS rather than as an <img> needing alt text. */
.globe-mark { position: relative; isolation: isolate; }
.globe-mark::after {
  content: "";
  position: absolute;
  top: var(--space-8);
  right: -12%;
  width: min(760px, 120vw);
  aspect-ratio: 560 / 420;
  background: url("/brand/earn-globe.webp") center / contain no-repeat;
  opacity: .06;
  pointer-events: none;
  z-index: -1;
}

.wrap {
  position: relative;
  z-index: var(--z-raised);
  max-width: var(--wrap-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.wrap--narrow { max-width: 820px; }
.wrap--mid { max-width: var(--wrap); }

/* Sections: generous rhythm, a black rule between two plain sections. */
.section { position: relative; padding: var(--space-16) 0; }
@media (min-width: 1024px) { .section { padding: var(--space-20) 0; } }
.section--tight { padding: var(--space-12) 0; }
.section--alt { background: var(--color-surface-alt); border-block: var(--border-thin) solid var(--color-border); }
.section--rule::before {
  content: "";
  position: absolute;
  top: 0;
  left: max(var(--gutter), calc((100% - var(--wrap-wide)) / 2 + var(--gutter)));
  right: max(var(--gutter), calc((100% - var(--wrap-wide)) / 2 + var(--gutter)));
  height: 2px;
  background: var(--earn-black);
}

/* Section heading: ALL CAPS title (four words at most) with the brand bar,
   then a longer Title Case subheading. */
.section-head { margin: 0 0 var(--space-8); }
.section-head h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  text-wrap: balance;
}
.section-head h2::before {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  margin-bottom: var(--space-4);
  background: var(--brand-bar);
  border-radius: var(--radius-pill);
}
.section-head__sub { margin: 0; max-width: 46ch; font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: var(--leading-snug); color: var(--ink-700); text-wrap: balance; }
.section-head__lead { margin: var(--space-3) 0 0; max-width: var(--measure); color: var(--color-text-muted); }
.section-head--center { text-align: center; }
.section-head--center h2::before { margin-inline: auto; }
.section-head--center .section-head__sub, .section-head--center .section-head__lead { margin-inline: auto; }
.section-head--split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4) var(--space-8); }
.section-head--split > div { max-width: var(--measure); }

.section-head--sub { margin-bottom: var(--space-6); }
.section-head__lead--flush { margin: 0; }



/* Body copy */
.lead { margin: 0 0 var(--space-5); max-width: var(--measure); font-size: var(--text-lg); line-height: var(--leading-normal); color: var(--ink-800); }
.lead--follow { margin: var(--space-6) 0 0; }
.copy p { max-width: var(--measure); color: var(--ink-700); }
.copy p:last-child { margin-bottom: 0; }
.copy h3 { margin: var(--space-8) 0 var(--space-2); font-size: var(--text-xl); line-height: var(--leading-snug); }
.copy h3:first-child { margin-top: 0; }

.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); align-items: start; }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-16); }
  .split--center { align-items: center; }
  .split--even { grid-template-columns: 1fr 1fr; }
  .split--aside { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
  .split--aside-form { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* Fade-up on scroll. Only hides content when JS is running to reveal it. */
html.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); }
html.js [data-reveal].is-in { opacity: 1; transform: none; }

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

@media print {
  html { background: none; }
  body { margin: 0; max-width: none; box-shadow: none; }
  .earn-rule, .earnbar, .site-header, .footer-social, .btn { display: none !important; }
}

/* 03-components.css */
/* ==========================================================================
   Components: one style each, shared by every page. Same specs as the
   African Greeneurs site (buttons, eyebrows, tags, fields, slab cards).
   ========================================================================== */

/* ---------- Eyebrow ---------- */
.eyebrow {
  display: inline-block;
  margin: 0 0 var(--space-4);
  padding: 6px var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-text);
  background: var(--accent-tint);
  border: var(--border-thin) solid var(--accent-border);
  border-radius: var(--radius-pill);
}
.eyebrow--plain { padding: 0; background: none; border: 0; border-radius: 0; }

/* ---------- Buttons ----------
   Primary: the path accent (blue for giving, green for programmes) with a
   black label (8.6:1 on blue, 9.8:1 on green). Dark: black, white label.
   Secondary: white with a black outline. On-dark: outline on photos. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: var(--space-3) var(--space-6);
  border: var(--border-base) solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--frame-line, var(--ink-300)), 0 10px 18px -8px rgba(0, 0, 0, .35);
  transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
.btn--primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-on); }
.btn--give { background: var(--earn-blue); border-color: var(--earn-blue); color: var(--ink-1000); }
.btn--give:hover:not(:disabled) { background: var(--blue-400); border-color: var(--blue-400); color: var(--ink-1000); }
.btn--green { background: var(--earn-green); border-color: var(--earn-green); color: var(--ink-1000); }
.btn--green:hover:not(:disabled) { background: var(--green-400); border-color: var(--green-400); color: var(--ink-1000); }
.btn--dark { background: var(--ink-1000); border-color: var(--ink-1000); color: var(--paper); }
.btn--dark:hover:not(:disabled) { background: var(--ink-800); color: var(--paper); }
.btn--secondary { background: var(--paper); border-color: var(--frame-line, var(--ink-300)); color: var(--ink-1000); }
.btn--secondary:hover:not(:disabled) { background: var(--ink-050); color: var(--ink-1000); }
.btn--on-dark { background: transparent; border-color: rgba(255, 255, 255, .85); color: var(--paper); box-shadow: 0 3px 0 rgba(255, 255, 255, .35); }
.btn--on-dark:hover:not(:disabled) { background: rgba(255, 255, 255, .12); border-color: var(--paper); color: var(--paper); }

.btn--lg { min-height: 60px; padding-inline: var(--space-8); font-size: var(--text-md); }
.btn--sm { min-height: 44px; padding: var(--space-2) var(--space-4); font-size: var(--text-xs); box-shadow: 0 2px 0 var(--frame-line, var(--ink-300)), 0 8px 14px -8px rgba(0, 0, 0, .3); }
.btn--block { width: 100%; }
.btn__icon { width: 18px; height: 18px; flex: 0 0 auto; }
.btn--lg .btn__icon { width: 20px; height: 20px; }

@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 5px 0 var(--frame-line, var(--ink-300)), 0 16px 24px -10px rgba(0, 0, 0, .4); }
  .btn--on-dark:hover:not(:disabled) { box-shadow: 0 5px 0 rgba(255, 255, 255, .45); }
}
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 var(--frame-line, var(--ink-300)), 0 4px 8px -4px rgba(0, 0, 0, .3); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
@media (max-width: 479px) { .btn-row > .btn { width: 100%; } }

/* Spinner for buttons that submit */
.spinner {
  display: none;
  width: 18px; height: 18px;
  border: 2.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.btn.is-loading .spinner { display: block; }
.btn.is-loading .btn__icon { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Text link with an arrow, for secondary routes */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font-weight: var(--weight-bold);
  color: var(--ink-1000);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.3em;
}
.link-arrow:hover { color: var(--ink-1000); text-decoration-color: var(--ink-1000); }
.link-arrow svg { width: 18px; height: 18px; flex: 0 0 auto; transition: transform var(--dur-2) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ---------- Badges and tags ---------- */
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: 0.02em;
  color: var(--ink-800);
  background: var(--paper);
  border: var(--border-thin) solid var(--color-border-strong);
  border-radius: var(--radius-pill);
}
.tag svg { width: 14px; height: 14px; flex: 0 0 auto; }
.tag--blue { color: var(--ink-1000); background: var(--blue-100); border-color: var(--blue-300); }
.tag--green { color: var(--ink-1000); background: var(--green-100); border-color: var(--green-300); }
.tag--dark { color: var(--paper); background: var(--ink-1000); border-color: var(--ink-1000); }

/* Chips: a list of short facts (what support unlocks) */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.chips li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--ink-1000);
  background: var(--paper);
  border: var(--border-base) solid var(--frame-line, var(--ink-300));
  border-radius: var(--radius-pill);
}
.chips svg { width: 16px; height: 16px; color: var(--accent-text); }

/* ---------- Placeholder chip ----------
   A value nobody has confirmed (config/site.js PH). Always visibly marked
   "To be confirmed": never a plausible-looking value. On local and preview
   hosts (html.is-dev) it also names what is missing. */
.ph {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--ink-1000);
  background: var(--paper);
  border: var(--border-thin) dashed var(--frame-line, var(--ink-300));
  border-radius: var(--radius-xs);
  flex-wrap: wrap;
  max-width: 100%;
}
.ph__what { display: none; text-transform: none; letter-spacing: 0; font-weight: var(--weight-regular); }
html.is-dev .ph__what { display: inline; }
html.is-dev .ph__what::before { content: "("; }
html.is-dev .ph__what::after { content: ")"; }

/* ---------- Icon tile ---------- */
.icon-tile {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  color: var(--ink-1000);
  background: var(--accent);
  border: var(--border-base) solid var(--frame-line, var(--ink-300));
  border-radius: var(--radius-md);
  box-shadow: 0 3px 0 var(--frame-line, var(--ink-300));
}
.icon-tile svg { width: 24px; height: 24px; }
.card > .icon-tile { margin-bottom: var(--space-5); }
.icon-tile--blue { background: var(--blue-200); }
.icon-tile--green { background: var(--green-200); }
.icon-tile--dark { background: var(--ink-1000); color: var(--earn-green); }

/* ---------- Cards: raised slabs with a black ledge ---------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--paper);
  border: var(--border-base) solid var(--frame-line, var(--ink-300));
  border-radius: var(--radius-lg);
  box-shadow: var(--slab-shadow);
}
.card--blue { border-top: 6px solid var(--blue-300); }
.card--green { border-top: 6px solid var(--green-300); }
.card--link { transition: transform var(--dur-3) var(--ease-out-soft), box-shadow var(--dur-3) var(--ease-out-soft); }
@media (hover: hover) and (pointer: fine) {
  .card--link:hover { transform: translateY(-4px); box-shadow: var(--slab-shadow-hover); }
}
.card h3 { margin: 0 0 var(--space-2); font-size: var(--text-lg); line-height: var(--leading-snug); }
.card p { margin: 0 0 var(--space-4); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--ink-700); }
.card p:last-child { margin-bottom: 0; }
.card__foot { margin-top: auto; padding-top: var(--space-2); }
/* A whole-card link: the title's link stretches over the card. */
.card__cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card__cover { color: var(--ink-1000); text-decoration: none; }
.card__cover:hover { color: var(--ink-1000); text-decoration: underline; }
.card__cover:focus-visible { outline: none; }
.card:has(.card__cover:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 4px; }

.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* A card that presents a logo, centred */
.card--logo { align-items: center; justify-content: center; padding: var(--space-10); }
.card--logo img { max-width: 260px; }

/* Photos framed in black */
.frame { overflow: hidden; border: var(--border-base) solid var(--frame-line, var(--ink-300)); border-radius: var(--radius-lg); box-shadow: var(--photo-shadow); background: var(--ink-100); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--photo { aspect-ratio: 4 / 3; }

/* ---------- Background video ----------
   A muted loop laid over its poster photo; it fades in once playing. The
   pause button (WCAG 2.2.2) sits in the corner, black on white. */
.vid { position: relative; width: 100%; height: 100%; overflow: hidden; }
.vid > picture, .vid > img, .vid > picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dur-4) var(--ease-out); }
.vid video.is-playing { opacity: 1; }
.vid__toggle {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--ink-1000);
  background: var(--paper);
  border: var(--border-base) solid var(--frame-line, var(--ink-300));
  border-radius: 50%;
  box-shadow: 0 2px 0 var(--frame-line, var(--ink-300));
  cursor: pointer;
  opacity: .9;
  transition: opacity var(--dur-2) var(--ease-out);
}
.vid__toggle:hover, .vid__toggle:focus-visible { opacity: 1; }
.vid__toggle[hidden] { display: none; }
.vid__toggle svg { width: 18px; height: 18px; }
.vid__toggle .vid__play { display: none; }
.vid__toggle.is-paused .vid__play { display: block; }
.vid__toggle.is-paused .vid__pause { display: none; }
/* A page hero's button sits above the scrim, in the corner of the hero. */
.vid__toggle--hero { right: var(--gutter); bottom: var(--space-4); }

/* ---------- Notices ---------- */
.notice {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin: 0 0 var(--space-5);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--ink-900);
  background: var(--accent-tint-soft);
  border: var(--border-thin) solid var(--accent-border);
  border-left: 6px solid var(--accent);
  border-radius: var(--radius-md);
}
.notice svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; color: var(--accent-text); }
.notice p { margin: 0; }
.notice p + p { margin-top: var(--space-2); }
.notice a { color: var(--ink-1000); font-weight: var(--weight-bold); }
.notice--green { background: var(--green-050); border-color: var(--green-300); border-left-color: var(--green-300); }
.notice--green svg { color: var(--green-800); }
.notice[hidden] { display: none; }

/* ---------- Disclosure (board biographies) ---------- */
.disclosure { border-top: var(--border-thin) solid var(--color-border); }
.disclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-1000);
  cursor: pointer;
  list-style: none;
}
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary svg { width: 20px; height: 20px; transition: transform var(--dur-2) var(--ease-out); }
.disclosure[open] summary svg { transform: rotate(180deg); }
.disclosure summary .when-open { display: none; }
.disclosure[open] summary .when-open { display: inline; }
.disclosure[open] summary .when-closed { display: none; }
.disclosure__body { padding: 0 0 var(--space-2); }
.disclosure__body p { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--ink-700); }

/* ---------- Definition lists (registration, banking) ---------- */
.facts { display: grid; gap: 0; margin: 0; }
.facts > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-3); padding: var(--space-3) 0; border-bottom: var(--border-thin) solid var(--color-border); }
.facts > div:last-child { border-bottom: 0; }
.facts dt { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--ink-700); }
.facts dd { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--ink-1000); overflow-wrap: anywhere; }
@media (max-width: 420px) { .facts > div { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- Forms ---------- */
.form-card {
  position: relative;
  padding: var(--space-6) var(--space-5);
  background: var(--paper);
  border: var(--border-base) solid var(--frame-line, var(--ink-300));
  border-top: 6px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--slab-shadow);
}
@media (min-width: 560px) { .form-card { padding: var(--space-8) var(--space-8) var(--space-8); } }
.form-card__title { margin: 0 0 var(--space-2); font-size: var(--text-xl); line-height: var(--leading-tight); text-transform: uppercase; letter-spacing: var(--tracking-tight); }
.form-card__intro { margin: 0 0 var(--space-6); font-size: var(--text-sm); color: var(--color-text-muted); }

.field { margin: 0 0 var(--space-5); border: 0; padding: 0; min-width: 0; }
.field:last-child { margin-bottom: 0; }
.field-row { display: grid; gap: 0 var(--space-4); }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }

.field > label,
.field > legend,
.field__label {
  display: block;
  margin: 0 0 var(--space-2);
  padding: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--ink-900);
}
.field .optional { font-weight: var(--weight-regular); color: var(--color-text-subtle); }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], select, textarea {
  width: 100%;
  min-height: 50px;
  padding: var(--space-3) 14px;
  font-family: inherit;
  font-size: var(--text-md); /* 16px stops iOS zooming on focus */
  color: var(--ink-1000);
  background: var(--paper);
  border: var(--border-base) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
input::placeholder, textarea::placeholder { color: var(--ink-500); }
input:hover, select:hover, textarea:hover { border-color: var(--ink-500); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--earn-blue); box-shadow: 0 0 0 4px var(--accent-tint), 0 0 0 5px var(--accent); }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 42px;
}
textarea { min-height: 132px; resize: vertical; line-height: var(--leading-normal); }
.helper { margin: var(--space-2) 0 0; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--color-text-subtle); }

/* Checkboxes and radios: a large, tappable row */
.check { display: flex; gap: var(--space-3); align-items: flex-start; margin: 0; cursor: pointer; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--ink-800); }
.check input { flex: 0 0 auto; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--ink-1000); cursor: pointer; }
.check a { color: var(--ink-1000); font-weight: var(--weight-bold); }
.field > label.check { display: flex; margin: 0; font-weight: var(--weight-regular); color: var(--ink-800); }
.check-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.check-list .check, .provider-list .check { padding: var(--space-3) var(--space-4); border: var(--border-base) solid var(--color-border); border-radius: var(--radius-md); }
.check-list .check:hover, .provider-list .check:hover { border-color: var(--ink-500); }
.check-list .check:has(input:checked), .provider-list .check:has(input:checked) { border-color: var(--earn-blue); background: var(--accent-tint-soft); }
.consent { margin-top: var(--space-6); padding-top: var(--space-5); border-top: var(--border-thin) solid var(--color-border); }

/* Choice chips (amounts, frequency): radio buttons styled as pills */
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--space-2); }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--ink-1000);
  background: var(--paper);
  border: var(--border-base) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.choice:hover span { border-color: var(--ink-500); }
.choice input:checked + span { background: var(--accent); border-color: var(--earn-blue); box-shadow: 0 3px 0 var(--earn-blue); }
.choice input:focus-visible + span { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* Segmented toggle (once-off or monthly) */
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-1); padding: var(--space-1); background: var(--color-surface-sunk); border-radius: var(--radius-pill); }
.segmented label { position: relative; display: block; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; width: 0; height: 0; }
.segmented span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--space-2) var(--space-4); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--ink-700); border-radius: var(--radius-pill); transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.segmented input:checked + span { background: var(--ink-1000); color: var(--paper); }
.segmented input:focus-visible + span { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.money { position: relative; }
.money__symbol { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-weight: var(--weight-bold); color: var(--ink-1000); pointer-events: none; }
.money input { padding-left: 34px; font-weight: var(--weight-bold); }

/* Errors: black, bold, an icon, a heavy outline. Never colour alone. */
.field-error { display: none; align-items: flex-start; gap: var(--space-2); margin: var(--space-2) 0 0; font-size: var(--text-sm); font-weight: var(--weight-bold); line-height: var(--leading-snug); color: var(--danger); }
.field-error::before {
  content: "!";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  font-size: 12px;
  line-height: 1;
  color: var(--paper);
  background: var(--ink-1000);
  border-radius: 50%;
}
.field.has-error .field-error { display: flex; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--ink-1000); border-width: 3px; background: var(--danger-bg); }
.field.has-error .check-list, .field.has-error .choice-grid, .field.has-error > .check { outline: 3px solid var(--ink-1000); outline-offset: 6px; border-radius: var(--radius-sm); }

/* Form message: success and error states after submitting */
.form-msg { display: none; margin: var(--space-5) 0 0; padding: var(--space-4) var(--space-5); font-size: var(--text-sm); font-weight: var(--weight-bold); line-height: var(--leading-normal); border-radius: var(--radius-md); }
.form-msg.is-error { display: block; color: var(--ink-1000); background: var(--danger-bg); border: 3px solid var(--ink-1000); }
.form-msg.is-success { display: block; color: var(--success-fg); background: var(--success-bg); border: 2px solid var(--success-border); }
.form-success { text-align: center; padding: var(--space-6) 0 var(--space-2); }
.form-success__icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto var(--space-4); color: var(--ink-1000); background: var(--green-200); border: var(--border-base) solid var(--frame-line, var(--ink-300)); border-radius: 50%; box-shadow: 0 3px 0 var(--frame-line, var(--ink-300)); }
.form-success__icon svg { width: 30px; height: 30px; }
.form-success h3 { margin: 0 0 var(--space-2); font-size: var(--text-xl); text-transform: uppercase; }
.form-success p { margin: 0 auto var(--space-4); max-width: 44ch; color: var(--ink-700); }
.form-success[hidden] { display: none; }

/* Honeypot: off screen for people, still in the form for bots. */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.form-fine { margin: var(--space-4) 0 0; font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--color-text-subtle); text-align: center; }
.form-fine a { color: var(--ink-800); }

/* 04-chrome.css */
/* ==========================================================================
   Site chrome: brand bar, EARN strip, header and navigation, footer.
   Same furniture as the African Greeneurs site, so the two sites visibly
   belong together; the Josudan logo and blue giving actions make it the
   Foundation's own.
   ========================================================================== */

/* The corporate line motif: blue then green. */
.earn-rule { height: 6px; width: 100%; background: var(--brand-bar); }

/* ---------- EARN strip ---------- */
.earnbar { background: var(--color-surface-alt); border-bottom: 1px solid var(--frame-line, var(--ink-300)); }
.earnbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: var(--wrap-wide);
  margin: 0 auto;
  padding: 4px var(--gutter);
}
.earnbar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
  min-height: 36px;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--ink-800);
  text-decoration: none;
}
.earnbar__brand img { height: 16px; width: auto; }
.earnbar__brand:hover { color: var(--ink-1000); text-decoration: underline; }
.earnbar__trust {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-align: right;
  line-height: var(--leading-snug);
  color: var(--blue-700);
  text-decoration: none;
}
.earnbar__trust svg { width: 16px; height: 16px; flex: 0 0 auto; }
.earnbar__trust:hover { color: var(--ink-1000); text-decoration: underline; }
/* Phones: the EARN mark alone (its words stay for screen readers). */
@media (max-width: 767px) {
  .earnbar__brand span:not(.visually-hidden) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .earnbar__brand { min-height: 44px; }
  .earnbar__trust { min-height: 44px; font-size: 0.6875rem; letter-spacing: 0.02em; }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-overlay);
  background: var(--paper);
  border-bottom: 2px solid var(--frame-line, var(--ink-300));
  transition: box-shadow var(--dur-2) var(--ease-out);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: saturate(1.8) blur(14px); backdrop-filter: saturate(1.8) blur(14px); }
}
.site-header.is-scrolled { box-shadow: 0 2px 0 var(--frame-line, var(--ink-300)), 0 14px 30px -12px rgba(0, 0, 0, .45); }
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: var(--wrap-wide);
  margin: 0 auto;
  padding: 8px var(--gutter);
  min-height: 68px;
}
.site-header__logo { display: inline-flex; align-items: center; flex: 0 0 auto; margin-right: auto; min-height: 44px; border-radius: var(--radius-xs); }
.site-header__logo img { height: 52px; width: auto; }
@media (min-width: 1100px) { .site-header__inner { min-height: 88px; gap: var(--space-4); } .site-header__logo img { height: 70px; } }
@media (max-width: 359px) { .site-header__logo img { height: 40px; } .site-header__inner { gap: var(--space-2); } }

.site-header__cta { flex: 0 0 auto; }
@media (max-width: 379px) { .site-header__cta { padding-inline: var(--space-3); } }

/* Desktop navigation with three dropdowns */
.site-nav { display: none; }
@media (min-width: 1100px) {
  .site-nav { display: block; }
  .site-nav > ul { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
  .site-nav__link,
  .site-nav__toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    padding: 0 var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--ink-800);
    text-decoration: none;
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
  }
  .site-nav__toggle svg { width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease-out); }
  .site-nav__link::after,
  .site-nav__toggle::after {
    content: "";
    position: absolute;
    left: var(--space-3); right: var(--space-3); bottom: 6px;
    height: 3px;
    background: var(--earn-blue);
    border-radius: var(--radius-pill);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-2) var(--ease-out);
  }
  .site-nav__link:hover, .site-nav__toggle:hover { color: var(--ink-1000); background: var(--color-surface-alt); }
  .site-nav__link:hover::after, .site-nav__link[aria-current="page"]::after,
  .site-nav__toggle.is-current::after, .site-nav__toggle:hover::after { transform: scaleX(1); }
  .site-nav__link[aria-current="page"], .site-nav__toggle.is-current { color: var(--ink-1000); }

  .nav-group { position: relative; }
  .subnav {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 2;
    min-width: 280px;
    margin: 0;
    padding: var(--space-2);
    list-style: none;
    background: var(--paper);
    border: var(--border-base) solid var(--frame-line, var(--ink-300));
    border-top: 5px solid var(--blue-300);
    border-radius: var(--radius-md);
    box-shadow: var(--slab-shadow);
  }
  /* A bridge so the pointer can travel from the toggle into the menu. */
  .subnav::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
  .nav-group.is-open .subnav { display: block; animation: menuIn var(--dur-2) var(--ease-out); }
  .nav-group.is-open .site-nav__toggle svg { transform: rotate(180deg); }
  html:not(.js) .nav-group:focus-within .subnav, html:not(.js) .nav-group:hover .subnav { display: block; }
  .subnav a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3) var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
    color: var(--ink-1000);
    text-decoration: none;
    border-radius: var(--radius-sm);
  }
  .subnav a small { font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--color-text-muted); }
  .subnav a:hover { background: var(--blue-050); }
  .subnav a[aria-current="page"] { background: var(--blue-100); }
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.menu-btn {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--paper);
  border: var(--border-base) solid var(--frame-line, var(--ink-300));
  border-radius: var(--radius-md);
  cursor: pointer;
}
.menu-btn__bars { display: grid; gap: 4px; width: 18px; }
.menu-btn__bars span { display: block; height: 2px; background: var(--ink-1000); border-radius: 2px; transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1) var(--ease-out); }
.menu-btn[aria-expanded="true"] .menu-btn__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bars span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-btn__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (min-width: 1100px) { .menu-btn { display: none; } }

/* Mobile menu: grouped, everything one tap away */
.mobile-nav {
  border-top: var(--border-thin) solid var(--color-border);
  padding: var(--space-2) var(--gutter) var(--space-6);
  max-height: calc(100vh - 110px);
  max-height: calc(100dvh - 110px);
  overflow-y: auto;
  background: var(--paper);
  animation: menuIn var(--dur-2) var(--ease-out);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav__group { padding: var(--space-3) 0; border-bottom: var(--border-thin) solid var(--color-border); }
.mobile-nav__group--single { padding: var(--space-1) 0; }
.mobile-nav__group h2 { margin: 0 0 var(--space-1); font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--blue-700); }
.mobile-nav ul { margin: 0; padding: 0; list-style: none; }
.mobile-nav a { display: flex; align-items: center; min-height: 48px; font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--ink-1000); text-decoration: none; }
.mobile-nav a[aria-current="page"]::before { content: ""; width: 4px; height: 22px; margin-right: var(--space-3); background: var(--earn-blue); border-radius: var(--radius-pill); }
.mobile-nav__cta { margin-top: var(--space-5); }
.mobile-nav__contact { margin: var(--space-4) 0 0; font-size: var(--text-sm); text-align: center; line-height: 2; }
.mobile-nav__contact a { display: inline; min-height: 0; font-size: var(--text-sm); color: var(--ink-800); text-decoration: underline; }
html.menu-open { overflow: hidden; }
@media (min-width: 1100px) { .mobile-nav { display: none !important; } }

/* ---------- Breadcrumb ---------- */
.breadcrumb { max-width: var(--wrap-wide); margin: 0 auto; padding: var(--space-4) var(--gutter) 0; font-size: var(--text-sm); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.breadcrumb li { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-subtle); }
.breadcrumb li + li::before { content: "/"; color: var(--ink-400); }
.breadcrumb a { color: var(--color-text-muted); font-weight: var(--weight-bold); text-decoration: none; padding: var(--space-2) 0; }
.breadcrumb a:hover { color: var(--ink-1000); text-decoration: underline; }
.page-hero--photo + .breadcrumb, .breadcrumb--over { position: absolute; z-index: 2; left: 0; right: 0; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  z-index: var(--z-raised);
  overflow: hidden;
  background: var(--color-surface-alt);
  border-top: 4px solid var(--frame-line, var(--ink-300));
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.site-footer__inner { max-width: var(--wrap-wide); margin: 0 auto; padding: var(--space-12) var(--gutter) 0; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .footer-grid { grid-template-columns: 1.15fr 2.2fr 1.25fr; gap: var(--space-10); } }
.site-footer h2 { margin: 0 0 var(--space-3); font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-1000); white-space: nowrap; }
.site-footer a { color: var(--ink-800); }
.site-footer a:hover { color: var(--ink-1000); }
.footer-brand__logo { display: inline-block; margin-bottom: var(--space-4); }
.footer-brand__logo img { height: 84px; width: auto; }
.footer-brand p { margin: 0 0 var(--space-5); max-width: 32ch; font-size: var(--text-md); font-weight: var(--weight-bold); line-height: var(--leading-snug); color: var(--ink-900); }
.footer-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 559px) { .footer-nav { grid-template-columns: 1fr 1fr; } }
.footer-nav ul { margin: 0; padding: 0; list-style: none; }
.footer-nav a { display: inline-block; padding: 6px 0; font-weight: var(--weight-bold); text-decoration: none; line-height: var(--leading-snug); }
.footer-nav a:hover { text-decoration: underline; }
.footer-contact address, .footer-contact p { margin: 0 0 var(--space-3); line-height: var(--leading-normal); }
.footer-reg { margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--border-thin) solid var(--color-border-strong); }
.footer-reg .facts > div { padding: 6px 0; grid-template-columns: auto 1fr; border: 0; }
.footer-reg .facts dt, .footer-reg .facts dd { font-size: var(--text-xs); }
.footer-reg .facts dt { white-space: nowrap; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5) var(--space-8);
  margin-top: var(--space-10);
  padding: var(--space-6) 0;
  border-top: 2px solid var(--frame-line, var(--ink-300));
}
.footer-social { display: flex; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.footer-social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--paper); border: var(--border-thin) solid var(--frame-line, var(--ink-300)); color: var(--ink-1000); }
.footer-social a:hover { background: var(--ink-1000); color: var(--paper); }
.footer-social svg { width: 18px; height: 18px; }
.footer-social__note { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--color-text-subtle); }

/* The EARN lockup: EARN logo, "Part of the EARN ecosystem", EARN's line. */
.earn-lockup { display: inline-flex; align-items: center; gap: var(--space-4); text-decoration: none; }
.earn-lockup img { height: 32px; width: auto; }
.earn-lockup__text { display: flex; flex-direction: column; padding-left: var(--space-4); border-left: 2px solid var(--frame-line, var(--ink-300)); line-height: var(--leading-snug); }
.earn-lockup__text strong { font-size: var(--text-sm); color: var(--ink-1000); }
.earn-lockup__text em { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--blue-700); }
a.earn-lockup:hover strong { text-decoration: underline; }
@media (max-width: 400px) { .earn-lockup { flex-direction: column; align-items: flex-start; gap: var(--space-2); } .earn-lockup__text { padding-left: 0; border-left: 0; } }

.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; font-size: var(--text-xs); }
.footer-legal a { display: inline-flex; align-items: center; min-height: 32px; font-weight: var(--weight-bold); }
.footer-legal li:last-child { color: var(--color-text-subtle); }

/* The footer closes on a black band with the Foundation's line. */
.site-footer__band {
  position: relative;
  margin: 0;
  padding: var(--space-4) var(--gutter);
  text-align: center;
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  font-style: italic;
  color: var(--paper);
  background: var(--earn-black);
  border-top: 3px solid var(--green-300);
}

/* 05-record.css */
/* ==========================================================================
   Proven track record (scripts/templates/record.js): a black band like the
   impact band, with green headline figures, the cohorts as white cards in
   order, and market access. The cohort funded through the Foundation gets a
   blue ring (blue = giving and partner touchpoints). Mobile first.
   ========================================================================== */

.record { background: var(--earn-black); color: var(--paper); border-top: 4px solid var(--blue-300); border-bottom: 4px solid var(--green-300); }
.record .section-head h2, .record .section-head__sub { color: var(--paper); }
.record .section-head__lead { color: rgba(255, 255, 255, .86); }
.record :focus-visible { outline-color: var(--paper); }

/* Headline figures: the funding figure leads on its own row (twice as wide
   on desktop), the other four sit two by two. */
.record__figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); margin: 0 0 var(--space-12); padding: 0; list-style: none; }
.record__figures li { padding-top: var(--space-4); border-top: 2px solid rgba(255, 255, 255, .5); }
.record__figures li:first-child { grid-column: 1 / -1; }
.record__value { display: block; font-size: clamp(2.25rem, 1.9rem + 1.4vw, 3.25rem); font-weight: var(--weight-bold); line-height: 1; letter-spacing: var(--tracking-display); color: var(--earn-green); }
.record__label { display: block; margin-top: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--paper); }
@media (max-width: 479px) { .record__label { font-size: var(--text-xs); } }
@media (min-width: 1024px) {
  .record__figures { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .record__figures li:first-child { grid-column: span 2; }
}

/* Cohorts, oldest first */
.record__subhead { margin: 0 0 var(--space-6); font-size: var(--text-lg); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--paper); }
.record__cohorts { gap: var(--space-8) var(--space-6); }
@media (min-width: 640px) { .record__cohorts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .record__cohorts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cohort .tag-list { margin-bottom: var(--space-4); }
.cohort__facts { display: grid; gap: var(--space-2); margin: 0 0 var(--space-4); padding: var(--space-3) 0; border-block: var(--border-thin) solid var(--color-border); }
.cohort__facts div { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-2); }
.cohort__facts dt { padding-top: 2px; font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-600); }
.cohort__facts dd { margin: 0; font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--ink-900); }
.cohort--foundation { outline: 3px solid var(--blue-300); outline-offset: 5px; }

/* Market access, links and source */
.record__foot { display: grid; gap: var(--space-6); margin-top: var(--space-12); padding-top: var(--space-8); border-top: 2px solid rgba(255, 255, 255, .5); }
@media (min-width: 880px) { .record__foot { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; gap: var(--space-10); } }
.record__market { display: flex; align-items: flex-start; gap: var(--space-4); }
.record__market .icon-tile { flex: 0 0 auto; }
.record__market h3 { margin: 0 0 var(--space-2); font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--paper); }
.record__market p { margin: 0; max-width: var(--measure); color: rgba(255, 255, 255, .86); }
.record__links { display: grid; gap: var(--space-1); justify-items: start; }
.record .link-arrow { color: var(--paper); text-decoration-color: var(--earn-green); }
.record .link-arrow:hover { color: var(--blue-200); text-decoration-color: var(--blue-200); }
.record__source { margin: var(--space-8) 0 0; font-size: var(--text-xs); color: rgba(255, 255, 255, .72); }

/* 05-sections.css */
/* ==========================================================================
   Page sections. Tokens and components only; no new values.
   ========================================================================== */

/* ---------- Home hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: min(84vh, 760px);
  overflow: hidden;
  color: var(--paper);
  background: var(--ink-1000);
}
@media (max-width: 767px) { .hero { min-height: 600px; } }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Scrim measured against the photo's brightest areas (white table cloth,
   greenhouse roof) so every line of hero text holds AA at 390 and 1440px. */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(var(--scrim), .94) 0%, rgba(var(--scrim), .84) 45%, rgba(var(--scrim), .66) 75%, rgba(var(--scrim), .55) 100%);
}
@media (min-width: 768px) {
  .hero__scrim {
    background:
      linear-gradient(to top, rgba(var(--scrim), .9) 0%, rgba(var(--scrim), .62) 42%, rgba(var(--scrim), .4) 78%, rgba(var(--scrim), .45) 100%),
      linear-gradient(to right, rgba(var(--scrim), .8) 0%, rgba(var(--scrim), .58) 42%, rgba(var(--scrim), 0) 74%);
  }
}
.hero__inner { width: 100%; max-width: var(--wrap-wide); margin: 0 auto; padding: var(--space-20) var(--gutter) var(--space-10); }
@media (min-width: 1024px) { .hero__inner { padding-bottom: var(--space-16); } }
.hero__eyebrow { margin: 0 0 var(--space-3); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--paper); }
.hero h1 {
  margin: 0 0 var(--space-5);
  max-width: 12ch;
  font-size: clamp(2.75rem, 1.3rem + 6vw, 5.75rem);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--paper);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .35), 0 14px 34px rgba(0, 0, 0, .55);
}
.hero h1::after { content: ""; display: block; width: 72px; height: 6px; margin-top: var(--space-5); background: var(--brand-bar); border-radius: var(--radius-pill); }
/* The long home headline (8 words, approved by the client as an exception
   to the four-word cap): a smaller size, two lines on wide screens. */
.hero h1.hero__title--long { max-width: none; font-size: clamp(2.25rem, 1rem + 3.5vw, 4rem); line-height: 1.02; }
.hero__br { display: none; }
@media (min-width: 900px) { .hero__br { display: inline; } }
.hero__story { margin: 0 0 var(--space-6); max-width: 62ch; font-size: var(--text-md); line-height: var(--leading-relaxed); color: rgba(255, 255, 255, .95); }
.hero__story strong { color: var(--paper); }
@media (min-width: 768px) { .hero__story { font-size: var(--text-lg); line-height: var(--leading-normal); } }
.hero__sub { margin: 0 0 var(--space-6); max-width: 34ch; font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: var(--leading-snug); color: var(--paper); text-wrap: balance; }
@media (min-width: 768px) { .hero__sub { font-size: var(--text-xl); } }
.hero .btn-row { gap: var(--space-3); }
@media (max-width: 479px) { .hero .btn-row .btn { width: 100%; } }
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-6) 0 0;
  padding-top: var(--space-4);
  max-width: 640px;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: rgba(255, 255, 255, .94);
  border-top: var(--border-thin) solid rgba(255, 255, 255, .3);
}
.hero__trust svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--earn-blue); }
.hero__trust a { color: var(--paper); }
.hero__trust a:hover { color: var(--blue-200); }

/* Entrance: rare, first-impression motion (as on the AG site). */
@keyframes rise-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes bar-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.hero__inner > *, .page-hero__inner > * { animation: rise-in var(--dur-4) var(--ease-out) both; }
.hero__inner > :nth-child(2), .page-hero__inner > :nth-child(2) { animation-delay: 70ms; }
.hero__inner > :nth-child(3), .page-hero__inner > :nth-child(3) { animation-delay: 140ms; }
.hero__inner > :nth-child(4), .page-hero__inner > :nth-child(4) { animation-delay: 210ms; }
.hero__inner > :nth-child(n+5), .page-hero__inner > :nth-child(n+5) { animation-delay: 280ms; }
.hero h1::after, .page-hero h1::after { animation: bar-draw var(--dur-4) var(--ease-out) 420ms both; }
@media (prefers-reduced-motion: reduce) {
  .hero__inner > *, .page-hero__inner > *, .hero h1::after, .page-hero h1::after { animation: none; }
}

/* ---------- Inner page hero ---------- */
.page-hero { position: relative; isolation: isolate; overflow: hidden; }
.page-hero__inner { position: relative; width: 100%; max-width: var(--wrap-wide); margin: 0 auto; padding: var(--space-10) var(--gutter) var(--space-12); }
.page-hero .breadcrumb { padding: 0 0 var(--space-8); max-width: none; }
.page-hero__eyebrow { margin: 0 0 var(--space-3); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent-text); }
.page-hero h1 {
  margin: 0 0 var(--space-5);
  max-width: 16ch;
  font-size: clamp(2.25rem, 1.3rem + 4vw, 4.25rem);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  text-wrap: balance;
}
.page-hero h1::after { content: ""; display: block; width: 64px; height: 5px; margin-top: var(--space-4); background: var(--brand-bar); border-radius: var(--radius-pill); }
.page-hero__sub { margin: 0 0 var(--space-3); max-width: 40ch; font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: var(--leading-snug); color: var(--ink-1000); text-wrap: balance; }
.page-hero__lead { margin: 0 0 var(--space-6); max-width: 58ch; font-size: var(--text-lg); line-height: var(--leading-normal); color: var(--color-text-muted); }
.page-hero__lead:last-child { margin-bottom: 0; }
.page-hero .btn-row { margin-top: var(--space-2); }

.page-hero--plain {
  background:
    radial-gradient(900px 420px at 90% -10%, var(--blue-050) 0%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(700px 380px at 0% 110%, var(--green-050) 0%, rgba(255, 255, 255, 0) 60%),
    var(--paper);
  border-bottom: 2px solid var(--frame-line, var(--ink-300));
}
.page-hero--plain::before {
  content: "";
  position: absolute;
  right: -120px;
  top: -30px;
  width: 600px;
  aspect-ratio: 560 / 420;
  background: url("/brand/earn-globe.webp") center / contain no-repeat;
  opacity: .07;
  pointer-events: none;
  z-index: -1;
}
@media (max-width: 767px) { .page-hero--plain::before { width: 360px; right: -140px; } }

.page-hero--photo { display: flex; align-items: flex-end; min-height: 500px; color: var(--paper); background: var(--ink-1000); border-bottom: 4px solid var(--frame-line, var(--ink-300)); }
@media (max-width: 767px) { .page-hero--photo { min-height: 520px; } }
.page-hero--photo .page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero--photo .page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero--photo .page-hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(var(--scrim), .92) 0%, rgba(var(--scrim), .76) 45%, rgba(var(--scrim), .5) 100%); }
@media (min-width: 768px) {
  .page-hero--photo .page-hero__scrim {
    background:
      linear-gradient(to top, rgba(var(--scrim), .88) 0%, rgba(var(--scrim), .6) 50%, rgba(var(--scrim), .56) 100%),
      linear-gradient(to right, rgba(var(--scrim), .78) 0%, rgba(var(--scrim), .5) 48%, rgba(var(--scrim), 0) 78%);
  }
}
.page-hero--photo .page-hero__inner { padding-top: var(--space-16); }
/* Video heroes (laptops up): the text sits on the left, so the scrim is
   strong there and light on the right, where the people in the clip are.
   Measured against frames across the whole loop, not just the poster. */
@media (min-width: 768px) {
  .page-hero--video .page-hero__scrim {
    background:
      linear-gradient(to right, rgba(var(--scrim), .86) 0%, rgba(var(--scrim), .74) 45%, rgba(var(--scrim), .25) 76%, rgba(var(--scrim), .1) 100%),
      linear-gradient(to top, rgba(var(--scrim), .45) 0%, rgba(var(--scrim), 0) 40%);
  }
}
.page-hero--photo h1, .page-hero--photo .page-hero__sub { color: var(--paper); }
.page-hero--photo h1 { text-shadow: 0 2px 0 rgba(0, 0, 0, .35), 0 14px 34px rgba(0, 0, 0, .55); }
.page-hero--photo .page-hero__eyebrow { color: var(--paper); }
.page-hero--photo .page-hero__lead { color: rgba(255, 255, 255, .92); }
.page-hero--photo .breadcrumb li, .page-hero--photo .breadcrumb a { color: rgba(255, 255, 255, .9); }
.page-hero--photo .breadcrumb a:hover { color: var(--paper); }
.page-hero--photo .breadcrumb li + li::before { color: rgba(255, 255, 255, .6); }

/* Sub-page tabs (the three leadership pages) */
.subpages { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.subpages a {
  display: inline-flex;
  flex-direction: column;
  min-height: 52px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--ink-1000);
  text-decoration: none;
  background: var(--paper);
  border: var(--border-base) solid var(--frame-line, var(--ink-300));
  border-radius: var(--radius-md);
}
.subpages a small { font-weight: var(--weight-regular); font-size: var(--text-xs); color: var(--color-text-muted); }
.subpages a:hover { background: var(--blue-050); }
.subpages a[aria-current="page"] { background: var(--earn-blue); box-shadow: 0 3px 0 var(--earn-blue); }
.subpages a[aria-current="page"] small { color: var(--ink-900); }
.subpages-bar { padding: var(--space-5) 0; background: var(--color-surface-alt); border-bottom: var(--border-thin) solid var(--color-border); }

/* ---------- How your support works: the five-step flow ---------- */
.flow { position: relative; display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; counter-reset: flow; }
.flow__step { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-4); }
/* The track: a vertical line on phones, horizontal from 1024px. */
.flow__step::before { content: ""; position: absolute; left: 26px; top: 56px; bottom: calc(-1 * var(--space-5)); width: 4px; background: var(--ink-1000); }
.flow__step:last-child::before { display: none; }
.flow__node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--ink-1000);
  background: var(--step-colour, var(--blue-200));
  border: 4px solid var(--frame-line, var(--ink-300));
  border-radius: 50%;
  box-shadow: 0 3px 0 var(--frame-line, var(--ink-300));
}
.flow__card {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  background: var(--paper);
  border: var(--border-base) solid var(--frame-line, var(--ink-300));
  border-top: 6px solid var(--step-colour, var(--blue-300));
  border-radius: var(--radius-lg);
  box-shadow: var(--slab-shadow);
}
.flow__who { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--step-text, var(--blue-700)); }
.flow__card h3 { margin: 0 0 var(--space-2); font-size: var(--text-lg); line-height: var(--leading-snug); }
.flow__card p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--ink-700); }
.flow__card .link-arrow { margin-top: auto; padding-top: var(--space-2); font-size: var(--text-sm); }
.flow__list { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.flow__list li { display: flex; flex-direction: column; padding: var(--space-2) var(--space-3); font-size: var(--text-xs); line-height: var(--leading-snug); background: var(--color-surface-alt); border: var(--border-thin) solid var(--color-border); border-left: 4px solid var(--frame-line, var(--ink-300)); border-radius: var(--radius-sm); }
.flow__list strong { font-size: var(--text-sm); color: var(--ink-1000); }
.flow__list span { color: var(--ink-600); }
.flow__step--blue { --step-colour: var(--blue-300); --step-text: var(--blue-700); }
.flow__step--green { --step-colour: var(--green-300); --step-text: var(--green-800); }
.flow__badge { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: var(--space-3); padding: 6px 10px; font-size: var(--text-xs); font-weight: var(--weight-bold); line-height: var(--leading-snug); color: var(--ink-1000); background: var(--blue-100); border: var(--border-thin) solid var(--blue-300); border-radius: var(--radius-sm); }
.flow__badge svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--blue-700); }

@media (min-width: 1100px) {
  /* Step 4 (the ecosystem) carries four entries, so it gets a wider column
     and lists them two by two; the cards then share one height. */
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--space-4); }
  .flow__list { grid-template-columns: 1fr 1fr; }
  .flow__step { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: var(--space-4); }
  .flow__step::before { left: 56px; right: calc(-1 * var(--space-4)); top: 26px; bottom: auto; width: auto; height: 4px; }
  .flow__node { margin: 0; }
}

/* What support unlocks */
.unlocks { display: grid; gap: var(--space-4); align-items: center; margin-top: var(--space-10); padding: var(--space-6); background: var(--paper); border: var(--border-base) solid var(--frame-line, var(--ink-300)); border-radius: var(--radius-lg); }
@media (min-width: 900px) { .unlocks { grid-template-columns: auto 1fr; gap: var(--space-8); padding: var(--space-6) var(--space-8); } }
.unlocks h3 { margin: 0; font-size: var(--text-sm); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }

/* ---------- Impact figures (rendered only when verified) ---------- */
.impact { background: var(--earn-black); color: var(--paper); border-top: 4px solid var(--blue-300); border-bottom: 4px solid var(--green-300); }
.impact .section-head h2 { color: var(--paper); }
.impact .section-head__sub { color: rgba(255, 255, 255, .86); }
.impact__grid { display: grid; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .impact__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .impact__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.impact__grid li { padding-top: var(--space-4); border-top: 2px solid rgba(255, 255, 255, .5); }
.impact__value { display: block; font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); font-weight: var(--weight-bold); line-height: 1; letter-spacing: var(--tracking-display); color: var(--earn-green); }
.impact__label { display: block; margin-top: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--paper); }

/* ---------- What we fund: programme cards ---------- */
.fund-card { padding: 0; overflow: hidden; }
.fund-card__media { aspect-ratio: 16 / 10; overflow: hidden; border-bottom: var(--border-base) solid var(--frame-line, var(--ink-300)); background: var(--ink-100); }
.fund-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-4) var(--ease-out-soft); }
@media (min-width: 640px) { .fund-card__media { aspect-ratio: 4 / 3; } }
@media (hover: hover) and (pointer: fine) { .fund-card:hover .fund-card__media img { transform: scale(1.04); } }
.fund-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: var(--space-5); }
.fund-card .tag-list { margin-bottom: var(--space-3); }
.fund-card h3 { font-size: var(--text-lg); }
.fund-card__by { display: flex; align-items: center; gap: var(--space-2); margin: auto 0 0; padding-top: var(--space-4); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--green-800); border-top: var(--border-thin) solid var(--color-border); }
.fund-card .link-arrow { margin-top: var(--space-2); font-size: var(--text-sm); text-decoration-color: var(--earn-green); }
.fund-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); margin-top: var(--space-10); padding: var(--space-5) var(--space-6); background: var(--green-050); border: var(--border-base) solid var(--frame-line, var(--ink-300)); border-left: 8px solid var(--green-300); border-radius: var(--radius-lg); }
.fund-note p { margin: 0; max-width: 60ch; font-weight: var(--weight-bold); color: var(--ink-900); }

/* Short courses list (programmes page) */
.short-list { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .short-list { grid-template-columns: 1fr 1fr; } }
.short-item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-4); align-items: start; padding: var(--space-4); background: var(--paper); border: var(--border-base) solid var(--frame-line, var(--ink-300)); border-radius: var(--radius-lg); }
.short-item img { width: 96px; height: 96px; object-fit: cover; border: var(--border-base) solid var(--frame-line, var(--ink-300)); border-radius: var(--radius-md); }
.short-item h3 { margin: 0 0 var(--space-1); font-size: var(--text-md); line-height: var(--leading-snug); }
.short-item p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--ink-700); }

/* ---------- Statement band: a short, hopeful passage in large type ---------- */
.manifesto { background: var(--green-050); border-block: 2px solid var(--frame-line, var(--ink-300)); }
.manifesto__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); align-items: center; }
@media (min-width: 960px) { .manifesto--media .manifesto__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-12); } }
.manifesto .section-head { margin-bottom: var(--space-5); }
.manifesto__lead { margin: 0 0 var(--space-6); max-width: 44ch; font-size: var(--text-xl); line-height: var(--leading-snug); color: var(--ink-900); }
@media (min-width: 768px) { .manifesto__lead { font-size: var(--text-2xl); } }
.manifesto__lead strong { display: block; margin-top: var(--space-4); color: var(--green-800); }
.manifesto--center { text-align: center; }
.manifesto--center .section-head h2::before { margin-inline: auto; }
.manifesto--center .manifesto__lead { margin-inline: auto; max-width: 40ch; }
.manifesto--center .manifesto__lead strong { display: inline; margin: 0; }
.manifesto--center .btn-row { justify-content: center; }
.frame--wide { aspect-ratio: 16 / 9; }

/* ---------- Graduate stories (films) ---------- */
.story { padding: 0; overflow: hidden; }
.story__media { position: relative; aspect-ratio: 16 / 9; background: var(--ink-1000); border-bottom: var(--border-base) solid var(--frame-line, var(--ink-300)); }
.story__play { position: absolute; inset: 0; display: block; color: var(--ink-1000); }
.story__play img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-4) var(--ease-out-soft); }
.story__btn {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  color: var(--ink-1000);
  background: var(--blue-200);
  border: 4px solid var(--frame-line, var(--ink-300));
  border-radius: 50%;
  box-shadow: 0 4px 0 var(--frame-line, var(--ink-300)), 0 14px 30px -10px rgba(0, 0, 0, .6);
  transform: translate(-50%, -50%);
  transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.story__btn svg { width: 30px; height: 30px; margin-left: 4px; }
.story__time { position: absolute; right: var(--space-3); bottom: var(--space-3); }
@media (hover: hover) and (pointer: fine) {
  .story__play:hover .story__btn { transform: translate(-50%, -50%) scale(1.08); background: var(--blue-400); }
  .story__play:hover img { transform: scale(1.03); }
}
.story__play:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -6px; border-radius: var(--radius-md); }
.story__media video { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--ink-1000); }
.story__body { padding: var(--space-5) var(--space-6) var(--space-6); }
.story__body h3 { font-size: var(--text-lg); }

/* ---------- Mission and vision ---------- */
.statements { display: grid; gap: var(--space-5); }
.statement { padding: var(--space-6); background: var(--paper); border: var(--border-base) solid var(--frame-line, var(--ink-300)); border-left: 8px solid var(--blue-300); border-radius: var(--radius-lg); box-shadow: var(--slab-shadow); }
.statement--green { border-left-color: var(--green-300); }
.statement h3 { margin: 0 0 var(--space-3); font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--blue-700); }
.statement--green h3 { color: var(--green-800); }
.statement p { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: var(--leading-snug); color: var(--ink-1000); }
.statement p + p { margin-top: var(--space-3); font-size: var(--text-md); font-weight: var(--weight-regular); line-height: var(--leading-normal); color: var(--ink-700); }

.collage { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: auto auto; gap: var(--space-4); }
.collage .frame:first-child { grid-column: 1 / 6; aspect-ratio: 4 / 3; }
.collage .frame:nth-child(2) { grid-column: 3 / 7; margin-top: -22%; aspect-ratio: 16 / 9; }

/* ---------- Values ---------- */
.value { padding: var(--space-6); }
.value__num { display: block; margin-bottom: var(--space-5); font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: 1; color: var(--blue-700); }
.value:nth-child(even) .value__num { color: var(--green-800); }
.value h3 { font-size: var(--text-lg); }

/* ---------- Equal opportunity callout ---------- */
.callout { display: grid; overflow: hidden; background: var(--paper); border: var(--border-base) solid var(--frame-line, var(--ink-300)); border-radius: var(--radius-xl); box-shadow: var(--slab-shadow); }
@media (min-width: 860px) { .callout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.callout__media { min-height: 260px; background: var(--ink-100); }
.callout__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 859px) { .callout__media { min-height: 0; aspect-ratio: 4 / 5; max-height: 560px; border-bottom: var(--border-base) solid var(--frame-line, var(--ink-300)); } }
@media (min-width: 860px) { .callout__media { border-right: var(--border-base) solid var(--frame-line, var(--ink-300)); } }
.callout__body { position: relative; padding: var(--space-8) var(--space-6); background: var(--green-050); }
@media (min-width: 860px) { .callout__body { padding: var(--space-12) var(--space-10); } }
.callout__body::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--green-200); }
.callout .section-head { margin-bottom: var(--space-5); }
.callout__text { margin: 0 0 var(--space-5); max-width: 46ch; font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: var(--leading-snug); color: var(--ink-1000); }

/* ---------- The EARN ecosystem ---------- */
.eco-card { padding: 0; overflow: hidden; }
.eco-card__logo { display: grid; place-items: center; height: 132px; padding: var(--space-5); background: var(--paper); border-bottom: var(--border-base) solid var(--frame-line, var(--ink-300)); }
.eco-card__logo img { width: auto; height: auto; max-height: 76px; max-width: min(200px, 80%); object-fit: contain; }
.eco-card__mono { display: grid; place-items: center; width: 84px; height: 84px; font-size: var(--text-lg); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); color: var(--ink-1000); border: 8px solid var(--frame-line, var(--ink-300)); border-radius: 50%; }
.eco-card__mono--blue { box-shadow: inset 0 0 0 4px var(--blue-300); }
.eco-card__mono--green { box-shadow: inset 0 0 0 4px var(--green-300); }
.eco-card__mono svg { width: 36px; height: 36px; }
.eco-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: var(--space-5); border-top: 6px solid var(--blue-300); margin-top: -2px; }
.eco-card--green .eco-card__body { border-top-color: var(--green-300); }
.eco-card__kind { margin: 0 0 var(--space-2) !important; font-size: var(--text-xs) !important; font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--blue-700) !important; }
.eco-card--green .eco-card__kind { color: var(--green-800) !important; }
.eco-card h3 { margin-bottom: var(--space-1); }
.eco-card__legal { margin: 0 0 var(--space-3) !important; font-size: var(--text-xs) !important; color: var(--color-text-subtle) !important; }
.eco-card .link-arrow { margin-top: auto; font-size: var(--text-sm); }

/* ---------- Get involved ---------- */
.involve-card { padding: var(--space-6); }
.involve-card .icon-tile { margin-bottom: var(--space-5); }
.involve-card h3 { font-size: var(--text-xl); }
.involve-card .link-arrow { margin-top: auto; }

/* ---------- Closing band ---------- */
.closing { padding: 0 0 var(--space-16); }
.closing__box {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--space-12) var(--space-6);
  text-align: center;
  color: var(--paper);
  background: var(--earn-black);
  border: var(--border-base) solid var(--frame-line, var(--ink-300));
  border-radius: var(--radius-xl);
  box-shadow: 0 var(--ledge) 0 var(--blue-300), 0 30px 70px -20px rgba(0, 0, 0, .55);
}
@media (min-width: 768px) { .closing__box { padding: var(--space-16) var(--space-10); } }
.closing__box::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--brand-bar); }
.closing__box::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -120px;
  width: 520px;
  aspect-ratio: 560 / 420;
  background: url("/brand/earn-globe.webp") center / contain no-repeat;
  opacity: .16;
  z-index: -1;
}
.closing h2 { margin: 0 0 var(--space-4); font-size: clamp(2.25rem, 1.4rem + 4vw, 4.25rem); line-height: var(--leading-none); letter-spacing: var(--tracking-display); text-transform: uppercase; color: var(--paper); text-wrap: balance; }
.closing__sub { margin: 0 auto var(--space-3); max-width: 40ch; font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: var(--leading-snug); color: var(--paper); }
.closing__text { margin: 0 auto var(--space-8); max-width: 56ch; font-size: var(--text-md); color: rgba(255, 255, 255, .88); }
.closing .btn-row { justify-content: center; }

/* ---------- Board ---------- */
.board-grid { display: grid; gap: var(--space-8); margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .board-grid { grid-template-columns: 1fr 1fr; } }
.board-card { padding: 0; overflow: hidden; }
.board-card__top { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-5); align-items: center; padding: var(--space-5); }
@media (max-width: 479px) { .board-card__top { grid-template-columns: 84px minmax(0, 1fr); gap: var(--space-4); align-items: start; padding: var(--space-4); } .board-card h3 { font-size: var(--text-lg); } .board-card .disclosure { margin: 0 var(--space-4); } }
@media (min-width: 1100px) { .board-card__top { grid-template-columns: 148px minmax(0, 1fr); } }
.board-card__photo { aspect-ratio: 1; overflow: hidden; background: var(--ink-100); border: var(--border-base) solid var(--frame-line, var(--ink-300)); border-radius: var(--radius-md); box-shadow: 0 3px 0 var(--frame-line, var(--ink-300)); }
.board-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.monogram { display: grid; place-items: center; width: 100%; height: 100%; background: var(--green-050); }
.monogram span { display: grid; place-items: center; width: 74%; aspect-ratio: 1; font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); color: var(--ink-1000); background: var(--paper); border: 10px solid var(--frame-line, var(--ink-300)); border-radius: 50%; box-shadow: inset 0 0 0 4px var(--green-300), 0 0 0 4px var(--blue-300); }
.board-card h3 { margin: 0 0 var(--space-2); font-size: var(--text-xl); line-height: var(--leading-tight); }
.board-card__title { margin: 0 0 var(--space-3) !important; }
.board-card__summary { margin: 0 !important; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--ink-700); }
.board-card__summary span { display: block; }
.board-card .disclosure { margin: 0 var(--space-5); }
.board-card .disclosure__body { padding-bottom: var(--space-5); }

/* ---------- Governance ---------- */
.gov-panel { display: grid; gap: var(--space-6); padding: var(--space-6); background: var(--paper); border: var(--border-base) solid var(--frame-line, var(--ink-300)); border-top: 8px solid var(--blue-300); border-radius: var(--radius-xl); box-shadow: var(--slab-shadow); }
@media (min-width: 900px) { .gov-panel { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-8); padding: var(--space-10); } }
.gov-panel__seal { display: grid; place-items: center; width: 96px; height: 96px; color: var(--ink-1000); background: var(--blue-200); border: 4px solid var(--frame-line, var(--ink-300)); border-radius: 50%; box-shadow: 0 4px 0 var(--frame-line, var(--ink-300)); }
.gov-panel__seal svg { width: 44px; height: 44px; }
.gov-panel h3 { margin: 0 0 var(--space-1); font-size: var(--text-2xl); line-height: var(--leading-tight); }
.gov-panel__legal { margin: 0 0 var(--space-5); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--blue-700); }
.gov-points { display: grid; gap: var(--space-3); margin: 0 0 var(--space-2); padding: 0; list-style: none; }
.gov-points li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-3); align-items: start; font-size: var(--text-md); line-height: var(--leading-normal); color: var(--ink-800); }
.gov-points svg { width: 22px; height: 22px; margin-top: 2px; color: var(--blue-700); }

.trust-strip { display: grid; gap: var(--space-4); align-items: center; padding: var(--space-5) var(--space-6); background: var(--blue-050); border: var(--border-base) solid var(--frame-line, var(--ink-300)); border-left: 8px solid var(--blue-300); border-radius: var(--radius-lg); }
@media (min-width: 860px) { .trust-strip { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-6); } }
.trust-strip p { margin: 0; font-weight: var(--weight-bold); color: var(--ink-1000); }
.trust-strip small { display: block; margin-top: 2px; font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--ink-700); }

/* ---------- Donate ---------- */
.give-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); align-items: start; }
@media (min-width: 1024px) { .give-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); } }
.give-aside { display: grid; gap: var(--space-6); }
.give-aside .card h3 { font-size: var(--text-lg); text-transform: uppercase; letter-spacing: var(--tracking-tight); }
.give-step { margin: 0 0 var(--space-6); }
.field > legend.give-step__label, .give-step__label { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--ink-1000); }
.give-step__num { display: grid; place-items: center; width: 28px; height: 28px; font-size: var(--text-xs); color: var(--paper); background: var(--ink-1000); border-radius: 50%; }
.give-summary { margin: var(--space-6) 0 var(--space-4); padding: var(--space-4) var(--space-5); font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--ink-1000); background: var(--blue-050); border: var(--border-thin) solid var(--blue-300); border-radius: var(--radius-md); }
.give-mode { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); }
.provider-list { display: grid; gap: var(--space-2); }
.provider-list .check small { display: block; color: var(--color-text-muted); }
.provider-list .check[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.secure-note { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin: var(--space-3) 0 0; font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--ink-700); }
.secure-note svg { width: 16px; height: 16px; color: var(--blue-700); }
.section18a { margin-top: var(--space-2); padding: var(--space-4); border: var(--border-thin) solid var(--color-border-strong); border-radius: var(--radius-md); }
.section18a[hidden] { display: none; }
.section18a__fields { margin-top: var(--space-4); }
.section18a__fields[hidden] { display: none; }

/* A standalone page title (thank-you, 404) */
.display-title { margin: 0 0 var(--space-4); font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); text-transform: uppercase; }

/* Thank-you states */
.thanks { max-width: 720px; margin: 0 auto; text-align: center; }
.thanks .form-success__icon { width: 80px; height: 80px; }
.thanks [data-state] { display: none; }
.thanks [data-state].is-active { display: block; }

/* ---------- Mentor: how it works ---------- */
.steps { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; counter-reset: steps; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.steps li { position: relative; padding: var(--space-6) var(--space-5) var(--space-5); background: var(--paper); border: var(--border-base) solid var(--frame-line, var(--ink-300)); border-radius: var(--radius-lg); counter-increment: steps; }
.steps li::before { content: counter(steps, decimal-leading-zero); display: block; margin-bottom: var(--space-4); font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: 1; color: var(--green-800); }
.steps h3 { margin: 0 0 var(--space-2); font-size: var(--text-md); }
.steps p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--ink-700); }

.who-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.who-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-4); font-weight: var(--weight-bold); line-height: var(--leading-snug); color: var(--ink-1000); background: var(--paper); border: var(--border-thin) solid var(--color-border-strong); border-radius: var(--radius-md); }
.who-list svg { width: 24px; height: 24px; color: var(--green-800); }

/* ---------- Contact ---------- */
.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); align-items: start; }
@media (min-width: 1024px) { .contact-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); } }
.contact-list { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.contact-list li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.contact-list h3 { margin: 0 0 2px; font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-700); }
.contact-list p, .contact-list address { margin: 0; font-weight: var(--weight-bold); line-height: var(--leading-normal); color: var(--ink-1000); }
.contact-list a { color: var(--ink-1000); }
.map { overflow: hidden; aspect-ratio: 4 / 3; margin-top: var(--space-6); background: var(--ink-100); border: var(--border-base) solid var(--frame-line, var(--ink-300)); border-radius: var(--radius-lg); box-shadow: var(--photo-shadow); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- The book ---------- */
.book-feature { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 900px) { .book-feature { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-12); } }
.book-feature__cover { padding: var(--space-6); background: var(--green-050); border: var(--border-base) solid var(--frame-line, var(--ink-300)); border-radius: var(--radius-xl); box-shadow: var(--slab-shadow); }
.book-feature__cover img { width: 100%; height: auto; border-radius: var(--radius-md); }
.book-title { margin: 0 0 var(--space-2); font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.book-sub { margin: 0 0 var(--space-2); font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--ink-800); }
.book-author { margin: 0 0 var(--space-6); font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--green-800); }

/* ---------- Legal placeholder pages ---------- */
.prose { padding: var(--space-8) var(--space-6); background: var(--paper); border: var(--border-base) solid var(--frame-line, var(--ink-300)); border-radius: var(--radius-lg); box-shadow: var(--slab-shadow); }
@media (min-width: 640px) { .prose { padding: var(--space-10); } }
.prose h2 { margin: var(--space-8) 0 var(--space-2); font-size: var(--text-lg); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-700); }
.prose ul { padding-left: var(--space-5); }

/* ---------- Not found ---------- */
.notfound { text-align: center; }
.notfound__code { display: block; margin: 0 0 var(--space-2); font-size: clamp(5rem, 3rem + 10vw, 9rem); font-weight: var(--weight-bold); line-height: 1; letter-spacing: var(--tracking-display); color: var(--ink-1000); -webkit-text-stroke: 0; }
.notfound .grid { margin-top: var(--space-10); text-align: left; }

/* Single-column defaults: a grid track never grows past its container, so a
   long word or chip wraps instead of pushing the layout off a phone screen. */
.callout, .flow, .impact__grid, .short-list, .statements, .board-grid, .steps, .who-list,
.contact-list, .gov-panel, .trust-strip, .unlocks, .book-feature, .give-aside { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .callout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .trust-strip { grid-template-columns: auto minmax(0, 1fr) auto; } }
@media (min-width: 900px) {
  .gov-panel { grid-template-columns: auto minmax(0, 1fr); }
  .unlocks { grid-template-columns: auto minmax(0, 1fr); }
  .book-feature { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 720px) { .short-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 760px) { .board-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 640px) { .impact__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .impact__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .flow { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.7fr) minmax(0, 1fr); } }

/* 06-utilities.css */
/* ==========================================================================
   Utilities: loaded last so they win over component defaults.
   Token steps only.
   ========================================================================== */
.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-12 { margin-bottom: var(--space-12); }
.center-x { margin-inline: auto; }
.btn-row--center { justify-content: center; }

/* 07-frames.css */
/* ==========================================================================
   Light grey frames, no side frame, photos behind the black panels
   (user, 8 October 2026; the same changes as the African Greeneurs site).
   Loaded last (scripts/build.js bundles the numbered files in order), so it
   overrides the black edges in 03-components, 04-chrome and 05-sections.
   - Card, panel, menu and photo outlines and the page lines are light grey;
     the raised cards sit on a grey base instead of a black ledge. Coloured
     accent bars, buttons and small controls keep their colours.
   - No black frame around the page: it runs edge to edge.
   - The black sections and boxes show one of EARN's own photos, darkened by
     multiplying with --panel-tint so white text stays above 11:1 and green
     text above 5:1.
   ========================================================================== */

:root {
  --frame-line: var(--ink-300);
  --panel-tint: var(--ink-700);
  --slab-shadow:
    0 var(--ledge) 0 var(--frame-line),
    0 calc(var(--ledge) + 10px) 22px -6px rgba(0, 0, 0, .28),
    0 calc(var(--ledge) + 34px) 60px -22px rgba(0, 0, 0, .38);
  --slab-shadow-hover:
    0 var(--ledge-hover) 0 var(--frame-line),
    0 calc(var(--ledge-hover) + 14px) 28px -6px rgba(0, 0, 0, .30),
    0 calc(var(--ledge-hover) + 46px) 80px -24px rgba(0, 0, 0, .42);
}

/* ---------- No side frame ---------- */
html { background: none; }
body { margin-inline: 0; max-width: none; box-shadow: none; }

/* ---------- Grey outlines ---------- */
/* No accent bar: grey all round. */
.frame { border-color: var(--frame-line); }
/* A coloured top bar: the other three sides go grey. */
.card, .form-card, .flow__card, .subnav {
  border-left-color: var(--frame-line);
  border-right-color: var(--frame-line);
  border-bottom-color: var(--frame-line);
}
/* A coloured left bar: the other three sides go grey. */
.statement {
  border-top-color: var(--frame-line);
  border-right-color: var(--frame-line);
  border-bottom-color: var(--frame-line);
}
.short-item img { border-color: var(--frame-line); }

/* ---------- Grey page lines ---------- */
.earnbar { border-bottom-color: var(--frame-line); }
.site-header { border-bottom-color: var(--frame-line); }
.site-header.is-scrolled { box-shadow: 0 2px 0 var(--frame-line), 0 14px 30px -12px rgba(0, 0, 0, .45); }
.site-footer, .footer-bottom { border-top-color: var(--frame-line); }
.section--rule::before { background: var(--frame-line); }
.page-hero--plain { border-bottom-color: var(--frame-line); }
.fund-card__media, .story__media { border-bottom-color: var(--frame-line); }
.manifesto { border-block-color: var(--frame-line); }

/* ---------- Photos behind the black panels ---------- */
.record, .impact, .closing__box, .site-footer__band {
  background-color: var(--panel-tint);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
}
.record { background-image: url("/img/tomato-harvesting-800.webp"); }
.impact { background-image: url("/img/agripreneur-development-assessment-800.webp"); }
.closing__box { background-image: url("/img/greenhouse-basil-860.webp"); border-color: var(--panel-tint); }
.site-footer__band { background-image: url("/img/mission-field-800.webp"); }

/* ---------- Numbered steps ("How your support works") ---------- */
/* Markers alternate blue and green (scripts/templates/parts.js); the line
   joining them and their outline are grey, like the African Greeneurs site. */
.flow__step::before { background: var(--frame-line); }
.flow__node { border-color: var(--frame-line); box-shadow: 0 3px 0 var(--frame-line); }

/* ---------- "What your support unlocks": grey, and the chips scroll ---------- */
.unlocks { border-color: var(--frame-line); }
.unlocks > * { min-width: 0; }
.chips li { border-color: var(--frame-line); }
.unlocks__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
@media (min-width: 900px) { .unlocks__head { flex-direction: column; align-items: flex-start; } }
.unlocks__strip { display: flex; overflow: hidden; }
.unlocks__track {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  padding-right: var(--space-2); /* the same gap between the two copies as between chips */
  animation: unlocks-scroll 32s linear infinite;
}
.unlocks__strip:hover .unlocks__track { animation-play-state: paused; }
@keyframes unlocks-scroll { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .unlocks__track { flex-wrap: wrap; flex: 1 1 auto; animation: none; }
  .unlocks__track[aria-hidden="true"] { display: none; }
}

/* "What your support unlocks", open layout (user, 8 Oct 2026): no box, the
   heading centred on top, the chips scrolling across the full width of the
   page (no pause button since 8 Oct: see 08-home.css). */
.unlocks { display: block; margin-top: var(--space-10); padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.unlocks__head { flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); margin-bottom: var(--space-5); text-align: center; }
@media (min-width: 900px) { .unlocks__head { flex-direction: column; align-items: center; } }
.unlocks__strip { margin-inline: calc(50% - 50vw); padding-block: var(--space-2); }

/* Softer step colours (user, 8 Oct 2026): light tints of EARN blue and green
   for the markers (200) and the cards' top bars (300); the numbers stay black. */
.flow__step--blue { --step-colour: var(--blue-300); }
.flow__step--green { --step-colour: var(--green-300); }
.flow__step--blue .flow__node { background: var(--blue-200); }
.flow__step--green .flow__node { background: var(--green-200); }

/* Faint decorative colour (user, 8 Oct 2026; the same on the African
   Greeneurs site): the page accent stays strong on buttons, but its
   decorative uses take a light tint that follows the page (green or blue). */
:root, .path-applicant, .path-training { --accent-faint: var(--green-300); --accent-fill: var(--green-200); }
.path-give { --accent-faint: var(--blue-300); --accent-fill: var(--blue-200); }
.form-card { border-top-color: var(--accent-faint); }
.notice:not([class*="notice--"]) { border-left-color: var(--accent-faint); }
.icon-tile:not([class*="icon-tile--"]) { background: var(--accent-fill); }
.link-arrow { text-decoration-color: var(--accent-faint); }

/* Faint buttons (user, 8 Oct 2026; the same on the African Greeneurs site):
   light tints of EARN blue and green with black text; the black button
   becomes pale grey. Hover takes the next tint up. */
.btn--primary { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--ink-1000); }
.btn--primary:hover:not(:disabled) { background: var(--accent-faint); border-color: var(--accent-faint); color: var(--ink-1000); }
.btn--give { background: var(--blue-200); border-color: var(--blue-200); }
.btn--give:hover:not(:disabled) { background: var(--blue-300); border-color: var(--blue-300); }
.btn--green { background: var(--green-200); border-color: var(--green-200); }
.btn--green:hover:not(:disabled) { background: var(--green-300); border-color: var(--green-300); }
.btn--dark { background: var(--ink-100); border-color: var(--ink-100); color: var(--ink-1000); }
.btn--dark:hover:not(:disabled) { background: var(--ink-200); border-color: var(--ink-200); color: var(--ink-1000); }

/* Faint brand bar (top strip, heading underlines, closing box), as on the
   African Greeneurs site. */
:root { --brand-bar: linear-gradient(90deg, var(--blue-300) 0 55%, var(--green-300) 55% 100%); }

/* Green buttons: solid EARN green and flat, not faint and no shadow base
   (user, 8 Oct 2026; the same on the African Greeneurs site). Black text on
   EARN green is 8.8:1. The blue Donate buttons stay pale blue. */
:root, .path-applicant, .path-training { --btn-fill: var(--earn-green); --btn-fill-hover: var(--green-400); }
.path-give { --btn-fill: var(--blue-200); --btn-fill-hover: var(--blue-300); }
.btn--primary { background: var(--btn-fill); border-color: var(--btn-fill); }
.btn--primary:hover:not(:disabled) { background: var(--btn-fill-hover); border-color: var(--btn-fill-hover); }
.btn--green { background: var(--earn-green); border-color: var(--earn-green); }
.btn--green:hover:not(:disabled) { background: var(--green-400); border-color: var(--green-400); }
.btn--green, .btn--green:hover:not(:disabled) { box-shadow: none; }
.btn--primary, .btn--primary:hover:not(:disabled) { box-shadow: none; }

/* ---------- Partner showcases (/partner): Nedbank and Eskom ---------- */
.pshow__head { display: grid; gap: var(--space-6); align-items: end; margin-bottom: var(--space-8); }
.pshow__eyebrow {
  display: inline-block;
  margin: 0 0 var(--space-3);
  padding: 4px 12px;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-1000);
  background: var(--green-200);
  border-radius: var(--radius-pill);
}
.pshow--eskom .pshow__eyebrow { background: var(--blue-200); }
.pshow__head h2 { margin: 0 0 var(--space-3); }
.pshow__lead { margin: 0; max-width: 62ch; font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--ink-700); }
.pshow__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); align-items: start; margin: 0; }
.pshow__fact {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 2px;
  padding: 10px var(--space-4);
  background: var(--paper);
  border: 2px solid var(--frame-line);
  border-top: 5px solid var(--green-300);
  border-radius: var(--radius-lg);
  box-shadow: var(--slab-shadow);
}
.pshow__fact:nth-child(even) { border-top-color: var(--blue-300); }
.pshow__fact dd { margin: 0; font-size: clamp(1.4rem, 2.4vw, 2.1rem); font-weight: var(--weight-bold); line-height: 1.1; white-space: nowrap; color: var(--ink-1000); }
.pshow__fact dt { margin: 0; font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--ink-700); }
.pshow .stories { margin-bottom: var(--space-6); }
.pshow__photos { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.pshow__photos li { overflow: hidden; border: 2px solid var(--frame-line); border-radius: var(--radius-lg); box-shadow: var(--slab-shadow); aspect-ratio: 3 / 2; }
.pshow__photos img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 560px) { .pshow__photos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .pshow__photos { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }
@media (min-width: 960px) { .pshow__head { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-10); } }
@media (max-width: 479px) { .pshow__facts { grid-template-columns: 1fr; } }

/* 08-home.css */
/* ==========================================================================
   Photographs through the home page (user, 8 October 2026: "make this look
   a whole lot nicer"). Loaded after 07-frames.css, so it overrides the
   older rules for these parts:
   - How your support works: each step on a photograph, the number where the
     photo meets the card (no circles between the steps: user, 9 Oct 2026).
   - What your support unlocks: bigger chips that circulate without stopping
     (no pause button; hovering pauses, reduced motion shows them still).
   - What your support builds: each outcome on a photograph.
   - Cohort by cohort: a photograph on each cohort and a strip from the
     programme that opens the gallery on the African Greeneurs site.
   - Our partners: EARN and Eskom, each with three photographs.
   ========================================================================== */

/* ---------- How your support works ---------- */
.flow { gap: var(--space-6); }
.flow__step {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--paper);
  border: var(--border-base) solid var(--frame-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--slab-shadow);
}
.flow__step::before { content: none; }
.flow__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink-100);
  border-bottom: 6px solid var(--step-colour);
  border-radius: calc(var(--radius-lg) - var(--border-base)) calc(var(--radius-lg) - var(--border-base)) 0 0;
}
.flow__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-4) var(--ease-out-soft); }
.flow__step:hover .flow__media img { transform: scale(1.05); }
.flow__card { flex: 1 1 auto; padding: 0 var(--space-5) var(--space-5); background: none; border: 0; border-radius: 0; box-shadow: none; }
.flow__node {
  width: 52px;
  height: 52px;
  margin: -29px 0 var(--space-3);
  border: 4px solid var(--paper);
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .35);
}
.flow__list { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); margin-top: var(--space-3); }
.flow__list li { flex-direction: row; align-items: flex-start; gap: var(--space-2); padding: 0; font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--ink-600); background: none; border: 0; border-radius: 0; }
.flow__list li svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; color: var(--green-700); }
.flow__list strong { display: block; }
.flow__badge { align-items: flex-start; }
.flow__badge svg { margin-top: 2px; }
@media (min-width: 640px) {
  .flow { display: flex; flex-wrap: wrap; justify-content: center; }
  .flow__step { flex: 0 1 calc((100% - var(--space-6)) / 2); }
}
@media (min-width: 860px) {
  .flow__step { flex-basis: calc((100% - 2 * var(--space-6)) / 3); }
}
@media (min-width: 1100px) {
  .flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-8); }
  .flow__list { grid-template-columns: minmax(0, 1fr); }
  .flow__media { aspect-ratio: 4 / 3; }
}

/* ---------- What your support unlocks ---------- */
.unlocks { margin-top: var(--space-12); }
.unlocks__strip { padding-block: var(--space-2) var(--space-6); }
/* About 35px a second, slow enough to read the chips (user, 9 Oct 2026: "make it rotate slower"; the African Greeneurs logo strip moves at the same speed). */
.unlocks__track { gap: var(--space-3); padding-right: var(--space-3); animation-duration: 220s; }
.unlocks .chips li {
  gap: var(--space-3);
  min-height: 56px;
  padding: 8px var(--space-5) 8px 8px;
  font-weight: var(--weight-regular);
  color: var(--ink-700);
  white-space: nowrap;
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .4);
}
.unlocks .chips strong { color: var(--ink-1000); }
.unlocks__icon { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; }
.unlocks__icon--blue { background: var(--blue-200); }
.unlocks__icon--green { background: var(--green-200); }
.unlocks .chips .unlocks__icon svg { width: 20px; height: 20px; color: var(--ink-1000); }
@media (prefers-reduced-motion: reduce) {
  .unlocks__track { justify-content: center; padding-inline: var(--gutter); }
  .unlocks__track li[aria-hidden="true"] { display: none; }
  .unlocks .chips li { white-space: normal; }
}

/* ---------- What your support builds ---------- */
.outcome { padding: 0; overflow: hidden; }
.outcome--blue { --outcome-colour: var(--blue-300); }
.outcome--green { --outcome-colour: var(--green-300); }
.outcome__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-100); border-bottom: 6px solid var(--outcome-colour); }
.outcome__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-4) var(--ease-out-soft); }
.outcome:hover .outcome__media img { transform: scale(1.05); }
.outcome__body { flex: 1 1 auto; padding: 0 var(--space-6) var(--space-6); }
.outcome__body .icon-tile { margin: -30px 0 var(--space-4); border: 4px solid var(--paper); box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .35); }

/* ---------- Cohort by cohort ---------- */
.cohort { padding: 0; overflow: hidden; border-top: var(--border-base) solid var(--frame-line); }
.cohort__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-100); border-bottom: 6px solid var(--green-300); }
.cohort--foundation .cohort__media { border-bottom-color: var(--blue-300); }
.cohort__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cohort__body { flex: 1 1 auto; padding: var(--space-5); }

.record__gallery { margin-top: var(--space-12); }
.record__gallery-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); margin-bottom: var(--space-6); }
.record__gallery-head .record__subhead { display: inline-flex; align-items: center; gap: var(--space-3); margin: 0; }
.record__subhead svg { width: 26px; height: 26px; color: var(--earn-green); }
.record__photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .record__photos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .record__photos { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-4); } }
.record__photos li { position: relative; aspect-ratio: 1; overflow: hidden; border: 2px solid rgba(255, 255, 255, .4); border-radius: var(--radius-md); }
.record__photos img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-4) var(--ease-out-soft); }
.record__photos li:hover img { transform: scale(1.06); }
.record__more a { display: block; height: 100%; color: var(--paper); text-decoration: none; }
.record__more a:focus-visible { outline: 3px solid var(--paper); outline-offset: -6px; }
.record__more img { filter: brightness(.38); }
.record__more-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: var(--space-3); font-size: var(--text-xs); text-align: center; color: var(--paper); }
.record__more-label svg { width: 34px; height: 34px; margin-bottom: var(--space-1); color: var(--earn-green); }
.record__more-label strong { font-size: var(--text-md); }

/* ---------- Our partners (home): EARN and Eskom ---------- */
.partner-rows { display: grid; gap: var(--space-12); margin: 0; padding: 0; list-style: none; }
.partner-row { display: grid; gap: var(--space-6); align-items: center; }
.partner-row--blue { --tone: var(--blue-300); --tone-fill: var(--blue-200); }
.partner-row--green { --tone: var(--green-300); --tone-fill: var(--green-200); }
.partner-row__photos { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: var(--space-3); height: clamp(260px, 34vw, 420px); margin: 0; padding: 0; list-style: none; }
.partner-row__photo { overflow: hidden; background: var(--ink-100); border: var(--border-base) solid var(--frame-line); border-radius: var(--radius-lg); box-shadow: var(--slab-shadow); }
.partner-row__photo--1 { grid-row: 1 / -1; }
.partner-row__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-4) var(--ease-out-soft); }
.partner-row__photo:hover img { transform: scale(1.05); }
.partner-row__body { padding: var(--space-6); background: var(--paper); border: var(--border-base) solid var(--frame-line); border-top: 6px solid var(--tone); border-radius: var(--radius-lg); box-shadow: var(--slab-shadow); }
.partner-row__kind { display: inline-block; margin: 0 0 var(--space-3); padding: 4px 12px; font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-1000); background: var(--tone-fill); border-radius: var(--radius-pill); }
.partner-row__body h3 { margin: 0 0 var(--space-3); font-size: var(--text-2xl); line-height: var(--leading-tight); }
.partner-row__body p:not(.partner-row__kind) { margin: 0 0 var(--space-5); line-height: var(--leading-relaxed); color: var(--ink-700); }
.partner-row__links { display: grid; gap: var(--space-1); justify-items: start; }
@media (min-width: 960px) {
  .partner-row { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-10); }
  .partner-row--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .partner-row--flip .partner-row__photos { order: 2; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .partner-row--flip .partner-row__photo--1 { grid-column: 2; grid-row: 1 / -1; }
  .partner-row--flip .partner-row__photo--2 { grid-column: 1; grid-row: 1; }
  .partner-row--flip .partner-row__photo--3 { grid-column: 1; grid-row: 2; }
  .partner-row__body { padding: var(--space-8); }
}

@media (prefers-reduced-motion: reduce) {
  .flow__media img, .outcome__media img, .record__photos img, .partner-row__photo img { transition: none; }
  .flow__step:hover .flow__media img, .outcome:hover .outcome__media img, .record__photos li:hover img, .partner-row__photo:hover img { transform: none; }
}

/* 09-strategy.css */
/* ==========================================================================
   The April 2026 strategy (Odette Crofton's website input, June 2026):
   - Why the Foundation exists: the list of lessons.
   - Vision, mission and strategic intent side by side (.statements--row).
   - The 360° model: five numbered component cards, and Figure 1 of the
     strategy redrawn in the EARN palette as a ring of ten stages around the
     Josudan Foundation mark, with the three phases and the outputs below.
     Below 1000px the ring is a numbered list.
   ========================================================================== */

/* ---------- Why the Foundation exists ---------- */
.lessons { display: grid; gap: var(--space-2); margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.lessons li { position: relative; padding-left: var(--space-6); color: var(--ink-800); }
.lessons li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 10px; height: 10px; border-radius: 50%; background: var(--blue-300); }
.lessons li:nth-child(even)::before { background: var(--green-300); }

/* ---------- Vision, mission, strategic intent ---------- */
.statements--row { margin-top: var(--space-12); }
@media (min-width: 1024px) { .statements--row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.statements--row .statement p { font-size: var(--text-md); line-height: var(--leading-normal); }

/* ---------- The five components ---------- */
.model-parts { counter-reset: none; }
@media (min-width: 640px) { .model-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .model-parts { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); } }
.model-part { position: relative; }
.model-part__num { position: absolute; top: var(--space-4); right: var(--space-5); font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: 1; color: var(--blue-700); }
.model-part.card--green .model-part__num { color: var(--green-800); }
.model-part h3 { font-size: var(--text-lg); }
.model-part p { margin: 0; }

/* ---------- Figure 1: the cycle ---------- */
.model-figure { margin: var(--space-16) 0 0; }
.model-figure__title { margin: 0 0 var(--space-6); font-size: var(--text-xl); text-align: center; }
.model-figure figcaption { margin-top: var(--space-6); font-size: var(--text-sm); color: var(--ink-700); text-align: center; }

/* Small screens: a numbered list, the mark on top. */
.model-ring { display: grid; gap: var(--space-6); }
.model-ring__track { display: none; }
.model-ring__core { display: flex; align-items: center; gap: var(--space-4); }
.model-ring__core img { width: 96px; height: auto; }
.model-ring__core p { margin: 0; font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--ink-900); }
.model-ring__core strong { display: block; font-size: var(--text-2xl); color: var(--ink-1000); }
.model-ring__stages { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
@media (min-width: 560px) { .model-ring__stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.model-stage {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--ink-1000);
  background: var(--paper);
  border: 3px solid var(--blue-300);
  border-radius: var(--radius-md);
}
.model-stage--green { border-color: var(--green-300); }
.model-stage__num { display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; font-size: var(--text-xs); border-radius: 50%; background: var(--blue-200); }
.model-stage--green .model-stage__num { background: var(--green-200); }

/* 1000px and up: the ring. Ten stages, 36 degrees apart, clockwise from the
   bottom, on a circle of 44% of the box (the SVG track uses the same). */
@supports (left: calc(1% * cos(0deg))) {
  @media (min-width: 1000px) {
    .model-ring { position: relative; display: block; width: min(calc(100% - 200px), 760px); aspect-ratio: 1; margin: var(--space-12) auto; }
    .model-ring__track { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
    .model-ring__track circle { fill: none; stroke: var(--ink-300); stroke-width: .5; }
    .model-ring__track path { fill: none; stroke: var(--ink-700); stroke-width: .6; stroke-linecap: round; stroke-linejoin: round; }
    .model-ring__core { position: absolute; left: 50%; top: 50%; flex-direction: column; width: 34%; text-align: center; transform: translate(-50%, -50%); }
    .model-ring__core img { width: 58%; }
    .model-ring__stages { display: block; position: absolute; inset: 0; }
    .model-stage {
      --a: calc(90deg + var(--i) * 36deg);
      position: absolute;
      left: calc(50% + 44% * cos(var(--a)));
      top: calc(50% + 44% * sin(var(--a)));
      flex-direction: column;
      justify-content: center;
      gap: var(--space-1);
      width: 168px;
      min-height: 96px;
      padding: var(--space-3);
      text-align: center;
      transform: translate(-50%, -50%);
      box-shadow: var(--slab-shadow);
    }
  }
}

/* The phases and the outputs. */
.model-phases { margin-top: var(--space-10); }
.model-phase { border-top: 6px solid var(--blue-300); }
.model-phase--green { border-top-color: var(--green-300); }
.model-phase--dark { border-top-color: var(--ink-1000); }
.model-phase h3 { margin-bottom: var(--space-3); }
.model-phase h4 { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--blue-700); }
.model-phase--green h4 { color: var(--green-800); }
.model-phase--dark h4 { color: var(--ink-900); }
.model-phase ul { display: grid; gap: var(--space-1); margin: 0; padding-left: 1.2em; color: var(--ink-800); }
.model-outputs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-8); }
.model-outputs h3 { margin: 0; font-size: var(--text-md); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }

/* ==========================================================================
   Added 12 Oct 2026 from the April 2026 strategy (Kobang): the sustaining
   phase, who does what, hubs, goals 2026 to 2030, what we measure. They reuse
   the site's cards, grids and notices; only spacing and the numbered goals
   are new.
   ========================================================================== */

.sustain h3, .measures h3 { font-size: var(--text-lg); }
.sustain p, .measures p { margin: 0; }
.sustain__close { max-width: 62ch; margin: var(--space-10) 0 0; font-size: var(--text-lg); line-height: var(--leading-normal); color: var(--ink-900); }
.sustain__close strong { color: var(--ink-1000); }

.model-sub { margin: var(--space-16) 0 var(--space-6); font-size: var(--text-xl); text-align: center; }
.division h3 { margin-bottom: var(--space-4); }
.hubs-note { margin-top: var(--space-10); }

.logo-tagline { margin: var(--space-4) 0 0; font-size: var(--text-sm); font-weight: var(--weight-bold); line-height: var(--leading-snug); text-align: center; color: var(--ink-900); }

.goals { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .goals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .goals { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.goal { display: grid; align-content: start; gap: var(--space-3); padding: var(--space-5); background: var(--paper); border: 3px solid var(--blue-300); border-radius: var(--radius-md); }
.goal--green { border-color: var(--green-300); }
.goal p { margin: 0; font-size: var(--text-md); font-weight: var(--weight-bold); line-height: var(--leading-snug); color: var(--ink-1000); }
.goal__num { display: grid; place-items: center; width: 36px; height: 36px; font-weight: var(--weight-bold); border-radius: 50%; background: var(--blue-200); color: var(--ink-1000); }
.goal--green .goal__num { background: var(--green-200); }

.measure__value { margin: var(--space-3) 0 0; font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: 1; color: var(--green-800); }

/* ---------- Carried over from the original site (12 Oct 2026) ---------- */
.tracks h3, .programmes h3 { font-size: var(--text-lg); }
.tracks p { margin: 0; }
.programmes .outcome__body .tag-list { margin-bottom: var(--space-3); }
.programmes .card__foot { margin-top: var(--space-4); }
.eco-card__logo--book img { max-height: 108px; }
.tracks-lead { max-width: 62ch; margin: 0 auto var(--space-8); text-align: center; }
.programmes .outcome__body { padding-top: var(--space-6); }

/* 10-faint.css */
/* ==========================================================================
   Faint blue instead of dark (user, 9 Oct 2026: "change this button to the
   faint blue, and any other buttons that are still dark or sections that
   are still dark like this, to the faint blue"). The same change is on the
   African Greeneurs site. Loaded last, so it overrides earlier files.
   - Selected tabs, choices and step numbers: faint blue with black text.
   - The panels that were black with a photo behind (track record, impact,
     closing band, footer strip): faint blue, the photo showing through
     lightly (screen blend: the darkest the panel can get is blue-200, so
     black text stays above 15:1), with black text.
   Photo heroes keep their dark scrims: their white text sits on the photo.
   ========================================================================== */

/* ---------- Controls ---------- */
.subpages a[aria-current="page"] { background: var(--blue-200); box-shadow: 0 3px 0 var(--blue-300); }
.choice input:checked + span { color: var(--ink-1000); background: var(--blue-200); border-color: var(--blue-300); box-shadow: 0 3px 0 var(--blue-300); }
.segmented input:checked + span { color: var(--ink-1000); background: var(--blue-200); }
.give-step__num { color: var(--ink-1000); background: var(--blue-200); }
.icon-tile--dark { color: var(--ink-1000); background: var(--blue-200); }
.check-list .check:has(input:checked), .provider-list .check:has(input:checked) { border-color: var(--blue-300); background: var(--blue-100); }

/* ---------- Panels ---------- */
/* No blue over the photos (user, 9 Oct 2026: "fix this blue shade over this
   image", "all the other images"): the photo is screened with a neutral
   grey, not blue, so it keeps its own colours, faint. The darkest the panel
   can get is ink-400 (#949494): black text stays above 6.5:1. */
.record, .impact, .closing__box, .site-footer__band {
  color: var(--ink-1000);
  background-color: var(--ink-400);
  text-shadow: 0 0 2px rgba(255, 255, 255, .9), 0 0 12px rgba(255, 255, 255, .85); /* black text stays clear over busy photos */
  background-blend-mode: screen;
}
.closing__box { border-color: var(--frame-line); }

/* Track record and impact */
.record .section-head h2, .record .section-head__sub,
.impact .section-head h2, .impact .section-head__sub { color: var(--ink-1000); }
.record .section-head__lead { color: var(--ink-800); }
.record :focus-visible { outline-color: var(--focus-ring); }
.record__figures li, .impact__grid li, .record__foot { border-top-color: var(--ink-1000); }
.record__value, .impact__value { color: var(--green-800); }
.record__label, .impact__label, .record__subhead, .record__market h3 { color: var(--ink-1000); }
.record__market p { color: var(--ink-800); }
.record .link-arrow { color: var(--ink-1000); text-decoration-color: var(--green-800); }
.record .link-arrow:hover { color: var(--blue-700); text-decoration-color: var(--blue-700); }
.record__source { color: var(--ink-800); }
/* "See the gallery": a faint blue tile with the photo showing through. */
.record__more a { color: var(--ink-1000); background: var(--blue-200); }
.record__more a:focus-visible { outline-color: var(--ink-1000); }
.record__more img { filter: none; opacity: .3; }
.record__more-label { color: var(--ink-1000); }

/* Closing band */
.closing h2, .closing__sub { color: var(--ink-1000); }
.closing__text { color: var(--ink-800); }
.closing .btn--on-dark { color: var(--ink-1000); background: var(--paper); border-color: var(--frame-line); box-shadow: 0 3px 0 var(--frame-line); }
.closing .btn--on-dark:hover:not(:disabled) { color: var(--ink-1000); background: var(--ink-050); border-color: var(--ink-500); }

/* Footer strip */
.site-footer__band { color: var(--ink-1000); }

/* The tomato photo turns pink in the faint blend; green crops stay on brand. */
.record { background-image: url("/img/cohort-founding-800.webp"); }

/* 11-gallery.css */
/* Graduation photo wall (/graduation): mixed portrait and landscape photos in
   columns, each opening the lightbox. */
.photo-wall { list-style: none; margin: 0; padding: 0; column-count: 2; column-gap: var(--space-3); }
@media (min-width: 640px) { .photo-wall { column-count: 3; column-gap: var(--space-4); } }
@media (min-width: 1024px) { .photo-wall { column-count: 4; } }
.photo-wall__item { break-inside: avoid; margin: 0 0 var(--space-3); }
@media (min-width: 640px) { .photo-wall__item { margin-bottom: var(--space-4); } }
.photo-wall__item a { display: block; overflow: hidden; border-radius: var(--radius-md); background: var(--ink-100); }
.photo-wall__item img { display: block; width: 100%; height: auto; transition: transform var(--dur-4) var(--ease-out-soft); }
@media (hover: hover) { .photo-wall__item a:hover img { transform: scale(1.03); } }
.photo-wall__item a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

/* Lightbox */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lightbox::backdrop { background: rgba(0, 0, 0, .88); }
.lightbox__stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 56px 16px; }
.lightbox__img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: var(--radius-md); background: var(--ink-1000); }
.lightbox__btn { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink-1000); font: inherit; font-size: 24px; line-height: 1; cursor: pointer; }
.lightbox__btn:hover { background: var(--paper); }
.lightbox__btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.lightbox__close { top: 8px; right: 8px; }
.lightbox__prev { left: 8px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 8px; top: 50%; transform: translateY(-50%); }
.lightbox__count { position: absolute; left: 0; right: 0; bottom: 12px; margin: 0; text-align: center; color: var(--paper); font-size: var(--text-sm); }