/* ============================================================
   supportlives.org shared stylesheet
   Used by EVERY page. Do not add per-page styles elsewhere.
   Mobile-first: base rules = 375px. Breakpoints 640 / 800 / 1024.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* neutrals, dominant */
  --cream: #FBF8F1;
  --cream-deep: #F4EFE3;
  --white: #FFFFFF;
  --navy: #22485E;
  --navy-deep: #16323F;
  --navy-soft: #3C6580;
  --navy-tint: #D7E2E9;
  --ink: #1D2E38;
  --muted: #5C6F7B;
  --line: #E4DCCC;
  --line-soft: #EFE9DC;

  /* logo accents: one bright per section, max two visible */
  --gold: #F7B733;
  --gold-deep: #DF9C14;
  --coral: #F0663C;
  --coral-deep: #BB4520;
  --teal: #23A98A;
  --teal-deep: #167B64;
  --blue: #2C7FC4;
  --purple: #7B5CC4;

  /* Text-safe variants. The bright brand colours above are for fills and
     borders; these are the darkened versions used wherever the colour
     carries words, so every label clears 4.5:1. Measured with axe-core;
     see `npm run a11y`. */
  --gold-text: #8C6109;      /* gold as text on cream or white */
  --blue-text: #2770AC;
  --purple-text: #7658BC;
  --coral-btn: #C25331;      /* coral dark enough for white button text */
  --coral-btn-deep: #A8441F;
  --coral-on-navy: #E07A5C;  /* coral links on the navy footer */
  --map-note: #5F6562;

  --font-display: "Fraunces", "Playfair Display", Georgia, serif;
  --font-body: "Source Sans 3", "Source Sans Pro", -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* spacing system: one scale, used everywhere */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 88px;
  --s10: 120px;

  --wrap: 1180px;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(22, 50, 63, .04), 0 6px 20px rgba(22, 50, 63, .07);
  --shadow-lift: 0 2px 6px rgba(22, 50, 63, .07), 0 18px 40px rgba(22, 50, 63, .13);
  --tap: 48px;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  text-wrap: pretty;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
svg { max-width: 100%; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy);
  margin: 0 0 var(--s4);
  font-weight: 600;
}
h1 {
  font-size: clamp(2.15rem, 8.4vw, 4.15rem);
  line-height: 1.02;
  letter-spacing: -.026em;
}
h2 {
  font-size: clamp(1.85rem, 6.4vw, 3.05rem);
  line-height: 1.06;
  letter-spacing: -.022em;
}
h3 { font-size: 1.24rem; line-height: 1.22; letter-spacing: -.012em; }
h4 { font-size: 1.05rem; line-height: 1.3; }
p { margin: 0 0 var(--s4); max-width: 64ch; }
p:last-child { margin-bottom: 0; }
ul { margin: 0 0 var(--s4); padding-left: 1.1em; }

a {
  color: var(--coral-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color .15s ease;
}
a:hover { color: var(--navy); }

:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
  border-radius: 4px;
}
.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;
}
.skip-link {
  position: absolute; left: var(--s2); top: -60px; z-index: 100;
  background: var(--navy); color: #fff; padding: var(--s3) var(--s5);
  border-radius: 0 0 8px 8px; text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 0; color: #fff; }

/* eyebrow label: small caps above headlines */
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin: 0 0 var(--s3);
}
.eyebrow--gold { color: var(--gold-deep); }
.eyebrow--on-navy { color: var(--gold); }

/* ---------- 3. Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--s5);
}
.band { padding: var(--s8) 0; }
.band--cream { background: var(--cream); }
.band--cream-deep { background: var(--cream-deep); }
.band--white { background: var(--white); }
.band--navy { background: var(--navy); color: #EAF1F5; }
.band--navy h2, .band--navy h3 { color: #fff; }
.band-head { margin-bottom: var(--s6); max-width: 46ch; }
.band-head p { color: var(--muted); font-size: 1.1rem; margin-top: calc(-1 * var(--s1)); }
.band--navy .band-head { max-width: 34ch; }
.band--navy .band-head p { color: #C3D5DF; }
.lede { font-size: 1.16rem; line-height: 1.6; }
.hr-rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- 4. Buttons (min 48px tall, verb-first labels) ---------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  width: 100%;
  min-height: var(--tap);
  padding: var(--s3) var(--s6);
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.005em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease),
              transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--gold { background: var(--gold); color: var(--navy-deep); box-shadow: 0 2px 10px rgba(223, 156, 20, .3); }
.btn--gold:hover { background: var(--gold-deep); color: var(--navy-deep); box-shadow: 0 8px 22px rgba(223, 156, 20, .4); }
.btn--coral { background: var(--coral); color: #fff; box-shadow: 0 2px 10px rgba(214, 78, 38, .28); }
.btn--coral:hover { background: var(--coral-deep); color: #fff; box-shadow: 0 8px 22px rgba(214, 78, 38, .38); }
.btn--teal { background: var(--teal); color: #fff; box-shadow: 0 2px 10px rgba(23, 131, 106, .26); }
.btn--teal:hover { background: var(--teal-deep); color: #fff; box-shadow: 0 8px 22px rgba(23, 131, 106, .36); }
.btn--outline { background: transparent; border-color: var(--navy); color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: #fff; }
.btn--on-navy { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.btn--on-navy:hover { background: #fff; color: var(--navy); border-color: #fff; }
.btn-row { display: flex; flex-direction: column; gap: var(--s3); }

/* ---------- 5. Tap-to-call line ---------- */
.call-line {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: 1.06rem;
  font-weight: 600;
  margin: 0;
}
.call-line a {
  color: inherit;
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}
.call-icon {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy-deep);
  font-size: .82rem;
}

/* ---------- 6. Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line-soft);
}
.call-bar {
  background: var(--navy);
  color: #fff;
  font-size: .94rem;
}
.call-bar .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 40px;
  text-align: center;
}
.call-bar a { color: #fff; font-weight: 700; text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
.call-bar a:hover { color: var(--gold); }

.nav-bar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 68px;
}
.brand { display: flex; align-items: center; gap: var(--s3); text-decoration: none; }
.brand-logo { height: 44px; width: auto; }
.brand-name { display: none; }
.nav-actions { display: flex; align-items: center; gap: var(--s2); }
.nav-donate { width: auto; min-height: 44px; padding: 10px var(--s5); font-size: .97rem; }
/* At very narrow widths (small phones) the brand logo, this button and
   the hamburger no longer fit on one line at their normal size, and the
   button label was wrapping onto two lines instead -- inflating the
   whole header. Tighten just the pieces that need it. */
@media (max-width: 420px) {
  .brand-logo { height: 36px; }
  .nav-donate { padding: 8px 14px; font-size: .87rem; }
}

.nav-volunteer { display: none; }

.hamburger {
  width: 54px; height: 48px;
  display: grid; place-items: center; gap: 5px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--navy);
  line-height: 1;
  transition: background-color .15s ease, border-color .15s ease;
}
.hamburger:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.hamburger:hover .hamburger-bars i { background: #fff; }
.hamburger-bars { display: grid; gap: 4px; }
.hamburger-bars i { display: block; width: 22px; height: 2px; background: var(--navy); border-radius: 2px; transition: background-color .15s ease; }

.nav-list { display: none; }
.nav-panel {
  border-top: 1px solid var(--line-soft);
  background: var(--white);
  padding: var(--s2) 0 var(--s5);
}
.nav-panel .wrap { display: grid; gap: 0; }
.nav-panel a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: var(--s3) var(--s1);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--line-soft);
  transition: color .15s ease, padding-left .15s ease;
}
.nav-panel a:hover { color: var(--coral-deep); padding-left: var(--s3); }
.nav-sub-head {
  display: block;
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
  padding: var(--s5) var(--s1) var(--s2);
}
.nav-panel a.nav-sub-item { padding-left: var(--s4); font-size: 1.03rem; font-weight: 500; }
.nav-panel a.nav-sub-item:hover { padding-left: var(--s5); }

/* ---------- 7. Hero ---------- */
.hero { position: relative; background: var(--navy-deep); isolation: isolate; }
.hero-media { position: absolute; inset: 0; overflow: hidden; z-index: -1; }
.hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(22,50,63,.80) 0%, rgba(22,50,63,.88) 100%);
}
.hero-inner { padding: var(--s8) 0 var(--s8); }
.hero h1 { color: #fff; max-width: 19ch; margin-bottom: var(--s5); }
.hero-sub { color: #E4DFD2; font-size: 1.16rem; max-width: 60ch; }
.hero .btn-row { margin: var(--s7) 0 var(--s5); }
.hero .call-line { color: #fff; }
.hero-note { color: #B9CBD6; font-size: .96rem; margin-top: var(--s3); }

/* ---------- 8. Photo placeholder boxes ---------- */
.ph {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--s5);
  border: 2px dashed rgba(34, 72, 94, .3);
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(45deg, rgba(34,72,94,.05) 0 9px, rgba(34,72,94,.012) 9px 18px);
  color: var(--navy);
  text-align: center;
  min-height: 200px;
}
.ph-label {
  font-family: var(--font-mono);
  font-size: .7rem;
  line-height: 1.55;
  max-width: 32ch;
}
.ph-label strong {
  display: block;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--coral-deep);
  margin-bottom: var(--s2);
}

/* ---------- 9. California map + Bay Area zoom + hubs ---------- */


.map-panels { display: grid; gap: var(--s4); align-items: stretch; }
@media (min-width: 560px) { .map-panels { grid-template-columns: 150px 1fr; } }
.map-frame {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s4);
  box-shadow: var(--shadow);
}
.map-frame--state { display: grid; align-content: center; justify-content: center; }
.map-frame--state .ca-map { width: 100%; height: auto; }
@media (max-width: 639px) {
  .map-frame--state .ca-map { max-width: 132px; margin: 0 auto; }
}
.ca-map { width: 100%; height: auto; display: block; overflow: hidden; }
.ca-land { fill: var(--navy-tint); stroke: var(--navy-soft); stroke-width: 1; }
.ca-land--zoom { fill: var(--cream-deep); stroke: var(--navy-soft); stroke-width: 1.6; }
.ca-water { fill: #DCE8EE; }
.ca-box { fill: rgba(240, 102, 60, .16); stroke: var(--coral); stroke-width: 2; }
.map-panel-label {
  font-family: var(--font-body);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  fill: var(--muted);
}

.pin { cursor: pointer; }
.pin-halo { fill: var(--coral); opacity: 0; transition: opacity .18s var(--ease); }
.pin-dot {
  fill: var(--gold);
  stroke: #fff;
  stroke-width: 2.5;
  transition: fill .18s var(--ease);
}
.pin-num {
  fill: var(--navy-deep);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  text-anchor: middle;
  pointer-events: none;
}
.pin:hover .pin-dot { fill: var(--coral); }
.pin:hover .pin-num, .pin[aria-pressed="true"] .pin-num { fill: #fff; }
.pin[aria-pressed="true"] .pin-dot { fill: var(--coral-deep); }
.pin[aria-pressed="true"] .pin-halo { opacity: .22; }
.pin:focus-visible { outline: none; }
.pin:focus-visible .pin-dot { stroke: var(--navy-deep); stroke-width: 3.5; }
.pin-city {
  fill: var(--navy);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  pointer-events: none;
}
.map-caption {
  font-family: var(--font-body);
  font-size: .82rem;
  color: var(--muted);
  margin-top: var(--s3);
}

/* accordion list of hubs */
.hub-acc { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.hub-item {
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.hub-item:hover { border-color: var(--teal); }
.hub-item[data-open="true"] { border-color: var(--coral); box-shadow: var(--shadow); }
.hub-btn {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: 62px;
  padding: var(--s3) var(--s4);
  background: none;
  border: 0;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
  text-align: left;
  cursor: pointer;
}
.hub-item[data-open="true"] .hub-btn { background: #FEF3EF; }
.hub-chevron {
  margin-left: auto;
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  color: var(--coral-deep);
  font-size: .8rem;
  transition: transform .2s var(--ease);
}
.hub-item[data-open="true"] .hub-chevron { transform: rotate(180deg); }
.hub-detail {
  padding: var(--s5) var(--s5) var(--s5) 60px;
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: var(--s4);
}
.hub-detail dl { margin: 0; display: grid; gap: var(--s4); }
.hub-detail dt {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: var(--s1);
}
.hub-detail dd { margin: 0; }
.hub-detail ul { margin: 0; padding-left: 1.15em; }
.hub-detail li { margin-bottom: var(--s1); }
.hub-detail .btn { max-width: 300px; }
.hub-num {
  flex: none;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy-deep);
  font-size: .94rem;
  font-weight: 700;
  transition: background-color .16s var(--ease), color .16s var(--ease);
}
.hub-item[data-open="true"] .hub-num { background: var(--coral-deep); color: #fff; }
.hub-city { line-height: 1.25; }
.hub-city small { display: block; font-size: .82rem; font-weight: 500; color: var(--muted); }

.hub-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--s6) var(--s5);
}
.hub-card h3 { margin-bottom: var(--s1); }
.hub-card > p { color: var(--muted); font-size: .95rem; margin-bottom: var(--s5); }
.hub-card dl { margin: 0 0 var(--s6); display: grid; gap: var(--s4); }
.hub-card dt {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: var(--s1);
}
.hub-card dd { margin: 0; }
.hub-card .btn { max-width: 320px; }
.owner-todo {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--muted);
  background: var(--cream-deep);
  border-left: 3px solid var(--gold);
  padding: 3px var(--s2);
  display: inline-block;
}

/* ---------- 10. Impact stats ---------- */
.stats { display: grid; gap: var(--s7); }
.stat-num {
  font-family: var(--font-display);
  color: var(--gold);
  font-size: clamp(2.9rem, 12vw, 4.6rem);
  font-weight: 600;
  line-height: .95;
  letter-spacing: -.035em;
  display: block;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: 1.08rem;
  color: #DCE7EE;
  margin: var(--s3) 0 0;
  max-width: 22ch;
}
.stats-note { color: #A9BECB; font-size: .94rem; margin: var(--s7) 0 0; }

/* ---------- 11. Mission ---------- */
.mission { display: grid; gap: var(--s6); align-items: center; }
.mission .btn { max-width: 300px; margin-top: var(--s5); }

/* ---------- 12. Program cards ---------- */
.cards { display: grid; gap: var(--s5); }
.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: box-shadow .22s var(--ease), transform .22s var(--ease), border-color .22s var(--ease);
}
.card:hover { box-shadow: var(--shadow-lift); transform: translateY(-4px); border-color: var(--navy-tint); }
.card .ph { border: 0; border-radius: 0; border-bottom: 1px solid var(--line-soft); min-height: 158px; }
.card-banner {
  display: grid;
  place-items: center;
  min-height: 170px;
  padding: 18px var(--s5);
  background: #FFFFFF;
  border-bottom: 1px solid var(--line-soft);
}
.card-banner img { max-height: 108px; width: auto; }
.card-body { padding: var(--s5); display: flex; flex-direction: column; flex: 1; }
.card-body h3 { margin-bottom: var(--s2); }
.card-body p { font-size: 1rem; color: var(--muted); }
.card-tag {
  align-self: flex-start;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 5px var(--s3);
  margin-bottom: var(--s3);
}
.card-tag--teal { color: var(--teal-deep); background: #E4F4F0; }
.card-tag--purple { color: var(--purple); background: #EFEAFA; }
.card-tag--blue { color: var(--blue); background: #E6F0FA; }
.card-tag--coral { color: var(--coral-deep); background: #FDEDE7; }
.card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  align-self: flex-start;
  margin-top: auto;
  padding-top: var(--s5);
  min-height: 32px;
  font-weight: 700;
  color: var(--coral-deep);
  text-decoration: none;
}
.card-link span { transition: transform .18s var(--ease); }
.card-link:hover { color: var(--navy); text-decoration: underline; }
.card-link:hover span { transform: translateX(4px); }

/* ---------- 13. Footer ---------- */
.site-footer { background: var(--navy-deep); color: #DCE7EE; padding: var(--s8) 0 var(--s6); }
.site-footer h3 { color: #fff; }
.footer-top { display: grid; gap: var(--s6); margin-bottom: var(--s7); }
.footer-logo { height: 54px; width: auto; }
.footer-blurb { color: #A9BECB; font-size: .98rem; max-width: 34ch; margin-top: var(--s4); }
.footer-cols { display: grid; gap: var(--s6); }
.footer-col h2 {
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s2);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; }
.footer-col a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: #DCE7EE;
  text-decoration: none;
  font-weight: 500;
  transition: color .15s ease, padding-left .15s ease;
}
.footer-col a:hover { color: var(--gold); padding-left: var(--s2); }
.footer-legal {
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: var(--s5);
  display: grid;
  gap: var(--s4);
  font-size: .94rem;
  color: #A9BECB;
}
.footer-legal p { max-width: 58ch; margin: 0; }
.footer-legal .call-line { color: #fff; }

/* ---------- 14. Entrance animations ---------- */
/* Only hide reveal content once we know JavaScript is running. Without
   the .js guard a script failure would leave most of the site invisible. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
}
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

/* ============================================================
   Breakpoints
   ============================================================ */
@media (min-width: 640px) {
  body { font-size: 17.5px; }
  .band { padding: var(--s9) 0; }
  .btn { width: auto; }
  .btn-row { flex-direction: row; flex-wrap: wrap; }
  .hero-inner { padding: var(--s9) 0; }
  .brand-name { display: block; }
  .nav-volunteer { display: flex; }
  .stats { grid-template-columns: 1fr 1fr; gap: var(--s8); }
  .cards { grid-template-columns: 1fr 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-legal { grid-template-columns: 1fr auto; align-items: center; }
  .hub-detail { grid-template-columns: 1fr auto; align-items: end; }
  .map-panels { grid-template-columns: 140px minmax(0, 1fr); }
}

@media (min-width: 800px) {
  .footer-top { grid-template-columns: 1fr auto; align-items: end; }
}

@media (min-width: 1024px) {
  body { font-size: 18px; }
  .band { padding: var(--s10) 0; }
  .hero-inner { padding: var(--s10) 0; }
  .hero h1 { max-width: 21ch; }
  .hamburger { display: none; }
  .nav-panel { display: none !important; }
  .nav-list {
    display: flex;
    align-items: center;
    gap: var(--s1);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .nav-list > li { position: relative; }
  .nav-list > li > a, .nav-list > li > button {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 10px var(--s4);
    background: none;
    border: 0;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 1.01rem;
    font-weight: 600;
    color: var(--navy);
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
  }
  .nav-list > li > a:hover, .nav-list > li > button:hover { background: var(--cream-deep); color: var(--coral-deep); }
  .nav-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 246px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lift);
    padding: var(--s2);
    list-style: none;
    margin: 0;
    display: grid;
    gap: 1px;
  }
  .nav-dropdown a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: var(--s2) var(--s3);
    border-radius: 8px;
    color: var(--navy);
    font-weight: 500;
    text-decoration: none;
    transition: background-color .14s ease, color .14s ease;
  }
  .nav-dropdown a:hover { background: var(--cream-deep); color: var(--coral-deep); }
  .call-bar .wrap { justify-content: flex-end; }
  .stats { grid-template-columns: 1fr 1fr; gap: var(--s10); }
  .mission { grid-template-columns: 1.08fr 1fr; gap: var(--s8); }
  .cards { grid-template-columns: repeat(4, 1fr); }
  .footer-cols { grid-template-columns: repeat(4, 1fr); gap: var(--s6); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .btn:hover, .card:hover { transform: none; }
}


/* --- map geography + card art fixes --- */
.zoom-land { fill: #EFE8D9; stroke: #E2D9C6; stroke-width: 1; }
.zoom-water { fill: #C7D8E2; stroke: #A9C0CE; stroke-width: 1; }
.zoom-river { fill: none; stroke: #C7D8E2; stroke-width: 6; stroke-linecap: round; }
.map-frame--state .ca-map { max-height: 260px; }
.mission-photo { margin: 0; }
.mission-photo img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; object-position: center 40%; border-radius: var(--radius); box-shadow: var(--shadow); display: block; }
.card-art { padding: 18px 0; border: 0; background: #FFFFFF; border-bottom: 1px solid var(--line); min-height: 170px; }
.card-art .card-art-img { max-height: 132px; max-width: 78%; object-fit: contain; }
.card .ph { background: #FFFFFF; }


/* --- hero extension + card art uniformity --- */
.hero-inner { padding-bottom: calc(var(--s8) + 64px); }
@media (min-width: 640px)  { .hero-inner { padding-bottom: calc(var(--s9) + 96px); } }
@media (min-width: 1024px) { .hero-inner { padding-bottom: calc(var(--s10) + 140px); } }


/* ============================================================
   Hub locator (map + accordion, side by side)
   ============================================================ */
.hub-layout { display: grid; gap: var(--s6); align-items: start; }

.hub-mapcard {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(60,40,20,.04), 0 12px 32px -18px rgba(60,40,20,.18);
  padding: 16px;
  display: flex; flex-direction: column; gap: 14px;
}
.hub-mapwrap {
  position: relative;
  aspect-ratio: 1.55;
  background: #EBE1D2;
  border-radius: 12px;
  overflow: hidden;
}
.hub-bay {
  position: absolute; left: .8%; top: 3.6%;
  width: 57.7%; height: 94.8%;
  object-fit: fill;
}
.hub-mapnote {
  position: absolute; right: 14px; bottom: 12px;
  font-size: .69rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #9FA9A4;
}

/* pins */
.hub-pin {
  position: absolute; width: 0; height: 0; padding: 0;
  background: none; border: 0; cursor: pointer; display: block;
  transform: translate(-50%, -50%);
}
.hub-pin-dot {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--gold); color: #5A3E12;
  box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 2px 5px rgba(60,40,20,.22);
  display: flex; align-items: center; justify-content: center;
  font-size: .81rem; font-weight: 800; line-height: 1;
  transition: width .15s ease, height .15s ease, background .15s ease;
}
.hub-pin-label {
  position: absolute; white-space: nowrap;
  font-size: .84rem; font-weight: 700; color: var(--navy);
  text-shadow: 0 1px 0 rgba(255,255,255,.85), 0 0 6px rgba(255,255,255,.9);
}
.hub-pin[data-side="right"] .hub-pin-label { left: calc(50% + 24px); top: 50%; transform: translateY(-50%); }
.hub-pin[data-side="left"]  .hub-pin-label { right: calc(50% + 24px); top: 50%; transform: translateY(-50%); }
.hub-pin[data-side="below"] .hub-pin-label { left: 50%; top: calc(50% + 24px); transform: translate(-50%,0); }
.hub-pin[data-side="above"] .hub-pin-label { left: 50%; bottom: calc(50% + 24px); transform: translate(-50%,0); }
.hub-pin[data-on="true"] .hub-pin-dot {
  width: 34px; height: 34px;
  background: var(--coral-deep); color: #fff;
  box-shadow: 0 0 0 7px rgba(210,70,30,.16), 0 2px 6px rgba(60,40,20,.28);
}
.hub-pin[data-on="true"] .hub-pin-label { color: #B23A15; }
.hub-pin:focus-visible { outline: none; }
.hub-pin:focus-visible .hub-pin-dot { box-shadow: 0 0 0 4px var(--navy); }

/* map card footer: state inset + caption + legend */
.hub-mapfoot { display: flex; align-items: center; gap: 14px; padding: 2px 4px 2px 2px; flex-wrap: wrap; }
.hub-inset { position: relative; flex: 0 0 auto; width: 52px; }
.hub-inset img { display: block; width: 52px; height: auto; }
.hub-inset-box {
  position: absolute; left: 26.1%; top: 46.3%; transform: translate(-50%,-50%);
  width: 15px; height: 11px; border: 1.5px solid var(--coral-deep); border-radius: 2px;
}
.hub-caption { margin: 0; font-size: .82rem; line-height: 1.45; color: var(--muted); max-width: 34ch; }
.hub-legend { margin-left: auto; display: flex; flex-direction: column; gap: 6px; }
.hub-legend span {
  display: flex; align-items: center; gap: 7px;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.hub-legend .key { width: 11px; height: 11px; border-radius: 999px; display: inline-block; }
.hub-legend .key--gold { background: var(--gold); }
.hub-legend .key--coral { background: var(--coral-deep); }

.hub-detail-wide { grid-column: 1 / -1; }

@media (min-width: 900px) {
  .hub-layout { grid-template-columns: minmax(380px, 46%) 1fr; gap: var(--s7); }
  .hub-mapcard { position: sticky; top: 24px; }
  .hub-detail dl { grid-template-columns: 1fr 1fr; gap: 18px 26px; }
}


/* ============================================================
   15. Interior page hero (logo banner over photo)
   ============================================================ */
.hero--page .hero-inner { padding: var(--s8) 0; }
@media (min-width: 640px)  { .hero--page .hero-inner { padding: var(--s9) 0; } }
@media (min-width: 1024px) { .hero--page .hero-inner { padding: var(--s9) 0; } }
.hero-logo {
  height: auto;
  width: 100%;
  max-width: 460px;
  margin: 0 0 var(--s5);
}
.hero-eyebrow { color: var(--gold); }
.hero--page .hero-sub { max-width: 40ch; font-size: 1.2rem; color: #EFEADD; }
.page-title { color: #fff; max-width: 22ch; }

/* ============================================================
   16. Numbered steps
   ============================================================ */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); counter-reset: step; }
.step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--s4);
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 5px solid var(--gold);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: var(--s5);
}
.step-num {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
}
.step-body h3 { margin-bottom: var(--s2); }
.step-body p { color: var(--muted); font-size: 1.02rem; }
.step-body .btn { margin-top: var(--s4); max-width: 320px; }
.step-note {
  display: flex; align-items: center; gap: var(--s2);
  margin-top: var(--s5);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--navy);
}
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); align-items: start; } }

/* ============================================================
   17. Schedule rows (volunteer days & times)
   ============================================================ */
.sched { display: grid; gap: var(--s2); margin: 0 0 var(--s6); }
.sched-row {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--s4) var(--s5);
  display: grid;
  gap: var(--s1);
}
.sched-day {
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal-deep);
}
.sched-time { font-weight: 700; color: var(--navy); font-size: 1.06rem; }
.sched-place { color: var(--muted); font-size: 1rem; }
@media (min-width: 800px) {
  .sched-row { grid-template-columns: 86px 190px 1fr; gap: var(--s5); align-items: baseline; }
  .sched-day { align-self: center; }
}

/* ============================================================
   18. Simple info cards (3-up) + CTA band
   ============================================================ */
.cards--3 { grid-template-columns: 1fr; }
@media (min-width: 640px)  { .cards--3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }
.card--plain { border-top: 5px solid var(--gold); }
.card--plain .card-body { padding: var(--s6) var(--s5); }
.card-weight {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--coral-deep);
  line-height: 1.1;
  display: block;
  margin-bottom: var(--s2);
}
.card-fine { font-size: .92rem; color: var(--muted); margin-top: var(--s4); }

.cta-band { background: var(--navy); color: #EAF1F5; padding: var(--s8) 0; text-align: left; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #C3D5DF; }
.cta-band .btn-row { margin-top: var(--s6); }
.cta-band .call-line { color: #fff; margin-top: var(--s5); }

/* ============================================================
   19. Give methods (donate page)
   ============================================================ */
.gives { display: grid; gap: var(--s5); }
@media (min-width: 800px) { .gives { grid-template-columns: 1fr 1fr; } }
.give {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 5px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--s6) var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
.give--soon { border-top-color: var(--line); background: var(--cream-deep); box-shadow: none; }
.give h3 { margin: 0; font-size: 1.5rem; }
.give p { color: var(--muted); margin: 0; }
.give .btn { margin-top: auto; max-width: 340px; }
.give-tag {
  align-self: flex-start;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--cream-deep);
  border-radius: 999px;
  padding: 5px var(--s3);
}
.give--soon .give-tag { background: var(--white); }
.give-address {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(1.15rem, 5.2vw, 1.5rem);
  font-weight: 700;
  color: var(--navy);
  word-break: break-all;
  background: var(--cream);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  padding: var(--s4);
}
.copy-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--tap);
  padding: var(--s3) var(--s5);
  background: var(--navy);
  color: #fff;
  border: 2px solid var(--navy);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .16s var(--ease), color .16s var(--ease);
}
.copy-btn:hover { background: var(--white); color: var(--navy); }
.qr-ph { min-height: 210px; }
.give-fine {
  border-top: 1px solid var(--line);
  margin-top: var(--s7);
  padding-top: var(--s5);
  font-size: .98rem;
  color: var(--muted);
}
.give-fine strong { color: var(--navy); }


/* ---------- 20. Flat page header (no photo) ---------- */
.hero--flat { background: var(--navy-deep); }
.hero--flat .hero-inner { padding: var(--s6) 0 var(--s7); }
@media (min-width: 640px) { .hero--flat .hero-inner { padding: var(--s7) 0 var(--s8); } }
@media (min-width: 1024px) { .hero--flat .hero-inner { padding: var(--s7) 0 var(--s8); } }
.hero--flat .page-title { margin-bottom: var(--s4); }
.hero--flat .hero-logo { max-width: 380px; margin-bottom: var(--s4); }
.hero--flat .hero-sub { font-size: 1.12rem; }
.hero--flat .btn-row { margin: var(--s5) 0 0; }
.hero--flat .call-line { margin-top: var(--s4); }


/* ---------- 21. Venmo QR ---------- */
.give-qr { margin: 0; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--s4); display: grid; justify-items: center; gap: var(--s2); }
.give-qr img { width: 100%; max-width: 230px; height: auto; border-radius: var(--radius-sm); }
.give-qr figcaption { font-size: .94rem; color: var(--muted); text-align: center; }


/* ---------- 22. Tight top band (page opens straight into content) ---------- */
.band--tight-top { padding-top: var(--s5); }
@media (min-width: 640px) { .band--tight-top { padding-top: var(--s6); } }


/* ---------- 23. Logo plate (keeps dark logos readable on navy) ---------- */
.hero-logo-plate {
  display: inline-block;
  background: #fff;
  border-radius: var(--radius);
  padding: var(--s4) var(--s5);
  margin-bottom: var(--s5);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  max-width: 420px;
}
.hero-logo-plate .hero-logo { margin: 0; width: 100%; }


/* ---------- 24. Giving ladder ---------- */
.ladder { display: grid; gap: var(--s4); margin: 0 0 var(--s6); }
@media (min-width: 800px) { .ladder { grid-template-columns: repeat(3, 1fr); } }
.ladder-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 5px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--s5);
  display: grid;
  gap: var(--s2);
  align-content: start;
}
.ladder-amount {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1;
  color: var(--coral-deep);
}
.ladder-item p { color: var(--muted); margin: 0; }

/* ---------- 25. Story rows (text + photo) ---------- */
.story { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 900px) {
  .story { grid-template-columns: 1fr 1fr; gap: var(--s8); }
  .story--flip .story-media { order: -1; }
}
.story + .story { margin-top: var(--s8); }
.story-media { margin: 0; }
.story-media .ph { min-height: 280px; }
.story-num {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: var(--s3);
}
.story ul { color: var(--muted); }
.story li { margin-bottom: var(--s2); }

/* ---------- 26. Stat placeholder boxes ---------- */
.stat-phs { display: grid; gap: var(--s4); }
@media (min-width: 700px) { .stat-phs { grid-template-columns: repeat(3, 1fr); } }
.stat-phs .ph { min-height: 150px; }

/* ---------- 27. Graphic panel (logo/illustration on white) ---------- */
.graphic-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--s6);
  display: grid;
  place-items: center;
  margin: 0;
  min-height: 260px;
}
.graphic-panel img { max-height: 220px; width: auto; }


/* ---------- 28. Floating donate bar (appears on scroll) ---------- */
.float-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: rgba(22, 50, 63, .96);
  backdrop-filter: saturate(1.4) blur(8px);
  border-top: 1px solid rgba(255,255,255,.14);
  padding: var(--s3) 0 calc(var(--s3) + env(safe-area-inset-bottom, 0px));
  opacity: 0;
  transform: translateY(105%);
  pointer-events: none;
  transition: opacity .5s var(--ease), transform .55s var(--ease);
}
.float-cta[data-on="true"] { opacity: 1; transform: none; pointer-events: auto; }
.float-cta .wrap { display: flex; align-items: center; gap: var(--s3); }
.float-cta-text { color: #fff; font-weight: 600; font-size: 1rem; display: none; }
.float-cta .btn { flex: 1; }
@media (min-width: 640px) {
  .float-cta .wrap { justify-content: flex-end; }
  .float-cta-text { display: block; margin-right: auto; }
  .float-cta .btn { flex: none; }
}
@media (prefers-reduced-motion: reduce) { .float-cta { transition: opacity .2s linear; transform: none; } }


/* ---------- 29. Forms ---------- */
.form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 5px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--s6) var(--s5);
  display: grid;
  gap: var(--s5);
}
.field { display: grid; gap: var(--s2); }
.field > label, .field-legend {
  font-family: var(--font-body);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
}
.field input, .field textarea, .field select {
  width: 100%;
  min-height: var(--tap);
  padding: var(--s3) var(--s4);
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--ink);
  background: var(--cream);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .15s ease, background-color .15s ease;
}
.field textarea { min-height: 150px; line-height: 1.55; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { background: #fff; border-color: var(--navy-soft); }
.field-hint { font-size: .94rem; color: var(--muted); margin: 0; }
fieldset.field { border: 0; margin: 0; padding: 0; }
.checks { display: grid; gap: var(--s2); margin-top: var(--s2); }
@media (min-width: 640px) { .checks { grid-template-columns: 1fr 1fr; } }
.check {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: var(--tap);
  padding: var(--s2) var(--s4);
  background: var(--cream);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.check:hover { border-color: var(--teal); }
.check input { width: 22px; height: 22px; min-height: 0; flex: none; accent-color: var(--coral-deep); margin: 0; }
.checks-head {
  font-family: var(--font-body);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: var(--s4) 0 0;
}
.form-note { font-size: 1rem; color: var(--muted); margin: 0; }
.form-status { font-weight: 700; color: var(--teal-deep); margin: 0; min-height: 24px; }

/* ---------- 30. Contact details ---------- */
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
.contact-list dt, .contact-label {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: var(--s1);
}
.contact-value { font-size: 1.14rem; font-weight: 600; color: var(--navy); margin: 0; }
.contact-value a { color: var(--coral-deep); }

/* ---------- 31. Archive rows (past programs) ---------- */
.arch { display: grid; gap: var(--s6); }
.arch-row {
  display: grid;
  gap: var(--s4);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--s5);
}
@media (min-width: 800px) { .arch-row { grid-template-columns: 300px 1fr; gap: var(--s6); align-items: center; } }
.arch-row .ph { min-height: 190px; }
.arch-tag {
  align-self: flex-start;
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--cream-deep);
  border-radius: 999px;
  padding: 5px var(--s3);
  margin-bottom: var(--s3);
}
.arch-body h3 { font-size: 1.4rem; margin-bottom: var(--s2); }
.arch-body p { color: var(--muted); margin: 0; }

/* ============================================================
   14. ADDED IN THE 2026 STATIC REBUILD
   Everything below supports components that did not exist in the
   original canvas build: the photo galleries, the Sierra Leone
   progress sequence, the volunteer perks, the hub action buttons,
   and the hero video.
   ============================================================ */

/* [hidden] must always win. The menus rely on it. */
[hidden] { display: none !important; }

/* ---------- hero photography ----------
   The hero image now sits inside a <picture> for the webp srcset, so the
   wrapper has to fill .hero-media for the img's height:100% to resolve. */
.hero-media picture {
  position: absolute;
  inset: 0;
  display: block;
}
.hero--photo { position: relative; isolation: isolate; background: var(--navy-deep); }
.hero--photo .hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero--photo .hero-img { width: 100%; height: 100%; object-fit: cover; }
.hero--photo .hero-inner { position: relative; }
.hero--photo .page-title,
.hero--photo .hero-sub,
.hero--photo .hero-eyebrow { color: var(--cream); }
.hero--photo .hero-sub { color: rgba(251, 248, 241, .92); }

/* ---------- small button, used in the hub cards ---------- */
.btn--sm {
  min-height: var(--tap);
  padding: 10px var(--s4);
  font-size: .93rem;
}

/* ---------- hub card actions: get food / directions / call ---------- */
.hub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}
.hub-actions .btn { max-width: none; flex: 1 1 auto; }
@media (min-width: 560px) {
  .hub-actions .btn { flex: 0 1 auto; }
}
.hub-detail dd strong { color: var(--navy-deep); }

/* On a narrow phone the seven map labels collide over the raster
   map, so the numbered dots carry it and the accordion below
   supplies every city name. */
@media (max-width: 520px) {
  .hub-pin-label { display: none; }
}

.hub-photo { margin: var(--s7) 0 0; }
.hub-photo img { border-radius: var(--radius); width: 100%; height: auto; }
.hub-photo figcaption,
.gallery figcaption,
.side-photo figcaption,
.wide-photo figcaption,
.story-media figcaption {
  margin-top: var(--s3);
  font-size: .92rem;
  color: var(--muted);
}

/* ---------- delivery-days note under the schedule ---------- */
.sched-note {
  margin-top: var(--s5);
  padding: var(--s4) var(--s5);
  background: var(--cream-deep);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-sm);
  font-size: .97rem;
  color: var(--muted);
  max-width: 70ch;
}
.sched-note strong { color: var(--ink); }

/* ---------- volunteer perks: college credit / job experience ---------- */
.perks {
  display: grid;
  gap: var(--s5);
  margin-bottom: var(--s7);
}
@media (min-width: 720px) {
  .perks { grid-template-columns: 1fr 1fr; gap: var(--s6); }
}
.perk {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--teal);
  border-radius: var(--radius);
  padding: var(--s5);
  box-shadow: var(--shadow);
}
.perk:nth-child(2) { border-top-color: var(--blue); }
.perk h2 { font-size: 1.35rem; margin-bottom: var(--s3); }
.perk p { color: var(--muted); font-size: 1rem; margin: 0; }
.perk-tag {
  display: inline-block;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: var(--s3);
}
.perk:nth-child(2) .perk-tag { color: var(--blue-text); }

/* ---------- Sierra Leone progress sequence ---------- */
.progress { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s6); }
@media (min-width: 700px)  { .progress { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .progress { grid-template-columns: repeat(3, 1fr); } }
.progress-step figure { margin: 0; height: 100%; }
.progress-step img {
  width: 100%;
  /* height:auto is required: the height="" attribute otherwise makes the
     height definite and aspect-ratio is silently ignored. */
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--cream-deep);
}
.progress-step figcaption {
  margin-top: var(--s3);
  font-size: .97rem;
  color: var(--muted);
}
.progress-step figcaption strong { color: var(--ink); }
.progress-num {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px;
  margin-right: var(--s2);
  border-radius: 50%;
  background: var(--navy); color: var(--cream);
  font-size: .8rem; font-weight: 700;
  vertical-align: -6px;
}

/* ---------- photo galleries ---------- */
.gallery { display: grid; gap: var(--s5); }
.gallery figure { margin: 0; }
.gallery img {
  width: 100%; height: auto;
  aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--radius);
  background: var(--cream-deep);
}
@media (min-width: 700px) {
  .gallery--2 { grid-template-columns: 1fr 1fr; }
  .gallery--3 { grid-template-columns: repeat(3, 1fr); }
}

.side-photo, .wide-photo { margin: 0; }
.side-photo img, .wide-photo img { width: 100%; height: auto; border-radius: var(--radius); }
.wide-photo { margin-top: var(--s7); }

.story-media img { width: 100%; height: auto; border-radius: var(--radius); }

/* ---------- program card banners ----------
   Two jobs in one slot: a transparent logo (YANA) and photographs.

   The logo was being stretched. Its <img> carries width="1536" height="433"
   attributes, and the original rule capped max-width and max-height
   independently, so the browser squashed 3.55:1 artwork into 2:1. Setting
   both dimensions to auto lets the caps work together and the aspect hold. */
.cards .card-banner {
  min-height: 170px;
  height: 170px;
  overflow: hidden;
}
.card-banner img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 108px;
  object-fit: contain;
}

/* Photo banners fill the slot edge to edge. <picture> is the flex/grid item,
   so it needs the height too or the image sizes itself from its own aspect
   ratio and overflows the box. */
.card-banner--photo {
  display: block;
  padding: 0;
  min-height: 0;
  background: var(--cream-deep);
}
.card-banner--photo picture {
  display: block;
  width: 100%;
  height: 100%;
}
.card-banner--photo img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  object-fit: cover;
  /* Bias the crop upward: in all three photos the faces and the roofline
     sit above centre, and a centred crop cuts them off. */
  object-position: center 38%;
}
/* Title-card banner, for a programme we have no photograph of. It keeps
   the card the same shape and weight as its neighbours, while being
   plainly a piece of type rather than a picture of somewhere else. */
.card-banner--titlecard {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--s5);
  background:
    radial-gradient(120% 90% at 30% 15%, rgba(240,102,60,.20) 0%, rgba(240,102,60,0) 60%),
    linear-gradient(155deg, var(--navy) 0%, var(--navy-deep) 100%);
  text-align: center;
}
.titlecard-place {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--cream);
  line-height: 1.1;
}
.titlecard-country {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- past programs media ---------- */
.arch-media { margin: 0; }
.arch-media img {
  width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius);
  background: var(--cream-deep);
}
.arch-body--full { grid-column: 1 / -1; }
.arch-note { font-size: .95rem; color: var(--muted); }
.arch-gallery {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s3); margin-top: var(--s4);
}
.arch-gallery figure { margin: 0; }
.arch-gallery img {
  width: 100%; height: auto;
  aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--radius-sm);
}

/* ---------- narrow reading column, used by the privacy page ---------- */
.prose-narrow { max-width: 68ch; }
.prose-narrow h2 { margin-top: 0; }
.prose-narrow h3 {
  margin-top: var(--s6);
  font-size: 1.2rem;
}
.prose-narrow ul { padding-left: 1.2em; }
.prose-narrow li { margin-bottom: var(--s2); }

/* ---------- footer address ---------- */
.footer-address {
  font-style: normal;
  margin-top: var(--s4);
  color: rgba(251, 248, 241, .78);
  font-size: .97rem;
  line-height: 1.6;
}

/* ---------- form status: warning tone ---------- */
.form-status[data-tone="warn"] {
  color: var(--coral-deep);
  background: #FDECE6;
  border-radius: var(--radius-sm);
  padding: var(--s3) var(--s4);
}

/* ---------- focus visibility, applied everywhere ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
  border-radius: 4px;
}

/* The original overlay ran .80 -> .88 navy, which buried the hero
   photograph almost completely. Lightened, with a stronger scrim on the
   left where the headline sits so white text keeps its contrast. */
.hero .hero-overlay {
  background:
    linear-gradient(90deg, rgba(22,50,63,.88) 0%, rgba(22,50,63,.72) 42%, rgba(22,50,63,.42) 100%),
    linear-gradient(180deg, rgba(22,50,63,.30) 0%, rgba(22,50,63,.55) 100%);
}
@media (max-width: 800px) {
  /* Narrow screens put the text over the middle of the frame. */
  .hero .hero-overlay {
    background: linear-gradient(180deg, rgba(22,50,63,.74) 0%, rgba(22,50,63,.86) 100%);
  }
}

/* The map pins were 0x0 anchor points, so the only clickable area was the
   28px dot, under the 48px tap target the rest of the site keeps. Give
   the button a real box centred on the same coordinate. The dot and label
   are absolutely positioned inside it, so nothing moves. */
.hub-pin {
  width: var(--tap);
  height: var(--tap);
  border-radius: 50%;
}

/* The hub detail was a `1fr auto` grid built around a single "Get Food
   Here" button. It now carries three actions (get food / directions /
   call), and `auto` was letting them take half the panel, which squeezed
   the address list down to one word per line. Give the detail one column
   and let the actions sit on their own row underneath. */
.hub-detail {
  grid-template-columns: 1fr;
  align-items: start;
}
.hub-actions { grid-column: 1 / -1; }

/* Same presentational-hint problem for the mission and graphic panels. */
.mission-photo img,
.graphic-panel img { width: 100%; height: auto; }

/* ---------- the hub map on small screens ----------
   The pins are percentage-positioned over a fixed raster map. At 320px
   the map is ~240px wide and Richmond, Oakland, Walnut Creek and Antioch
   are close enough together that the numbered dots overlap into an
   unreadable cluster. Hiding the labels was not enough.

   Below 640px the map is hidden and the accordion carries the section on
   its own: it already has every city, county, day, time, address, host
   centre, directions link and phone number. */
@media (max-width: 639px) {
  .hub-mapcard { display: none; }
  .hub-acc { margin-top: 0; }
}
/* Above that, the labels come back. */
@media (min-width: 640px) and (max-width: 900px) {
  .hub-pin-label { font-size: .78rem; }
}

.hub-list-lede {
  margin: 0 0 var(--s4);
  font-size: .97rem;
  color: var(--muted);
}
@media (min-width: 640px) { .hub-list-lede { display: none; } }

/* ---------- contrast corrections ----------
   Every rule here replaces a bright brand colour with its text-safe
   variant at a spot where axe-core measured below 4.5:1. */
.eyebrow--gold { color: var(--gold-text); }
.card-tag--blue { color: var(--blue-text); }
.card-tag--purple { color: var(--purple-text); }
.hub-mapnote { color: var(--map-note); }
.btn--coral { background: var(--coral-btn); }
.btn--coral:hover { background: var(--coral-btn-deep); }
.footer-legal a,
.site-footer .footer-legal a { color: var(--coral-on-navy); }

/* ---------- keeping photographs sharp ----------
   These are the originals. There is no higher-resolution version of any of
   them in the media library, so the only way to stop a picture looking soft
   is to stop showing it bigger than it is. On a Retina screen every CSS
   pixel needs two real ones, so a 1057px photo is only sharp up to about
   520 CSS px wide. Each cap below is set from the file's real width.
   `npm run upscale` re-checks this. */

/* yana-1.jpg is 1057px wide. */
.hub-photo { max-width: 520px; margin-left: auto; margin-right: auto; }
.hub-photo figcaption { text-align: center; }

/* project-iftar-meal-service is 1600px wide. */
.wide-photo { max-width: 780px; margin-left: auto; margin-right: auto; }
.wide-photo figcaption { text-align: center; }

/* sierra-leone artwork is 568px wide. */
.graphic-panel img { max-width: 280px; margin: 0 auto; }

/* ---------- "what's in the box" carousel ----------
   With no JavaScript the slides are just a vertical list of pictures,
   all readable. The .js guard turns them into a stack that crossfades. */
.boxroll {
  /* 440px keeps every slide inside its real resolution on a Retina
     screen: the smallest source here is 893px wide. */
  max-width: 440px;
  margin: 0 auto var(--s7);
}
.boxroll-track {
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s5);
}
.js .boxroll-track {
  grid-template-areas: "slide";
  gap: 0;
}
.js .boxroll-slide {
  grid-area: slide;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease);
}
.js .boxroll-slide[data-on="true"] {
  opacity: 1;
  visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
  .js .boxroll-slide { transition: none; }
}
.boxroll-slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--cream-deep);
}
.boxroll-label {
  margin: var(--s4) 0 0;
  font-size: 1rem;
  color: var(--muted);
  min-height: 3.2em;
}
.boxroll-label strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 2px;
}

.boxroll-controls {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s4);
  flex-wrap: wrap;
}
.boxroll-arrow,
.boxroll-pause {
  min-width: var(--tap);
  min-height: var(--tap);
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--navy);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1;
  display: grid;
  place-items: center;
}
.boxroll-pause {
  margin-left: auto;
  font-size: .88rem;
  padding: 0 var(--s4);
  letter-spacing: .04em;
}
.boxroll-arrow:hover,
.boxroll-pause:hover { background: var(--cream-deep); color: var(--coral-deep); }

.boxroll-dots { display: flex; gap: var(--s2); align-items: center; }
.boxroll-dots button {
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.boxroll-dots button::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--line);
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.boxroll-dots button[aria-current="true"]::before {
  background: var(--coral-btn);
  transform: scale(1.35);
}
/* The controls are pointless until the script turns this into a carousel. */
.boxroll-controls { display: none; }
.js .boxroll-controls { display: flex; }

.boxroll-note {
  margin: var(--s4) 0 0;
  font-size: .93rem;
  color: var(--muted);
  font-style: italic;
}

/* ---------- split hero: text on the left, a photo (or, for Cameroon,
   a title card) on the right — used by the four "program" pages reached
   from the top nav dropdown ---------- */
.hero--split .hero-split-wrap {
  display: block;
}
@media (min-width: 860px) {
  .hero--split .hero-split-wrap {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: var(--s8);
    align-items: center;
  }
}
.hero-side-photo {
  margin: var(--s6) 0 0;
}
@media (min-width: 860px) {
  .hero-side-photo { margin: 0; }
}
.hero-side-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
}

/* ---------- Home: impact stats combined with a volunteer CTA ----------
   Was two isolated ideas (a stats band, and volunteering only reachable
   via the nav). Now one section: the numbers on the left, a short "how
   to help" pitch with its own steps and button on the right. The outer
   split waits until 1000px so it doesn't fight the stats' own internal
   2-column breakpoint (640px) for space on medium screens. */
.impact-split {
  display: grid;
  gap: var(--s7);
}
@media (min-width: 1000px) {
  .impact-split {
    grid-template-columns: 1fr 1fr;
    gap: var(--s9);
    align-items: start;
  }
  /* Inside this combined section the two stat numbers no longer need to
     span a full-width band, so they hug their own content instead of
     stretching a 1fr/1fr grid across a narrower column. */
  .impact-stats .stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s8);
  }
  .impact-stats .stats > div { flex: 0 0 auto; }
}
.impact-volunteer {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius);
  padding: var(--s6);
}
@media (min-width: 1000px) {
  /* A slight downward offset so the card doesn't sit perfectly
     top-locked against the much taller stat numbers beside it --
     it reads as its own element instead of a rigid grid cell. */
  .impact-volunteer { margin-top: var(--s7); }
}
.impact-volunteer h3 {
  font-size: 1.5rem;
  margin: var(--s2) 0 var(--s3);
}
.impact-volunteer p {
  color: #DCE7EE;
  margin: 0 0 var(--s5);
}
.impact-steps {
  list-style: none;
  counter-reset: impact-step;
  margin: 0 0 var(--s6);
  padding: 0;
  display: grid;
  gap: var(--s3);
}
.impact-steps li {
  counter-increment: impact-step;
  position: relative;
  padding-left: 34px;
  color: #EAF1F5;
  font-size: .97rem;
}
.impact-steps li::before {
  content: counter(impact-step);
  position: absolute;
  left: 0;
  top: -1px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy-deep);
  font-weight: 700;
  font-size: .82rem;
  display: grid;
  place-items: center;
}
.impact-volunteer .btn { max-width: 220px; }