/* ==========================================================================
   Open the Gait Foundation — Design System
   Brand blue #4A86E8 sampled directly from logo.png
   --------------------------------------------------------------------------
   Contents
     1.  Design tokens
     2.  Reset & base
     3.  Typography
     4.  Layout primitives
     5.  Buttons & links
     6.  Cards, media, badges
     7.  Header & navigation
     8.  Hero
     9.  Steps, stats, accordion
     10. Forms
     11. Footer
     12. Motion & reveal
     13. Utilities
   ========================================================================== */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
  /* -- Brand ------------------------------------------------------------- */
  /* --brand-400 is the exact logo blue. It clears 3:1 so it is safe for
     large display text, icons and borders — but NOT for body copy or as a
     button fill behind white text. --brand-600 does the interactive work
     (5.06:1 on white, both directions). */
  --brand-50:  #EEF4FE;
  --brand-100: #DCE8FC;
  --brand-200: #BBD1F8;
  --brand-300: #8FB4F1;
  --brand-400: #4A86E8;
  --brand-500: #3B78E0;
  --brand-600: #2E6AD6;
  --brand-700: #245BC0;
  --brand-800: #1B4694;
  --brand-900: #133168;

  /* -- Neutrals ---------------------------------------------------------- */
  --ink:        #12161F;
  --ink-2:      #3A4152;
  --ink-3:      #5B6377;
  --sand-50:    #FBFAF8;
  --sand-100:   #F6F4F0;
  --sand-200:   #EDE9E2;
  --sand-300:   #DFD9CF;

  /* -- Semantic ---------------------------------------------------------- */
  --ground:        var(--sand-100);
  --surface:       #FFFFFF;
  --surface-2:     var(--sand-50);
  --surface-inset: var(--brand-50);
  --text:          var(--ink);
  --text-muted:    var(--ink-3);
  --text-invert:   #FFFFFF;
  --border:        #E4E0D8;
  --border-strong: #D2CCC1;
  --accent:        var(--brand-400);
  /* --accent is the logo blue at 3.58:1 — fine for large text, icons and rules,
     but it fails AA below 24px. Small accent text uses this darker token. */
  --accent-text:   var(--brand-700);
  --interactive:   var(--brand-600);
  --interactive-hover: var(--brand-700);
  --link:          var(--brand-700);
  --ring:          var(--brand-600);
  --danger:        #C0342B;
  --danger-bg:     #FDF2F1;
  --success:       #1F7A4D;
  --success-bg:    #EFF8F3;
  --ink-deep:      #0C1017;

  /* -- Typography -------------------------------------------------------- */
  --font-display: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-display: clamp(2.6rem, 1.55rem + 4.1vw, 4.5rem);
  --fs-h1:      clamp(2.15rem, 1.5rem + 2.7vw, 3.4rem);
  --fs-h2:      clamp(1.75rem, 1.35rem + 1.7vw, 2.6rem);
  --fs-h3:      clamp(1.25rem, 1.11rem + 0.6vw, 1.55rem);
  --fs-h4:      clamp(1.06rem, 1rem + 0.3vw, 1.2rem);
  --fs-lede:    clamp(1.1rem, 1.03rem + 0.4vw, 1.3rem);
  --fs-body:    1.0625rem;   /* 17px — above the 16px mobile minimum */
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;

  --lh-tight: 1.08;
  --lh-snug:  1.25;
  --lh-body:  1.65;

  /* -- Spacing (4pt rhythm) ---------------------------------------------- */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.25rem;  --space-6: 1.5rem;
  --space-8: 2rem;     --space-10: 2.5rem;  --space-12: 3rem;
  --space-16: 4rem;    --space-20: 5rem;    --space-24: 6rem;
  --section-y: clamp(4rem, 2.4rem + 6.4vw, 7.5rem);

  /* -- Radii ------------------------------------------------------------- */
  --r-xs: 8px;  --r-sm: 12px; --r-md: 16px;
  --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;

  /* -- Elevation --------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(18, 22, 31, 0.05);
  --shadow-sm: 0 2px 8px rgba(18, 22, 31, 0.06);
  --shadow-md: 0 10px 30px -12px rgba(18, 22, 31, 0.18);
  --shadow-lg: 0 26px 60px -22px rgba(18, 22, 31, 0.30);
  --shadow-brand: 0 14px 32px -14px rgba(46, 106, 214, 0.55);

  /* -- Motion ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.22, 0.68, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.32, 0.48, 1);
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 380ms;

  /* -- Layout ------------------------------------------------------------ */
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(1.15rem, 0.7rem + 2vw, 2.5rem);
  /* Measured, not estimated. Drives scroll-padding-top, the sticky legal
     contents offset and h2 scroll-margin, so an inaccurate value makes anchor
     jumps land underneath the header. */
  --header-h: 85px;

  /* -- Layers ------------------------------------------------------------ */
  --z-base: 0; --z-raised: 10; --z-sticky: 40; --z-header: 60;
  --z-drawer: 80; --z-modal: 100; --z-toast: 120;
}

/* Dark mode: tokens flip, every component inherits. Photography keeps its
   own scrims so overlaid text stays legible in both themes. */
@media (prefers-color-scheme: dark) {
  :root {
    --ground:        #0D1017;
    --surface:       #151A23;
    --surface-2:     #1B212C;
    --surface-inset: #16233A;
    --text:          #EDF0F5;
    --text-muted:    #A2ACBE;
    --text-invert:   #0D1017;
    --border:        #262E3B;
    --border-strong: #36404F;
    --accent:        var(--brand-300);
    --accent-text:   var(--brand-200);
    --link:          var(--brand-300);
    --ring:          var(--brand-300);
    --danger:        #F98A80;
    --danger-bg:     #2A1614;
    --success:       #6FD3A2;
    --success-bg:    #10241A;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 10px 30px -12px rgba(0, 0, 0, 0.65);
    --shadow-lg: 0 26px 60px -22px rgba(0, 0, 0, 0.8);
  }
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;   /* keep, never disable user zoom */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  overflow-x: hidden;
}

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

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

button { background: none; border: 0; padding: 0; }

:where(a) { color: var(--link); }

/* One visible focus treatment everywhere. Never removed. */
:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--brand-200); color: var(--ink); }

/* Skip link — first tab stop on every page */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100%;
  z-index: var(--z-toast);
  padding: var(--space-3) var(--space-5);
  background: var(--interactive);
  color: #fff;
  border-radius: var(--r-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--dur) var(--ease-out);
}
.skip-link:focus-visible { top: var(--space-4); }

/* ==========================================================================
   3. Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6, .display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: -0.018em;
  color: var(--text);
  text-wrap: balance;
}

.display {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.032em;
  font-weight: 600;
}

h1, .h1 { font-size: var(--fs-h1); letter-spacing: -0.028em; line-height: 1.12; }
h2, .h2 { font-size: var(--fs-h2); letter-spacing: -0.024em; line-height: 1.16; }
h3, .h3 { font-size: var(--fs-h3); letter-spacing: -0.014em; line-height: 1.3; }
h4, .h4 { font-size: var(--fs-h4); letter-spacing: -0.01em; line-height: 1.4; }

p { text-wrap: pretty; }

.lede {
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 62ch;
}

.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.muted { color: var(--text-muted); }

/* Long-form prose blocks — capped measure for readability */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--space-5); }
.prose p { color: var(--ink-2); }
.prose strong { color: var(--text); font-weight: 600; }
.prose h2 { margin-top: var(--space-12); }
.prose h3 { margin-top: var(--space-8); }
.prose a { color: var(--link); text-underline-offset: 3px; }
/* Lists were falling through to browser defaults, which is the single biggest
   tell that a long document has not been designed. */
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose ol { padding-left: 1.6rem; }
.prose li::marker { color: var(--accent-text); }
.prose li + li { margin-top: var(--space-3); }
.prose li > ul, .prose li > ol { margin-top: var(--space-3); }
.prose li { padding-left: 0.25rem; }

@media (prefers-color-scheme: dark) {
  .prose p { color: #C6CDDB; }
}

/* ==========================================================================
   Legal documents (privacy, terms)

   A twelve-section document needs to be navigable and citable, so sections
   are numbered and anchored and a contents list sits alongside them. The
   numbering comes from a CSS counter rather than the markup, so it cannot
   drift out of sequence when a section is added or removed.
   ========================================================================== */

.legal { display: grid; gap: var(--space-10); align-items: start; }

@media (min-width: 940px) {
  .legal {
    grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
    gap: clamp(2.5rem, 1rem + 4vw, 5rem);
  }
  .legal__toc {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
    max-height: calc(100vh - var(--header-h) - 3rem);
    overflow-y: auto;
  }
}

.legal__toc-title {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}
.legal__toc-list {
  counter-reset: toc;
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 2px solid var(--border);
}
.legal__toc-list li { margin: 0; padding: 0; }
.legal__toc-list a {
  display: block;
  padding: var(--space-2) var(--space-4);
  margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--text-muted);
  text-decoration: none;
}
.legal__toc-list a::before {
  counter-increment: toc;
  content: counter(toc) ".";
  margin-right: 0.5em;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.legal__toc-list a:hover {
  color: var(--text);
  border-left-color: var(--accent);
  background: var(--surface-2);
}

.legal__body { counter-reset: legal-section; }
.legal__body h2 {
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
  font-size: var(--fs-h3);
}
.legal__body h2::before {
  counter-increment: legal-section;
  content: counter(legal-section) ". ";
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.legal__body h2:first-child { margin-top: 0; }

/* Document metadata: effective date and scope, stated once at the top */
.legal__meta {
  display: grid;
  gap: var(--space-4) var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(160px, auto));
  padding: var(--space-5) var(--space-6);
  margin: 0 0 var(--space-10);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.legal__meta dt {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.legal__meta dd { margin: 0; font-size: var(--fs-sm); font-weight: 500; color: var(--text); }

/* --------------------------------------------------------------------------
   Print. Legal pages get printed and saved as PDF more than any other page
   on a site, and site chrome wastes the first page when they are.
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .nav__drawer, .site-footer, .skip-link,
  .breadcrumb, .legal__toc, .note__icon { display: none !important; }

  html, body { background: #fff !important; color: #000 !important; }
  .section, .page-hero { padding: 0 !important; }
  .container, .container--narrow { max-width: none !important; padding: 0 !important; }
  .legal { display: block !important; }
  .prose, .legal__body { max-width: none !important; }
  .prose p, .prose li, .legal__meta dd { color: #000 !important; }
  .prose a { color: #000 !important; text-decoration: underline; }
  /* A printed page cannot be clicked, so external destinations are spelled out */
  .prose a[href^="http"]::after {
    content: " <" attr(href) ">";
    font-size: 0.85em;
    word-break: break-all;
  }
  .legal__body h2, .legal__body h3 { break-after: avoid; page-break-after: avoid; }
  .legal__body h2 { margin-top: 1.6em !important; }
  .legal__meta { border: 1px solid #999 !important; background: none !important; }
  .note { border: 1px solid #999; background: none !important; }
}

/* Tabular figures wherever numbers line up in columns */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Eyebrow / badge pill */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.4rem 0.9rem 0.4rem 0.7rem;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  /* Must be allowed to wrap: as a grid item, a nowrap pill sets the track's
     min-content width and can push a whole layout past the viewport. */
  max-width: 100%;
  text-wrap: balance;
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
/* Deliberately dark, not light: these pills sit over the brightest part of the
   hero photograph, where a translucent white fill would drop white text to
   roughly 1:1 against sky. */
.eyebrow--ondark {
  background: rgba(8, 11, 17, 0.72);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  backdrop-filter: blur(10px);
}
.eyebrow--ondark::before { background: var(--brand-300); }
.eyebrow--solid {
  background: var(--brand-50);
  border-color: var(--brand-200);
  color: var(--brand-800);
}
@media (prefers-color-scheme: dark) {
  .eyebrow--solid { background: var(--surface-inset); border-color: #2C405F; color: var(--brand-200); }
}

/* ==========================================================================
   4. Layout primitives
   ========================================================================== */

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

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem); }
/* For the section following a page hero that has a heading but no lede. A full
   --section-y after a lone h1 reads as a void rather than as breathing room. */
.section--tight-top { padding-top: clamp(2rem, 1.4rem + 2vw, 3.25rem); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
.section--surface { background: var(--surface); }
.section--inset { background: var(--surface-inset); }

.section-head { max-width: 68ch; margin-bottom: var(--space-12); }
.section-head > * + * { margin-top: var(--space-4); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lede { margin-inline: auto; }

.section-head--split {
  max-width: none;
  display: grid;
  gap: var(--space-6);
  align-items: end;
}
@media (min-width: 860px) {
  .section-head--split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .section-head--split > :last-child { justify-self: end; }
}

.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Alternating text/media rows */
.split {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--reverse > :first-child { order: 2; }
}
.split__body > * + * { margin-top: var(--space-5); }

.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-8); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* ==========================================================================
   5. Buttons & links
   ========================================================================== */

.btn {
  --btn-bg: var(--interactive);
  --btn-fg: #fff;
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;                 /* comfortably over the 44px minimum */
  padding: 0.8rem 1.6rem;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--interactive-hover); }
/* Press feedback that does not move neighboring content */
.btn:active { transform: scale(0.975); }

/* Primary buttons use the exact logo blue, matching the hero accent. White text
   on that blue is only 3.58:1 and would fail on a 15px label, so the label is
   ink instead: 5.06:1, identical to what the darker blue gave with white.
   Hover goes lighter rather than darker, since the label is dark. */
.btn--primary {
  --btn-bg: var(--brand-400);
  --btn-fg: var(--ink);
  box-shadow: var(--shadow-brand);
}
.btn--primary:hover {
  background: var(--brand-300);
  box-shadow: 0 18px 38px -14px rgba(36, 91, 192, 0.6);
}

.btn--secondary {
  --btn-bg: var(--surface);
  --btn-fg: var(--text);
  --btn-bd: var(--border-strong);
  box-shadow: var(--shadow-xs);
}
.btn--secondary:hover { background: var(--surface-2); border-color: var(--interactive); color: var(--interactive); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: transparent;
}
.btn--ghost:hover { background: var(--surface-2); }

.btn--light {
  --btn-bg: #fff;
  --btn-fg: var(--ink);
  --btn-bd: transparent;
}
.btn--light:hover { background: var(--brand-50); color: var(--brand-800); }

/* Dark glass, not light: stays legible even if the photograph behind it is
   swapped for a bright one. */
.btn--onphoto {
  --btn-bg: rgba(8, 11, 17, 0.46);
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(12px);
}
.btn--onphoto:hover { background: rgba(8, 11, 17, 0.68); }

.btn--lg { min-height: 56px; padding: 1rem 2rem; font-size: 1rem; }
.btn--block { width: 100%; }

.btn[aria-disabled="true"], .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  pointer-events: none;
}

/* Async submit state */
.btn.is-loading { pointer-events: none; opacity: 0.8; }
.btn.is-loading .btn__label { opacity: 0.6; }
.btn__spinner { display: none; width: 17px; height: 17px; flex: none; }
.btn.is-loading .btn__spinner { display: block; animation: spin 720ms linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }

.btn .icon { width: 18px; height: 18px; flex: none; }

/* Text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--link);
  text-decoration: none;
  min-height: 44px;
  cursor: pointer;
}
.link-arrow .icon {
  width: 17px; height: 17px;
  transition: transform var(--dur) var(--ease-out);
}
.link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; }
.link-arrow:hover .icon { transform: translateX(4px); }
/* On the dark ink card the standard link blue is too dim */
.link-arrow--ondark { color: var(--brand-300); }

/* ==========================================================================
   6. Cards, media, badges
   ========================================================================== */

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.card--pad { padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); }
.card--flat { box-shadow: none; }
.card--raised { box-shadow: var(--shadow-md); }
.card--inset { background: var(--surface-inset); border-color: transparent; }
.card--ink { background: var(--ink-deep); border-color: rgba(255, 255, 255, 0.1); color: #fff; }
.card--ink h2, .card--ink h3 { color: #fff; }
.card--ink .muted { color: rgba(255, 255, 255, 0.68); }

.card--link:hover { border-color: var(--brand-300); box-shadow: var(--shadow-md); }

.card__body > * + * { margin-top: var(--space-3); }

/* Whole card clickable, but the real anchor stays the accessible target */
.card__overlay-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card-icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: var(--brand-50);
  color: var(--brand-700);
  margin-bottom: var(--space-5);
}
.card-icon .icon { width: 23px; height: 23px; }
@media (prefers-color-scheme: dark) {
  .card-icon { background: var(--surface-inset); color: var(--brand-200); }
}
.card-icon--ink { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* Media wrapper — reserves space to keep CLS at zero */
.media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--sand-200);
  aspect-ratio: 4 / 3;
}
@media (prefers-color-scheme: dark) { .media { background: var(--surface-2); } }

.media img, .media video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.media--portrait { aspect-ratio: 3 / 4; }
.media--square { aspect-ratio: 1 / 1; }
.media--wide { aspect-ratio: 16 / 9; }
.media--tall { aspect-ratio: 5 / 6; }
.media--fill { aspect-ratio: auto; height: 100%; min-height: 320px; }
.media--xl { border-radius: var(--r-xl); }

/* figure defaults to a browser margin — always reset it */
figure.media { margin: 0; }

/* Figure whose caption sits below the image rather than overlaid on it.
   Use when the caption is information the reader needs, not a credit line. */
.figure { margin: 0; }
.figure__caption {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-muted);
}

/* Gentle zoom on hover for linked media */
.media--zoom img { transition: transform 620ms var(--ease-out); }
.card--link:hover .media--zoom img,
a:hover > .media--zoom img { transform: scale(1.045); }

/* If the photograph fails to load, the pale placeholder would leave white
   caption text unreadable — scrimmed media falls back to dark instead. */
.media.scrim, .media.scrim--soft { background: var(--ink-deep); }

/* Scrim for text over photography — needed in BOTH themes */
.scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(8, 11, 17, 0.88) 0%,
    rgba(8, 11, 17, 0.62) 34%,
    rgba(8, 11, 17, 0.12) 68%,
    rgba(8, 11, 17, 0.04) 100%
  );
  pointer-events: none;
}
.scrim--soft::after {
  background: linear-gradient(to top, rgba(8, 11, 17, 0.72) 0%, rgba(8, 11, 17, 0.18) 60%, transparent 100%);
}

.media__caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  padding: clamp(1.25rem, 0.9rem + 1.4vw, 2.25rem);
  color: #fff;
}
.media__caption h3, .media__caption p { color: #fff; }
.media__caption p { color: rgba(255, 255, 255, 0.86); }

/* Small credit line for licensed photography */
.media__credit {
  position: absolute;
  right: 10px; bottom: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: 11px;
  line-height: 1.3;
  /* 0.86 white on a 0.62 black scrim clears 4.5:1 over any photograph */
  color: rgba(255, 255, 255, 0.86);
  background: rgba(8, 11, 17, 0.62);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  backdrop-filter: blur(6px);
  text-decoration: none;
}
.media__credit:hover { color: #fff; background: rgba(8, 11, 17, 0.75); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  background: var(--brand-50);
  color: var(--brand-800);
  font-size: var(--fs-xs);
  font-weight: 600;
}
@media (prefers-color-scheme: dark) {
  .tag { background: var(--surface-inset); color: var(--brand-200); }
}

/* Small reassurance callout next to a decision point (tax status, guarantees).
   Brand-tinted rather than green so the donate page keeps a single accent color.
   Deliberately sets no margin: it lives above the .mt-* utilities in this file,
   and a margin here would out-order them and silently kill .mt-4 on the element. */
.note {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--r-md);
  background: var(--surface-inset);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text);
}
.note__icon { display: grid; place-items: center; width: 24px; height: 24px; color: var(--accent-text); }
.note__icon .icon { width: 19px; height: 19px; }

/* ==========================================================================
   7. Header & navigation
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  padding-block: var(--space-3);
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.site-header.is-stuck {
  border-bottom-color: var(--border);
  background: color-mix(in srgb, var(--ground) 94%, transparent);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 60px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  flex: none;
  padding: var(--space-2);
  margin: calc(var(--space-2) * -1);
  border-radius: var(--r-sm);
}
.brand__mark { width: 34px; height: 34px; flex: none; }
/* The wordmark is a three-line lockup, so its height is split across OPEN /
   THE GAIT / FOUNDATION. At 26px each line rendered around 8px and read as a
   smudge; 40px gives roughly 13px per line, which is legible without making
   the header taller than the nav capsule beside it. */
.brand__wordmark { height: 40px; width: auto; }
@media (max-width: 400px) {
  /* Just enough room for the logo, Instagram and the menu button on a small phone */
  .brand__wordmark { height: 34px; }
}
.brand__wordmark--light { display: none; }
@media (prefers-color-scheme: dark) {
  .brand__wordmark { display: none; }
  .brand__wordmark--light { display: block; }
}

/* Desktop nav sits in a floating capsule, echoing the reference layout */
.nav__links {
  display: none;
  align-items: center;
  gap: 2px;
  padding: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-xs);
  list-style: none;
}
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 0.95rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.nav__link:hover { background: var(--surface-2); color: var(--text); }
/* Current page is marked by color AND weight AND a dot — never color alone */
.nav__link[aria-current="page"] {
  background: var(--brand-50);
  color: var(--brand-800);
  font-weight: 600;
}
@media (prefers-color-scheme: dark) {
  .nav__link[aria-current="page"] { background: var(--surface-inset); color: var(--brand-200); }
}
.nav__link[aria-current="page"]::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 7px;
}

/* --------------------------------------------------------------------------
   Nav dropdown ("Our organization")

   This is the W3C disclosure pattern, not the ARIA menu pattern: a plain
   button that shows and hides a list of links. Real menubar semantics would
   hijack the arrow keys and confuse screen reader users, who expect site
   navigation to behave like links, not like an application menu.

   The submenu is NOT hidden in the HTML. Without JavaScript it stays visible
   and both pages remain reachable; main.js collapses it on load. That is why
   the .no-js rule below exists.
   -------------------------------------------------------------------------- */

.nav__item { position: relative; display: flex; }

.nav__link--toggle { background: none; border: 0; cursor: pointer; font-family: inherit; }
.nav__chev {
  width: 15px; height: 15px;
  margin-left: 5px;
  transition: transform var(--dur) var(--ease-out);
}
.nav__link--toggle[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }
/* The parent stays marked while you are on any page inside the section */
.nav__link--toggle[data-section-current] {
  background: var(--brand-50);
  color: var(--brand-800);
  font-weight: 600;
}
@media (prefers-color-scheme: dark) {
  .nav__link--toggle[data-section-current] { background: var(--surface-inset); color: var(--brand-200); }
}

.nav__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-header);
  min-width: 190px;
  padding: 6px;
  margin: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
.nav__menu[hidden] { display: none; }
.nav__menu:not([hidden]) { animation: navMenuIn 150ms var(--ease-out); }
@keyframes navMenuIn {
  from { opacity: 0; transform: translate(-50%, -6px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.nav__menu-link {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 var(--space-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
}
.nav__menu-link:hover { background: var(--surface-2); color: var(--text); }
.nav__menu-link[aria-current="page"] { color: var(--brand-800); font-weight: 600; background: var(--brand-50); }
@media (prefers-color-scheme: dark) {
  .nav__menu-link[aria-current="page"] { color: var(--brand-200); background: var(--surface-inset); }
}

/* JS off: show the submenu inline so the links are still reachable */
.no-js .nav__menu {
  position: static;
  transform: none;
  display: flex;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  animation: none;
}
.no-js .nav__link--toggle .nav__chev { display: none; }

/* Drawer version: the same button, expanding in place rather than floating */
.nav__drawer-toggle {
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
}
.nav__drawer-toggle .nav__chev { width: 20px; height: 20px; margin-left: 0; }
.nav__drawer-submenu {
  list-style: none;
  padding: 0 0 var(--space-2) var(--space-5);
  display: grid;
  gap: var(--space-1);
  border-left: 2px solid var(--border);
  margin-left: var(--space-4);
}
.nav__drawer-submenu[hidden] { display: none; }
.nav__drawer-sublink {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--space-4);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
}
.nav__drawer-sublink:hover { background: var(--surface); color: var(--text); }
.nav__drawer-sublink[aria-current="page"] { background: var(--surface); color: var(--brand-700); font-weight: 600; }
@media (prefers-color-scheme: dark) {
  .nav__drawer-sublink[aria-current="page"] { color: var(--brand-200); }
}

@media (prefers-reduced-motion: reduce) {
  .nav__menu:not([hidden]) { animation: none; }
  .nav__chev { transition: none; }
}

.nav__actions { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.nav__cta { display: none; }

/* Instagram link in the header, beside the Donate button */
.nav__social {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  color: var(--text-muted);
  text-decoration: none;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.nav__social:hover { background: var(--surface); color: var(--interactive); }
.nav__social .icon { width: 21px; height: 21px; }

/* Mobile trigger */
.nav__toggle {
  display: inline-grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  color: var(--text);
  transition: background-color var(--dur) var(--ease-out);
}
.nav__toggle:hover { background: var(--surface-2); }
.nav__toggle .icon { width: 22px; height: 22px; }
.nav__toggle .icon--close { display: none; }
.nav__toggle[aria-expanded="true"] .icon--menu { display: none; }
.nav__toggle[aria-expanded="true"] .icon--close { display: block; }

@media (min-width: 1040px) {
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .nav__toggle { display: none; }
}

/* Mobile drawer */
.nav__drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--ground);
  padding: var(--space-3) 0 var(--space-8);
  visibility: hidden;
  opacity: 0;
  /* visibility flips instantly on open (0s delay) so the drawer is focusable in
     the same tick, and is delayed on close so the fade-out stays visible.
     Transitioning visibility directly would leave it `hidden` while focus is
     being moved, and a hidden element cannot receive focus. */
  transition: opacity var(--dur) var(--ease-out), visibility 0s linear var(--dur);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav__drawer.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--dur) var(--ease-out), visibility 0s linear 0s;
}

.nav__drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
}
.nav__drawer-list {
  list-style: none;
  padding: var(--space-6) 0 0;
  display: grid;
  gap: var(--space-1);
}
.nav__drawer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  padding: 0 var(--space-4);
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
}
.nav__drawer-link:hover { background: var(--surface); }
.nav__drawer-link[aria-current="page"] { background: var(--surface); color: var(--brand-700); }
@media (prefers-color-scheme: dark) {
  .nav__drawer-link[aria-current="page"] { color: var(--brand-200); }
}
.nav__drawer-link .icon { width: 18px; height: 18px; opacity: 0.4; }
.nav__drawer-foot { margin-top: var(--space-8); display: grid; gap: var(--space-3); }

body.is-locked { overflow: hidden; }

@media (min-width: 1040px) {
  .nav__drawer { display: none; }
}

/* ==========================================================================
   8. Hero
   ========================================================================== */

.hero { padding-top: clamp(1rem, 0.5rem + 1.6vw, 2rem); }

/* Frame and impact card are siblings. Below 1000px they stack, so the card
   sits under the photo instead of covering it. At 1000px and up both are
   placed in the same grid row, which puts the card back over the photo's
   right side exactly as before, without absolute positioning. */
.hero__layout { display: grid; gap: var(--space-5); }
@media (min-width: 1000px) {
  .hero__layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(330px, 0.65fr);
    gap: 0;
  }
  .hero__layout > .hero__frame { grid-area: 1 / 1 / 2 / 3; }
  .hero__layout > .impact-card {
    grid-area: 1 / 2 / 2 / 3;
    align-self: end;
    z-index: 2;
    margin: 0 clamp(1.5rem, 1rem + 2.6vw, 3.25rem) clamp(1.5rem, 1rem + 2.6vw, 3.25rem) 0;
  }
}

.hero__frame {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  min-height: clamp(460px, 62vh, 660px);
  display: grid;
  align-items: end;
  isolation: isolate;
  background: var(--ink-deep);
}
.hero__frame img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 42%;
}
/* A phone-shaped frame is far narrower than the 4:3 photo, so cover keeps only
   a vertical sliver of it. At 62% that sliver lands on open water and the man
   is cropped out entirely. He sits at roughly 44% across, so the crop window
   has to be pulled left to keep him in the picture. */
@media (max-width: 999px) {
  .hero__frame {
    min-height: clamp(500px, 66vh, 620px);
  }
  .hero__frame img { object-position: 40% 50%; }
}
.hero__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(8, 11, 17, 0.9) 0%, rgba(8, 11, 17, 0.55) 42%, rgba(8, 11, 17, 0.1) 78%),
    /* Darken the top edge too — the floating pills sit over bright sky */
    linear-gradient(to bottom, rgba(8, 11, 17, 0.5) 0%, rgba(8, 11, 17, 0) 32%),
    linear-gradient(to right, rgba(8, 11, 17, 0.62) 0%, rgba(8, 11, 17, 0.05) 62%);
}

.hero__inner {
  position: relative;
  padding: clamp(1.5rem, 1rem + 2.6vw, 3.25rem);
  display: grid;
  gap: var(--space-8);
  align-items: end;
}
/* Grid items default to min-width:auto, so any wide child can stretch the
   track. Opt out everywhere content is placed on a grid. */
.hero__inner > *,
.split > *,
.grid > *,
.bento > *,
.steps > *,
.flow__item > * { min-width: 0; }
@media (min-width: 1000px) {
  .hero__inner { grid-template-columns: minmax(0, 1.35fr) minmax(330px, 0.65fr); }
}

.hero__copy > * + * { margin-top: var(--space-8); }
/* Each line is its own block, so the headline sets its own breaks rather than
   relying on a character measure. Capped slightly below --fs-display so the
   longer second line still fits the column on desktop. */
.hero__title {
  color: #fff;
  font-size: clamp(2.35rem, 1.35rem + 3.9vw, 4rem);
  line-height: 1.04;
}
/* The logo blue, on the hero scrim, clears 3:1 at display size */
.hero__title-accent { display: block; color: var(--brand-400); }

/* Inline emphasis inside a page heading.
   Deliberately --brand-400 rather than --accent, so it is the exact same blue as
   .hero__title-accent on the home page in BOTH themes. --accent lightens to
   --brand-300 in dark mode, which made the two read as different blues.
   It is the logo blue at 3.58:1 on white: fine at heading sizes (>=24px needs
   3:1) but NOT for body copy. Only use inside h1/h2, never on small text. */
.accent { color: var(--brand-400); }
.hero__text { color: rgba(255, 255, 255, 0.9); max-width: 48ch; font-size: var(--fs-lede); }

/* Floating pills on the photo, as in the reference */
.hero__pills {
  position: absolute;
  top: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  right: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  display: none;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-end;
}
@media (min-width: 780px) { .hero__pills { display: flex; } }

/* Donation card floating over the hero */
.impact-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: clamp(1.35rem, 1rem + 1.2vw, 1.9rem);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}
.impact-card > * + * { margin-top: var(--space-4); }
.impact-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}
.impact-card__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
}
.impact-card__brand .brand__mark { width: 26px; height: 26px; }

/* ==========================================================================
   9. Steps, stats, accordion
   ========================================================================== */

.steps { counter-reset: step; display: grid; gap: var(--space-6); list-style: none; padding: 0; margin: 0; }
@media (min-width: 900px) { .steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 640px) and (max-width: 899px) { .steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.step {
  position: relative;
  counter-increment: step;
  padding-top: var(--space-8);
}
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0; left: 0;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--accent-text);
}
.step::after {
  content: "";
  position: absolute;
  top: 9px; left: 2.6rem; right: 0;
  height: 1px;
  background: var(--border-strong);
}
.step:last-child::after { display: none; }
@media (max-width: 899px) { .step::after { display: none; } }
.step > * + * { margin-top: var(--space-3); }

/* Vertical flow variant for the How It Works page */
.flow { display: grid; gap: 0; counter-reset: flowstep; }
.flow__item {
  counter-increment: flowstep;
  display: grid;
  gap: var(--space-5);
  padding-block: var(--space-8);
  border-top: 1px solid var(--border);
  align-items: start;
}
.flow__item:last-child { border-bottom: 1px solid var(--border); }
@media (min-width: 820px) {
  .flow__item { grid-template-columns: 84px minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-8); align-items: center; }
}
.flow__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.9rem);
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.flow__body > * + * { margin-top: var(--space-3); }

.stat { display: grid; gap: var(--space-1); }
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.7rem + 2.2vw, 3.4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stat__num--brand { color: var(--accent); }
.stat__label { font-size: var(--fs-sm); color: var(--text-muted); }
.stat__source { font-size: var(--fs-xs); color: var(--text-muted); opacity: 0.85; }
.stat__source a { color: inherit; }

/* Bento grid — asymmetric, echoing the reference */
.bento { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 700px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(190px, auto); }
  .bento__item--tall { grid-row: span 2; }
  .bento__item--wide { grid-column: span 2; }
}
.bento__item { display: flex; flex-direction: column; min-height: 190px; }
.bento__item.card--pad { justify-content: space-between; gap: var(--space-6); }
/* Media-only tile: the image is the padding */
.bento__item--media { padding: 0; }

/* Accordion */
.accordion { border-top: 1px solid var(--border); }
.accordion__item { border-bottom: 1px solid var(--border); }
.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  min-height: 64px;
  padding: var(--space-5) 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.accordion__trigger:hover { color: var(--link); }
.accordion__icon {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  transition: transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.accordion__icon .icon { width: 16px; height: 16px; }
.accordion__trigger[aria-expanded="true"] .accordion__icon {
  transform: rotate(45deg);
  background: var(--brand-50);
  border-color: var(--brand-200);
  color: var(--brand-700);
}
@media (prefers-color-scheme: dark) {
  .accordion__trigger[aria-expanded="true"] .accordion__icon { background: var(--surface-inset); border-color: #2C405F; color: var(--brand-200); }
}
.accordion__panel { display: none; padding-bottom: var(--space-6); }
.accordion__panel.is-open { display: block; }
.accordion__panel > * + * { margin-top: var(--space-4); }
.accordion__panel p { color: var(--text-muted); max-width: 72ch; }

/* ==========================================================================
   10. Forms
   ========================================================================== */

.form { display: grid; gap: var(--space-5); }

.field { display: grid; gap: var(--space-2); }

.label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}
.label .req { color: var(--danger); margin-left: 2px; }
.label .optional { color: var(--text-muted); font-weight: 400; margin-left: 4px; }

.help { font-size: var(--fs-xs); color: var(--text-muted); }

.input, .textarea, .select {
  width: 100%;
  min-height: 52px;                 /* touch-friendly */
  padding: 0.85rem 1rem;
  font-size: 1rem;                  /* 16px — stops iOS auto-zoom */
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-sm);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6377' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px;
  padding-right: 3rem;
}
.input::placeholder, .textarea::placeholder { color: var(--text-muted); opacity: 0.72; }

.input:hover, .textarea:hover, .select:hover { border-color: var(--ink-3); }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible {
  outline: none;
  border-color: var(--interactive);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--interactive) 22%, transparent);
}

/* Error state carries a color, an icon and text — never color alone */
/* background-color, not the `background` shorthand — the shorthand would reset
   background-image and wipe the custom chevron off an errored <select>. */
.field.has-error .input,
.field.has-error .textarea,
.field.has-error .select { border-color: var(--danger); background-color: var(--danger-bg); }

.field__error {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--danger);
}
.field.has-error .field__error { display: flex; }
.field__error .icon { width: 16px; height: 16px; flex: none; }

.form__status {
  display: none;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}
.form__status.is-visible { display: flex; }
.form__status--success { background: var(--success-bg); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); }
.form__status--error { background: var(--danger-bg); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); }
.form__status .icon { width: 19px; height: 19px; flex: none; margin-top: 1px; }

.fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.fieldset__legend {
  padding: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-1);
}

/* Donation amount selector */
.amount-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (min-width: 560px) { .amount-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.amount { position: relative; }
.amount input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.amount__box {
  display: grid;
  place-items: center;
  gap: 2px;
  /* Amount only, no caption, so the tile is shorter than it used to be */
  min-height: 64px;
  padding: var(--space-3);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.amount__box:hover { border-color: var(--interactive); }
.amount input:checked + .amount__box {
  border-color: var(--interactive);
  border-width: 2px;
  background: var(--brand-50);
}
@media (prefers-color-scheme: dark) {
  .amount input:checked + .amount__box { background: var(--surface-inset); }
}
.amount input:focus-visible + .amount__box {
  outline: 3px solid var(--ring);
  outline-offset: 3px;
}
.amount__value { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.amount__note { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.35; }
.amount input:checked + .amount__box .amount__value { color: var(--brand-800); }
@media (prefers-color-scheme: dark) {
  .amount input:checked + .amount__box .amount__value { color: var(--brand-200); }
}

/* Segmented one-time / monthly toggle */
.segmented {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 4px;
  padding: 5px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  width: 100%;
}
.segmented__option { position: relative; }
.segmented__option input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.segmented__label {
  display: grid;
  place-items: center;
  min-height: 46px;
  padding: 0 var(--space-4);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.segmented__option input:checked + .segmented__label {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-xs);
}
.segmented__option input:focus-visible + .segmented__label {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}

/* Slot where the payment processor embed will live */

/* ==========================================================================
   11. Footer
   ========================================================================== */

.site-footer {
  background: var(--ink-deep);
  color: rgba(255, 255, 255, 0.72);
  /* No margin-top: the last section already ends with a full --section-y of
     padding. Stacking a margin and a matching pad on top of that left ~360px
     of dead space at the bottom of every page. */
  padding-block: clamp(3rem, 2.2rem + 3vw, 4.5rem) var(--space-8);
}
.site-footer a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.site-footer :focus-visible { outline-color: var(--brand-300); }

.footer__top {
  display: grid;
  gap: var(--space-12);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
@media (min-width: 900px) {
  .footer__top { grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); gap: var(--space-16); }
}
.footer__brand > * + * { margin-top: var(--space-4); }
.footer__brand .brand__wordmark { height: 30px; }
.footer__tagline { color: rgba(255, 255, 255, 0.66); max-width: 42ch; font-size: var(--fs-sm); }

.footer__col-title {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: var(--space-4);
}
.footer__list { list-style: none; padding: 0; display: grid; gap: 2px; }
.footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-sm);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-8);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.5);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-5); }
/* Own line under the copyright. CC BY requires attribution on every page that
   uses the work, so this appears only on pages carrying the licensed photos. */
.footer__credits { flex-basis: 100%; margin: 0; }
.footer__credits a { text-decoration: underline; text-underline-offset: 2px; }
/* Fine print still has to be tappable — WCAG 2.2 minimum target is 24×24 */
.footer__legal a, .footer__bottom a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.social { display: flex; gap: var(--space-2); }
.social a {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.social a:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.35); text-decoration: none; }
.social .icon { width: 19px; height: 19px; }

/* Full-width CTA band */
.cta-band {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--ink-deep);
  isolation: isolate;
}
.cta-band img {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.42;
}
.cta-band::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, rgba(8, 11, 17, 0.94) 8%, rgba(8, 11, 17, 0.62) 62%, rgba(27, 70, 148, 0.58) 100%);
}
.cta-band__inner {
  padding: clamp(2.25rem, 1.4rem + 3.4vw, 4.5rem);
  display: grid;
  gap: var(--space-8);
  align-items: center;
}
@media (min-width: 900px) {
  .cta-band__inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .cta-band__actions { justify-self: end; }
}
.cta-band h2, .cta-band p { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, 0.82); max-width: 54ch; }
.cta-band__copy > * + * { margin-top: var(--space-4); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ==========================================================================
   12. Motion & reveal
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 620ms var(--ease-out),
    transform 620ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* No JS? Show everything. */
.no-js .reveal { opacity: 1; transform: none; }

/* Motion is a nicety, never a requirement */
@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;
  }
  .reveal { opacity: 1; transform: none; }
  .media--zoom img { transition: none; }
}

/* ==========================================================================
   13. Utilities
   ========================================================================== */

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

.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }
.full-height { height: 100%; }

.divider { height: 1px; background: var(--border); border: 0; margin-block: var(--space-12); }

.icon { width: 20px; height: 20px; stroke-width: 1.75; flex: none; }

/* Wide content never breaks the page — it scrolls inside its own box */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Notice / callout */
.notice {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--r-md);
  background: var(--surface-inset);
  border: 1px solid transparent;
  font-size: var(--fs-sm);
}
.notice .icon { width: 21px; height: 21px; color: var(--accent); margin-top: 2px; }
.notice > div > * + * { margin-top: var(--space-2); }
.notice strong { color: var(--text); }
.notice p { color: var(--text-muted); }

/* Definition list used for contact details */
.detail-list { display: grid; gap: var(--space-6); }
.detail {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.detail__icon {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: var(--brand-50);
  color: var(--brand-700);
}
@media (prefers-color-scheme: dark) {
  .detail__icon { background: var(--surface-inset); color: var(--brand-200); }
}
.detail__icon .icon { width: 21px; height: 21px; }
.detail__label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.detail__value { font-weight: 500; }
.detail__value a { color: var(--link); text-underline-offset: 3px; }

/* Partner lockup (SAMS). The emblem is dark navy on transparency, so it always
   sits on a white disc: it stays legible in dark mode without recoloring
   someone else's logo, which their brand guidelines would not allow. */
.partner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
}
.partner__logo {
  flex: none;
  width: 76px; height: 76px;
  border-radius: 50%;
  background: #fff;
  padding: 5px;
  box-shadow: inset 0 0 0 1px rgba(18, 22, 31, 0.08);
}
.partner__logo img { width: 100%; height: 100%; object-fit: contain; }
.partner__body > * + * { margin-top: 2px; }
.partner__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.partner__name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h4); color: var(--text); }
.partner__meta { font-size: var(--fs-sm); color: var(--text-muted); }
.partner__meta a { color: var(--link); }

/* Compact inline variant for the footer */
.partner--inline { border: 0; background: none; padding: 0; gap: var(--space-4); }
.partner--inline .partner__logo { width: 52px; height: 52px; padding: 4px; }
.partner--inline .partner__label { color: rgba(255, 255, 255, 0.5); }
.partner--inline .partner__name { color: #fff; font-size: 1rem; }
.partner--inline .partner__meta { color: rgba(255, 255, 255, 0.62); }
/* The footer is dark in both themes, so this link must not inherit --link:
   in light mode that resolves to a dark blue and drops to 3:1 on the footer. */
.partner--inline .partner__meta a { color: rgba(255, 255, 255, 0.86); }
.partner--inline .partner__meta a:hover { color: #fff; }

@media (max-width: 520px) {
  .partner { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
}

/* --------------------------------------------------------------------------
   Parent-organization band (home page, directly under the hero)

   A quiet attribution strip, not a hero. It carries a border on both edges so
   it reads as a distinct band between the hero and the mission section rather
   than as the start of the mission copy.
   -------------------------------------------------------------------------- */
.partner-band {
  padding-block: var(--space-6);
  background: var(--surface);
  border-block: 1px solid var(--border);
}
.partner-band__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}
/* The SAMS emblem is dark navy on transparency, so it always sits on a white
   disc: legible in dark mode without recoloring someone else's logo. */
.partner-band__logo {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  padding: 4px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border);
}
.partner-band__logo img { width: 100%; height: 100%; object-fit: contain; }
.partner-band__text {
  flex: 1 1 22rem;
  min-width: 0;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-muted);
}
.partner-band__text strong { color: var(--text); font-weight: 600; }
.partner-band__link { flex: none; font-size: var(--fs-sm); }

@media (max-width: 640px) {
  .partner-band__inner { gap: var(--space-4); }
  .partner-band__text { flex-basis: 100%; }
}

/* Small uppercase section label — a plain text lead-in, not a pill */
.label-eyebrow {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: var(--space-3);
}

/* The headline ask: cost per prosthetic, sized to lead the donate page */
/* Sits beside the donation box, never above it: the amount selector has to be
   the first thing a donor meets. */
.key-figure {
  display: block;
  letter-spacing: normal;
}
.key-figure__amount {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 2.2rem + 4vw, 4.5rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.key-figure__label {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text);
}
.key-figure__note {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: normal;
  color: var(--text-muted);
}

/* People / founder cards.
   align-content: start stops the auto rows absorbing the slack when cards are
   stretched to equal height by the parent grid. Without it, the card with the
   shortest bio pushes its name and role down out of line with the others. */
.person { display: grid; gap: var(--space-5); align-content: start; }
.person__avatar {
  position: relative;
  /* Sam and Jad are 480px sources, so they stay sharp well past this. Leith's
     original is only 240px, which is what caps the ceiling at 160px. */
  width: clamp(112px, 13vw, 160px);
  height: clamp(112px, 13vw, 160px);
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  color: var(--brand-800);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.4rem + 1vw, 2.15rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  flex: none;
}
.person__avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-color-scheme: dark) {
  .person__avatar { background: var(--surface-inset); border-color: #2C405F; color: var(--brand-200); }
}
.person__role {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
  /* Always reserve two lines. A longer title ("Co-founder, Executive Director")
     wraps at narrow card widths, and without this the wrapped card's name drops
     out of line with the others. Cards are separate grids, so they cannot share
     a row track. */
  line-height: 1.35;
  min-height: 2.7em;
}
.person__body > * + * { margin-top: var(--space-2); }
.person__meta {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* Timeline */
.timeline { display: grid; gap: 0; }
.timeline__item {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-6) 0 var(--space-6) var(--space-8);
  border-left: 2px solid var(--border-strong);
  position: relative;
}
.timeline__item::before {
  content: "";
  position: absolute;
  left: -7px; top: calc(var(--space-6) + 8px);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--ground);
}
.timeline__date {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Pull quote */
/* No `margin: 0` here — the global reset already zeroes it, and declaring it
   again would out-order the .mt-* utilities and silently kill their spacing. */
.pullquote {
  padding: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  border-radius: var(--r-lg);
  background: var(--surface-inset);
  border-left: 4px solid var(--accent);
}
.pullquote p {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.018em;
  color: var(--text);
  text-wrap: balance;
}
.pullquote footer { margin-top: var(--space-4); font-size: var(--fs-sm); color: var(--text-muted); }

/* Page hero used on interior pages */
.page-hero { padding-block: clamp(2.5rem, 1.6rem + 3.6vw, 5rem) 0; }
.page-hero__inner { max-width: 74ch; }
.page-hero__inner > * + * { margin-top: var(--space-5); }

/* Breadcrumb for deeper pages */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); color: var(--text-muted); list-style: none; padding: 0; }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 24px; color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--text); text-decoration: underline; }
.breadcrumb li { display: flex; align-items: center; gap: var(--space-2); }
.breadcrumb li + li::before { content: "/"; opacity: 0.5; }