/* ============================================================
   TAMEGUE GLOBAL INITIATIVE FOUNDATION
   Design tokens
   ============================================================ */
:root {
  /* ============================================================
     Brand palette — sampled straight off the logo artwork.
     Every colour below appears in the mark itself, so nothing on
     the page introduces a hue the logo does not already own.
     ============================================================ */
  --brand-blue: #0170E4;        /* the TAMEGUE wordmark */
  --brand-sky: #009EE8;         /* the blue arc of the emblem */
  --brand-green: #82B822;       /* the leaves */
  --brand-green-deep: #46A413;  /* the leaves in shadow */
  --brand-amber: #FCA00C;       /* the orange arc */
  --brand-orange: #F26226;      /* the GLOBAL lettering */
  --brand-red: #DD0011;         /* the INITIATIVE lettering */

  /* The emblem's own sweep, unrolled: blue arc → leaves → orange arc → red figure */
  --brand-grad: linear-gradient(95deg,
      var(--brand-blue) 0%,
      var(--brand-sky) 18%,
      var(--brand-green) 38%,
      var(--brand-amber) 60%,
      var(--brand-orange) 78%,
      var(--brand-red) 100%);

  /* The sweep lifted for dark surfaces — on navy, the wordmark blue and the
     INITIATIVE red fall under 3:1, so both ends step up a tint. */
  --brand-grad-bright: linear-gradient(95deg,
      #41A6FF 0%,
      var(--brand-sky) 18%,
      var(--brand-green) 38%,
      var(--brand-amber) 60%,
      var(--brand-orange) 80%,
      #FF4436 100%);

  /* Same sweep on the diagonal, for round and boxed surfaces */
  --brand-grad-diag: linear-gradient(135deg,
      var(--brand-blue) 0%,
      var(--brand-sky) 20%,
      var(--brand-green) 42%,
      var(--brand-amber) 62%,
      var(--brand-orange) 80%,
      var(--brand-red) 100%);

  /* Structure — the wordmark blue taken down to text weight, and
     FOUNDATION's grey used as-is */
  --ink: #06254A;
  --ink-soft: #3A5476;
  --grey: #717171;
  --rule: #DCE4F0;
  --paper: #FFFFFF;
  --mist: #F2F6FC;

  /* Initiative spectrum — 00 through 06, each one drawn from the mark above.
     Each has three tones: the logo colour fills shapes, `-mid` is the
     brightest tone that clears 3:1 on white (display type, indicators),
     `-ink` clears 4.5:1 (body-sized text, fine lines). The reds and blues
     are already dark enough that some tones coincide. */
  --i-health: var(--brand-red);
  --i-health-mid: #DD0011;
  --i-health-ink: #B50010;

  --i-climate: var(--brand-green);
  --i-climate-mid: #709E1C;
  --i-climate-ink: #5A8016;

  --i-zero: var(--brand-blue);
  --i-zero-mid: #0170E4;
  --i-zero-ink: #0356AE;

  --i-talent: var(--brand-orange);
  --i-talent-mid: #F26226;
  --i-talent-ink: #C44D1B;

  --i-food: var(--brand-green-deep);
  --i-food-mid: #46A413;
  --i-food-ink: #32810D;

  --i-cities: var(--brand-sky);
  --i-cities-mid: #0099E0;
  --i-cities-ink: #007BB5;

  --i-africa: var(--brand-amber);
  --i-africa-mid: #CC8008;
  --i-africa-ink: #A06505;

  /* Live accent — swapped by JS as initiatives cycle. `--accent` fills
     shapes, `--accent-mid` carries display type and indicators (3:1 on
     white), `--accent-ink` carries body-sized text and fine lines
     (4.5:1). Only the leaf green and amber differ much between the
     three; the reds and blues are already dark enough. */
  --accent: var(--brand-red);
  --accent-mid: var(--brand-red);
  --accent-ink: #B50010;

  /* Accent gradient — cycles with the initiative */
  --accent-grad: linear-gradient(135deg, var(--accent-ink), var(--ink));

  /* Type */
  --display: "Archivo", system-ui, sans-serif;
  --body: "Instrument Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  /* Rhythm */
  --gut: clamp(20px, 4vw, 64px);
  --sec: clamp(72px, 10vw, 100px);

  /* Height of the sticky nav — used for anchor scroll offsets */
  --nav-h: 88px;

  /* One easing curve for every deliberate movement on the site —
     fast out of the gate, long soft landing. */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth
}

body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}

/* ============================================================
   AMBIENT BACKDROP — one fixed layer of soft colour fields in
   the brand's sky, green and amber, drifting almost
   imperceptibly behind every page. Pure decoration: no pointer
   events, hidden behind any section that paints its own surface,
   and perfectly still for reduced-motion visitors. Oversized so
   the drift never exposes an edge; transform-only so it stays on
   the compositor and costs nothing while scrolling.
   ============================================================ */
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  inset: -12%;
  background:
    radial-gradient(ellipse 55% 40% at 14% 10%, color-mix(in srgb, var(--brand-sky) 9%, transparent), transparent 62%),
    radial-gradient(ellipse 45% 35% at 88% 28%, color-mix(in srgb, var(--brand-green) 7%, transparent), transparent 60%),
    radial-gradient(ellipse 55% 40% at 50% 96%, color-mix(in srgb, var(--brand-amber) 8%, transparent), transparent 60%);
  animation: backdropDrift 26s ease-in-out infinite alternate;
  /* Promoted so the browser composites the drift on the GPU instead of
     repainting a full-screen gradient on every frame. */
  will-change: transform;
}

@keyframes backdropDrift {
  from {
    transform: translate3d(-2.5%, 0, 0) scale(1);
  }

  to {
    transform: translate3d(2.5%, 1.5%, 0) scale(1.06);
  }
}

/* The Living Initiative Network — one canvas, drawn by
   assets/js/motion.js, sharing the backdrop layer with the
   pseudo-element above. Decoration only: no pointer events, no
   reading order, nothing when motion is reduced. */
.net-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* The banner's own surface. A negative z-index layer paints below
   block backgrounds, so on the navy banner the page canvas would be
   covered by the banner itself — this one sits inside it, above the
   navy and below the type. */
.net-canvas-hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.hero.is-dark .hero-grid,
.hero.is-dark .hero-glow {
  position: relative;
  z-index: 1;
}

/* Pausing the hero cycle holds the ambient weather with it —
   play-state (not animation removal) so everything resumes from
   exactly where it stood. */
:root.motion-held body::after,
:root.motion-held .hero-glow::before,
:root.motion-held .hero-glow::after,
:root.motion-held .hero::after {
  animation-play-state: paused;
}

@media (prefers-reduced-motion:reduce) {
  body::after {
    animation: none;
  }
}

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

a {
  color: inherit;
  text-decoration: none
}

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

.wrap {
  width: min(1280px, 100% - (var(--gut) * 2));
  margin-inline: auto;
}

/* Anchor targets clear the sticky header */
section[id],
[id="top"],
.init {
  scroll-margin-top: calc(var(--nav-h) + 16px)
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 13px 22px;
  border-radius: 0 0 12px 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.skip-link:focus {
  left: 0
}

/* Screen-reader-only utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Type roles ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--grey);
  font-weight: 500;
}

.display {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 112%;
  line-height: .94;
  letter-spacing: -.025em;
  text-transform: uppercase;
}

.h2 {
  font-size: clamp(34px, 5.6vw, 50px);
}

.h3 {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 108%;
  font-size: clamp(21px, 2.4vw, 29px);
  line-height: 1.1;
  letter-spacing: -.015em;
}

.lede {
  font-size: clamp(18px, 1.9vw, 23px);
  line-height: 1.5;
  color: var(--ink-soft)
}

.mono-num {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em
}

/* ============================================================
   Spectrum rail — the seven initiatives as a ribbon
   ============================================================ */
.spectrum {
  display: flex;
  height: 7px;
  width: 100%
}

.spectrum span {
  flex: 1
}

.spectrum span:nth-child(1) {
  background: var(--i-health)
}

.spectrum span:nth-child(2) {
  background: var(--i-climate)
}

.spectrum span:nth-child(3) {
  background: var(--i-zero)
}

.spectrum span:nth-child(4) {
  background: var(--i-talent)
}

.spectrum span:nth-child(5) {
  background: var(--i-food)
}

.spectrum span:nth-child(6) {
  background: var(--i-cities)
}

.spectrum span:nth-child(7) {
  background: var(--i-africa)
}

/* ============================================================
   Navigation
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .94);
  /* The backdrop is re-blurred on every frame the page moves, and with
     the network drawing behind it that is every frame. A smaller radius
     over a slightly more opaque bar looks the same and costs less. */
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}

.nav-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 0
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px
}

.brand img {
  width: 53px;
  height: 53px;
  object-fit: contain
}

.brand-txt {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 110%;
  font-size: 13px;
  line-height: 1.1;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--i-africa);
}

.brand-txt span {
  display: block;
  color: var(--i-cities);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .14em
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px
}

/* Scoped away from .btn — a bare `.nav-links a` rule outranks `.btn`
   and would repaint the CTA pill's label in ink-soft on navy. */
.nav-links a:not(.btn) {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color .2s
}

.nav-links a:not(.btn):hover {
  color: var(--ink)
}

/* Underline marks hover and the section currently in view */
.nav-links a:not(.btn) {
  position: relative;
  padding-block: 4px
}

.nav-links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.2, .7, .3, 1);
}

.nav-links a:not(.btn):hover::after,
.nav-links a:not(.btn)[aria-current="true"]::after {
  transform: scaleX(1)
}

.nav-links a:not(.btn)[aria-current="true"] {
  color: var(--ink);
  font-weight: 600
}

.btn {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 106%;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 13px 22px;
  border-radius: 999px;
  border: 2px solid transparent;
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  transition: background .25s, transform .2s, color .25s, border-color .25s;
}

/* The accent gradient fades in on hover. It lives on a pseudo-element
   because CSS cannot transition between two gradients — opacity can. */
.btn::before {
  content: "";
  position: absolute;
  inset: -2px;
  /* covers the transparent border ring too */
  z-index: -1;
  background: var(--accent-grad);
  opacity: 0;
  transition: opacity .25s;
}

.btn:hover::before {
  opacity: 1
}

.btn:hover {
  transform: translateY(-2px)
}

.btn[disabled] {
  opacity: .55;
  cursor: not-allowed;
  transform: none
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink)
}

/* Outline buttons fill with the same gradient instead of flat ink */
.btn-ghost:hover {
  color: #fff;
  border-color: transparent
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
  color: var(--ink)
}

.nav-toggle svg {
  width: 26px;
  height: 26px
}

.nav-toggle .ico-close {
  display: none
}

.nav-toggle[aria-expanded="true"] .ico-open {
  display: none
}

.nav-toggle[aria-expanded="true"] .ico-close {
  display: block
}

/* ---- Wide screens: brand left, links centred, CTA right ------------------
   `1fr auto 1fr` centres the links against the whole bar rather than against
   whatever space the brand leaves over, which is what "centred" has to mean
   here.

   The threshold is 1180px, not the 1000px it was before the donation pill
   arrived. Centring is what makes it that high: because the links are centred
   on the whole bar rather than on the space the brand leaves over, a third
   column wider than the first pushes them left into the brand rather than
   simply tightening the gap. Two pills make that column about 360px against
   the brand's 200px, and `.wrap` caps the bar at 1280px, so 1180px of viewport
   is the first width at which "The model" clears "FOUNDATION".

   Of the two copies of each pill in the markup, the ones inside #navLinks
   serve the flex row and the mobile menu, and .nav-actions serves the third
   column. */
.nav .nav-actions {
  display: none;
}

@media (min-width:1180px) {
  .nav-in {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .nav-in > .brand {
    justify-self: start;
  }

  .nav-links {
    justify-self: center;
  }

  .nav-links .nav-cta-inline {
    display: none;
  }

  .nav .nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-self: end;
  }

  /* The bar carries two pills from here up, so they are tightened a little to
     buy the centred links their room back. */
  .nav-actions .btn {
    padding: 11px 16px;
    font-size: 12px;
    letter-spacing: .05em;
    white-space: nowrap;
  }
}

/* ---- The donation pill's label -----------------------------------------
   In the bar the pill reads "Support TGIF", never the full name. `.wrap` caps
   the bar at 1280px however wide the window gets, and the full 43-character
   name set as an uppercase pill needs about 400px of that — more than the
   third column can hold at any width. So the short label is not a small-screen
   fallback that a wide screen grows out of; it is the only label the bar can
   carry, and the rule is unconditional rather than a breakpoint that would
   never fire.

   The anchor's aria-label carries the full name, so a screen reader announces
   "Support Tamegue Global Initiative Foundation" here as everywhere else, and
   the footer's support block prints it in full for everyone. */

/* ============================================================
   HERO — the question, answered seven ways
   ============================================================ */
.hero {
  position: relative;
  padding-top: clamp(48px, 7vw, 88px);
  padding-bottom: 0;
  overflow: hidden
}

.hero-glow {
  position: absolute;
  inset: auto -10% 20% -10%;
  height: 70%;
  background: radial-gradient(60% 60% at 30% 40%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
  transition: background 1s ease;
  pointer-events: none;
}

/* The glow no longer sits still. Two blurred colour fields drift through
   it like an aurora — one carries the live initiative's accent, so the
   motion recolours itself as the cycle turns; the other holds the
   emblem's sky blue so the drift always belongs to the mark. Different
   durations, opposite directions: the pair never repeats a composition. */
/* Blurred layers are expensive to repaint, so both are promoted to
   their own compositor layer and only ever moved, never redrawn. */
.hero-glow::before,
.hero-glow::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}

.hero-glow::before {
  width: 56%;
  height: 74%;
  left: -4%;
  top: 6%;
  background: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%);
  filter: blur(56px);
  animation: auroraA 13s ease-in-out infinite alternate;
}

.hero-glow::after {
  width: 46%;
  height: 64%;
  right: 2%;
  bottom: -6%;
  background: radial-gradient(circle at 55% 45%, color-mix(in srgb, var(--brand-sky) 15%, transparent), transparent 70%);
  filter: blur(56px);
  animation: auroraB 17s ease-in-out infinite alternate-reverse;
}

@keyframes auroraA {
  from {
    transform: translate3d(-5%, 0, 0) scale(1);
  }

  to {
    transform: translate3d(9%, 5%, 0) scale(1.12);
  }
}

@keyframes auroraB {
  from {
    transform: translate3d(4%, 3%, 0) scale(1.08);
  }

  to {
    transform: translate3d(-7%, -4%, 0) scale(.94);
  }
}

/* Every so often a light beam crosses the hero — a single diagonal
   sheen in the accent, gone as quickly as it arrives. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, color-mix(in srgb, var(--accent) 9%, transparent) 50%, transparent 58%);
  transform: translateX(-130%) skewX(-14deg);
  animation: beamSweep 12s ease-in-out infinite;
}

@keyframes beamSweep {

  0%,
  74% {
    transform: translateX(-130%) skewX(-14deg);
    opacity: 0;
  }

  78%,
  86% {
    opacity: 1;
  }

  90%,
  100% {
    transform: translateX(130%) skewX(-14deg);
    opacity: 0;
  }
}

@media (prefers-reduced-motion:reduce) {

  .hero-glow::before,
  .hero-glow::after {
    animation: none;
  }

  .hero::after {
    display: none;
  }
}

/* ============================================================
   HERO ON NAVY — the banner ground for the globe
   ------------------------------------------------------------
   The dot-matrix Earth only reads at full strength against ink,
   so the banner (and the banner alone) carries the dark ground.
   Everything below it is untouched: the page is still white from
   the statement section down.

   This whole treatment hangs off one class. Remove `is-dark` from
   the .hero div in index.php and the banner returns to paper with
   nothing else to undo — assets/js/motion.js reads the same class
   and paints its dots back to ink on its own.
   ============================================================ */
.hero.is-dark {
  background: var(--ink);
  color: #fff;
}

/* The seven tones were picked to clear 3:1 on white. On navy the
   red and the blue fall under it, so every accent on this ground is
   lifted toward white far enough to carry at display size. */
.hero.is-dark {
  --accent-lit: color-mix(in srgb, var(--accent-mid) 62%, #fff);
}

.hero.is-dark .q,
.hero.is-dark .answer-name {
  color: #fff;
}

.hero.is-dark .q .swap,
.hero.is-dark .q-mark,
.hero.is-dark .answer-code {
  color: var(--accent-lit);
}

.hero.is-dark .eyebrow,
.hero.is-dark .answer-desc {
  color: rgba(255, 255, 255, .66);
}

.hero.is-dark .hero-kicker .dot {
  background: var(--accent-lit);
}

/* The rule above the seven answers takes the sweep already tuned
   for dark surfaces rather than the one built for paper. */
.hero.is-dark .answers {
  border-image: var(--brand-grad-bright) 1;
}

/* Solid ink on ink would vanish — the primary button inverts */
.hero.is-dark .btn {
  background: #fff;
  color: var(--ink);
}

.hero.is-dark .btn-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .55);
}

.hero.is-dark .btn-ghost:hover {
  color: #fff;
  border-color: transparent;
}

.hero.is-dark .pip::before {
  background: rgba(255, 255, 255, .26);
}

.hero.is-dark .pip::after {
  background: var(--accent-lit);
}

.hero.is-dark .cycle-toggle {
  color: rgba(255, 255, 255, .72);
  border-color: rgba(255, 255, 255, .3);
}

.hero.is-dark .cycle-toggle:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .6);
}

/* The glow behind the globe is light on this ground, not tint */
.hero.is-dark .hero-glow {
  background: radial-gradient(60% 60% at 30% 40%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%);
  mix-blend-mode: screen;
}

.hero.is-dark .hero-glow::before {
  background: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%);
}

.hero.is-dark .hero-glow::after {
  background: radial-gradient(circle at 55% 45%, color-mix(in srgb, var(--brand-sky) 26%, transparent), transparent 70%);
}

.hero.is-dark::after {
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .07) 50%, transparent 58%);
}

/* The banner ends on a hairline of the brand sweep rather than a
   hard cut, so the navy hands off to the paper below it. */
.hero.is-dark .hero-grid {
  padding-bottom: clamp(40px, 5vw, 74px);
}

/* ============================================================
   HERO — opening sequence. One deliberate pass, roughly 1.4s:
   nav, eyebrow, question, answers, buttons, then the three
   photographs each open through their own frame. Pure CSS, so
   it plays identically with scripting off, and the whole page
   is usable from the first frame — nothing here blocks input.
   ============================================================ */
@keyframes heroRise {
  from {
    opacity: 0;
    transform: translateY(26px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes navSettle {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes frameOpen {
  from {
    clip-path: inset(100% 0 0 0 round 14px);
  }

  to {
    clip-path: inset(0 0 0 0 round 14px);
  }
}

.nav {
  animation: navSettle .55s var(--ease-out) both;
}

.hero-kicker {
  animation: heroRise .6s var(--ease-out) .12s both;
}

.hero .q {
  animation: heroRise .8s var(--ease-out) .2s both;
}

.hero .answers {
  animation: heroRise .7s var(--ease-out) .38s both;
}

.hero .hero-cta {
  animation: heroRise .7s var(--ease-out) .5s both;
}

.hero-media .ph:nth-child(1) {
  animation: frameOpen .75s var(--ease-out) .3s both;
}

.hero-media .ph:nth-child(2) {
  animation: frameOpen .75s var(--ease-out) .5s both;
}

.hero-media .ph:nth-child(3) {
  animation: frameOpen .75s var(--ease-out) .64s both;
}

.hero-glow {
  animation: imgIn 1.1s ease-out .55s both;
}

/* Cursor depth — assets/js/motion.js eases --par-x/--par-y a few
   pixels while the pointer crosses the hero; decorative layers
   only, and only on fine-pointer screens. */
.hero-media {
  transform: translate3d(calc(var(--par-x, 0) * -.45px), calc(var(--par-y, 0) * -.4px), 0);
}

.hero-glow::before {
  translate: calc(var(--par-x, 0) * 1.1px) calc(var(--par-y, 0) * .9px);
}

@media (prefers-reduced-motion:reduce) {

  .nav,
  .hero-kicker,
  .hero .q,
  .hero .answers,
  .hero .hero-cta,
  .hero-media .ph:nth-child(n),
  .hero-glow {
    animation: none;
  }

  .hero-media {
    transform: none;
  }
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: end
}

.hero-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px
}

.hero-kicker .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent-mid);
  transition: background .7s
}

.q {
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 118%;
  font-size: clamp(40px, 7.1vw, 74px);
  line-height: .9;
  letter-spacing: -.032em;
  text-transform: uppercase;
}

.q .swap {
  color: var(--accent-mid);
  transition: color .7s ease
}

.q-mark {
  color: var(--accent-mid);
  transition: color .7s ease
}

/* The rule above the seven answers, and the one above the index further
   down, both carry the logo sweep instead of a flat ink line. Only the top
   border has a width, so border-image paints nowhere else. */
.answers {
  margin-top: clamp(28px, 3.6vw, 44px);
  border-top: 3px solid transparent;
  border-image: var(--brand-grad) 1;
  padding-top: 20px;
  max-width: 620px
}

.answer-label {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-height: 96px
}

.answer-code {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 15px;
  color: var(--accent-ink);
  transition: color .5s
}

.answer-body {
  flex: 1
}

.answer-name {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 110%;
  font-size: clamp(22px, 2.7vw, 34px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -.015em
}

.answer-desc {
  font-size: 16.5px;
  color: var(--ink-soft);
  margin-top: 8px
}

/* Initiative change — the number rolls up first, the name and the
   description follow a beat apart. Editorial, not carousel. */
.answer-fade .answer-code {
  animation: codeRoll .55s var(--ease-out) both
}

.answer-fade .answer-name {
  animation: ansIn .6s var(--ease-out) .07s both
}

.answer-fade .answer-desc {
  animation: ansIn .6s var(--ease-out) .16s both
}

@keyframes codeRoll {
  from {
    opacity: 0;
    transform: translateY(.85em)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes ansIn {
  from {
    opacity: 0;
    transform: translateY(9px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

/* ---------- Hero cycle controls ---------- */
.pips-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 18px
}

.pips {
  display: flex;
  gap: 8px
}

.pip {
  position: relative;
  width: 34px;
  height: 26px;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}

/* Two stacked bars: ::before is the track, ::after is the fill that runs
   the length of the dwell. Both are absolute and centred so hover can
   thicken them without touching transform, which the fill needs. */
.pip::before,
.pip::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 99px;
  transition: height .3s, margin-top .3s, background .3s;
}

.pip::before {
  background: var(--rule)
}

/* The live pip's track is tinted, so the current initiative is still
   identifiable when the fill is paused near zero */
.pip.is-live::before {
  background: color-mix(in srgb, var(--accent-mid) 30%, var(--rule))
}

.pip::after {
  background: var(--accent-mid);
  transform: scaleX(0);
  transform-origin: left center;
}

/* The fill doubles as the countdown: main.js advances the cycle on its
   animationend, so the bar reaching the right edge *is* the slide change. */
.pip.is-live::after {
  animation: pipFill var(--dwell, 5200ms) linear forwards
}

.pips.is-paused .pip.is-live::after {
  animation-play-state: paused
}

@keyframes pipFill {
  from {
    transform: scaleX(0)
  }

  to {
    transform: scaleX(1)
  }
}

.pip:hover::before,
.pip:hover::after,
.pip:focus-visible::before,
.pip:focus-visible::after {
  height: 9px;
  margin-top: -4.5px;
}

/* Nothing animates, so the live pip simply reads as full */
@media (prefers-reduced-motion: reduce) {
  .pip.is-live::after {
    animation: none;
    transform: scaleX(1)
  }
}

/* main.js hides the control for reduced-motion visitors (nothing is
   cycling) — the display rule below must not override that. */
.cycle-toggle[hidden] {
  display: none;
}

.cycle-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 99px;
  padding: 9px 15px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grey);
  transition: color .25s, border-color .25s;
}

.cycle-toggle:hover {
  border-color: var(--ink);
  color: var(--ink)
}

.cycle-toggle svg {
  width: 10px;
  height: 10px;
  fill: currentColor;
  flex: none
}

.cycle-toggle .ico-play {
  display: none
}

.cycle-toggle[aria-pressed="false"] .ico-play {
  display: block
}

.cycle-toggle[aria-pressed="false"] .ico-pause {
  display: none
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
  margin-bottom: clamp(40px, 6vw, 72px)
}

/* Hero image stack */
.hero-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-bottom: clamp(40px, 6vw, 72px)
}

.hero-media .ph:nth-child(1) {
  grid-column: 1 / -1;
  aspect-ratio: 16/9
}

.hero-media .ph:nth-child(2),
.hero-media .ph:nth-child(3) {
  aspect-ratio: 1/1
}

/* ---------- Image frames ---------- */
.ph {
  position: relative;
  background: var(--mist);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #C6D0DE;
}

.ph::after {
  content: attr(data-note);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #93A0B2;
  text-align: center;
  padding: 10px;
  line-height: 1.6;
}

/* Frames holding a real photo drop the dashed placeholder treatment */
.ph:has(img),
.ph.is-live {
  border: 0
}

.ph:has(img)::after,
.ph.is-live::after {
  content: none
}

.ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2, .7, .3, 1);
}

.ph:hover img {
  transform: scale(1.045)
}

/* ---------- Hero photographs follow the initiative cycle ---------- */
/* The outgoing photo is parked on the frame's background by main.js, so
   the incoming one fades over it. Only opacity is animated — transform is
   left alone so the hover zoom keeps working. */
.hero-media .ph {
  background-size: cover;
  background-position: center;
}

@keyframes imgIn {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

/* The incoming photograph opens through a vertical window over the
   parked outgoing one — a mask reveal rather than a plain fade. */
.hero-media .ph img.img-in {
  animation: imgWipe .65s var(--ease-out) both
}

@keyframes imgWipe {
  from {
    opacity: .4;
    clip-path: inset(0 0 100% 0)
  }

  60% {
    opacity: 1
  }

  to {
    opacity: 1;
    clip-path: inset(0)
  }
}

.ph-wash {
  position: absolute;
  inset: 0;
  background: var(--accent);
  opacity: .14;
  mix-blend-mode: multiply;
  transition: background .8s, opacity .4s;
  z-index: 2;
  pointer-events: none;
}

.ph:hover .ph-wash {
  opacity: .05
}

/* ---------- Leadership portrait ----------------------------------------
   The supplied photographs are already cropped to 4:5 (see the note in
   data/leadership.php), so object-fit has nothing to trim on them. It is set
   anyway: a portrait dropped in later at some other shape then gets centred
   and cropped rather than squashed, and the focal point sits high because a
   face does. width/height come off the file itself, so the row holds its
   height before the images arrive and nothing below it jumps.
   ---------------------------------------------------------------------- */
.portrait {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: center 22%;
  border-radius: 20px;
  border: 1px solid var(--rule);
  background: var(--mist);
}

/* ---------- Leadership monogram (stands in until real portraits arrive) ---------- */
.mono-portrait {
  position: relative;
  aspect-ratio: 4/2;
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 70% 8%, color-mix(in srgb, var(--c) 26%, transparent), transparent 62%),
    var(--mist);
  display: grid;
  place-items: center;
  border: 1px solid var(--rule);
}

.mono-portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, transparent 0 13px, color-mix(in srgb, var(--c) 7%, transparent) 13px 14px);
}

/* On a leader card the monogram stands where a portrait would, so it takes the
   portrait's shape rather than the wide default. */
.mono-portrait.is-tall {
  aspect-ratio: 4/5;
}

.mono-initials {
  position: relative;
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 118%;
  font-size: clamp(64px, 10vw, 132px);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--c-mid);
}

.mono-flag {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 3;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--ink);
  color: #fff;
  padding: 7px 12px;
  border-radius: 99px;
}

/* ============================================================
   Statement band
   ============================================================ */
.statement {
  background: var(--ink);
  color: #fff;
  padding-block: var(--sec)
}

.statement .eyebrow {
  color: rgba(255, 255, 255, .5)
}

.statement-txt {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 104%;
  font-size: clamp(24px, 3.5vw, 46px);
  line-height: 1.16;
  letter-spacing: -.02em;
  margin-top: 26px;
  max-width: 20ch;
}

/* "high-impact initiatives" carries the logo sweep, the way GLOBAL does
   in the mark. Colour is only made transparent where clipping is
   supported, so the phrase never disappears. */
.statement-txt em {
  font-style: normal;
  color: var(--brand-amber)
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .statement-txt em {
    background: var(--brand-grad-bright);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.statement-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: start
}

.statement-body {
  font-size: 17.5px;
  line-height: 1.72;
  color: rgba(255, 255, 255, .76)
}

.statement-body p+p {
  margin-top: 18px
}

.statement-body strong {
  color: #fff;
  font-weight: 600
}

/* ============================================================
   The Model — sectors vs initiatives
   ============================================================ */
section {
  padding-block: var(--sec);
}

.sec-head {
  max-width: 760px;
  margin-bottom: clamp(36px, 5vw, 64px)
}

.sec-head .h2 {
  margin-top: 16px
}

.sec-head .lede {
  margin-top: 20px
}

.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 40px)
}

.cmp {
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: clamp(22px, 3vw, 34px);
  background: var(--paper)
}

.cmp.is-new {
  border-color: var(--ink);
  box-shadow: 0 22px 60px -34px rgba(6, 37, 74, .5)
}

.cmp-title {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 110%;
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin-top: 12px
}

.cmp-sub {
  font-size: 15.5px;
  color: var(--grey);
  margin-top: 8px;
  margin-bottom: 26px
}

.silos {
  display: flex;
  flex-direction: column;
  gap: 9px
}

.silo {
  background: #EDF2F9;
  color: var(--grey);
  border-radius: 8px;
  padding: 13px 16px;
  font-size: 14.5px;
  font-weight: 500
}

.weave {
  display: flex;
  flex-direction: column;
  gap: 9px
}

.thread {
  border-radius: 8px;
  padding: 13px 16px;
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.thread small {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  opacity: .92;
  font-weight: 500
}

/* The five lighter logo colours cannot carry white text at AA, so those
   threads flip to ink. Red and blue keep white. */
.thread[data-tone="light"] {
  color: var(--ink)
}

.thread[data-tone="light"] small {
  opacity: 1
}

/* A thread jumps straight to its initiative in the index */
a.thread {
  transition: transform .25s, box-shadow .25s
}

a.thread:hover {
  transform: translateX(5px);
  box-shadow: 0 12px 26px -18px rgba(6, 37, 74, .8)
}

/* ============================================================
   Initiative index
   ============================================================ */
.index-list {
  border-top: 3px solid transparent;
  border-image: var(--brand-grad) 1
}

.init {
  border-bottom: 1px solid var(--rule);
  position: relative;
  padding: 0 40px;
}

.init-head {
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: clamp(14px, 2.4vw, 32px);
  align-items: center;
  padding: clamp(20px, 2.6vw, 30px) 0;
  font: inherit;
  color: inherit;
}

.init-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--c);
  transition: width .35s cubic-bezier(.2, .7, .3, 1);
  opacity: .07;
  pointer-events: none
}

.init:hover .init-bar,
.init.open .init-bar {
  width: 100%
}

.init-code {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--c-ink)
}

.init-name {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(24px, 3.6vw, 36px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -.022em;
  transition: color .3s
}

.init:hover .init-name,
.init.open .init-name {
  color: var(--c-mid)
}

.init-tag {
  font-size: 15.5px;
  color: var(--ink-soft);
  margin-top: 9px;
  max-width: 52ch
}

.init-plus {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--rule);
  display: grid;
  place-items: center;
  flex: none;
  transition: .3s;
}

.init:hover .init-plus {
  border-color: var(--c)
}

.init.open .init-plus {
  background: var(--c-ink);
  border-color: var(--c-ink);
  transform: rotate(45deg)
}

.init-plus svg {
  width: 16px;
  height: 16px;
  stroke: var(--ink);
  stroke-width: 2.4;
  transition: stroke .3s
}

.init.open .init-plus svg {
  stroke: #fff
}

.init-panel {
  display: none;
  padding-bottom: clamp(26px, 3.4vw, 40px);
  position: relative
}

.init.open .init-panel {
  display: block;
  animation: ansIn .4s ease
}

.panel-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(22px, 3vw, 40px);
  align-items: start
}

.record {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden
}

.record div {
  background: var(--paper);
  padding: 18px 20px
}

.record dt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 7px
}

.record dd {
  font-size: 15.5px;
  line-height: 1.5
}

.panel-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px
}

.panel-media .ph:first-child {
  grid-column: 1/-1;
  aspect-ratio: 16/10
}

.panel-media .ph:not(:first-child) {
  aspect-ratio: 4/3
}

/* Jump from an open panel to the enquiry form, pre-set to this initiative */
.panel-cta {
  margin-top: 24px
}

/* ============================================================
   Advantage — the convergence
   ============================================================ */
.advantage {
  background: var(--mist)
}

.conv {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(16px, 3vw, 44px);
  align-items: center;
  margin-top: 20px
}

.conv-col {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.domain {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 15px 18px;
  font-size: 15.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: .28s;
}

.domain i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  font-style: normal
}

.domain:hover {
  transform: translateX(6px);
  border-color: var(--ink);
  box-shadow: 0 12px 28px -20px rgba(6, 37, 74, .6)
}

.conv-hub {
  width: clamp(140px, 17vw, 208px);
  aspect-ratio: 1;
  border-radius: 50%;
  /* Eight disciplines meeting at one table: an ink disc held inside a ring
     of the full logo sweep. Two backgrounds — one clipped to the padding
     box, one to the border box — make the ring. */
  border: 7px solid transparent;
  background:
    linear-gradient(var(--ink), var(--ink)) padding-box,
    var(--brand-grad-diag) border-box;
  color: #fff;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 22px;
  box-shadow: 0 30px 70px -30px rgba(6, 37, 74, .7);
}

.conv-hub strong {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(15px, 1.8vw, 21px);
  line-height: 1.05;
  text-transform: uppercase;
  display: block
}

.conv-hub span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  display: block;
  margin-top: 10px
}

/* ============================================================
   Leadership
   ============================================================ */
/* auto-fit rather than a fixed count, so adding or removing a person in
   data/leadership.php needs no change here. 230px is the narrow end: the
   name sits on one line at that width, and four across still fits a 1200px
   wrap with the gap. Below ~1080px it falls to two, then to one. */
.leaders {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(22px, 2.6vw, 36px)
}

.leader {
  position: relative
}

.leader .ph {
  aspect-ratio: 4/5;
  border-radius: 20px
}

/* Name sizing is tied to the card, not the viewport: four cards across make a
   much narrower column than the two this section used to carry, and the old
   3.2vw clamp overflowed it. */
.leaders .leader-name {
  font-size: clamp(21px, 1.9vw, 27px)
}

.leaders .leader-name a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--c), var(--c));
  background-size: 0 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .3s var(--ease-out)
}

.leaders .leader-name a:hover,
.leaders .leader-name a:focus-visible {
  background-size: 100% 2px
}

.leaders .leader-bio {
  font-size: 15px
}

/* Two up on a phone rather than one. A single full-width portrait per row
   would run this section to four screens of scroll; a pair of ~170px cards
   keeps the four people together as one group, which is the point of it. */
@media (max-width:560px) {
  .leaders {
    grid-template-columns: 1fr 1fr;
    gap: 18px
  }

  .leaders .leader-name {
    font-size: 19px
  }

  .leaders .leader-meta {
    margin-top: 16px;
    padding-top: 14px
  }

  .leaders .leader-bio {
    font-size: 14px;
    margin-top: 10px
  }
}

.leader-meta {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 3px solid var(--c)
}

.leader-role {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-ink);
  font-weight: 500
}

.leader-name {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(25px, 3.2vw, 40px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -.02em;
  margin-top: 12px
}

.leader-bio {
  font-size: 16px;
  color: var(--ink-soft);
  margin-top: 14px;
  max-width: 46ch
}

/* ============================================================
   Field gallery
   ============================================================ */
.gallery {
  background: var(--ink);
  color: #fff
}

.gallery .eyebrow {
  color: rgba(255, 255, 255, .5)
}

.gallery .lede {
  color: rgba(255, 255, 255, .7)
}

.mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px
}

.mosaic .ph {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16)
}

.mosaic .ph::after {
  color: rgba(255, 255, 255, .45)
}

.m1 {
  grid-column: span 3;
  aspect-ratio: 3/2
}

.m2 {
  grid-column: span 3;
  aspect-ratio: 3/2
}

.m3 {
  grid-column: span 2;
  aspect-ratio: 1
}

.m4 {
  grid-column: span 2;
  aspect-ratio: 1
}

.m5 {
  grid-column: span 2;
  aspect-ratio: 1
}

.m6 {
  grid-column: span 4;
  aspect-ratio: 2/1
}

.m7 {
  grid-column: span 2;
  aspect-ratio: 1
}

/* Caption revealed on hover / focus so the mosaic explains itself */
.ph-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 30px 16px 14px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #fff;
  background: linear-gradient(
to top, rgba(6, 16, 30, .86), transparent);
  opacity: 0;
  transform: translateY(0px);
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}

.ph:hover .ph-cap,
.ph:focus-within .ph-cap {
  opacity: 1;
  transform: none
}

/* ============================================================
   Convene / CTA
   ============================================================ */
.convene {
  position: relative;
  overflow: hidden
}

.convene-in {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center
}

/* Direct contact — for people who would rather call or email than fill a form */
.direct {
  margin-top: clamp(28px, 3.5vw, 44px);
  padding-top: clamp(22px, 3vw, 30px);
  border-top: 1px solid var(--rule);
}

.direct-links {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.direct-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 14px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.25;
  transition: border-color .2s, color .2s, transform .2s, box-shadow .2s;
}

.direct-item svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--accent-ink);
}

.direct-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: anywhere;
}

.direct-body small {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--grey);
  font-weight: 500;
  margin-bottom: 3px;
}

.direct-item:hover {
  border-color: var(--accent-ink);
  color: var(--accent-ink);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -30px rgba(6, 37, 74, .8);
}

.form-card {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: clamp(24px, 3vw, 38px);
  background: var(--paper);
  overflow: hidden;
  box-shadow: 0 34px 80px -50px rgba(6, 37, 74, .6)
}

/* Logo sweep across the top edge of the enquiry card */
.form-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: var(--brand-grad);
}

.field {
  margin-bottom: 16px
}

.field label {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 8px
}

.field label .req {
  color: var(--i-health)
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  padding: 14px 16px;
  border: 1.5px solid var(--rule);
  border-radius: 11px;
  background: var(--paper);
  transition: border-color .2s;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent-ink);
  outline: none
}

.field textarea {
  min-height: 104px;
  resize: vertical
}

/* ---------- Inline validation ---------- */
.field .msg {
  display: none;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--i-health);
  margin-top: 8px;
}

.field.invalid .msg {
  display: block
}

.field.invalid input,
.field.invalid select,
.field.invalid textarea {
  border-color: var(--i-health)
}

.form-status {
  display: none;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 14.5px;
  line-height: 1.5;
  border: 1px solid var(--rule);
  background: var(--mist);
}

.form-status.show {
  display: block
}

.form-status.is-ok {
  border-color: color-mix(in srgb, var(--i-food) 45%, transparent);
  background: color-mix(in srgb, var(--i-food) 10%, #fff)
}

.form-status.is-err {
  border-color: color-mix(in srgb, var(--i-health) 45%, transparent);
  background: color-mix(in srgb, var(--i-health) 8%, #fff)
}

.char-count {
  float: right;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  color: var(--grey);
  text-transform: none
}

.form-note {
  font-size: 13.5px;
  color: var(--grey);
  margin-top: 14px
}

/* ============================================================
   Back to top
   ============================================================ */
.to-top {
  position: fixed;
  left: 50%;
  margin-left: -26px;
  /* half its width — keeps it dead centre without touching the
     translateY the show/hide transition already animates */
  bottom: clamp(16px, 2.6vw, 30px);
  z-index: 70;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 0;
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s, transform .3s, visibility .3s, background .3s;
  box-shadow: 0 16px 34px -16px rgba(6, 37, 74, .75);
}

.to-top.show {
  opacity: 1;
  visibility: visible;
  transform: none
}

.to-top:hover {
  background: var(--accent-grad)
}

.to-top svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round
}

/* Reading-progress line sitting under the sticky nav. The logo sweep is
   sized to the viewport, not to the bar, so scrolling reveals the gradient
   left to right rather than squeezing all six colours into a short bar. */
.progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 3px;
  width: 0;
  background-image: var(--brand-grad);
  background-size: 100vw 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* ============================================================
   Footer
   ============================================================ */
.foot {
  /* Logo sweep as a 4px cap on the footer */
  background: var(--brand-grad) top/100% 4px no-repeat, var(--ink);
  color: #fff;
  padding-top: clamp(56px, 7vw, 88px);
  padding-bottom: 34px
}

.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(24px, 3vw, 48px)
}

/* Footer column headings are <h2> inside the contentinfo landmark so the
   document keeps a clean heading order; the class carries the look. */
.foot h4,
.foot .foot-head {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
  font-weight: 500;
  margin-bottom: 16px
}

.foot ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.foot a {
  font-size: 15px;
  color: rgba(255, 255, 255, .78);
  transition: color .2s
}

/* A 15px line is a 19px tap target. On a touch screen the links in these
   columns sit close enough together to mis-hit, so the list rows are given
   real height instead — the text does not move, the target grows around it. */
@media (max-width:760px) {
  .foot ul {
    gap: 2px
  }

  .foot li > a {
    display: block;
    padding-block: 9px
  }
}

.foot a:hover {
  color: #fff
}

/* Phone and email sit above the action links — long address must wrap, not overflow */
.foot-contact {
  font-weight: 600;
  color: #fff;
  overflow-wrap: anywhere;
}

.foot .brand img {
  width: 52px;
  height: 52px;
  background: #fff;
  border-radius: 10px;
  padding: 5px
}

.foot .brand-txt {
  color: #fff
}

.foot .brand-txt span {
  color: rgba(255, 255, 255, .45)
}

.foot-blurb {
  font-size: 15px;
  color: rgba(255, 255, 255, .6);
  margin-top: 20px;
  max-width: 34ch;
  line-height: 1.65
}

.foot-base {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  font-size: 13.5px;
  color: rgba(255, 255, 255, .5)
}

/* ============================================================
   Reveal on scroll
   ============================================================ */
.rv {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out)
}

.rv.in {
  opacity: 1;
  transform: none
}

/* (If JS never runs, the <noscript> block in index.html un-hides these) */

/* ------------------------------------------------------------
   Reveal variants — the same .rv observer, different entrances.
   A data-reveal attribute changes how an element arrives; leave
   it off and the element rises the way everything always has.
     fade-up (default) · fade · slide-left · slide-right
     image-mask · stagger
   ------------------------------------------------------------ */
.rv[data-reveal="fade"] {
  transform: none
}

.rv[data-reveal="slide-left"] {
  transform: translateX(-30px)
}

.rv[data-reveal="slide-right"] {
  transform: translateX(30px)
}

/* Stacked layouts rise like everything else — a sideways offset on a
   full-width block would poke past the viewport edge. */
@media (max-width:1000px) {

  .rv[data-reveal="slide-left"],
  .rv[data-reveal="slide-right"] {
    transform: translateY(22px)
  }
}

/* Photographs open through their frame instead of drifting */
.rv[data-reveal="image-mask"] {
  transform: none;
  clip-path: inset(14% 4% 14% 4% round 14px);
  transition: opacity .75s var(--ease-out), clip-path .95s var(--ease-out)
}

.rv[data-reveal="image-mask"].in {
  clip-path: inset(0 0 0 0 round 14px)
}

/* The container is quiet; its children arrive a beat apart */
.rv[data-reveal="stagger"] {
  opacity: 1;
  transform: none;
  transition: none
}

.rv[data-reveal="stagger"]>* {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .65s var(--ease-out), transform .65s var(--ease-out)
}

.rv[data-reveal="stagger"].in>* {
  opacity: 1;
  transform: none
}

.rv[data-reveal="stagger"].in>*:nth-child(2) {
  transition-delay: .08s
}

.rv[data-reveal="stagger"].in>*:nth-child(3) {
  transition-delay: .16s
}

.rv[data-reveal="stagger"].in>*:nth-child(4) {
  transition-delay: .24s
}

.rv[data-reveal="stagger"].in>*:nth-child(5) {
  transition-delay: .32s
}

.rv[data-reveal="stagger"].in>*:nth-child(n+6) {
  transition-delay: .4s
}

/* ============================================================
   Interaction polish — level-four motion: hover, focus, active.
   Small distances, quick returns, nothing chases the cursor.
   ============================================================ */

/* The bar earns a shadow once the page is moving underneath it */
.nav {
  transition: box-shadow .35s ease;
}

.nav.is-scrolled {
  box-shadow: 0 12px 32px rgba(6, 37, 74, .09);
}

/* A single light pass crosses a button on hover — once, quickly */
.btn::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .28) 50%, transparent 62%);
  transform: translateX(-130%) skewX(-15deg);
}

.btn:hover::after,
.btn:focus-visible::after {
  transform: translateX(130%) skewX(-15deg);
  transition: transform .65s ease;
}

/* Cards lift a few pixels, never more */
.leaders .leader.in {
  transition: transform .3s var(--ease-out);
}

.leaders .leader.in:hover {
  transform: translateY(-4px);
}

.thread {
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}

.thread:hover,
.thread:focus-visible {
  transform: translateX(5px);
}

.domain {
  transition: transform .3s var(--ease-out), border-color .3s;
}

.domain:hover {
  transform: translateX(4px);
  border-color: var(--accent-mid);
}

@media (prefers-reduced-motion:reduce) {

  .btn::after {
    display: none;
  }

  .leaders .leader.in:hover,
  .thread:hover,
  .thread:focus-visible,
  .domain:hover {
    transform: none;
  }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1000px) {
  .hero-grid {
    grid-template-columns: 1fr
  }

  .hero-media {
    padding-bottom: clamp(40px, 6vw, 72px)
  }

  /* .leaders is deliberately not in this list: it is auto-fit, so it steps
     4 → 3 → 2 on its own and never has to be told to collapse. Forcing it to
     one column here would blow each portrait up to the full width of the
     page on a tablet. */
  .statement-grid,
  .compare,
  .panel-grid,
  .convene-in {
    grid-template-columns: 1fr
  }

  .conv {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: left
  }

  .conv-col {
    width: 100%
  }

  .conv-hub {
    order: -1;
    margin-bottom: 8px
  }

  .foot-grid {
    grid-template-columns: 1fr 1fr
  }
}

/* ---- The menu collapses below 1180px, not below 760px -------------------
   Five links, a caret and two pills — "Support TGIF" and "Bring us an
   initiative" — need about 1180px to sit on one line beside the brand. Below
   that they would stay on show and collide: the centred links run into the
   brand, and the labels wrap. A tablet gets the same drawer a phone gets
   instead, which is why this is 1179px and the centred desktop bar above
   starts at 1180px: the two meet exactly.

   This was 999px/1000px while the bar carried one pill. Both numbers moved
   together when the donation pill was added, along with the third copy of the
   query further down and the one in the JS.

   assets/js/main.js reads the same 1179px in isStacked(), so the Initiatives
   disclosure switches from floating panel to accordion at the same width. */
@media (max-width:1179px) {
  :root {
    --nav-h: 74px
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: 8px 0 16px;
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
    box-shadow: 0 24px 40px -28px rgba(6, 37, 74, .7);
  }

  .nav-links.open {
    display: flex
  }

  .nav-links a:not(.btn) {
    padding: 15px var(--gut);
    border-bottom: 1px solid var(--rule);
    border-left: 3px solid transparent
  }

  .nav-links a:not(.btn)::after {
    display: none
  }

  .nav-links a:not(.btn)[aria-current="true"] {
    border-left-color: var(--accent-ink);
    background: var(--mist)
  }

  .nav-links .btn {
    margin: 14px var(--gut) 0;
    justify-content: center
  }

  .nav-toggle {
    display: block
  }
}

@media (max-width:760px) {
  .init-head {
    grid-template-columns: 44px 1fr;
    row-gap: 4px
  }

  .init-plus {
    display: none
  }

  .record,
  .panel-media,
  .hero-media {
    grid-template-columns: 1fr
  }

  .mosaic {
    grid-template-columns: repeat(2, 1fr)
  }

  .m1,
  .m2,
  .m3,
  .m4,
  .m5,
  .m6,
  .m7 {
    grid-column: span 2;
    aspect-ratio: 3/2
  }

  .foot-grid {
    grid-template-columns: 1fr
  }

  /* Captions are hover-only on desktop — always visible on touch */
  .ph-cap {
    opacity: 1;
    transform: none
  }

  .to-top {
    width: 46px;
    height: 46px;
    margin-left: -23px
  }
}

@media (prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important
  }

  .rv {
    opacity: 1;
    transform: none
  }
}

@media only screen and (max-width:430px) {
  .answer-label{
     min-height:0; 
  }

  .pips-row{
    margin-top:10px;
  }

  .hero-cta{
    gap:8px
  }
  
  .hero-cta a{
    padding:8px 15px;
    font-size:11px;
  }

  .hero-grid{
    gap:0px;
  }

  .cmp{
    padding:20px 10px;
  }

  .cmp-sub{
    margin-top:5px;
    line-height:17px;
  }

  .cmp-title{
    margin-top:0px;
  }

  .sec-head .h2{
    margin-top:3px;
  }

  .lede{
    line-height:1.2;
    font-size:16px;
  }

  .sec-head{
    margin-bottom:20px;
  }

  .init{
    padding:0 10px;
  }

  .init-tag{
    line-height:1.2;
    font-size:15px;
  }

  .record div{
    padding:18px 10px
  }

  .record dd{
    line-height:1.2;
  }

  .conv-hub{
    width:170px;
  }

  .mono-flag{
    left:7px;
    bottom:7px;
    padding: 3px 9px;
    font-size: 9px;
  }

  .form-card{
    padding:20px 10px;
  }

  .direct-links{
    margin-top:12px;
    gap:8px;
  }

  .direct-item{
    width:100%;
    padding:10px 14px 10px 12px;
    font-size:15px;
  }

  .form-note{
    line-height:1.2;
  }

  .section{
    padding-block:0px 0
  }

  .foot-blurb{
    margin-top:10px;
    line-height:1.3;
  }

  .foot-grid{
    gap:18px;
  }

  .foot ul{
    gap:0px;
  }

  .foot-base{
    margin-top:15px;
    padding-top:14px;
    gap: 3px;
  }

  .foot{
    padding:30px 0;
    }
}

.brand-txt-span-2 {
    color: var(--i-health) !important;
}

/* ============================================================
   INITIATIVES DROPDOWN
   ------------------------------------------------------------
   The nav item keeps its original type, colour and underline; the only
   new furniture is a caret button and the panel it discloses. On a wide
   screen the panel floats; at 760px and below the same markup is an
   accordion inside the mobile menu.
   ============================================================ */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color .2s, background .2s, transform .3s cubic-bezier(.2, .7, .3, 1);
}

.nav-caret svg {
  width: 14px;
  height: 14px;
}

.nav-item:hover .nav-caret,
.nav-caret:hover {
  color: var(--ink);
}

.nav-item.open .nav-caret {
  color: var(--accent-ink);
  transform: rotate(180deg);
}

/* ---------- The panel ---------- */
.nav-drop {
  position: absolute;
  top: calc(100% + 14px);
  left: -18px;
  z-index: 80;
  width: 360px;
  max-width: calc(100vw - 32px);
  padding: 8px;
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: 0 34px 70px -34px rgba(6, 37, 74, .55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  /* Visibility flips instantly on the way in — otherwise the first link is
     still unfocusable when ArrowDown tries to move into the panel — and is
     held back until the fade has finished on the way out. */
  transition: opacity .24s cubic-bezier(.2, .7, .3, 1), transform .24s cubic-bezier(.2, .7, .3, 1), visibility 0s linear .24s;
  overflow: hidden;
}

/* The logo sweep caps the panel, the way it caps the enquiry card */
.nav-drop::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--brand-grad);
}

/* An invisible bridge across the gap, so the pointer can travel from the
   label down into the panel without passing over dead space */
.nav-drop::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
}

.nav-item.open .nav-drop {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .24s cubic-bezier(.2, .7, .3, 1), transform .24s cubic-bezier(.2, .7, .3, 1), visibility 0s;
}

.nav-drop-head {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--grey);
  padding: 14px 14px 10px;
}

.nav-drop-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* These links live inside .nav-links, so the header's link rules reach them.
   Reset the parts that do not belong on a panel row. */
.nav-drop a:not(.btn) {
  position: relative;
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: baseline;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  transition: background .2s, color .2s;
}

.nav-drop a:not(.btn)::after {
  display: none;
}

/* The initiative's own colour as a rail on the left edge of the row */
.nav-drop-list a::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 3px;
  background: var(--c);
  opacity: 0;
  transition: opacity .2s;
}

.nav-drop-list a:hover,
.nav-drop-list a:focus-visible {
  background: var(--mist);
}

.nav-drop-list a:hover::before,
.nav-drop-list a:focus-visible::before,
.nav-drop-list a[aria-current]::before {
  opacity: 1;
}

.nav-drop-num {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  color: var(--c-ink);
}

.nav-drop-body {
  display: block;
  min-width: 0;
}

.nav-drop-name {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 110%;
  font-size: 15px;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.nav-drop-desc {
  display: block;
  font-size: 13px;
  line-height: 1.35;
  color: var(--grey);
  margin-top: 3px;
}

.nav-drop-all {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  padding: 13px 14px !important;
  border-top: 1px solid var(--rule);
  border-radius: 0 0 12px 12px;
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500 !important;
  color: var(--ink) !important;
  transition: background .2s;
}

.nav-drop-all::after {
  display: none;
}

.nav-drop-all svg {
  width: 15px;
  height: 15px;
  flex: none;
  transition: transform .25s;
}

.nav-drop-all:hover {
  background: var(--mist);
}

.nav-drop-all:hover svg {
  transform: translateX(4px);
}

/* ============================================================
   Active page state
   ------------------------------------------------------------
   The homepage still marks the section you are scrolling through
   (aria-current="true", set by main.js). Inner pages mark the page
   itself (aria-current="page", set by includes/header.php). One rule
   covers both.
   ============================================================ */
.nav-links a:not(.btn)[aria-current] {
  color: var(--ink);
  font-weight: 600;
}

.nav-links a:not(.btn)[aria-current]::after {
  transform: scaleX(1);
}

/* ============================================================
   Guided intake — homepage introduction card
   ------------------------------------------------------------
   Sits in the slot the five-field enquiry form used to occupy, inside
   the same .form-card frame, so the convene section's composition is
   unchanged.
   ============================================================ */
.intake-intro-title {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 110%;
  font-size: clamp(22px, 2.6vw, 29px);
  line-height: 1.05;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin-top: 14px;
}

.intake-intro-lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-top: 14px;
}

.intake-meta {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 24px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
}

.intake-meta li {
  background: var(--paper);
  padding: 14px 12px;
  text-align: center;
}

.intake-meta strong {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 108%;
  font-size: 19px;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--accent-ink);
  transition: color .5s;
}

.intake-meta span {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grey);
  margin-top: 6px;
}

.intake-intro-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grey);
  margin-top: 26px;
  margin-bottom: 10px;
}

.intake-paths {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--rule);
  overflow: hidden;
}

.intake-paths a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  background: var(--paper);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  transition: background .2s, color .2s, padding-left .2s;
}

.intake-paths a svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--grey);
  transition: transform .25s, color .2s;
}

.intake-paths a:hover,
.intake-paths a:focus-visible {
  background: var(--mist);
  color: var(--accent-ink);
  padding-left: 20px;
}

.intake-paths a:hover svg,
.intake-paths a:focus-visible svg {
  color: var(--accent-ink);
  transform: translateX(4px);
}

.intake-intro-cta {
  width: 100%;
  justify-content: center;
  margin-top: 22px;
}

/* ============================================================
   Dropdown — stacked layout
   ------------------------------------------------------------
   Same 1179px as the drawer above: wherever the menu is a drawer, the
   Initiatives disclosure inside it is an accordion.
   ============================================================ */
@media (max-width:1179px) {
  .nav-item {
    display: block;
    position: relative;
  }

  /* The caret sits at the right end of the menu row it belongs to. The link
     beside it is itself positioned, so the caret needs a z-index to be the
     thing a thumb actually hits. */
  .nav-caret {
    position: absolute;
    top: 0;
    right: calc(var(--gut) - 8px);
    z-index: 2;
    width: 44px;
    height: 53px;
    border-radius: 0;
  }

  .nav-caret svg {
    width: 17px;
    height: 17px;
  }

  .nav-item > a:not(.btn) {
    padding-right: calc(var(--gut) + 44px);
  }

  /* Accordion: in flow, no shadow, no float */
  .nav-drop {
    position: static;
    display: none;
    width: auto;
    max-width: none;
    padding: 6px var(--gut) 14px;
    border: 0;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
    background: var(--mist);
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav-drop::before,
  .nav-drop::after {
    display: none;
  }

  .nav-item.open .nav-drop {
    display: block;
  }

  .nav-drop-head {
    padding: 10px 0 8px;
  }

  .nav-drop a:not(.btn) {
    padding: 11px 12px;
    border-bottom: 0;
    border-left: 0;
    background: var(--paper);
  }

  .nav-drop-list {
    gap: 6px;
  }

  .nav-drop-list a::before {
    left: 0;
  }

  .nav-drop-all {
    margin-top: 10px;
    padding: 13px 12px !important;
    border-top: 0;
    border-radius: 12px;
    background: var(--paper);
  }
}

/* Not a nav rule — left on its own breakpoint. */
@media (max-width:760px) {
  .intake-meta strong {
    font-size: 17px;
  }
}

/* Nothing slides or fades for a visitor who asked for less motion — the
   panel simply appears and disappears. */
@media (prefers-reduced-motion:reduce) {
  .nav-drop {
    transform: none;
  }

  .nav-caret,
  .nav-drop-all svg,
  .intake-paths a svg {
    transition: none;
  }
}

/* ============================================================
   Counters — the band under the banner
   ------------------------------------------------------------
   Same navy as the hero, one shade deeper, with no rule between
   them: the banner does not end and a new section begin, the
   ground simply carries on and four numbers sit on it.

   The circuit board behind them is one SVG <pattern> tiled at a
   fixed 220×150, so the traces stay the same size on a phone as
   on a desktop instead of stretching with the viewport.

   Numbers come from data/stats.php.
   ============================================================ */
.counts {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--ink), #04203F);
  padding-block: clamp(40px, 6vw, 68px);
}

.counts-circuit {
  position: absolute;
  inset: 0;
  /* The board is texture, not information — it stays well under the
     numbers rather than competing with them for the eye. */
  opacity: .5;
}

/* Scoped inside <pattern> on purpose. The tile is painted onto one
   full-size <rect fill="url(#countsTrace)">, and a bare `rect` selector
   here would win over that presentation attribute — flooding the whole
   band with flat colour and hiding the board it was meant to draw. */
.counts-circuit pattern path {
  stroke: rgba(120, 190, 255, .28);
  stroke-width: 1;
}

.counts-circuit pattern circle {
  fill: rgba(120, 190, 255, .45);
}

.counts-circuit pattern rect {
  fill: rgba(120, 190, 255, .26);
}

/* A handful of junctions carry light, on long offset cycles so the
   board never reads as one blinking rhythm. */
.counts-node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--brand-sky);
  box-shadow: 0 0 12px 2px rgba(0, 158, 232, .8);
  animation: counts-node 4.5s ease-in-out var(--t) infinite;
}

@keyframes counts-node {

  0%,
  100% {
    opacity: .25;
    transform: scale(.8);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/* auto-fit rather than a fixed four, so adding or removing a row in
   data/stats.php needs no change here — the band re-flows on its own.

   140px is chosen against the narrow end, not the wide one. A 360px
   phone leaves 320px inside the gutters, which fits two 140px tracks
   and a 24px gap with room to spare; at 165px it did not, and the band
   fell to a single column of four stacked rows on most phones in use.
   Four across is unaffected — the empty tracks auto-fit creates on a
   desktop collapse, and the four real ones share the row equally. */
.counts-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(24px, 4vw, 48px);
}

.count-num {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(38px, 5.2vw, 62px);
  line-height: 1;
  letter-spacing: -.02em;
  /* Lifted blue through to the emblem's sky — the two tones on this
     navy that carry at display size. */
  background: linear-gradient(135deg, #6FBEFF 0%, #0170E4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* The gradient is decoration; if background-clip:text is not
     supported the text falls back to a solid tone rather than to
     nothing. */
  -webkit-text-fill-color: transparent;
}

@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .count-num {
    background: none;
    color: #6FBEFF;
    -webkit-text-fill-color: currentColor;
  }
}

/* Digits are tabular so the number does not jitter sideways as the
   count-up runs through 8s and 1s. */
.count-val {
  font-variant-numeric: tabular-nums;
}

.count-label {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

/* For a figure whose meaning is a list rather than a quantity — the three
   regions sit here in full, so the band never reduces them to "3". Quieter
   than the label above it and mixed-case, so it reads as the detail line it
   is rather than as a second heading. */
.count-note {
  margin-top: 7px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .45);
}

/* The suffix carries the same weight and size as the digits, as in the
   design. It is a separate element only so that .count-val holds nothing
   but the number for the count-up in main.js to rewrite. */

@media (prefers-reduced-motion:reduce) {
  .counts-node {
    animation: none;
    opacity: .7;
  }
}

/* ============================================================
   Page transition — the spectrum rail, taken full height
   ------------------------------------------------------------
   The seven-colour rail that sits under the header is the site's
   signature, so the transition is that rail grown to fill the
   screen rather than a spinner borrowed from somewhere else.

   It runs in two halves, because this is a set of real pages and
   not a single-page app:

     · leaving  — the seven columns rise from the bottom until
                  they cover the old page, then the browser
                  navigates behind them (assets/js/transition.js)
     · arriving — the new page is already covered when it paints,
                  holds long enough to read the mark, then the
                  columns sweep off the top

   The arriving half is pure CSS on a `forwards` fill, so it plays
   on first paint with no script involved and finishes correctly
   for a visitor with JavaScript off. Script is only needed for
   the leaving half, which has a navigation to hold back.

   Timing, matched in both files:
     cover   .44s + .022s per column   ·  navigate at 500ms
     reveal  .18s hold, then .62s + .025s per column
     the overlay takes itself out of the page at 1s
   ============================================================ */
.pt {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  /* Never in the way: the page underneath stays clickable and
     scrollable for the whole 800ms, and nothing here is announced. */
  pointer-events: none;
  animation: pt-retire .01s linear 1s forwards;
}

.pt-col {
  flex: 1;
  /* A little taller than the viewport, and the cover overshoots the top
     by the difference. The browser is sent to the next page at 500ms,
     while the closing ease still has ~70ms left to settle; without the
     overshoot that leaves a few pixels of the old page showing along
     the top edge at the exact moment of the handoff. */
  height: 104%;
  /* Covering at first paint — the reveal takes it up from here. */
  transform: translateY(0);
  animation: pt-reveal .62s cubic-bezier(.22, 1, .36, 1) var(--pt-d) forwards;
}

/* Each column carries one initiative, in rail order, deepening
   towards the floor so seven flat bands read as one surface. */
.pt-col:nth-child(1) {
  --pt-d: .18s;
  background: linear-gradient(180deg, var(--i-health), var(--i-health-ink));
}

.pt-col:nth-child(2) {
  --pt-d: .205s;
  background: linear-gradient(180deg, var(--i-climate), var(--i-climate-ink));
}

.pt-col:nth-child(3) {
  --pt-d: .23s;
  background: linear-gradient(180deg, var(--i-zero), var(--i-zero-ink));
}

.pt-col:nth-child(4) {
  --pt-d: .255s;
  background: linear-gradient(180deg, var(--i-talent), var(--i-talent-ink));
}

.pt-col:nth-child(5) {
  --pt-d: .28s;
  background: linear-gradient(180deg, var(--i-food), var(--i-food-ink));
}

.pt-col:nth-child(6) {
  --pt-d: .305s;
  background: linear-gradient(180deg, var(--i-cities), var(--i-cities-ink));
}

.pt-col:nth-child(7) {
  --pt-d: .33s;
  background: linear-gradient(180deg, var(--i-africa), var(--i-africa-ink));
}

.pt-mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.pt-mark span {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  padding: 12px;
  border-radius: 20px;
  background: var(--paper);
  /* A white bloom rather than a coloured one — the columns behind it
     are already six different hues, and any tint would fight one of them. */
  box-shadow: 0 0 44px rgba(255, 255, 255, .5), 0 14px 34px rgba(6, 37, 74, .22);
  animation: pt-mark-reveal .62s cubic-bezier(.22, 1, .36, 1) forwards;
}

.pt-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes pt-reveal {
  to {
    transform: translateY(-105%);
  }
}

/* The mark is already at full opacity on frame one. The page being left
   behind ended with it sitting there at rest, so anything that faded it
   in here would read as a blink across the navigation — the one moment
   the whole transition exists to hide. It only settles the last of its
   scale, then leaves with the columns. */
@keyframes pt-mark-reveal {
  0% {
    opacity: 1;
    transform: scale(.98);
  }

  34% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.06);
  }
}

/* Once the columns are off the top the overlay has no further part
   to play, so it stops compositing rather than sitting there fixed. */
@keyframes pt-retire {
  to {
    visibility: hidden;
  }
}

/* ---- Leaving: the same columns, run the other way -------------
   `animation: none` on the container first, because the reveal's
   `forwards` fill would otherwise keep winning over `visibility`. */
.pt.is-leaving {
  animation: none;
  visibility: visible;
  /* Once the navigation is committed the old page is on its way out,
     so the curtain stops letting clicks reach it. */
  pointer-events: auto;
}

.pt.is-leaving .pt-col {
  transform: translateY(100%);
  animation: pt-cover .44s cubic-bezier(.22, 1, .36, 1) var(--pt-d) forwards;
}

.pt.is-leaving .pt-col:nth-child(1) {
  --pt-d: 0s;
}

.pt.is-leaving .pt-col:nth-child(2) {
  --pt-d: .022s;
}

.pt.is-leaving .pt-col:nth-child(3) {
  --pt-d: .044s;
}

.pt.is-leaving .pt-col:nth-child(4) {
  --pt-d: .066s;
}

.pt.is-leaving .pt-col:nth-child(5) {
  --pt-d: .088s;
}

.pt.is-leaving .pt-col:nth-child(6) {
  --pt-d: .11s;
}

.pt.is-leaving .pt-col:nth-child(7) {
  --pt-d: .132s;
}

/* The mark comes up with the columns and stays — it is still on
   screen at the moment the next page replaces this one, which is
   what makes the two halves read as one movement. */
.pt.is-leaving .pt-mark span {
  animation: pt-mark-cover .5s cubic-bezier(.22, 1, .36, 1) forwards;
}

@keyframes pt-cover {
  to {
    transform: translateY(-2%);
  }
}

@keyframes pt-mark-cover {
  0% {
    opacity: 0;
    transform: scale(.9);
  }

  62% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* A visitor who asked for less motion gets no curtain at all, in
   either direction — transition.js reads the same query and lets
   every link navigate straight through. */
@media (prefers-reduced-motion:reduce) {
  .pt {
    display: none;
  }
}
/* ============================================================
   SUPPORT — the donation pill and the 501(c)(3) mark
   ============================================================ */

/* The icon inside a pill. Sized off the label so it tracks the two
   font sizes .btn is set at (13px in the page, 12px in the wide bar). */
.btn-ico {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

/* .btn-donate carries no colour of its own. The donation button wears the same
   solid ink every other button on the site wears; it is told apart by being
   the filled one next to an outlined "Bring us an initiative", not by a paint
   job of its own.

   An earlier draft gave it the brand sweep. On a bar that already carries the
   spectrum rail above it and the seven-colour logo beside it, a third piece of
   rainbow was one too many, and the client said so. The class is kept for the
   two structural things below.

   Do not reintroduce a gradient here without also checking the footer button,
   which is deliberately the same solid ink. */

/* In the drawer the pill is full width and the full 43-character name has to
   wrap rather than push the menu sideways. */
.nav-links .btn-donate {
  text-align: center;
  line-height: 1.35;
}

/* ---- The 501(c)(3) mark ------------------------------------------------
   Drawn in includes/badge-501c3.php. There is no official IRS seal for the
   status, so this is the site's own mark, built from the same sweep as
   everything else. */
.badge-501c3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}

/* The seal carries CERTIFIED and NONPROFIT round its edge at 17px in a 200px
   viewBox — roughly 6px once drawn. It needs to be printed large enough for
   that to survive, which is why this is 78px and not the 52px the first,
   plainer mark got away with. */
.badge-501c3-seal {
  width: 78px;
  height: 78px;
  flex: none;
}

/* A serif, and the only one on the site. The seal is quoting a form — a
   struck certification mark — and Archivo cannot make that quote. */
.badge-501c3-arc,
.badge-501c3-num {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  fill: var(--ink);
}

.badge-501c3-arc-top {
  font-size: 17px;
  letter-spacing: 3.2px;
}

.badge-501c3-arc-bot {
  font-size: 15px;
  letter-spacing: 3px;
}

.badge-501c3-num {
  font-size: 38px;
}

.badge-501c3-txt {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.badge-501c3-sub {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.badge-501c3-ein {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .06em;
}

/* On the navy footer. The seal itself needs no change — its disc is already
   white and its type sits on that disc — but the line beside it does. */
.badge-501c3--on-dark .badge-501c3-sub {
  color: rgba(255, 255, 255, .6);
}

@media (max-width:760px) {
  .badge-501c3 {
    margin-top: 18px;
  }
}

/* ---- The footer support block -------------------------------------------
   Sits between the four link columns and the base line, above the rule that
   already separates them. The name in full on the left of the button, the
   501(c)(3) mark under it, so a visitor reads the ask and the standing that
   backs it in one pass. */
.foot-support {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}

.foot-support-txt p {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .6);
  max-width: 46ch;
}

.foot-support-act {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* The full name is long enough to wrap on a phone, so the pill is centred and
   given a line height that survives two lines.

   White on ink, which is the same solid pill the dark hero already uses — not
   a new colour, just the one this ground calls for. The footer's own
   background IS var(--ink), so the plain .btn treatment renders a navy button
   on a navy field and disappears completely. It did exactly that once.

   Selected as `.foot .foot-donate` and not `.foot-donate`, because `.foot a`
   above sets every footer link to near-white and would otherwise outrank a
   single class — which paints white type onto the white pill. That happened
   too. Two classes beat one class plus one element, so this holds. */
.foot .foot-donate {
  text-align: center;
  line-height: 1.35;
  background: #fff;
  color: var(--ink);
}

/* .btn fades the dark --accent-grad in on hover, which would leave ink type on
   an ink-to-red ground. The label goes white to meet it. */
.foot .foot-donate:hover {
  color: #fff;
}

/* The base line already draws its own rule; two in a row would read as a
   mistake now that the support block carries one. */
.foot-support + .foot-base {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 0;
}

@media (max-width:900px) {
  .foot-support {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

/* ============================================================
   GIVING DIALOG
   The popup behind every "Support TGIF" pill. Markup in
   includes/donate-modal.php, behaviour in the last block of
   assets/js/main.js.

   Two states live on the root element as data-mode="once" and
   data-mode="recurring". Everything that differs between the
   two schedules - the filled half of the segmented control, the
   cadence word, the amount ladder, the button label - is driven
   from that one attribute, so the swap is a single write.
   ============================================================ */
.donate {
  position: fixed;
  inset: 0;
  /* Under .pt (9000) on purpose: navigating away should draw the
     page curtain over the dialog, not under it. Above everything
     else, including the sticky bar (60) and the skip link (200). */
  z-index: 800;
  display: grid;
  place-items: center;
  padding: clamp(12px, 4vw, 32px);
}

.donate[hidden] {
  display: none;
}

.donate-scrim {
  position: absolute;
  inset: 0;
  background: rgba(6, 37, 74, .55);
  backdrop-filter: blur(3px);
  animation: donate-fade .25s var(--ease-out) both;
}

/* The card is a flex column so the action strip can be held out of
   the scroll: on a short screen the body scrolls and "Donate" stays
   where the thumb left it. overflow:hidden keeps the corner radius
   over both the strip and the first thing the body scrolls past. */
.donate-card {
  position: relative;
  display: flex;
  width: min(460px, 100%);
  max-height: 100%;
  background: var(--paper);
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 30px 80px -20px rgba(6, 37, 74, .45),
    0 2px 10px rgba(6, 37, 74, .12);
  animation: donate-rise .35s var(--ease-out) both;
}

.donate-form {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
}

.donate-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: clamp(24px, 5vw, 30px);
  padding-top: clamp(28px, 6vw, 34px);
}

.donate-x {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--grey);
  cursor: pointer;
  transition: background .2s, color .2s;
}

.donate-x svg {
  width: 17px;
  height: 17px;
}

.donate-x:hover {
  background: var(--mist);
  color: var(--ink);
}

.donate-title {
  margin: 0 0 22px;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 106%;
  font-size: clamp(24px, 5.6vw, 30px);
  line-height: 1.15;
  letter-spacing: -.015em;
  text-align: center;
  color: var(--ink);
}

/* ---- The two schedules ----
   One filled pill sits behind both halves and slides between them,
   so switching costs a transform rather than a repaint of two
   backgrounds. The halves themselves only change colour. */
.donate-seg {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 16px;
  background: #F1F2F5;
  border-radius: 999px;
}

.donate-seg-glide {
  position: absolute;
  inset: 0 50% 0 0;
  border-radius: 999px;
  background: var(--brand-red);
  transition: transform .3s var(--ease-out);
}

.donate[data-mode="recurring"] .donate-seg-glide {
  transform: translateX(100%);
}

.donate-seg-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 10px;
  border: 0;
  border-radius: 999px;
  background: none;
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 106%;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  transition: color .25s;
}

.donate-seg-btn.is-on {
  color: #fff;
}

/* Red on the resting half, white once the pill is under it. */
.donate-seg-heart {
  width: 15px;
  height: 15px;
  color: var(--brand-red);
  transition: color .25s;
}

.donate-seg-btn.is-on .donate-seg-heart {
  color: #fff;
}

.donate-panel:focus {
  outline: none;
}

.donate-lede {
  margin: 0 0 18px;
  text-align: center;
  font-size: 15px;
  color: var(--ink);
}

.donate-lede strong {
  font-weight: 700;
}

/* ---- Frequency, recurring only ---- */
.donate-freq {
  margin-bottom: 14px;
}

.donate-freq[hidden] {
  display: none;
}

.donate-freq-lab {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  color: var(--ink-soft);
}

.donate-freq-field {
  position: relative;
}

.donate-freq-sel {
  width: 100%;
  padding: 15px 46px 15px 16px;
  border: 1.5px solid var(--rule);
  border-radius: 12px;
  background: var(--paper);
  font-family: var(--body);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  transition: border-color .2s;
}

.donate-freq-sel:hover,
.donate-freq-sel:focus {
  border-color: var(--ink);
}

.donate-freq-field svg {
  position: absolute;
  top: 50%;
  right: 15px;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  color: var(--ink);
  pointer-events: none;
}

/* ---- The amount ladder ----
   Real radios, visually replaced. The input keeps its own focus ring
   through :has() on the label, so arrowing through the group shows
   where you are without the chips being re-implemented as buttons. */
.donate-amounts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.donate-amounts[hidden] {
  display: none;
}

.donate-chip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 17px 10px;
  border: 1.5px solid var(--rule);
  border-radius: 12px;
  background: var(--paper);
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
}

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

.donate-chip span {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 106%;
  font-size: 17px;
  color: var(--ink);
  transition: color .2s;
}

.donate-chip:hover {
  border-color: var(--brand-red);
  transform: translateY(-1px);
}

.donate-chip.is-on {
  background: var(--brand-red);
  border-color: var(--brand-red);
}

.donate-chip.is-on span {
  color: #fff;
}

.donate-chip:has(input:focus-visible) {
  outline: 3px solid var(--accent-ink);
  outline-offset: 3px;
}

/* ---- The figure ----
   Chips write into this field and this field is what is submitted,
   so a typed amount and a tapped one travel the same path. */
.donate-sum {
  margin-bottom: 14px;
  padding: 13px 16px 10px;
  border: 1.5px solid var(--rule);
  border-radius: 12px;
  transition: border-color .2s;
}

.donate-sum:focus-within {
  border-color: var(--ink);
}

.donate-sum-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.donate-sum-cur {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 106%;
  font-size: 17px;
  color: var(--ink);
}

.donate-sum-in {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 106%;
  font-size: 26px;
  text-align: right;
  color: var(--ink);
}

/* The box already shows focus on its own border, and a ring inside
   a ring on the same rectangle reads as a mistake. */
.donate-sum-in:focus-visible {
  outline: none;
}

.donate-sum-ccy {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 9px 0 0;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 106%;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--grey);
}

.donate-flag {
  flex: none;
  width: 17px;
  height: 17px;
}

/* ---- Dedication ---- */
.donate-ded {
  border: 1.5px solid var(--rule);
  border-radius: 12px;
}

.donate-ded-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 17px 14px;
  border: 0;
  border-radius: 11px;
  background: none;
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 106%;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
}

.donate-ded-btn svg {
  width: 20px;
  height: 20px;
  transition: transform .25s var(--ease-out);
}

.donate-ded-btn[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.donate-ded-panel {
  padding: 16px;
  border-top: 1px solid var(--rule);
}

.donate-ded-panel[hidden] {
  display: none;
}

.donate-ded-kind {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

.donate-ded-opt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px 8px;
  border: 1.5px solid var(--rule);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}

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

.donate-ded-opt:hover {
  border-color: var(--brand-red);
}

.donate-ded-opt.is-on {
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: #fff;
}

.donate-ded-opt:has(input:focus-visible) {
  outline: 3px solid var(--accent-ink);
  outline-offset: 3px;
}

.donate-ded-lab {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  color: var(--ink-soft);
}

.donate-ded-lab span {
  color: var(--grey);
}

.donate-ded-in {
  width: 100%;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1.5px solid var(--rule);
  border-radius: 10px;
  background: var(--paper);
  font-family: var(--body);
  font-size: 15px;
  color: var(--ink);
  transition: border-color .2s;
}

.donate-ded-in:hover,
.donate-ded-in:focus {
  border-color: var(--ink);
}

.donate-ded-note {
  margin-bottom: 0;
  resize: vertical;
}

/* ---- The action ---- */
.donate-foot {
  flex: none;
  padding: 20px clamp(24px, 5vw, 30px) clamp(24px, 5vw, 28px);
  border-top: 1px solid var(--rule);
}

.donate-go {
  width: 100%;
  padding: 20px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 106%;
  font-size: 18px;
  letter-spacing: -.005em;
  color: #fff;
  cursor: pointer;
  transition: background .25s, transform .2s;
}

.donate-go:hover {
  background: var(--accent-ink);
  transform: translateY(-2px);
}

.donate-go:active {
  transform: translateY(0);
}

/* Set on <html> while the dialog is up, with the scrollbar's width
   handed back as padding so the page behind does not jump sideways. */
.donate-open {
  overflow: hidden;
}

@keyframes donate-fade {
  from {
    opacity: 0
  }
}

@keyframes donate-rise {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.97)
  }
}

@media (prefers-reduced-motion:reduce) {

  .donate-scrim,
  .donate-card {
    animation: none;
  }

  .donate-seg-glide,
  .donate-chip,
  .donate-go,
  .donate-ded-btn svg {
    transition: none;
  }

  .donate-chip:hover,
  .donate-go:hover {
    transform: none;
  }
}

/* On a phone the card takes the full width it is given and loses the
   bottom corners, so it reads as a sheet rather than a small box
   floating over a scrim it cannot fill. */
@media (max-width:520px) {
  .donate {
    padding: 0;
    place-items: end stretch;
  }

  .donate-card {
    width: 100%;
    max-height: 92%;
    border-radius: 22px 22px 0 0;
    animation-name: donate-sheet;
  }

  @keyframes donate-sheet {
    from {
      transform: translateY(100%)
    }
  }
}

/* ============================================================
   GIVING PAGE — donate.php
   The same dialog markup, rendered as part of a page instead of
   over one. Additive only: every rule below is either a new
   class or scoped to .donate--page, so the dialog itself is
   untouched.
   ============================================================ */
.donate--page {
  position: static;
  display: block;
  z-index: auto;
  padding: 0;
  place-items: normal;
}

.donate--page .donate-card {
  width: min(520px, 100%);
  max-height: none;
  margin: 0 auto;
  border-radius: 24px;
  animation: none;
  box-shadow:
    0 20px 60px -24px rgba(6, 37, 74, .28),
    0 1px 4px rgba(6, 37, 74, .08);
}

/* The dialog scrolls its own body against a fixed card. On a page the
   page itself scrolls, so the inner scroll container has to let go. */
.donate--page .donate-body {
  overflow: visible;
}

.give-wrap {
  margin-top: clamp(28px, 4vw, 46px);
}

.give-after {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(26px, 4vw, 40px);
}

/* One sentence back from the handler: an amount that would not parse, an
   expired token, a Stripe call that did not go through. Never a stack trace
   and never a Stripe error code — those go to the log. */
.give-alert {
  max-width: 640px;
  margin: 0 auto clamp(18px, 3vw, 26px);
  padding: 16px 20px;
  border: 1px solid rgba(176, 42, 42, .28);
  border-left: 3px solid #B02A2A;
  border-radius: 12px;
  background: rgba(176, 42, 42, .05);
  font-size: 15px;
  line-height: 1.6;
  color: #7A1D1D;
}

.give-alert a {
  color: inherit;
  text-decoration: underline;
}

/* Under the Donate button. Says where the card details are actually
   typed, which is the one thing a first-time donor wants to know. */
.donate-secure {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted, #717171);
}

.donate-secure svg {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 1px;
}

/* Test keys. Loud on purpose: nobody should mistake a test transaction
   for a real gift, and nobody should ship to production still seeing it. */
.donate-testnote {
  margin: 12px 0 0;
  padding: 9px 12px;
  border: 1px dashed rgba(180, 120, 20, .45);
  border-radius: 9px;
  background: rgba(214, 158, 46, .09);
  font-size: 12.5px;
  line-height: 1.5;
  color: #8A6410;
  text-align: center;
}

/* The no-JavaScript schedule controls on donate.php. The segmented
   control above them is a tablist driven by script, so without script
   these plain radios are the only way to choose a recurring gift. The
   browser removes the whole block the moment scripting is on. */
.donate-nojs {
  margin: 18px 0 4px;
  padding: 16px;
  border: 1px solid var(--rule, #DCE4F0);
  border-radius: 12px;
  background: #FBFCFE;
}

.donate-nojs-set {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
}

.donate-nojs-set:last-child {
  margin-bottom: 0;
}

.donate-nojs-set legend {
  padding: 0;
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted, #717171);
}

.donate-nojs-set label {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  margin: 0 16px 6px 0;
  font-size: 14.5px;
  line-height: 1.4;
  cursor: pointer;
}

.donate-nojs-note {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted, #717171);
}

/* While the form is being handed to Stripe. */
.donate-go[disabled] {
  opacity: .65;
  cursor: progress;
  transform: none;
}

/* The phone-sized sheet treatment is for the dialog only — on a page
   the card is just a card, at every width. */
@media (max-width:520px) {
  .donate--page {
    padding: 0;
    place-items: normal;
  }

  .donate--page .donate-card {
    width: 100%;
    max-height: none;
    border-radius: 18px;
    animation: none;
  }
}

/* ---- The payment step ----
   Stripe's embedded form, mounted on this page in place of the amount
   ladder. The iframe sizes itself; everything here is the frame
   around it. */
.donate-pay[hidden],
.donate-step[hidden],
.donate-error[hidden] {
  display: none;
}

.donate-back {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  margin: 0 0 14px;
  padding: 7px 13px 7px 9px;
  border: 1px solid var(--rule, #DCE4F0);
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #06254A);
  cursor: pointer;
  transition: background .2s, border-color .2s;
}

.donate-back:hover {
  background: #F2F6FC;
  border-color: #C3D2E8;
}

.donate-back svg {
  width: 15px;
  height: 15px;
}

/* What they are about to give, restated above Stripe's form so the
   figure is never off-screen at the moment of paying. */
.donate-pay-sum {
  margin: 0 0 16px;
  font-family: var(--display, inherit);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ink, #06254A);
}

/* Stripe injects its iframe here. min-height stops the card collapsing
   to nothing in the moment between mounting and the frame reporting
   its own height. */
#donateCheckout {
  min-height: 320px;
}

.donate-error {
  margin: 0 0 16px;
  padding: 13px 15px;
  border: 1px solid rgba(176, 42, 42, .28);
  border-left: 3px solid #B02A2A;
  border-radius: 10px;
  background: rgba(176, 42, 42, .05);
  font-size: 14px;
  line-height: 1.55;
  color: #7A1D1D;
}

/* Stripe's form needs more room than a $50 chip ladder does, so the
   dialog widens once the payment step is up. */
.donate:has(.donate-pay:not([hidden])) .donate-card {
  width: min(560px, 100%);
}

@media (prefers-reduced-motion:reduce) {
  .donate-back {
    transition: none;
  }
}