@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/montserrat-400.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/montserrat-400i.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/montserrat-500.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/montserrat-600.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/montserrat-700.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/montserrat-800.woff2") format("woff2");
}

:root {
  /* --- The four official Status Project colours, exact. Nothing else is brand. --- */
  --navy: #011724;
  --orange: #f74b10;
  --terracotta: #d35a3d;
  --petrol: #4d7185;

  /* Every other value below is those four mixed with plain white.
     No fifth hue enters the palette. */
  --ink: var(--navy);
  --muted: #2f4d5e;          /* navy 60% on white — body copy, 8.6:1 on paper */
  --navy-2: #0a2230;         /* navy 88% on petrol — the deep band under the hero */
  --cream: #fdf7f5;          /* terracotta 5% on white — warm page paper */
  --white: #ffffff;
  --sand: #faece8;           /* terracotta 12% on white — alternate section */
  --line: #f2cec5;           /* terracotta 30% on white — hairlines and borders */
  --wash: #fef2ee;           /* orange 7% on white — highlight panels */
  --on-soft: #d1d6d9;        /* cream 75% on petrol — secondary text on navy */
  --on-line: #384852;        /* cream 22% on navy — hairlines on navy */
  --font: "Montserrat", "Segoe UI", sans-serif;
  --wrap: 1120px;
  --header: 5.4rem;
  --shadow: 0 18px 40px rgba(1, 23, 36, 0.08);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--navy);
  text-decoration-color: var(--terracotta);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

a:hover { color: var(--navy); text-decoration-thickness: 3px; }

p { text-wrap: pretty; }

h1, h2, h3, h4 {
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.08;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(2.4rem, 5.4vw, 4.6rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.7rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); letter-spacing: -0.02em; }

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

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 80;
  background: var(--orange);
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
  padding: 0.7rem 1rem;
}

.skip:focus { top: 0.75rem; }

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

.wrap {
  width: min(var(--wrap), calc(100% - 2.4rem));
  margin-inline: auto;
}

.eyebrow {
  margin: 0 0 0.85rem;
  color: var(--petrol);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.on-navy .eyebrow,
.page-hero .eyebrow,
.hero .eyebrow,
.fund-band .eyebrow { color: var(--orange); }

.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.65;
  max-width: 42rem;
  color: var(--muted);
}

.on-navy .lede,
.page-hero .lede,
.hero .lede,
.fund-band .lede { color: var(--cream); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 48px;
  padding: 0.75rem 1.2rem;
  border-radius: 4px;
  border: 2px solid transparent;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
}

.btn-primary { background: var(--orange); color: var(--navy); }
.btn-primary:hover { background: var(--terracotta); color: var(--navy); }
.btn-ghost { background: transparent; color: var(--cream); border-color: var(--on-soft); }
.btn-ghost:hover { background: var(--on-line); color: var(--cream); }
.btn-outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: var(--cream); }
.btn-navy { background: var(--navy); color: var(--cream); }
.btn-navy:hover { background: var(--navy-2); color: var(--white); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cream);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.site-header::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--navy) 0 25%,
    var(--orange) 25% 50%,
    var(--terracotta) 50% 75%,
    var(--petrol) 75% 100%
  );
}

.header-inner {
  width: min(1240px, calc(100% - 2rem));
  margin-inline: auto;
  min-height: var(--header);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.brand {
  display: flex;
  align-items: center;
  margin-right: auto;
  text-decoration: none;
}

.brand img { height: 78px; width: auto; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.nav-toggle {
  display: none;
  width: 48px;
  height: 48px;
  border: 1px solid var(--navy);
  background: transparent;
  border-radius: 4px;
  padding: 0;
  cursor: pointer;
}

.burger,
.burger::before,
.burger::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--navy);
  position: relative;
  margin-inline: auto;
}

.burger::before,
.burger::after {
  content: "";
  position: absolute;
  left: 0;
}

.burger::before { top: -6px; }
.burger::after { top: 6px; }

.nav-toggle[aria-expanded="true"] .burger { background: transparent; }
.nav-toggle[aria-expanded="true"] .burger::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .burger::after { top: 0; transform: rotate(-45deg); }

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.15rem 1rem;
}

.site-nav a {
  color: var(--navy);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35rem 0;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--petrol); }

.site-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--orange); }

.platinum-banner {
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--orange) 14%, transparent), transparent 46%),
    var(--white);
  border-bottom: 1px solid var(--line);
  padding: 1.15rem 0 1.25rem;
}

.platinum-banner-inner {
  width: min(1240px, calc(100% - 2.4rem));
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem 1.4rem;
  align-items: center;
}

.platinum-banner img {
  width: 110px;
  height: 110px;
}

.platinum-banner .platinum-title {
  margin: 0;
  font-size: clamp(1.45rem, 2.6vw, 2.15rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.12;
  color: var(--navy);
  max-width: 22ch;
}

.platinum-banner p {
  margin: 0.4rem 0 0;
  max-width: 42rem;
  color: var(--muted);
}

.platinum-banner .eyebrow {
  margin: 0 0 0.35rem;
  color: var(--petrol);
}

.platinum-banner-inner:has(.reel-home) { grid-template-columns: auto minmax(0, 1fr) minmax(0, 300px); }

.reel-card { margin: 0; }

.reel-card video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--navy);
  border-radius: 10px;
}

.reel-home video { aspect-ratio: 9 / 16; max-height: 70vh; }

.reel-donate video { aspect-ratio: 4 / 5; }

.platinum-banner .reel-card figcaption,
.reel-card figcaption {
  margin-top: 0.65rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy);
  line-height: 1.35;
}

.reel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.75rem;
}

.platinum-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 0.95rem;
}

.card-feature {
  grid-column: 1 / -1;
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--orange) 10%, transparent), transparent 42%),
    var(--white);
  border-color: var(--orange);
}

.hero {
  background:
    radial-gradient(900px 420px at 90% -10%, color-mix(in srgb, var(--petrol) 35%, transparent), transparent 60%),
    var(--navy);
  color: var(--cream);
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2.8rem, 6vw, 5.2rem);
}

.hero-inner {
  width: min(1240px, calc(100% - 2.4rem));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}

.hero h1 { color: var(--cream); max-width: 14ch; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.6rem;
}

.hero-tag {
  margin: 1.5rem 0 0;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--orange);
}

.hero-tag span { color: var(--orange); padding-inline: 0.35rem; }

.hero-figure { margin: 0; }

.hero-figure img {
  width: 100%;
  aspect-ratio: 1 / 1.05;
  object-fit: cover;
  object-position: center 18%;
  border: 6px solid var(--cream);
  box-shadow: 14px 14px 0 var(--terracotta);
}

.hero-figure figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.8rem;
  align-items: baseline;
  margin-top: 0.9rem;
  font-size: 0.92rem;
}

.hero-figure strong { font-size: 1rem; }
.hero-figure span { color: var(--on-soft); }
.hero-figure a { color: var(--orange); font-weight: 700; }

.fact-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--navy-2);
  color: var(--cream);
  border-top: 1px solid var(--on-line);
}

.fact-row div {
  padding: 1.15rem 1.2rem;
  border-left: 1px solid var(--on-line);
}

.fact-row div:first-child { border-left: 0; }

.fact-row strong {
  display: block;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
}

.fact-row span {
  display: block;
  color: var(--on-soft);
  font-size: 0.82rem;
  margin-top: 0.15rem;
}

.words {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}

.words a,
.words li {
  list-style: none;
  margin: 0;
  padding: clamp(1.4rem, 3vw, 2.4rem) clamp(1rem, 2vw, 1.8rem);
  border-left: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}

.words li:first-child,
.words a:first-child { border-left: 0; }

.words ol, .words ul { display: contents; margin: 0; padding: 0; }

.words strong {
  display: block;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  letter-spacing: -0.04em;
  color: var(--navy);
  font-weight: 800;
}

.words span {
  display: block;
  margin-top: 0.45rem;
  color: var(--muted);
  font-size: 0.95rem;
  max-width: 28ch;
}

.section { padding: clamp(3.2rem, 7vw, 6rem) 0; }
.section-white { background: var(--white); }
.section-sand { background: var(--sand); }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 1.5rem 3rem;
  align-items: end;
  margin-bottom: 2rem;
}

.section-head p:last-child { margin: 0; }

.split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}

.pullquote {
  margin: 0;
  padding: 0 0 0 1.25rem;
  border: 0;
  border-left: 4px solid var(--terracotta);
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  line-height: 1.35;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--navy);
}

.pullquote footer {
  margin-top: 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--petrol);
  font-style: normal;
}

.serve-grid,
.help-grid,
.pathway-grid,
.involve-grid,
.story-grid,
.contact-grid {
  display: grid;
  gap: 1rem;
}

.serve-grid { grid-template-columns: repeat(2, 1fr); }
.help-grid { grid-template-columns: repeat(6, 1fr); }
.pathway-grid { grid-template-columns: repeat(4, 1fr); }
.involve-grid { grid-template-columns: repeat(2, 1fr); }
.story-grid { grid-template-columns: repeat(3, 1fr); }
.contact-grid { grid-template-columns: 1.1fr 0.9fr; }

.help-grid article { grid-column: span 2; }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 1.25rem 1.2rem 1.3rem;
  height: 100%;
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

a.card:hover {
  border-color: var(--orange);
  color: inherit;
  box-shadow: var(--shadow);
}

.card h3 { color: var(--navy); }
.card p { margin: 0; color: var(--muted); }
.card .num {
  color: var(--orange);
  font-weight: 800;
  letter-spacing: 0.08em;
  font-size: 0.82rem;
}

.note {
  margin-top: 1.4rem;
  padding: 1rem 1.1rem;
  background: var(--wash);
  border-left: 4px solid var(--orange);
  color: var(--ink);
}

.note strong { color: var(--navy); }

.person-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.1rem;
}

.person-card {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  background: var(--white);
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--line);
  min-width: 0;
}

.person-card:nth-child(4) { grid-column: 2 / span 2; }
.person-card:nth-child(5) { grid-column: 4 / span 2; }

.person-card:hover {
  color: inherit;
  border-color: var(--orange);
  box-shadow: var(--shadow);
}

.person-card img,
.monogram {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.pos-cesar { object-position: center 15%; }
.pos-liz { object-position: center 18%; }
.pos-elizabeth { object-position: center 12%; }
.pos-cristian { object-position: center center; }

.person-card-body { padding: 1rem 1rem 1.15rem; }
.person-kicker {
  margin: 0 0 0.3rem;
  color: var(--petrol);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.person-card h3 { font-size: 1.15rem; margin-bottom: 0.3rem; }
.person-card p { margin: 0; color: var(--muted); font-size: 0.92rem; }
.person-card .forthcoming {
  margin-top: 0.45rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--petrol);
}
.more {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--petrol);
}

.monogram {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 45%, var(--on-line), transparent 55%),
    linear-gradient(165deg, var(--navy-2), var(--navy));
  color: var(--cream);
}

.monogram span {
  width: 54%;
  aspect-ratio: 1;
  border: 1.5px solid var(--terracotta);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.fund-band {
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--orange) 16%, transparent), transparent 32%),
    var(--navy);
  color: var(--cream);
  padding: clamp(3rem, 7vw, 5.5rem) 0;
}

.fund-band h2 { max-width: 16ch; }
.fund-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

.page-hero {
  background:
    radial-gradient(700px 280px at 100% 0%, color-mix(in srgb, var(--petrol) 28%, transparent), transparent 55%),
    var(--navy);
  color: var(--cream);
  padding: 1.6rem 0 2.8rem;
}

.page-hero h1 { max-width: 16ch; }

.crumbs {
  margin: 0 0 1.1rem;
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.crumbs li { display: flex; gap: 0.4rem; align-items: center; }
.crumbs li + li::before { content: "/"; color: var(--on-soft); }
.crumbs a { color: var(--orange); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--cream); }

.profile-intro {
  display: grid;
  grid-template-columns: minmax(220px, 340px) minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.8rem);
  align-items: end;
}

.profile-intro img,
.profile-intro .monogram {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 6px solid var(--cream);
  box-shadow: 12px 12px 0 var(--terracotta);
}

.profile-intro .role {
  margin: 0.7rem 0 0;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 600;
  color: var(--orange);
  letter-spacing: -0.02em;
}

.profile-intro .pronouns {
  margin: 0.35rem 0 0;
  color: var(--on-soft);
  font-size: 0.95rem;
}

.profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 2.5rem;
  align-items: start;
}

.prose { max-width: 68ch; }
.prose p { margin: 0 0 1rem; }
.prose h2 { margin: 2.1rem 0 0.7rem; font-size: clamp(1.45rem, 2vw, 1.9rem); }
.prose ul { margin: 0 0 1rem; padding-left: 1.15rem; }
.prose li { margin: 0.35rem 0; }
.prose li::marker { color: var(--orange); }

.profile-aside {
  position: sticky;
  top: calc(var(--header) + 1rem);
  background: var(--white);
  border: 1px solid var(--line);
  padding: 1.15rem;
}

.profile-aside h2 {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}

.profile-aside dl { margin: 0 0 1rem; }
.profile-aside dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--petrol);
  margin-top: 0.7rem;
}
.profile-aside dd { margin: 0.15rem 0 0; font-weight: 600; }
.profile-aside .btn { width: 100%; margin-top: 0.4rem; }

.also-board {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.also-board a {
  text-decoration: none;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--navy);
  padding: 0.55rem 0.7rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.also-board a:hover { border-color: var(--terracotta); color: var(--navy); }

.value-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.7rem;
  margin-top: 1.2rem;
}

.value-row li {
  list-style: none;
  margin: 0;
  background: var(--navy);
  color: var(--cream);
  border-top: 4px solid var(--terracotta);
  padding: 1.1rem 0.8rem;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.value-row { padding: 0; }

.story article {
  padding-bottom: 1.6rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--line);
}

.story article h2 { margin-bottom: 0.6rem; }

.site-footer {
  background: var(--navy);
  color: var(--cream);
  padding: 3rem 0 1.4rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 1.5rem 2rem;
}

.footer-mark {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--cream);
  text-decoration: none;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: 1.25rem;
}

.footer-mark img { width: 58px; height: 58px; }

.footer-tag {
  margin: 0.8rem 0 0;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--orange);
}

.site-footer h2 {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.7rem;
  color: var(--orange);
}

.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 0.35rem 0; }
.site-footer a { color: var(--cream); text-decoration: none; font-weight: 600; }
.site-footer a:hover { color: var(--orange); }

.legal {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--on-line);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--on-soft);
}

.candid-seal { margin-top: 1rem; }

.candid-seal a {
  display: inline-block;
  line-height: 0;
  background: var(--white);
  border-radius: 8px;
  padding: 0.35rem;
}

.candid-seal img {
  width: 110px;
  height: 110px;
}

.site-footer .candid-seal a,
.site-footer .candid-seal a:hover { color: inherit; }

.profile-aside .candid-seal { margin: 0.15rem 0 0.85rem; }

.photo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  list-style: none;
  margin: 1.15rem 0 0;
  padding: 0;
}

.photo-grid img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 16%;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 360px));
  gap: 1.4rem;
  margin-top: 1.15rem;
  align-items: start;
}

.video-card { margin: 0; }

.video-card video {
  width: 100%;
  height: auto;
  background: var(--navy);
  aspect-ratio: 9 / 16;
}

.video-card figcaption {
  margin-top: 0.65rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.video-card .btn { margin-top: 0.75rem; }

.fine {
  font-size: 0.92rem;
  color: var(--muted);
}

@media (max-width: 1180px) {
  .header-inner { flex-wrap: wrap; }
  .nav-toggle { display: inline-grid; place-items: center; }
  .site-nav {
    order: 5;
    flex: 1 0 100%;
    flex-direction: column;
    align-items: stretch;
    padding-bottom: 0.6rem;
  }
  html.js .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex: none;
    order: 0;
    background: var(--cream);
    padding: 0.4rem 1.2rem 1rem;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 36px color-mix(in srgb, var(--navy) 12%, transparent);
  }
  html.js .site-nav.is-open { display: flex; }
  .site-nav a {
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 1rem;
  }
  .header-inner { position: relative; }
  .site-header { position: sticky; }
  .fact-row { grid-template-columns: 1fr 1fr; }
  .fact-row div:nth-child(3) { border-left: 0; }
  .help-grid { grid-template-columns: 1fr 1fr; }
  .help-grid article { grid-column: auto; }
  .pathway-grid,
  .story-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .value-row { grid-template-columns: 1fr 1fr; }
  .value-row li:last-child { grid-column: 1 / -1; }
  .person-grid { grid-template-columns: 1fr 1fr; }
  .person-card,
  .person-card:nth-child(4),
  .person-card:nth-child(5) { grid-column: auto; }
  .profile-layout { grid-template-columns: 1fr; }
  .profile-aside { position: static; }
}

@media (max-width: 760px) {
  .brand img { height: 54px; }
  .platinum-banner-inner,
  .platinum-banner-inner:has(.reel-home) { grid-template-columns: 1fr; }
  .reel-home { max-width: 420px; width: 100%; justify-self: center; }
  .reel-home video { max-height: none; }
  .reel-actions .btn { flex: 1 1 160px; }
  .platinum-actions .btn { flex: 1 1 180px; }
  .hero-inner,
  .section-head,
  .split,
  .contact-grid,
  .profile-intro,
  .words { grid-template-columns: 1fr; }
  .words li,
  .words a { border-left: 0; border-top: 1px solid var(--line); }
  .words li:first-child,
  .words a:first-child { border-top: 0; }
  .serve-grid,
  .help-grid,
  .pathway-grid,
  .involve-grid,
  .story-grid,
  .person-grid,
  .footer-grid,
  .fact-row { grid-template-columns: 1fr; }
  .fact-row div { border-left: 0; border-top: 1px solid var(--on-line); }
  .fact-row div:first-child { border-top: 0; }
  .hero h1 { max-width: none; }
  .hero-figure img { aspect-ratio: 1 / 1; max-height: 460px; }
  .page-hero h1 { max-width: none; }
  .btn { width: auto; }
  .hero-actions .btn,
  .fund-actions .btn { flex: 1 1 160px; }
  .value-row { grid-template-columns: 1fr; }
  .value-row li:last-child { grid-column: auto; }
  .legal { flex-direction: column; }
  .photo-grid { grid-template-columns: 1fr 1fr; }
  .video-grid { grid-template-columns: minmax(0, 420px); }
}

@media (max-width: 380px) {
  .wrap, .hero-inner { width: min(var(--wrap), calc(100% - 1.4rem)); }
  .header-inner { width: min(1240px, calc(100% - 1rem)); }
  h1 { font-size: 2.15rem; }
  .btn-donate-label { letter-spacing: 0.04em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* --- Bilingual helper + hero help line (added for Volunteer / Get Help) --- */
.es-sub {
  display: block;
  color: var(--muted);
  font-size: 0.94em;
  font-weight: 500;
  margin-top: 0.25rem;
}
.hero .es-sub,
.page-hero .es-sub,
.on-navy .es-sub,
.fund-band .es-sub { color: var(--on-soft); }
.hero-help {
  margin: 1rem 0 0;
  font-size: 0.95rem;
  color: var(--cream);
}
.hero-help a { color: var(--orange); text-decoration: underline; text-decoration-color: var(--orange); }
.hero-help a:hover { color: var(--cream); text-decoration-color: var(--cream); }

/* Anchors that carry no class inherit the body navy. On a navy ground that is invisible,
   so any link inside a dark band takes cream (14.8:1) with an orange underline. */
.on-navy a:not(.btn):not(.card):not(.person-card),
.hero a:not(.btn):not(.card):not(.person-card),
.page-hero a:not(.btn):not(.card):not(.person-card),
.fund-band a:not(.btn):not(.card):not(.person-card),
.site-footer a:not(.btn):not(.card):not(.person-card) {
  color: var(--cream);
  text-decoration-color: var(--orange);
}
.on-navy a:not(.btn):hover,
.hero a:not(.btn):hover,
.page-hero a:not(.btn):hover,
.fund-band a:not(.btn):hover,
.site-footer a:not(.btn):hover {
  color: var(--orange);
  text-decoration-color: var(--orange);
}
.platinum-banner .es-sub { color: var(--muted); }
.btn .btn-es {
  display: block;
  font-size: 0.76em;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  opacity: 0.92;
  margin-top: 0.1em;
}
.btn-cream { background: var(--cream); color: var(--navy); border-color: var(--cream); }
.btn-cream:hover { background: var(--white); color: var(--navy); }

/* Button bilingual label — the submit buttons carry class "bi es", not "btn-es", so the rule
   above never reached them: forms.css styled the Spanish in uppercase, at label size, in muted
   slate, which is low contrast on the orange button. Inherit the button's own colour, and stack
   the Spanish under the English as the design intends (display:block + margin-top only works
   once the button stops laying its children out in a row). */
.sp-form .btn .es,
.btn .es,
.btn .btn-es {
  display: block;
  color: inherit;
  font-size: 0.76em;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  opacity: 0.92;
  margin-top: 0.1em;
}
.sp-form .btn { flex-direction: column; gap: 0.15rem; }

/* Readability floor for the Spanish line inside a button.
   IT's block above fixed the colour, uppercase and stacking; this only raises the size,
   because 0.76em of the button's 0.78rem came out at 9.5px, which is too small for the
   people this site is for. Keeps colour inherit, sentence case and the stacked layout. */
.sp-form .btn .es,
.btn .es,
.btn .btn-es {
  font-size: max(0.82em, 11px);
  line-height: 1.15;
}

/* Donate page: scannable QR beside the Zeffy button. Quiet frame, no colour of its own,
   so it reads as a tool and never competes with the Candid seal just above it. */
.donate-qr {
  margin: 0.9rem 0 0.2rem;
  text-align: center;
}
.donate-qr a { display: inline-block; line-height: 0; }
.donate-qr img {
  width: 100%;
  max-width: 200px;
  height: auto;
  padding: 0.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.donate-qr figcaption {
  margin-top: 0.5rem;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--navy);
}
.donate-qr figcaption .es-sub { font-weight: 500; }
.fund-actions .btn .es-sub { display: block; }

/* A Spanish sub-line inside a button must take the button's own colour, never the
   muted body slate: muted on orange is the low-contrast pairing we already fixed once. */
.btn .es-sub {
  color: inherit;
  opacity: 0.92;
  font-size: max(0.82em, 11px);
  line-height: 1.15;
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 500;
  margin-top: 0.1em;
}
.btn-stack { flex-direction: column; gap: 0.15rem; }

/* Any button that carries a Spanish sub-line must stack it under the English.
   .btn is display:inline-flex and flex items are laid out in a row no matter what
   display the child asks for, so .es-sub's display:block never stacked the text:
   the hero button on /donate/ showed "Donate Donar" side by side. This makes every
   such button a column, so future bilingual buttons work without remembering a class. */
.btn:has(.es-sub) { flex-direction: column; gap: 0.15rem; }