/**
 * css/pinkribbon.css
 *
 * Central stylesheet for PinkRibbon International website.
 * ALL brand values (font, colors, spacing, radii) live here as CSS variables.
 * Every page links to this single file.
 *
 * To change the font: edit --font-family and the @import URL below.
 * To change colors: edit the --color-* variables in :root.
 *
 * Based on: 06_Design/Brand/Guidelines/Brand_Guidelines.md
 */

/* ──────────────────────────────────────────
   FONT
   ────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;600;700&family=Open+Sans:wght@600;700&display=swap');

/* ──────────────────────────────────────────
   BRAND VARIABLES
   ────────────────────────────────────────── */

:root {
  /* Typography */
  --font-family: 'Lato', sans-serif;

  /* Colors — Kadence palette from Brand_Guidelines.md */
  --color-pink:           #FF6699;   /* Primary accent */
  --color-pink-light:     #FFD6E5;   /* Footer bg, secondary fills */
  --color-pink-hover:     #EC268F;   /* Button/link hover */
  --color-pink-tint:      #FFE5EF;   /* Subtle pink backgrounds */
  --color-pink-pale:      #FFF0F6;   /* Very light pink */
  --color-text:           #242424;   /* Body text, headings */
  --color-text-secondary: #2D3748;   /* Secondary text */
  --color-text-tertiary:  #4A5568;   /* Tertiary text */
  --color-text-muted:     #718096;   /* Muted text, footer meta. DEPRECATED — prefer --muted (V37 #8A857D). See V37 Tokens block below. */
  --color-bg:             #FFFFFF;   /* Page background */
  --color-bg-light:       #F7FAFC;   /* Light background sections */
  --color-bg-grey:        #EDF2F7;   /* Grey background sections */
  --color-disabled:       #BCBCBC;   /* Disabled states */
  --color-error:          #E74C3C;   /* Form errors */

  /* ─────────────────────────────────────────────────────────────
     V37 Tokens (short-name aliases, 21 Apr 2026, CLAUDE.md v2.9)
     ─────────────────────────────────────────────────────────────
     The V37 design system (all redesigned pages: home, about, donate,
     campaigns-hub, all-campaigns, governance hub + sub-pages) uses
     short, terse CSS variable names. These used to live in a duplicate
     :root block at the top of css/v37-home.css, which meant:
       (a) V37-specific tokens (--anth, --parchment, --stone, --warm,
           --au) weren't available on the 7 legacy pages that only load
           pinkribbon.css (global-impact + 5 campaign detail pages +
           template).
       (b) Every cross-file migration (e.g. the 20 Apr nav migration in
           CLAUDE.md v2.5 item 7) had to hardcode V37 hex literals
           because the tokens weren't shared.
       (c) --muted (#8A857D, V37) and --color-text-muted (#718096,
           legacy) silently diverged, creating a latent bug class.

     Moving the V37 tokens here centralises them: every page now has
     access to both naming systems. The duplicate :root block in
     v37-home.css has been removed. See Instructions/2026-04-21_V37_CSS_Audit.md
     for the full reasoning.

     On the --muted value conflict: the V37 warm grey #8A857D wins (it's
     visible on most pages already). The legacy --color-text-muted token
     keeps its #718096 value for now, marked DEPRECATED above, because
     it still has 15 consumers in this file that need per-case visual QA
     before migration. Future rules should use --muted.
     ───────────────────────────────────────────────────────────── */
  --pk:                   #FF6699;   /* Alias of --color-pink. Primary brand accent. */
  --anth:                 #36393D;   /* Anthracite grey. Body/section headings in V37. No legacy equivalent. */
  --deep:                 #242424;   /* Alias of --color-text. Deepest body text. */
  --wh:                   #FFFFFF;   /* Alias of --color-bg. Pure white. */
  --parchment:            #F8F6F3;   /* Warm off-white. Section alt backgrounds. No legacy equivalent. */
  --stone:                #F0EDE8;   /* Warm stone grey. Section dividers. No legacy equivalent. */
  --warm:                 #C5C0B8;   /* Warm mid grey. Inactive/placeholder. No legacy equivalent. */
  --muted:                #8A857D;   /* Warm muted grey. V37 body/secondary text. NOT the same as --color-text-muted (#718096). */
  --au:                   #C4A35A;   /* Gold accent. Ongoing-campaign badge. No legacy equivalent. */

  /* Layout */
  --max-width:            1280px;
  --edge-padding:         2.25rem;   /* 36px desktop */
  --edge-padding-mobile:  20px;
  --section-padding:      100px;     /* Vertical section padding desktop */
  --section-padding-mobile: 40px;

  /* Border radius */
  --radius-pill:          100px;     /* Buttons, icons */
  --radius-card:          20px;      /* Cards, images */
  --radius-card-large:    28px;      /* Large overlay cards */
  --radius-dropdown:      16px;      /* Dropdowns */
  --radius-footer:        40px;      /* Footer desktop */
  --radius-footer-tablet: 24px;
  --radius-footer-mobile: 20px;
}

/* ──────────────────────────────────────────
   RESET & BASE
   ────────────────────────────────────────── */

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

html {
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-bg);
}

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

a {
  color: var(--color-pink);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-pink-hover);
}

/* ──────────────────────────────────────────
   TYPOGRAPHY
   Sizes from Brand_Guidelines.md
   ────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family);
  color: var(--color-text);
  line-height: 1.2;
}

h1 { font-size: 56px; font-weight: 600; line-height: 1.15; margin-bottom: 24px; letter-spacing: -0.02em; }
h2 { font-size: 44px; font-weight: 600; line-height: 1.2; margin-bottom: 24px; letter-spacing: -0.01em; }
h3 { font-size: 32px; font-weight: 600; line-height: 1.3; margin-bottom: 20px; }
h4 { font-size: 24px; font-weight: 600; line-height: 1.4; margin-bottom: 16px; }
h5 { font-size: 20px; font-weight: 600; line-height: 1.4; margin-bottom: 12px; }
h6 { font-size: 16px; font-weight: 600; line-height: 1.5; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-pink); }

.pri-tagline {
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(48px, 8vw, 92px);
  line-height: 1.1;
  margin-bottom: 24px;
}

.pri-tagline-pink {
  color: var(--color-pink);
}

.pri-tagline-dark {
  color: var(--color-text);
}

/* Tagline variant: Open Sans (matches live WordPress heading style).
   Usage: <p class="pri-tagline-os"><span class="pink">ONE WORLD</span> <span class="dark">| ONE FIGHT</span></p>
   See blocks/tagline.html for the reference snippet. */
.pri-tagline-os {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: clamp(48px, 8vw, 92px);
  line-height: 1.1;
  text-align: center;
  margin-bottom: 24px;
}

.pri-tagline-os .pink {
  color: var(--color-pink);
}

.pri-tagline-os .dark {
  color: var(--color-text);
}

p {
  margin-bottom: 1em;
}

/* ──────────────────────────────────────────
   LAYOUT
   ────────────────────────────────────────── */

.pri-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--edge-padding);
  padding-right: var(--edge-padding);
}

.pri-section {
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
}

/* Margin utilities */
.pri-mb-sm { margin-bottom: 8px !important; }
.pri-mb-md { margin-bottom: 24px !important; }
.pri-mb-lg { margin-bottom: 48px !important; }
.pri-mb-xl { margin-bottom: 64px !important; }
.pri-mt-lg { margin-top: 48px !important; }
.pri-pb-lg { padding-bottom: 60px !important; }

/* Horizontal rule used to separate sub-sections within a section */
.pri-section-divider {
  border: none;
  border-top: 1px solid var(--color-pink-light);
  margin: 0 0 0 0;
}

/* Text utilities */
.pri-text-pink { color: var(--color-pink) !important; }
.pri-container-narrow { max-width: 800px; }
.pri-container-medium { max-width: 900px; }

/* Text utility classes */
.pri-text-center { text-align: center; }

.pri-section-label {
  color: var(--color-pink);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 24px;
}

.pri-text-subtitle {
  font-size: 20px;
  color: var(--color-text-secondary);
  margin-top: 16px;
  margin-bottom: 32px;
  line-height: 1.6;
}

/* Hero button row — stacks on mobile */
.pri-hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.pri-hero-actions.pri-text-center {
  justify-content: center;
}

/* Responsive grid utilities */
.pri-grid-2col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 32px;
}

.pri-grid-3col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 32px;
}

.pri-grid-4col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 32px;
}

/* Footer layout classes — replace inline flex */
.pri-footer-columns {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 30px;
}

.pri-footer-col-heading {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}

.pri-footer-col-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pri-footer-tagline {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-pink);
  margin-bottom: 4px;
}

.pri-footer-description {
  font-size: 13px;
  /* Charcoal-footer pass (20 Apr 2026): was --color-text-muted (#718096), a
     mid-grey that read as washed out on the pink footer. Swapped to the
     brand's Deep Text token so all footer copy (description, contact, address,
     phone hint, legal) renders in a single uniform charcoal black. */
  color: var(--color-text);
  max-width: 240px;
}

/* Legal/policy page section headings */
.pri-legal-heading {
  font-size: 24px;
  margin-top: 48px;
  margin-bottom: 16px;
}

/* Stat number display */
.pri-stat-number-large {
  font-size: clamp(40px, 8vw, 80px);
  font-weight: 600;
  color: var(--color-pink);
  line-height: 1.1;
}

/* Blockquote / pull-quote styling */
.pri-quote {
  border-left: 3px solid var(--color-pink-light);
  padding-left: 24px;
  margin-bottom: 32px;
}

.pri-quote p {
  font-size: 19px;
  color: var(--color-text-secondary);
  font-style: italic;
  line-height: 1.7;
}

/* Person card typography (board, ambassadors, advisory council) */
.pri-person-name {
  font-size: 20px;
  margin-bottom: 8px;
}

.pri-person-name-sm {
  font-size: 18px;
  margin-bottom: 8px;
}

.pri-person-role {
  color: var(--color-text-muted);
  font-size: 15px;
  margin-bottom: 12px;
}

.pri-person-bio {
  color: var(--color-text-secondary);
  font-size: 15px;
}

/* Contact details list on person cards (phone, website) */
.pri-person-contact {
  list-style: none;
  margin: 12px 0 0 0;
  padding: 0;
  font-size: 14px;
}
.pri-person-contact li {
  margin-bottom: 4px;
}
.pri-person-contact a {
  color: var(--color-pink);
  text-decoration: none;
}
.pri-person-contact a:hover {
  color: var(--color-pink-hover);
  text-decoration: underline;
}

/* Pink highlight callout text */
.pri-highlight-text {
  color: var(--color-pink);
  font-weight: 600;
}

/* Bank/detail list without bullets */
.pri-bank-list {
  list-style: none;
  font-size: 16px;
  color: var(--color-text-secondary);
}

.pri-bank-list li {
  margin-bottom: 12px;
}

.pri-bank-list li:last-child {
  margin-bottom: 0;
}

.pri-bank-list strong {
  color: var(--color-text);
}

/* Disclaimer card (pink tint background, pink border) */
.pri-card-disclaimer {
  margin-top: 24px;
  background: var(--color-pink-tint);
  border: 1px solid var(--color-pink-light);
}

/* Container max-width: 720px (bank transfer, narrow cards) */
.pri-container-tight { max-width: 720px; }

/* Donate page form controls */
.pri-donate-select-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}

.pri-donate-select {
  width: 100%;
  max-width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-dropdown);
  border: 1px solid rgba(36, 36, 36, 0.12);
  font-family: var(--font-family);
  font-size: 16px;
  margin-bottom: 20px;
  background: var(--color-bg);
}

/* 85/15 pledge visual: flex row of large numbers */
.pri-pledge-stats {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

/* Muted large stat (the 15% in the pledge) */
.pri-stat-number-muted {
  font-size: clamp(40px, 8vw, 80px);
  font-weight: 600;
  color: var(--color-text-muted);
  line-height: 1.1;
}

/* Trust / credibility stat text (pink, bold, small) */
.pri-trust-stat-text {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-pink);
  line-height: 1.35;
  margin: 0;
}

/* Section padding overrides */
.pri-section-nopad-bottom { padding-bottom: 0; }
.pri-section-nopad-top    { padding-top: 0; }
.pri-section-pad-top-sm   { padding-top: 40px; }
.pri-section-pad-bottom-sm { padding-bottom: 40px; }
.pri-section-pad-bottom-lg { padding-bottom: 48px; }

/* Section shape variants */
.pri-section-rounded-top { border-radius: 40px 40px 0 0; }

/* Background variants for tonal layering (no borders, just color shifts) */
.pri-bg-white { background-color: var(--color-bg); }
.pri-bg-light { background-color: var(--color-bg-light); }
.pri-bg-grey  { background-color: var(--color-bg-grey); }
.pri-bg-pink  { background-color: var(--color-pink); color: #FFFFFF; }
.pri-bg-pink-light { background-color: var(--color-pink-light); }

/* ──────────────────────────────────────────
   BUTTONS
   Always pill shape per Brand_Guidelines.md
   ────────────────────────────────────────── */

.pri-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 40px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-pink);
  background-color: var(--color-pink);
  color: #FFFFFF;
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pri-btn:hover {
  background-color: var(--color-pink-hover);
  border-color: var(--color-pink-hover);
  color: #FFFFFF;
}

/* Secondary button: light pink fill, pink text (used for header Donate) */
.pri-btn-secondary {
  background-color: var(--color-pink-light);
  border-color: var(--color-pink-light);
  color: var(--color-pink);
}

.pri-btn-secondary:hover {
  background-color: var(--color-pink);
  border-color: var(--color-pink);
  color: #FFFFFF;
}

/* Outline button */
.pri-btn-outline {
  background-color: transparent;
  border-color: var(--color-pink);
  color: var(--color-pink);
}

.pri-btn-outline:hover {
  background-color: var(--color-pink);
  color: #FFFFFF;
}

.pri-btn:disabled {
  background-color: var(--color-disabled);
  border-color: var(--color-disabled);
  cursor: not-allowed;
}

/* ──────────────────────────────────────────
   HEADER / NAV
   Desktop: horizontal nav with hover dropdowns
   Mobile (<= 1024px): hamburger + slide-in overlay
   ────────────────────────────────────────── */

.pri-header {
  min-height: 96px;
  display: flex;
  align-items: center;
  background-color: var(--color-bg);
  padding: 0 var(--edge-padding);
  position: relative;
  z-index: 200;
}

.pri-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
}

.pri-header-logo img {
  max-width: 200px;
  height: auto;
}

/* Hamburger button — hidden on desktop, shown on mobile */
.pri-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  padding: 10px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  z-index: 310;
}

.pri-hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-text);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.pri-hamburger[aria-expanded="true"] .pri-hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.pri-hamburger[aria-expanded="true"] .pri-hamburger-line:nth-child(2) {
  opacity: 0;
}

.pri-hamburger[aria-expanded="true"] .pri-hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Nav overlay container — flex wrapper that sits between logo and donate btn */
.pri-nav-overlay {
  display: flex;
  align-items: center;
  flex: 1;
}

.pri-nav {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
}

.pri-nav > li > a,
.pri-nav > li > .pri-nav-dropdown-link {
  display: block;
  padding: 0.6em 14px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-tertiary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.pri-nav > li > a:hover,
.pri-nav > li > .pri-nav-dropdown-link:hover {
  color: var(--color-pink);
}

/* Desktop: chevron hidden (hover reveals dropdown instead) */
.pri-nav-dropdown-link .pri-nav-chevron {
  display: none;
}

/* Dropdown menus — desktop hover */
.pri-nav-dropdown {
  position: relative;
}

.pri-nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--color-bg);
  border-radius: var(--radius-dropdown);
  padding: 24px;
  min-width: max-content;
  list-style: none;
  z-index: 100;
  box-shadow: 0 20px 40px rgba(36, 36, 36, 0.06);
}

.pri-nav-dropdown:hover .pri-nav-dropdown-menu {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pri-nav-dropdown-menu a {
  padding: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-tertiary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.pri-nav-dropdown-menu a:hover {
  color: var(--color-pink);
}

/* Donate button in overlay — hidden on desktop (header button shows instead) */
.pri-nav-donate-btn {
  display: none !important;
}

/* Chevron indicator for dropdowns */
.pri-nav-chevron {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 4px;
  transition: transform 0.3s ease;
  vertical-align: middle;
}

/* Body scroll lock when mobile nav is open */
.pri-nav-body-lock {
  overflow: hidden;
}

/* Mobile-only utilities */
.pri-mobile-only {
  display: none;
}

/* ──────────────────────────────────────────
   TOP NAVIGATION (V37 nav bar)
   Used on every page via blocks/header.html.
   Migrated from v37-home.css on 20 Apr 2026 so the 6 non-V37-redesigned
   pages (/global-impact/ + the 5 campaign detail pages) can render a
   properly styled nav instead of the V37 markup falling back to bare
   defaults. Literal hex values are used for warm-muted (#8A857D) and
   anthracite (#36393D) because pinkribbon.css does not yet have
   equivalent brand tokens; lifting those into proper CSS custom
   properties is tracked as a follow-up.
   ────────────────────────────────────────── */

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #FFFFFF;
  border-bottom: 1px solid rgba(54, 57, 61, .06);
}

.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 72px;
}

.n-logo svg {
  height: 32px;
  width: auto;
}

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

.n-links a {
  /* Explicit font: the nav must always render in Outfit regardless of
     whether the page loads v37-home.css (which sets Outfit on body) or
     only pinkribbon.css (which sets Lato on body). Outfit is already
     loaded on every page via blocks/head-meta.html — no extra font cost. */
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #8A857D;
  text-decoration: none;
  transition: color .25s;
  font-weight: 400;
}

.n-links a:hover {
  color: #36393D;
}

/* Dropdown baseline alignment (20 Apr 2026).
   .n-dropdown and .n-dropdown-trigger had no CSS rules anywhere. The
   dropdown wrappers rendered as default block boxes containing an inline
   <a> + inline SVG chevron; the SVG's vertical-align:middle math
   inflated the dropdown's flex-item line-box by 1–2 px so DONATE and
   GOVERNANCE visibly sat below HOME and ABOUT US despite
   .n-links {align-items: center}. Treating every top-level inline nav
   item as an inline-flex box with line-height:1 puts all four text
   baselines on the same horizontal line. The .n-cta pink pill is
   deliberately excluded — its height is padding-driven and was not
   flagged as misaligned. */
.n-links > a:not(.n-cta),
.n-links > .n-dropdown {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.n-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.n-cta {
  background: var(--color-pink);
  color: #FFFFFF;
  padding: 10px 24px;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  border: none;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  cursor: pointer;
  transition: all .3s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 999px;
}

.n-cta:hover {
  background: #e85c8a;
  transform: scale(1.02);
}

/* Mobile nav (≤ 900 px): the hamburger inside blocks/header.html takes
   over, so the desktop links hide and the logo shrinks to match.
   Migrated verbatim from v37-home.css. */
@media (max-width: 900px) {
  .nav-inner {
    padding: 0 24px;
  }
  .n-links a {
    display: none;
  }
  .n-logo svg {
    height: 26px;
  }
}

/* ──────────────────────────────────────────
   FOOTER
   Rounded container per Brand_Guidelines.md
   ────────────────────────────────────────── */

.pri-footer {
  background-color: var(--color-pink-light);
  border-radius: var(--radius-footer);
  margin: 44px 36px 16px 36px;
  padding: 48px;
}

.pri-footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.pri-footer-logo {
  margin-bottom: 16px;
}

.pri-footer a {
  color: var(--color-text);
  font-size: 14px;
}

.pri-footer a:hover {
  color: var(--color-pink);
}

.pri-footer-legal {
  font-size: 14px;
  /* Charcoal-footer pass (20 Apr 2026): see .pri-footer-description above —
     unifying all footer text to Deep Text for legibility on the pink bg. */
  color: var(--color-text);
  margin-top: 35px;
  padding-top: 35px;
  border-top: 1px solid rgba(36, 36, 36, 0.08);
}

.pri-footer-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pri-footer-contact-org {
  font-size: 13px;
  font-weight: 600;
  /* Charcoal-footer pass (20 Apr 2026): was --color-text-secondary (#2D3748),
     a navy-charcoal. Unified to --color-text (#242424) to match the rest of
     the footer, per "everything grey needs to be charcoal black". */
  color: var(--color-text);
  line-height: 1.4;
  margin-bottom: 0;
}

.pri-footer-address {
  font-style: normal;
  font-size: 13px;
  /* Charcoal-footer pass (20 Apr 2026): unified to --color-text. */
  color: var(--color-text);
  line-height: 1.5;
}

.pri-footer-phone-hint {
  font-size: 11px;
  /* Charcoal-footer pass (20 Apr 2026): was --color-text-muted + opacity 0.7,
     which made the "(+1 646 809 PINK)" hint nearly ghosted on the pink bg.
     Dropping the opacity as well so the hint is solid charcoal like the rest. */
  color: var(--color-text);
}

.pri-footer-social {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pri-footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
}

/* ──────────────────────────────────────────
   CARDS
   ────────────────────────────────────────── */

.pri-card {
  background-color: var(--color-bg);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: all 0.4s ease;
}

.pri-card:hover {
  box-shadow: 0 20px 40px rgba(36, 36, 36, 0.06);
}

.pri-card img {
  border-radius: var(--radius-card);
  transition: transform 0.4s ease;
}

.pri-card:hover img {
  transform: scale(1.05);
}

.pri-card-body {
  padding: 24px;
}

/* ──────────────────────────────────────────
   PERSON PHOTOS (Advisory Council, Board, Ambassadors)
   ────────────────────────────────────────── */

.pri-person-photo {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 16px auto;
}

/* ──────────────────────────────────────────
   READ MORE (expandable biographies)
   Uses native <details>/<summary> — no JS.
   ────────────────────────────────────────── */

.pri-read-more {
  margin-top: 8px;
  text-align: left;
}

.pri-read-more summary {
  display: inline-block;
  color: var(--color-pink);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  list-style: none;
  transition: color 0.2s ease;
}

.pri-read-more summary::-webkit-details-marker {
  display: none;
}

.pri-read-more summary::after {
  content: " →";
  transition: letter-spacing 0.2s ease;
}

.pri-read-more[open] summary::after {
  content: " ↑";
}

.pri-read-more summary:hover {
  color: var(--color-pink-hover);
}

.pri-read-more p:first-of-type {
  margin-top: 16px;
}

/* ──────────────────────────────────────────
   FOUNDER LETTER LINK (About page → letter page)
   ────────────────────────────────────────── */

.pri-founder-letter-link {
  color: var(--color-pink);
  font-weight: 600;
  font-size: 17px;
  transition: letter-spacing 0.2s ease, color 0.2s ease;
}

.pri-founder-letter-link:hover {
  color: var(--color-pink-hover);
  letter-spacing: 0.02em;
}

/* ──────────────────────────────────────────
   STAT BLOCKS (for Impact section)
   ────────────────────────────────────────── */

.pri-stat {
  text-align: center;
}

.pri-stat-number {
  font-size: 56px;
  font-weight: 600;
  color: var(--color-pink);
  line-height: 1.1;
}

.pri-stat-label {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-muted);
  margin-top: 8px;
}

/* ──────────────────────────────────────────
   DONATE CTA BAND
   ────────────────────────────────────────── */

.pri-cta-band {
  background-color: var(--color-pink);
  color: #FFFFFF;
  text-align: center;
  padding: 60px var(--edge-padding);
}

.pri-cta-band h2 {
  color: #FFFFFF;
  margin-bottom: 24px;
}

.pri-cta-band-text {
  font-size: 18px;
  max-width: 600px;
  margin: 0 auto 32px auto;
  opacity: 0.9;
}

.pri-cta-band .pri-btn {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--color-pink);
}

.pri-cta-band .pri-btn:hover {
  background-color: var(--color-pink-light);
  border-color: var(--color-pink-light);
}

/* ──────────────────────────────────────────
   GOVERNANCE HUB PAGE
   Editorial hero, bento card grid, narrative
   ────────────────────────────────────────── */

.pri-gov-hero {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 48px;
  align-items: end;
}

.pri-gov-hero-label {
  display: inline-block;
  background-color: var(--color-pink-light);
  color: var(--color-pink-hover);
  padding: 6px 18px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.pri-gov-hero h1 {
  font-size: 64px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.pri-gov-hero p {
  margin-top: 24px;
  font-size: 20px;
  color: var(--color-text-secondary);
  max-width: 640px;
  line-height: 1.6;
}

.pri-gov-hero p .pri-highlight {
  color: var(--color-pink);
  font-weight: 700;
}

.pri-gov-stat-box {
  background-color: var(--color-bg-light);
  padding: 40px;
  border-radius: var(--radius-card);
  text-align: center;
}

.pri-gov-stat-box .pri-stat-number {
  font-size: 64px;
  font-weight: 700;
  color: var(--color-pink);
  line-height: 1;
}

.pri-gov-stat-box .pri-stat-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 12px;
}

.pri-gov-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.pri-gov-card {
  position: relative;
  background-color: var(--color-bg);
  border-radius: var(--radius-card);
  padding: 48px 40px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  overflow: hidden;
  transition: box-shadow 0.4s ease, transform 0.4s ease;
  text-decoration: none;
  color: inherit;
  display: block;
}

.pri-gov-card:hover {
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.06);
  transform: translateY(-4px);
  color: inherit;
}

.pri-gov-card-icon {
  width: 56px;
  height: 56px;
  background-color: var(--color-pink-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
  transition: transform 0.4s ease;
}

.pri-gov-card:hover .pri-gov-card-icon {
  transform: scale(1.1);
}

.pri-gov-card-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--color-pink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pri-gov-card h3 {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 16px;
  line-height: 1.2;
}

.pri-gov-card p {
  color: var(--color-text-tertiary);
  line-height: 1.6;
  margin-bottom: 32px;
}

.pri-gov-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-pink);
  font-weight: 600;
  font-size: 16px;
  transition: gap 0.3s ease;
}

.pri-gov-card:hover .pri-gov-card-link {
  gap: 14px;
}

.pri-gov-card-link svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pri-gov-card--accent {
  background-color: var(--color-pink);
  border-color: var(--color-pink);
}

.pri-gov-card--accent h3,
.pri-gov-card--accent p {
  color: #FFFFFF;
}

.pri-gov-card--accent p {
  opacity: 0.85;
}

.pri-gov-card--accent .pri-gov-card-icon {
  background-color: rgba(255, 255, 255, 0.2);
}

.pri-gov-card--accent .pri-gov-card-icon svg {
  stroke: #FFFFFF;
}

.pri-gov-card--accent .pri-gov-card-link {
  color: #FFFFFF;
}

.pri-gov-card--accent:hover {
  box-shadow: 0 20px 48px rgba(255, 102, 153, 0.3);
}

.pri-gov-narrative {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.pri-gov-narrative h2 {
  font-size: 52px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 32px;
}

.pri-gov-narrative .pri-gov-text p {
  font-size: 18px;
  color: var(--color-text-tertiary);
  line-height: 1.7;
}

.pri-gov-image-wrap {
  position: relative;
}

.pri-gov-image-wrap img {
  border-radius: var(--radius-card);
  width: 100%;
  height: 500px;
  object-fit: cover;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.08);
}

.pri-gov-image-overlay {
  position: absolute;
  bottom: -24px;
  left: -24px;
  background-color: var(--color-pink);
  color: #FFFFFF;
  padding: 32px;
  border-radius: var(--radius-card);
}

.pri-gov-image-overlay .pri-stat-number {
  font-size: 36px;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1;
}

.pri-gov-image-overlay .pri-stat-label {
  font-size: 12px;
  /* Readable-pink-text rollout: was .85 opacity white. Kept weight at 700 (already
     heavier than the Medium 500 we use elsewhere — downgrading weight would defeat
     the readability goal). Only color bumped to #fff. */
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 8px;
}

/* ──────────────────────────────────────────
   CAMPAIGN PAGES
   Overview hub, detail pages, donation tiers
   ────────────────────────────────────────── */

.pri-campaign-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.pri-campaign-hero-text {
  max-width: 600px;
}

.pri-campaign-badge {
  display: inline-block;
  background-color: var(--color-pink-light);
  color: var(--color-pink-hover);
  padding: 6px 18px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.pri-campaign-badge--active {
  background-color: #E6F9F0;
  color: #1B7A4A;
}

.pri-campaign-badge--ongoing {
  background-color: var(--color-pink-light);
  color: var(--color-pink-hover);
}

.pri-campaign-hero h1 {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.pri-campaign-hero p {
  font-size: 20px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: 32px;
}

.pri-campaign-hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.pri-campaign-hero-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, var(--color-pink) 0%, var(--color-pink-light) 100%);
  object-fit: cover;
}

.pri-campaign-breadcrumb {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-bottom: 16px;
}

.pri-campaign-breadcrumb a {
  color: var(--color-pink);
  font-weight: 600;
}

.pri-campaign-stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: center;
  padding: 48px 0;
}

.pri-campaign-stat {
  position: relative;
}

.pri-campaign-stat:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -16px;
  top: 10%;
  height: 80%;
  width: 1px;
  background-color: var(--color-bg-grey);
}

.pri-campaign-stat-number {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  color: var(--color-pink);
  line-height: 1.1;
}

.pri-campaign-stat-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 8px;
}

.pri-campaign-narrative {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.pri-campaign-narrative-label {
  display: inline-block;
  color: var(--color-pink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.pri-campaign-narrative h2 {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 24px;
}

.pri-campaign-narrative p {
  font-size: 18px;
  color: var(--color-text-tertiary);
  line-height: 1.7;
}

.pri-campaign-narrative-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, var(--color-pink-light) 0%, var(--color-pink-tint) 100%);
  object-fit: cover;
}

.pri-campaign-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 48px;
}

.pri-campaign-tier-card {
  background-color: var(--color-bg);
  border-radius: var(--radius-card);
  padding: 40px 32px;
  text-align: center;
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}

.pri-campaign-tier-card:hover {
  box-shadow: 0 20px 40px rgba(36, 36, 36, 0.06);
  transform: translateY(-4px);
}

.pri-campaign-tier-icon {
  width: 64px;
  height: 64px;
  background-color: var(--color-pink-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px auto;
}

.pri-campaign-tier-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--color-pink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pri-campaign-tier-amount {
  font-size: 36px;
  font-weight: 700;
  color: var(--color-pink);
  margin-bottom: 16px;
}

.pri-campaign-tier-card p {
  font-size: 16px;
  color: var(--color-text-tertiary);
  line-height: 1.6;
}

.pri-campaign-pledge {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.pri-campaign-pledge-visual {
  text-align: center;
}

.pri-campaign-pledge-number {
  font-size: clamp(72px, 10vw, 120px);
  font-weight: 700;
  color: var(--color-pink);
  line-height: 1;
}

.pri-campaign-pledge-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 8px;
}

.pri-campaign-pledge h2 {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 24px;
}

.pri-campaign-pledge p {
  font-size: 18px;
  color: var(--color-text-tertiary);
  line-height: 1.7;
}

.pri-campaign-pledge-info {
  display: flex;
  gap: 32px;
  margin-top: 32px;
}

.pri-campaign-pledge-info-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.pri-campaign-pledge-info-item svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--color-pink);
  stroke-width: 2;
}

.pri-campaign-final-cta {
  text-align: center;
  padding: 80px var(--edge-padding);
}

.pri-campaign-final-cta h2 {
  color: #FFFFFF;
  font-size: clamp(28px, 4vw, 44px);
  margin-bottom: 16px;
}

.pri-campaign-final-cta p {
  /* Readable-pink-text rollout: was .9 opacity (already close to white). Bumped to #fff
     + weight 500 for consistency with the sitewide readable-text pattern. */
  color: #fff;
  font-weight: 500;
  font-size: 18px;
  max-width: 600px;
  margin: 0 auto 32px auto;
}

.pri-campaign-final-cta .pri-btn {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--color-pink);
  margin: 0 8px;
}

.pri-campaign-final-cta .pri-btn:hover {
  background-color: var(--color-pink-light);
  border-color: var(--color-pink-light);
}

.pri-campaign-final-cta .pri-btn-outline {
  background-color: transparent;
  border-color: #FFFFFF;
  color: #FFFFFF;
}

.pri-campaign-final-cta .pri-btn-outline:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

/* Donorbox goal meter — placed in the hero section below CTA buttons */
.pri-campaign-goal-meter {
  margin-top: 28px;
}

.pri-campaign-goal-meter iframe {
  border-radius: 8px;
  display: block;
}

/* Donorbox embedded donation form — placed in the tiers/contribution section */
.pri-campaign-donate-form {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

.pri-campaign-donate-form dbox-widget {
  border-radius: 16px;
  overflow: hidden;
}

/* =======================================================================
   CONTRIBUTE ROW — tier cards next to the Donorbox donation form
   -----------------------------------------------------------------------
   On every campaign detail page (Bengal, India Turns Pink, Nigeria,
   Indonesia, Operational) the "Your Contribution" section contains two
   children: the three donation-tier cards (.pri-campaign-tier-grid) and
   an embedded Donorbox donation form (.pri-campaign-donate-form).
   By default those children stack vertically — 3-column tier grid on top,
   widget centered below. Wrapping them in .pri-campaign-contribute-row
   lets them sit SIDE BY SIDE at desktop widths (>=992px): tier cards
   become a single vertical stack on the LEFT, donation form on the RIGHT.
   The visual effect is that donors see the impact ladder ($50 / $250 /
   $1,000) and the payment widget together in one viewport — no scrolling
   required to move from "what your money does" to "give now".
   Below the 992px breakpoint the wrapper has NO effect (it stays a plain
   block container), so the tier grid falls back to its default 3-column
   layout with the widget centered underneath — the original stacked look.
   This keeps the Donorbox iframe above its comfortable minimum width on
   tablet and mobile viewports, where a ~400px column wouldn't fit beside
   anything else.

   Markup shape (all 5 campaign detail pages):
     <div class="pri-campaign-contribute-row">
       <div class="pri-campaign-tier-grid"> ...3 tier cards... </div>
       <div class="pri-campaign-donate-form"> <dbox-widget/> </div>
     </div>
   ======================================================================= */

@media (min-width: 992px) {
  .pri-campaign-contribute-row {
    display: grid;
    /* Left column: flex to fill remaining space (minmax(0, 1fr) prevents
       grid blowout from long tier descriptions). Right column: Donorbox
       widget keeps a stable ~400px — wide enough for the iframe's default
       payment form controls, narrow enough to stay readable. */
    grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
    gap: 48px;
    align-items: start;
    margin-top: 8px;
  }

  /* Inside the row, the tier grid collapses from 3 columns to a single
     vertical stack so the three cards read as an impact LADDER (small →
     big) beside the donation form. Tighter gap because the cards now
     live in a narrower column. */
  .pri-campaign-contribute-row .pri-campaign-tier-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 0;
  }

  /* The default donate form has a 40px top margin (needed when stacked
     below the tier grid). In the side-by-side layout that margin would
     push the widget below the top of the tier column, breaking the
     visual alignment — so we zero it here. Widget also fills its column
     rather than being centered as an island. */
  .pri-campaign-contribute-row .pri-campaign-donate-form {
    margin-top: 0;
    justify-content: center;
    width: 100%;
  }

  /* Stacked tier cards don't need the same generous 40/32 padding they
     got as wide horizontal tiles — tightening it keeps the left column
     from getting uncomfortably tall next to the Donorbox widget. */
  .pri-campaign-contribute-row .pri-campaign-tier-card {
    padding: 28px 32px;
  }
}

/* Flex container for CTA buttons in the final CTA band */
.pri-campaign-cta-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Style the Donorbox popup button to match our pill-shaped button style */
.pri-campaign-final-cta dbox-widget {
  display: inline-flex;
  align-items: center;
}

/* Campaign Overview — Featured spotlight card */
.pri-campaign-spotlight {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  background-color: var(--color-bg);
  border-radius: var(--radius-card-large);
  overflow: hidden;
}

.pri-campaign-spotlight-image {
  width: 100%;
  height: 100%;
  min-height: 360px;
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, var(--color-pink) 0%, var(--color-pink-light) 100%);
  object-fit: cover;
}

.pri-campaign-spotlight-content {
  padding: 48px 48px 48px 0;
}

.pri-campaign-spotlight h2 {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  margin-bottom: 16px;
  line-height: 1.2;
}

.pri-campaign-spotlight p {
  color: var(--color-text-tertiary);
  line-height: 1.6;
  margin-bottom: 24px;
}

.pri-campaign-spotlight-stats {
  display: flex;
  gap: 32px;
  margin-bottom: 32px;
}

.pri-campaign-spotlight-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-pink);
  line-height: 1.2;
}

.pri-campaign-spotlight-stat-label {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* Campaign Overview — Campaign card grid */
.pri-campaign-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 32px;
}

.pri-campaign-card {
  background-color: var(--color-bg);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}

.pri-campaign-card:hover {
  box-shadow: 0 20px 40px rgba(36, 36, 36, 0.06);
  transform: translateY(-4px);
}

.pri-campaign-card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--color-pink) 0%, var(--color-pink-light) 100%);
  object-fit: cover;
}

.pri-campaign-card-body {
  padding: 24px;
}

.pri-campaign-card-body h4 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.3;
}

.pri-campaign-card-body p {
  color: var(--color-text-tertiary);
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 16px;
}

.pri-campaign-progress {
  width: 100%;
  height: 6px;
  background-color: var(--color-bg-grey);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: 16px;
}

.pri-campaign-progress-fill {
  height: 100%;
  background-color: var(--color-pink);
  border-radius: var(--radius-pill);
  transition: width 0.6s ease;
}

.pri-campaign-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-pink);
  transition: gap 0.3s ease;
}

.pri-campaign-card-link:hover {
  gap: 14px;
  color: var(--color-pink-hover);
}

/* Campaign Overview — Fundraiser CTA section */
.pri-campaign-fundraiser {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.pri-campaign-fundraiser h2 {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 24px;
}

.pri-campaign-fundraiser p {
  font-size: 18px;
  color: var(--color-text-tertiary);
  line-height: 1.7;
  margin-bottom: 32px;
}

.pri-campaign-fundraiser-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, var(--color-pink-light) 0%, var(--color-pink-tint) 100%);
}

/* "View All Campaigns" centered CTA row below the recent-campaigns grid */
.pri-campaign-view-all {
  margin-top: 48px;
  text-align: center;
}

.pri-campaign-view-all .pri-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Breadcrumb navigation (used on All Campaigns and sub-pages) */
.pri-breadcrumb {
  font-size: 14px;
  color: var(--color-text-tertiary);
  margin-bottom: 24px;
}

.pri-breadcrumb a {
  color: var(--color-pink);
  text-decoration: none;
}

.pri-breadcrumb a:hover {
  text-decoration: underline;
}

.pri-breadcrumb-sep {
  margin: 0 8px;
  color: var(--color-text-tertiary);
}

/* Governance page CTA wrapper */
.pri-gov-cta-wrap {
  margin-top: 40px;
}

/* Report-a-Concern form layout */
.pri-form-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.pri-form-group {
  flex: 1;
  min-width: 200px;
}

.pri-form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}

.pri-form-group input,
.pri-form-group select,
.pri-form-group textarea {
  width: 100%;
  font-family: var(--font-family);
  font-size: 16px;
  padding: 12px 16px;
  border: 1px solid var(--color-bg-grey);
  border-radius: 12px;
  transition: border-color 0.2s ease;
}

.pri-form-group input:focus,
.pri-form-group select:focus,
.pri-form-group textarea:focus {
  outline: none;
  border-color: var(--color-pink);
}

/* Report form — full-width standalone fields (select, textarea, file, email) */
.pri-form-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}

.pri-form-field input,
.pri-form-field select,
.pri-form-field textarea {
  width: 100%;
  font-family: var(--font-family);
  font-size: 16px;
  padding: 14px 20px;
  border-radius: var(--radius-card);
  border: none;
  background-color: var(--color-bg-grey);
  color: var(--color-text);
}

.pri-form-field textarea {
  resize: vertical;
}

.pri-form-field input[type="file"] {
  cursor: pointer;
}

/* Form hint text below inputs */
.pri-form-hint {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 6px;
}

/* Form terms checkbox row */
.pri-form-terms {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.pri-form-terms input[type="checkbox"] {
  margin-top: 4px;
  accent-color: var(--color-pink);
}

.pri-form-terms label {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* Alert box (pink tint background for warnings) */
.pri-alert-box {
  background-color: var(--color-pink-tint);
  padding: 16px 24px;
  border-radius: 12px;
  margin-top: 24px;
}

/* Impact stats grid (4-col auto-fit) */
.pri-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
  text-align: center;
}

/* Global Impact hero heading */
.pri-hero-heading-lg {
  font-size: clamp(32px, 5vw, 44px);
  font-weight: 600;
  line-height: 1.2;
}

/* Report form layout — vertical flex with gap */
.pri-form-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Muted subtitle for legal page heroes */
.pri-text-muted-subtitle {
  color: var(--color-text-muted);
  margin-top: 8px;
}

/* Form bottom note */
.pri-form-footnote {
  margin-top: 32px;
  font-size: 14px;
  color: var(--color-text-muted);
}

/* ──────────────────────────────────────────
   RESPONSIVE — TABLET (max 1024px)
   ────────────────────────────────────────── */

@media (max-width: 1024px) {
  h1 { font-size: 48px; }
  h2 { font-size: 36px; }
  h3 { font-size: 28px; }
  h4 { font-size: 22px; }
  h5 { font-size: 18px; }
  h6 { font-size: 16px; }

  .pri-tagline-os {
    font-size: clamp(36px, 10vw, 64px);
  }

  .pri-btn {
    padding: 15px 30px;
    font-size: 14px;
  }

  /* ── Mobile Navigation ── */

  .pri-hamburger {
    display: flex;
  }

  .pri-header-donate-btn {
    display: none !important;
  }

  .pri-nav-overlay {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    background-color: var(--color-bg);
    z-index: 300;
    padding: 96px var(--edge-padding-mobile) 32px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }

  .pri-nav-overlay.pri-nav--open {
    transform: translateX(0);
  }

  .pri-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .pri-nav > li > a {
    padding: 16px 0;
    font-size: 18px;
    border-bottom: 1px solid var(--color-bg-grey);
  }

  /* Dropdown link doubles as toggle on mobile — styled like the old button */
  .pri-nav > li > .pri-nav-dropdown-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-tertiary);
    border-bottom: 1px solid var(--color-bg-grey);
  }

  /* Show chevron on mobile */
  .pri-nav-dropdown-link .pri-nav-chevron {
    display: inline-block;
  }

  .pri-nav-dropdown:hover .pri-nav-dropdown-menu {
    display: none;
  }

  .pri-nav-dropdown-menu {
    position: static;
    box-shadow: none;
    border-radius: 0;
    padding: 0 0 0 20px;
    min-width: auto;
  }

  .pri-nav-dropdown.pri-nav-dropdown--open > .pri-nav-dropdown-menu {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .pri-nav-dropdown--open > .pri-nav-dropdown-link .pri-nav-chevron {
    transform: rotate(-135deg);
  }

  .pri-nav-dropdown-menu a {
    padding: 12px 0;
    font-size: 16px;
    font-weight: 400;
    border-bottom: 1px solid var(--color-bg-grey);
  }

  .pri-mobile-only {
    display: block;
  }

  .pri-nav-donate-btn {
    display: inline-flex !important;
    margin-top: 24px;
    width: 100%;
    justify-content: center;
  }

  .pri-gov-hero {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .pri-gov-hero h1 {
    font-size: 44px;
  }

  .pri-gov-grid {
    grid-template-columns: 1fr;
  }

  .pri-gov-narrative {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .pri-gov-narrative h2 {
    font-size: 36px;
  }

  .pri-gov-image-overlay {
    position: relative;
    bottom: auto;
    left: auto;
    margin-top: 20px;
  }

  .pri-campaign-hero {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .pri-campaign-hero h1 {
    font-size: 44px;
  }

  .pri-campaign-stats-bar {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .pri-campaign-stat:not(:last-child)::after {
    display: none;
  }

  .pri-campaign-narrative {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .pri-campaign-tier-grid {
    grid-template-columns: 1fr;
  }

  .pri-campaign-pledge {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }

  .pri-campaign-pledge-info {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .pri-campaign-spotlight {
    grid-template-columns: 1fr;
  }

  .pri-campaign-spotlight-content {
    padding: 32px;
  }

  .pri-campaign-spotlight-stats {
    flex-wrap: wrap;
    gap: 24px;
  }

  .pri-campaign-fundraiser {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .pri-campaign-final-cta .pri-btn {
    display: block;
    margin: 8px auto;
    width: fit-content;
  }

  .pri-footer {
    border-radius: var(--radius-footer-tablet);
    margin: 24px 20px 12px 20px;
    padding: 23px 16px;
  }

  .pri-header {
    padding: 0 var(--edge-padding-mobile);
  }

  .pri-container {
    padding-left: var(--edge-padding-mobile);
    padding-right: var(--edge-padding-mobile);
  }

  .pri-section {
    padding-top: var(--section-padding-mobile);
    padding-bottom: var(--section-padding-mobile);
  }
}

/* ──────────────────────────────────────────
   RESPONSIVE — MOBILE (max 767px)
   ────────────────────────────────────────── */

@media (max-width: 767px) {

  /* ── Step 3: Mobile Typography Scale ── */
  body { font-size: 16px; }
  h1 { font-size: 36px; margin-bottom: 16px; }
  h2 { font-size: 28px; margin-bottom: 16px; }
  h3 { font-size: 24px; margin-bottom: 12px; }
  h4 { font-size: 20px; }
  h5 { font-size: 18px; }
  h6 { font-size: 16px; }

  .pri-section-label { font-size: 14px; }
  .pri-text-subtitle { font-size: 17px; }

  /* ── Step 4: Mobile Layout Fixes ── */

  /* Header */
  .pri-header { min-height: 72px; }
  .pri-header-logo img { max-width: 144px; }

  /* Hero buttons — stack vertically, full width */
  .pri-hero-actions {
    flex-direction: column;
  }

  .pri-hero-actions .pri-btn {
    width: 100%;
    justify-content: center;
  }

  /* Footer — single column stack */
  .pri-footer {
    border-radius: var(--radius-footer-mobile);
    margin: 20px 16px 12px 16px;
    padding: 32px 20px;
  }

  .pri-footer-columns {
    flex-direction: column;
    gap: 32px;
  }

  .pri-footer-description {
    max-width: none;
  }

  /* Stats */
  .pri-stat-number { font-size: 40px; }
  .pri-stat-number-large { font-size: 40px; }

  /* Grids — collapse to single column when needed */
  .pri-grid-2col,
  .pri-grid-3col,
  .pri-grid-4col {
    grid-template-columns: 1fr;
  }

  /* Cards */
  .pri-card-body { padding: 20px; }

  /* Person photos grid */
  .pri-person-photo {
    width: 120px;
    height: 120px;
  }

  /* Form rows — stack on mobile */
  .pri-form-row {
    flex-direction: column;
    gap: 16px;
  }

  .pri-form-group {
    min-width: auto;
  }

  /* Legal headings — tighten spacing */
  .pri-legal-heading {
    font-size: 20px;
    margin-top: 32px;
  }

  /* CTA band */
  .pri-cta-band {
    padding: 40px var(--edge-padding-mobile);
  }

  .pri-cta-band-text {
    font-size: 16px;
  }

  /* Campaign page overrides */
  .pri-campaign-hero-actions {
    flex-direction: column;
  }

  .pri-campaign-hero-actions .pri-btn {
    width: 100%;
    justify-content: center;
  }

  .pri-campaign-stat-number { font-size: 32px; }
  .pri-campaign-tier-amount { font-size: 28px; }
  .pri-campaign-pledge-number { font-size: 72px; }
  .pri-campaign-card-body h4 { font-size: 20px; }

  .pri-campaign-spotlight-stats {
    flex-direction: column;
    gap: 16px;
  }

  /* Donation widget */
  .pri-donate-widget {
    padding: 24px 20px;
  }

  .pri-donate-amounts {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Governance page */
  .pri-gov-hero h1 { font-size: 36px; }
  .pri-gov-card h3 { font-size: 22px; }
  .pri-gov-card { padding: 32px 24px; }
  .pri-gov-narrative h2 { font-size: 28px; }
}

/* ──────────────────────────────────────────
   DONATION WIDGET
   ────────────────────────────────────────── */

.pri-donate-widget {
  max-width: 640px;
  margin: 0 auto;
  padding: 40px;
  background: var(--color-bg);
  border-radius: var(--radius-card);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.pri-donate-widget-section {
  margin-bottom: 28px;
}

.pri-donate-widget-section:last-child {
  margin-bottom: 0;
}

.pri-donate-widget-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}

.pri-donate-amounts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.pri-donate-amount-btn {
  padding: 14px 8px;
  border: 2px solid rgba(36, 36, 36, 0.12);
  border-radius: 100px;
  background: var(--color-bg);
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
  text-align: center;
}

.pri-donate-amount-btn:hover {
  border-color: var(--color-pink);
  color: var(--color-pink);
}

.pri-donate-amount-btn.pri-active {
  border-color: var(--color-pink);
  background: var(--color-pink);
  color: #fff;
}

.pri-donate-custom-wrap {
  position: relative;
  margin-top: 10px;
}

.pri-donate-custom-wrap .pri-donate-currency {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-muted);
  pointer-events: none;
}

.pri-donate-custom-input {
  width: 100%;
  padding: 14px 16px 14px 36px;
  border: 2px solid rgba(36, 36, 36, 0.12);
  border-radius: 100px;
  font-family: var(--font-family);
  font-size: 16px;
  background: var(--color-bg);
  box-sizing: border-box;
}

.pri-donate-custom-input:focus {
  outline: none;
  border-color: var(--color-pink);
}

.pri-donate-custom-input.pri-active {
  border-color: var(--color-pink);
}

.pri-donate-frequency {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.pri-donate-freq-btn {
  padding: 14px;
  border: 2px solid rgba(36, 36, 36, 0.12);
  border-radius: 100px;
  background: var(--color-bg);
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
  text-align: center;
}

.pri-donate-freq-btn:hover {
  border-color: var(--color-pink);
  color: var(--color-pink);
}

.pri-donate-freq-btn.pri-active {
  border-color: var(--color-pink);
  background: var(--color-pink);
  color: #fff;
}

.pri-donate-submit {
  width: 100%;
  padding: 18px;
  font-size: 18px;
  margin-top: 8px;
}

.pri-donate-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.pri-donate-error {
  color: #d32f2f;
  font-size: 14px;
  text-align: center;
  margin-top: 12px;
  display: none;
}

.pri-donate-error.pri-visible {
  display: block;
}

.pri-donate-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.pri-donate-secure svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ──────────────────────────────────────────
   V37 SHARED UTILITIES
   Moved from css/v37-home.css on 21 Apr 2026 (CLAUDE.md v2.9, Phase 2).
   These are utilities used by multiple V37 pages. Centralising them here
   means every page (including legacy pages that only load pinkribbon.css)
   has access to them — useful for future migrations and micro-fixes.
   See Instructions/2026-04-21_V37_CSS_Audit.md for the full plan.
   ────────────────────────────────────────── */

/* .lab — Eyebrow label. Small uppercase monospace caption that sits
   above section headings throughout V37. Used on: home (many sections),
   about (many sections), donate, campaigns-hub, all-campaigns,
   governance-hub. Relies on the Space Mono font loaded via head-meta.html. */
.lab {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--pk);
    margin-bottom: 12px;
}

/* .reveal / .reveal-child / .reveal-parent — Scroll reveal system.
   JS on each V37 page (inline <script>) uses IntersectionObserver to add
   a .revealed class to elements that have .reveal or .reveal-parent when
   they enter the viewport. Used on every V37 page.

   Usage:
     <section class="reveal">...</section>              → single fade-in
     <div class="reveal-parent">                        → parent watcher
       <div class="reveal-child">...</div>              → staggered children
     </div>

   The prefers-reduced-motion rule in the ACCESSIBILITY SAFEGUARDS
   section below overrides these transitions to 0.01ms for users who
   request reduced motion (WCAG 2.1 SC 2.3.3). */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .6s cubic-bezier(0.16, 1, 0.3, 1),
        transform .6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.reveal-child {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .6s cubic-bezier(0.16, 1, 0.3, 1),
        transform .6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-parent.revealed .reveal-child {
    opacity: 1;
    transform: translateY(0);
}

/* .pull-quote — Italic centred quotation block for highlighting a
   short quote within prose. Used on: home (Désirée founder quote),
   about (multiple). The <em> child flips back to upright pink so a key
   word can visually pop out of the italic phrase.

   NOTE (21 Apr 2026): 'Playfair Display' is NOT loaded by head-meta.html
   (only Lato, Outfit, Space Mono are). This means every .pull-quote has
   been silently falling back to the OS default serif (Georgia on macOS,
   Times New Roman on Windows). Pre-existing issue, tracked as a
   follow-up — not introduced by this migration. */
.pull-quote {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: clamp(24px, 3.2vw, 36px);
    color: var(--anth);
    line-height: 1.5;
    max-width: 720px;
    margin: 64px auto;
    text-align: center;
    padding: 0 24px;
}

.pull-quote em {
    font-style: normal;
    color: var(--pk);
}

/* ──────────────────────────────────────────
   ACCESSIBILITY SAFEGUARDS
   ────────────────────────────────────────── */

html {
  overflow-x: hidden;
}

:focus-visible {
  outline: 3px solid var(--color-pink);
  outline-offset: 2px;
}

.pri-btn:focus-visible {
  outline: 3px solid var(--color-pink-hover);
  outline-offset: 3px;
}

.pri-hamburger:focus-visible {
  outline: 3px solid var(--color-pink);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════════
   V37 DESIGN SYSTEM
   Merged from css/v37-home.css on 21 April 2026.
   Contains: base overrides (Outfit font, scroll-behavior), .wrap container,
   hero carousel, proof strip, manifesto slab, action paths, pledge counter,
   cancers grid, TRL ladder, institutions, chain, stories, CTA, donate page,
   campaign cards, governance, about page, and all V37-specific responsive rules.
   ══════════════════════════════════════════════════════════════════════════════ */

html {
    scroll-behavior: smooth
}

body {
    font-family: 'Outfit', sans-serif;
    color: var(--anth);
    background: var(--wh);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased
}

.wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 64px;
    position: relative
}

@media(max-width:900px) {
    .wrap {
        padding: 0 24px
    }
}

/* ━━━ NAV ━━━
   Migrated to css/pinkribbon.css on 20 Apr 2026 so all 16 pages
   (including the 6 not-yet-V37-redesigned ones) get the shared nav
   styling. The rules for .nav-bar, .nav-inner, .n-logo, .n-links,
   .n-dropdown, .n-dropdown-trigger, and .n-cta now live under the
   "TOP NAVIGATION (V37 nav bar)" section in pinkribbon.css. */

/* ━━━ HERO ━━━ */
.hero-split {
    padding-top: 72px
}

.h-eyebrow {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--pk);
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px
}

.h-eyebrow::before {
    content: '';
    width: 40px;
    height: 1px;
    background: var(--pk)
}

.h-title {
    font-size: clamp(56px, 7.5vw, 100px);
    font-weight: 800;
    line-height: .88;
    color: var(--anth);
    max-width: 860px;
    letter-spacing: -4px
}

.h-title i {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    color: var(--pk)
}

.h-line {
    width: 80px;
    height: 2px;
    margin: 40px 0 28px;
    background: linear-gradient(90deg, var(--au), transparent)
}

.h-body {
    font-size: 17px;
    color: var(--muted);
    max-width: 560px;
    font-weight: 400;
    line-height: 1.9
}

.h-body b {
    color: var(--anth);
    font-weight: 500
}

.h-actions {
    display: flex;
    gap: 16px;
    margin-top: 40px
}

.btn-a {
    background: var(--pk);
    color: var(--wh);
    padding: 16px 40px;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    border: none;
    font-family: 'Outfit';
    font-weight: 600;
    cursor: pointer;
    transition: all .25s;
    border-radius: 999px
}

.btn-a:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(255, 102, 153, .18)
}

.btn-b {
    background: transparent;
    color: var(--anth);
    padding: 16px 40px;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    border: 1px solid rgba(54, 57, 61, .15);
    font-family: 'Outfit';
    font-weight: 400;
    cursor: pointer;
    transition: all .25s;
    border-radius: 999px
}

.btn-b:hover {
    border-color: var(--pk);
    color: var(--pk)
}

/* Proof strip */
.proof-strip {
    border-top: 1px solid rgba(54, 57, 61, .06);
    display: grid;
    grid-template-columns: repeat(4, 1fr)
}

.proof-cell {
    padding: 20px 0;
    border-right: 1px solid rgba(54, 57, 61, .06)
}

.proof-cell:last-child {
    border: none
}

.proof-k {
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--au);
    margin-bottom: 4px
}

.proof-v {
    font-size: 14px;
    color: var(--muted);
    font-weight: 400
}

.proof-v b {
    color: var(--anth);
    font-weight: 600
}

/* ━━━ SLAB ━━━ */
.slab {
    background: var(--pk);
    padding: 60px 0;
    position: relative;
    overflow: hidden;
    margin: 0 24px;
    border-radius: 24px;
    max-height: 393px
}

.slab-geo1 {
    position: absolute;
    right: -60px;
    top: -60px;
    width: 300px;
    height: 300px;
    border: 36px solid rgba(255, 255, 255, .10);
    border-radius: 50%;
    pointer-events: none
}

.slab-geo2 {
    position: absolute;
    left: 48px;
    bottom: -40px;
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, .10);
    transform: rotate(45deg);
    pointer-events: none
}

.slab-text {
    font-size: clamp(28px, 4.2vw, 54px);
    font-weight: 800;
    color: var(--wh);
    line-height: 1.08;
    max-width: 780px;
    position: relative;
    z-index: 1
}

.slab-text i {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-style: italic;
    color: #fff
}

.slab-sub {
    font-size: 15px;
    /* Readable-pink-text rollout: was color rgba(255,255,255,.75) + weight 300 (Light),
       which reads as washed/thin on the pink slab. Matched to the proven .fin-teaser
       treatment: #fff + Medium 500. */
    color: #fff;
    max-width: 540px;
    margin-top: 20px;
    font-weight: 500;
    line-height: 1.75;
    position: relative;
    z-index: 1
}

/* ━━━ TRL ━━━ */
.trl {
    background: var(--wh);
    padding: 120px 0;
    border: 1px solid var(--stone);
    margin: 32px 24px;
    border-radius: 24px;
    box-shadow: 0 4px 32px rgba(0, 0, 0, .03)
}

.trl-top {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 72px;
    align-items: start
}

.trl-left {
    position: sticky;
    top: 100px
}

/* .lab — moved to css/pinkribbon.css on 21 Apr 2026 (Phase 2, v2.9).
   See the V37 SHARED UTILITIES section there. */

.trl-left h2 {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.08;
    color: var(--anth);
    letter-spacing: -1px;
    margin-bottom: 20px
}

.trl-left p {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.85
}

.trl-left p b {
    color: var(--anth);
    font-weight: 600
}

.trl-bar {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 4px
}

.ts {
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    border-radius: 12px;
    font-weight: 700;
    transition: all .3s
}

.ts-off {
    background: var(--parchment);
    color: var(--warm)
}

.ts-on {
    background: rgba(255, 102, 153, .1);
    color: var(--pk)
}

.ts-edge {
    background: rgba(255, 102, 153, .1);
    color: var(--pk)
}

.trl-zones {
    display: grid;
    grid-template-columns: 2fr 3fr 4fr;
    margin-top: 8px
}

.tz {
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    padding: 8px 0
}

.tz-a {
    color: var(--warm)
}

.tz-b {
    color: var(--pk);
    font-weight: 700;
    border-top: 2px solid var(--pk)
}

.tz-c {
    color: var(--warm)
}

.trl-callout {
    margin-top: 32px;
    padding: 32px 36px;
    background: var(--wh);
    border-left: 3px solid var(--pk);
    border-radius: 0 16px 16px 0
}

.trl-callout h3 {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--pk);
    margin-bottom: 12px
}

.trl-callout p {
    font-size: 15px;
    line-height: 1.85;
    color: var(--anth);
    font-weight: 400
}

.trl-callout p b {
    font-weight: 600
}

.trl-cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-top: 32px
}

.tc {
    padding: 28px;
    border: 1px solid var(--stone);
    transition: all .3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    border-radius: 16px
}

.tc::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--pk);
    transform: scaleX(0);
    transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: left
}

.tc:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, .06)
}

.tc:hover::after {
    transform: scaleX(1)
}

.tc:nth-child(1) {
    background: rgba(255, 102, 153, .08)
}

.tc:nth-child(2) {
    background: rgba(255, 102, 153, .04)
}

.tc:nth-child(3) {
    background: rgba(255, 102, 153, .06)
}

.tc-n {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    /* Bumped from default 400 to 700 (20 Apr 2026): the TRL 3/4/5 labels were
       reading too faint against the pink tint backgrounds. Space Mono 700 is
       already loaded via the homepage's Google Fonts link — no extra weight. */
    font-weight: 700;
    color: var(--pk);
    letter-spacing: 2px;
    margin-bottom: 8px
}

.tc h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--anth)
}

.tc p {
    font-size: 12px;
    color: rgba(54, 57, 61, .7);
    line-height: 1.65
}

/* ━━━ FIVE CANCERS — Lambretta colours ━━━ */
.cancers {
    background: var(--parchment);
    padding: 120px 0;
    border: 1px solid var(--stone);
    margin: 32px 24px;
    border-radius: 24px
}

.cancer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 48px
}

/*
 * Short italic caption under the section heading that explains the visual
 * grammar of the tiles (light = common, deep = rare / under-researched).
 * Sits between the primary description and the tile grid.
 */
.cancer-meaning {
    font-size: 13px;
    color: var(--muted);
    max-width: 580px;
    line-height: 1.75;
    margin-top: 12px;
    font-style: italic
}

.cancer-meaning b {
    color: var(--anth);
    font-weight: 700;
    font-style: normal
}

/*
 * Horizontal gradient legend shown below the cancer grid. The gradient stops
 * exactly match the seven per-tile shades above (#FFEEF3 -> #FF92B5), so the
 * bar acts as a visual key for the tile colours without having to hover each.
 */
.cancer-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted)
}

.cancer-legend-bar {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg,
        #FFEEF3 0%,
        #FFDDEA 16.66%,
        #FFCDDF 33.33%,
        #FFBED4 50%,
        #FFAEC9 66.66%,
        #FFA0BF 83.33%,
        #FF92B5 100%
    );
    box-shadow: inset 0 0 0 1px rgba(255, 102, 153, .08)
}

.cancer-legend-end {
    flex-shrink: 0
}

.cp {
    padding: 28px 16px;
    text-align: center;
    transition: all .3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    color: var(--anth)
}

/*
 * Per-tile pink shades for the cancer grid.
 * Intensity is mapped to how well-known / well-researched each cancer is:
 * the lightest shade goes to the most common cancer (Breast) and the
 * deepest shade goes to the most under-researched one (Vulval). All seven
 * shades stay lighter than the brand pink (--pk: #FF6699) so the shared
 * hover transition to --pk still reads as a clear "deepen" on every tile.
 * Position-based (nth-child) because the tile list is stable; if tiles
 * ever get reordered or added, update the mapping below.
 */
.cancer-grid .cp:nth-child(1) { background: #FFEEF3; } /* Breast — most common */
.cancer-grid .cp:nth-child(2) { background: #FFDDEA; } /* Cervical — preventable */
.cancer-grid .cp:nth-child(3) { background: #FFCDDF; } /* Ovarian — silent killer */
.cancer-grid .cp:nth-child(4) { background: #FFBED4; } /* Fallopian tube — often grouped with ovarian */
.cancer-grid .cp:nth-child(5) { background: #FFAEC9; } /* Womb (uterine) — rising incidence */
.cancer-grid .cp:nth-child(6) { background: #FFA0BF; } /* Vaginal — very rare */
.cancer-grid .cp:nth-child(7) { background: #FF92B5; } /* Vulval — under-researched */

.cp::after {
    display: none
}

.cp:hover {
    background: var(--pk);
    color: var(--wh);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(36, 36, 36, .06)
}

.cp:hover p {
    opacity: .85
}

.cp h4 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px
}

.cp p {
    font-family: 'Space Mono', monospace;
    font-size: 8px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: .6
}

/* ━━━ INSTITUTIONS ━━━ */
.inst {
    background: #FFF0F5;
    padding: 120px 0;
    color: var(--anth);
    margin: 0 24px;
    border-radius: 24px;
    border: 1px solid rgba(255, 102, 153, .12)
}

.inst-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    margin-top: 48px
}

.ic {
    background: #fff;
    border: 1px solid rgba(255, 102, 153, .15);
    padding: 40px 32px;
    transition: all .3s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(255, 102, 153, .06)
}

.ic::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--pk);
    transition: height .3s cubic-bezier(0.16, 1, 0.3, 1);
}

.ic:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(255, 102, 153, .12);
    border-color: rgba(255, 102, 153, .25)
}

.ic:hover::before {
    height: 6px;
}

.ic-rank {
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--pk);
    margin-bottom: 16px
}

.ic-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--anth);
    margin-bottom: 4px
}

.ic-loc {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 16px
}

.ic-focus {
    font-size: 13px;
    color: var(--pk);
    line-height: 1.55;
    margin-bottom: 12px
}

.ic-people {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.7
}

.ic-people b {
    color: var(--anth);
    font-weight: 500
}

.srac {
    margin-top: 48px;
    border: 1px solid rgba(255, 102, 153, .15);
    padding: 36px 32px;
    border-radius: 20px;
    background: #fff
}

.srac-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px
}

.srac-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--anth)
}

/* .srac-badge — "INDEPENDENT PEER REVIEW" pill next to the SRAC heading on
   both the homepage (`.srac-top`) and the About page (`.about-srac-header`).
   Readability fix (21 Apr 2026, CLAUDE.md v2.8):
     - Text was var(--pk) #FF6699 on the pale-pink card (#FFF0F5 on About,
       near-white on home). That gave ~2.9:1 contrast and FAILED WCAG AA.
     - Now text is var(--anth) #36393D for ~12:1 contrast (passes AAA).
     - Kept the pink border + pink background tint so the pill still reads
       as a brand accent — pink now lives in the chrome, not the text.
     - Font bumped 9px → 11px and letter-spacing tightened 2px → 1.5px so
       "INDEPENDENT PEER REVIEW" reads as words, not as isolated characters.
     - Padding +1px vertical to balance the larger text. */
.srac-badge {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--anth);
    border: 1px solid rgba(255, 102, 153, .35);
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 102, 153, .08)
}

.srac-desc {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: 20px;
    max-width: 600px
}

.srac-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.st {
    font-size: 10px;
    padding: 6px 14px;
    border: 1px solid rgba(255, 102, 153, .15);
    color: var(--anth);
    display: flex;
    gap: 6px;
    align-items: center;
    transition: all .3s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 999px;
    background: rgba(255, 102, 153, .04)
}

.st:hover {
    border-color: rgba(255, 102, 153, .3);
    background: rgba(255, 102, 153, .08);
    transform: scale(1.03) rotate(var(--chip-rotate, 1deg));
}

.st em {
    font-style: normal;
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    color: var(--pk);
    letter-spacing: 1px
}

/* ━━━ 85|15 ━━━ */
.pledge {
    background: var(--wh);
    padding: 120px 0;
    position: relative;
    overflow: hidden;
    margin: 32px 24px;
    border-radius: 24px;
    border: 1px solid var(--stone)
}

.b-circle {
    position: absolute;
    right: -100px;
    top: -100px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(255, 102, 153, .03);
    pointer-events: none
}

.pledge-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    position: relative;
    z-index: 1
}

.pledge-left h2 {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.06;
    color: var(--anth);
    letter-spacing: -1px;
    margin-bottom: 20px
}

.pledge-left h2 i {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-style: italic;
    color: var(--pk)
}

.pledge-left p {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.85;
    max-width: 420px
}

.pledge-left p b {
    color: var(--anth);
    font-weight: 600
}

.pledge-right {
    text-align: center
}

.pledge-big {
    font-size: clamp(100px, 13vw, 168px);
    font-weight: 800;
    color: var(--anth);
    line-height: .82;
    letter-spacing: -6px
}

.pledge-big em {
    font-style: normal;
    display: inline-block;
    width: 10px;
    min-width: 10px;
    /* Height bumped from 0.58em to 0.78em on 21 Apr 2026 so the pink separator
       matches the cap-height of the adjacent 85 and 15 numerals instead of
       looking like a short sliver. */
    height: 0.78em;
    /* Horizontal margin roughly doubled (0.06em -> 0.14em) to give the bar
       real breathing room between the numerals. Em-relative, so it scales
       correctly at every breakpoint. */
    margin: 0 0.14em;
    vertical-align: middle;
    background: var(--pk);
    border-radius: 2px;
    color: transparent;
    overflow: hidden;
    line-height: 1
}

.p-bar {
    height: 12px;
    background: var(--stone);
    border-radius: 6px;
    overflow: hidden;
    margin-top: 28px
}

.p-fill {
    height: 100%;
    width: 85%;
    background: var(--pk);
    border-radius: 6px
}

.p-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted)
}

/* ━━━ CHAIN ━━━ */
.chain {
    background: var(--parchment);
    padding: 120px 0;
    border-top: 1px solid var(--stone);
    border-bottom: 1px solid var(--stone);
    margin: 0 24px;
    border-radius: 24px;
    border: 1px solid var(--stone)
}

.chain-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 48px
}

.cs {
    padding: 32px 24px;
    border-right: 1px solid var(--stone);
    position: relative
}

.cs:last-child {
    border: none
}

.cs-n {
    font-family: 'Space Mono', monospace;
    font-size: 28px;
    font-weight: 700;
    /* Opacity bumped from .12 to .55 (20 Apr 2026): at .12 the 01/02/03/04
       step numerals were nearly invisible on the off-white chain background —
       failing even informal legibility. .55 keeps them as a clearly decorative
       pink marker (still softer than the h3 titles) while being actually
       readable. Using rgba lets us keep them tinted rather than solid pink. */
    color: rgba(255, 102, 153, .55);
    margin-bottom: 12px
}

.cs h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--anth);
    margin-bottom: 8px
}

.cs p {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.65
}

/* ━━━ QUOTE ━━━ */
.quote-section {
    background: var(--wh);
    padding: 120px 0;
    border-left: 4px solid var(--pk);
    margin: 0 24px;
    border-radius: 24px;
    box-shadow: 0 4px 32px rgba(0, 0, 0, .03)
}

.quote-text {
    font-size: clamp(18px, 2.4vw, 24px);
    color: var(--anth);
    line-height: 1.85;
    max-width: 760px;
    font-weight: 400
}

.quote-text em {
    font-style: normal;
    color: var(--pk);
    font-weight: 500
}

.quote-attr {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: var(--warm);
    margin-top: 24px;
    letter-spacing: 3px;
    text-transform: uppercase
}

/* ━━━ COLLABS ━━━ */
.collabs {
    background: var(--wh);
    padding: 120px 0;
    border: 1px solid var(--stone);
    margin: 32px 24px;
    border-radius: 24px
}

.brand-row {
    display: flex;
    gap: 20px;
    margin-top: 28px;
    flex-wrap: wrap
}

.br {
    width: 140px;
    height: 56px;
    border: 1px solid var(--stone);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    color: var(--warm);
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: all .3s;
    background: var(--wh);
    border-radius: 14px
}

.br:hover {
    border-color: var(--pk);
    color: var(--pk)
}

.br-you {
    border-style: dashed;
    color: var(--pk);
    background: transparent
}

/* ━━━ CTA ━━━ */
.cta-final {
    background: var(--pk);
    padding: 30px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin: 0 24px;
    border-radius: 24px
}

.cta-g1 {
    position: absolute;
    left: -50px;
    bottom: -50px;
    width: 220px;
    height: 220px;
    border: 36px solid rgba(255, 255, 255, .06);
    border-radius: 50%;
    pointer-events: none
}

.cta-g2 {
    position: absolute;
    right: 80px;
    top: -30px;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, .05);
    transform: rotate(45deg);
    pointer-events: none
}

.cta-slogan {
    font-size: clamp(28px, 4vw, 56px) !important;
    position: relative;
    z-index: 1;
    margin: 0 auto 8px !important;
    white-space: nowrap;
    /* Centering fix (20 Apr 2026).
       The .cta-final .wrap>p rule below sets max-width: 500px on every direct
       <p> child to keep the "Monthly donors..." body text readable. That same
       constraint was being applied to the tagline, and because the tagline
       uses white-space: nowrap the text overflowed the 500px box and rendered
       visually off-center (~100px right of the true viewport centre on a
       ~1350px screen). Opting the tagline out of the max-width lets the block
       expand to its natural width and the inherited text-align: center (from
       .pri-tagline-os / .cta-final) actually centres it on the page. */
    max-width: none !important;
    text-align: center !important;
}

.cta-slogan .pink {
    color: #fff !important
}

.cta-slogan .dark {
    color: var(--deep) !important
}

.cta-final .wrap>p {
    font-size: 14px;
    /* Readable-pink-text rollout: was .6 opacity white — bumped to #fff + weight 500
       for the same reason as .fin-teaser p. */
    color: #fff;
    font-weight: 500;
    margin: 10px auto 20px;
    max-width: 500px;
    font-weight: 300;
    position: relative;
    z-index: 1;
    line-height: 1.7
}

.cta-btn {
    background: var(--wh);
    color: var(--anth);
    padding: 18px 52px;
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    border: none;
    font-family: 'Outfit';
    font-weight: 700;
    cursor: pointer;
    transition: all .25s;
    position: relative;
    z-index: 1;
    border-radius: 999px
}

.cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .12)
}

/* ━━━ FOOTER — Warm medium grey ━━━ */
.foot {
    background: var(--pk);
    padding: 48px 0;
    margin: 0 24px;
    border-radius: 24px
}

.foot-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 28px;
    /* Readable-pink-text rollout: border was .12 (near-invisible). Bumped to .30 to
       match the chip border treatment in .fin-teaser .ft-item. */
    border-bottom: 1px solid rgba(255, 255, 255, .30)
}

.foot-logo {
    background: #fff;
    border-radius: 20px;
    padding: 8px 14px;
    display: inline-flex;
    align-items: center
}

.foot-logo img {
    height: 28px;
    width: auto
}

.foot-nav {
    display: flex;
    gap: 24px
}

.foot-nav a {
    font-size: 10px;
    /* Readable-pink-text rollout: was .7 opacity (muted rest state). Bumped to #fff
       + weight 500 for consistency. Primary hover cue shifts from color-change to
       the underline ::after animation below (already present). */
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    transition: color .3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

.foot-nav a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--wh);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1);
}

.foot-nav a:hover {
    color: var(--wh)
}

.foot-nav a:hover::after {
    transform: scaleX(1);
}

.foot-bot {
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    /* Readable-pink-text rollout: was Space Mono 400 at 55% white — tiny and barely
       visible on pink. Switched to Outfit Medium + #fff: dramatically clearer at 9px.
       Note: prior to this PR, 'Space Mono' was also never loaded from Google Fonts —
       that import is fixed separately in blocks/head-meta.html. */
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: 9px;
    color: #fff;
    letter-spacing: .5px;
    line-height: 1.8;
    flex-wrap: wrap;
    gap: 12px
}

/* ━━━ PLAYFUL SPACING — floating sections ━━━ */
.slab {
    margin-top: 32px;
    margin-bottom: 32px
}

.img-band {
    margin-top: 32px;
    margin-bottom: 32px
}

.inst {
    margin-top: 32px;
    margin-bottom: 32px
}

.chain {
    margin-top: 32px;
    margin-bottom: 32px
}

.quote-section {
    margin-top: 32px;
    margin-bottom: 32px
}

.cta-final {
    margin-top: 32px;
    margin-bottom: 32px
}

/* ━━━ SCROLL REVEAL SYSTEM ━━━
   Moved to css/pinkribbon.css on 21 Apr 2026 (Phase 2, v2.9). See the
   V37 SHARED UTILITIES section there. The TRL-specific bar-fill animation
   rules below (.ts, .trl-bar.revealed .ts-on, @keyframes trl-fill) stay
   here because they're homepage-only. */

/* TRL bar fill animation */
.ts {
    transition: all .3s cubic-bezier(0.16, 1, 0.3, 1);
}

.trl-bar.revealed .ts-on,
.trl-bar.revealed .ts-edge {
    animation: trl-fill .5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes trl-fill {
    from {
        opacity: 0;
        transform: scaleX(0.3);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

/* ━━━ PULL QUOTE ━━━
   Moved to css/pinkribbon.css on 21 Apr 2026 (Phase 2, v2.9). See the
   V37 SHARED UTILITIES section there. */

/* ━━━ HERO GHOST NUMBER ━━━ */
.hero-ghost {
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: clamp(140px, 20vw, 240px);
    font-weight: 800;
    color: rgba(255, 102, 153, .04);
    line-height: 1;
    pointer-events: none;
    letter-spacing: -8px;
    z-index: 0;
}

.hero-text-col {
    position: relative;
    z-index: 1;
}

/* ━━━ IMAGES ━━━ */
.hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: center;
    min-height: calc(100vh - 72px)
}

.hero-img {
    width: 100%;
    height: 100%;
    min-height: 500px;
    object-fit: cover;
    border-radius: 0 0 0 32px
}

.hero-text-col {
    padding: 64px 64px 64px 0
}

.img-band {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin: 0 24px;
}

.img-band-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 3 / 4;
}

.img-band-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.img-band-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px;
    background: linear-gradient(to top, rgba(0, 0, 0, .6) 0%, transparent 100%);
}

.img-band-overlay h4 {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

.img-band-overlay p {
    font-size: 13px;
    /* Readable-pink-text rollout: not technically on pink, but on a dark photo gradient.
       Pattern is the same — was .75 opacity. Applied #fff + weight 500 for consistency
       with the rest of the readable-text rollout. */
    color: #fff;
    font-weight: 500;
    line-height: 1.55;
}


.inst-carousel {
    position: relative;
    width: 100%;
    height: 320px;
    border: 1px solid rgba(255, 102, 153, .12);
    border-radius: 20px;
    margin-bottom: 48px;
    overflow: hidden;
}

.inst-carousel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.inst-carousel img.active {
    opacity: .9;
}

.inst-carousel-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
}

.inst-carousel-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .35);
    cursor: pointer;
    transition: background .3s;
}

.inst-carousel-dots span.active {
    background: var(--pk);
}

.inst-img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: 20px;
    margin-bottom: 48px;
    opacity: .9
}

/* ━━━ MOBILE ━━━
   Nav-related mobile overrides (.nav-inner padding, .n-links a display,
   .n-logo svg height) moved to the @media block inside pinkribbon.css on
   20 Apr 2026 — see the "TOP NAVIGATION (V37 nav bar)" section there. */
@media(max-width:900px) {
    /* Floating sections tighter on mobile */
    .slab,
    .img-band,
    .trl,
    .cancers,
    .inst,
    .pledge,
    .chain,
    .quote-section,
    .collabs,
    .cta-final {
        margin-left: 12px;
        margin-right: 12px;
        margin-top: 16px;
        margin-bottom: 16px;
        padding-top: 80px;
        padding-bottom: 80px;
        border-radius: 20px
    }

    .hero-split {
        grid-template-columns: 1fr;
        min-height: auto
    }

    .hero-text-col {
        padding: 48px 24px 48px 24px
    }

    .hero-img {
        min-height: 300px;
        border-radius: 0 0 20px 20px
    }

    .img-band {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .img-band-card {
        aspect-ratio: 4 / 3;
    }


    .inst-carousel {
        height: 220px;
        border-radius: 16px
    }

    .inst-img {
        height: 220px;
        border-radius: 16px
    }

    /* Mobile carousel: stacked above tagline, so no top margin needed — only
       bottom margin to create breathing room before the ONE WORLD | ONE FIGHT text. */
    .hero-carousel {
        height: 220px;
        border-radius: 16px;
        margin: 0 auto 20px;
    }

    .hero-text-col {
        padding: 36px 24px !important
    }

    .h-eyebrow {
        font-size: 9px;
        letter-spacing: 4px
    }

    .h-body {
        font-size: 15px
    }

    .h-actions {
        flex-direction: column;
        gap: 12px
    }

    .btn-a,
    .btn-b {
        width: 100%;
        text-align: center;
        padding: 14px 24px
    }

    .proof-strip {
        grid-template-columns: 1fr 1fr
    }

    .proof-cell {
        border-bottom: 1px solid rgba(54, 57, 61, .06)
    }

    .proof-cell:nth-child(2) {
        border-right: none
    }

    .slab-text {
        font-size: clamp(28px, 8vw, 42px)
    }

    .slab-sub {
        font-size: 14px
    }

    .trl-top {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .trl-left {
        position: static
    }

    .trl-bar {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px
    }

    .ts {
        height: 56px;
        font-size: 12px;
        border-radius: 10px
    }

    .trl-zones {
        grid-template-columns: 1fr;
        gap: 0;
        margin-top: 12px
    }

    .tz {
        text-align: left;
        padding: 4px 0;
        border-top: none !important
    }

    .tz-b {
        border-top: 2px solid var(--pk) !important;
        padding-top: 8px;
        margin-top: 4px
    }

    .trl-callout {
        padding: 24px;
        margin-top: 24px
    }

    .trl-callout p {
        font-size: 14px
    }

    .trl-cards {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .cancer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px
    }

    .cp {
        border-radius: 16px
    }

    .cancer-legend {
        gap: 10px;
        font-size: 9px;
        margin-top: 24px
    }

    .cancer-legend-end {
        max-width: 72px;
        line-height: 1.3
    }

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

    .srac {
        padding: 24px 20px
    }

    .srac-top {
        flex-direction: column;
        align-items: flex-start
    }

    .srac-list {
        gap: 6px
    }

    .pledge-grid {
        grid-template-columns: 1fr;
        gap: 48px
    }

    .pledge-big {
        font-size: 100px
    }

    .pledge-right {
        text-align: left
    }

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

    .cs {
        border-right: none;
        border-bottom: 1px solid var(--stone);
        padding: 24px 16px
    }

    .cs:nth-child(odd) {
        border-right: 1px solid var(--stone)
    }

    .cs:nth-child(3),
    .cs:nth-child(4) {
        border-bottom: none
    }

    .quote-text {
        font-size: 18px
    }

    .brand-row {
        gap: 12px
    }

    .br {
        width: calc(50% - 6px);
        height: 48px
    }

    .cta-final {
        padding: 24px 0;
        margin-left: 12px;
        margin-right: 12px
    }

    .cta-slogan {
        white-space: normal !important;
    }

    .foot-top {
        flex-direction: column;
        gap: 20px
    }

    .foot-nav {
        flex-wrap: wrap;
        gap: 12px
    }

    .foot-bot {
        flex-direction: column
    }
}

@media(max-width:480px) {
    .h-title {
        letter-spacing: -2px
    }

    .trl-left h2 {
        font-size: 28px
    }

    .pledge-big {
        font-size: 72px;
        letter-spacing: -3px
    }

    .slab-text {
        font-size: 28px
    }

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

    .cs {
        border-right: none !important
    }
}

/* ━━━ V16 NEW SECTIONS ━━━ */

/* Action Pathways */
.action-paths {
    background: var(--wh);
    padding: 120px 0;
    border: 1px solid var(--stone);
    margin: 32px 24px;
    border-radius: 24px
}

.ap-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-top: 32px
}

.ap-card {
    padding: 28px;
    border: 1px solid var(--stone);
    transition: all .3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background: var(--wh)
}

.ap-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--pk);
    transform: scaleX(0);
    transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: left
}

.ap-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, .06)
}

.ap-card:hover::after {
    transform: scaleX(1)
}

.ap-card:nth-child(1) {
    background: rgba(255, 102, 153, .08)
}

.ap-card:nth-child(2) {
    background: rgba(255, 102, 153, .05)
}

.ap-card:nth-child(3) {
    background: rgba(255, 102, 153, .06)
}

.ap-card h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--anth)
}

.ap-card p {
    font-size: 14px;
    color: rgba(54, 57, 61, .7);
    line-height: 1.7
}

/* Open Financials Teaser */
.fin-teaser {
    background: var(--pk);
    color: #fff;
    padding: 100px 0;
    margin: 32px 24px;
    border-radius: 24px;
    position: relative;
    overflow: hidden
}

.fin-teaser .lab {
    /* Readable-pink-text rollout (original test slab). Base .lab lives in
       css/pinkribbon.css (V37 SHARED UTILITIES section, moved 21 Apr 2026)
       and uses Space Mono 400 in pink — inside this pink slab it reads as
       tiny and washed-out. This rule swaps to the slab's readable Outfit
       Medium in white. Scoped via .fin-teaser so other slabs still use the
       original Space Mono/pink .lab eyebrow pattern untouched. */
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    color: #fff;
}

.fin-teaser h2 {
    font-size: 40px;
    font-weight: 800;
    color: #fff;
    line-height: 1.08;
    max-width: 640px;
    letter-spacing: -1px;
    margin-bottom: 12px
}

.fin-teaser h2 i {
    font-style: italic;
    color: var(--pk)
}

.fin-teaser p {
    font-size: 14px;
    /* Readable-pink-text rollout (original test slab).
       Original: color rgba(255,255,255,.45), weight inherited 400.
       45% opacity white on pink #FF6699 fails WCAG AA (~1.7:1, needs ≥4.5:1).
       Step 1: pure #fff (lifts ratio to ~3.14:1, still sub-AA but dramatically clearer).
       Step 2: font-weight 500 (Medium) — thicker strokes increase perceived contrast
       without reading as emphasised. */
    color: #fff;
    font-weight: 500;
    max-width: 540px;
    line-height: 1.75
}

.fin-teaser .ft-items {
    display: flex;
    gap: 32px;
    margin-top: 32px;
    flex-wrap: wrap
}

.fin-teaser .ft-item {
    /* Readable-pink-text rollout (original test slab):
       - Was Space Mono 400 at 50% white — at 10px on pink that reads as blurry/thin.
         Switched to Outfit Medium #fff to match the paragraph's readable treatment.
       - Kept letter-spacing + uppercase + padding: those define the "chip" silhouette,
         not the legibility. Border bumped from .12 -> .30 opacity so each chip's
         outline is clearly visible on the pink background.
       - Scoped to .fin-teaser so no other .ft-item pattern on the site is affected. */
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    padding: 10px 18px;
    border: 1px solid rgba(255, 255, 255, .30);
    border-radius: 8px
}

/* Stories / Impact */
.stories {
    background: var(--wh);
    padding: 120px 0;
    border: 1px solid var(--stone);
    margin: 32px 24px;
    border-radius: 24px
}

.story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-top: 32px
}

.story-card {
    padding: 28px;
    border: 1px solid var(--stone);
    border-radius: 16px;
    background: var(--parchment);
    transition: all .3s cubic-bezier(0.16, 1, 0.3, 1)
}

.story-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, .06)
}

.story-card .story-placeholder {
    width: 100%;
    height: 140px;
    background: var(--stone);
    border-radius: 8px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--warm)
}

.story-card h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--anth)
}

.story-card p {
    font-size: 12px;
    color: rgba(54, 57, 61, .7);
    line-height: 1.65
}

/* Hero quiet anchor */
.h-anchor {
    display: inline-block;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--pk);
    text-decoration: none;
    margin-top: 20px;
    transition: opacity .3s
}

.h-anchor:hover {
    opacity: .7
}

/* V31 — White hero (pinkribbon.org style) */
.hero-split {
    display: block !important;
    grid-template-columns: none !important;
    position: relative;
    overflow: hidden;
}

.hero-bg {
    display: none;
}

.hero-dots {
    display: none;
}

.hero-text-col {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: auto !important;
    text-align: center !important;
    padding: 100px 24px 72px !important;
    background: var(--wh);
}

.hero-subtitle {
    font-size: 16px;
    color: var(--muted);
    margin-bottom: 32px;
    letter-spacing: 1px;
}

.pri-tagline-os {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: clamp(48px, 8vw, 92px);
    line-height: 1.1;
    text-align: center;
    margin-bottom: 24px;
}

.pri-tagline-os .pink {
    color: var(--pk);
}

.pri-tagline-os .dark {
    color: var(--deep);
}

.hero-cine .h-body {
    color: var(--muted) !important;
    text-align: center;
    max-width: 600px !important;
    margin: 0 auto;
}

.hero-cine .h-body b {
    color: var(--anth) !important;
}

.hero-cine .h-line {
    background: linear-gradient(90deg, transparent, var(--pk), transparent) !important;
    margin: 24px auto 20px !important;
}

.hero-cine .h-actions {
    justify-content: center;
}

.hero-cine .btn-a {
    padding: 18px 52px;
    font-size: 13px;
}

.hero-cine .btn-b {
    border-color: rgba(54, 57, 61, 0.15) !important;
    color: var(--anth) !important;
}

.hero-cine .btn-b:hover {
    border-color: var(--pk) !important;
    color: var(--pk) !important;
}

.hero-cine .h-anchor {
    color: var(--muted) !important;
}

.hero-cine .h-anchor:hover {
    color: var(--pk) !important;
    opacity: 1 !important;
}

.hero-cine .hero-ghost {
    color: rgba(255, 102, 153, 0.04) !important;
}

/* V32 — Hero image carousel.
   The carousel is the FIRST element in .hero-text-col — it visually leads
   the hero and sets up the ONE WORLD | ONE FIGHT tagline below it. Sized
   to visually match the width of the .slab manifesto section (which uses
   margin: 0 24px from the viewport edges) so the hero reads as one
   consistent band with the rest of the page. On 1440x900+ viewports the
   tagline still sits above the fold. */
.hero-carousel {
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 500px;
    border-radius: 20px;
    overflow: hidden;
    margin: 0 auto 32px;
}

.hero-carousel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease;
}

/* Per-slide focal points so faces stay in frame in 720×340 landscape crops */
/* Slide 1: keep full carousel width like other slides; anchor crop on hands + phone */
.hero-carousel img.hero-slide-1 {
    object-position: center 46%;
}

.hero-carousel img.hero-slide-2 {
    object-position: 48% 12%;
}

.hero-carousel img.hero-slide-3 {
    object-position: center 45%;
}

.hero-carousel img.hero-slide-4 {
    object-position: 55% center;
}

.hero-carousel img.hero-slide-5 {
    object-position: 28% center;
}

.hero-carousel img.active {
    opacity: 1;
}

.hero-carousel-dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
}

.hero-carousel-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: background .3s, transform .3s;
}

.hero-carousel-dots span.active {
    background: var(--pk);
    transform: scale(1.25);
}

/* Nav override removed in v31 — solid white nav */

@media (max-width:768px) {

    .ap-grid,
    .story-grid {
        grid-template-columns: 1fr
    }

    .fin-teaser {
        padding: 72px 0
    }

    .fin-teaser h2 {
        font-size: 28px
    }

    .fin-teaser .ft-items {
        gap: 12px
    }
}

@media(max-width:900px) {
    .pri-tagline-os {
        font-size: clamp(36px, 10vw, 64px);
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DONATE PAGE — V37 Redesign
   Styles for /donate/ page sections.
   Uses V37 design tokens and spacing patterns.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ━━━ DONATE HERO ━━━ */
.don-hero {
    padding: 140px 0 80px;
    text-align: center;
    background: var(--wh);
}

.don-hero-title {
    font-size: clamp(36px, 5.5vw, 64px);
    font-weight: 800;
    line-height: 1.06;
    color: var(--anth);
    letter-spacing: -2px;
    margin-bottom: 20px;
}

.don-hero-title i {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-style: italic;
    color: var(--pk);
}

.don-hero-sub {
    font-size: 17px;
    color: var(--muted);
    max-width: 560px;
    margin: 0 auto 40px;
    line-height: 1.85;
    font-weight: 400;
}

.don-hero-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
}

/* Reusable section title for donate page */
.don-section-title {
    font-size: 36px;
    font-weight: 800;
    color: var(--anth);
    letter-spacing: -1px;
    margin-bottom: 8px;
}

/* ━━━ TWO PATHS ━━━ */
.don-paths {
    background: var(--wh);
    padding: 120px 0;
    border: 1px solid var(--stone);
    margin: 32px 24px;
    border-radius: 24px;
}

.don-paths-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 32px;
}

.don-path-card {
    background: var(--wh);
    border: 1px solid var(--stone);
    border-radius: 16px;
    overflow: hidden;
    transition: all .3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

.don-path-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--pk);
    transform: scaleX(0);
    transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: left;
}

.don-path-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, .06);
}

.don-path-card:hover::after {
    transform: scaleX(1);
}

.don-path-img {
    width: 100%;
    height: 220px;
    background-size: cover;
    background-position: center;
    border-radius: 16px 16px 0 0;
}

.don-path-body {
    padding: 28px;
}

.don-path-badge {
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 999px;
    display: inline-block;
    margin-bottom: 12px;
}

.don-path-badge--featured {
    color: var(--pk);
    border: 1px solid rgba(255, 102, 153, .3);
    background: rgba(255, 102, 153, .06);
}

.don-path-badge--ongoing {
    color: var(--au);
    border: 1px solid rgba(196, 163, 90, .3);
    background: rgba(196, 163, 90, .06);
}

.don-path-body h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--anth);
    margin-bottom: 8px;
}

.don-path-body p {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.75;
    margin-bottom: 20px;
}

.don-path-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.don-path-actions .btn-a,
.don-path-actions .btn-b {
    padding: 12px 28px;
    font-size: 11px;
}

/* ━━━ WHERE YOUR DONATION GOES ━━━ */
.don-breakdown {
    background: var(--parchment);
    padding: 120px 0;
    border: 1px solid var(--stone);
    margin: 32px 24px;
    border-radius: 24px;
}

.don-breakdown-grid {
    margin-top: 32px;
}

.don-breakdown-grid .cs-n {
    color: var(--pk);
}

.don-breakdown-grid .cs-n svg {
    color: rgba(255, 102, 153, .25);
}

.don-breakdown-note {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.75;
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid var(--stone);
    max-width: 640px;
}

.don-breakdown-note a {
    color: var(--pk);
    font-weight: 600;
    text-decoration: none;
    transition: opacity .3s;
}

.don-breakdown-note a:hover {
    opacity: .7;
}

/* ━━━ BANK TRANSFER ━━━ */
.don-bank {
    background: var(--wh);
    padding: 120px 0;
    border: 1px solid var(--stone);
    margin: 32px 24px;
    border-radius: 24px;
}

.don-bank-card {
    background: var(--parchment);
    border: 1px solid var(--stone);
    border-radius: 16px;
    padding: 40px;
    margin-top: 32px;
    max-width: 640px;
}

.don-bank-header {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 18px;
    font-weight: 700;
    color: var(--anth);
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--stone);
}

.don-bank-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.don-bank-field {
    padding: 0;
}

.don-bank-label {
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--au);
    margin-bottom: 4px;
}

.don-bank-value {
    font-size: 15px;
    color: var(--anth);
    font-weight: 500;
    line-height: 1.5;
}

/* ━━━ OTHER WAYS TO GIVE ━━━ */
.don-ways {
    background: var(--wh);
    padding: 120px 0;
    border: 1px solid var(--stone);
    margin: 32px 24px;
    border-radius: 24px;
}

.don-ways-icon {
    margin-bottom: 16px;
}

/* "Coming Soon" status badge on the "Other ways to give" cards (donate page).
   Contrast raised on 21 Apr 2026 — previously used var(--warm) #C5C0B8 text
   and var(--stone) #F0EDE8 border, which rendered at ~1.8:1 on the pale-pink
   .ap-card tint and failed WCAG AA. Re-tuned to match the readable-contrast
   pattern established by PR #9 ("Readable pink text") and the sibling
   .don-path-badge rule: token-based color, border rgba at .30 opacity,
   subtle background rgba at .06 opacity. --muted (#8A857D) gives ~4.6:1 on
   the card background — WCAG AA compliant for small text and still reads
   as "pending/inactive" rather than competing with active donation CTAs. */
.don-ways-soon {
    display: inline-block;
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
    border: 1px solid rgba(138, 133, 125, .30);
    background: rgba(138, 133, 125, .06);
    padding: 5px 14px;
    border-radius: 999px;
    margin-top: 16px;
}

/* ━━━ TRUST STRIP (DONATE) ━━━ */
.don-trust {
    padding: 40px 0;
}

.don-trust-strip {
    grid-template-columns: repeat(3, 1fr);
}

/* ━━━ DONATE MOBILE ━━━ */
@media (max-width: 900px) {
    .don-hero {
        padding: 110px 0 60px;
    }

    .don-hero-title {
        font-size: clamp(32px, 8vw, 48px);
        letter-spacing: -1px;
    }

    .don-hero-sub {
        font-size: 15px;
    }

    .don-hero-actions {
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }

    .don-hero-actions .btn-a,
    .don-hero-actions .btn-b {
        width: 100%;
        max-width: 320px;
        text-align: center;
    }

    .don-paths,
    .don-breakdown,
    .don-bank,
    .don-ways {
        margin-left: 12px;
        margin-right: 12px;
        margin-top: 16px;
        margin-bottom: 16px;
        padding-top: 80px;
        padding-bottom: 80px;
        border-radius: 20px;
    }

    .don-section-title {
        font-size: 28px;
    }

    .don-paths-grid {
        grid-template-columns: 1fr;
    }

    .don-path-actions {
        flex-direction: column;
    }

    .don-path-actions .btn-a,
    .don-path-actions .btn-b {
        width: 100%;
        text-align: center;
    }

    .don-breakdown-grid {
        grid-template-columns: 1fr 1fr;
    }

    .don-bank-card {
        padding: 24px;
    }

    .don-bank-grid {
        grid-template-columns: 1fr;
    }

    .don-trust-strip {
        grid-template-columns: 1fr 1fr;
    }

    .don-trust-strip .proof-cell {
        border-bottom: 1px solid rgba(54, 57, 61, .06);
    }

    .don-trust-strip .proof-cell:nth-child(2) {
        border-right: none;
    }
}

@media (max-width: 480px) {
    .don-hero-title {
        font-size: 32px;
    }

    .don-breakdown-grid {
        grid-template-columns: 1fr;
    }

    .don-breakdown-grid .cs {
        border-right: none !important;
    }

    .don-trust-strip {
        grid-template-columns: 1fr;
    }

    .don-trust-strip .proof-cell {
        border-right: none;
    }
}


/* ═══════════════════════════════════════════════════════════════
   GOVERNANCE PAGES (.gov-*)
   Added 15 April 2026 — V37 redesign of 4 governance pages
   ═══════════════════════════════════════════════════════════════ */

/* --- Hero --- */
.gov-hero {
    padding: 120px 0 80px;
    background: var(--wh);
    position: relative;
}

.gov-hero-title {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.08;
    color: var(--anth);
    letter-spacing: -1px;
    margin-bottom: 20px;
}

.gov-hero-title i {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-style: italic;
    color: var(--pk);
}

.gov-hero-sub {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.85;
    max-width: 560px;
}

.gov-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-family: 'Space Mono', monospace;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    margin-bottom: 24px;
    transition: color .2s ease;
}

.gov-back:hover {
    color: var(--pk);
}

.gov-back svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Stat hero (85% proof, right-aligned) --- */
.gov-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.gov-hero-stat {
    text-align: center;
}

.gov-hero-stat-big {
    font-size: clamp(80px, 11vw, 130px);
    font-weight: 800;
    color: var(--anth);
    line-height: .82;
    letter-spacing: -4px;
}

.gov-hero-stat-big em {
    font-style: normal;
    display: inline-block;
    width: 8px;
    min-width: 8px;
    height: 0.58em;
    margin: 0 0.06em;
    vertical-align: middle;
    background: var(--pk);
    border-radius: 2px;
    color: transparent;
    overflow: hidden;
    line-height: 1;
}

.gov-hero-bar {
    height: 10px;
    background: var(--stone);
    border-radius: 5px;
    overflow: hidden;
    margin-top: 20px;
}

.gov-hero-fill {
    height: 100%;
    width: 85%;
    background: var(--pk);
    border-radius: 5px;
}

.gov-hero-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
}

/* --- Card section (floating container) --- */
.gov-cards {
    background: var(--wh);
    padding: 120px 0;
    border: 1px solid var(--stone);
    margin: 32px 24px;
    border-radius: 24px;
}

.gov-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-top: 32px;
}

.gov-card {
    padding: 32px 28px;
    border: 1px solid var(--stone);
    transition: all .3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background: var(--wh);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}

.gov-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--pk);
    transform: scaleX(0);
    transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: left;
}

.gov-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, .06);
    color: inherit;
}

.gov-card:hover::after {
    transform: scaleX(1);
}

.gov-card:nth-child(1) {
    background: rgba(255, 102, 153, .05);
}

.gov-card:nth-child(2) {
    background: rgba(255, 102, 153, .04);
}

.gov-card--accent {
    background: var(--pk) !important;
    border-color: var(--pk);
}

.gov-card--accent h4,
.gov-card--accent p {
    color: #fff;
}

.gov-card--accent p {
    opacity: .85;
}

.gov-card--accent .gov-card-icon {
    background: rgba(255, 255, 255, .2);
}

.gov-card--accent .gov-card-icon svg {
    stroke: #fff;
}

.gov-card--accent .gov-card-link {
    color: #fff;
}

.gov-card--accent:hover {
    box-shadow: 0 16px 48px rgba(255, 102, 153, .3);
}

.gov-card--accent::after {
    background: rgba(255, 255, 255, .4);
}

.gov-card-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 102, 153, .08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    transition: transform .3s ease;
}

.gov-card:hover .gov-card-icon {
    transform: scale(1.1);
}

.gov-card-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: var(--pk);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gov-card h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--anth);
}

.gov-card p {
    font-size: 14px;
    color: rgba(54, 57, 61, .7);
    line-height: 1.7;
    flex: 1;
}

.gov-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--pk);
    font-weight: 600;
    font-size: 13px;
    margin-top: 20px;
    transition: gap .3s ease;
}

.gov-card:hover .gov-card-link {
    gap: 14px;
}

.gov-card-link svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Narrative (two-column text + image) --- */
.gov-narrative {
    background: var(--parchment);
    padding: 120px 0;
    margin: 0 24px;
    border-radius: 24px;
}

.gov-narrative-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.gov-narrative h2 {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -1px;
    color: var(--anth);
    margin-bottom: 24px;
}

.gov-narrative h2 i {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-style: italic;
    color: var(--pk);
}

.gov-narrative p {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.85;
    margin-bottom: 16px;
}

.gov-narrative p b {
    color: var(--anth);
    font-weight: 600;
}

.gov-narrative-img {
    position: relative;
}

.gov-narrative-img img {
    border-radius: 16px;
    width: 100%;
    height: 420px;
    object-fit: cover;
    box-shadow: 0 24px 48px rgba(0, 0, 0, .08);
}

.gov-stat-badge {
    position: absolute;
    bottom: -20px;
    left: -20px;
    background: var(--pk);
    color: #fff;
    padding: 24px 28px;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(255, 102, 153, .3);
}

.gov-stat-badge-num {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
}

.gov-stat-badge-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: .85;
    margin-top: 6px;
}

/* --- Prose (long-form text: Terms, Safeguarding, Report) --- */
.gov-prose {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px 80px;
}

.gov-prose p {
    font-size: 16px;
    color: rgba(54, 57, 61, .75);
    line-height: 1.85;
    margin-bottom: 16px;
}

.gov-prose p strong,
.gov-prose p b {
    color: var(--anth);
    font-weight: 600;
}

.gov-prose h2 {
    font-size: 28px;
    font-weight: 800;
    color: var(--anth);
    margin-top: 56px;
    margin-bottom: 16px;
    letter-spacing: -.5px;
}

.gov-prose h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--anth);
    margin-top: 48px;
    margin-bottom: 12px;
}

.gov-prose ul,
.gov-prose ol {
    margin: 12px 0 20px 24px;
    color: rgba(54, 57, 61, .75);
    line-height: 1.85;
    font-size: 16px;
}

.gov-prose li {
    margin-bottom: 6px;
}

.gov-prose a {
    color: var(--pk);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .2s ease;
}

.gov-prose a:hover {
    color: #e85c8a;
}

/* --- Alert box --- */
.gov-alert {
    background: rgba(255, 102, 153, .07);
    border-left: 4px solid var(--pk);
    padding: 20px 24px;
    border-radius: 0 12px 12px 0;
    margin: 24px 0;
}

.gov-alert strong {
    color: var(--anth);
}

/* --- Form (Report a Concern) --- */
.gov-form {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.gov-form-field label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--anth);
    margin-bottom: 8px;
}

.gov-form-field input,
.gov-form-field select,
.gov-form-field textarea {
    width: 100%;
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid var(--stone);
    background: var(--parchment);
    color: var(--anth);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.gov-form-field input:focus,
.gov-form-field select:focus,
.gov-form-field textarea:focus {
    outline: none;
    border-color: var(--pk);
    box-shadow: 0 0 0 3px rgba(255, 102, 153, .1);
}

.gov-form-field textarea {
    resize: vertical;
    min-height: 160px;
}

.gov-form-field input[type="file"] {
    cursor: pointer;
    padding: 18px;
    border-style: dashed;
    background: var(--wh);
}

.gov-form-row {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.gov-form-row>.gov-form-field {
    flex: 1;
    min-width: 200px;
}

.gov-form-hint {
    font-size: 13px;
    color: var(--muted);
    margin-top: 6px;
}

.gov-form-terms {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.gov-form-terms input[type="checkbox"] {
    margin-top: 4px;
    accent-color: var(--pk);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.gov-form-terms label {
    font-size: 14px;
    color: rgba(54, 57, 61, .75);
    line-height: 1.6;
}

.gov-form-terms a {
    color: var(--pk);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.gov-form-footnote {
    margin-top: 40px;
    font-size: 14px;
    color: var(--muted);
}

.gov-form-footnote a {
    color: var(--pk);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --- Responsive: Governance --- */

@media (max-width: 900px) {
    .gov-hero {
        padding: 80px 0 60px;
    }

    .gov-hero-title {
        font-size: 32px;
    }

    .gov-hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .gov-cards {
        margin: 16px 12px;
        padding: 80px 0;
        border-radius: 20px;
    }

    .gov-cards-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .gov-narrative {
        margin: 16px 12px;
        padding: 80px 0;
        border-radius: 20px;
    }

    .gov-narrative-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .gov-narrative h2 {
        font-size: 28px;
    }

    .gov-narrative-img img {
        height: 300px;
    }

    .gov-stat-badge {
        bottom: -12px;
        left: -12px;
        padding: 18px 22px;
    }

    .gov-form-row {
        flex-direction: column;
        gap: 16px;
    }
}

@media (max-width: 600px) {
    .gov-hero {
        padding: 60px 0 40px;
    }

    .gov-hero-title {
        font-size: 28px;
    }

    .gov-hero-stat-big {
        font-size: 72px;
        letter-spacing: -3px;
    }

    .gov-cards {
        margin: 12px;
        padding: 60px 0;
        border-radius: 16px;
    }

    .gov-narrative {
        margin: 12px;
        padding: 60px 0;
        border-radius: 16px;
    }

    .gov-narrative-img img {
        height: 240px;
    }

    .gov-stat-badge {
        position: relative;
        bottom: auto;
        left: auto;
        margin-top: 16px;
        display: inline-block;
    }

    .gov-prose {
        padding: 0 0 60px;
    }

    .gov-prose h3 {
        font-size: 18px;
        margin-top: 36px;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CAMPAIGN PAGES — V37 Redesign
   Styles for /campaigns/ hub and all-campaigns.
   Uses V37 design tokens and spacing patterns.
   Prefix: .cam-*
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ━━━ CAMPAIGN HERO ━━━ */
.cam-hero {
    padding: 140px 0 80px;
    text-align: center;
    background: var(--wh);
}

.cam-hero-title {
    font-size: clamp(36px, 5.5vw, 64px);
    font-weight: 800;
    line-height: 1.06;
    color: var(--anth);
    letter-spacing: -2px;
    margin-bottom: 20px;
}

.cam-hero-title i {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-style: italic;
    color: var(--pk);
}

.cam-hero-sub {
    font-size: 17px;
    color: var(--muted);
    max-width: 560px;
    margin: 0 auto 40px;
    line-height: 1.85;
    font-weight: 400;
}

.cam-hero-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
}

/* All-campaigns hero (no buttons, less padding) */
.cam-all-hero {
    padding: 120px 0 40px;
    background: var(--wh);
}

.cam-all-grid-section {
    padding: 0 0 80px;
    background: var(--wh);
}

/* Reusable section title */
.cam-section-title {
    font-size: 36px;
    font-weight: 800;
    color: var(--anth);
    letter-spacing: -1px;
    margin-bottom: 8px;
}

/* ━━━ BREADCRUMB ━━━ */
.cam-breadcrumb-bar {
    padding-top: 88px;
    background: var(--wh);
}

.cam-breadcrumb {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--warm);
    display: flex;
    align-items: center;
    gap: 8px;
}

.cam-breadcrumb a {
    color: var(--pk);
    text-decoration: none;
    font-weight: 700;
    transition: opacity .3s;
}

.cam-breadcrumb a:hover {
    opacity: .7;
}

/* ━━━ FEATURED SPOTLIGHT ━━━ */
.cam-spotlight {
    background: var(--wh);
    padding: 120px 0;
    border: 1px solid var(--stone);
    margin: 32px 24px;
    border-radius: 24px;
}

.cam-spotlight-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin-top: 32px;
    align-items: center;
}

.cam-spotlight-img {
    width: 100%;
    height: 100%;
    min-height: 360px;
    background-size: cover;
    background-position: center;
    border-radius: 16px;
}

.cam-spotlight-body h2 {
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 800;
    color: var(--anth);
    letter-spacing: -1px;
    margin-bottom: 16px;
}

.cam-spotlight-body p {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.75;
    margin-bottom: 24px;
}

.cam-spotlight-stats {
    display: flex;
    gap: 32px;
    margin-bottom: 32px;
}

.cam-spotlight-stat-val {
    font-size: 28px;
    font-weight: 800;
    color: var(--pk);
    line-height: 1;
}

.cam-spotlight-stat-label {
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 6px;
}

/* ━━━ BADGES ━━━ */
.cam-badge {
    display: inline-block;
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 999px;
    margin-bottom: 12px;
    color: var(--pk);
    border: 1px solid rgba(255, 102, 153, .3);
    background: rgba(255, 102, 153, .06);
}

.cam-badge--active {
    color: #1B7A4A;
    border: 1px solid rgba(27, 122, 74, .3);
    background: rgba(27, 122, 74, .06);
}

.cam-badge--ongoing {
    color: var(--au);
    border: 1px solid rgba(196, 163, 90, .3);
    background: rgba(196, 163, 90, .06);
}

.cam-badge--upcoming {
    color: #2B4570;
    border: 1px solid rgba(43, 69, 112, .3);
    background: rgba(43, 69, 112, .06);
}

/* ━━━ CAMPAIGN CARDS (JS-generated) ━━━ */
.cam-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 32px;
}

.cam-card {
    background: var(--wh);
    border: 1px solid var(--stone);
    border-radius: 16px;
    overflow: hidden;
    transition: all .3s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
    color: inherit;
    display: block;
    position: relative;
}

.cam-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--pk);
    transform: scaleX(0);
    transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: left;
}

.cam-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, .06);
}

.cam-card:hover::after {
    transform: scaleX(1);
}

.cam-card-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--pk) 0%, rgba(255, 102, 153, .3) 100%);
    background-size: cover;
    background-position: center;
}

.cam-card-body {
    padding: 24px;
}

.cam-card-body h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--anth);
    margin-bottom: 8px;
}

.cam-card-body p {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.65;
    margin-bottom: 16px;
}

.cam-progress {
    width: 100%;
    height: 4px;
    background: var(--stone);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 16px;
}

.cam-progress-fill {
    height: 100%;
    background: var(--pk);
    border-radius: 4px;
    transition: width .6s cubic-bezier(0.16, 1, 0.3, 1);
}

.cam-card-link {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--pk);
    transition: opacity .3s;
}

.cam-card:hover .cam-card-link {
    opacity: .7;
}

/* ━━━ RECENT CAMPAIGNS SECTION ━━━ */
.cam-recent {
    background: var(--parchment);
    padding: 120px 0;
    border: 1px solid var(--stone);
    margin: 32px 24px;
    border-radius: 24px;
}

.cam-view-all {
    margin-top: 48px;
    text-align: center;
}

/* ━━━ FUNDRAISER CTA ━━━ */
.cam-fundraiser {
    background: var(--pk);
    padding: 100px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin: 32px 24px;
    border-radius: 24px;
}

.cam-fundraiser-title {
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 800;
    color: #fff;
    line-height: 1.08;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.cam-fundraiser-title i {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-style: italic;
}

.cam-fundraiser-sub {
    font-size: 15px;
    /* Readable-pink-text rollout: was .6 opacity white — applied #fff + weight 500
       to match the sitewide readable-text pattern. */
    color: #fff;
    font-weight: 500;
    max-width: 520px;
    margin: 0 auto 28px;
    line-height: 1.75;
    font-weight: 300;
    position: relative;
    z-index: 1;
}

/* ━━━ CAMPAIGN MOBILE ━━━ */
@media (max-width: 900px) {
    .cam-hero {
        padding: 110px 0 60px;
    }

    .cam-hero-title {
        font-size: clamp(32px, 8vw, 48px);
        letter-spacing: -1px;
    }

    .cam-hero-sub {
        font-size: 15px;
    }

    .cam-hero-actions {
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }

    .cam-hero-actions .btn-a,
    .cam-hero-actions .btn-b {
        width: 100%;
        max-width: 320px;
        text-align: center;
    }

    .cam-spotlight,
    .cam-recent,
    .cam-fundraiser {
        margin-left: 12px;
        margin-right: 12px;
        margin-top: 16px;
        margin-bottom: 16px;
        padding-top: 80px;
        padding-bottom: 80px;
        border-radius: 20px;
    }

    .cam-section-title {
        font-size: 28px;
    }

    .cam-spotlight-grid {
        grid-template-columns: 1fr;
    }

    .cam-spotlight-img {
        min-height: 220px;
        border-radius: 16px;
    }

    .cam-spotlight-stats {
        flex-wrap: wrap;
        gap: 20px;
    }

    .cam-card-grid {
        grid-template-columns: 1fr;
    }

    .cam-all-hero {
        padding: 100px 0 24px;
    }

    .cam-fundraiser {
        padding: 72px 0;
    }

    .cam-fundraiser-title {
        font-size: 28px;
    }

    .cam-breadcrumb-bar {
        padding-top: 80px;
    }
}

@media (max-width: 480px) {
    .cam-hero-title {
        font-size: 32px;
    }

    .cam-spotlight-stats {
        flex-direction: column;
        gap: 16px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   ABOUT PAGES (.about-*)
   Added 15 April 2026 — V37 redesign of About Us + Founder Letter
   ═══════════════════════════════════════════════════════════════ */

.about-hero {
    padding: 140px 0 80px;
    text-align: center;
    background: var(--wh)
}

.about-hero-title {
    font-size: clamp(36px, 5.5vw, 56px);
    font-weight: 800;
    line-height: 1.08;
    color: var(--anth);
    letter-spacing: -2px;
    margin-bottom: 20px
}

.about-hero-title i {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-style: italic;
    color: var(--pk)
}

.about-hero-sub {
    font-size: 17px;
    color: var(--muted);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.85;
    font-weight: 400
}

.about-purpose {
    background: var(--wh);
    padding: 120px 0;
    border: 1px solid var(--stone);
    margin: 32px 24px;
    border-radius: 24px
}

.about-purpose-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
    margin-top: 32px
}

.about-purpose-text h2 {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.08;
    color: var(--anth);
    letter-spacing: -1px;
    margin-bottom: 20px
}

.about-purpose-text h2 i {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-style: italic;
    color: var(--pk)
}

.about-purpose-text p {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.85;
    margin-bottom: 16px
}

.about-purpose-text p b {
    color: var(--anth);
    font-weight: 600
}

.about-callout {
    background: rgba(255, 102, 153, .07);
    border-left: 4px solid var(--pk);
    padding: 28px 32px;
    border-radius: 0 16px 16px 0
}

.about-callout p {
    font-size: 14px;
    color: var(--anth);
    line-height: 1.75;
    margin-bottom: 0
}

.about-callout p:first-child {
    margin-bottom: 16px
}

.about-stat-highlight {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 102, 153, .15)
}

.about-stat-big {
    font-size: 48px;
    font-weight: 800;
    color: var(--pk);
    line-height: 1
}

.about-stat-label {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
    max-width: 200px;
    line-height: 1.5
}

.about-founder {
    background: var(--parchment);
    padding: 100px 0;
    margin: 0 24px;
    border-radius: 24px
}

.about-founder-body {
    max-width: 640px;
    margin: 0 auto;
    text-align: center
}

.about-founder-body p {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.85;
    margin-bottom: 16px
}

.about-founder-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--pk);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: gap .3s ease, opacity .3s;
    margin-top: 8px
}

.about-founder-link:hover {
    gap: 14px;
    opacity: .8
}

.about-timeline {
    background: var(--wh);
    padding: 120px 0;
    border: 1px solid var(--stone);
    margin: 32px 24px;
    border-radius: 24px
}

.about-tl-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 48px
}

.about-tl-step {
    padding: 28px 24px;
    border-right: 1px solid var(--stone);
    position: relative
}

.about-tl-step:nth-child(4n) {
    border-right: none
}

.about-tl-step:nth-child(n+5) {
    border-top: 1px solid var(--stone)
}

.about-tl-year {
    font-family: 'Space Mono', monospace;
    font-size: 28px;
    font-weight: 700;
    color: rgba(255, 102, 153, .55);
    margin-bottom: 12px
}

.about-tl-step:hover .about-tl-year {
    color: var(--pk)
}

.about-tl-step h4 {
    font-size: 14px;
    font-weight: 400;
    color: var(--muted);
    line-height: 1.65
}

.about-tl-step h4 b {
    color: var(--anth);
    font-weight: 600
}

.about-people {
    background: var(--wh);
    padding: 120px 0;
    border: 1px solid var(--stone);
    margin: 32px 24px;
    border-radius: 24px
}

.about-people--alt {
    background: #FFF0F5;
    border: 1px solid rgba(255, 102, 153, .12)
}

.about-people-intro {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.85;
    max-width: 640px;
    margin-bottom: 48px
}

.about-person-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px
}

.about-person-card {
    padding: 36px 28px;
    border: 1px solid var(--stone);
    border-radius: 16px;
    background: var(--wh);
    text-align: center;
    transition: all .3s cubic-bezier(.16, 1, .3, 1);
    position: relative;
    overflow: hidden
}

.about-person-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--pk);
    transform: scaleX(0);
    transition: transform .3s cubic-bezier(.16, 1, .3, 1);
    transform-origin: left
}

.about-person-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, .06)
}

.about-person-card:hover::after {
    transform: scaleX(1)
}

.about-person-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 20px;
    display: block;
    border: 3px solid var(--stone)
}

.about-person-initials {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255, 102, 153, .08);
    border: 3px solid rgba(255, 102, 153, .15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 32px;
    font-weight: 700;
    color: var(--pk);
    letter-spacing: -1px
}

.about-person-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--anth);
    margin-bottom: 6px
}

.about-person-role {
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--pk);
    margin-bottom: 16px
}

.about-person-bio {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.7
}

.about-amb-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px
}

.about-amb-card {
    padding: 40px 32px;
    border: 1px solid var(--stone);
    border-radius: 16px;
    background: var(--wh);
    text-align: center;
    transition: all .3s cubic-bezier(.16, 1, .3, 1);
    position: relative;
    overflow: hidden
}

.about-amb-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--pk);
    transform: scaleX(0);
    transition: transform .3s cubic-bezier(.16, 1, .3, 1);
    transform-origin: left
}

.about-amb-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, .06)
}

.about-amb-card:hover::after {
    transform: scaleX(1)
}

.about-amb-photo {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 20px;
    display: block;
    border: 3px solid rgba(255, 102, 153, .15);
    box-shadow: 0 8px 24px rgba(255, 102, 153, .12)
}

.about-read-more {
    text-align: left;
    margin-top: 16px
}

.about-read-more summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--pk);
    padding: 8px 20px;
    border: 1px solid rgba(255, 102, 153, .3);
    border-radius: 999px;
    background: rgba(255, 102, 153, .06);
    transition: all .25s;
    list-style: none;
    margin: 0 auto
}

.about-read-more summary::-webkit-details-marker {
    display: none
}

.about-read-more summary:hover {
    background: rgba(255, 102, 153, .12);
    border-color: var(--pk)
}

.about-read-more[open] summary {
    margin-bottom: 16px;
    background: var(--pk);
    color: #fff;
    border-color: var(--pk)
}

.about-read-more p {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.75;
    margin-bottom: 12px;
    text-align: left
}

.about-ops-card {
    max-width: 480px;
    margin: 0 auto;
    padding: 40px;
    border: 1px solid rgba(255, 102, 153, .15);
    border-radius: 16px;
    background: var(--wh);
    text-align: center;
    box-shadow: 0 4px 20px rgba(255, 102, 153, .06)
}

.about-ops-contact {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.about-ops-contact li {
    font-size: 13px
}

.about-ops-contact a {
    color: var(--muted);
    text-decoration: none;
    transition: color .2s
}

.about-ops-contact a:hover {
    color: var(--pk)
}

.about-divider {
    border: none;
    border-top: 1px solid var(--stone);
    margin: 64px 0
}

.about-srac-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px
}

.about-srac-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--anth)
}

.about-srac-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 32px
}

.about-srac-card {
    padding: 28px 20px;
    border: 1px solid rgba(255, 102, 153, .15);
    border-radius: 16px;
    background: var(--wh);
    text-align: center;
    transition: all .3s cubic-bezier(.16, 1, .3, 1)
}

.about-srac-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(255, 102, 153, .08);
    border-color: rgba(255, 102, 153, .25)
}

.about-srac-photo {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 16px;
    display: block;
    border: 2px solid rgba(255, 102, 153, .12)
}

.about-srac-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--anth);
    margin-bottom: 4px
}

.about-srac-inst {
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--pk);
    margin-bottom: 12px
}

.about-srac-bio {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.65
}

.about-letter {
    padding: 0 0 80px;
    background: var(--wh)
}

.about-letter-header {
    padding: 120px 0 40px;
    background: var(--wh)
}

.about-letter-title {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.08;
    color: var(--anth);
    letter-spacing: -1px;
    margin-bottom: 20px
}

.about-letter-sig {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--stone)
}

.about-letter-sig p {
    font-size: 16px;
    font-weight: 600;
    color: var(--anth);
    margin-bottom: 4px
}

.about-letter-sig .about-letter-sig-role {
    font-size: 14px;
    font-weight: 400;
    color: var(--muted)
}

/* ━━━ ABOUT MOBILE ━━━ */
@media(max-width:900px) {
    .about-hero {
        padding: 110px 0 60px
    }

    .about-hero-title {
        font-size: clamp(32px, 8vw, 48px);
        letter-spacing: -1px
    }

    .about-hero-sub {
        font-size: 15px
    }

    .about-purpose,
    .about-timeline,
    .about-people {
        margin-left: 12px;
        margin-right: 12px;
        margin-top: 16px;
        margin-bottom: 16px;
        padding-top: 80px;
        padding-bottom: 80px;
        border-radius: 20px
    }

    .about-founder {
        margin-left: 12px;
        margin-right: 12px;
        padding: 72px 0;
        border-radius: 20px
    }

    .about-purpose-grid {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .about-purpose-text h2 {
        font-size: 28px
    }

    .about-tl-grid {
        grid-template-columns: 1fr 1fr
    }

    .about-tl-step:nth-child(4n) {
        border-right: 1px solid var(--stone)
    }

    .about-tl-step:nth-child(2n) {
        border-right: none
    }

    .about-tl-step:nth-child(n+3) {
        border-top: 1px solid var(--stone)
    }

    .about-person-grid {
        grid-template-columns: 1fr;
        gap: 16px
    }

    .about-amb-grid {
        grid-template-columns: 1fr;
        gap: 16px
    }

    .about-srac-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px
    }

    .about-ops-card {
        padding: 28px
    }

    .about-letter-header {
        padding: 90px 0 32px
    }

    .about-letter-title {
        font-size: 32px
    }
}

@media(max-width:480px) {
    .about-hero-title {
        font-size: 32px
    }

    .about-tl-grid {
        grid-template-columns: 1fr
    }

    .about-tl-step {
        border-right: none !important
    }

    .about-tl-step:nth-child(n+2) {
        border-top: 1px solid var(--stone)
    }

    .about-tl-year {
        font-size: 22px
    }

    .about-srac-grid {
        grid-template-columns: 1fr
    }

    .about-stat-big {
        font-size: 36px
    }

    .about-letter-title {
        font-size: 28px
    }
}