/* ==========================================================================
   National Justice & Care Alliance (NJCA)
   Stylesheet: css/style.css

   Contents
   1.  Fonts
   2.  Variables
   3.  Reset & base styles
   4.  Utilities & shared components
   5.  Header, navigation & Quick Exit
   6.  Hero (home)
   7.  Home sections
   8.  Inner page hero
   9.  Get Help
   10. What We Do & program pages
   11. Impact, About, Team, Get Involved, Donate, Legal
   12. Forms
   13. Footer
   14. Animations
   15. Responsive design
   16. Reduced motion & print
   ========================================================================== */

/* ========================================
   1. FONTS
======================================== */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-latin-full-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-latin-full-italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('../fonts/atkinson-hyperlegible-next-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('../fonts/atkinson-hyperlegible-next-latin-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('../fonts/atkinson-hyperlegible-next-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('../fonts/atkinson-hyperlegible-next-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* ========================================
   2. VARIABLES
======================================== */
:root {
  /* Brand palette (from the NJCA logo and designer packet) */
  --navy: #062965;          /* NJCA Navy: text, headers, trust */
  --teal: #12ADB3;          /* Care Teal: primary accent */
  --blue: #1F8DC7;          /* Justice Blue: navigation, information */
  --purple: #783984;        /* Dignity Purple: DV connection, advocacy */
  --orange: #F6902C;        /* Path Forward Orange: calls to action */
  --green: #669F65;         /* Community Green: healing, community */
  --magenta: #CB0561;       /* Advocacy Magenta: small emphasis only */
  --sky: #7CC6EE;           /* light Justice Blue for use on navy */

  /* Accessible text shades (4.5:1+ on white) of the lighter brand colours */
  --teal-ink: #0A7479;
  --blue-ink: #1670A0;
  --green-ink: #4A7A49;
  --orange-ink: #B35F0C;

  /* Tints for panels */
  --teal-tint: #E3F6F7;
  --blue-tint: #E4F1F9;
  --purple-tint: #F1E8F3;
  --orange-tint: #FEF1E4;
  --green-tint: #EAF3EA;
  --navy-tint: #E6EAF1;
  --magenta-tint: #FBE6EF;

  /* Semantic tokens */
  --color-primary: var(--navy);
  --color-secondary: #FFFFFF;
  --color-accent: var(--teal);
  --color-cta: var(--orange);
  --color-background: #FFFFFF;
  --color-surface: #F7F9FA;           /* Soft Gray */
  --color-text: #292929;              /* Charcoal */
  --color-heading: var(--navy);
  --color-muted: #5B6477;
  --color-border: #DCE3EC;
  --color-border-strong: #B9C4D4;
  --color-focus: #F6902C;
  --color-danger: #B3261E;

  --gradient-path: linear-gradient(90deg, var(--teal) 0%, var(--purple) 35%, var(--orange) 65%, var(--blue) 100%);

  /* Typography */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-primary: 'Atkinson Hyperlegible Next', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --fs-300: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --fs-400: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  --fs-500: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
  --fs-600: clamp(1.4rem, 1.2rem + 0.8vw, 1.875rem);
  --fs-700: clamp(1.9rem, 1.5rem + 1.7vw, 3rem);
  --fs-800: clamp(2.3rem, 1.6rem + 3vw, 4.25rem);
  --fs-900: clamp(2.7rem, 1.6rem + 4.6vw, 5.6rem);

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: clamp(4rem, 3rem + 4vw, 7rem);

  /* Layout */
  --container: 1240px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --header-h: 84px;
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(6, 41, 101, 0.06), 0 2px 8px rgba(6, 41, 101, 0.05);
  --shadow: 0 10px 30px -12px rgba(6, 41, 101, 0.18);
  --shadow-lg: 0 30px 60px -24px rgba(6, 41, 101, 0.28);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.35s;
}

/* ========================================
   3. RESET & BASE STYLES
======================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--fs-400);
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

main { display: block; overflow-x: clip; } /* keeps slide-in animations from creating sideways scroll */
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
img { height: auto; }

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--color-heading);
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-variation-settings: 'SOFT' 60, 'opsz' 96;
  text-wrap: balance;
}
h3 { font-family: var(--font-primary); font-weight: 700; letter-spacing: 0; line-height: 1.3; }

p { text-wrap: pretty; }

a { color: var(--blue-ink); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--navy); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

strong { font-weight: 700; }

em { font-style: italic; }

kbd {
  display: inline-block;
  padding: 0.05em 0.45em;
  border: 1px solid currentColor;
  border-bottom-width: 2px;
  border-radius: 6px;
  font-family: var(--font-primary);
  font-size: 0.85em;
  line-height: 1.3;
}

mark { background: none; color: inherit; }

::selection { background: var(--teal-tint); color: var(--navy); }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ========================================
   4. UTILITIES & SHARED COMPONENTS
======================================== */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.skip-link {
  position: absolute;
  top: -100px; left: 1rem;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; color: #fff; }

.icon { width: 1.15em; height: 1.15em; flex-shrink: 0; }

.section { padding-block: var(--space-9); position: relative; }
.section--tight { padding-block: var(--space-8); }
.section--flush-top { padding-top: 0; }
.section--soft { background: var(--color-surface); }
.section--navy { background: var(--navy); color: #E8EEF8; }
.section--navy h2, .section--navy h3 { color: #fff; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--space-4);
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-ink);
}
.eyebrow--light { color: var(--teal); }
.eyebrow__line { width: 36px; height: 3px; border-radius: 3px; background: var(--gradient-path); }

.section-title { font-size: var(--fs-700); margin-bottom: var(--space-5); }
.section-title--xl { font-size: var(--fs-800); }

.split-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: end;
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}
.split-head .section-title { margin-bottom: 0; }
.split-head > p { color: var(--color-muted); max-width: 46ch; justify-self: end; }

/* Buttons */
.btn {
  --btn-bg: var(--navy);
  --btn-fg: #fff;
  --btn-bd: var(--btn-bg);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.7rem 1.35rem;
  border: 2px solid var(--btn-bd);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn .icon { transition: transform var(--dur) var(--ease); }
.btn:hover { color: var(--btn-fg); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:hover .icon-arrow-right,
.btn:hover .icon:last-child:not(:first-child) { transform: translateX(3px); }
.btn:active { transform: translateY(0); }
.btn--lg { min-height: 56px; padding: 0.9rem 1.7rem; font-size: 1.0625rem; }
.btn--block { width: 100%; }

.btn--cta { --btn-bg: var(--orange); --btn-fg: var(--navy); }
.btn--cta::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,0.45) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease);
}
.btn--cta:hover::before { transform: translateX(120%); }
.btn--cta:hover { --btn-bg: #F89D45; }

.btn--outline { --btn-bg: transparent; --btn-fg: var(--navy); --btn-bd: var(--navy); }
.btn--outline:hover { --btn-bg: var(--navy); --btn-fg: #fff; }

.btn--light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,0.55); }
.btn--light:hover { --btn-bg: #fff; --btn-fg: var(--navy); --btn-bd: #fff; }

.btn--support { --btn-bg: var(--teal-tint); --btn-fg: var(--teal-ink); --btn-bd: var(--teal-tint); }
.btn--support:hover { --btn-bg: var(--teal-ink); --btn-fg: #fff; --btn-bd: var(--teal-ink); }

.btn--emergency { --btn-bg: var(--navy); --btn-fg: #fff; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  padding-bottom: 2px;
  transition: background-size var(--dur) var(--ease), color var(--dur) var(--ease);
}
.text-link:hover { background-size: 100% 2px; color: var(--navy); }
.text-link .icon { transition: transform var(--dur) var(--ease); }
.text-link:hover .icon { transform: translateX(4px); }
.text-link--light, .text-link--light:hover { color: #fff; }

/* Status badges: text + dot shape, never colour alone */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.8rem 0.3rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  border: 1px solid transparent;
}
.status__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.status--available { background: var(--green-tint); color: var(--green-ink); border-color: #C3DAC2; }
.status--available .status__dot { background: var(--green); box-shadow: 0 0 0 3px rgba(102,159,101,0.25); }
.status--planned { background: var(--blue-tint); color: var(--blue-ink); border-color: #AFD6EC; }
.status--planned .status__dot { background: transparent; border: 2px solid var(--blue); }
.status--funding { background: var(--orange-tint); color: var(--orange-ink); border-color: #FBD2A8; }
.status--funding .status__dot { background: linear-gradient(90deg, var(--orange) 50%, transparent 50%); border: 2px solid var(--orange); }
.status--vision { background: var(--purple-tint); color: var(--purple); border-color: #D2B8D8; }
.status--vision .status__dot { background: transparent; border: 2px dashed var(--purple); }

.soon {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--purple-tint);
  color: var(--purple);
  font-family: var(--font-primary);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

.placeholder-note {
  display: inline;
  padding: 0.05em 0.35em;
  border-radius: 4px;
  background: #FFF7D6;
  color: #6A5200;
  font-size: 0.9em;
  font-style: normal;
}

.fine-print {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin-top: var(--space-5);
  font-size: var(--fs-300);
  color: var(--color-muted);
}
.fine-print .icon { margin-top: 0.2em; }

.tick-list { display: grid; gap: 0.65rem; }
.tick-list li { display: flex; gap: 0.7rem; align-items: flex-start; }
.tick-list .icon {
  width: 1.5rem; height: 1.5rem;
  padding: 0.25rem;
  margin-top: 0.1rem;
  border-radius: 50%;
  background: var(--teal-tint);
  color: var(--teal-ink);
  stroke-width: 3;
}

.pill-list { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pill-list li {
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  background: #fff;
  border: 1px solid var(--color-border);
  font-weight: 600;
  color: var(--navy);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.pill-list li:hover { transform: translateY(-2px); border-color: var(--teal); }

.cta-strip {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: 'title actions' 'text actions';
  gap: 0.5rem 2rem;
  align-items: center;
}
.cta-strip h2 { grid-area: title; font-size: var(--fs-600); }
.cta-strip p { grid-area: text; color: #C9D5EA; }
.cta-strip__actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ========================================
   5. HEADER, NAVIGATION & QUICK EXIT
======================================== */
.utility-bar {
  background: var(--navy);
  color: #DCE6F7;
  font-size: 0.875rem;
}
.utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 40px;
  padding-block: 0.35rem;
}
.utility-bar__msg { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.6rem; }
.utility-bar__msg .icon { color: var(--orange); }
.utility-bar a { color: #fff; font-weight: 700; }
.utility-bar a:hover { color: var(--orange); }
.utility-bar__sep { opacity: 0.45; }
.utility-bar__tip { color: #AFC0DD; }
.utility-bar kbd { color: #fff; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur);
}
.site-header.is-scrolled {
  border-color: var(--color-border);
  box-shadow: 0 8px 30px -18px rgba(6, 41, 101, 0.35);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--header-h);
  transition: height var(--dur) var(--ease);
}
.site-header.is-scrolled .site-header__inner { height: 68px; }

.brand { display: block; flex-shrink: 0; border-radius: 8px; }
.brand img {
  width: auto;
  height: 54px;
  transition: height var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.site-header.is-scrolled .brand img { height: 44px; }
.brand:hover img { transform: scale(1.02); }

.primary-nav { display: flex; align-items: center; flex: 1; gap: 1.25rem; }
.nav-list { display: flex; align-items: center; gap: 0.15rem; margin-inline: auto; }
.nav-list > li { position: relative; }

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.6rem 0.8rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--navy);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  white-space: nowrap;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0.8rem; right: 0.8rem; bottom: 0.3rem;
  height: 3px;
  border-radius: 3px;
  background: var(--gradient-path);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav-link:hover::after,
.nav-link[aria-current]::after,
.nav-link[aria-expanded='true']::after { transform: scaleX(1); }
.nav-link:hover { color: var(--navy); }
.nav-caret { width: 1rem; height: 1rem; transition: transform var(--dur) var(--ease); }
.nav-link[aria-expanded='true'] .nav-caret { transform: rotate(180deg); }

.submenu,
.mega {
  position: absolute;
  top: calc(100% + 10px);
  z-index: 10;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}
.has-menu.is-open > .submenu,
.has-menu.is-open > .mega { opacity: 1; visibility: visible; transform: translateY(0); }

.submenu { left: 0; min-width: 220px; padding: 0.5rem; }
.submenu a {
  display: block;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-sm);
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
}
.submenu a:hover, .submenu a[aria-current] { background: var(--color-surface); }

.mega {
  left: 50%;
  width: min(900px, calc(100vw - 2 * var(--gutter)));
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 1.5rem;
  padding: 1.5rem;
  transform: translate(-40%, 8px);
}
.has-menu.is-open > .mega { transform: translate(-40%, 0); }
.mega__intro {
  padding: 1.25rem;
  border-radius: var(--radius-sm);
  background: linear-gradient(160deg, var(--teal-tint), var(--purple-tint));
}
.mega__lead { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.25; color: var(--navy); margin-bottom: 1rem; }
.mega__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem; }
.mega__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--navy);
  text-decoration: none;
  transition: background-color 0.2s;
}
.mega__link:hover, .mega__link:focus-visible { background: var(--color-surface); color: var(--navy); }
.mega__icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--tone) 14%, #fff);
  color: var(--tone);
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease);
}
.mega__link:hover .mega__icon { transform: rotate(-6deg) scale(1.06); }
.mega__text { display: flex; flex-direction: column; line-height: 1.25; }
.mega__title { font-weight: 700; font-size: 0.95rem; }
.mega__status { font-size: 0.78rem; color: var(--color-muted); }

.nav-actions { display: flex; align-items: center; gap: 0.6rem; }
.nav-actions .btn { min-height: 44px; padding: 0.55rem 1.1rem; font-size: 0.95rem; }

.menu-toggle {
  display: none;
  align-items: center;
  gap: 0.55rem;
  margin-left: auto;
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  border: 2px solid var(--navy);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--navy);
  font-weight: 700;
}
.menu-toggle__bars { position: relative; width: 20px; height: 14px; }
.menu-toggle__bars span {
  position: absolute; left: 0;
  width: 100%; height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease), opacity 0.2s, top var(--dur) var(--ease);
}
.menu-toggle__bars span:nth-child(1) { top: 0; }
.menu-toggle__bars span:nth-child(2) { top: 6px; }
.menu-toggle__bars span:nth-child(3) { top: 12px; }
.nav-open .menu-toggle__bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.nav-open .menu-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-open .menu-toggle__bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

.scroll-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; }
.scroll-progress span {
  display: block;
  height: 100%;
  background: var(--gradient-path);
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
}

/* Quick Exit */
.quick-exit {
  position: fixed;
  right: clamp(0.75rem, 2vw, 1.5rem);
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  z-index: 150;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 52px;
  padding: 0.7rem 1.2rem;
  border: 2px solid #fff;
  border-radius: var(--radius-pill);
  background: var(--purple);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  box-shadow: 0 12px 30px -10px rgba(120, 57, 132, 0.65);
  transition: transform var(--dur) var(--ease), background-color var(--dur);
}
.quick-exit:hover { background: #5E2B68; transform: translateY(-2px); }
.quick-exit .icon { width: 1.25rem; height: 1.25rem; }
.quick-exit:focus-visible { outline-color: var(--orange); }

/* ========================================
   6. HERO (HOME)
======================================== */
.hero {
  position: relative;
  padding-top: clamp(2.5rem, 2rem + 3vw, 5rem);
  padding-bottom: var(--space-6);
  overflow: hidden;
}
.hero__glow {
  position: absolute;
  inset: -20% -10% auto auto;
  width: 70vw; height: 70vw;
  max-width: 900px; max-height: 900px;
  background:
    radial-gradient(closest-side, rgba(18, 173, 179, 0.14), transparent 70%),
    radial-gradient(closest-side at 30% 70%, rgba(246, 144, 44, 0.10), transparent 70%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4.5rem);
}
.hero__eyebrow { color: var(--navy); }
.hero__title {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.28em;
  font-size: var(--fs-900);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-variation-settings: 'SOFT' 100, 'opsz' 144, 'WONK' 0;
}
.hero__word { position: relative; display: inline-block; padding-bottom: 0.08em; }
.hero__word::after {
  content: '';
  position: absolute;
  left: 0; right: 0.12em; bottom: 0.02em;
  height: 0.08em;
  border-radius: 1em;
  background: var(--word-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--ease) calc(var(--wi, 0) * 0.14s + 0.55s);
}
.hero__word--teal { --word-color: var(--teal); }
.hero__word--purple { --word-color: var(--purple); }
.hero__word--orange { --word-color: var(--orange); }
.hero__word--blue { --word-color: var(--blue); font-style: italic; color: var(--navy); }
.hero__break { flex-basis: 100%; height: 0; }
.is-loaded .hero__word::after { transform: scaleX(1); }

.hero__lead {
  max-width: 40rem;
  margin-top: var(--space-5);
  font-size: var(--fs-500);
  line-height: 1.55;
  color: #3A4254;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.25rem;
  margin-top: var(--space-6);
}

.hero__art { position: relative; }
.hero__figure { width: 100%; max-width: 560px; margin-inline: auto; }
.hero__figure .inline-art { width: 100%; height: auto; overflow: visible; }
.hero__figure .sunrise { animation: sunrise 1.6s var(--ease) 0.4s both, breathe 7s ease-in-out 2s infinite; transform-origin: 320px 380px; }
.hero__figure .road { animation: road-in 1.4s var(--ease) 0.8s both; transform-origin: 380px 620px; }

.hero__note {
  position: absolute;
  left: -2.5rem; top: 10%;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  max-width: 290px;
  padding: 0.9rem 1rem;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-lg);
  font-size: 0.9rem;
  line-height: 1.45;
}
.hero__note .icon {
  width: 2.25rem; height: 2.25rem;
  padding: 0.45rem;
  border-radius: 50%;
  background: var(--orange-tint);
  color: var(--orange-ink);
}
.hero__note a { font-weight: 700; }

/* Moving list of issues */
.harm-marquee {
  --gap: 0.75rem;
  display: flex;
  gap: var(--gap);
  overflow: hidden;
  margin-top: var(--space-7);
  padding-block: 0.5rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.harm-marquee__group {
  display: flex;
  flex-shrink: 0;
  gap: var(--gap);
  min-width: 100%;
  justify-content: space-around;
}
.harm-marquee li {
  flex-shrink: 0;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--navy);
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
}
.harm-marquee li:nth-child(4n+1) { border-color: #A9E3E5; }
.harm-marquee li:nth-child(4n+2) { border-color: #D2B8D8; }
.harm-marquee li:nth-child(4n+3) { border-color: #FBD2A8; }
.harm-marquee li:nth-child(4n+4) { border-color: #AFD6EC; }
.harm-marquee.is-animated .harm-marquee__group { animation: marquee var(--marquee-dur, 45s) linear infinite; }
.harm-marquee.is-animated:hover .harm-marquee__group,
.harm-marquee.is-animated:focus-within .harm-marquee__group { animation-play-state: paused; }

/* ========================================
   7. HOME SECTIONS
======================================== */

/* Affirmation band */
.affirm {
  position: relative;
  padding-block: var(--space-9);
  background: var(--navy);
  color: #DCE6F7;
  overflow: hidden;
}
.affirm::before {
  content: '';
  position: absolute;
  inset: auto -10% -60% auto;
  width: 60vw; height: 60vw;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(120, 57, 132, 0.45), transparent);
  pointer-events: none;
}
.affirm__path {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--gradient-path);
  transform: scaleX(var(--reveal, 0));
  transform-origin: left;
  transition: transform 1.4s var(--ease);
}
.affirm.is-visible .affirm__path { --reveal: 1; }
.affirm__inner { position: relative; display: grid; gap: var(--space-6); }
.affirm__intro { font-size: var(--fs-500); color: #AFC0DD; max-width: 38rem; }
.affirm__lines {
  display: grid;
  gap: 0.1em;
  font-family: var(--font-display);
  font-size: var(--fs-800);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
  font-variation-settings: 'SOFT' 100, 'opsz' 144;
}
.affirm__lines span { display: block; }
.affirm__lines em { font-style: italic; }
.tone-teal { color: var(--teal); }
.tone-orange { color: var(--orange); }
.tone-sky { color: var(--sky); }
.affirm__body { max-width: 44rem; margin-left: auto; font-size: var(--fs-500); color: #DCE6F7; border-left: 3px solid var(--teal); padding-left: var(--space-5); }

/* Where harm happens */
.places__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.places__intro { position: sticky; top: calc(var(--header-h) + 2rem); }
.places__intro p + p { margin-top: var(--space-4); }
.places__intro p { color: #3A4254; }
.places__list { counter-reset: place; border-top: 1px solid var(--color-border); }
.places__list li {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding: 1.1rem 0.25rem;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-display);
  font-size: var(--fs-600);
  color: var(--navy);
  line-height: 1.2;
  transition: padding-left var(--dur) var(--ease), color var(--dur);
}
.places__list li::before {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 2px;
  background: var(--tone);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.places__list li:hover { padding-left: 1rem; }
.places__list li:hover::before { transform: scaleX(1); }
.places__num { font-family: var(--font-primary); font-size: 0.85rem; font-weight: 700; color: var(--tone); min-width: 2ch; }

/* Mission & vision */
.mv__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 6vw, 6rem);
}
.mv__sticky { position: sticky; top: calc(var(--header-h) + 2rem); }
.mv__steps { display: grid; gap: 0.25rem; margin-bottom: var(--space-6); }
.mv__steps a {
  position: relative;
  display: block;
  padding: 0.25rem 0 0.25rem 1.5rem;
  font-family: var(--font-display);
  font-size: var(--fs-700);
  line-height: 1.15;
  color: #AAB4C5;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.mv__steps a::before {
  content: '';
  position: absolute;
  left: 0; top: 0.35em; bottom: 0.35em;
  width: 4px;
  border-radius: 4px;
  background: var(--gradient-path);
  transform: scaleY(0);
  transition: transform var(--dur) var(--ease);
}
.mv__steps a.is-active { color: var(--navy); }
.mv__steps a.is-active::before { transform: scaleY(1); }
.mv__art { width: 100%; max-width: 380px; border-radius: var(--radius-lg); }
.mv__block { padding-block: var(--space-4) var(--space-8); }
.mv__block + .mv__block { border-top: 1px solid var(--color-border); padding-top: var(--space-8); }
.mv__statement {
  margin-bottom: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--fs-600);
  line-height: 1.35;
  color: var(--navy);
  font-variation-settings: 'SOFT' 80, 'opsz' 48;
}
.mv__block > p:not(.eyebrow):not(.mv__statement) { color: #3A4254; }
.hl {
  background-image: linear-gradient(var(--hl), var(--hl));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 0 0.35em;
  transition: background-size 1s var(--ease) 0.3s;
}
.is-visible .hl, .is-visible.hl, .mv__statement.is-visible .hl { background-size: 100% 0.35em; }
.hl--teal { --hl: rgba(18, 173, 179, 0.35); }
.hl--purple { --hl: rgba(120, 57, 132, 0.28); }
.hl--orange { --hl: rgba(246, 144, 44, 0.4); }
.hl--blue { --hl: rgba(31, 141, 199, 0.3); }

.journey {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-6);
  counter-reset: j;
}
.journey li {
  counter-increment: j;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem 0.45rem 0.45rem;
  border-radius: var(--radius-pill);
  background: #fff;
  border: 1px solid var(--color-border);
  font-weight: 700;
  color: var(--navy);
}
.journey li::before {
  content: counter(j);
  display: grid;
  place-items: center;
  width: 1.8rem; height: 1.8rem;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 0.8rem;
}
.journey li:last-child::before { background: var(--orange); color: var(--navy); }

/* Network diagram */
.network__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.network__text > p { color: #3A4254; margin-bottom: var(--space-4); }
.network__hint { display: flex; gap: 0.5rem; align-items: center; font-size: var(--fs-300); color: var(--color-muted) !important; }

.network__diagram {
  --r: 40cqw;
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1;
  margin-inline: auto;
}
.network__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.network__ring { fill: none; stroke: var(--color-border); stroke-width: 1.5; stroke-dasharray: 4 8; }
.network__ring--inner { stroke: var(--teal-tint); stroke-width: 24; stroke-dasharray: none; opacity: 0.7; }
.network__spokes line {
  stroke: var(--color-border-strong);
  stroke-width: 1.5;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 1.2s var(--ease), stroke 0.3s, stroke-width 0.3s;
}
.network.is-visible .network__spokes line { stroke-dashoffset: 0; }
.network__spokes line.is-hot { stroke: var(--orange); stroke-width: 3; }
.network__center {
  position: absolute;
  left: 50%; top: 50%;
  width: 34%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-lg);
  text-align: center;
  font-weight: 700;
  font-size: clamp(0.7rem, 0.6rem + 0.4vw, 0.9rem);
  color: var(--navy);
  line-height: 1.2;
}
.network__center img { width: 55%; animation: breathe 6s ease-in-out infinite; }
.network__nodes li {
  position: absolute;
  left: 50%; top: 50%;
  transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1));
}
.network__nodes button {
  position: absolute;
  left: 0; top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  width: 7.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--navy);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  transform: translate(-50%, -1.75rem);
}
.network__nodes button .icon {
  width: 3.5rem; height: 3.5rem;
  padding: 0.85rem;
  border-radius: 50%;
  background: #fff;
  border: 2px solid color-mix(in srgb, var(--tone) 35%, #fff);
  color: var(--tone);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), background-color var(--dur), color var(--dur), border-color var(--dur);
}
.network__nodes button:hover .icon,
.network__nodes button:focus-visible .icon,
.network__nodes button.is-hot .icon {
  transform: scale(1.12);
  background: var(--tone);
  border-color: var(--tone);
  color: #fff;
}
.network__nodes button span { max-width: 7.5rem; }
.network__legend { display: none; grid-column: 1 / -1; flex-wrap: wrap; justify-content: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 600; color: var(--navy); }
.network__legend li { padding: 0.3rem 0.7rem; border-radius: var(--radius-pill); background: var(--color-surface); border: 1px solid var(--color-border); }

/* What we're building */
.building__head {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: var(--space-6);
  align-items: end;
  margin-bottom: var(--space-6);
}
.building__intro { color: #C9D5EA; }
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  padding: 1rem 1.25rem;
  margin-bottom: var(--space-7);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.04);
}
.legend li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: #C9D5EA; }

.explorer {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
  grid-auto-rows: auto;
  column-gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.explorer__item { display: contents; }
.explorer__heading { grid-column: 1; margin: 0; font: inherit; }
.explorer__tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 0.95rem 1rem;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  background: none;
  color: #C9D5EA;
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.3;
  text-align: left;
  transition: color var(--dur), background-color var(--dur), padding-left var(--dur) var(--ease);
}
.explorer__tab::before {
  content: '';
  position: absolute;
  left: 0; top: 18%; bottom: 18%;
  width: 4px;
  border-radius: 4px;
  background: var(--tone);
  transform: scaleY(0);
  transition: transform var(--dur) var(--ease);
}
.explorer__tab:hover { color: #fff; padding-left: 1.3rem; }
.explorer__tab[aria-expanded='true'] { color: #fff; background: rgba(255,255,255,0.06); padding-left: 1.3rem; }
.explorer__tab[aria-expanded='true']::before { transform: scaleY(1); }
.explorer__num { font-size: 0.8rem; color: var(--tone); font-weight: 700; min-width: 2ch; }
.explorer__name { flex: 1; }
.explorer__plus { display: none; transition: transform var(--dur) var(--ease); }

.explorer__panel { grid-column: 2; grid-row: 1 / span 10; }
.explorer__panel[hidden] { display: none; }
.explorer__panel-inner {
  display: grid;
  gap: var(--space-5);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.14);
  animation: panel-in 0.55s var(--ease) both;
}
.explorer__panel-inner img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }
.explorer__panel-inner > div { display: grid; gap: var(--space-4); justify-items: start; }
.explorer__lead { font-family: var(--font-display); font-size: var(--fs-600); line-height: 1.25; color: #fff; }
.explorer__panel p:not(.explorer__lead) { color: #C9D5EA; }
.building__more { margin-top: var(--space-7); text-align: center; }

/* Individual to systemic */
.bridge__head { text-align: center; max-width: 52rem; margin: 0 auto var(--space-7); }
.bridge__head .eyebrow { justify-content: center; }
.bridge__sub { font-size: var(--fs-500); color: var(--color-muted); }
.bridge__lanes {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.6fr) minmax(0, 0.7fr);
  gap: var(--space-5);
  align-items: center;
}
.lane {
  padding: var(--space-5);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-family: var(--font-display);
  font-size: var(--fs-500);
  line-height: 1.35;
  color: var(--navy);
}
.lane__label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
  font-family: var(--font-primary);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.lane--today .lane__label { color: var(--teal-ink); }
.lane--tomorrow .lane__label { color: var(--purple); }
.lane--tomorrow { text-align: right; }
.bridge__art .inline-art { width: 100%; height: auto; }
.bridge__art .draw-path,
.story__art .draw-path { stroke-dasharray: 700; stroke-dashoffset: 700; transition: stroke-dashoffset 2s var(--ease) 0.3s; }
.bridge__art.is-visible .draw-path,
.story__art.is-visible .draw-path { stroke-dashoffset: 0; }

.stops {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1rem;
  margin-top: var(--space-7);
  padding-top: 1.75rem;
}
.stops::before {
  content: '';
  position: absolute;
  top: 0.55rem; left: 8%; right: 8%;
  height: 4px;
  border-radius: 4px;
  background: var(--gradient-path);
  opacity: 0.35;
}
.stops li {
  position: relative;
  text-align: center;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
}
.stops__dot {
  position: absolute;
  top: -1.55rem; left: 50%;
  width: 1.1rem; height: 1.1rem;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--tone);
  transform: translateX(-50%);
  transition: transform var(--dur) var(--ease), background-color var(--dur);
}
.stops li:hover .stops__dot { transform: translateX(-50%) scale(1.35); background: var(--tone); }
.bridge__close {
  max-width: 44rem;
  margin: var(--space-7) auto 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--fs-600);
  line-height: 1.3;
  color: var(--navy);
}

/* Pathways */
.pathways__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.pathways__intro > p { color: #3A4254; margin-bottom: var(--space-5); }
.pathways__intro img { width: 100%; max-width: 420px; border-radius: var(--radius-lg); }
.pathways__list { display: grid; gap: 0.75rem; }
.pathway {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.15rem 1.35rem;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--color-border);
  color: var(--navy);
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur);
}
.pathway::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--tone);
  transition: width 0.45s var(--ease);
  z-index: 0;
}
.pathway:hover { transform: translateX(6px); box-shadow: var(--shadow); border-color: transparent; color: var(--navy); }
.pathway:hover::before { width: 100%; opacity: 0.1; }
.pathway > * { position: relative; z-index: 1; }
.pathway__icon {
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border-radius: 14px;
  background: color-mix(in srgb, var(--tone) 14%, #fff);
  color: var(--tone);
  flex-shrink: 0;
}
.pathway__icon .icon { width: 1.5rem; height: 1.5rem; }
.pathway__body { flex: 1; display: grid; gap: 0.15rem; }
.pathway__title { font-family: var(--font-display); font-size: var(--fs-500); font-weight: 500; }
.pathway__text { color: var(--color-muted); font-size: 0.975rem; line-height: 1.45; }
.pathway__arrow { width: 1.4rem; height: 1.4rem; transition: transform var(--dur) var(--ease); }
.pathway:hover .pathway__arrow { transform: translateX(4px); }

/* ========================================
   8. INNER PAGE HERO
======================================== */
.page-hero {
  --tone: var(--teal);
  --tint: var(--teal-tint);
  position: relative;
  padding-top: clamp(2.5rem, 2rem + 3vw, 5rem);
  padding-bottom: clamp(4rem, 3rem + 4vw, 7rem);
  background: linear-gradient(180deg, #fff 0%, var(--tint) 100%);
  overflow: hidden;
}
.page-hero--blue { --tone: var(--blue); --tint: var(--blue-tint); }
.page-hero--purple { --tone: var(--purple); --tint: var(--purple-tint); }
.page-hero--orange { --tone: var(--orange); --tint: var(--orange-tint); }
.page-hero--green { --tone: var(--green); --tint: var(--green-tint); }
.page-hero--navy { --tone: var(--navy); --tint: var(--navy-tint); }
.page-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.page-hero__title {
  font-size: var(--fs-800);
  font-weight: 400;
  letter-spacing: -0.025em;
  font-variation-settings: 'SOFT' 100, 'opsz' 144;
}
.page-hero__lead { max-width: 40rem; margin-top: var(--space-5); font-size: var(--fs-500); color: #3A4254; }
.page-hero__art img {
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  animation: float 9s ease-in-out infinite;
}
.page-hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 60px; fill: #fff; }
.page-hero + .section--soft { margin-top: 0; }

/* ========================================
   9. GET HELP
======================================== */
.emergency {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-5);
  align-items: center;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--radius-lg);
  background: var(--orange-tint);
  border: 2px solid var(--orange);
  margin-bottom: var(--space-8);
}
.emergency__icon {
  display: grid;
  place-items: center;
  width: 4rem; height: 4rem;
  border-radius: 50%;
  background: var(--orange);
  color: var(--navy);
}
.emergency__icon .icon { width: 1.8rem; height: 1.8rem; }
.emergency h2 { font-size: var(--fs-600); margin-bottom: 0.35rem; }
.emergency p { color: #3A4254; }

.resources-head { max-width: 46rem; margin-bottom: var(--space-6); }
.resources-head p { color: var(--color-muted); }
.resources {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.resource {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--color-border);
  border-top: 5px solid var(--tone);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.resource:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.resource__top { display: flex; align-items: center; gap: 0.75rem; }
.resource__icon {
  width: 2.75rem; height: 2.75rem;
  padding: 0.6rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--tone) 12%, #fff);
  color: var(--tone);
}
.resource h3 { font-size: 1.1rem; }
.resource > p { color: var(--color-muted); font-size: 0.975rem; }
.resource__ways { display: grid; gap: 0.5rem; margin-top: auto; padding-top: 0.75rem; border-top: 1px dashed var(--color-border); }
.resource__ways li { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.975rem; }
.resource__ways .icon { margin-top: 0.2rem; color: var(--navy); }
.resource__ways a { font-weight: 700; }

.safe-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.safe-grid__intro { position: sticky; top: calc(var(--header-h) + 2rem); }
.safe-grid__intro > p { color: #3A4254; }
.exit-demo {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: var(--space-6);
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  background: #fff;
  border: 1px dashed var(--purple);
}
.exit-demo__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.95rem;
  border-radius: var(--radius-pill);
  background: var(--purple);
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  animation: nudge 3.5s ease-in-out infinite;
}
.exit-demo p { font-size: 0.975rem; }
.safe-steps { display: grid; gap: 1rem; counter-reset: s; }
.safe-steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  padding: 1.5rem;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--color-border);
}
.safe-steps__icon {
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: var(--teal-tint);
  color: var(--teal-ink);
}
.safe-steps h3 { font-size: 1.15rem; margin-bottom: 0.25rem; }
.safe-steps p { color: #3A4254; }

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.contact-grid__intro > p { color: #3A4254; margin-bottom: var(--space-5); }
.contact-grid__art { width: 100%; max-width: 340px; border-radius: var(--radius-lg); }
.contact-notes { display: grid; gap: 0.75rem; margin-bottom: var(--space-5); }
.contact-notes li { display: flex; gap: 0.65rem; align-items: flex-start; color: #3A4254; }
.contact-notes .icon { margin-top: 0.25rem; color: var(--teal-ink); }

/* ========================================
   10. WHAT WE DO & PROGRAM PAGES
======================================== */
.legend-panel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem 2rem;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.legend-panel__title { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-primary); font-size: 1rem; font-weight: 700; }
.legend-panel__list { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; }
.legend-panel__list div { display: flex; align-items: center; gap: 0.55rem; }
.legend-panel__list dd { font-size: 0.925rem; color: var(--color-muted); }

.program-index { position: relative; display: grid; gap: var(--space-8); }
.program-index__group {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.program-index__label { position: sticky; top: calc(var(--header-h) + 2rem); }
.program-index__count { display: block; font-family: var(--font-display); font-size: var(--fs-800); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--color-border-strong); margin-bottom: 0.5rem; }
.program-index__label h2 { font-size: var(--fs-600); margin-bottom: 0.5rem; }
.program-index__label p { color: var(--color-muted); }
.program-rows { border-top: 1px solid var(--color-border); }
.program-row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 1.25rem;
  padding: 1.35rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--navy);
  text-decoration: none;
  transition: padding var(--dur) var(--ease), background-color var(--dur);
}
.program-row::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 2px;
  background: var(--tone);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.program-row:hover { padding-left: 1.25rem; background: color-mix(in srgb, var(--tone) 5%, #fff); color: var(--navy); }
.program-row:hover::after { transform: scaleX(1); }
.program-row__icon {
  display: grid;
  place-items: center;
  width: 3.25rem; height: 3.25rem;
  border-radius: 16px;
  background: color-mix(in srgb, var(--tone) 12%, #fff);
  color: var(--tone);
  transition: transform var(--dur) var(--ease);
}
.program-row__icon .icon { width: 1.6rem; height: 1.6rem; }
.program-row:hover .program-row__icon { transform: rotate(-8deg) scale(1.05); }
.program-row__body { display: grid; gap: 0.2rem; }
.program-row__title { font-family: var(--font-display); font-size: var(--fs-600); line-height: 1.15; }
.program-row__text { color: var(--color-muted); font-size: 0.975rem; }
.program-row__arrow { width: 1.5rem; height: 1.5rem; transition: transform var(--dur) var(--ease); }
.program-row:hover .program-row__arrow { transform: translateX(5px); }

.program-index__preview {
  position: fixed;
  left: 0; top: 0;
  z-index: 50;
  width: 260px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.85);
  transition: opacity 0.25s var(--ease), transform 0.35s var(--ease);
}
.program-index__preview.is-active { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.quote-band { text-align: center; max-width: 60rem; margin-inline: auto; }
.quote-band .eyebrow { justify-content: center; }
.quote-band__text { font-size: var(--fs-700); line-height: 1.2; font-style: italic; margin-bottom: var(--space-6); }
.quote-band__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.75rem; }

/* Program page */
.program-hero {
  position: relative;
  padding-block: clamp(2rem, 1.5rem + 3vw, 4.5rem);
  background:
    radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, var(--tone) 18%, transparent), transparent 70%),
    linear-gradient(180deg, #fff, var(--tone-tint));
  overflow: hidden;
}
.program-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: var(--space-5); font-size: 0.9rem; }
.breadcrumb li { display: flex; align-items: center; gap: 0.35rem; color: var(--color-muted); }
.breadcrumb li + li::before { content: '/'; opacity: 0.5; }
.breadcrumb a { color: var(--navy); font-weight: 600; }
.program-hero .eyebrow { color: var(--navy); }
.program-hero__icon {
  display: grid;
  place-items: center;
  width: 2.2rem; height: 2.2rem;
  border-radius: 10px;
  background: var(--tone);
  color: #fff;
}
.program-hero__title { font-size: var(--fs-800); font-weight: 400; letter-spacing: -0.025em; font-variation-settings: 'SOFT' 100, 'opsz' 144; }
.program-hero__lead {
  max-width: 42rem;
  margin-top: var(--space-5);
  padding-left: var(--space-5);
  border-left: 4px solid var(--tone);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-600);
  line-height: 1.3;
  color: var(--navy);
}
.program-hero__status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin-top: var(--space-5); color: var(--color-muted); font-size: 0.95rem; }
.program-hero__art img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow); }

.program-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.32fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding-block: var(--space-9);
}
.program-aside { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; display: grid; gap: var(--space-5); }
.toc__title { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 0.5rem; }
.toc ol { border-left: 2px solid var(--color-border); }
.toc a {
  position: relative;
  display: block;
  padding: 0.45rem 0 0.45rem 1rem;
  margin-left: -2px;
  border-left: 2px solid transparent;
  color: var(--color-muted);
  font-weight: 600;
  text-decoration: none;
  line-height: 1.35;
  transition: color var(--dur), border-color var(--dur);
}
.toc a:hover { color: var(--navy); }
.toc a.is-active { color: var(--navy); border-color: var(--tone, var(--teal)); }
.aside-help {
  padding: 1.1rem 1.2rem;
  border-radius: var(--radius);
  background: var(--orange-tint);
  font-size: 0.95rem;
}
.aside-help__title { display: flex; gap: 0.4rem; align-items: center; font-weight: 700; color: var(--navy); margin-bottom: 0.25rem; }
.aside-help .text-link { margin-top: 0.5rem; }

.program-article { display: grid; gap: var(--space-8); max-width: 48rem; }
.prose-section { display: grid; gap: var(--space-4); }
.prose-section__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.prose-section h2 { font-size: var(--fs-700); }
.prose-section p { color: #333A48; }
.pull-line {
  font-family: var(--font-display);
  font-size: var(--fs-500);
  font-style: italic;
  color: var(--navy) !important;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.list-title { font-weight: 700; color: var(--navy) !important; }
.prose-section .tick-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1.5rem; }
.page-program .tick-list .icon { background: color-mix(in srgb, var(--tone, var(--teal)) 14%, #fff); color: var(--navy); }
.closing-quote {
  position: relative;
  padding: 2rem 2rem 2rem 4rem;
  border-radius: var(--radius-lg);
  background: var(--navy);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-600);
  line-height: 1.3;
}
.closing-quote::before {
  content: '\201C';
  position: absolute;
  left: 1.25rem; top: 0.5rem;
  font-size: 4.5rem;
  line-height: 1;
  color: var(--orange);
}
.soon-panel {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  padding: 2rem;
  border-radius: var(--radius-lg);
  border: 2px dashed var(--color-border-strong);
}
.soon-panel h2 { font-size: var(--fs-600); }
.soon-panel__badge { padding: 0.3rem 0.8rem; border-radius: var(--radius-pill); background: var(--purple-tint); color: var(--purple); font-weight: 700; font-size: 0.8rem; }

/* tone per program page */
.page-program.tone-teal { --tone: var(--teal); }
.page-program.tone-blue { --tone: var(--blue); }
.page-program.tone-purple { --tone: var(--purple); }
.page-program.tone-orange { --tone: var(--orange); }
.page-program.tone-green { --tone: var(--green); }
.page-program.tone-navy { --tone: var(--navy); }
.page-program.tone-magenta { --tone: var(--magenta); }

.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.related-link {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: start;
  height: 100%;
  padding: 1.5rem;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--color-border);
  color: var(--navy);
  text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.related-link:hover { transform: translateY(-4px); box-shadow: var(--shadow); color: var(--navy); }
.related-link__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 12px; background: color-mix(in srgb, var(--tone) 12%, #fff); color: var(--tone); }
.related-link__title { display: block; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.2; margin-bottom: 0.35rem; }
.related-link__text { display: block; color: var(--color-muted); font-size: 0.95rem; line-height: 1.45; }
.related-link__arrow { transition: transform var(--dur) var(--ease); }
.related-link:hover .related-link__arrow { transform: translate(3px, -3px); }

.pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding-block: var(--space-7);
}
.pager__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.2;
  text-decoration: none;
}
.pager__link small { display: block; font-family: var(--font-primary); font-size: 0.8rem; font-weight: 700; color: var(--color-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.pager__link .icon { width: 2.75rem; height: 2.75rem; padding: 0.7rem; border-radius: 50%; border: 1px solid var(--color-border-strong); transition: background-color var(--dur), color var(--dur), transform var(--dur) var(--ease); }
.pager__link:hover .icon { background: var(--navy); color: #fff; }
.pager__link--prev:hover .icon { transform: translateX(-3px); }
.pager__link--next { justify-content: flex-end; text-align: right; }
.pager__link--next:hover .icon { transform: translateX(3px); }
.pager__all { font-weight: 700; color: var(--navy); }

/* ========================================
   11. IMPACT, ABOUT, TEAM, INVOLVED, DONATE, LEGAL
======================================== */
.impact-now {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.impact-now p { color: #3A4254; }
.metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.metric {
  display: grid;
  gap: 0.35rem;
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--color-surface);
  border: 1px dashed var(--color-border-strong);
  position: relative;
  overflow: hidden;
}
.metric::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 4px; background: var(--tone); }
.metric__value { color: var(--tone); }
.metric__value .icon { width: 2.25rem; height: 2.25rem; margin-bottom: 0.5rem; }
.metric__label { font-weight: 700; color: var(--navy); }
.metric__note { font-size: 0.85rem; color: var(--color-muted); }

.learn__intro { max-width: 48rem; margin-bottom: var(--space-7); }
.learn__intro p { color: #3A4254; }
.learn__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.learn__col { padding: 2rem; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--color-border); }
.learn__col h3 { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1.25rem; font-size: 1.2rem; }

.principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.principles li { padding-top: 1.25rem; border-top: 3px solid var(--tone); }
.principles__icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1rem; border-radius: 50%; background: color-mix(in srgb, var(--tone) 12%, #fff); color: var(--tone); }
.principles h3 { font-size: 1.15rem; margin-bottom: 0.35rem; }
.principles p { color: var(--color-muted); font-size: 0.975rem; }

.values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.value { text-align: center; }
.value img {
  width: 78%;
  margin: 0 auto 1.25rem;
  transition: transform 0.6s var(--ease);
}
.value:hover img { transform: rotate(-6deg) scale(1.05); }
.value h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-600); margin-bottom: 0.5rem; color: var(--navy); }
.value p { color: var(--color-muted); max-width: 26ch; margin-inline: auto; }

.statement-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.statement {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  padding: clamp(1.5rem, 3vw, 2.75rem);
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--color-border);
}
.statement--vision { background: var(--navy); border-color: var(--navy); color: #DCE6F7; }
.statement--vision .eyebrow { color: var(--teal); }
.statement--vision .statement__lead { color: #fff; }
.statement__lead { font-family: var(--font-display); font-size: var(--fs-500); line-height: 1.4; color: var(--navy); }
.statement p:not(.statement__lead):not(.eyebrow) { font-size: 0.99rem; }

.character {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.character__intro p { color: #3A4254; }
.character__words { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.character__words li {
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius-pill);
  border: 2px solid var(--tone);
  font-family: var(--font-display);
  font-size: var(--fs-600);
  line-height: 1.1;
  color: var(--navy);
  transition: background-color var(--dur), color var(--dur), transform var(--dur) var(--ease);
}
.character__words li:hover { background: var(--tone); color: #fff; transform: translateY(-3px) rotate(-1.5deg); }

.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.story__art .inline-art { width: 100%; height: auto; border-radius: var(--radius-lg); }
.story__lead { font-family: var(--font-display); font-size: var(--fs-600); color: var(--orange); margin-bottom: var(--space-4); }
.story__text p + p { margin-top: var(--space-4); }

.teaser {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.teaser img { width: 100%; border-radius: var(--radius-lg); }
.teaser p { color: #3A4254; margin-bottom: var(--space-5); }

.people { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.person { display: grid; gap: 0.35rem; }
.person__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  margin-bottom: 0.75rem;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 50% 38%, #fff 0 18%, transparent 18.5%),
    radial-gradient(ellipse 36% 26% at 50% 88%, #fff 0 99%, transparent 100%),
    color-mix(in srgb, var(--tone) 22%, #fff);
  overflow: hidden;
  transition: transform var(--dur) var(--ease);
}
.person__photo span {
  position: absolute;
  right: 0.9rem; top: 0.9rem;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--navy);
  font-weight: 700;
  font-size: 0.8rem;
}
.person:hover .person__photo { transform: translateY(-4px); }
.person__name { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; }
.person__role { font-weight: 700; color: var(--teal-ink); font-size: 0.95rem; }
.person__bio { color: var(--color-muted); font-size: 0.95rem; }

.future-team { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.future-team p { color: #3A4254; }
.future-team__slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.future-team__slots span {
  aspect-ratio: 1;
  border-radius: var(--radius);
  border: 2px dashed var(--color-border-strong);
  background: radial-gradient(circle at 50% 40%, var(--navy-tint) 0 16%, transparent 16.5%);
}

.ways { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.way {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--color-border);
  scroll-margin-top: calc(var(--header-h) + 2rem);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur);
}
.way:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--tone) 40%, #fff); }
.way:target { border-color: var(--tone); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tone) 20%, #fff); }
.way--wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  background: linear-gradient(120deg, var(--blue-tint), #fff 60%);
}
.way__icon {
  display: grid;
  place-items: center;
  width: 3.5rem; height: 3.5rem;
  border-radius: 16px;
  background: var(--tone);
  color: #fff;
}
.way--wide .way__icon { width: 5rem; height: 5rem; border-radius: 24px; }
.way__icon .icon { width: 1.6rem; height: 1.6rem; }
.way--wide .way__icon .icon { width: 2.2rem; height: 2.2rem; }
.way h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-600); }
.way p { color: #3A4254; }
.way .text-link { margin-top: auto; }
.way__body { display: grid; gap: 0.5rem; }
.way__tag { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-ink) !important; }
.way__tag--soon { color: var(--purple) !important; }
.way__who { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.25rem; }
.way__who li { padding: 0.25rem 0.75rem; border-radius: var(--radius-pill); background: #fff; border: 1px solid var(--color-border); font-size: 0.875rem; font-weight: 600; color: var(--navy); }

.donate-hero {
  padding-block: clamp(2.5rem, 2rem + 3vw, 5rem) var(--space-9);
  background: linear-gradient(180deg, #fff, var(--orange-tint));
}
.donate-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.give-points { display: grid; gap: 0.75rem; margin-top: var(--space-6); }
.give-points li { display: flex; gap: 0.75rem; align-items: center; font-weight: 600; color: var(--navy); }
.give-points .icon { width: 2.4rem; height: 2.4rem; padding: 0.55rem; border-radius: 50%; background: #fff; color: var(--orange-ink); box-shadow: var(--shadow-sm); }
.donate-hero__art { width: 100%; max-width: 300px; margin-top: var(--space-6); border-radius: var(--radius-lg); }

.donate-card {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  display: grid;
  gap: 1.25rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
}
.donate-card__title { font-size: var(--fs-600); }
.segmented { display: grid; grid-template-columns: 1fr 1fr; padding: 0.3rem; border-radius: var(--radius-pill); background: var(--color-surface); border: 1px solid var(--color-border); }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.segmented span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  color: var(--color-muted);
  transition: background-color var(--dur), color var(--dur), box-shadow var(--dur);
}
.segmented input:checked + span { background: var(--navy); color: #fff; box-shadow: var(--shadow-sm); }
.segmented input:focus-visible + span { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.amounts legend { margin-bottom: 0.6rem; font-weight: 700; color: var(--navy); }
.amounts label { position: relative; }
.amounts input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.amounts span {
  display: grid;
  place-items: center;
  min-height: 56px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-border);
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--navy);
  transition: border-color var(--dur), background-color var(--dur), transform var(--dur) var(--ease);
}
.amounts label:hover span { border-color: var(--orange); transform: translateY(-2px); }
.amounts input:checked + span { border-color: var(--orange); background: var(--orange-tint); box-shadow: inset 0 0 0 1px var(--orange); }
.amounts input:focus-visible + span { outline: 3px solid var(--navy); outline-offset: 2px; }
.money { display: flex; align-items: center; border: 2px solid var(--color-border); border-radius: var(--radius-sm); background: #fff; }
.money span { padding-left: 1rem; font-weight: 700; color: var(--navy); }
.money input { border: 0 !important; box-shadow: none !important; }
.money:focus-within { border-color: var(--navy); }
.donate-card__summary { padding: 0.9rem 1rem; border-radius: var(--radius-sm); background: var(--color-surface); color: var(--navy); }
.donate-card__secure { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.85rem; color: var(--color-muted); }
.donate-card__secure .icon { margin-top: 0.15rem; }

.give-ways { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.give-ways li { display: grid; gap: 0.5rem; align-content: start; padding: 1.5rem; border-radius: var(--radius); background: #fff; border: 1px solid var(--color-border); }
.give-ways .icon { width: 2.75rem; height: 2.75rem; padding: 0.6rem; border-radius: 12px; background: color-mix(in srgb, var(--tone) 12%, #fff); color: var(--tone); }
.give-ways h3 { font-size: 1.1rem; }
.give-ways p { color: var(--color-muted); font-size: 0.95rem; }

.trust {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 2rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}
.trust__icon { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--green-tint); color: var(--green-ink); }
.trust__icon .icon { width: 2rem; height: 2rem; }
.trust h2 { font-size: var(--fs-600); margin-bottom: 0.35rem; }
.trust p { color: #3A4254; }
.trust p + p { margin-top: 0.5rem; }

.legal-hero { padding-block: clamp(2.5rem, 2rem + 3vw, 5rem) var(--space-7); background: linear-gradient(180deg, #fff, var(--blue-tint)); }
.legal-hero__inner { max-width: 52rem; }
.legal-body { padding-block: var(--space-8) var(--space-9); }
.prose { max-width: 46rem; display: grid; gap: var(--space-4); }
.prose h2 { font-size: var(--fs-600); margin-top: var(--space-5); }
.notice { display: flex; gap: 0.75rem; padding: 1rem 1.25rem; border-radius: var(--radius-sm); background: #FFF7D6; color: #4D3C00; }
.notice .icon { margin-top: 0.25rem; }
.plain-list { display: grid; gap: 0.5rem; padding-left: 1.25rem; list-style: disc; }

/* ========================================
   12. FORMS
======================================== */
.form-card {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow);
}
.section--soft .form-card { box-shadow: var(--shadow-lg); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.field { display: grid; gap: 0.4rem; align-content: start; }
.field--full { grid-column: 1 / -1; }
.field label, .field legend { font-weight: 700; color: var(--navy); }
.optional { font-weight: 400; color: var(--color-muted); }
.req { color: var(--color-danger); }
.field input[type='text'],
.field input[type='email'],
.field input[type='number'],
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.75rem 1rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-text);
  transition: border-color var(--dur), box-shadow var(--dur);
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-border-strong); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 4px rgba(18, 173, 179, 0.25);
}
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--color-danger); }
.field__hint { font-size: 0.875rem; color: var(--color-muted); }
.field__error { display: flex; gap: 0.35rem; font-size: 0.9rem; font-weight: 700; color: var(--color-danger); }
.field__error::before { content: '!'; display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--color-danger); color: #fff; font-size: 0.75rem; flex-shrink: 0; margin-top: 0.1rem; }
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 2.75rem; cursor: pointer; }
.select .icon { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--navy); }

.choices { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.choices legend { width: 100%; margin-bottom: 0.4rem; }
.choice, .check { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; cursor: pointer; }
.choice input, .check input { width: 1.35rem; height: 1.35rem; accent-color: var(--navy); cursor: pointer; }

.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.5rem; }
.chips legend { width: 100%; margin-bottom: 0.6rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 46px;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-border);
  font-weight: 600;
  color: var(--navy);
  transition: all var(--dur) var(--ease);
}
.chip:hover span { border-color: var(--teal); }
.chip input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.chips .field__error { width: 100%; }

.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.75rem; }
.form-foot__note { display: flex; gap: 0.4rem; align-items: flex-start; flex: 1; min-width: 220px; font-size: 0.875rem; color: var(--color-muted); }
.form-status:empty { display: none; }
.form-status {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  animation: panel-in 0.45s var(--ease);
}
.form-status.is-success { background: var(--green-tint); color: #2E5A2D; border: 1px solid #C3DAC2; }
.form-status.is-error { background: #FCE8E6; color: var(--color-danger); border: 1px solid #F3C1BC; }
.form-status:focus { outline: none; }

/* ========================================
   13. FOOTER
======================================== */
.site-footer {
  position: relative;
  background: var(--navy);
  color: #C9D5EA;
  padding-top: var(--space-8);
  overflow: hidden;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--gradient-path);
}
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--orange); }
.footer-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: var(--space-7);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-cta__line {
  font-family: var(--font-display);
  font-size: var(--fs-700);
  line-height: 1.1;
  color: #fff;
  max-width: 20ch;
  font-variation-settings: 'SOFT' 100, 'opsz' 144;
}
.footer-cta__line em { color: var(--teal); }
.footer-cta__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 0.9fr)) minmax(0, 1.1fr);
  gap: 2.5rem;
  padding-block: var(--space-7);
}
.footer-brand img { width: 240px; margin-bottom: 1rem; }
.footer-brand p { max-width: 30ch; }
.footer-tagline { display: flex; flex-wrap: wrap; gap: 0 0.5rem; margin-top: 1rem; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; }
.footer-tagline span:nth-child(1) { color: var(--teal); }
.footer-tagline span:nth-child(2) { color: #C79ED0; }
.footer-tagline span:nth-child(3) { color: var(--orange); }
.footer-tagline span:nth-child(4) { color: var(--sky); }
.footer-col__title { margin-bottom: 1rem; font-family: var(--font-primary); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #8FA3C6; }
.footer-col ul { display: grid; gap: 0.55rem; }
.footer-col ul a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--dur) var(--ease), color var(--dur); }
.footer-col ul a:hover { background-size: 100% 1px; }
.footer-help { padding: 1.5rem; border-radius: var(--radius); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); align-self: start; }
.footer-help p { font-size: 0.95rem; line-height: 1.5; margin-bottom: 0.8rem; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-block: 1.5rem 6rem;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 0.875rem;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.site-footer .placeholder-note { background: rgba(255, 247, 214, 0.12); color: #F8E7A6; }

/* ========================================
   14. ANIMATIONS
======================================== */


/* Scroll reveal (only when JavaScript is running) */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.9s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.js [data-reveal='fade'] { transform: none; }
.js [data-reveal='zoom'] { transform: scale(0.94); }
.js [data-reveal='slide-left'] { transform: translateX(40px); }
.js [data-reveal='slide-right'] { transform: translateX(-40px); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Staggered children */
.js [data-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease), transform 0.8s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms + 80ms);
}
.js [data-stagger].is-visible > * { opacity: 1; transform: none; }

/* Headline word reveal */
.split-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.split-word > span { display: inline-block; }
.js [data-split] .split-word > span {
  transform: translateY(105%);
  transition: transform 0.9s var(--ease);
  transition-delay: calc(var(--w, 0) * 55ms);
}
.js [data-split].is-visible .split-word > span { transform: none; }

/* Hero title words */
.js .hero__word { opacity: 0; transform: translateY(0.4em); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: calc(var(--wi, 0) * 140ms + 100ms); }
.js.is-loaded .hero__word { opacity: 1; transform: none; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
@keyframes sunrise {
  from { transform: translateY(90px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes road-in {
  from { transform: scaleY(0); opacity: 0; }
  to { transform: scaleY(1); opacity: 1; }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% - var(--gap))); }
}
@keyframes panel-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes nudge {
  0%, 80%, 100% { transform: translateX(0); }
  85% { transform: translateX(4px); }
  90% { transform: translateX(-2px); }
}

/* ========================================
   15. RESPONSIVE DESIGN
======================================== */

/* Large desktop */
@media (min-width: 1600px) {
  :root { --container: 1360px; }
}

/* Laptop */
@media (max-width: 1240px) {
  .nav-actions .btn--support { display: none; }
  .nav-link { padding-inline: 0.6rem; }
  .nav-link::after { left: 0.6rem; right: 0.6rem; }
  .brand img { height: 48px; }
  .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .give-ways, .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 0 2rem; align-items: center; }
  .footer-brand img { grid-row: span 2; margin: 0; }
  .stops { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.75rem; }
  .stops::before { display: none; }
}

/* Tablet: mobile navigation */
@media (max-width: 1080px) {
  :root { --header-h: 72px; }
  .utility-bar__tip { display: none; }
  /* backdrop-filter would make the header the containing block for the fixed menu */
  .site-header { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header__inner { height: var(--header-h); }
  .site-header.is-scrolled .site-header__inner { height: 64px; }
  .brand img { height: 44px; }
  .site-header.is-scrolled .brand img { height: 40px; }
  .menu-toggle { display: inline-flex; }

  .primary-nav {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 120;
    width: min(420px, 100%);
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
    padding: calc(var(--header-h) + 1rem) var(--gutter) 6rem;
    background: #fff;
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.45s var(--ease), visibility 0.45s;
  }
  .nav-open .primary-nav { transform: none; visibility: visible; }
  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90; /* below the sticky header, which holds the menu panel */
    background: rgba(6, 41, 101, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s, visibility 0.35s;
  }
  .nav-open .nav-backdrop { opacity: 1; visibility: visible; }
  .menu-toggle { position: relative; z-index: 130; }

  .nav-list { flex-direction: column; align-items: stretch; margin: 0; gap: 0; }
  .nav-list > li { border-bottom: 1px solid var(--color-border); }
  .nav-link { width: 100%; justify-content: space-between; padding: 1rem 0.25rem; font-size: 1.15rem; }
  .nav-link::after { display: none; }
  .nav-link[aria-current] { color: var(--teal-ink); }

  .submenu, .mega {
    position: static;
    width: auto;
    display: none;
    padding: 0 0 1rem;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .has-menu.is-open > .submenu,
  .has-menu.is-open > .mega { display: block; transform: none; }
  .mega__intro { display: none; }
  .mega__grid { grid-template-columns: 1fr; }
  .nav-actions { flex-direction: column; align-items: stretch; }
  .nav-actions .btn, .nav-actions .btn--support { display: inline-flex; min-height: 52px; }

  .hero__inner, .page-hero__inner, .program-hero__inner { grid-template-columns: 1fr; }
  .hero__art { max-width: 520px; margin-inline: auto; width: 100%; }
  .hero__note { left: 0; }
  .page-hero__art img { max-width: 340px; }
  .program-hero__art { max-width: 460px; }

  .places__grid, .mv__grid, .network__grid, .pathways__grid, .safe-grid,
  .contact-grid, .impact-now, .character, .story, .teaser, .future-team, .donate-hero__grid {
    grid-template-columns: 1fr;
  }
  .places__intro, .mv__sticky, .safe-grid__intro, .program-index__label, .donate-card { position: static; }
  .mv__rail { display: none; }
  .building__head { grid-template-columns: 1fr; }

  /* Explorer becomes an accordion */
  .explorer { display: block; }
  .explorer__item { display: block; border-bottom: 1px solid rgba(255,255,255,0.12); }
  .explorer__tab { border-bottom: 0; }
  .explorer__plus { display: block; }
  .explorer__tab[aria-expanded='true'] .explorer__plus { transform: rotate(45deg); }
  .explorer__panel-inner { margin: 0 0 1.25rem; grid-template-columns: 1fr; }
  .explorer__panel-inner img { aspect-ratio: 16 / 7; }

  .bridge__lanes { grid-template-columns: 1fr 1fr; }
  .bridge__art { grid-column: 1 / -1; grid-row: 1; width: 100%; max-width: 620px; justify-self: center; }

  .resources { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .program-index__group { grid-template-columns: 1fr; gap: 1rem; }
  .program-index__count { display: none; }
  .program-index__preview { display: none; }
  .program-layout { grid-template-columns: 1fr; }
  .program-aside { position: static; }
  .toc ol { display: flex; flex-wrap: wrap; gap: 0.5rem; border: 0; }
  .toc a { margin: 0; padding: 0.4rem 0.9rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill); }
  .aside-help { display: none; }
  .related { grid-template-columns: 1fr; }
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
  .statement-grid { grid-template-columns: 1fr; }
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .donate-hero__art { display: none; }
  .split-head { grid-template-columns: 1fr; gap: 1rem; }
  .split-head > p { justify-self: start; }
}

/* Mobile */
@media (max-width: 720px) {
  body { font-size: 1.0625rem; }
  .utility-bar { font-size: 0.8125rem; }
  .utility-bar__inner { justify-content: center; text-align: center; }
  .utility-bar__msg { justify-content: center; }
  .menu-toggle__label { display: none; }
  .menu-toggle { padding: 0.5rem 0.75rem; }
  .brand img { height: 40px; }

  .hero__title { font-size: clamp(2.6rem, 11vw, 3.5rem); }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .hero__actions .text-link { align-self: center; }
  .hero__note { position: relative; left: auto; bottom: auto; max-width: none; margin-top: -1rem; }
  .harm-marquee { margin-top: var(--space-6); }

  .affirm__body { margin-left: 0; }
  .places__list li { font-size: 1.35rem; }

  .network__diagram { --r: 37cqw; max-width: 420px; }
  .network__nodes button { width: 5.5rem; font-size: 0.7rem; transform: translate(-50%, -1.3rem); }
  .network__nodes button .icon { width: 2.6rem; height: 2.6rem; padding: 0.6rem; }
  .network__center span { display: none; }

  .legend { flex-direction: column; }
  .bridge__lanes { grid-template-columns: 1fr; }
  .lane--tomorrow { text-align: left; }
  .stops { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .pathway { padding: 1rem; gap: 0.85rem; }
  .pathway__arrow { display: none; }

  .emergency { grid-template-columns: 1fr; text-align: left; }
  .emergency .btn { width: 100%; }
  .resources { grid-template-columns: 1fr; }
  .exit-demo { flex-direction: column; align-items: flex-start; }

  .form-grid { grid-template-columns: 1fr; }
  .form-foot .btn { width: 100%; }

  .legend-panel { grid-template-columns: 1fr; }
  .program-row { grid-template-columns: auto 1fr; padding-inline: 0.25rem; }
  .program-row__meta { grid-column: 2; }
  .program-row__arrow { display: none; }
  .program-row:hover { padding-left: 0.25rem; }

  .prose-section .tick-list { grid-template-columns: 1fr; }
  .closing-quote { padding: 3.25rem 1.5rem 1.5rem; }
  .pager { grid-template-columns: 1fr 1fr; }
  .pager__all { grid-column: 1 / -1; grid-row: 2; text-align: center; }
  .pager__link { font-size: 1rem; }
  .pager__link .icon { display: none; }

  .metric-grid, .learn__cols, .principles, .give-ways, .ways { grid-template-columns: 1fr; }
  .way--wide { grid-template-columns: 1fr; }
  .values { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; }
  .value p { font-size: 0.95rem; }
  .people { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .person__name { font-size: 1.1rem; }
  .character__words li { font-size: 1.2rem; }
  .trust { grid-template-columns: 1fr; }
  .cta-strip { grid-template-columns: 1fr; grid-template-areas: 'title' 'text' 'actions'; }

  .footer-main { grid-template-columns: 1fr 1fr; gap: 2rem 1.25rem; }
  .footer-brand { grid-template-columns: 1fr; }
  .footer-help { grid-column: 1 / -1; }
  .footer-cta__actions { width: 100%; }
  .footer-cta__actions .btn { flex: 1; }
  .footer-bottom { flex-direction: column; padding-bottom: 7rem; }

  .quick-exit { left: 50%; right: auto; transform: translateX(-50%); bottom: 0.75rem; min-height: 50px; padding-inline: 1.5rem; }
  .quick-exit:hover { transform: translateX(-50%) translateY(-2px); }
}

/* Small mobile */
@media (max-width: 400px) {
  .utility-bar__sep, .utility-bar__msg > a { display: none; }
  .values, .people { grid-template-columns: 1fr; }
  .footer-main { grid-template-columns: 1fr; }
  .amounts { grid-template-columns: repeat(2, 1fr); }
  .network__nodes button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .network__diagram { --r: 38cqw; }
  .network__legend { display: flex; }
}

/* ========================================
   16. REDUCED MOTION & PRINT
======================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .js [data-reveal], .js [data-stagger] > *, .js .hero__word { opacity: 1; transform: none; }
  .js [data-split] .split-word > span { transform: none; }
  .harm-marquee, .harm-marquee__group { flex-wrap: wrap; -webkit-mask-image: none; mask-image: none; }
  .network__spokes line { stroke-dashoffset: 0; }
  .bridge__art .draw-path, .story__art .draw-path { stroke-dashoffset: 0; }
}

@media print {
  .utility-bar, .site-header, .quick-exit, .footer-cta, .scroll-progress { display: none !important; }
  .js body, .js [data-reveal], .js [data-stagger] > * { opacity: 1 !important; transform: none !important; }
  body { color: #000; }
}