/* ============================================================================
   HUMANS OF PURPOSE — ACADEMY ONE-PAGER
   styles.css
   ----------------------------------------------------------------------------
   This is the ONLY stylesheet. No build step, no framework — plain CSS.
   Brand tokens and component patterns are mirrored from the live HoP 2026
   WordPress theme (hop-2026/assets/css/main.css) so this page matches the
   rest of the brand.

   HOW THIS FILE IS ORGANISED (top to bottom):
     1. Fonts          — the two brand typefaces, self-hosted
     2. Tokens         — every colour, size and spacing value lives here
     3. Base           — sensible defaults for the whole page
     4. Layout         — the page container + light/dark "section" backgrounds
     5. Type           — heading + body text styles
     6. Buttons        — the call-to-action buttons
     7. Sections       — styles for each part of the page, in page order
     8. Quick Exit     — the safety button (see also quick-exit.js)
     9. Responsive     — phone + tablet adjustments
   ============================================================================ */


/* ============================================================================
   1. FONTS — Fraunces (headings) + Space Grotesk (everything else)
   Both are open-source. Files live in /fonts. Don't rename them.
   ============================================================================ */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces-VariableFont_SOFTWONKopszwght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces-Italic-VariableFont_SOFTWONKopszwght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-VariableFont_wght.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}


/* ============================================================================
   2. TOKENS — change a value here and it updates everywhere on the page.
   (e.g. change --hop-primrose to recolour every pink accent at once.)
   ============================================================================ */
:root {
  /* -- Brand colours (locked — these are the official HoP values) -- */
  --hop-glacier:    #7cd4d0;   /* Agency teal (used only for focus rings here) */
  --hop-primrose:   #febfc1;   /* ACADEMY accent — soft pink. This is "our" colour. */
  --hop-primrose-700:#c98082;  /* darker pink for small text on light backgrounds */
  --hop-ink:        #111111;   /* near-black text + dark surfaces */
  --hop-paper:      #f5f1ea;   /* warm off-white — the main background */
  --hop-paper-edge: #ebe5d8;   /* a hair darker than paper, for hairlines/hovers */
  --hop-night:      #15181c;   /* deep charcoal for dark sections */

  --rule:           rgba(17,17,17,.14);   /* hairline divider on light */
  --rule-strong:    rgba(17,17,17,.32);
  --mute:           rgba(17,17,17,.55);   /* muted text on light */

  /* Text/rules when sitting on a DARK (ink/night) background */
  --fg-on-ink:        #f5f1ea;
  --fg-on-ink-mute:   rgba(245,241,234,.62);
  --fg-on-ink-soft:   rgba(245,241,234,.78);
  --rule-on-ink:      rgba(245,241,234,.18);

  /* -- Fonts -- */
  --font-display: "Fraunces", "Times New Roman", Georgia, serif;
  --font-ui:      "Space Grotesk", "Helvetica Neue", Arial, sans-serif;

  /* -- Text sizes (clamp() = fluid: scales with screen width, within limits) -- */
  --t-h0:   clamp(40px, 6vw, 88px);    /* the big hero headline */
  --t-h1:   clamp(40px, 5.2vw, 80px);
  --t-h2:   clamp(32px, 3.6vw, 56px);  /* section headlines */
  --t-h3:   clamp(22px, 2.4vw, 32px);  /* tile / card titles */
  --t-pull: clamp(26px, 3vw, 44px);    /* the big pull-quote */
  --t-body: 17px;
  --t-small:14px;
  --t-eyebrow: 12px;                   /* the little ALL-CAPS labels above headings */

  /* -- Spacing scale (use these instead of random pixel values) -- */
  --space-2: 8px;   --space-3: 12px;  --space-4: 16px;  --space-5: 24px;
  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;  --space-9: 96px;
  --space-10:128px;

  /* -- Shape + motion -- */
  --radius-control: 8px;               /* buttons + inputs are gently rounded */
  --radius-card: 28px;                 /* soft, generous rounding for the tiles */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --dur-fast:  140ms;
  --dur-base:  260ms;

  /* -- Page rhythm -- */
  --pad-x:     80px;                   /* left/right page margin on desktop */
  --section-y: clamp(64px, 9vw, 128px);/* top/bottom padding inside each section */
  --header-h:  68px;                   /* height of the sticky header */
}


/* ============================================================================
   3. BASE — defaults for the whole document
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--hop-paper);
  color: var(--hop-ink);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.7;
  letter-spacing: -.003em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a   { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--hop-primrose); color: var(--hop-ink); }

/* Visible keyboard focus everywhere (accessibility — do not remove) */
:focus-visible { outline: 2px solid var(--hop-glacier); outline-offset: 3px; }

/* Anchored sections jump to just below the sticky header, not under it. */
section[id], header[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

/* Screen-reader-only text: invisible on screen, still read aloud. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}


/* ============================================================================
   4. LAYOUT — page container + section backgrounds
   ============================================================================ */

/* .wrap centres content and keeps it off the screen edges. */
.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

/* Every section gets generous vertical breathing room. */
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }

/* The page alternates light ("paper") and dark ("ink") bands. */
.section--paper { background: var(--hop-paper); color: var(--hop-ink); }
.section--ink   { background: var(--hop-night); color: var(--fg-on-ink); }

/* A hairline at the top of a paper section, to separate two paper bands. */
.section--hairline { border-top: 1px solid var(--rule); }

/* A thin divider line. */
.rule      { height: 1px; background: var(--rule); border: 0; margin: 0; }
.rule--ink { background: var(--rule-on-ink); }


/* ============================================================================
   5. TYPE — headings, eyebrows, body
   Headings use Fraunces; the "opsz" setting tunes the serif's optical size.
   ============================================================================ */
.t-h0 {
  font-family: var(--font-display); font-weight: 800;
  font-variation-settings: "opsz" 144;
  font-size: var(--t-h0); line-height: .94; letter-spacing: -.02em; margin: 0;
}
.t-h1 {
  font-family: var(--font-display); font-weight: 800;
  font-variation-settings: "opsz" 96;
  font-size: var(--t-h1); line-height: .98; letter-spacing: -.015em; margin: 0;
}
.t-h2 {
  font-family: var(--font-display); font-weight: 700;
  font-variation-settings: "opsz" 48;
  font-size: var(--t-h2); line-height: 1.02; letter-spacing: -.01em; margin: 0;
}
.t-h3 {
  font-family: var(--font-display); font-weight: 600;
  font-variation-settings: "opsz" 32;
  font-size: var(--t-h3); line-height: 1.1; letter-spacing: -.005em; margin: 0;
}

/* The little ALL-CAPS label that sits above a headline. */
.eyebrow {
  font-family: var(--font-ui); font-weight: 700;
  font-size: var(--t-eyebrow); text-transform: uppercase;
  letter-spacing: .18em; line-height: 1.2; margin: 0 0 var(--space-4);
  color: var(--hop-primrose-700);
}
.section--ink .eyebrow { color: var(--hop-primrose); }

/* Standfirst = the slightly larger intro paragraph under a headline. */
.standfirst { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.55; max-width: 60ch; }

/* A lead measure so body paragraphs don't run too wide to read. */
.measure { max-width: 64ch; }


/* ============================================================================
   6. BUTTONS — the call-to-action buttons (mirrors the brand .btn)
   Usage: <a class="btn">Apply now <span class="arrow">→</span></a>
   Variants: .btn--ink (dark), .btn--line (outline), .btn--paper/.btn--ghost (on dark)
   ============================================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-ui); font-weight: 600;
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  padding: 16px 22px 15px;
  border: 1px solid var(--hop-ink);
  border-radius: var(--radius-control);
  background: var(--hop-ink); color: var(--hop-paper);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.btn:hover { background: #2a2a2a; border-color: #2a2a2a; }
.btn--ink  { background: var(--hop-ink); color: var(--hop-paper); border-color: var(--hop-ink); }

/* Outline button for light backgrounds — fills ink on hover. */
.btn--line  { background: transparent; color: var(--hop-ink); border-color: var(--rule-strong); }
.btn--line:hover { background: var(--hop-ink); color: var(--hop-paper); border-color: var(--hop-ink); }

/* Solid paper + ghost outline — for use ON dark (ink) sections. */
.btn--paper { background: var(--hop-paper); color: var(--hop-ink); border-color: var(--hop-paper); }
.btn--paper:hover { background: transparent; color: var(--hop-paper); }
.btn--ghost { background: transparent; color: var(--hop-paper); border-color: var(--hop-paper); }
.btn--ghost:hover { background: var(--hop-paper); color: var(--hop-ink); }

/* The arrow nudges right on hover. */
.btn .arrow {
  font-family: var(--font-display); font-weight: 400; font-size: 16px;
  letter-spacing: 0; margin-top: -1px;
  transition: transform var(--dur-fast) var(--ease);
}
.btn:hover .arrow { transform: translateX(4px); }

/* A group of buttons sitting side by side. */
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }

/* A quieter, underlined text link (e.g. "Register here"). */
.quiet-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-weight: 600; font-size: 13px;
  letter-spacing: .04em;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.quiet-link .arrow { transition: transform var(--dur-fast) var(--ease); }
.quiet-link:hover .arrow { transform: translateX(4px); }


/* ============================================================================
   7. SECTIONS — in the order they appear on the page.
   ============================================================================ */

/* ---- STICKY HEADER (wordmark + jump-menu + Donate) --------------------- */
/* Fixed across the top. Transparent (white text) over the hero photo; gains a
   paper background + ink text once the page scrolls (reveal.js toggles
   html.is-scrolled). The right side is padded to leave the very top-right
   corner clear for the fixed Quick Exit button. */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  transition: background var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.site-header__inner {
  max-width: 1280px; margin: 0 auto;
  min-height: var(--header-h);
  display: flex; align-items: center; gap: var(--space-6);
  padding: 10px var(--pad-x);
  padding-right: 168px;            /* keep clear of the Quick Exit button */
}
.wordmark { display: block; line-height: 0; }
.wordmark__img { display: block; height: 40px; width: auto; }
.wordmark__img--ink { display: none; }   /* the black version shows only once scrolled */
.site-nav { display: flex; gap: var(--space-5); margin-left: auto; flex-wrap: wrap; }
.site-nav a { font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--fg-on-ink-soft); }
.site-nav a:hover { color: var(--fg-on-ink); }
.site-header__donate { padding: 11px 16px 10px; font-size: 11px; }
/* Once scrolled, the bar turns to paper so it stays readable over content. */
.is-scrolled .site-header { background: var(--hop-paper); box-shadow: 0 1px 0 var(--rule); }
.is-scrolled .wordmark__img--paper { display: none; }   /* swap white -> black on scroll */
.is-scrolled .wordmark__img--ink   { display: block; }
.is-scrolled .site-nav a { color: var(--mute); }
.is-scrolled .site-nav a:hover { color: var(--hop-ink); }

/* ---- 1. HERO / LANDING -------------------------------------------------- */
/* Full-bleed photo with a dark scrim, headline + buttons on top, and the
   floating "pink woman" cut-out bottom-right. */
.banner {
  position: relative;
  min-height: 92vh;
  display: flex; align-items: flex-end;
  color: var(--fg-on-ink);
  overflow: hidden;
}
.banner__img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.banner__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(rgba(17,17,17,.22), rgba(17,17,17,.22)),
    linear-gradient(to top,
              rgba(17,17,17,.80) 0%, rgba(17,17,17,.45) 40%, rgba(17,17,17,.22) 100%);
}
/* The pink-woman cut-out: floats bottom-right, bleeds off the edge, carries
   the floral brand thread. Sits above the scrim so it stays vivid; the hero
   text sits above it (and is left-aligned, so they don't fight). */
.banner__figure {
  position: absolute; z-index: 2; bottom: 0;
  right: clamp(-30px, 1vw, 70px);
  height: min(82%, 720px); width: auto;
  pointer-events: none;
  filter: drop-shadow(0 10px 40px rgba(0,0,0,.25));
}
.banner__inner { position: relative; z-index: 3; padding-bottom: var(--space-9); padding-top: calc(var(--header-h) + 18vh); }
.banner__headline { max-width: 22ch; text-wrap: balance; margin-bottom: var(--space-5); }
.banner__sub { max-width: 46ch; color: var(--fg-on-ink-soft); margin-bottom: var(--space-4); }
/* The "Join or refer a client here" line sits just under the intro and reads
   in the same treatment as the standfirst above it. */
.banner__refer { margin: 0 0 var(--space-7);
                 font-size: clamp(18px, 1.6vw, 22px); line-height: 1.55;
                 color: var(--fg-on-ink-soft); }

/* Accreditation marks — a small trust row. Reused on the hero + footer. */
.trust-marks { display: flex; align-items: center; flex-wrap: wrap;
               gap: clamp(20px, 3vw, 36px); }
.trust-mark  { width: auto; }                 /* height comes from the height="" attr */
.trust-marks--banner { margin-top: var(--space-7); }

/* ---- Full-bleed photo band (reusable) ---------------------------------
   Add .section--photo to any dark (.section--ink) section, then drop in a
   .section-photo <img> + a .section-photo__scrim before the content. The
   scrim darkens the photo so white text stays readable on top. Used by the
   Theory of Change section (5). */
.section--photo { position: relative; overflow: hidden; }
.section-photo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.section-photo__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom,
              rgba(21,24,28,.72) 0%, rgba(21,24,28,.82) 55%, rgba(21,24,28,.92) 100%);
}
/* Lift the section's content above the photo + scrim. */
.section--photo .wrap { position: relative; z-index: 2; }

/* ---- 2. RE-BUILDING LIVES (mission + pillars, on paper) --------------- */
.why__content { display: grid; grid-template-columns: 1.1fr .9fr;
                gap: clamp(var(--space-7), 6vw, var(--space-10));
                align-items: center; }
.mission__lead { font-size: clamp(20px, 2.1vw, 28px); line-height: 1.42;
                 font-family: var(--font-display); font-weight: 400;
                 font-variation-settings: "opsz" 40; max-width: none; margin: 0; }
.pillars { display: grid; grid-template-columns: 1fr; gap: var(--space-7); }
.pillar__title { font-size: 16px; font-weight: 700; letter-spacing: .02em;
                 margin: 0 0 var(--space-3); }
.pillar__body  { font-size: var(--t-small); color: var(--mute); margin: 0; }
/* (If the pillars ever sit on a dark band again, lift the muted text back up.) */
.section--ink .pillar__body { color: var(--fg-on-ink-mute); }

/* ---- 3. HUB + PROGRAMS -------------------------------------------------- */
/* The free-to-apply call. A confident, centred pill — inviting, not a wall of
   pink. Auto-width (fit-content + margin auto) so it reads as a button, and
   sized to sit comfortably above the body copy rather than shout over it. */
.apply-band {
  display: flex; align-items: center; justify-content: center; gap: var(--space-3);
  width: fit-content; max-width: 100%;
  margin: var(--space-7) auto;
  padding: 16px clamp(28px, 3.5vw, 40px);
  background: var(--hop-primrose); color: var(--hop-ink);
  border-radius: 999px;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(18px, 1.8vw, 22px); line-height: 1.1;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.apply-band:hover { background: var(--hop-primrose-700); color: var(--hop-paper); }
.apply-band .arrow { font-family: var(--font-display); font-size: 1.05em; flex: none;
                     transition: transform var(--dur-fast) var(--ease); }
.apply-band:hover .arrow { transform: translateX(4px); }

/* The Hub + programmes — native <details> accordion (no JavaScript). */
.accordion { margin-top: var(--space-8); border-top: 1px solid var(--rule); }
.acc { border-bottom: 1px solid var(--rule); }
.acc__summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(18px, 2vw, 24px);
}
.acc__summary::-webkit-details-marker { display: none; }
.acc__icon { position: relative; width: 18px; height: 18px; flex: none; }
.acc__icon::before, .acc__icon::after {
  content: ""; position: absolute; background: var(--hop-primrose-700);
  transition: opacity var(--dur-fast) var(--ease);
}
.acc__icon::before { top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); } /* — */
.acc__icon::after  { left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); } /* | */
.acc[open] .acc__icon::after { opacity: 0; }   /* plus becomes minus when open */
.acc__body { padding: 0 0 var(--space-5); max-width: 60ch; }
.acc__body p { margin: 0 0 var(--space-4); color: var(--mute); font-size: 16px; line-height: 1.6; }
.acc__body .quiet-link { color: var(--hop-primrose-700); }
/* The programmes section sits on a dark (ink) band — lift the hairlines, the
   +/- icon and the body text so they read on the dark background. */
.section--ink .accordion { border-top-color: var(--rule-on-ink); }
.section--ink .acc { border-bottom-color: var(--rule-on-ink); }
.section--ink .acc__icon::before,
.section--ink .acc__icon::after { background: var(--hop-primrose); }
.section--ink .acc__body p { color: var(--fg-on-ink-soft); }
.section--ink .acc__body .quiet-link { color: var(--hop-primrose); }

/* ---- 4. WHAT YOU'LL LEARN (tiles) -------------------------------------- */
.tiles {
  display: grid; gap: var(--space-6);
  grid-template-columns: repeat(4, 1fr);
  margin-top: var(--space-8);
}
.tile {
  background: var(--hop-primrose);
  padding: var(--space-6) var(--space-5) var(--space-7);
  min-height: 230px; display: flex; flex-direction: column;
  border-radius: var(--radius-card);
  overflow: hidden;
}
.tile__img {
  width: calc(100% + 2 * var(--space-5));
  margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-5)) var(--space-6);
  aspect-ratio: 16 / 11; object-fit: cover;
}
.tile__title { margin-bottom: var(--space-3); }
.tile__body { font-size: var(--t-small); color: rgba(17,17,17,.66); margin: 0; }

/* ---- 5. THEORY OF CHANGE (responsive left-to-right flow, on ink) ------- */
.toc-flow {
  list-style: none; padding: 0; margin: var(--space-8) 0 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5);
}
.toc-stage {
  position: relative;
  background: rgba(245,241,234,.05);
  border: 1px solid var(--rule-on-ink);
  border-radius: 16px; padding: var(--space-5);
}
.toc-stage__label { font-family: var(--font-ui); font-weight: 700; text-transform: uppercase;
                    letter-spacing: .12em; font-size: 12px; color: var(--hop-primrose);
                    margin: 0 0 var(--space-4); }
.toc-stage__body { font-size: var(--t-small); color: var(--fg-on-ink-soft); margin: 0; }
.toc-stage__list { margin: 0; padding-left: 1.1em; display: grid; gap: var(--space-3);
                   font-size: var(--t-small); color: var(--fg-on-ink-soft); }
.toc-stage__list li::marker { color: var(--hop-primrose); }
.toc-stage--impact { background: rgba(254,191,193,.12); border-color: rgba(254,191,193,.42); }
/* The little flow arrow between stages on desktop. */
.toc-stage + .toc-stage::before {
  content: "→"; position: absolute; left: -16px; top: 50%; transform: translateY(-50%);
  color: var(--hop-primrose); font-family: var(--font-display); font-size: 18px;
}
.impact-cta { margin-top: var(--space-8); display: flex; align-items: center;
              gap: var(--space-5); flex-wrap: wrap; }

/* ---- 6. GET INVOLVED (cards with images) ------------------------------- */
.involve { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6);
           margin-top: var(--space-8); }
.involve__card { background: var(--hop-primrose); border-radius: var(--radius-card);
                 overflow: hidden; display: flex; flex-direction: column; }
.involve__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.involve__body { padding: var(--space-5) var(--space-5) var(--space-6);
                 display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.involve__title { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h3); margin: 0; }
.involve__body p { font-size: var(--t-small); color: rgba(17,17,17,.72); margin: 0; flex: 1; }
.involve__card .quiet-link { align-self: flex-start; }

/* ---- 7. BOARD + TEAM (people grid + initials avatars) ------------------ */
.people { display: flex; flex-wrap: wrap; gap: var(--space-7); margin-top: var(--space-7); }
.person { flex: 0 1 150px; text-align: center; }
.avatar {
  display: flex; align-items: center; justify-content: center;
  width: 84px; height: 84px; border-radius: 50%; margin: 0 auto var(--space-4);
  background: var(--hop-primrose); color: var(--hop-ink);
  font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: .02em;
}
/* When the avatar is a real headshot photo rather than initials. */
img.avatar { object-fit: cover; background: var(--hop-paper-edge); }
.person__name { font-size: 16px; font-weight: 700; margin: 0; }
.person__role { font-size: 13px; color: var(--mute); margin: 4px 0 8px; }
.person__link { font-size: 12px; font-weight: 600; color: var(--hop-primrose-700);
                border-bottom: 1px solid currentColor; padding-bottom: 1px; }
/* On the dark Board + Team band, swap the light-bg text tones for the on-ink ones. */
.section--ink .person__role { color: var(--fg-on-ink-mute); }
.section--ink .person__link { color: var(--hop-primrose); }

/* ---- 8. PARTNERS (curated logo wall) ----------------------------------- */
.partners__cat { font-family: var(--font-ui); font-weight: 700; text-transform: uppercase;
                 letter-spacing: .14em; font-size: 12px; color: var(--mute);
                 margin: var(--space-8) 0 var(--space-5); }
.logos { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4); }
.logo {
  display: flex; align-items: center; justify-content: center;
  background: #ffffff; border: 1px solid var(--rule); border-radius: 12px;
  padding: var(--space-5); min-height: 96px;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
a.logo:hover { border-color: var(--rule-strong); transform: translateY(-2px); }
.logo img { max-height: 52px; width: auto; max-width: 100%; object-fit: contain; }

/* Funders get extra prominence (Mel, June 2026): fewer per row + larger marks. */
.logos--funders { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.logos--funders .logo { min-height: 140px; padding: var(--space-6); }
.logos--funders .logo img { max-height: 84px; }

/* ---- 9. MEMBER VOICES (rotating testimonials, on ink) ------------------ */
/* Default (no JS / reduced motion): every quote is visible, stacked. When
   JavaScript runs, testimonials.js adds .is-enhanced and shows one at a time,
   cross-fading + typing each in. */
.voices { max-width: 820px; margin: var(--space-7) auto 0; text-align: center; }
.voice { margin: 0; }
.voices:not(.is-enhanced) .voice + .voice {
  margin-top: var(--space-7); padding-top: var(--space-7);
  border-top: 1px solid var(--rule-on-ink);
}
.voice__quote { font-family: var(--font-display); font-style: italic; font-weight: 400;
                font-variation-settings: "opsz" 48; font-size: var(--t-pull);
                line-height: 1.2; margin: 0; }
.voice__cite { font-family: var(--font-ui); font-style: normal; font-size: 13px;
               letter-spacing: .04em; color: var(--fg-on-ink-mute); margin-top: var(--space-6); }
/* Enhanced mode: stack the quotes and cross-fade between them. */
.voices.is-enhanced { position: relative; }
.voices.is-enhanced .voice {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease);
}
.voices.is-enhanced .voice.is-active { position: relative; opacity: 1; pointer-events: auto; }
/* The blinking caret while a quote types itself in. */
.voice__quote.is-typing::after {
  content: ""; display: inline-block; width: .06em; height: 1em; margin-left: .04em;
  vertical-align: -.08em; background: var(--hop-primrose);
  animation: caret-blink 1s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }
.voices__dots { display: flex; justify-content: center; gap: 10px; margin-top: var(--space-7); }
.voices__dot { width: 9px; height: 9px; padding: 0; border-radius: 50%;
               border: 1px solid var(--hop-primrose); background: transparent; cursor: pointer; }
.voices__dot.is-active { background: var(--hop-primrose); }

/* ---- FOOTER ------------------------------------------------------------ */
/* Footer sits one shade deeper than the dark sections above it (ink vs night),
   with a hairline on top, so it reads as its own grounding band rather than
   blending into the Member-voices section. */
.site-footer { background: var(--hop-ink); color: var(--fg-on-ink);
               border-top: 1px solid var(--rule-on-ink);
               padding: var(--space-9) 0 var(--space-7); }
.footer__top { display: flex; justify-content: space-between; gap: var(--space-7);
               flex-wrap: wrap; align-items: baseline; }
.footer__tagline { font-family: var(--font-display); font-size: clamp(24px,3vw,40px);
                   font-weight: 600; font-variation-settings: "opsz" 40; margin: 0;
                   white-space: nowrap; }
.footer__nav { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5);
               font-size: var(--t-small); color: var(--fg-on-ink-soft); }
.footer__nav a:hover { color: var(--fg-on-ink); }
.footer__social { font-size: var(--t-small); color: var(--fg-on-ink-soft); margin: var(--space-7) 0 0; }
.footer__social a { color: var(--fg-on-ink); border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.footer__social a:hover { color: var(--hop-primrose); }
.footer__needs { color: var(--hop-primrose); font-size: 12px; }
.footer__marks { margin: var(--space-7) 0 0; }   /* layout from .trust-marks */

.footer__acknowledge { display: flex; gap: var(--space-5); align-items: flex-start;
                       flex-wrap: wrap; margin-top: var(--space-7); }
.footer__flags { display: flex; gap: var(--space-3); flex: none; }
.footer__flag  { height: 30px; width: auto; border-radius: 2px; }
.footer__ack { font-size: var(--t-small); color: var(--fg-on-ink-mute);
               max-width: 64ch; line-height: 1.6; margin: 0; flex: 1 1 320px; }
.footer__legal { font-size: 12px; color: var(--fg-on-ink-mute);
                 margin-top: var(--space-6); display: flex; gap: var(--space-5);
                 flex-wrap: wrap; }
.footer__legal a { color: var(--fg-on-ink-mute); border-bottom: 1px solid currentColor; }
.footer__legal a:hover { color: var(--fg-on-ink-soft); }


/* ---- SCROLL REVEAL (progressive enhancement; logic in reveal.js) ------- */
/* Anything tagged .reveal starts a touch lower + transparent, then eases into
   place when it scrolls into view (reveal.js adds .is-visible). Two safety
   gates keep this from ever hiding content:
     • .js — only hide once reveal.js has confirmed JavaScript is running.
     • prefers-reduced-motion — visitors who opt out never see the movement. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
  }
  .js .reveal.is-visible { opacity: 1; transform: none; }
  .pillars .reveal:nth-child(2) { transition-delay: .12s; }
  .pillars .reveal:nth-child(3) { transition-delay: .24s; }
}


/* ============================================================================
   8. QUICK EXIT — safety button (logic lives in quick-exit.js)
   Fixed top-right, always visible. Lets someone leave the page instantly.
   This is a safety feature for a domestic/family-violence audience —
   DO NOT remove it. It sits above the header (higher z-index) and the header
   leaves room for it, so it is never covered.
   ============================================================================ */
.quick-exit {
  position: fixed; top: 14px; right: 14px; z-index: 1000;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-weight: 700; font-size: 13px;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 12px 18px; border: 2px solid var(--hop-ink);
  border-radius: var(--radius-control);
  background: var(--hop-primrose); color: var(--hop-ink); cursor: pointer;
}
.quick-exit:hover { background: var(--hop-primrose-700); color: var(--hop-paper); }
.quick-exit__x { font-size: 14px; line-height: 1; }


/* ============================================================================
   9. RESPONSIVE — tablet + phone
   Grids collapse to fewer columns as the screen narrows.
   ============================================================================ */
@media (max-width: 1080px) {
  .site-nav { gap: var(--space-4); }
  .site-nav a { font-size: 12px; }
}
@media (max-width: 900px) {
  /* On phones the in-page jump-menu is too busy, so we hide it — the header is
     just the wordmark, with Quick Exit keeping the top-right corner. Donate
     moves to an elegant frosted bar pinned to the bottom of the screen. It stays
     tucked away over the hero (which has its own apply button) and slides up the
     moment the page is scrolled, so it never crowds the landing view. */
  .site-nav { display: none; }

  .site-header__donate {
    position: fixed; z-index: 950;
    left: var(--pad-x); right: var(--pad-x);
    bottom: max(16px, env(safe-area-inset-bottom));
    justify-content: center;
    padding: 16px 22px 15px; font-size: 12px;
    color: var(--hop-ink);
    background: rgba(245,241,234,.88);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    backdrop-filter: blur(16px) saturate(1.2);
    border: 1px solid rgba(17,17,17,.12);
    border-radius: 999px;
    box-shadow: 0 12px 34px rgba(0,0,0,.22);
    transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
  }
  .site-header__donate:hover {
    background: var(--hop-paper); border-color: rgba(17,17,17,.22);
  }
  /* It's visible by default (so it still shows with JavaScript off). When JS is
     running, tuck it away over the hero, then let it slide up once scrolled —
     reveal.js adds .js immediately and toggles .is-scrolled past the hero. */
  .js:not(.is-scrolled) .site-header__donate {
    transform: translateY(160%); opacity: 0; pointer-events: none;
  }

  .logos { grid-template-columns: repeat(4, 1fr); }
  /* Leave room so the sticky Donate never covers the last line of the footer. */
  .site-footer { padding-bottom: 108px; }
}
@media (max-width: 820px) {
  .banner__figure { display: none; }   /* protect the hero text + CTA on phones */
}
@media (max-width: 980px) {
  :root { --pad-x: 40px; }
  .tiles    { grid-template-columns: repeat(2, 1fr); }
  .toc-flow { grid-template-columns: repeat(2, 1fr); }
  .involve  { grid-template-columns: 1fr; }
  .why__content { grid-template-columns: 1fr; gap: var(--space-7); }
  .pillars  { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  /* On two columns, the flow arrow only sits between horizontal neighbours. */
  .toc-stage:nth-child(odd)::before { display: none; }
}
@media (max-width: 620px) {
  :root { --pad-x: 22px; }
  .wordmark__img { height: 32px; }   /* keep the logo clear of the Donate + Quick Exit buttons */
  .tiles    { grid-template-columns: 1fr; }
  .toc-flow { grid-template-columns: 1fr; }
  .pillars  { grid-template-columns: 1fr; }
  .logos    { grid-template-columns: repeat(2, 1fr); }
  .banner   { min-height: 88vh; }
  .banner__inner { padding-top: calc(var(--header-h) + 22vh); }
  .footer__top { flex-direction: column; }
  /* All flow arrows hidden when fully stacked. */
  .toc-stage + .toc-stage::before { display: none; }
}

/* Honour "reduce motion" OS setting — kill the hover nudges + transitions. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .btn:hover .arrow, .quiet-link:hover .arrow, .apply-band:hover .arrow { transform: none; }
  .voice__quote.is-typing::after { animation: none; }
}