/* ===========================================================================
   The Inclusivity Project - design system
   Ground: warm paper. Ink: navy. Gold: a FILL, never text.
   Tokens are lifted verbatim from tokens.css (resolve-palette + the direction
   overrides in PITCH-PLAN.md). Do not re-derive a colour by eye.
   =========================================================================== */

:root {
  /* --- palette (from tokens.css) --- */
  --colour-primary: #0e316b;
  --colour-primary-dark: #001743;
  --colour-primary-hover: #02235c;
  --colour-primary-active: #001846;
  --colour-off-white: #edeef2;
  --colour-accent: #eac815;
  --colour-accent-hover: #d4b412;
  --colour-accent-subtle: #fbf0c4;
  --colour-accent-deep: #aa9000;
  --colour-on-accent: #0e316b;
  --colour-on-primary: #ffffff;
  --colour-text: #2b2824;
  --colour-text-muted: #6b6660;
  --colour-bg: #faf8f4;
  --colour-surface: #f4f1ea;
  --colour-surface-alt: #ebe7de;
  --colour-border: #cfd1d5;
  --colour-on-dark: #dfe3ea;

  /* --- semantic --- */
  --paper: var(--colour-bg);
  --ink: var(--colour-text);
  --ink-muted: var(--colour-text-muted);
  --navy: var(--colour-primary);
  --gold: var(--colour-accent);
  --hairline: #d9d3c6;
  --hairline-strong: #bfb7a6;

  /* --- layout --- */
  --maxw: 1180px;
  --maxw-narrow: 820px;
  --gutter: 1.5rem;
  --header-h: 80px;
  --nav-bp: 1080px;

  /* --- type --- */
  /* Inter everywhere at her request (chg-d6c28f5e, "for all the pages text use the
     Inter font"); this was Fraunces. Kept as its own token so the display roles
     (headings, figures, quotes) stay one lever. */
  --display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-body: clamp(1.0625rem, 1.0rem + 0.28vw, 1.1875rem);   /* 17 -> 19px */
  --fs-lead: clamp(1.1875rem, 1.1rem + 0.5vw, 1.4375rem);
  --fs-small: 0.9375rem;
  --fs-eyebrow: 0.78rem;

  --h1: clamp(2.375rem, 1.55rem + 3.4vw, 4.375rem);
  --h2: clamp(1.8125rem, 1.35rem + 2.0vw, 2.875rem);
  --h3: clamp(1.25rem, 1.1rem + 0.75vw, 1.6875rem);
  --h4: clamp(1.0625rem, 1.0rem + 0.35vw, 1.25rem);

  /* --- rhythm --- */
  --sec-y: clamp(3.25rem, 6vw, 6rem);
  --sec-y-tight: clamp(2.25rem, 4vw, 3.75rem);

  /* --- interaction ---------------------------------------------------------
     The focus ring is drawn in the band's OWN ink: navy on paper, paper on navy.
     It is carried as an inherited custom property rather than a scoped
     `:focus-visible` override on purpose. A variable can only ever reach the
     outline colour, so - unlike a scoped selector - it cannot capture a button
     and repaint its label, which is how this site produced two contrast
     collisions already (warm-ink on navy at 1.17:1, white on gold at 1.64:1).

     Measured: navy ring on paper 11.85:1, white ring on navy 12.57:1. Before
     this token existed a single navy ring was painted on every navy band at
     exactly 1.00:1 - invisible - on 113 of 262 focusable elements, every site
     footer among them. axe cannot see that, and did not.

     --control-edge is the boundary of a real control (text input, amount,
     menu button), which WCAG 1.4.11 holds to 3:1. The decorative --hairline
     family measures 1.88:1 and stays where it is: a figure frame is not a
     control, and quiet edges are the point of this page.                     */
  --focus-ring: var(--navy);
  --control-edge: var(--ink-muted);        /* 5.36:1 on paper */

  /* Exponential ease-out. No bounce, no elastic. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.14s;
  --t-med: 0.22s;
}

/* ---------------------------------------------------------------- reset -- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--display);
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 0.6em;
  line-height: 1.1;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
h1 { font-size: var(--h1); line-height: 1.04; letter-spacing: -0.026em; }
h2 { font-size: var(--h2); line-height: 1.08; letter-spacing: -0.022em; }
h3 { font-size: var(--h3); line-height: 1.18; }
h4 { font-size: var(--h4); line-height: 1.3; font-family: var(--body); font-weight: 600; letter-spacing: -0.005em; }

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
/* `balance` on headings (above) evens the line lengths; `pretty` on prose pulls
   a word back off a last line that would otherwise sit alone. Checked at 390
   and 1440 on every page. Both degrade to normal wrapping where unsupported. */
li, figcaption, dd { text-wrap: pretty; }

/* Safety net: heading-styled divs must not inherit the body line-height. */
[class*="__title"], [class*="__name"], [class*="__label"],
[class*="__count"], [class*="__amount"], [class*="__value"],
[class*="__num"], [class*="__figure"] { line-height: 1.25; }

a {
  color: var(--navy);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  transition: text-decoration-color var(--t-fast) var(--ease-out), text-decoration-thickness var(--t-fast) var(--ease-out);
}
a:hover { text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
/* Bare prose links had a hover and no press. The underline deepens rather than
   thickening further, so nothing reflows under the pointer. */
a:active { text-decoration-color: var(--colour-accent-hover); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 2px;
}
/* The ring inverts wherever the ground does. Setting the variable - never a
   `color` or `background` - is what keeps this out of the button cascade. */
.s-navy,
.site-footer { --focus-ring: #fff; }

ul, ol { padding-left: 1.15em; }
li { margin-bottom: 0.4em; }

hr { border: 0; border-top: 1px solid var(--hairline); margin: var(--sec-y-tight) 0; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: #fff; padding: 0.75rem 1.25rem; font-weight: 600;
}
.skip-link:focus { left: 0; }

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

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

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

@media (max-width: 480px) { :root { --gutter: 1rem; } }

.section { padding-top: var(--sec-y); padding-bottom: var(--sec-y); }
.section--tight { padding-top: var(--sec-y-tight); padding-bottom: var(--sec-y-tight); }
.section--flush-bottom { padding-bottom: 0; }

/* Surfaces. Rotate them; never two of the same tone back to back. */
.s-paper   { background: var(--paper); }
.s-surface { background: var(--colour-surface); }
.s-alt     { background: var(--colour-surface-alt); }
.s-navy    { background: var(--navy); color: var(--colour-on-dark); }
.s-navy h1, .s-navy h2, .s-navy h3, .s-navy h4 { color: #fff; }
/* Excludes buttons on purpose: a bare `.s-navy a` (0,1,1) outranks `.btn--gold`
   (0,1,0) and repaints its label white, which on the gold fill measures 1.64:1 -
   the exact pairing tokens.css forbids. A button carries its own on-colour into
   any band. */
.s-navy a:not(.btn) { color: #fff; }
.s-navy .eyebrow { color: var(--gold); }
.s-navy .lead { color: #eef1f6; }

.prose { max-width: 68ch; }
.prose--wide { max-width: 66ch; } /* 66ch renders ~75 characters; ch is the width of "0", not a character */

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink);
  max-width: 44ch;
  /* A lead is display-set and runs two to four lines, so it takes `balance`
     (even lines) rather than the `pretty` that governs body prose. Measured
     before: last lines at 13-26% of the measure on our-work, our-approach,
     donate and about. Chrome stops balancing above its line cap and falls back
     to normal wrapping on its own, which is what the long about-page lead gets. */
  text-wrap: balance;
}
.lead--wide { max-width: 62ch; }

.muted { color: var(--ink-muted); }
.small { font-size: var(--fs-small); line-height: 1.6; }

.eyebrow {
  display: block;
  font-family: var(--body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 1rem;
}

.rule-gold { width: 64px; height: 4px; background: var(--gold); border: 0; margin: 0 0 1.5rem; }
.rule-hair { width: 100%; height: 1px; background: var(--hairline); border: 0; margin: 0; }

/* ------------------------------------------------------------- buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.7rem 1.5rem;
  border: 0;
  border-radius: 2px;
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out),
              transform 0.1s var(--ease-out);
}

/* Every `color` below is stated on its own rule rather than inherited, so no
   band-scoped selector can win it by accident. Measured at 1440px, all 9 pages:
   resting 7.65 / 12.57, hover 6.19 / 15.03, active 6.19 / 17.23. */
.btn--gold { background: var(--gold); color: var(--colour-on-accent); }
.btn--gold:hover { background: var(--colour-accent-hover); color: var(--colour-on-accent); }
/* The press is a 1px depression, NOT a darker fill. The only darker gold in the
   system is --colour-accent-deep, and navy on it measures 4.01:1 - below the
   4.5:1 floor. So gold holds its hover fill and moves instead. */
.btn--gold:active { background: var(--colour-accent-hover); color: var(--colour-on-accent); }

.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--colour-primary-hover); color: #fff; }
.btn--navy:active { background: var(--colour-primary-active); color: #fff; }

.btn--outline { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); }
.btn--outline:hover { background: var(--navy); color: #fff; }
.btn--outline:active { background: var(--colour-primary-active); color: #fff; }

.btn:active { transform: translateY(1px); }

.btn--lg { min-height: 56px; padding: 0.95rem 2rem; font-size: 1.0625rem; }
.s-navy .btn--outline { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.7); }
.s-navy .btn--outline:hover { background: #fff; color: var(--navy); }
.s-navy .btn--outline:active { background: var(--colour-off-white); color: var(--navy); }

/* The quieter secondary action: a text link, never a second filled button. */
.link-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 48px;
  font-weight: 600;
  font-size: 1rem;
  color: var(--navy);
  white-space: nowrap;
  text-decoration: none;
  box-shadow: inset 0 -2px 0 0 var(--gold);
  padding-bottom: 2px;
  transition: box-shadow var(--t-fast) var(--ease-out), transform 0.1s var(--ease-out);
}
.link-cta:hover { box-shadow: inset 0 -4px 0 0 var(--gold); }
.link-cta:active { box-shadow: inset 0 -4px 0 0 var(--gold); transform: translateY(1px); }
.s-navy .link-cta { color: #fff; }

/* --------------------------------------------------------------- header -- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}
.site-header.is-stuck { box-shadow: 0 1px 0 rgba(14,49,107,0.08), 0 6px 18px -12px rgba(14,49,107,0.35); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: var(--header-h);
  flex-wrap: nowrap;
}
.nav__brand {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 0 1 auto;
  text-decoration: none;
}
/* The customer's globe logo (globe beside a three-line wordmark), 528x192 source,
   ratio 2.75. ~176px wide at 64px tall, so the desktop nav keeps its room.
   Fits inside the 80px header: 64px + 8px above and below. */
.nav__logo { height: 64px; width: auto; }
@media (max-width: 700px) { .nav__logo { height: 48px; } }

.nav__links {
  display: none;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.85rem);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
}
.nav__links li { margin: 0; }
.nav__link {
  display: inline-block;
  white-space: nowrap;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
/* The current-page rule sits BEFORE the state rules deliberately. It is the same
   specificity (0,2,0), so whichever is written last wins - and with it last, the
   one nav link the reader is standing on was the one link that did not respond
   to hover or press. State goes after identity. */
.nav__link[aria-current="page"] { color: var(--navy); font-weight: 600; border-bottom-color: var(--gold); }
.nav__link:hover { color: var(--navy); border-bottom-color: var(--gold); }
.nav__link:active { color: var(--colour-primary-active); border-bottom-color: var(--colour-accent-hover); }
/* The current link already carries navy + gold at rest, so the plain hover above
   would land on it invisibly. It answers in the deeper gold instead. */
.nav__link[aria-current="page"]:hover,
.nav__link[aria-current="page"]:active { border-bottom-color: var(--colour-accent-hover); }

/* "Our Progress" opens a small menu on hover (her ask, chg-752b9646). It also
   opens on keyboard focus, so the link inside is reachable without a mouse. The
   panel starts flush under the link: a gap would drop the hover on the way down. */
.nav__item--sub { position: relative; }
.nav__item--sub > .nav__link::after {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-left: 0.45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.22em) rotate(45deg);
}
.nav__sub {
  position: absolute;
  top: 100%;
  left: -1.1rem;
  z-index: 110;
  min-width: 13rem;
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-top: 2px solid var(--gold);
  box-shadow: 0 14px 28px -16px rgba(14,49,107,0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), visibility 0s linear var(--t-fast);
}
.nav__item--sub:hover > .nav__sub,
.nav__item--sub:focus-within > .nav__sub {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.nav__sub a {
  display: block;
  padding: 0.7rem 1.1rem;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.nav__sub a:hover { color: var(--navy); background: var(--colour-surface); }
.nav__sub a:active { color: var(--colour-primary-active); background: var(--colour-surface-alt); }

.nav__cta { display: none; flex: 0 0 auto; }
.nav__cta .btn { min-height: 44px; padding: 0.55rem 1.25rem; font-size: 1.0625rem; }

.nav__toggle {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0;
  background: transparent;
  /* A control's own boundary, so it is held to 3:1 rather than to the
     decorative hairline (1.88:1). On paper --control-edge measures 5.36:1. */
  border: 1px solid var(--control-edge);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.nav__toggle:hover { background: var(--colour-surface); border-color: var(--navy); }
.nav__toggle:active { background: var(--colour-surface-alt); border-color: var(--navy); }
.nav__toggle .icon-bar { display: block; width: 22px; height: 2px; background: var(--navy); transition: transform var(--t-med) var(--ease-out), opacity var(--t-med) var(--ease-out); }
.nav__toggle[aria-expanded="true"] .icon-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .icon-bar:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .icon-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__drawer {
  display: none;
  border-top: 1px solid var(--hairline);
  background: var(--paper);
}
.nav__drawer.is-open { display: block; }
.nav__drawer ul { list-style: none; margin: 0; padding: 0.5rem 0 1.25rem; }
.nav__drawer li { margin: 0; }
/* Scoped to the list, never to every anchor in the drawer: the Donate button is a
   sibling of the <ul>, and an unscoped `.nav__drawer a` (0,1,1) outranks `.btn--navy`
   (0,1,0), repainting the button's label warm-ink on navy at 1.17:1. Keep it on `li a`
   so the button cannot be captured at all. */
.nav__drawer li a {
  display: block;
  padding: 0.9rem 0;
  font-size: 1.1875rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
/* Still scoped to `li a` for the reason above: the Donate button is a sibling of
   the <ul>, and a bare `.nav__drawer a:hover` would outrank `.btn--navy`.
   The gesture is the row rule turning gold - the same language .nav__link uses
   on the desktop bar - rather than a new one. */
.nav__drawer li a[aria-current="page"] { color: var(--navy); font-weight: 600; }
.nav__drawer li a:hover { color: var(--navy); border-bottom-color: var(--gold); }
.nav__drawer li a:active { color: var(--colour-primary-active); border-bottom-color: var(--colour-accent-hover); }
/* The phone menu has no hover, so the item under "Our Progress" is a row of its
   own, set in from the edge and a step smaller so it reads as belonging to it. */
.nav__drawer li a.nav__drawer-sub { padding-left: 1.25rem; font-size: 1.0625rem; }
.nav__drawer .btn { width: 100%; margin-top: 1.25rem; }

@media (min-width: 1080px) {
  .nav__links { display: flex; }
  .nav .nav__cta { display: block; }
  .nav .nav__toggle { display: none; }
  .nav .nav__drawer { display: none; }
}

/* ----------------------------------------------------------------- hero -- */

.hero { padding-top: clamp(2rem, 4vw, 3.25rem); padding-bottom: clamp(2.25rem, 4vw, 3.5rem); }

.hero__copy { min-width: 0; }
.hero__media { min-width: 0; margin-top: clamp(1.75rem, 4vw, 3rem); }

.hero__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 70vh;
  object-fit: cover;
  object-position: 50% 50%;
}
.hero h1 { margin-bottom: 0.45em; }
.hero__lede { font-size: var(--fs-lead); line-height: 1.5; max-width: 40ch; margin-bottom: 1.75rem; }
/* Her name for the organisation, made to stand out in the hero paragraph at her request (chg-73563328). */
.name-mark { color: var(--navy); font-weight: 700; font-size: 1.12em; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }

/* ------------------------------ hero, photo whole and headline beside -- */
/* Since chg-44569eed (2026-09-27), at the customer's request: the photo is
   un-blurred again so every child's face shows, and the headline moved off
   the photo into a solid navy panel on the right, directly below it, in a
   heavier sans (Inter 700) with the second line in gold. Nothing sits on the
   photo, so no face is ever covered at any width. The photo shows at its own
   2096:896 shape, only trimmed top and bottom where the screen is short so
   the headline stays in the first screen. */
.hero--split { padding-top: 0; padding-bottom: 0; overflow: hidden; }
.hero--split .hero__media { margin-top: 0; }
.hero--split .hero__media img {
  display: block;
  width: 100%;
  aspect-ratio: auto;
  height: min(calc(100vw * 896 / 2096), max(420px, calc(100svh - 80px - 13rem)));
  max-height: none;
  object-fit: cover;
  object-position: 50% 35%;
}

.hero__split { display: grid; grid-template-columns: 1fr; }
.hero__panel {
  background: var(--navy);
  color: #fff;
  padding: clamp(1.75rem, 4vw, 3rem) 0;
  position: relative;
  isolation: isolate;
}
/* the navy runs to both screen edges on phones, to the right edge only on wide screens */
.hero__panel::before { content: ""; position: absolute; inset: 0 -100vmax; background: var(--navy); z-index: -1; }
.hero__panel h1 {
  font-family: var(--body);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.4rem + 2.9vw, 3.75rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0;
}
.hero__line { display: block; }
.hero__line--gold { color: var(--gold); }

.hero__below { padding-top: clamp(1.75rem, 4vw, 3rem); padding-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.hero__below .rule-gold { margin-top: 0; }

@media (min-width: 880px) {
  .hero__split { grid-template-columns: 5fr 7fr; column-gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
  .hero__panel {
    grid-column: 2; grid-row: 1;
    padding: clamp(2rem, 3.5vw, 3rem) 0 clamp(2rem, 3.5vw, 3rem) clamp(2rem, 3.5vw, 3rem);
  }
  .hero__panel::before { inset: 0 -100vmax 0 0; }
  .hero__panel h1 { font-size: clamp(2rem, 0.6rem + 2.9vw, 3.125rem); }
  .hero__below { grid-column: 1; grid-row: 1; padding-right: 0; }
}

@media (max-width: 700px) {
  /* 9:5 keeps every child the photo detector finds in frame (the floral-top girl on the right was
     cut at a fixed 340px); 67% centres the crop between the left boy and her. */
  .hero--split .hero__media img { height: auto; aspect-ratio: 9 / 5; object-position: 67% 30%; }
}

/* --------------------------------------------- the band (signature move) -- */
/* Four community panels meeting at 0px. No card, border, radius, shadow or gap.
   Labels are navy captions BELOW the strip - gold clears 4.5:1 on no panel.   */

.band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  line-height: 0;
}
.band__panel {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.band__caps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 4px solid var(--gold);
}
.band__caps li { margin: 0; padding: 1.1rem var(--gutter) 1.25rem; }
.band__cap-name {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);
  color: var(--navy);
  letter-spacing: -0.015em;
  /* A <span> gets none of the heading balance, and at 390 the band drops to two
     narrow columns where a three-word name strands its last word. Measured on
     "Quilombola and Palenque": 125/72px unbalanced vs 92/105px balanced. */
  text-wrap: balance;
}
.band__cap-where {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 0.3rem;
  text-wrap: balance;   /* "EUROPE AND / LATIN AMERICA", not a stranded AMERICA */
}

/* Each panel and each caption can link out to the community's own section on
   who-is-affected-and-where.html - kept as separate links either side of the
   gold rule, rather than reworking the band into a single card component. */
.band__link { display: block; line-height: 0; }
.band__cap-link { display: block; color: inherit; text-decoration: none; }
.band__cap-link:hover .band__cap-name,
.band__cap-link:focus-visible .band__cap-name { text-decoration: underline; text-underline-offset: 0.2em; }
.band__cap-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (max-width: 760px) {
  .band { grid-template-columns: 1fr; }
  .band__caps { grid-template-columns: repeat(2, 1fr); }
  .band__caps li { padding-inline: var(--gutter); }
  .band__caps li:nth-child(odd) { padding-left: var(--gutter); }
}

/* -------------------------------------------------------------- credits -- */
/* Standing: the credibility row that sits immediately below the hero.        */

.standing { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.standing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0;
}
.standing__item {
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 2vw, 1.75rem);
  border-top: 1px solid var(--hairline);
}
.standing__item:first-child { border-top: 0; }
.standing__key {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  color: var(--navy);
  letter-spacing: -0.02em;
  margin-bottom: 0.45rem;
}
.standing__say { font-size: 0.9375rem; line-height: 1.55; color: var(--ink-muted); margin: 0; }

@media (min-width: 760px) {
  .standing__item { border-top: 0; border-left: 1px solid var(--hairline); }
  .standing__item:first-child { border-left: 0; padding-left: 0; }
}

/* ---------------------------------------------------------------- bands -- */
/* Generic two-column editorial band. Always top-aligned.                     */

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
}
@media (min-width: 880px) {
  .split { grid-template-columns: 7fr 5fr; }
  .split--even { grid-template-columns: 1fr 1fr; }
  .split--media-first { grid-template-columns: 5fr 7fr; }
  .split--wide-aside { grid-template-columns: 6fr 6fr; }
}
.split > * { min-width: 0; }

.figure { margin: 0; }
.figure img { width: 100%; object-fit: cover; }
.figure figcaption {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-muted);
  padding-top: 0.75rem;
  border-top: 1px solid var(--hairline);
  margin-top: 0.85rem;
}
.figure--frame { background: var(--colour-surface-alt); padding: 0.75rem; }
.figure--frame img { border: 1px solid var(--hairline); }

.ratio-45 img { aspect-ratio: 4 / 5; }
.ratio-169 img { aspect-ratio: 16 / 9; }
.ratio-43 img { aspect-ratio: 4 / 3; }

/* A YouTube embed under a split (homepage "Our story"). The iframe fills a 16:9 frame. */
.video-embed { margin-top: clamp(2rem, 4vw, 3rem); }
.video-embed__frame { position: relative; aspect-ratio: 16 / 9; background: var(--colour-surface-alt); }
.video-embed__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Since chg-44569eed the video sits in the split's media column, in place of
   the founder photo, rather than full width under it. */
.video-embed--thumb { margin-top: 0; }
.story__intro { font-family: var(--display); font-size: var(--h4); line-height: 1.35; color: var(--navy); letter-spacing: -0.01em; }

/* ------------------------------------ our-work.html: the six-goal band --- */
/* chg-44569eed, reworked chg-e05542fa: six links under the intro, each jumping to its goal's own
   section further down; the section it lands on gets a gold edge (:target). */
/* Our Goals: six photos meeting at 0px, the goal's name under each, the whole
   tile one link to that goal's section below. Modelled on the communities band
   (.band) on who-is-affected-and-where.html, but each caption travels with its
   own photo, so the pairs stay together when six wrap to three or two a row. */
.goal-band__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
.goal-band__list li { margin: 0; }
.goal-band__item { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.goal-band__img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.goal-band__name { flex: 1; display: block; border-top: 4px solid var(--gold); padding: 1.1rem var(--gutter) 1.25rem; font-family: var(--display); font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem); line-height: 1.3; color: var(--navy); letter-spacing: -0.015em; text-wrap: balance; }
.goal-band__item:hover .goal-band__name,
.goal-band__item:focus-visible .goal-band__name { text-decoration: underline; text-underline-offset: 0.2em; }
.goal-band__item:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
@media (min-width: 640px) { .goal-band__list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .goal-band__list { grid-template-columns: repeat(6, 1fr); } .goal-band__name { padding-inline: 1.1rem; } }
.anchor:target { box-shadow: inset 6px 0 0 var(--gold); }
/* Our Approach: the four pillars as a photo strip, like the goals strip, each tile a link to its section. */
.approach-band__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
.approach-band__list li { margin: 0; }
.approach-band__item { display: flex; flex-direction: row; height: 100%; color: inherit; text-decoration: none; background: var(--paper); }
.approach-band__img { display: block; flex: 0 0 40%; width: 40%; height: auto; align-self: flex-start; aspect-ratio: 1 / 1; object-fit: cover; }
.approach-band__text { flex: 1; display: block; border-top: 4px solid var(--gold); padding: 1rem var(--gutter) 1.25rem; }
.approach-band__title { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem); line-height: 1.3; color: var(--navy); letter-spacing: -0.015em; text-wrap: balance; }
.approach-band__desc { display: block; margin-top: 0.5rem; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-muted); }
.approach-band__item:hover .approach-band__title,
.approach-band__item:focus-visible .approach-band__title { text-decoration: underline; text-underline-offset: 0.2em; }
.approach-band__item:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
@media (max-width: 639px) { .approach-band__list { gap: 0.75rem; } .approach-band__text { border-top: 0; border-left: 4px solid var(--gold); padding-block: 0.5rem 0.75rem; } }
@media (min-width: 640px) { .approach-band__list { grid-template-columns: repeat(2, 1fr); } .approach-band__item { flex-direction: column; } .approach-band__img { width: 100%; flex: none; } }
@media (min-width: 1100px) { .approach-band__list { grid-template-columns: repeat(4, 1fr); } .approach-band__text { padding-inline: 1.25rem; } }

/* ----------------------------------------------------------- what we do -- */

.doing {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--hairline);
}
.doing__item {
  padding: clamp(1.5rem, 3vw, 2rem) 0;
  border-bottom: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0 1rem;
  align-items: start;
}
.doing__num {
  font-family: var(--display);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
  padding-top: 0.35rem;
}
.doing__title { font-family: var(--display); font-size: var(--h3); color: var(--navy); margin: 0 0 0.35rem; letter-spacing: -0.018em; }
.doing__say { margin: 0; color: var(--ink-muted); max-width: 58ch; }
@media (min-width: 880px) {
  .doing { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 4vw, 3.5rem); }
  .doing__item { border-bottom: 1px solid var(--hairline); }
}

/* ------------------------------------------------------------- figures --- */

.figs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.figs__item { padding: clamp(1.5rem, 3vw, 2.25rem) 0; border-top: 1px solid var(--hairline); }
.figs__num {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(3rem, 2rem + 4.2vw, 5.5rem);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.045em;
  line-height: 0.92;
  color: var(--navy);
}
.figs__say { margin: 0.6rem 0 0; color: var(--ink-muted); max-width: 40ch; }
.s-navy .figs__num { color: var(--gold); }
.s-navy .figs__say { color: #dfe4ec; }
@media (min-width: 720px) {
  .figs { grid-template-columns: repeat(3, 1fr); column-gap: clamp(1.5rem, 3vw, 3rem); }
}

/* ---------------------------------------------------------- achievements -- */
/* The Progress page: the numerals are the material. */

.ach { border-top: 1px solid var(--hairline-strong); }
.ach__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem 2rem;
  padding: clamp(1.75rem, 3.5vw, 2.75rem) 0;
  border-bottom: 1px solid var(--hairline);
}
.ach__fig {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(3.25rem, 2rem + 5.5vw, 6rem);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.05em;
  line-height: 0.88;
  color: var(--navy);
}
.ach__unit { display: block; font-family: var(--body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-muted); margin-top: 0.75rem; }
.ach__title { font-family: var(--display); font-size: var(--h3); color: var(--navy); margin: 0 0 0.5rem; letter-spacing: -0.018em; }
.ach__body { margin: 0; max-width: 62ch; }
@media (min-width: 820px) {
  .ach__item { grid-template-columns: minmax(200px, 300px) 1fr; align-items: start; }
}
/* The ladder: a named human end and an instrument end, joined by a gold rule. */
.ladder__item { padding: clamp(1.5rem, 3vw, 2.25rem) 0; border-bottom: 1px solid var(--hairline); }
.ladder__line {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  align-items: center;
}
.ladder__end { font-family: var(--display); font-size: var(--h4); color: var(--navy); }
.ladder__rule { height: 3px; background: var(--gold); min-width: 40px; }
.ladder__say { margin: 0.85rem 0 0; color: var(--ink-muted); max-width: 66ch; }
@media (min-width: 720px) {
  .ladder__line { grid-template-columns: auto 1fr auto; gap: 1.25rem; }
}

/* Laws table (our-work.html, Undo discriminatory laws): three reforms side by side, one column
   each. At 900px+ the columns share row tracks through subgrid, so photo, place, partners,
   outcome and story line up across like a table; below that each column stacks as a card. */
.laws-table {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.laws-table__col {
  display: grid;
  grid-template-rows: auto auto auto auto 1fr;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-top: 4px solid var(--gold);
}
.laws-table__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.laws-table__place { margin: 0; padding: 1.1rem 1.25rem 0.9rem; font-size: var(--h4); color: var(--navy); }
.laws-table__field { padding: 0.8rem 1.25rem; border-top: 1px solid var(--hairline); }
.laws-table__label {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.25rem;
}
.laws-table__value { display: block; font-weight: 600; color: var(--ink); }
.laws-table__say { margin: 0; padding: 1rem 1.25rem 1.35rem; border-top: 1px solid var(--hairline); color: var(--ink-muted); }
@media (min-width: 900px) {
  .laws-table { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(5, auto); gap: 0 1.25rem; }
  .laws-table__col { grid-row: span 5; grid-template-rows: subgrid; }
}

/* --------------------------------------------------------------- people -- */

.people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Each card is its own query container, so the monogram below can size its glyph
   against the TILE rather than the viewport. Keyed off the viewport, the letters
   came out smallest exactly where the tile was largest (48px in a 358px tile on a
   phone, 2.8% of the plate). */
.people li { margin: 0; container-type: inline-size; }
.people--3 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
/* Who We Are (about.html): the team in brief - portrait, name and role - with the full
   profiles on team.html. Added chg-a4149a20. */
.team-group__title { font-family: var(--body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(1.25rem, 2.5vw, 1.75rem); padding-top: 1rem; border-top: 1px solid var(--hairline); }
.people--compact { grid-template-columns: repeat(auto-fill, minmax(min(150px, 40%), 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
.people--compact .person__role { margin-bottom: 0; }
@media (min-width: 1000px) { .people--compact { grid-template-columns: repeat(5, 1fr); } }

.person__shot { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 18%; background: var(--colour-surface-alt); border: 1px solid var(--hairline); }
/* A missing portrait is a typographic monogram in navy ink, set top-left like a
   printed specimen - never a stock avatar, and never an image. It is kept light
   rather than a navy fill: three of five board cards would otherwise put large
   dark plates on a site whose whole palette decision was to shrink dark fields. */
.person__initials {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--colour-surface-alt);
  color: var(--navy);
  border: 1px solid var(--hairline-strong);
  border-top: 4px solid var(--gold);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0.85rem 1.1rem;
  font-family: var(--display);
  /* Sized off the card (cqw), never the viewport: one specimen initial holds the
     same share of its plate at every tile size. Falls back to the old viewport
     clamp only where container queries are unsupported. */
  font-size: clamp(3rem, 9vw, 7rem);
  font-size: clamp(2.5rem, 34cqw, 7.5rem);
  line-height: 0.92;
  letter-spacing: -0.01em;
}
.s-surface .person__initials { background: var(--paper); }
.person__name { font-family: var(--display); font-size: 1.1875rem; color: var(--navy); margin: 0.9rem 0 0.15rem; letter-spacing: -0.015em; }
.person__role { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-muted); margin: 0 0 0.65rem; }
.person__bio { font-size: 0.9375rem; line-height: 1.6; margin: 0; color: var(--ink); }
.person__note { font-size: 0.8125rem; color: var(--ink-muted); margin: 0.5rem 0 0; }

/* Rights Experts: native 300x360. Painted at 150px MAXIMUM. Never upscaled. */
.experts {
  display: grid;
  grid-template-columns: repeat(2, 150px);
  justify-content: start;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.experts li { margin: 0; width: 150px; }
/* 7 experts: an auto-fill row of 6 leaves a lone 7th. Four across gives 4 + 3. */
@media (min-width: 520px) { .experts { grid-template-columns: repeat(3, 150px); } }
@media (min-width: 760px) { .experts { grid-template-columns: repeat(4, 150px); } }
.expert__shot { width: 150px; height: 180px; object-fit: cover; background: var(--colour-surface-alt); border: 1px solid var(--hairline); }
.expert__name { font-family: var(--display); font-size: 1rem; color: var(--navy); margin: 0.7rem 0 0; letter-spacing: -0.01em; }
.expert__where { font-size: 0.8125rem; color: var(--ink-muted); margin: 0.15rem 0 0; }

/* ---------------------------------------------------------------- quote -- */

.quote { margin: 0; padding-left: clamp(1rem, 2vw, 1.75rem); border-left: 4px solid var(--gold); max-width: 40ch; }
/* A pull-quote is display-set and short, so it takes `balance` (even lines)
   rather than `pretty` (last-line repair) - the brief asks for no widows here
   at either breakpoint, and balance is the one that reshapes every line. */
.quote p { font-family: var(--display); font-size: clamp(1.1875rem, 1.05rem + 0.8vw, 1.75rem); line-height: 1.35; color: var(--navy); letter-spacing: -0.018em; margin: 0; text-wrap: balance; }
.quote footer { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-muted); margin-top: 1rem; }
.s-navy .quote p { color: #fff; }
.s-navy .quote footer { color: var(--gold); }

/* ---------------------------------------------------------------- cards -- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.cards li { margin: 0; }
.card__title { font-family: var(--display); font-size: var(--h3); color: var(--navy); margin: 0 0 0.5rem; letter-spacing: -0.018em; }
.card__body { margin: 0; color: var(--ink); }

.stack > * + * { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

/* The deliberate editorial step-down: an aside nudged DOWN to meet the first
   line of ink in the card beside it, rather than the copy being pushed down. */
.aside-nudge { margin-top: 0; }
@media (min-width: 880px) { .aside-nudge { margin-top: clamp(1.25rem, 2.2vw, 1.75rem); } }

/* --------------------------------------------------------------- donate -- */

.give {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid var(--hairline-strong);
  background: var(--paper);
}
.give__head { padding: clamp(1.5rem, 3vw, 2.25rem); border-bottom: 1px solid var(--hairline); }
.give__body { padding: clamp(1.5rem, 3vw, 2.25rem); }

.toggle { display: inline-flex; border: 1px solid var(--navy); border-radius: 2px; overflow: hidden; }
.toggle button {
  appearance: none;
  min-height: 48px;
  padding: 0.6rem 1.5rem;
  border: 0;
  background: transparent;
  font-family: var(--body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.toggle button.is-active { background: var(--navy); color: #fff; }
/* :not(.is-active) keeps the resting-tab hover off the selected tab, and keeps
   this rule from ever competing with .is-active for `color`. Measured: navy on
   surface-alt 10.19:1, white on primary-hover 15.03:1. */
.toggle button:hover:not(.is-active) { background: var(--colour-surface-alt); color: var(--navy); }
.toggle button.is-active:hover { background: var(--colour-primary-hover); color: #fff; }
.toggle button:active { transform: translateY(1px); }

.amounts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}
.amounts li { margin: 0; }
@media (min-width: 560px) { .amounts { grid-template-columns: repeat(4, 1fr); } }
.amounts--ladder { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) { .amounts--ladder { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 980px) { .amounts--ladder { grid-template-columns: repeat(7, 1fr); } }
.amount {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: 0.75rem 1rem;
  background: var(--paper);
  color: var(--navy);
  /* A control boundary, so --control-edge (5.36:1) rather than the decorative
     --hairline-strong (1.88:1). These rungs ARE the donate affordance; a
     visitor who cannot see the box cannot see the choice. */
  box-shadow: inset 0 0 0 1.5px var(--control-edge);
  font-family: var(--display);
  font-size: 1.1875rem;
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 400;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), transform 0.1s var(--ease-out);
}
/* navy on accent-subtle 10.99:1, navy on surface-alt 10.19:1 */
.amount:hover { box-shadow: inset 0 0 0 2px var(--navy); background: var(--colour-accent-subtle); }
.amount:active { box-shadow: inset 0 0 0 2px var(--navy); background: var(--colour-surface-alt); transform: translateY(1px); }

.dedicate { display: flex; align-items: flex-start; gap: 0.7rem; margin-top: 1.5rem; font-size: 0.9375rem; color: var(--ink-muted); }
.dedicate input { margin-top: 0.3rem; width: 18px; height: 18px; accent-color: var(--navy); }

.tiers { display: grid; grid-template-columns: 1fr; gap: clamp(1.25rem, 2.5vw, 1.75rem); list-style: none; margin: 0; padding: 0; }
.tiers li { margin: 0; }
@media (min-width: 900px) { .tiers { grid-template-columns: repeat(2, 1fr); } }

.tier {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--paper);
  border: 1px solid var(--hairline-strong);
  border-top: 4px solid var(--gold);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.tier__label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy); margin: 0 0 0.75rem; }
.tier__title { font-family: var(--display); font-size: var(--h3); color: var(--navy); margin: 0 0 0.6rem; letter-spacing: -0.018em; }
.tier__say { margin: 0 0 1.5rem; font-size: 0.9375rem; color: var(--ink-muted); }
.tier__context { display: flex; flex-wrap: wrap; gap: 0 2rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.tier__context li { margin: 0 0 0.5rem; }
.tier__ctx-label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }
.tier__ctx-value { display: block; font-family: var(--display); font-size: 1.25rem; font-variant-numeric: tabular-nums lining-nums; color: var(--navy); margin-top: 0.15rem; }
.tier__ctx-note { display: block; font-size: 0.8125rem; color: var(--ink-muted); }
.tier__gift { margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--hairline); }
.tier__gift-label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }
.tier__gift-value { display: block; font-family: var(--display); font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.03em; color: var(--navy); margin: 0.25rem 0 0.15rem; }
.tier__gift-freq { display: block; font-size: 0.9375rem; color: var(--ink-muted); margin-bottom: 1.25rem; }
.tier .btn { display: flex; align-self: stretch; width: 100%; }

.illustrative { font-size: 0.8125rem; color: var(--ink-muted); margin: 1rem 0 0; }

/* --------------------------------------------------------------- footer -- */

.site-footer { background: var(--navy); color: var(--colour-on-dark); padding-top: clamp(3rem, 5vw, 4.5rem); padding-bottom: 2rem; }
.site-footer a { color: #fff; }
.site-footer h2, .site-footer h3 { color: #fff; }

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }

.footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.footer__logo { height: 84px; width: auto; }
.footer__col-title { font-family: var(--body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin: 0 0 1.1rem; }
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin: 0 0 0.7rem; }
.footer__list a { font-size: 0.9375rem; text-decoration: none; transition: text-decoration-color var(--t-fast) var(--ease-out); }
.footer__list a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.footer__list a:active { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 3px; text-underline-offset: 0.18em; }

.footer__addr { font-style: normal; font-size: 0.9375rem; line-height: 1.6; color: #d7dce5; }
.footer__addr strong { display: block; color: var(--gold); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.3rem; }
.footer__addr + .footer__addr { margin-top: 1.25rem; }

.footer__social { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1.5rem; padding: 0; list-style: none; }
.footer__social li { margin: 0; }
.footer__social a { font-size: 0.875rem; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.35); transition: border-color var(--t-fast) var(--ease-out); }
.footer__social a:hover { border-bottom-color: var(--gold); }
/* colour only, never width: a border-width change on an inline element reflows
   the row, which is layout animation for no gain. */
.footer__social a:active { border-bottom-color: var(--colour-accent-hover); }

.footer__legal { margin-top: clamp(2.5rem, 4vw, 3.5rem); padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,0.22); }
.footer__ein { font-size: 0.875rem; line-height: 1.6; color: #d7dce5; max-width: 70ch; margin: 0 0 1.25rem; }
.footer__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 0.8125rem; color: #c6ccd8; margin: 0; }
.footer__meta a { color: #fff; }

/* ----------------------------------------------------------------- FAQ --- */
/* Styles for the generated zero-JS accordion (build-found-ready.mjs).         */

/* The FAQ band is one column: heading, then the accordion under it. It used to be a
   .split, which stranded a two-word heading beside a 970px accordion and left ~840px
   of empty paper in the left column. .se-faq keeps its own 76ch measure, so going
   full width costs nothing in line length. */
.faq-band > .se-faq { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
/* One visible heading governs this band: the section's own "Asked and answered.".
   The generated title stays in the DOM because the accordion's aria-labelledby
   points at it - removing it would leave the section with no accessible name - but
   it must not paint a second, duller heading directly under the first. Scoped to
   #faq so a FAQ hosted anywhere without a surrounding heading keeps its own. */
#faq .se-faq__title {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.se-faq { border-top: 1px solid var(--hairline-strong); max-width: 76ch; }
.se-faq__item { border-bottom: 1px solid var(--hairline); }
.se-faq__q {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 0;
  font-family: var(--display);
  font-size: var(--h4);
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.012em;
  line-height: 1.3;
  transition: color var(--t-fast) var(--ease-out);
}
/* A <summary> is a control and had no hover at all - the only cue that the row
   opens was the + sign. primary-hover is darker than navy, so this moves AWAY
   from the floor (11.85:1 -> 14.2:1) and cannot regress contrast. */
.se-faq__q:hover, .se-faq__q:hover::after { color: var(--colour-primary-hover); }
.se-faq__q:active, .se-faq__q:active::after { color: var(--colour-primary-active); }
.se-faq__q::-webkit-details-marker { display: none; }
/* navy, not gold: this marker sits on a light ground, where gold measures 1.58:1 */
.se-faq__q::after { content: "+"; font-family: var(--body); font-weight: 400; font-size: 1.5rem; line-height: 1; color: var(--navy); flex: 0 0 auto; }
.se-faq__item[open] .se-faq__q::after { content: "\2013"; }
.se-faq__a { padding: 0 0 1.5rem; margin: 0; max-width: 68ch; color: var(--ink); }
.se-faq__a p { margin: 0 0 0.9em; }

/* ------------------------------------------------------- contact form ----- */
/* Styles for the generated form (build-contact-form.mjs). Never hand-author
   the markup or the handler; author only how it looks.                        */

.cf-form { max-width: 34rem; }
.cf-field { margin-bottom: 1.25rem; }
.cf-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.45rem;
}
.cf-input, .cf-textarea, .cf-form select {
  width: 100%;
  min-height: 52px;
  padding: 0.8rem 0.95rem;
  background: var(--paper);
  /* The box edge is the only thing that says "type here", so it is held to the
     3:1 UI-component floor. --hairline-strong measured 1.88:1 on paper: a
     low-vision visitor could not find the field at all, and axe does not test
     component boundaries so nothing went red. */
  border: 1px solid var(--control-edge);
  border-radius: 2px;
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  transition: border-color var(--t-fast) var(--ease-out);
}
.cf-textarea { min-height: 150px; resize: vertical; }
.cf-input:hover, .cf-textarea:hover, .cf-form select:hover { border-color: var(--navy); }
.cf-input:focus, .cf-textarea:focus, .cf-form select:focus { outline: 3px solid var(--focus-ring); outline-offset: 1px; border-color: var(--navy); }
.cf-input::placeholder, .cf-textarea::placeholder { color: var(--ink-muted); }   /* 5.36:1, not the browser grey */
.cf-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0.8rem 2rem;
  border: 0;
  border-radius: 2px;
  background: var(--gold);
  color: var(--colour-on-accent);
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), transform 0.1s var(--ease-out);
}
.cf-submit:hover { background: var(--colour-accent-hover); color: var(--colour-on-accent); }
.cf-submit:active { background: var(--colour-accent-hover); color: var(--colour-on-accent); transform: translateY(1px); }

/* In flight. The handler is generated and must not be hand-edited, so the busy
   marker is set by script.js and cleared when the status line appears; the
   handler's own behaviour is untouched. Without it the visitor pressed Send and
   watched nothing happen for up to the full 8-second relay timeout.
   Colour, not opacity: `opacity: 0.6` on a gold fill drags navy-on-gold under
   the 4.5:1 floor, so the resting label would have failed exactly while the
   button was doing its job. ink on surface-alt measures 11.89:1. */
.cf-submit[aria-busy="true"],
.cf-submit[disabled] {
  background: var(--colour-surface-alt);
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--control-edge);
  transform: none;
}
.cf-submit[aria-busy="true"] { cursor: progress; }
.cf-submit[disabled] { cursor: default; }
.cf-status { margin-top: 1.1rem; font-size: 0.9375rem; line-height: 1.6; color: var(--ink); }
.cf-status a { color: var(--navy); }
.cf-form .cf-hp,
.cf-form [name="enquiry_ref"] { position: absolute !important; left: -9999px; }

/* ------------------------------------------------ theory of change flow -- */
/* Her chart (chg-4c23ab7b, "Theory of Change_TIP (2)_27 June"), hand-built in
   HTML/CSS rather than an image: the words stay text, and it reflows honestly
   on a phone. Under 1040px it is one column, stage by stage, with a down arrow
   between stages. From 1040px every box is placed on a 7-column grid (4 stages,
   3 arrow gutters) so each arrow runs where hers does. Row gaps are 0 on
   purpose: rows 3 and 5 are the spacers, and the bus in column 2 is drawn one
   cell at a time, so a gap would break the line. */

.toc {
  --toc-ink: var(--navy);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 40rem;
}
.toc__head {
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0.25rem 0;
  padding-top: 0.85rem;
  border-top: 4px solid var(--gold);
}
.toc__head--end { border-top-color: var(--navy); }
.toc__sub { display: block; margin-top: 0.3rem; font-weight: 600; letter-spacing: 0.08em; color: var(--ink-muted); }

.toc__box {
  margin: 0;
  padding: 1rem 1.15rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink);
  border-radius: 6px;
  display: flex;
  align-items: center;
}
.toc__box--actor { background: #fff; border: 1px solid var(--hairline); border-left: 4px solid var(--navy); }
.toc__box--first { background: var(--colour-accent-subtle); border-left: 4px solid var(--colour-accent-deep); }
.toc__box--second { background: #f4df8e; border-left: 4px solid #806b00; }
.toc__box--movement {
  background: linear-gradient(90deg, var(--colour-accent-subtle), #f4df8e);
  border-left: 4px solid var(--colour-accent-deep);
}
.toc__box--recognition {
  display: block;
  background: #fff;
  border: 3px solid var(--gold);
  color: var(--navy);
  font-weight: 600;
}
.toc__box--recognition strong { font-weight: 800; }
.toc__box--impact {
  --focus-ring: #fff;
  list-style: none;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0.55rem;
  background: var(--navy);
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 600;
  border-left: 4px solid var(--gold);
  padding: 1.25rem 1.3rem;
}
.toc__box--impact li { margin: 0; padding-left: 1.1rem; position: relative; }
.toc__box--impact li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 0.45rem; height: 0.45rem; background: var(--gold); border-radius: 50%;
}

/* arrows: a 2px navy shaft with a triangular head, drawn in CSS */
.toc__arrow { display: block; position: relative; background: var(--toc-ink); }
.toc__arrow--r { height: 2px; width: 100%; }
.toc__arrow--r::after {
  content: ""; position: absolute; right: -2px; top: 50%; transform: translateY(-50%);
  border-left: 10px solid var(--toc-ink); border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.toc__arrow--d, .toc__arrow--u, .toc__arrow--ud { width: 2px; height: 100%; margin: 0 auto; }
.toc__arrow--d::after, .toc__arrow--ud::after {
  content: ""; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%);
  border-top: 10px solid var(--toc-ink); border-left: 6px solid transparent; border-right: 6px solid transparent;
}
.toc__arrow--u::before, .toc__arrow--ud::before {
  content: ""; position: absolute; top: -2px; left: 50%; transform: translateX(-50%);
  border-bottom: 10px solid var(--toc-ink); border-left: 6px solid transparent; border-right: 6px solid transparent;
}

/* phone / tablet: a column, with only the connectors that read in a column.
   Recognition sits above the impact here, so its arrow points down. */
.toc__link--ud { display: block; height: 1.75rem; }
.toc__bus, .toc__link--r, .toc__link--ud.toc__v4 { display: none; }
.toc__step { display: block; height: 2.5rem; margin: 0.25rem 0; }
.toc__up .toc__arrow--u::before { display: none; }
.toc__up .toc__arrow--u::after {
  content: ""; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%);
  border-top: 10px solid var(--toc-ink); border-left: 6px solid transparent; border-right: 6px solid transparent;
}

@media (min-width: 1040px) {
  .toc {
    display: grid;
    max-width: none;
    grid-template-columns: minmax(0, 1fr) 2.75rem minmax(0, 1.15fr) 2.75rem minmax(0, 1.15fr) 2.75rem minmax(0, 1fr);
    grid-template-rows: auto auto 3.25rem auto 3.25rem auto;
    gap: 0;
  }
  .toc__head { margin: 0 0 1.25rem; align-self: start; }
  .toc__head--actors { grid-area: 1 / 1; }
  .toc__head--first  { grid-area: 1 / 3; }
  .toc__head--second { grid-area: 1 / 5; }
  .toc__head--end    { grid-area: 1 / 7; }

  .toc__a1 { grid-area: 2 / 1; }
  .toc__a2 { grid-area: 4 / 1; }
  .toc__a3 { grid-area: 6 / 1; }
  .toc__f1 { grid-area: 2 / 3; }
  .toc__f2 { grid-area: 4 / 3; }
  .toc__g  { grid-row: 6; grid-column: 3 / 6; }
  .toc__s1 { grid-area: 2 / 5; }
  .toc__s2 { grid-area: 4 / 5; }
  .toc__imp { grid-row: 2 / 5; grid-column: 7; }
  .toc__rec { grid-area: 6 / 7; }

  .toc__step { display: none; }
  .toc__link--ud, .toc__link--ud.toc__v4 { display: block; height: auto; padding: 0.5rem 0; }
  .toc__v1 { grid-area: 3 / 3; }
  .toc__v2 { grid-area: 5 / 3; }
  .toc__v3 { grid-area: 3 / 5; }
  .toc__v4 { grid-area: 5 / 5; }
  .toc__up { grid-area: 5 / 7; }
  .toc__up .toc__arrow--u::after { display: none; }
  .toc__up .toc__arrow--u::before { display: block; }

  .toc__link--r { display: flex; align-items: center; padding: 0 0.5rem 0 0.4rem; }
  .toc__h1 { grid-area: 2 / 4; }
  .toc__h2 { grid-area: 4 / 4; }
  .toc__h3 { grid-area: 2 / 6; }
  .toc__h4 { grid-area: 4 / 6; }
  .toc__h5 { grid-area: 6 / 6; }

  /* the bus: all three approaches feed every first level result */
  .toc__bus { display: flex; align-items: center; position: relative; grid-column: 2; padding: 0 0.5rem 0 0; }
  .toc__bus::before {
    content: ""; position: absolute; left: calc(50% - 1px); width: 2px; top: 0; bottom: 0; background: var(--toc-ink);
  }
  .toc__bus--r2 { grid-row: 2; }
  .toc__bus--r3 { grid-row: 3; }
  .toc__bus--r4 { grid-row: 4; }
  .toc__bus--r5 { grid-row: 5; }
  .toc__bus--r6 { grid-row: 6; }
  .toc__bus--r2::before { top: 50%; }
  .toc__bus--r6::before { bottom: 50%; }
}

/* --------------------------------------------- seven figures + one card -- */

.grid7 { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--hairline-strong); }
.grid7__item { padding: clamp(1.5rem, 3vw, 2.25rem) 0; border-bottom: 1px solid var(--hairline); }
.grid7__title { font-family: var(--display); font-size: var(--h4); color: var(--navy); margin: 0.75rem 0 0.4rem; letter-spacing: -0.012em; }
.grid7__say { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--ink-muted); }
/* chg-5f6eee64: the "Behind each figure" card lost its words at her request, so the grid is
   six figures and nothing else: 2 columns, then 3 (never 4, which leaves a hole of two). Its
   "See our goals" link sits under the grid. Add or remove a figure and recheck the rows. */

@media (min-width: 700px) {
  .grid7 { grid-template-columns: repeat(2, 1fr); column-gap: clamp(2rem, 4vw, 3.5rem); }
}
@media (min-width: 1040px) {
  .grid7 { grid-template-columns: repeat(3, 1fr); column-gap: clamp(2rem, 3.5vw, 3.5rem); }
}

/* --------------------------------------------------------- partner list -- */

/* Rows, not cards: one region has five partners and three have one each, so a
   card grid puts a tall column beside a near-empty peer. A document list does not. */
/* chg-5f6eee64: her partners sentence IS the section title now (the "Nobody does this
   alone." h2 was deleted at her request), in bold navy at a size a sentence can carry. */
.partners__lead { font-size: var(--h3); line-height: 1.3; font-weight: 700; letter-spacing: -0.012em; max-width: 44ch; text-wrap: pretty; }
.partners { border-top: 1px solid var(--hairline-strong); }
.partners__region { display: grid; grid-template-columns: 1fr; gap: 0.5rem 2rem; padding: clamp(1.25rem, 2.5vw, 1.75rem) 0; border-bottom: 1px solid var(--hairline); }
.partners__title { font-family: var(--body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin: 0; padding-top: 0.2rem; }
.partners__list { list-style: none; margin: 0; padding: 0; }
.partners__list li { margin: 0 0 0.6rem; font-size: 0.9375rem; line-height: 1.55; }
.partners__list li:last-child { margin-bottom: 0; }
@media (min-width: 760px) { .partners__region { grid-template-columns: minmax(170px, 230px) 1fr; } }

/* --------------------------------------------------------- contact block -- */

.contact-block { font-style: normal; line-height: 1.6; }
.contact-block__label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 0.3rem; }


/* Donate hero jump list: three ways to give, so the navy band's second column
   carries something instead of a void. */
.jump { list-style: none; margin: 2rem 0 0; padding: 0; border-top: 1px solid rgba(255,255,255,0.22); }
.jump li { margin: 0; padding: 0.9rem 0; border-bottom: 1px solid rgba(255,255,255,0.22); }
.jump a { display: inline-block; font-weight: 600; font-size: 1.0625rem; color: #fff; text-decoration: none; box-shadow: inset 0 -2px 0 0 var(--gold); transition: box-shadow var(--t-fast) var(--ease-out); }
.jump a:hover { box-shadow: inset 0 -4px 0 0 var(--gold); }
.jump a:active { box-shadow: inset 0 -6px 0 0 var(--gold); }
.jump span { display: block; font-size: 0.875rem; line-height: 1.5; color: #c9d2e2; margin-top: 0.3rem; }

/* ----------------------------------------------------------- utilities --- */

.flow > * + * { margin-top: 1.15em; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

.anchor { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
/* The Who We Are menu jumps here from every page; keep its heading clear of the sticky header. */
#how-we-work-with-community { scroll-margin-top: var(--header-h); }

/* Print-ish safety: nothing here relies on JS to be visible. */

/* Homepage About / Mission / Vision (chg-bb79de2d): the About page's three statements,
   mission and vision side by side under the About paragraph. */
.about-pair {
  display: grid;
  grid-template-columns: 1fr;
  /* Same gap and breakpoint as .split--even above it, so both rows share one pair of columns. */
  gap: clamp(1.5rem, 3.5vw, 3rem);
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
}
@media (min-width: 880px) { .about-pair { grid-template-columns: 1fr 1fr; } }
.about-pair__item .eyebrow { display: block; margin-bottom: 0.75rem; }
.about-pair__vision {
  font-family: var(--display);
  font-size: clamp(1.35rem, 1.05rem + 1.2vw, 1.85rem);
  line-height: 1.3;
  letter-spacing: -0.018em;
  color: var(--navy);
}

/* Donate page top (chg-bb79de2d), after the layout she pointed at: a centred two-tone
   headline on paper, then the photo running full width with the give card floating over
   its open left side, and a caption under it. On phones the photo is a band above the
   card (he stays visible) and the card overlaps its lower edge. */
.don-head { padding-bottom: clamp(2rem, 4vw, 3rem); }
/* Same face as the homepage headline (Inter 700, .hero__panel h1), at her
   request in chg-af15bb0f; it was Fraunces 700 before. */
.don-head__title {
  max-width: 24ch;
  margin: 0 auto;
  font-family: var(--body);
  font-weight: 700;
  font-size: clamp(2rem, 1.3rem + 3.2vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.don-head__l1 { color: var(--navy); }
/* #806b00 is a deep gold for text on paper: 4.92:1 on --paper (the brand gold is 1.55:1). */
.don-head__l2 { display: block; margin-top: 0.15em; color: #806b00; }

.don-hero { position: relative; background: var(--paper); }
.don-hero__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 66% 30%;
}
.don-hero__inner { position: relative; margin-top: -3.5rem; }
.give--card {
  display: block;
  max-width: 440px;
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: 0 24px 48px -24px rgba(14, 49, 107, 0.45);
  text-align: center;
}
.give__title { font-family: var(--body); font-size: 1.5rem; font-weight: 700; color: var(--ink); margin: 0 0 1.25rem; letter-spacing: -0.01em; }
.give--card .toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  padding: 4px;
  border: 0;
  border-radius: 999px;
  background: var(--colour-surface-alt);
}
.give--card .toggle button { border-radius: 999px; font-size: 1rem; }
.give__note { margin: 1rem 0 0; font-size: 0.9375rem; color: var(--ink); }
.give--card .amounts { grid-template-columns: repeat(2, 1fr); margin-top: 1rem; }
.give--card .amount { border-radius: 10px; font-family: var(--body); font-weight: 700; font-size: 1.0625rem; }
.give__custom { display: flex; width: 100%; min-height: 60px; margin-top: 1.25rem; border-radius: 999px; font-size: 1.125rem; font-weight: 700; }
/* The custom amount is one-time only, so script.js hides it under Monthly; display:flex above would otherwise override [hidden]. */
.give__custom[hidden] { display: none; }
.give__small { margin-top: 1rem; font-size: 0.875rem; line-height: 1.55; color: var(--ink-muted); }
.don-hero__cap {
  max-width: 72ch;
  margin: 0 auto;
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
  font-size: 0.9375rem;
  line-height: 1.6;
  text-align: center;
  color: var(--ink);
}

@media (min-width: 880px) {
  .don-hero__media { position: absolute; inset: 0 0 auto 0; height: var(--don-photo-h); }
  .don-hero { --don-photo-h: clamp(640px, 52vw, 860px); }
  .don-hero__media img { height: 100%; aspect-ratio: auto; object-position: 70% 35%; }
  .don-hero__inner {
    margin-top: 0;
    min-height: var(--don-photo-h);
    display: flex;
    align-items: center;
    padding-block: clamp(3rem, 5vw, 4.5rem);
  }
  .give--card { margin: 0; width: 420px; }
}

/* chg-09c0bbb3: the General support ladder now sits in the fourth tier card, under her photo.
   Two amounts per row in a card; "Other amount" takes the whole last row. */
.tier--general .amounts--ladder { grid-template-columns: repeat(2, 1fr); margin-top: 0.75rem; }
.tier--general .amounts--ladder li:last-child { grid-column: 1 / -1; }

/* chg-50bcf979: the Progress page opens like the donate page - her photo full width, the page's own
   heading in a white card over its open left side (a band above the card on phones). */
.hero-card {
  max-width: 440px;
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: 0 24px 48px -24px rgba(14, 49, 107, 0.45);
}
.hero-card h1 { margin-bottom: 0.75rem; font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.25rem); overflow-wrap: break-word; }
.hero-card .lead { max-width: none; }
.don-hero--progress { padding-bottom: clamp(2rem, 4vw, 3rem); }
.don-hero--progress .don-hero__media img { object-position: 64% 22%; }
@media (min-width: 880px) {
  .don-hero--progress { padding-bottom: 0; --don-photo-h: clamp(560px, 46vw, 780px); }
  .don-hero--progress .don-hero__media img { object-position: 64% 30%; }
  .hero-card { margin: 0; width: 420px; }
}

/* chg-82e6105c: the Rights Monitors' stories on Our Approach as three slides. The track is a
   plain horizontal scroll-snap row, so every slide can be swiped or scrolled to with JavaScript
   off; script.js only adds the arrows and dots. Each slide is her photo with the person's name
   set on it (under a navy scrim at the foot, clear of the face) and the blurb beside it. */
.stories { position: relative; }
.stories__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.stories__track::-webkit-scrollbar { display: none; }
.stories__track:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .stories__track { scroll-behavior: auto; } }

.story {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: center;
  padding-inline: 1px;
}
@media (min-width: 880px) { .story { grid-template-columns: 5fr 7fr; } }

.story__media {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--colour-surface-alt);
}
.story__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.story__name {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 4.5rem 1.25rem 1.1rem;
  background: linear-gradient(to top, rgba(0, 23, 67, 0.88) 0%, rgba(0, 23, 67, 0.6) 55%, rgba(0, 23, 67, 0) 100%);
  color: #fff;
  font-family: var(--display);
  font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.018em;
}
.story__where {
  display: block;
  font-family: var(--body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.4rem;
}
/* No portrait: the same typographic monogram the team page uses, never a stock avatar. */
.story__media--initials { border-top: 4px solid var(--gold); container-type: inline-size; }
.story__media--initials .story__name { background: var(--navy); padding-top: 1.1rem; }
.story__initials {
  display: block;
  padding: 0.85rem 1.1rem;
  font-family: var(--display);
  font-size: clamp(3rem, 9vw, 7rem);
  font-size: clamp(3rem, 34cqw, 9rem);
  line-height: 0.92;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.story__body { display: flex; flex-direction: column; gap: 1.5rem; max-width: 56ch; }
.story__body > p { margin: 0; }

.stories__controls { display: none; }
.js .stories__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
/* chg-48923565: her line telling visitors to use the arrows sits with the arrows, under the
   photo (her ask), on a row of its own directly above them. It is inside the controls, so it
   is hidden with them when script.js has not run and there are no arrows to click. */
.stories__hint { flex: 0 0 100%; margin: 0 0 -0.25rem; }
.stories__btn {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.stories__btn:hover { border-color: var(--navy); }
.stories__btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.stories__btn[disabled] { opacity: 0.4; cursor: default; }
.stories__dots { display: flex; gap: 0.25rem; }
.stories__dot {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
}
.stories__dot::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--hairline-strong);
}
.stories__dot[aria-current="true"]::before { background: var(--navy); width: 24px; }
.stories__dot:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Who We Are: the United Nations section's photo (her Geneva group photo with the High
   Commissioner, chg-8aa8c0bb). Shown at its own wide shape, never cropped (eighteen people
   edge to edge), and capped at the file's own 752px width. */
.un-photo { max-width: 752px; }
.un-photo img { aspect-ratio: 752 / 368; }
@media (min-width: 880px) { .un-photo { justify-self: end; width: 100%; } }

/* Home, "How we work with Community": her heading sits in the text column and her
   Haratine photo beside it (chg-68c0ac6e). Phones: text, then the photo. */
.community-split__title { max-width: 16ch; margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.community-split__photo img { display: block; height: auto; }
@media (min-width: 880px) {
  .community-split { align-items: center; }
}