/* ==============================================================
   MALARIA YOUTH CHAMPIONS UGANDA: stylesheet
   1. Design tokens   2. Base   3. Utilities   4. Hero/header
   5. Donate band     6. Intro  7. Mission     8. Stories
   9. Footer         10. Responsive           11. Reduced motion
   ============================================================== */

/* 1. DESIGN TOKENS: change the whole look from here */
:root {
  /* Uganda flag palette, taken from the logo */
  --ink: #1a1a1a;          /* flag black: dark backgrounds */
  --ink-2: #262626;
  --paper: #ffffff;
  --mist: #f3f3f3;         /* light grey section */
  --text: #1f1f1f;
  --muted: #666;           /* 5.7:1 on white: passes WCAG AA */
  --accent: #fcdc04;       /* flag yellow: use on dark backgrounds */
  --red: #d90000;          /* flag red */
  --accent-dark: #c20000;  /* red for text on white (6:1, passes AA) */

  --font-display: "Bebas Neue", "Arial Narrow", Impact, sans-serif;   /* headings */
  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;   /* secondary typeface, site-wide */

  --container: 1120px;
  --gutter: clamp(16px, 4vw, 32px);
  --radius: 2px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* 2. BASE */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; background: #d9d9d9; } /* grey placeholder while photos load */
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; margin: 0 0 .5em; letter-spacing: .01em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1rem; text-transform: uppercase; }
p { margin: 0 0 1em; }

/* Visible keyboard focus everywhere */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* 3. UTILITIES */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: clamp(48px, 7vw, 88px); }
.accent { color: var(--accent); }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.sr-only {   /* hidden but read by screen readers */
  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: 1rem; top: -4rem; z-index: 100;
  background: var(--accent); color: var(--ink); padding: .6rem 1rem; font-weight: 700;
}
.skip-link:focus { top: 1rem; }

/* Scroll-reveal (JS adds .is-visible) */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* 4. HERO / HEADER */
.hero {
  position: relative;
  color: #fff;
  background:
    /* Dark overlay keeps white text readable on the photo (WCAG AA) */
    linear-gradient(180deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.58) 40%, rgba(0,0,0,.85) 100%),
    /* Modern browsers pick WebP, older ones fall back to JPEG */
    image-set(url("../img/hero-1920.webp") type("image/webp"), url("../img/hero-1920.jpg") type("image/jpeg")) center 30% / cover no-repeat,
    var(--ink);
  padding-block: 40px 72px;
}
.hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "brand brand"
    "copy  side";
  gap: 48px;
}
.hero__brand { grid-area: brand; display: flex; flex-direction: column; align-items: center; text-align: center; }

.logo { display: inline-block; }
.logo__badge {
  width: clamp(130px, 16vw, 170px); height: auto; aspect-ratio: 1;
  background: #fff; padding: 6px;
  box-shadow: 0 0 0 4px var(--accent), 0 0 0 8px var(--red), 0 12px 32px rgba(0,0,0,.5);
  transition: transform .3s var(--ease);
}

.nav ul { list-style: none; margin: 0; padding: 0; text-align: center; }
.nav a {
  display: inline-block; padding: 4px 0;
  font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; color: #fff; transition: color .2s;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--accent); }

.nav-toggle { display: none; }

.hero__copy { grid-area: copy; display: flex; align-items: flex-end; justify-content: flex-end; text-align: right; }
.hero__lead { font-size: clamp(1.1rem, 2vw, 1.45rem); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; line-height: 1.4; max-width: 24ch; margin: 0; }

.hero__side { grid-area: side; align-self: end; max-width: 340px; }
.raised-label { color: var(--accent); font-size: 1.1rem; margin: 0; }
.raised-amount { color: var(--accent); font-size: 1.6rem; font-weight: 600; margin: 0 0 12px; }
.progress { height: 6px; background: rgba(255,255,255,.15); overflow: hidden; }
.progress__bar { display: block; height: 100%; width: 0; background: var(--accent); transition: width 1.6s var(--ease); }
.progress.is-filled .progress__bar { width: var(--value); }
.progress__note { font-size: .8rem; color: #bbb; margin: 8px 0 24px; }
.hero__title { font-size: clamp(1.6rem, 3vw, 2.1rem); text-transform: uppercase; margin: 0; }

/* 5. DONATE BAND: solid yellow rectangle button */
.donate-band { background: var(--paper); }
.donate-band__inner { display: flex; justify-content: flex-end; }
.btn--arrow {
  display: inline-block;
  margin-right: calc(-1 * var(--gutter));
  min-width: min(100%, 420px);
  padding: 18px 48px;
  background: var(--accent); color: var(--ink);
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em;
  text-decoration: none;
  /* full rectangle, same shape as the red "More about us" bar */
  transition: filter .2s, transform .2s;
}
.btn--arrow:hover { filter: brightness(1.08); }

/* 6. INTRO: strategy card + programs */
.intro { padding-top: 0; }
.intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: -60px; position: relative; }


.programs { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 28px; align-content: center; padding-top: 80px; }
.program { display: grid; grid-template-columns: 52px 1fr; column-gap: 12px; }
.program__icon { width: 48px; height: 48px; color: #c8c8c8; grid-row: span 2; transition: color .3s, transform .3s; }
.program h3 { margin: 6px 0 4px; }
.program p { font-size: .82rem; color: var(--muted); margin: 0; }
.program:hover .program__icon { color: var(--red); }

/* 7. MISSION + GALLERY */
.mission__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.mission__text h2 { text-transform: uppercase; }
.mission__text h2 .accent { color: var(--accent-dark); }
.mission__footer { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; margin-top: 24px; }
.mission__footer p { font-size: .85rem; margin: 0; }
.report-link {
  font-family: var(--font-display); text-transform: uppercase; text-decoration: none;
  font-size: .9rem; line-height: 1.1;
}
.report-link strong { display: block; font-size: 1.8rem; }
.report-link:hover { color: var(--accent-dark); }

.gallery { overflow: hidden; }
.gallery__track { display: flex; transition: transform .6s var(--ease); }
.gallery__slide { flex: 0 0 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.tile { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tile--label {
  background: var(--ink); color: #fff; display: grid; place-items: center; text-align: center;
  text-transform: uppercase; letter-spacing: .1em; font-size: 1.1rem;
}
.gallery__controls { display: flex; justify-content: flex-end; gap: 4px; margin-top: 8px; }
.arrow {
  width: 36px; height: 36px; border: 1px solid #ccc; background: var(--paper);
  font-size: 1.4rem; line-height: 1; cursor: pointer; transition: background .2s, border-color .2s;
}
.arrow:hover { background: var(--accent); border-color: var(--accent); }

/* 8. SUCCESS STORIES: dark left / light right split background */

/* 9. FOOTER */
.footer { background: var(--ink); color: #cfcfcf; padding-block: 48px; }
.footer .muted { color: #9a9a9a; }
.footer__grid { display: grid; grid-template-columns: 1fr 1.3fr 1.4fr; gap: 40px; }
.footer { position: relative; }
.flag-stripe { /* black, yellow and red, like the flag and the shield */
  position: absolute; top: 0; left: 0; right: 0; height: 9px;
  background: linear-gradient(var(--ink) 0 33.3%, var(--accent) 33.3% 66.6%, var(--red) 66.6%);
}
.footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.footer__brand img { width: 48px; height: 48px; background: none; }
.footer__brand span { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.1; text-transform: uppercase; color: #fff; }
.footer address { font-style: normal; }
.footer__phone { font-family: var(--font-display); font-size: 1.6rem; color: #fff; margin: 8px 0 20px; }
.footer__phone a { text-decoration: none; }


/* 10. RESPONSIVE: tablet then phone */
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; grid-template-areas: "brand" "copy" "side"; gap: 32px; }
  .hero__copy { justify-content: flex-start; text-align: left; }
  .intro__grid, .mission__grid, .footer__grid { grid-template-columns: 1fr; }
  .intro__grid { margin-top: 32px; }
  .programs { padding-top: 0; }
}

@media (max-width: 600px) {
  /* Collapsible mobile menu */
  .hero__brand { position: relative; }
  .nav-toggle {
    display: block; position: absolute; right: 0; top: 0;
    width: 44px; height: 44px; background: none; border: 1px solid #555; cursor: pointer;
  }
  .nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after {
    display: block; width: 20px; height: 2px; background: #fff; margin: auto; position: relative; transition: transform .3s;
  }
  .nav-toggle__bar::before, .nav-toggle__bar::after { content: ""; position: absolute; left: 0; }
  .nav-toggle__bar::before { top: -6px; }
  .nav-toggle__bar::after { top: 6px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { transform: translateY(-6px) rotate(-45deg); }

  .nav { display: none; width: 100%; }
  .nav.is-open { display: block; }
  .nav a { padding: 10px 0; font-size: .85rem; }

  .programs { grid-template-columns: 1fr; }
  .mission__footer { grid-template-columns: 1fr; }
  .btn--arrow { min-width: calc(100% + var(--gutter)); }
}

/* 11. Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Footer brand: keep "Uganda" in flag yellow */
.footer__brand .accent { color: var(--accent); font-size: inherit; }

/* ==============================================================
   12. FOOTER: real organisation details
   Four columns: campaign art | hours | contact | address,
   then a bottom bar with the copyright.
   ============================================================== */
.footer { padding-block: 56px 24px; color: #e8e8e8; }
.footer__grid {
  grid-template-columns: minmax(220px, 1.3fr) 1fr 1fr 1.2fr;
  gap: 40px; align-items: start;
}
.footer__campaign img {
  width: 100%; max-width: 340px; height: auto;
  background: #fff; padding: 8px;
}
.footer__label {
  font-family: var(--font-display); font-size: .85rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 10px;
}
.footer__line { margin: 0 0 6px; line-height: 1.6; }
.footer__key { color: #a9a9a9; }
.footer__line a { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s, color .2s; }
.footer__line a:hover { color: var(--accent); border-color: var(--accent); }

.hours { margin: 0; }
.hours div { display: flex; justify-content: space-between; gap: 16px; max-width: 220px; padding: 4px 0; border-bottom: 1px dashed #3a3a3a; }
.hours dt { color: #a9a9a9; }
.hours dd { margin: 0; }

.footer__bottom {
  display: block;
  margin-top: 48px; padding-top: 24px; border-top: 1px solid #333;
}
.footer__copy {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: .8rem; color: #9a9a9a; margin: 8px 0 0;
}
.footer__copy img { width: 24px; height: 24px; background: none; }

@media (max-width: 1000px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer__campaign img { max-width: 100%; }
    .footer__copy { justify-content: flex-start; text-align: left; }
}

/* ==============================================================
   13. TYPOGRAPHY: sizes and weights for headings and display text
   (the heading typeface itself is set in --font-display)
   ============================================================== */
.btn--arrow, .report-link, .footer__label,
.footer__brand span, .footer__phone { font-weight: 600; letter-spacing: .06em; }
.report-link strong { font-weight: 700; }
.hero__title { font-size: clamp(1.9rem, 3.4vw, 2.5rem); letter-spacing: .02em; }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.05rem; letter-spacing: .04em; }

/* ==============================================================
   14. FOOTER: pitch black
   ============================================================== */
.footer { background: #000; }
.footer__bottom { border-top-color: #262626; }
.hours div { border-bottom-color: #2a2a2a; }

/* ==============================================================
   15. NAV DROPDOWN: "About us" › "Our team"
   The submenu opens below its parent, inside the vertical menu.
   JS toggles .is-open; on mouse devices hovering also opens it.
   ============================================================== */
.has-sub { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.sub-toggle {
  width: 28px; height: 28px; margin-left: 2px; padding: 0;
  display: inline-grid; place-items: center;
  background: none; border: 0; color: #fff; cursor: pointer;
}
.sub-toggle svg { width: 10px; height: 10px; transition: transform .25s var(--ease); }
.sub-toggle:hover { color: var(--accent); }
.submenu {
  flex-basis: 100%;
  display: none; list-style: none; margin: 2px 0 6px; padding: 6px 0;
  border-top: 1px solid rgba(252,220,4,.35); border-bottom: 1px solid rgba(252,220,4,.35);
}
.submenu a { color: var(--accent); font-size: .72rem; }
.submenu a:hover { color: #fff; }
.has-sub.is-open .submenu { display: block; }
.has-sub.is-open .sub-toggle svg { transform: rotate(180deg); }
@media (hover: hover) and (min-width: 601px) {
  .has-sub:hover .submenu { display: block; }
  .has-sub:hover .sub-toggle svg { transform: rotate(180deg); }
}
@media (max-width: 600px) {
  .sub-toggle { width: 44px; height: 44px; }       /* bigger touch target on phones */
  .submenu a { font-size: .85rem; padding: 10px 0; }
}

/* ==============================================================
   16. TEAM + BLOG SECTIONS
   ============================================================== */
.team h2 .accent, .blog h2 .accent { color: var(--accent-dark); }
.team h2, .blog h2 { text-transform: uppercase; }
.section__intro { color: var(--muted); max-width: 60ch; margin-bottom: 32px; }

/* (Team page styles: see section 45) */

.blog__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; margin-top: 24px; }
.post { background: var(--paper); border: 1px solid #e6e6e6; display: flex; flex-direction: column; transition: box-shadow .3s; }
.post:hover { box-shadow: 0 12px 28px rgba(0,0,0,.1); }
.post img { width: 100%; aspect-ratio: 60 / 38; object-fit: cover; }
.post__body { padding: 20px; }
.post__meta { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.post h3 { font-size: 1.2rem; text-transform: none; letter-spacing: 0; margin-bottom: 8px; }
.post h3 a { text-decoration: none; }
.post h3 a:hover { color: var(--accent-dark); }
.post p:last-child { margin: 0; font-size: .92rem; color: #444; }

/* ==============================================================
   17. HERO PHOTO: smaller file on phones and tablets
   ============================================================== */
@media (max-width: 960px) {
  .hero {
    background:
      linear-gradient(180deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.6) 45%, rgba(0,0,0,.88) 100%),
      image-set(url("../img/hero-960.webp") type("image/webp"), url("../img/hero-960.jpg") type("image/jpeg")) center 30% / cover no-repeat,
      var(--ink);
  }
}
/* Soft shadow under hero text so it stays crisp over busy parts of the photo */
.hero__lead, .hero__title, .raised-label, .raised-amount, .nav a { text-shadow: 0 2px 12px rgba(0,0,0,.6); }

/* ==============================================================
   18. INNER PAGE HEADER (team.html, blog.html)
   Same photo and menu as the home hero, but shorter, with a
   breadcrumb and page title instead of the stats.
   ============================================================== */
.hero--page { padding-block: 32px 56px; }
.hero--page .hero__inner { grid-template-columns: 1fr; grid-template-areas: "brand" "text"; gap: 24px; }
.hero--page .logo__badge { width: clamp(100px, 11vw, 124px); }
.page-hero__text { grid-area: text; text-align: center; max-width: 720px; margin-inline: auto; }
.breadcrumb { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: #cfcfcf; margin-bottom: 8px; }
.breadcrumb a { color: var(--accent); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.page-hero__title { font-size: clamp(2.4rem, 6vw, 3.6rem); text-transform: uppercase; margin: 0 0 8px; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.page-hero__lead { color: #e6e6e6; margin: 0; text-shadow: 0 2px 12px rgba(0,0,0,.6); }

/* 19. SITE HEADER: replaced by the two-tier masthead (section 46) */
/* Sticky header: stop anchors from hiding section titles underneath it */
[id] { scroll-margin-top: 112px; }

/* ==============================================================
   20. HERO: split layout (home page)
   Left: big photo | Right: smaller photo above a white text panel
   ============================================================== */
.hero-split {
  display: grid; grid-template-columns: 1.9fr 1fr;
  height: clamp(520px, calc(100vh - 76px), 820px);
  background: var(--paper);
}
.hero-split__main, .hero-split__side, .hero-split__photo { min-height: 0; }
.hero-split img { width: 100%; height: 100%; object-fit: cover; }
.hero-split__main img { object-position: 35% 40%; }
.hero-split__side { display: grid; grid-template-rows: 38% 1fr; }
.hero-split__photo { display: block; }
.hero-split__panel {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 64px);
}
.hero-split__panel h1 {
  font-size: clamp(2rem, 3.4vw, 3.4rem); line-height: 1.05; text-transform: uppercase;
  color: var(--ink); margin: 0 0 20px;
}
.hero-split__panel h1 abbr { text-decoration: none; cursor: help; }
.hero-split__panel p { color: var(--muted); font-size: .95rem; line-height: 1.6; max-width: 46ch; margin: 0; }

@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; height: auto; }
  .hero-split__main { aspect-ratio: 16 / 10; }
  .hero-split__side { grid-template-rows: auto auto; }
  .hero-split__photo { aspect-ratio: 1148 / 551; }
}

/* Inner pages: the banner now only holds the title (logo/menu moved to the top bar) */
.hero--page .hero__inner { grid-template-areas: "text"; }
.hero--page { padding-block: 64px; }

/* ==============================================================
   21. HEADER LOGO: shield + name
   The shield's black border would vanish on the black bar, so a
   1px white outline is added with stacked drop-shadows.
   ============================================================== */
.logo__shield {
  width: auto; height: 56px; background: none;
  filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
  transition: transform .3s var(--ease);
}
.logo__name {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: 1.05rem; line-height: 1.05; letter-spacing: .04em; max-width: 13ch;
}
.logo__name .accent { color: var(--accent); }
@media (max-width: 760px) and (min-width: 601px) {
  .logo__name { display: none; }                 /* tablets: make room for the menu */
}
@media (max-width: 600px) {
  .logo__shield { height: 48px; }
  .logo__name { font-size: .95rem; }
}

/* ==============================================================
   22. HERO SLIDER (right column of the home hero)
   All slides sit in the same grid cell, stacked on top of each
   other, so the column is always as tall as the tallest slide.
   Only the active one is visible: it fades in while gliding up.
   ============================================================== */
.hero-slider { display: block; position: relative; overflow: hidden; background: var(--paper); }
.hero-slider__track { display: grid; grid-template-columns: minmax(0, 1fr); height: 100%; }  /* minmax(0,1fr): wrap text to the column instead of stretching it */
.hero-slide {
  grid-area: 1 / 1;
  display: grid; grid-template-rows: 38% 1fr; min-height: 0;
  opacity: 0; visibility: hidden; transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease), visibility 0s linear .8s;
}
.hero-slide.is-active {
  opacity: 1; visibility: visible; transform: none; z-index: 1;
  transition: opacity .8s var(--ease), transform .8s var(--ease), visibility 0s;
}
.hero-slide picture { display: block; min-height: 0; }
.hero-slide__photo { width: 100%; height: 100%; object-fit: cover; }
.hero-slide__title {
  font-size: clamp(2rem, 3.4vw, 3.4rem); line-height: 1.05; text-transform: uppercase;
  color: var(--ink); margin: 0 0 20px;
}
.hero-slide__title abbr { text-decoration: none; cursor: help; }
.hero-slide .hero-split__panel { padding-bottom: 72px; }   /* room for the controls */

/* Controls: pause/play + dots, bottom-left of the white panel */
.hero-slider__controls {
  position: absolute; z-index: 2; bottom: 24px; left: clamp(24px, 4vw, 64px);
  display: flex; align-items: center; gap: 14px;
}
.hero-slider__pause {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid #cfcfcf; background: var(--paper); color: var(--ink); cursor: pointer;
}
.hero-slider__pause svg { width: 12px; height: 12px; fill: currentColor; }
.hero-slider__pause .i-play { display: none; }
.hero-slider__pause[aria-pressed="true"] .i-play { display: inline; }
.hero-slider__pause[aria-pressed="true"] .i-pause { display: none; }
.hero-slider__pause:hover { border-color: var(--ink); }
.hero-slider__dots { display: flex; gap: 8px; }
.hero-slider__dots button {
  width: 28px; height: 4px; padding: 0; border: 0; background: #cfcfcf; cursor: pointer;
  transition: background .3s, width .3s;
}
.hero-slider__dots button[aria-current="true"] { background: var(--ink); width: 44px; }
/* Bigger tap area without changing the look */
.hero-slider__dots button { position: relative; }
.hero-slider__dots button::after { content: ""; position: absolute; inset: -12px -2px; }

@media (max-width: 900px) {
  .hero-slider__track { height: auto; }
  .hero-slide { grid-template-rows: auto auto; }
  .hero-slide picture, .hero-slide > .hero-slide__photo { aspect-ratio: 1148 / 551; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transform: none; }
}

/* Slider photos: keep faces in frame when the photo strip is cropped */
.slide-photo--youth   { object-position: 50% 35%; }
.slide-photo--launch  { object-position: 50% 45%; }
.slide-photo--meeting { object-position: 50% 50%; }
@media (max-width: 900px) {
  .hero-slide picture { aspect-ratio: 16 / 9; }   /* a bit taller on phones so faces aren't cut */
}
/* Each slide's own grid must also shrink to the column, or long text pushes past the edge on phones */
.hero-slide { grid-template-columns: minmax(0, 1fr); }

/* ==============================================================
   23. OUR STRATEGY CARD: replaces "Become a youth champion"
   Same card layout (photo | text, bar along the bottom) in the
   MYCUG strategy colours: gold panel, red label, white heading,
   serif text and a red button bar.
   ============================================================== */
:root {
  --gold: #e0a541;
  --red-cta: #d33c33;
  --font-serif: var(--font-body);
}
.strategy-card {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--gold); box-shadow: 0 10px 40px rgba(0,0,0,.12);
}
.strategy-card__photo { display: block; min-height: 0; }
.strategy-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.strategy-card__body { padding: 24px; }
.strategy__eyebrow {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; font-size: 1rem; color: var(--red-cta); margin: 0 0 2px;
}
.strategy__title {
  font-size: clamp(1.5rem, 2.2vw, 1.9rem); line-height: 1.05; text-transform: uppercase;
  color: #fff; margin: 0 0 14px;
}
.strategy__text { font-family: var(--font-serif); font-size: .95rem; line-height: 1.5; color: #1a1a1a; margin: 0; }
.strategy-card__cta {
  grid-column: 1 / -1; position: relative;
  background: var(--red-cta); color: #fff; text-align: center; padding: 14px;
  font-family: var(--font-display); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  transition: background .2s;
}
/* Solid red bar: no notch on the right edge */
.strategy-card__cta:hover { background: #b52d25; }
.strategy-card__cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (max-width: 600px) {
  .strategy-card { grid-template-columns: 1fr; }
  .strategy-card__photo { aspect-ratio: 4 / 3; }
}

/* ==============================================================
   24. STRATEGY CARD: flush with the hero, bleeding to the left edge
   --edge = distance from the screen edge to the page container.
   ============================================================== */
:root { --edge: max(var(--gutter), calc((100vw - var(--container)) / 2)); }

@media (min-width: 901px) {
  /* The donate band takes no vertical space: its button floats over the
     top-right of the next section, so the card can touch the hero. */
  .donate-band { height: 0; position: relative; z-index: 3; }
  .donate-band__inner { position: relative; }
  .donate-band .btn--arrow { position: absolute; top: 0; right: calc(-1 * var(--gutter)); margin: 0; }

  .intro__grid { margin-top: 0; }
  .strategy-card {
    margin-left: calc(-1 * var(--edge));        /* stretch out to the screen's left edge */
    box-shadow: 0 10px 40px rgba(0,0,0,.12);
  }
  .programs { padding-top: 110px; }             /* clear the yellow button above */
}

@media (max-width: 900px) {
  .intro__grid { margin-top: 0; }
  .intro { padding-top: 0; }
  .strategy-card { margin-inline: calc(-1 * var(--gutter)); box-shadow: none; }  /* full width on phones */
}
@media (max-width: 900px) {
  .donate-band__inner { display: block; }
  .donate-band .btn--arrow { display: block; min-width: 0; margin-inline: calc(-1 * var(--gutter)); text-align: left; padding-inline: var(--gutter); }
}

/* ==============================================================
   25. STRATEGY CARD: balanced margins + taller, roomier layout
   The yellow button sticks out --gutter past the container on the
   right, so the card sticks out by the same amount on the left:
   the white space on both sides is always identical.
   ============================================================== */
@media (min-width: 901px) {
  .intro__grid { grid-template-columns: 1.15fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
  .strategy-card {
    margin-left: calc(-1 * var(--gutter));          /* mirrors .btn--arrow { right: -gutter } */
    grid-template-columns: 1fr 1.05fr;
    grid-template-rows: 1fr auto;
    min-height: clamp(560px, 46vw, 700px);
    box-shadow: 0 24px 60px -20px rgba(0,0,0,.28);
  }
  .strategy-card__photo img { object-position: 50% 30%; }
  .strategy-card__body {
    display: flex; flex-direction: column; justify-content: center;
    padding: clamp(32px, 3.6vw, 64px) clamp(28px, 3.2vw, 56px);
  }
  .strategy__eyebrow { font-size: clamp(1rem, 1.3vw, 1.25rem); margin-bottom: 8px; }
  .strategy__title  { font-size: clamp(1.9rem, 2.9vw, 3rem); line-height: 1.02; margin-bottom: clamp(16px, 1.8vw, 28px); }
  .strategy__text   { font-size: clamp(1rem, 1.15vw, 1.2rem); line-height: 1.6; }
  .strategy-card__cta { padding: 22px; font-size: clamp(1rem, 1.2vw, 1.2rem); letter-spacing: .08em; }

  /* Projects: 2×2 grid, vertically centred against the taller card */
  .programs { padding-top: 96px; gap: clamp(32px, 3.5vw, 48px) clamp(24px, 2.5vw, 40px); }
  .program h3 { font-size: 1.1rem; }
  .program p { font-size: .92rem; }
}
/* Bottom breathing room before the mission section */
.intro { padding-bottom: clamp(56px, 8vw, 112px); }

/* 25b. Proportions: wider card, projects as one tidy column beside it */
@media (min-width: 901px) {
  .intro__grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(40px, 4.5vw, 72px); }
  .strategy-card { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); min-height: clamp(540px, 42vw, 640px); }
  .strategy__title { font-size: clamp(1.9rem, 2.5vw, 2.6rem); }
  .strategy__text  { font-size: clamp(1rem, 1.1vw, 1.12rem); }
  .programs { grid-template-columns: 1fr; padding-top: 88px; gap: clamp(24px, 2.6vw, 36px); align-self: center; }
  .program { padding-bottom: clamp(24px, 2.6vw, 36px); border-bottom: 1px solid #ececec; }
  .program:last-child { border-bottom: 0; padding-bottom: 0; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .strategy__body, .strategy-card__body { padding: 28px 24px; }
  .strategy__title { font-size: 1.75rem; }
}
@media (min-width: 901px) {
  .strategy-card { align-self: start; }                       /* always touches the hero */
  .strategy__title { font-size: clamp(1.9rem, 2.3vw, 2.35rem); }
}

/* ==============================================================
   26. SHAPE RULE: everything on the site is rectangular.
   Square corners everywhere; no circles, notches or tilted shapes.
   ============================================================== */
*, *::before, *::after { border-radius: 0; }

/* ==============================================================
   27. TIGHTER, STILL-BALANCED SIDE SPACE
   --side = white space between the screen edge and the card (left)
   and between the screen edge and "Fund a bed net" (right).
   ============================================================== */
:root { --side: clamp(16px, 2vw, 40px); }
@media (min-width: 901px) {
  .strategy-card { margin-left: calc(var(--side) - var(--edge)); }
  .donate-band .btn--arrow { right: calc(var(--side) - var(--edge)); }
}

/* ==============================================================
   28. HEADINGS: Bebas Neue
   Bebas Neue is an all-caps face with a single weight, so stop the
   browser from faking a heavier "bold" version of it, and give the
   letters a touch more room.
   ============================================================== */
html { font-synthesis-weight: none; }
h1, h2, h3, .strategy__eyebrow, .btn--arrow, .strategy-card__cta, .report-link,
.footer__label, .logo__name, .tile--label, .hero-slide__title {
  font-weight: 400; letter-spacing: .03em;
}
/* Bebas Neue sits smaller than Oswald at the same size: scale display text up */
h3 { font-size: 1.3rem; }
.program h3 { font-size: 1.35rem; }
.post h3 { font-size: 1.5rem; }
.btn--arrow { font-size: 1.35rem; }
.strategy-card__cta { font-size: clamp(1.25rem, 1.5vw, 1.5rem); }
.strategy__eyebrow { font-size: clamp(1.2rem, 1.6vw, 1.55rem); }
.footer__label { font-size: 1.15rem; }
.report-link { font-size: 1.1rem; }
.report-link strong { font-size: 2.3rem; }
.logo__name { font-size: 1.3rem; line-height: 1; }
@media (min-width: 901px) {
  .strategy__title { font-size: clamp(2.3rem, 3vw, 3rem); }
}
@media (max-width: 600px) {
  .logo__name { font-size: 1.15rem; }
}

/* ==============================================================
   29. HEAVIER MAIN HEADINGS
   Bebas Neue ships in one weight only. A thin outline in the text's
   own colour thickens every stroke evenly (scales with font size).
   Applied to the big headings only, not small labels or buttons.
   ============================================================== */
h1, h2, .hero-slide__title, .strategy__title, .page-hero__title {
  -webkit-text-stroke: .028em currentColor;
  paint-order: stroke fill;
  letter-spacing: .045em;            /* a little extra room so thicker letters don't touch */
}
/* "Our mission:" keeps its red outline too (it's a span inside the heading) */
h2 .accent { -webkit-text-stroke-color: currentColor; }

/* ==============================================================
   30. OBJECTIVES: three items, all visible, under "Fund a bed net"
   No frame or shading: icon, heading and text on white, separated by
   thin rules, sized to sit alongside the strategy card.
   ============================================================== */
.obj-list { display: flex; flex-direction: column; justify-content: center; }
.obj-card {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 20px;
  padding-block: clamp(18px, 2.2vw, 30px);
  border-bottom: 1px solid #e6e6e6;
}
.obj-card:first-of-type { padding-top: 0; }
.obj-card:last-of-type { border-bottom: 0; padding-bottom: 0; }
.obj-card__icon { grid-row: span 2; width: 48px; height: 40px; fill: var(--ink); margin-top: 2px; }
.obj-card__icon--gold { fill: var(--gold); }
.obj-card h3 {
  font-size: clamp(1.45rem, 1.9vw, 1.9rem); line-height: 1.05; margin: 0 0 8px; color: var(--ink);
  letter-spacing: .03em; -webkit-text-stroke: .02em currentColor; paint-order: stroke fill;
}
.obj-card h3 abbr { text-decoration: none; }
.obj-card p { font-size: clamp(.98rem, 1.05vw, 1.08rem); line-height: 1.6; color: #555; margin: 0; }
@media (min-width: 901px) { .obj-list { padding-top: 104px; } }      /* clears the yellow button */
@media (max-width: 900px) { .obj-list { padding-block: 40px 8px; } }
@media (max-width: 420px) {
  .obj-card { grid-template-columns: 1fr; }
  .obj-card__icon { grid-row: auto; margin-bottom: 12px; }
}
/* Fit: tighter rhythm, and the strategy card stretches so both columns end level */
@media (min-width: 901px) {
  .obj-list { padding-top: 92px; }
  .obj-card { padding-block: clamp(14px, 1.5vw, 22px); }
  .obj-card h3 { font-size: clamp(1.35rem, 1.6vw, 1.65rem); margin-bottom: 6px; }
  .obj-card p { font-size: clamp(.95rem, .95vw, 1.02rem); line-height: 1.55; }
  .intro__grid { align-items: stretch; }
  .strategy-card { align-self: stretch; }
}

/* "Fund a bed net" button removed: objectives no longer need to clear it */
@media (min-width: 901px) { .obj-list { padding-top: clamp(32px, 4vw, 56px); } }

/* ==============================================================
   32. OBJECTIVES: hover motion
   On hover: the item lifts onto a warm panel, a gold bar grows down
   its left edge, the icon rises and turns red, the heading slides in
   with a red underline drawing across, and the other items fade back.
   ============================================================== */
@media (hover: hover) and (min-width: 421px) {
  .obj-card {
    position: relative; isolation: isolate;
    padding-inline: 16px; margin-inline: -16px;               /* room for the panel without shifting layout */
    transition: opacity .35s var(--ease), transform .35s var(--ease);
  }
  .obj-card::before {                                           /* warm panel */
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: #fdf6e7; opacity: 0; transition: opacity .35s var(--ease);
  }
  .obj-card::after {                                            /* gold bar on the left edge */
    content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 100%;
    background: var(--gold); transform: scaleY(0); transform-origin: top;
    transition: transform .45s var(--ease);
  }
  .obj-card__icon { transition: transform .4s var(--ease), fill .3s; }
  .obj-card h3 {
    display: inline;                                            /* underline hugs the words */
    background: linear-gradient(var(--red-cta), var(--red-cta)) 0 100% / 0 3px no-repeat;
    transition: background-size .45s var(--ease), color .3s;
  }
  .obj-card .obj-card__text { transition: transform .4s var(--ease); }
  .obj-card h3 + p { margin-top: 8px; }

  /* the hovered item */
  .obj-card:hover { transform: translateX(6px); }
  .obj-card:hover::before { opacity: 1; }
  .obj-card:hover::after { transform: scaleY(1); }
  .obj-card:hover .obj-card__icon { transform: translateY(-4px) scale(1.12); fill: var(--red-cta); }
  .obj-card:hover h3 { background-size: 100% 3px; }

  /* the others step back */
  .obj-list:hover .obj-card:not(:hover) { opacity: .45; }
}
@media (prefers-reduced-motion: reduce) {
  .obj-card, .obj-card:hover, .obj-card:hover .obj-card__icon { transform: none !important; }
}
.obj-card__text { min-width: 0; }
.obj-card__icon { grid-row: auto; }


/* ==============================================================
   33. THE MOVEMENT: youthful black band in brand colours
   One-line statement with a yellow highlight
   that sweeps in · big video with a gold offset block · short copy.
   ============================================================== */
.movement { background: #000; color: #fff; overflow: hidden; }

/* Headline */
.movement__inner { padding-block: clamp(40px, 5vw, 72px) clamp(48px, 6vw, 88px); container-type: inline-size; }
.movement__eyebrow {
  display: inline-block; margin: 0 0 10px; padding: 6px 12px; background: var(--red-cta); color: #fff;
  font-family: var(--font-display); font-size: clamp(1rem, 1.3vw, 1.25rem); letter-spacing: .1em; text-transform: uppercase;
}
.movement__title {
  margin: 0 0 clamp(28px, 3.4vw, 48px); color: #fff; white-space: nowrap;
  font-size: min(7.2rem, 9.4cqi); line-height: .95; letter-spacing: .02em;
}
.movement__title mark {
  color: #000; background: linear-gradient(var(--accent), var(--accent)) 0 50% / 0% 100% no-repeat;
  padding: 0 .12em; -webkit-text-stroke-color: #000;
  transition: background-size .9s var(--ease) .2s, color .3s .2s;
  color: #fff; -webkit-text-stroke-color: #fff;
}
.movement.is-in .movement__title mark { background-size: 100% 100%; color: #000; -webkit-text-stroke-color: #000; }

/* Grid: video | copy */
.movement__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(32px, 4.5vw, 72px); align-items: center; }

/* Video with gold offset block */
.movement__video { position: relative; aspect-ratio: 16 / 10; }
.movement__video::before {
  content: ""; position: absolute; inset: 0; translate: 18px 18px; background: var(--gold); z-index: 0;
  transition: translate .4s var(--ease);
}
.movement__video:hover::before { translate: 26px 26px; }
.movement__video iframe { position: relative; z-index: 1; width: 100%; height: 100%; border: 0; display: block; background: #000; }
.movement__play { position: relative; z-index: 1; display: block; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; overflow: hidden; background: #000; }
.movement__play picture, .movement__play img { display: block; width: 100%; height: 100%; }
.movement__play img { object-fit: cover; object-position: 50% 30%; filter: brightness(.85); transition: transform .7s var(--ease), filter .4s; }
.movement__play-icon {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: clamp(72px, 7vw, 104px); aspect-ratio: 1; display: grid; place-items: center;
  background: var(--red-cta); color: #fff; box-shadow: 0 0 0 0 rgba(211,60,51,.6);
  animation: pulse 2.2s var(--ease) infinite; transition: background .25s, scale .3s var(--ease);
}
.movement__play-icon svg { width: 40%; height: 40%; fill: currentColor; margin-left: 6%; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(211,60,51,.55); } 70%,100% { box-shadow: 0 0 0 22px rgba(211,60,51,0); } }
.movement__play-label {
  position: absolute; left: 0; bottom: 0; padding: 12px 18px; background: var(--accent); color: #000;
  font-family: var(--font-display); font-size: clamp(1.1rem, 1.4vw, 1.35rem); letter-spacing: .08em; text-transform: uppercase;
}
.movement__play:hover img { transform: scale(1.05); filter: brightness(.7); }
.movement__play:hover .movement__play-icon { scale: 1.08; background: #b52d25; }
.movement__play:focus-visible { outline: 4px solid var(--accent); outline-offset: 4px; }

/* Copy */
.movement__copy { container-type: inline-size; }
.movement__subtitle {
  margin: 0 0 18px; color: var(--accent); white-space: nowrap;
  font-size: min(2.4rem, 7.6cqi); line-height: 1; letter-spacing: .03em; text-transform: uppercase;
}
.movement__lead { font-size: clamp(1.1rem, 1.4vw, 1.35rem); line-height: 1.5; margin: 0 0 18px; color: #f2f2f2; }
.movement__more { margin: 0 0 28px; border-top: 1px solid #333; border-bottom: 1px solid #333; }
.movement__more summary {
  list-style: none; cursor: pointer; padding: 14px 0; display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-display); font-size: 1.25rem; letter-spacing: .08em; text-transform: uppercase; color: #fff;
}
.movement__more summary::-webkit-details-marker { display: none; }
.movement__more summary::after { content: "+"; font-size: 1.6rem; color: var(--accent); transition: transform .3s var(--ease); }
.movement__more[open] summary::after { transform: rotate(45deg); }
.movement__more summary:hover { color: var(--accent); }
.movement__more summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.movement__more p { margin: 0 0 14px; color: #cfcfcf; font-size: 1rem; line-height: 1.6; }

.movement__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.movement__btn {
  display: inline-flex; align-items: center; gap: 14px; padding: 18px 30px; text-decoration: none;
  font-family: var(--font-display); font-size: clamp(1.2rem, 1.45vw, 1.45rem); letter-spacing: .08em; text-transform: uppercase;
  transition: background .25s, color .25s, transform .25s var(--ease), box-shadow .25s;
}
.movement__btn svg { width: 22px; height: 22px; fill: currentColor; transition: transform .3s var(--ease); }
.movement__btn--gold { background: var(--gold); color: #000; box-shadow: 6px 6px 0 var(--red-cta); }
.movement__btn--gold:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--red-cta); }
.movement__btn--gold:hover svg { transform: translateY(3px); }
.movement__btn:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.movement__social { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; gap: 10px; }
.movement__social a { width: 52px; height: 52px; display: grid; place-items: center; border: 2px solid #fff; color: #fff; transition: background .25s, color .25s, border-color .25s; }
.movement__social a:hover { background: var(--accent); border-color: var(--accent); color: #000; }
.movement__social a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.movement__social svg { width: 22px; height: 22px; fill: currentColor; }

@media (max-width: 900px) {
  .movement__grid { grid-template-columns: 1fr; }
  .movement__video { margin-right: 18px; }
}
@media (max-width: 480px) {
  .movement__actions { gap: 16px; }
  .movement__btn { flex: 1 1 100%; justify-content: center; }
  .movement__social { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .movement__play-icon { animation: none; }
  .movement__title mark { transition: none; }
}
/* 33b. fit + compact */
.movement__subtitle { font-size: min(2.1rem, 6.1cqi); }
.movement__title { font-size: min(5.6rem, 8.2cqi); margin-bottom: clamp(22px, 2.6vw, 36px); }
.movement__inner { padding-block: clamp(32px, 3.6vw, 52px) clamp(44px, 4.6vw, 68px); }
.movement__video { aspect-ratio: 16 / 9; }
.movement__lead { font-size: clamp(1.05rem, 1.25vw, 1.2rem); margin-bottom: 14px; }
.movement__more { margin-bottom: 22px; }
.movement__more summary { padding: 11px 0; }
.movement__btn { padding: 15px 26px; }

/* ==============================================================
   34. KEY THEMATIC AREAS: white canvas
   Four light cards with gold line icons, then the gold "cause" panel
   with the collage. Hover: card lifts, gold bar grows, icon turns red.
   ============================================================== */
.themes { background: #fff; padding-block: clamp(56px, 6vw, 96px); }
.themes .container { container-type: inline-size; }
.themes__eyebrow {
  margin: 0; color: var(--gold); font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 2rem); letter-spacing: .06em; text-transform: uppercase; line-height: 1;
}
.themes__title { margin: 0 0 clamp(24px, 3vw, 40px); color: var(--ink); font-size: min(6rem, 9cqi); line-height: .95; white-space: nowrap; }

.themes__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.theme-card {
  position: relative; background: #f6f4ef; padding: clamp(28px, 3vw, 44px) clamp(22px, 2.4vw, 36px) clamp(40px, 4vw, 64px);
  min-height: clamp(220px, 20vw, 300px);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s;
}
.theme-card::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 5px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.theme-card__icon { width: clamp(52px, 4.6vw, 72px); height: auto; fill: var(--gold); margin-bottom: clamp(22px, 2.4vw, 34px); transition: fill .3s, transform .4s var(--ease); }
.theme-card h3 { margin: 0; color: var(--ink); font-size: clamp(1.45rem, 1.9vw, 2rem); line-height: 1.05; letter-spacing: .03em; }
@media (hover: hover) {
  .theme-card:hover { transform: translateY(-6px); background: #fff; box-shadow: 0 18px 40px -18px rgba(0,0,0,.28); }
  .theme-card:hover::after { transform: scaleX(1); }
  .theme-card:hover .theme-card__icon { fill: var(--red-cta); transform: translateY(-3px); }
}

/* Cause panel: gold copy | collage */
.cause { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); margin-top: clamp(24px, 3vw, 40px); background: var(--gold); }
.cause__body { padding: clamp(32px, 4vw, 64px); display: flex; flex-direction: column; justify-content: center; container-type: inline-size; }
.cause__eyebrow { margin: 0 0 6px; color: var(--red-cta); font-family: var(--font-display); font-size: clamp(1.2rem, 1.6vw, 1.6rem); letter-spacing: .06em; text-transform: uppercase; }
.cause__title { margin: 0 0 20px; color: #fff; font-size: min(4.4rem, 11cqi); line-height: 1; letter-spacing: .03em; -webkit-text-stroke: .028em currentColor; paint-order: stroke fill; }
.cause__text { margin: 0 0 28px; color: #1a1a1a; font-size: clamp(1.05rem, 1.3vw, 1.3rem); line-height: 1.55; max-width: 58ch; }
.cause__btn {
  align-self: flex-start; display: inline-block; background: var(--red-cta); color: #fff; text-decoration: none;
  font-family: var(--font-display); font-size: clamp(1.25rem, 1.6vw, 1.6rem); letter-spacing: .08em; text-transform: uppercase;
  padding: 18px clamp(36px, 4vw, 72px); transition: background .25s, transform .25s var(--ease), box-shadow .25s;
}
.cause__btn:hover { background: #b52d25; transform: translate(-3px, -3px); box-shadow: 6px 6px 0 #000; }
.cause__btn:focus-visible { outline: 3px solid #000; outline-offset: 3px; }
.cause__art { display: block; min-height: 0; background: #000; }
.cause__art img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1024px) { .themes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .cause { grid-template-columns: 1fr; }
  .cause__art { aspect-ratio: 847 / 739; }
}
@media (max-width: 480px) {
  .themes__grid { grid-template-columns: 1fr; }
  .theme-card { min-height: 0; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 18px; padding: 22px; }
  .theme-card__icon { margin: 0; width: 48px; }
  .cause__btn { align-self: stretch; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .theme-card, .theme-card__icon, .cause__btn { transform: none !important; } }
.theme-card h3 { font-size: clamp(1.7rem, 2.3vw, 2.5rem); line-height: 1; -webkit-text-stroke: .025em currentColor; paint-order: stroke fill; }
@media (max-width: 480px) { .theme-card h3 { font-size: 1.5rem; } }

.movement__play img { object-position: 50% 40%; }   /* keep the smiling faces in frame */

/* Cause collage: transparent tiles float on the gold panel */
.cause__art { background: var(--gold); padding: clamp(16px, 2vw, 28px); display: flex; align-items: center; }
.cause__art img { width: 100%; height: auto; object-fit: contain; }
@media (max-width: 900px) { .cause__art { aspect-ratio: auto; padding-top: 0; } }
.cause__art img { background: transparent; }   /* let the gold show through the gaps */
@media (min-width: 901px) { .cause { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } .cause__art { padding: clamp(14px, 1.6vw, 24px) clamp(14px, 1.6vw, 24px) clamp(14px, 1.6vw, 24px) 0; } }

/* ==============================================================
   35. THEMATIC AREAS: compact + youthful refresh
   ============================================================== */
.themes { padding-block: clamp(40px, 4.6vw, 72px); }
.themes__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; margin-bottom: clamp(20px, 2.4vw, 32px); }
.themes__title { font-size: min(4.6rem, 7.2cqi); margin: 0; }
.themes__intro { margin: 0 0 6px; max-width: 34ch; color: #555; font-size: clamp(1rem, 1.15vw, 1.15rem); line-height: 1.5; }

.theme-card {
  min-height: 0; padding: clamp(20px, 2vw, 28px); overflow: hidden;
  display: flex; flex-direction: column; gap: clamp(16px, 1.8vw, 24px);
  transition: background .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.theme-card::after { height: 0; }                     /* replaced by the colour-block hover */
.theme-card__tile {
  width: clamp(54px, 4.4vw, 66px); aspect-ratio: 1; display: grid; place-items: center;
  transition: transform .4s var(--ease), background .3s;
}
.theme-card__tile .theme-card__icon { width: 56%; height: auto; margin: 0; fill: #fff; transition: fill .3s; }
.theme-card--1 .theme-card__tile { background: var(--gold); }
.theme-card--2 .theme-card__tile { background: var(--red-cta); }
.theme-card--3 .theme-card__tile { background: #000; }
.theme-card--4 .theme-card__tile { background: var(--accent); }
.theme-card--4 .theme-card__tile .theme-card__icon { fill: #000; }

.theme-card__num {
  position: absolute; top: clamp(8px, 1vw, 14px); right: clamp(14px, 1.4vw, 20px);
  font-family: var(--font-display); font-size: clamp(3.4rem, 4.6vw, 5rem); line-height: 1; letter-spacing: .02em;
  color: transparent; -webkit-text-stroke: 1.5px #cfc9bb; transition: -webkit-text-stroke-color .3s, color .3s, transform .4s var(--ease);
}
.theme-card h3 { font-size: clamp(1.5rem, 1.9vw, 2rem); margin-top: auto; transition: color .3s; }

@media (hover: hover) {
  .theme-card:hover { background: #000; transform: translateY(-6px); box-shadow: 8px 8px 0 var(--gold); }
  .theme-card:hover h3 { color: #fff; -webkit-text-stroke-color: #fff; }
  .theme-card:hover .theme-card__num { -webkit-text-stroke-color: var(--accent); color: var(--accent); transform: translateY(2px); }
  .theme-card:hover .theme-card__tile { transform: scale(1.06); }
}

/* Cause panel: tighter */
.cause { margin-top: clamp(20px, 2.4vw, 32px); }
.cause__body { padding: clamp(28px, 3vw, 48px); }
.cause__title { font-size: min(3.8rem, 10cqi); margin-bottom: 14px; }
.cause__text { font-size: clamp(1rem, 1.15vw, 1.15rem); margin-bottom: 22px; }
.cause__btn { padding-block: 15px; }
@media (min-width: 901px) {
  .cause__art img { max-height: 400px; }
  .cause__art { justify-content: center; }
}

@media (max-width: 480px) {
  .theme-card { flex-direction: row; align-items: center; padding: 18px; gap: 16px; }
  .theme-card h3 { margin-top: 0; padding-right: 48px; }
  .theme-card__num { top: 50%; translate: 0 -50%; font-size: 2.8rem; }
}
@media (prefers-reduced-motion: reduce) { .theme-card__tile, .theme-card__num { transform: none !important; } }
.theme-card__tile { flex-shrink: 0; }
@media (max-width: 480px) {
  .theme-card__tile { width: 48px; }
  .theme-card h3 { padding-right: 62px; font-size: 1.4rem; }
}
@media (hover: hover) {
  .theme-card--3:hover .theme-card__tile { background: var(--gold); }   /* black tile would vanish on the black card */
}
@media (hover: hover) {
  .theme-card:hover .theme-card__icon { fill: #fff; transform: none; }
  .theme-card--4:hover .theme-card__icon { fill: #000; }
}

/* ==============================================================
   36. PARTNERS: logo wall on white
   Each logo gets an optically balanced size (wide logos shorter,
   round/square ones taller) so none looks bigger than the others.
   ============================================================== */
.partners { background: #fff; padding-block: clamp(32px, 4vw, 64px) clamp(48px, 5vw, 80px); border-top: 1px solid #eee; }
.partners__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 48px; flex-wrap: wrap; margin-bottom: clamp(20px, 2.4vw, 32px); }
.partners__title { margin: 0; color: var(--ink); font-size: clamp(2.8rem, 5vw, 4.6rem); line-height: .95; }
.partners__intro { margin: 0 0 6px; color: #555; font-size: clamp(1rem, 1.15vw, 1.15rem); }

.partners__grid { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(12px, 1.6vw, 20px); }
.partner {
  --logo-h: 64px;
  flex: 0 1 calc(25% - 15px); min-width: 0; height: clamp(110px, 10vw, 140px);
  display: grid; place-items: center; padding: 18px 22px;
  background: #fff; border: 1px solid #e6e3dc;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.partner picture { display: contents; }
.partner img { width: auto; max-width: 100%; height: var(--logo-h); max-height: 100%; object-fit: contain; background: transparent; }
.partner--ecobank            { --logo-h: 58px; }
.partner--ministry-of-health { --logo-h: 92px; }
.partner--alma               { --logo-h: 44px; }
.partner--malaria-consortium { --logo-h: 60px; }
.partner--malaria-free-uganda{ --logo-h: 86px; }
.partner--matibabu           { --logo-h: 42px; }
.partner--eannaso            { --logo-h: 72px; }
@media (hover: hover) {
  .partner:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 6px 6px 0 var(--gold); }
}
@media (max-width: 900px) { .partner { flex-basis: calc(33.333% - 14px); } }
@media (max-width: 600px) {
  .partner { flex-basis: calc(50% - 8px); height: 100px; padding: 14px; }
  .partner--ministry-of-health, .partner--malaria-free-uganda { --logo-h: 72px; }
  .partner--eannaso { --logo-h: 60px; }
}
@media (prefers-reduced-motion: reduce) { .partner:hover { transform: none; } }
.partner--alma { --logo-h: 56px; }
.partner--matibabu { --logo-h: 52px; }
.partner--ecobank { --logo-h: 64px; }

/* 36b. Partners on brand purple */
.partners { background: #5f5ea2; border-top: 0; }
.partners .themes__eyebrow { color: var(--accent); }            /* Uganda yellow: 4.3:1 on purple */
.partners__title { color: #fff; }
.partners__intro { color: #e7e6f2; }                              /* 4.7:1 on purple */
.partner { border: 0; }
@media (hover: hover) {
  .partner:hover { box-shadow: 6px 6px 0 #6bb574; }               /* brand green as accent */
}
.partner:focus-within { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ==============================================================
   37. TAKE A STAND: purple card + collage on a gold band
   ============================================================== */
.stand { background: var(--united-gold, #edaf46); padding-block: clamp(14px, 1.4vw, 20px); }
.stand__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: #5f5ea2; min-height: clamp(320px, 30vw, 460px); }
.stand__body {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: clamp(32px, 4vw, 64px) clamp(28px, 5vw, 96px); container-type: inline-size;
}
.stand__eyebrow { margin: 0 0 6px; color: #d9d2b9; font-size: clamp(1.5rem, 1.9vw, 1.9rem); line-height: 1.2; }   /* large text: 3.8:1 */
.stand__title { margin: 0 0 clamp(22px, 2.6vw, 34px); color: #fff; font-size: min(3.6rem, 11cqi); line-height: 1.02; max-width: 16ch; }
.stand__btn {
  display: inline-block; background: #000; color: #fff; text-decoration: none;
  font-family: var(--font-display); font-size: clamp(1.25rem, 1.5vw, 1.5rem); letter-spacing: .08em; text-transform: uppercase;
  padding: 16px clamp(28px, 3vw, 44px); transition: transform .25s var(--ease), box-shadow .25s, background .25s;
}
.stand__btn:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--accent); }
.stand__btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.stand__art { display: block; min-height: 0; overflow: hidden; }
.stand__art img { width: 100%; height: 100%; object-fit: cover; background: #111; transition: transform .8s var(--ease); }
@media (hover: hover) { .stand__card:hover .stand__art img { transform: scale(1.04); } }
@media (max-width: 900px) {
  .stand .container { width: 100%; }
  .stand__card { grid-template-columns: 1fr; }
  .stand__art { aspect-ratio: 1170 / 759; }
}
@media (prefers-reduced-motion: reduce) { .stand__btn:hover, .stand__card:hover .stand__art img { transform: none; } }
.stand__title { max-width: 19ch; }
@media (min-width: 901px) { .stand__card { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }

/* 37b. Take a stand: brand-consistent rework:
   full-bleed site gold (same as Our Strategy), black type, flag stripe on top,
   collage edge-to-edge. No second purple block under the purple partners. */
.stand { background: var(--gold); padding: 0; position: relative; }
.stand__stripe { position: relative; height: 9px; }
.stand__card { background: var(--gold); min-height: clamp(340px, 30vw, 460px); }
.stand__body { padding-left: var(--edge); padding-right: clamp(28px, 5vw, 96px); }
.stand__eyebrow { color: #1a1a1a; font-style: italic; }
.stand__title { color: #000; -webkit-text-stroke-color: #000; }
.stand__btn:hover { background: var(--red-cta); box-shadow: 6px 6px 0 #000; }
.stand__btn:focus-visible { outline-color: #000; }
@media (max-width: 900px) { .stand__body { padding-inline: var(--gutter); } }

/* 36c. Partners back on white (logos are made for white), brand accents kept */
.partners { background: #fff; border-top: 0; }
.partners .themes__eyebrow { color: var(--gold); }        /* same "Our" label as Key Thematic Areas */
.partners__title { color: var(--ink); }
.partners__intro { color: #555; }
.partner { border: 1px solid #e6e3dc; }
@media (hover: hover) {
  .partner:hover { border-color: var(--gold); box-shadow: 6px 6px 0 var(--gold); }
}

/* 36d. Partners: compact: one row of logos on desktop, shorter tiles */
.partners { padding-block: clamp(28px, 3vw, 44px); }
.partners__head { margin-bottom: clamp(14px, 1.6vw, 22px); align-items: center; }
.partners .themes__eyebrow { font-size: clamp(1.1rem, 1.4vw, 1.4rem); }
.partners__title { font-size: clamp(2.2rem, 3.4vw, 3.2rem); }
.partners__grid { flex-wrap: nowrap; gap: clamp(8px, 1vw, 14px); }
.partner { flex: 1 1 0; height: clamp(84px, 7vw, 104px); padding: 10px 12px; }
.partner--ecobank            { --logo-h: 46px; }
.partner--ministry-of-health { --logo-h: 72px; }
.partner--alma               { --logo-h: 38px; }
.partner--malaria-consortium { --logo-h: 44px; }
.partner--malaria-free-uganda{ --logo-h: 68px; }
.partner--matibabu           { --logo-h: 34px; }
.partner--eannaso            { --logo-h: 56px; }
@media (max-width: 1024px) {
  .partners__grid { flex-wrap: wrap; }
  .partner { flex: 0 1 calc(25% - 11px); }
}
@media (max-width: 600px) {
  .partners__grid { gap: 8px; }
  .partner { flex: 0 1 calc(33.333% - 6px); height: 74px; padding: 8px; }
  .partner--ministry-of-health, .partner--malaria-free-uganda { --logo-h: 56px; }
  .partner--eannaso { --logo-h: 44px; }
  .partner--ecobank, .partner--malaria-consortium { --logo-h: 34px; }
  .partner--alma, .partner--matibabu { --logo-h: 26px; }
  .partners__intro { display: none; }
}

/* 36e. Partner logos: robust centring that works the same in Safari, Chrome and Firefox
   (no display:contents, no percentage sizes inside a content-sized grid) */
.partner { display: flex; align-items: center; justify-content: center; }
.partner picture { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.partner img { display: block; height: var(--logo-h); width: auto; max-width: 100%; max-height: none; object-fit: contain; }

/* Uganda flag stripes removed site-wide */
.flag-stripe { display: none; }
.movement__btn--gold:hover svg { transform: translateX(4px); }

/* ==============================================================
   38. JOIN US: membership application (WCAG 2.2 AA)
   Large tap targets (≥44px), visible labels, 3:1+ field borders,
   strong focus rings, errors shown in text not colour alone.
   ============================================================== */
.apply { background: #f6f4ef; padding-block: clamp(32px, 4vw, 64px) clamp(56px, 6vw, 96px); }
.apply__layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.apply__aside { position: sticky; top: 100px; }
.apply__aside-title { margin: 0 0 10px; font-family: var(--font-display); font-size: 1.3rem; letter-spacing: .06em; text-transform: uppercase; }
.apply__steps { margin: 0 0 18px; padding: 0; list-style: none; counter-reset: s; border-left: 3px solid #ddd6c6; }
.apply__steps li { counter-increment: s; }
.apply__steps a { display: block; padding: 8px 0 8px 16px; color: #333; text-decoration: none; font-size: .98rem; }
.apply__steps a::before { content: "0" counter(s) "  "; font-family: var(--font-display); color: var(--gold); letter-spacing: .04em; }
.apply__steps a:hover { color: #000; text-decoration: underline; }
.apply__steps a.is-current { color: #000; font-weight: 600; box-shadow: inset 3px 0 0 #000; margin-left: -3px; }
.apply__note { font-size: .95rem; color: #555; margin: 0; }
.req { color: #b3261e; font-weight: 700; }
.opt { color: #555; font-weight: 400; font-size: .92em; text-transform: none; letter-spacing: 0; font-family: var(--font-body); }

.apply__form { display: grid; gap: clamp(16px, 2vw, 24px); }
.form-card { margin: 0; padding: clamp(22px, 3vw, 40px); background: #fff; border: 0; min-width: 0; display: grid; gap: 22px; scroll-margin-top: 100px; }
.form-card > legend {
  float: left; width: 100%; margin: 0 0 4px; padding: 0;
  font-family: var(--font-display); font-size: clamp(1.7rem, 2.4vw, 2.2rem); letter-spacing: .03em; text-transform: uppercase; color: var(--ink);
}
.form-card > legend + * { clear: both; }
.form-card__num { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; margin-right: 10px; background: var(--gold); color: #000; font-size: .8em; vertical-align: middle; }
.form-card__intro { margin: -8px 0 0; color: #444; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.field { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field > label, .group > legend { font-weight: 600; color: #1a1a1a; font-size: 1.02rem; line-height: 1.4; padding: 0; margin-bottom: 4px; }
.hint { margin: 0; font-size: .92rem; color: #555; }
.field input[type=text], .field input[type=email], .field input[type=tel], .field input[type=date], .field textarea {
  width: 100%; min-height: 48px; padding: 11px 14px; font: inherit; font-size: 1.02rem; color: #111;
  background: #fff; border: 2px solid #767676; border-radius: 0;           /* 4.5:1 border on white */
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: #333; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid #000; outline-offset: 2px; border-color: #000; }
.field input[readonly] { background: #f2f2f2; color: #444; }

.choices { display: grid; gap: 10px; }
.choices--row { grid-template-columns: repeat(auto-fit, minmax(150px, max-content)); gap: 10px 14px; }
.choice { position: relative; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 16px; background: #fff; border: 2px solid #c9c4b8; cursor: pointer; transition: border-color .2s, background .2s; }
.choice:hover { border-color: #333; }
.choice input { appearance: none; flex-shrink: 0; width: 22px; height: 22px; margin: 0; border: 2px solid #333; background: #fff; display: grid; place-items: center; cursor: pointer; }
.choice input[type=radio] { border-radius: 50%; }
.choice input::after { content: ""; width: 10px; height: 10px; background: #000; transform: scale(0); transition: transform .15s; }
.choice input[type=radio]::after { border-radius: 50%; }
.choice input[type=checkbox]::after { width: 12px; height: 7px; background: none; border-left: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(-45deg) scale(0); margin-top: -3px; }
.choice input:checked { background: #fff; }
.choice input[type=checkbox]:checked { background: #000; border-color: #000; }
.choice input:checked::after { transform: scale(1); }
.choice input[type=checkbox]:checked::after { transform: rotate(-45deg) scale(1); }
.choice:has(input:checked) { border-color: #000; background: #fff8e6; }
.choice input:focus-visible { outline: 3px solid #000; outline-offset: 3px; }
.choice--block { align-items: flex-start; }
.choice--block input { margin-top: 2px; }
.field.reveal { margin-top: 12px; }                 /* join form: follow-up field; not the scroll-reveal class */
.group { margin: 0; padding: 0; border: 0; min-width: 0; }

.refs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ref { margin: 0; padding: 20px; border: 2px solid #e6e3dc; display: grid; gap: 14px; min-width: 0; }
.ref > legend { padding: 0 8px; margin-left: -8px; font-family: var(--font-display); font-size: 1.3rem; letter-spacing: .06em; text-transform: uppercase; }

.form-card--declare { border-top: 6px solid var(--gold); }
.form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.btn-submit {
  display: inline-flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 34px; border: 0; cursor: pointer; text-decoration: none;
  background: #000; color: #fff; font-family: var(--font-display); font-size: 1.45rem; letter-spacing: .08em; text-transform: uppercase;
  transition: background .25s, transform .25s var(--ease), box-shadow .25s;
}
.btn-submit svg { width: 22px; height: 22px; fill: currentColor; transition: transform .3s var(--ease); }
.btn-submit:hover { background: var(--red-cta); transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--gold); }
.btn-submit:hover svg { transform: translateX(4px); }
.btn-submit:focus-visible { outline: 3px solid #000; outline-offset: 4px; }
.btn-submit[disabled] { opacity: .6; cursor: progress; }
.form-status { margin: 0; color: #333; }

/* Errors: icon + text + thick border, never colour alone */
.form-errors { padding: 20px 24px; background: #fff; border: 3px solid #b3261e; border-left-width: 10px; }
.form-errors h2 { margin: 0 0 8px; font-size: 1.6rem; color: #b3261e; }
.form-errors ul { margin: 0; padding-left: 20px; }
.form-errors a { color: #b3261e; font-weight: 600; }
.is-invalid input[type=text], .is-invalid input[type=email], .is-invalid input[type=tel], .is-invalid input[type=date], .is-invalid textarea, input.is-invalid { border-color: #b3261e; border-width: 3px; }
.group.is-invalid .choice { border-color: #b3261e; }
.field-error { margin: 0; color: #b3261e; font-weight: 600; font-size: .95rem; display: flex; gap: 6px; align-items: center; }
.field-error::before { content: "!"; display: inline-grid; place-items: center; width: 18px; height: 18px; background: #b3261e; color: #fff; font-size: .8rem; font-weight: 700; flex-shrink: 0; }

.apply__done { grid-column: 2; padding: clamp(28px, 4vw, 56px); background: #fff; border-top: 6px solid var(--gold); }
.apply__done h2 { margin: 0 0 12px; font-size: clamp(2rem, 3.4vw, 3rem); }
.apply__done p { margin: 0 0 24px; font-size: 1.1rem; max-width: 52ch; }

@media (max-width: 900px) {
  .apply__layout { grid-template-columns: 1fr; }
  .apply__aside { position: static; }
  .apply__steps { display: none; }
  .apply__done { grid-column: 1; }
}
@media (max-width: 600px) {
  .grid-2, .refs { grid-template-columns: 1fr; }
  .choices--row { grid-template-columns: 1fr 1fr; }
  .btn-submit { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .btn-submit:hover { transform: none; } }

/* Anything marked hidden stays hidden, whatever its layout style */
[hidden] { display: none !important; }

/* Spam-trap field: off-screen, never visible */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.apply__ref { font-size: 1.15rem; }

/* ==============================================================
   39. DATE PICKER: "Select date" calendar (from the brief, in
   brand gold, square corners). Native <dialog> = focus trap +
   Esc to close; full keyboard support in js/join.js.
   ============================================================== */
.date-field {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px;
  padding: 11px 14px; background: #fff; border: 2px solid #767676; font: inherit; font-size: 1.02rem; color: #111; text-align: left; cursor: pointer;
}
.date-field:hover { border-color: #333; }
.date-field:focus-visible { outline: 3px solid #000; outline-offset: 2px; border-color: #000; }
.date-field svg { width: 22px; height: 22px; fill: var(--gold); flex-shrink: 0; }
.date-field.is-empty .date-field__text { color: #595959; }
.is-invalid .date-field { border-color: #b3261e; border-width: 3px; }

.datepicker { width: min(440px, calc(100vw - 24px)); padding: clamp(22px, 4vw, 34px); border: 0; background: #fff; color: #1a1a1a;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.45); }
.datepicker::backdrop { background: rgba(26,26,26,.55); }
.datepicker[open] { animation: dp-in .25s var(--ease); }
@keyframes dp-in { from { opacity: 0; transform: translateY(12px); } }
.datepicker__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
.datepicker__title { margin: 0 0 14px; font-size: clamp(2rem, 6vw, 2.5rem); line-height: 1; color: #1a1a1a; }
.datepicker__selects { display: flex; gap: 10px; flex-wrap: wrap; }
.datepicker select {
  appearance: none; min-height: 46px; padding: 0 38px 0 14px; border: 2px solid transparent; background: #f2f2f0
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23555'/%3E%3C/svg%3E") no-repeat right 14px center / 10px 6px;
  font: inherit; font-weight: 600; font-size: 1.02rem; color: #1a1a1a; cursor: pointer;
}
.datepicker select:hover { border-color: #c9c4b8; }
.datepicker select:focus-visible { outline: 3px solid #000; outline-offset: 2px; }
.datepicker__badge { position: relative; width: 74px; height: 70px; flex-shrink: 0; background: var(--gold); display: grid; place-items: center; margin-top: 6px; }
.datepicker__badge::before, .datepicker__badge::after { content: ""; position: absolute; top: -7px; width: 8px; height: 12px; background: var(--red-cta); }
.datepicker__badge::before { left: 16px; } .datepicker__badge::after { right: 16px; }
.datepicker__badge span { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: #fff; letter-spacing: .02em; }
.datepicker__badge { background: linear-gradient(var(--gold) 0 50%, #edb556 50% 100%); }

.datepicker__grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.datepicker__grid th { padding: 0 0 10px; font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; letter-spacing: .06em; color: #333; }
.datepicker__grid th:first-child { color: #9a6410; }                       /* Sunday: gold, AA on white */
.datepicker__grid td { padding: 2px 0; text-align: center; }
.dp-day {
  position: relative; width: 100%; min-width: 40px; height: 44px; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 600; font-size: 1.02rem; color: #1a1a1a; font-variant-numeric: tabular-nums;
}
.dp-day.is-sun { color: #9a6410; }
.dp-day.is-other { color: #6e6e6e; font-weight: 400; }   /* 5.1:1 on white */
.dp-day:hover:not([disabled]) { background: #fff3dc; }
.dp-day.is-selected { color: #9a6410; }
.dp-day.is-selected::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 6px; height: 3px; background: var(--gold); }
.dp-day.is-today:not(.is-selected) { box-shadow: inset 0 0 0 2px #e6e3dc; }
.dp-day:focus-visible { outline: 3px solid #000; outline-offset: -3px; }
.dp-day[disabled] { color: #c4c4c4; cursor: not-allowed; }

.datepicker__actions { display: flex; justify-content: center; gap: 12px; margin-top: 22px; }
.datepicker__confirm, .datepicker__cancel { min-height: 52px; padding: 0 34px; border: 0; cursor: pointer; font-family: var(--font-display); font-size: 1.35rem; letter-spacing: .08em; text-transform: uppercase; }
.datepicker__confirm { flex: 0 1 220px; background: var(--gold); color: #000; box-shadow: 0 10px 20px -10px rgba(224,165,65,.9); transition: transform .2s var(--ease), background .2s; }
.datepicker__confirm:hover { background: #d3962f; transform: translateY(-2px); }
.datepicker__cancel { background: none; color: #444; }
.datepicker__cancel:hover { color: #000; text-decoration: underline; }
.datepicker__confirm:focus-visible, .datepicker__cancel:focus-visible { outline: 3px solid #000; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .datepicker[open] { animation: none; } }

/* ==============================================================
   40. ABOUT PAGE
   ============================================================== */
.about-eyebrow { display: block; margin: 0 0 6px; font-family: var(--font-display); font-size: clamp(1.05rem, 1.3vw, 1.25rem); letter-spacing: .1em; text-transform: uppercase; }

/* Who we are / Theory of change: photo | coloured panel */
.about-split { padding-top: clamp(16px, 2vw, 28px); background: #fff; }
.about-split + .about-split { padding-top: clamp(14px, 1.6vw, 22px); }
.about-split__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.about-split__img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; background: #000; }
.about-split__body { padding: clamp(28px, 3.6vw, 56px); color: #fff; container-type: inline-size; display: flex; flex-direction: column; justify-content: center; }
.about-split__body h2 { margin: 0 0 16px; color: #fff; font-size: min(3rem, 9cqi); line-height: 1; }
.about-split__body p { margin: 0 0 1em; font-size: clamp(1rem, 1.1vw, 1.1rem); line-height: 1.6; }
.about-split__body p + p { padding-top: 1em; border-top: 1px solid rgba(255,255,255,.45); }
.about-split__body p:last-child { margin-bottom: 0; }
.about-split--red .about-split__body { background: #c62f27; }            /* white text 5.6:1 */
.about-split--red .about-eyebrow { color: var(--accent); }
.about-split--purple .about-split__body { background: #5f5ea2; }         /* white text 5.8:1 */

/* Impact numbers + featured report */
.impact { padding-block: clamp(14px, 1.6vw, 22px) 0; background: #fff; }
.impact__stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); }
.stat { background: #f2f2f0; padding: clamp(18px, 2vw, 28px); display: grid; gap: 6px; border-bottom: 4px solid transparent; transition: border-color .3s, transform .3s var(--ease); }
.stat:hover { border-color: var(--gold); transform: translateY(-3px); }
.stat__num { font-family: var(--font-display); font-size: clamp(2.6rem, 4vw, 3.8rem); line-height: 1; color: #9a6410; }   /* AA on #f2f2f0 */
.stat__label { font-family: var(--font-display); font-size: clamp(1.1rem, 1.4vw, 1.4rem); line-height: 1.05; letter-spacing: .04em; text-transform: uppercase; color: #1a1a1a; }
.report-feature { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); margin-top: clamp(10px, 1.4vw, 18px); text-decoration: none; color: #000; }
.report-feature__media { position: relative; overflow: hidden; background: #000; min-height: 280px; }
.report-feature__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transition: transform .7s var(--ease); }
.report-feature__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 64px; height: 64px; display: grid; place-items: center; background: rgba(0,0,0,.55); border: 2px solid var(--gold); }
.report-feature__play svg { width: 26px; height: 26px; fill: var(--gold); margin-left: 4px; }
.report-feature__body { background: var(--gold); padding: clamp(28px, 4vw, 64px); display: flex; flex-direction: column; justify-content: center; container-type: inline-size; }
.report-feature__body .about-eyebrow { color: #000; }
.report-feature__title { font-family: var(--font-display); font-size: min(3.4rem, 9.4cqi); line-height: 1; letter-spacing: .02em; text-transform: uppercase; color: #fff; -webkit-text-stroke: .02em #fff; margin-bottom: 18px; }
.report-feature__more { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: .08em; text-transform: uppercase; color: #000; }

/* EMERGE strategy */
.emerge { background: #000; color: #fff; padding-block: clamp(48px, 6vw, 96px); margin-top: clamp(10px, 1.4vw, 18px); }
.emerge__eyebrow { margin: 0 0 8px; text-align: center; font-size: .95rem; letter-spacing: .3em; text-transform: uppercase; color: #ddd; }
.emerge__title { margin: 0 0 clamp(32px, 4vw, 56px); text-align: center; color: var(--gold); font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1.05; }
.emerge__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: 0 clamp(32px, 5vw, 80px); }
.emerge__item { padding: 24px 0; border-bottom: 1px solid #555; }
.emerge__item h3 { margin: 0 0 10px; color: var(--gold); font-size: clamp(1.35rem, 1.6vw, 1.6rem); letter-spacing: .04em; }
.emerge__letter { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; background: var(--gold); color: #000; margin-right: 4px; }
.emerge__item p { margin: 0; color: #ddd; font-size: clamp(.98rem, 1.05vw, 1.05rem); line-height: 1.6; }

/* Empowering communities slider */
.community { padding-block: clamp(40px, 5vw, 72px); background: #fff; }
.community__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: clamp(18px, 2vw, 28px); }
.community__title { margin: 0; color: var(--ink); font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: .95; }
.community__head .about-eyebrow { color: #9a6410; margin-top: 6px; }
.community__nav { display: flex; gap: 8px; }
.community__arrow { width: 44px; height: 44px; display: grid; place-items: center; background: #fff; border: 2px solid var(--gold); color: #9a6410; font-size: 1.6rem; line-height: 1; cursor: pointer; transition: background .2s, color .2s; }
.community__arrow:hover { background: var(--gold); color: #000; }
.community__arrow:focus-visible { outline: 3px solid #000; outline-offset: 3px; }
.community__track { display: grid; grid-template-columns: minmax(0, 1fr); }
.community-slide { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s linear .5s; }
.community-slide.is-active { opacity: 1; visibility: visible; transition: opacity .5s var(--ease); }
.community-slide img { width: 100%; height: 100%; min-height: 300px; max-height: 460px; object-fit: cover; background: #000; }
.community-slide__card { background: #f2f2f0; padding: clamp(28px, 3.6vw, 56px); display: flex; flex-direction: column; justify-content: center; border-left: 10px solid #000; }
.community-slide__card h3 { margin: 0 0 14px; font-size: clamp(1.7rem, 2.4vw, 2.3rem); line-height: 1.05; color: var(--ink); text-transform: none; letter-spacing: .02em; }
.community-slide__card p { margin: 0 0 20px; color: #444; line-height: 1.6; }
.community-slide__name { margin: 0 !important; font-family: var(--font-display); font-size: 1.2rem; letter-spacing: .08em; text-transform: uppercase; color: #000 !important; }
.community-slide__role { margin: 0 !important; color: #9a6410 !important; font-size: .95rem; }

@media (max-width: 900px) {
  .about-split__inner, .report-feature, .community-slide { grid-template-columns: 1fr; }
  .about-split .container { width: 100%; }
  .impact__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-split__img, .report-feature__media { min-height: 0; aspect-ratio: 16 / 10; }
  .community-slide img { max-height: 320px; min-height: 0; aspect-ratio: 16 / 10; }
  .community-slide__card { border-left: 0; border-top: 8px solid #000; }
}
@media (max-width: 700px) {
  .emerge__list { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
}
@media (prefers-reduced-motion: reduce) { .stat:hover { transform: none; } }
.about-split--red .about-eyebrow { color: #fff1a8; }   /* pale yellow: 4.8:1 on red */
.report-feature__title { color: #000; -webkit-text-stroke-color: #000; }   /* 8:1 on gold */
.community-slide__role { color: #7d5109 !important; }

/* ==============================================================
   40b. ABOUT: Who we are + Theory of change (redesign)
   ============================================================== */
.about-chip {
  display: inline-block; margin: 0 0 14px; padding: 6px 12px; background: #000; color: var(--accent);
  font-family: var(--font-display); font-size: clamp(1rem, 1.2vw, 1.2rem); letter-spacing: .1em; text-transform: uppercase;
}
.about-chip--dark, .toc__text .about-chip { background: #000; color: var(--accent); margin-bottom: 14px; }

/* Who we are */
.who { background: #fff; padding-block: clamp(40px, 5vw, 88px); overflow: hidden; }
.who__inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; }
.who__media { position: relative; grid-column: 1; grid-row: 1; }
.who__media::before { content: ""; position: absolute; inset: auto auto -18px -18px; width: 45%; height: 55%; background: var(--accent); z-index: 0; }
.who__media picture, .who__media img { position: relative; z-index: 1; display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.who__card {
  grid-column: 2; grid-row: 1; position: relative; z-index: 2; margin-left: clamp(-120px, -8vw, -48px);
  background: #c62f27; color: #fff; padding: clamp(28px, 3.4vw, 52px); container-type: inline-size;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.5);
}
.who__card .about-chip { background: #000; color: var(--accent); }
.who__title { margin: 0 0 18px; color: #fff; font-size: min(3.4rem, 10.5cqi); line-height: 1; }
.who__title mark { background: linear-gradient(var(--accent), var(--accent)) 0 85% / 0% 40% no-repeat; color: inherit; -webkit-text-stroke-color: currentColor;
  transition: background-size 1s var(--ease) .3s; }
.who.is-in .who__title mark { background-size: 100% 40%; }
.who__lead { font-size: clamp(1.15rem, 1.4vw, 1.35rem); line-height: 1.45; margin: 0 0 14px; }
.who__card p { margin: 0 0 12px; line-height: 1.6; }
.who__link { display: inline-block; margin-top: 8px; color: #fff; font-family: var(--font-display); font-size: 1.3rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border-bottom: 3px solid var(--accent); padding-bottom: 2px; }
.who__link:hover { color: var(--accent); }
.who__link:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

/* Theory of change */
.toc { background: #f6f4ef; padding-block: clamp(48px, 6vw, 96px); }
.toc__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.toc__text { container-type: inline-size; }
.toc__title { margin: 0 0 18px; color: var(--ink); font-size: min(3.6rem, 11.5cqi); line-height: 1; }
.toc__hl { color: #c62f27; -webkit-text-stroke-color: #c62f27; }
.toc__lead { font-size: clamp(1.15rem, 1.4vw, 1.35rem); line-height: 1.45; margin: 0 0 14px; color: #1a1a1a; }
.toc__text p { margin: 0 0 12px; line-height: 1.6; color: #333; }
.toc__media { position: relative; }
.toc__media::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; background: var(--gold); }
.toc__media picture, .toc__media img { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }

.toc__steps { list-style: none; margin: clamp(40px, 5vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); counter-reset: none; }
.toc__step { position: relative; background: #fff; padding: clamp(22px, 2.4vw, 32px); border-top: 6px solid #000; transition: transform .3s var(--ease), box-shadow .3s; }
.toc__step:not(:last-child)::after {                          /* arrow linking the steps */
  content: ""; position: absolute; top: 50%; right: calc(-1 * clamp(14px, 2vw, 24px)); width: clamp(14px, 2vw, 24px); height: 14px;
  translate: 0 -50%; background: #000; clip-path: polygon(0 35%, 55% 35%, 55% 0, 100% 50%, 55% 100%, 55% 65%, 0 65%); z-index: 1;
}
.toc__num { display: block; font-family: var(--font-display); font-size: clamp(2.6rem, 3.4vw, 3.4rem); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px #000; margin-bottom: 10px; }
.toc__step h3 { margin: 0 0 8px; font-size: clamp(1.5rem, 1.9vw, 1.9rem); color: var(--ink); }
.toc__step p { margin: 0; color: #444; line-height: 1.55; }
.toc__step--goal { background: #000; border-top-color: var(--accent); }
.toc__step--goal .toc__num { -webkit-text-stroke-color: var(--accent); }
.toc__step--goal h3 { color: var(--accent); -webkit-text-stroke-color: var(--accent); }
.toc__step--goal p { color: #e6e6e6; }
@media (hover: hover) { .toc__step:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -20px rgba(0,0,0,.4); } }

@media (max-width: 900px) {
  .who__inner { grid-template-columns: 1fr; }
  .who__card { grid-column: 1; grid-row: 2; margin: -48px 16px 0; }
  .toc__top { grid-template-columns: 1fr; }
  .toc__media { margin-right: 18px; }
  .toc__steps { grid-template-columns: 1fr; }
  .toc__step:not(:last-child)::after { top: auto; bottom: calc(-1 * clamp(14px, 2vw, 24px)); right: 50%; translate: 50% 0; width: 14px; height: clamp(14px, 2vw, 24px);
    clip-path: polygon(35% 0, 65% 0, 65% 55%, 100% 55%, 50% 100%, 0 55%, 35% 55%); }
}
@media (prefers-reduced-motion: reduce) { .who__title mark { transition: none; } .toc__step:hover { transform: none; } }

/* 40c. Who we are: on wide screens the photo fills the card's full height */
@media (min-width: 901px) {
  .who__inner { align-items: stretch; }
  .who__media { margin-block: clamp(32px, 4vw, 56px); }
  .who__media picture { height: 100%; }
  .who__media img { height: 100%; aspect-ratio: auto; min-height: 360px; }
}

/* 40d. Kireka clean-up: video plays inside the panel */
.report-feature__btn { display: block; position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; }
.report-feature__btn img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transition: transform .7s var(--ease); }
.report-feature__btn:hover img { transform: scale(1.05); }
.report-feature__btn:hover .report-feature__play, .report-feature__btn:focus-visible .report-feature__play { background: var(--gold); }
.report-feature__btn:hover .report-feature__play svg, .report-feature__btn:focus-visible .report-feature__play svg { fill: #000; }
.report-feature__play { transition: background .25s; width: 76px; height: 76px; }
.report-feature__btn:focus-visible { outline: 4px solid var(--accent); outline-offset: -4px; }
.report-feature__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.report-feature__title { margin: 0 0 18px; }
.report-feature__more { align-self: flex-start; text-decoration: none; border-bottom: 3px solid #000; padding-bottom: 2px; }
.report-feature__more:hover { text-decoration: none; color: #000; border-bottom-color: #fff; }
.report-feature__more:focus-visible { outline: 3px solid #000; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .report-feature__btn:hover img { transform: none; } }

/* 40e. Community stories: responsive photos */
.community-slide picture { display: block; min-width: 0; background: #000; }
.community-slide picture img { display: block; object-position: 50% 35%; }

/* =====================================================================
   41. PROJECTS PAGE: Gender Equality Fund (GEF) project
   ===================================================================== */
.about-chip--yellow { background: var(--accent); color: #000; }

/* Intro: black band, yellow highlight, key facts, photo on a yellow block */
.gef-intro { background: #000; color: #fff; padding-block: clamp(48px, 6vw, 96px); overflow: hidden; }
.gef-intro__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.gef-intro__text { container-type: inline-size; }
.gef-intro__title { margin: 0 0 clamp(24px, 3vw, 36px); color: #fff; -webkit-text-stroke-color: #fff; font-size: min(3.6rem, 9.6cqi); line-height: 1; text-transform: uppercase; }
.gef-intro__title mark { background: none; color: var(--accent); -webkit-text-stroke-color: var(--accent); }
.gef-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; background: #333; border: 1px solid #333; }
.gef-facts div { background: #000; padding: 16px 18px; }
.gef-facts dt { font-family: var(--font-display); font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; color: #bdbdbd; }
.gef-facts dd { margin: 4px 0 0; font-family: var(--font-display); font-size: clamp(1.5rem, 2vw, 2rem); letter-spacing: .03em; color: var(--accent); line-height: 1.05; }
.gef-intro__media { position: relative; }
.gef-intro__media::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; background: var(--accent); }
.gef-intro__media picture, .gef-intro__media img { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* About: heading column + text with country and district tags */
.gef-about { background: #fff; padding-block: clamp(56px, 7vw, 104px); }
.gef-about__inner { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.gef-about__head { container-type: inline-size; position: sticky; top: 110px; }
.gef-about__head .about-eyebrow { color: #9a6410; }
.gef-about__title { margin: 0; color: var(--ink); font-size: min(3.4rem, 13cqi); line-height: 1; text-transform: uppercase; border-left: 8px solid #c62f27; padding-left: 18px; }
.gef-about__body p { margin: 0 0 16px; line-height: 1.65; color: #333; }
.gef-about__body strong { color: #000; }
.gef-about__lead { font-size: clamp(1.15rem, 1.45vw, 1.35rem); line-height: 1.5 !important; color: #1a1a1a !important; }
.gef-countries { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.gef-countries li { padding: 6px 12px; border: 2px solid #000; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; }
.gef-countries li.is-home { background: #000; color: var(--accent); }
.gef-districts { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.gef-districts li { background: #c62f27; color: #fff; padding: clamp(18px, 2.2vw, 28px); border-top: 6px solid var(--accent); }
.gef-districts__name { display: block; font-family: var(--font-display); font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1; letter-spacing: .03em; text-transform: uppercase; }
.gef-districts__region { display: block; margin-top: 6px; color: #fff1a8; }

/* Objectives: three black cards on cream */
.gef-goals { background: #f6f4ef; padding-block: clamp(56px, 7vw, 104px); }
.gef-goals__title { margin: 0 0 clamp(28px, 4vw, 48px); color: var(--ink); font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1; text-transform: uppercase; }
.gef-goals__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.gef-goal { position: relative; background: #000; color: #e6e6e6; padding: clamp(24px, 2.8vw, 36px); border-bottom: 6px solid var(--accent); transition: transform .3s var(--ease), box-shadow .3s; }
.gef-goal__icon { display: grid; place-items: center; width: 56px; height: 56px; background: var(--accent); color: #000; margin-bottom: 20px; }
.gef-goal__icon svg { width: 30px; height: 30px; }
.gef-goal h3 { margin: 0 0 10px; color: #fff; -webkit-text-stroke-color: #fff; font-size: clamp(1.6rem, 2.2vw, 2.1rem); line-height: 1; text-transform: uppercase; }
.gef-goal p { margin: 0; line-height: 1.6; }
.gef-goal strong { color: var(--accent); font-weight: 600; }
@media (hover: hover) { .gef-goal:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -20px rgba(0,0,0,.5); } }

/* Voices: two quote cards */
.gef-voices { background: #fff; padding-block: clamp(56px, 7vw, 104px); }
.gef-voices__title { margin: 0 0 clamp(24px, 3vw, 40px); color: var(--ink); font-size: clamp(2.4rem, 4.4vw, 3.6rem); line-height: 1; text-transform: uppercase; }
.gef-voices__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.voice { margin: 0; display: flex; flex-direction: column; color: #fff; }
.voice--red { background: #c62f27; }
.voice--black { background: #000; }
.voice picture { display: block; overflow: hidden; }
.voice img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .7s var(--ease); }
.voice--red img { object-position: 50% 30%; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .voice:hover img { transform: scale(1.04); } }
.voice blockquote { position: relative; margin: 0; padding: clamp(44px, 4vw, 56px) clamp(24px, 3vw, 40px) 12px; flex: 1; }
.voice blockquote::before { content: "\201C"; position: absolute; z-index: 1; top: -28px; left: clamp(24px, 3vw, 40px); width: 56px; height: 56px; display: grid; place-items: center; padding-top: 22px; box-sizing: border-box; background: var(--accent); color: #000; font-family: Georgia, "Source Serif 4", serif; font-size: 4rem; line-height: 1; }
.voice blockquote p { margin: 0; font-size: clamp(1.25rem, 1.7vw, 1.55rem); line-height: 1.45; }
.voice figcaption { padding: 0 clamp(24px, 3vw, 40px) clamp(24px, 3vw, 36px); color: #f0f0f0; }
.voice--red figcaption { color: #fff1a8; }
.voice__name { display: block; font-family: var(--font-display); font-size: 1.4rem; letter-spacing: .08em; text-transform: uppercase; color: #fff; }

/* From the field: photo grid with real captions */
.gef-field { background: #f6f4ef; padding-block: clamp(56px, 7vw, 104px); }
.gef-field__inner { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.gef-field__head { container-type: inline-size; }
.gef-field__head .about-eyebrow { color: #9a6410; }
.gef-field__title { margin: 0 0 16px; color: var(--ink); font-size: min(3rem, 13cqi); line-height: 1; text-transform: uppercase; }
.gef-field__head p { margin: 0; line-height: 1.6; color: #333; }
.gef-field__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.gef-field__item figure { margin: 0; height: 100%; display: flex; flex-direction: column; background: #fff; }
.gef-field__item picture, .gef-field__item img { display: block; width: 100%; height: auto; aspect-ratio: 352 / 128; object-fit: cover; }
.gef-field__item figcaption { flex: 1; padding: 16px 18px 20px; border-top: 5px solid var(--accent); line-height: 1.5; color: #222; font-size: .98rem; }
.gef-field__place { display: block; margin-bottom: 4px; font-family: var(--font-display); font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; color: #9a6410; }

/* Project news + call to action */
.gef-news { background: #fff; padding-block: clamp(56px, 7vw, 104px); }
.gef-news__inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(24px, 4vw, 56px); align-items: stretch; }
.gef-news__title { margin: 0 0 16px; color: var(--ink); font-size: clamp(2.2rem, 3.6vw, 3rem); line-height: 1; text-transform: uppercase; }
.gef-news__list { list-style: none; margin: 0; padding: 0; border-top: 2px solid #000; }
.gef-news__list li { border-bottom: 1px solid #d6d6d6; }
.gef-news__list a { display: block; padding: 18px 40px 18px 0; position: relative; color: #1a1a1a; text-decoration: none; font-size: 1.1rem; line-height: 1.45; }
.gef-news__list a::after { content: "→"; position: absolute; right: 6px; top: 50%; translate: 0 -50%; font-size: 1.3rem; transition: right .25s var(--ease); }
.gef-news__list a:hover { color: #c62f27; }
.gef-news__list a:hover::after { right: 0; }
.gef-news__list a:focus-visible { outline: 3px solid #000; outline-offset: 2px; }
.gef-news__tag { display: block; margin-bottom: 2px; font-family: var(--font-display); font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; color: #9a6410; }
.gef-cta { background: var(--accent); padding: clamp(28px, 3.4vw, 48px); display: flex; flex-direction: column; justify-content: center; container-type: inline-size; }
.gef-cta__title { margin: 0 0 12px; color: #000; font-size: min(3rem, 14cqi); line-height: 1; text-transform: uppercase; }
.gef-cta p { margin: 0 0 22px; line-height: 1.55; color: #1a1a1a; }
.btn-join { align-self: flex-start; display: inline-block; padding: 14px 26px; background: #000; color: var(--accent); font-family: var(--font-display); font-size: 1.35rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: background .25s, color .25s; }
.btn-join:hover { background: #c62f27; color: #fff; }
.btn-join:focus-visible { outline: 3px solid #000; outline-offset: 4px; }

@media (max-width: 900px) {
  .gef-intro__inner, .gef-about__inner, .gef-field__inner, .gef-news__inner { grid-template-columns: 1fr; }
  .gef-intro__media { margin-right: 18px; }
  .gef-about__head { position: static; }
  .gef-goals__list, .gef-voices__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .gef-field__grid, .gef-districts { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .gef-goal:hover { transform: none; } }

/* =====================================================================
   42. CONTACT PAGE
   ===================================================================== */
/* Join panel + map */
.contact-top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); background: #000; }
.contact-top__join { background: var(--gold); display: flex; align-items: center; padding: clamp(40px, 6vw, 96px) var(--gutter) clamp(40px, 6vw, 96px) var(--edge); container-type: inline-size; }
.contact-top__join-inner { max-width: 620px; }
.contact-top__title { margin: 0 0 28px; color: #000; font-size: min(4rem, 12cqi); line-height: .98; text-transform: uppercase; }
.btn-join--dark { background: #000; color: var(--accent); }
.contact-map { position: relative; min-height: 420px; background: #111; }
.contact-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.contact-map__cover {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 4vw, 56px);
  color: #fff; background-color: #111;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 40px 40px;
}
.contact-map__pin { display: grid; place-items: center; width: 64px; height: 64px; background: var(--accent); color: #000; margin-bottom: 20px; }
.contact-map__pin svg { width: 34px; height: 34px; }
.contact-map__place { margin: 0 0 6px; font-family: var(--font-display); font-size: clamp(1.8rem, 2.6vw, 2.4rem); letter-spacing: .03em; line-height: 1; text-transform: uppercase; }
.contact-map__addr { margin: 0 0 24px; color: #d6d6d6; line-height: 1.55; max-width: 34ch; }
.contact-map__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.contact-map__show { padding: 12px 22px; border: 0; background: var(--accent); color: #000; font-family: var(--font-display); font-size: 1.25rem; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.contact-map__show:hover { background: #fff; }
.contact-map__show:focus-visible, .contact-map__open:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.contact-map__open { color: #fff; font-family: var(--font-display); font-size: 1.2rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border-bottom: 3px solid var(--accent); padding-bottom: 2px; }
.contact-map__open:hover { color: var(--accent); }
.contact-map__open--float { position: absolute; left: 12px; top: 12px; z-index: 1; background: #000; padding: 8px 12px; border-bottom-width: 3px; }
.contact-map__note { margin: 20px 0 0; font-size: .9rem; color: #bdbdbd; }

/* Four detail cards */
.contact-info { background: #f6f4ef; padding-block: clamp(40px, 5vw, 72px); }
.contact-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.contact-card { background: #fff; padding: clamp(24px, 2.6vw, 34px); border-top: 6px solid #000; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.contact-card__icon { display: grid; place-items: center; width: 52px; height: 52px; background: #000; color: var(--accent); margin-bottom: 18px; }
.contact-card__icon svg { width: 26px; height: 26px; }
.contact-card h3 { margin: 0 0 12px; color: var(--ink); font-size: clamp(1.5rem, 1.9vw, 1.8rem); line-height: 1; text-transform: uppercase; }
.contact-card p, .contact-card address { margin: 0 0 4px; font-style: normal; line-height: 1.6; color: #333; }
.contact-card a { color: #1a1a1a; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; overflow-wrap: anywhere; }
.contact-card a:hover { color: #c62f27; }
.contact-card a:focus-visible { outline: 3px solid #000; outline-offset: 2px; }
.contact-hours { margin: 0; }
.contact-hours div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px dashed #d6d6d6; }
.contact-hours dt { color: #555; }
.contact-hours dd { margin: 0; color: #1a1a1a; font-weight: 600; }
@media (hover: hover) { .contact-card:hover { transform: translateY(-4px); border-top-color: var(--accent); box-shadow: 0 18px 36px -22px rgba(0,0,0,.35); } }

/* Message form: uses the membership form's numbered cards (.apply, .form-card, .field, .choice) */
.contact-apply__head { container-type: inline-size; margin-bottom: clamp(24px, 3vw, 40px); max-width: 760px; }
.contact-apply__head .about-eyebrow { color: #9a6410; }
.contact-form__title { margin: 0 0 12px; color: var(--ink); font-size: min(4.4rem, 11cqi); line-height: .98; text-transform: uppercase; }
.contact-apply__head p { margin: 0; line-height: 1.6; color: #333; font-size: 1.08rem; }
.optional { font-weight: 400; color: #555; }
.form-errors h3 { margin: 0 0 8px; font-size: 1.6rem; color: #b3261e; }
.contact-apply .apply__done h3 { margin: 0 0 12px; color: var(--ink); font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1; text-transform: uppercase; }
.contact-submit:disabled { opacity: .7; cursor: progress; }
.contact-apply .field input[aria-invalid="true"], .contact-apply .field textarea[aria-invalid="true"] { border-color: #b3261e; border-width: 3px; }
.contact-apply .choice:has(input[aria-invalid="true"]) { border-color: #b3261e; }

@media (max-width: 1000px) { .contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .contact-top { grid-template-columns: 1fr; }
  .contact-top__join { padding-inline: var(--gutter); }
  .contact-map { min-height: 360px; }
  .contact-map__cover { position: relative; min-height: 360px; }
}
@media (max-width: 560px) { .contact-cards { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .contact-card:hover { transform: none; } }
.contact-apply .choices--row { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
@media (max-width: 560px) { .choices--row, .contact-apply .choices--row { grid-template-columns: 1fr; } }

/* =====================================================================
   43. BLOG POST PAGE
   ===================================================================== */
.post-head { background: #000; color: #fff; padding: clamp(36px, 5vw, 72px) 0 clamp(120px, 14vw, 200px); }
.post-head__crumbs { color: #bdbdbd; margin-bottom: 20px; }
.post-head__crumbs a { color: #fff; }
.post-head__title { margin: 0 0 18px; max-width: 24ch; color: #fff; -webkit-text-stroke-color: #fff; font-size: clamp(1.9rem, 8.4vw, 5rem); overflow-wrap: break-word; line-height: .96; text-transform: uppercase; }
.post-head__meta { margin: 0; color: var(--accent); font-family: var(--font-display); font-size: 1.2rem; letter-spacing: .08em; text-transform: uppercase; }
.post-hero { margin: calc(-1 * clamp(96px, 12vw, 170px)) auto 0; max-width: calc(var(--container) + 0px); padding-inline: var(--gutter); }
.post-hero picture, .post-hero img { display: block; width: 100%; height: auto; }
.post-hero picture { position: relative; }
.post-hero picture::after { content: ""; position: absolute; left: 18px; right: -18px; bottom: -18px; height: 40%; background: var(--accent); z-index: -1; }
.post-hero { position: relative; z-index: 0; }

.post-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); padding-block: clamp(48px, 6vw, 88px); align-items: start; }
.post-aside { position: sticky; top: 100px; display: grid; gap: 28px; }
.post-toc__title, .post-facts__title, .post-tags__label { margin: 0 0 10px; font-family: var(--font-display); font-size: 1.2rem; letter-spacing: .08em; text-transform: uppercase; color: #000; }
.post-toc ol { margin: 0; padding: 0; list-style: none; border-left: 3px solid #ddd6c6; counter-reset: t; }
.post-toc li { counter-increment: t; }
.post-toc a { display: block; padding: 7px 0 7px 14px; color: #333; text-decoration: none; font-size: .95rem; line-height: 1.35; }
.post-toc a:hover { color: #000; text-decoration: underline; }
.post-toc a:focus-visible { outline: 3px solid #000; outline-offset: 2px; }
.post-toc a.is-current { color: #000; font-weight: 600; box-shadow: inset 3px 0 0 #c62f27; margin-left: -3px; }
.post-facts { background: #f6f4ef; padding: 20px; border-top: 6px solid var(--gold); }
.post-facts dl { margin: 0; display: grid; gap: 12px; }
.post-facts dt { font-family: var(--font-display); font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; color: #7d5109; }
.post-facts dd { margin: 2px 0 0; line-height: 1.45; color: #1a1a1a; }

.post-body { max-width: 720px; font-size: 1.08rem; }
.post-body p { margin: 0 0 1.15em; line-height: 1.75; color: #262626; }
.post-lead { font-size: clamp(1.25rem, 1.8vw, 1.45rem); line-height: 1.55 !important; color: #000 !important; padding-bottom: 1.2em; border-bottom: 2px solid #000; margin-bottom: 1.6em !important; }
.post-body h2 { display: flex; align-items: center; gap: 14px; margin: 2em 0 .7em; color: var(--ink); font-size: clamp(1.8rem, 2.8vw, 2.4rem); line-height: 1.05; text-transform: uppercase; scroll-margin-top: 100px; }
.post-num { flex-shrink: 0; display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; background: var(--accent); color: #000; font-size: .8em; }
.post-callout { margin: 1.4em 0 !important; padding: 20px 24px; background: #c62f27; color: #fff !important; font-size: 1.15rem; line-height: 1.5 !important; }
.post-callout strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1; color: var(--accent); letter-spacing: .02em; }

.post-table { margin: 1.6em 0 2em; overflow-x: auto; }
.post-table table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.post-table caption { caption-side: top; text-align: left; padding-bottom: 10px; font-family: var(--font-display); font-size: 1.3rem; letter-spacing: .05em; text-transform: uppercase; color: #000; }
.post-table thead th { background: #000; color: var(--accent); font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; letter-spacing: .08em; text-transform: uppercase; text-align: left; padding: 10px 14px; }
.post-table thead th:not(:first-child), .post-table td { text-align: right; width: 18%; }
.post-table tbody th { font-weight: 400; text-align: left; padding: 10px 14px; color: #262626; }
.post-table td { padding: 10px 14px; font-weight: 600; color: #000; font-variant-numeric: tabular-nums; }
.post-table tbody tr { border-bottom: 1px solid #ddd6c6; }
.post-table tbody tr:nth-child(odd) { background: #faf8f3; }
.post-table__note { margin: 8px 0 0 !important; font-size: .9rem !important; color: #555 !important; line-height: 1.5 !important; }

.post-video { margin: 2.4em 0; scroll-margin-top: 100px; }
.post-body .post-video__title { display: block; margin: 0 0 14px; font-size: clamp(1.5rem, 2.2vw, 1.9rem); }
.post-video__frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.post-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.post-video__play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; }
.post-video__play img { width: 100%; height: 100%; object-fit: cover; opacity: .75; transition: opacity .3s, transform .7s var(--ease); }
.post-video__icon { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 84px; height: 84px; background: var(--accent); transition: background .25s; }
.post-video__icon svg { width: 34px; height: 34px; fill: #000; margin-left: 5px; }
.post-video__play:hover img { opacity: .9; transform: scale(1.03); }
.post-video__play:hover .post-video__icon { background: #fff; }
.post-video__play:focus-visible { outline: 4px solid var(--accent); outline-offset: -4px; }
.post-body .post-video__alt { margin: 10px 0 0; font-size: .95rem; }
.post-video__alt a { color: #000; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; }

.post-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 2.4em; padding-top: 24px; border-top: 2px solid #000; }
.post-tags ul, .post-share ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.post-tags li { padding: 6px 12px; border: 2px solid var(--gold); font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase; color: #000; }
.post-share a, .post-copy { display: inline-block; padding: 6px 12px; background: #000; color: #fff; border: 0; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.post-share a:hover, .post-copy:hover { background: #c62f27; }
.post-share a:focus-visible, .post-copy:focus-visible { outline: 3px solid #000; outline-offset: 3px; }
.post-body .post-copy__status { margin: 8px 0 0; font-size: .95rem; min-height: 1.4em; }

.post-next { background: #f6f4ef; padding-block: clamp(40px, 5vw, 72px); }
.post-next__inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.post-next__card { display: flex; flex-direction: column; justify-content: space-between; min-height: 150px; padding: clamp(20px, 2.4vw, 32px); background: #fff; color: #000; text-decoration: none; border-top: 6px solid #000; transition: transform .3s var(--ease), box-shadow .3s; }
.post-next__card--dark { background: #000; color: #fff; border-top-color: var(--accent); }
.post-next__card--yellow { background: var(--accent); border-top-color: #000; }
.post-next__eyebrow { font-family: var(--font-display); font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; color: #7d5109; }
.post-next__card--dark .post-next__eyebrow { color: var(--accent); }
.post-next__card--yellow .post-next__eyebrow { color: #000; }
.post-next__title { font-family: var(--font-display); font-size: clamp(1.6rem, 2.2vw, 2rem); line-height: 1.05; letter-spacing: .02em; text-transform: uppercase; }
.post-next__title::after { content: " →"; }
.post-next__card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -22px rgba(0,0,0,.45); }
.post-next__card:focus-visible { outline: 3px solid #000; outline-offset: 3px; }

@media (max-width: 1000px) {
  .post-layout { grid-template-columns: 1fr; }
  .post-aside { position: static; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .post-aside, .post-foot, .post-next__inner { grid-template-columns: 1fr; }
  .post-hero picture::after { left: 10px; right: -10px; bottom: -10px; }
  .post-table thead th, .post-table tbody th, .post-table td { padding: 9px 10px; }
}
@media (prefers-reduced-motion: reduce) { .post-next__card:hover, .post-video__play:hover img { transform: none; } }

/* Blog listing: featured story card (the whole card is clickable via the title link) */
.blog-list { background: #f6f4ef; padding-block: clamp(48px, 6vw, 88px); }
.blog-list__title { margin: 0 0 clamp(20px, 3vw, 32px); color: var(--ink); font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1; text-transform: uppercase; }
.blog-feature { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); background: #000; color: #fff; transition: box-shadow .3s; }
.blog-feature__media { display: block; overflow: hidden; }
.blog-feature__media picture, .blog-feature__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.blog-feature__body { padding: clamp(28px, 3.6vw, 56px); display: flex; flex-direction: column; justify-content: center; border-left: 8px solid var(--accent); container-type: inline-size; }
.blog-feature__title { margin: 0 0 12px; font-size: min(2.8rem, 10cqi); line-height: 1; text-transform: uppercase; }
.blog-feature__title a { color: #fff; text-decoration: none; }
.blog-feature__title a::after { content: ""; position: absolute; inset: 0; }
.blog-feature__title a:focus-visible { outline: none; }
.blog-feature:has(.blog-feature__title a:focus-visible) { outline: 4px solid var(--accent); outline-offset: 4px; }
.blog-feature__meta { margin: 0 0 16px; color: var(--accent); font-family: var(--font-display); font-size: 1.1rem; letter-spacing: .08em; text-transform: uppercase; }
.blog-feature__excerpt { margin: 0 0 20px; color: #e6e6e6; line-height: 1.6; }
.blog-feature__more { margin: 0; align-self: flex-start; font-family: var(--font-display); font-size: 1.25rem; letter-spacing: .08em; text-transform: uppercase; border-bottom: 3px solid var(--accent); padding-bottom: 2px; }
@media (hover: hover) { .blog-feature:hover { box-shadow: 0 24px 48px -24px rgba(0,0,0,.6); } .blog-feature:hover .blog-feature__media img { transform: scale(1.04); } }
@media (max-width: 900px) { .blog-feature { grid-template-columns: 1fr; } .blog-feature__body { border-left: 0; border-top: 8px solid var(--accent); } }
@media (prefers-reduced-motion: reduce) { .blog-feature:hover .blog-feature__media img { transform: none; } }
.post-head__crumbs a { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.blog-feature__body .about-chip { align-self: flex-start; }
.blog-feature + .blog-feature { margin-top: clamp(20px, 3vw, 32px); }
.blog-feature--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.blog-feature--flip .blog-feature__media { order: 2; }
.blog-feature--flip .blog-feature__body { border-left: 0; border-right: 8px solid var(--accent); }
@media (max-width: 900px) {
  .blog-feature--flip { grid-template-columns: 1fr; }
  .blog-feature--flip .blog-feature__media { order: 0; }
  .blog-feature--flip .blog-feature__body { border-right: 0; }
}

/* Blog post extras: pull quote and highlighted table row */
.post-anchor { scroll-margin-top: 100px; }
.post-pullquote { margin: 2.2em 0; padding: clamp(28px, 4vw, 52px); background: var(--gold); position: relative; }
.post-pullquote::before { content: "\201C"; position: absolute; top: 14px; left: clamp(20px, 3vw, 40px); font-family: Georgia, "Source Serif 4", serif; font-size: 5rem; line-height: 1; color: #fff; }
.post-pullquote blockquote { margin: 0; padding-top: 34px; }
.post-body .post-pullquote p { margin: 0 0 .7em; font-size: clamp(1.2rem, 1.9vw, 1.5rem); line-height: 1.45; color: #000; font-weight: 600; }
.post-body .post-pullquote p:last-child { margin-bottom: 0; }
.post-table tr.is-key { background: #fff4c2 !important; }
.post-table tr.is-key th, .post-table tr.is-key td { font-weight: 700; color: #000; }
.post-table td, .post-table thead th:not(:first-child) { white-space: nowrap; }
.post-body { min-width: 0; }
h1, h2, h3, dt, dd, legend { overflow-wrap: break-word; }   /* safety net if web fonts fail and a wider fallback font is used */
.post-pullquote--open { margin-top: 0; }
.post-pullquote figcaption { margin-top: 16px; font-style: italic; font-size: .95rem; color: #1a1a1a; }
.post-body p a:not([class]) { color: #000; text-decoration-color: var(--gold); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.post-body p a:not([class]):hover { color: #c62f27; }
.post-author { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 24px; margin-top: 2.4em; padding: clamp(20px, 3vw, 32px); background: #000; color: #fff; border-left: 8px solid var(--accent); scroll-margin-top: 100px; }
.post-author img { display: block; width: 112px; height: 112px; object-fit: cover; }
.post-body .post-author__title { margin: 0 0 6px; color: var(--accent); -webkit-text-stroke-color: var(--accent); font-size: 1.3rem; }
.post-body .post-author__name { margin: 0 0 10px; color: #fff; font-family: var(--font-display); font-size: 1.6rem; letter-spacing: .03em; text-transform: uppercase; line-height: 1.1; }
.post-author__name span { display: block; font-family: var(--font-body); font-size: .95rem; letter-spacing: 0; text-transform: none; color: #d6d6d6; }
.post-body .post-author p:last-child { margin: 0; color: #e6e6e6; font-size: 1rem; }
@media (max-width: 560px) { .post-author { grid-template-columns: 1fr; } }
.post-hero__credit { margin: 28px 0 0; font-size: .9rem; color: #555; line-height: 1.45; }
.post-pullquote--info::before { content: none; }
.post-pullquote--info { padding-top: clamp(24px, 3vw, 40px); }
.post-body .post-pullquote--info p { font-weight: 400; font-size: clamp(1.1rem, 1.6vw, 1.3rem); }
.post-body .post-pullquote--info a { color: #000; font-weight: 700; text-decoration-color: #000; }
.post-body .post-source { margin-top: 2em; padding-top: 14px; border-top: 1px solid #ddd6c6; font-size: .95rem; color: #444; }
/* Stat box and secondary quote */
.post-stats { margin: 1.8em 0; padding: clamp(24px, 3vw, 36px); background: #000; color: #fff; border-top: 6px solid var(--accent); }
.post-body .post-stats__intro { margin: 0 0 18px; color: #e6e6e6; font-size: 1.1rem; }
.post-stats ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.post-stats li { line-height: 1.35; color: #e6e6e6; }
.post-stats strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1; color: var(--accent); }
.post-quote { margin: 1.8em 0; padding: 4px 0 4px 24px; border-left: 6px solid #c62f27; }
.post-quote blockquote { margin: 0; }
.post-body .post-quote p { margin: 0 0 10px; font-size: clamp(1.15rem, 1.7vw, 1.35rem); line-height: 1.5; color: #000; }
.post-quote figcaption { font-style: italic; color: #444; }
@media (max-width: 560px) { .post-stats ul { grid-template-columns: 1fr; } }
.post-body .post-closing { font-family: var(--font-display); font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.1; letter-spacing: .02em; text-transform: uppercase; color: #000; border-left: 8px solid var(--accent); padding-left: 18px; }
.post-author__mark { display: grid; place-items: center; width: 112px; height: 112px; background: var(--accent); color: #000; font-family: var(--font-display); font-size: 2.4rem; letter-spacing: .04em; }
.post-inline-photo { float: right; width: min(46%, 340px); margin: 6px 0 16px 24px; }
.post-inline-photo img { display: block; width: 100%; height: auto; }
.post-body .post-pullquote--open + .post-inline-photo { margin-top: 0; }
@media (max-width: 700px) { .post-inline-photo { float: none; width: 100%; margin: 0 0 1.4em; } }
.post-body h2, .post-stats, .post-pullquote, .post-source { clear: both; }
/* Vaccine schedule strip */
.post-schedule { margin: 1.8em 0; padding: clamp(20px, 3vw, 32px); background: #000; color: #fff; border-top: 6px solid var(--accent); }
.post-body .post-schedule__title { margin: 0 0 16px; font-family: var(--font-display); font-size: 1.4rem; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.post-schedule ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; counter-reset: dose; }
.post-schedule li { counter-increment: dose; position: relative; padding: 14px 12px 12px; border: 2px solid var(--accent); text-align: center; color: #e6e6e6; }
.post-schedule li::before { content: "Dose " counter(dose); display: block; font-family: var(--font-display); font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.post-schedule strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.4rem, 4.5vw, 3.2rem); line-height: 1; color: #fff; }
@media (max-width: 460px) { .post-schedule ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* District list */
.post-districts { margin: 1.6em 0; padding: clamp(18px, 2.6vw, 28px); background: #f6f4ef; border-left: 8px solid #c62f27; }
.post-body .post-districts__title { margin: 0 0 12px; font-family: var(--font-display); font-size: 1.35rem; letter-spacing: .06em; text-transform: uppercase; color: #000; }
.post-districts ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.post-districts li { padding: 4px 10px; background: #fff; border: 1px solid #ddd6c6; font-size: .95rem; color: #1a1a1a; }
/* Bar chart (paired 2019/2020 bars, each pair on its own scale) */
.post-chart { margin: 1.8em 0; padding: clamp(18px, 2.6vw, 28px); background: #fff; border: 2px solid #000; }
.post-chart figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-bottom: 18px; }
.post-chart__title { font-family: var(--font-display); line-height: 1.1; font-size: 1.4rem; letter-spacing: .05em; text-transform: uppercase; color: #000; }
.post-chart__legend { display: flex; gap: 14px; font-size: .95rem; color: #333; }
.post-chart__key::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; }
.post-chart__key--y19::before { background: #5c5c5c; }
.post-chart__key--y20::before { background: #c62f27; }
.post-chart__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.post-body .post-chart__label { margin: 0 0 6px; font-weight: 600; color: #1a1a1a; line-height: 1.3; font-size: 1rem; }
.post-chart__change { display: inline-block; margin-left: 6px; padding: 1px 8px; background: #c62f27; color: #fff; font-family: var(--font-display); font-weight: 400; font-size: 1rem; letter-spacing: .05em; }
.post-chart__bars { display: grid; gap: 4px; padding-right: 92px; }
.post-chart__bar { position: relative; display: block; height: 24px; width: max(var(--w), 3px); }
.post-chart__bar span { position: absolute; left: calc(100% + 8px); top: 50%; translate: 0 -50%; font-size: .92rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; color: #1a1a1a; }
.post-chart__bar--y19 { background: #5c5c5c; }
.post-chart__bar--y20 { background: #c62f27; }
.post-list { margin: 0 0 1.15em; padding-left: 1.3em; }
.post-list li { margin-bottom: .5em; line-height: 1.65; color: #262626; }
.post-list li::marker { color: #c62f27; }
/* Chart image as the post hero, and in a blog card */
.post-hero--chart picture { background: #fdf5e7; }
.post-hero--chart img { max-width: 900px; margin: 0 auto; }
.post-body .post-chart__sub { margin: -8px 0 16px; font-size: 1rem; line-height: 1.5; color: #333; }
.blog-feature__media--chart { background: #fdf5e7; display: flex; align-items: center; }
.blog-feature__media--chart img { object-fit: contain !important; }
.blog-feature__media--chart, .blog-feature__media--chart picture, .blog-feature__media--chart img { background: #fdf5e7 !important; }
/* Interview (Q&A) posts */
.post-qa h2 { display: block; font-family: var(--font-body); font-weight: 700; font-size: clamp(1.2rem, 1.7vw, 1.4rem); line-height: 1.35; letter-spacing: 0; text-transform: none; -webkit-text-stroke: 0; color: #000; padding-left: 16px; border-left: 6px solid var(--accent); margin: 2em 0 .8em; }
.post-qa__who { font-family: var(--font-display); font-weight: 400; font-size: 1.1em; letter-spacing: .06em; text-transform: uppercase; color: #c62f27; }
.post-stats ul.post-stats__two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .post-stats ul.post-stats__two { grid-template-columns: 1fr; } }
.post-body .post-subhead { margin: 1.8em 0 .6em; font-family: var(--font-body); font-weight: 700; font-style: italic; font-size: clamp(1.1rem, 1.5vw, 1.25rem); line-height: 1.4; letter-spacing: 0; text-transform: none; -webkit-text-stroke: 0; color: #000; }
.post-inline-photo--narrow { width: 160px; }
.post-inline-photo--narrow img { border: 8px solid var(--accent); }
@media (max-width: 700px) { .post-inline-photo--narrow { float: right; width: 120px; margin: 4px 0 12px 16px; } }

/* 44. Contrast fixes (WCAG 2.2 AA): home page labels and the Our cause panel */
.themes__eyebrow, .partners .themes__eyebrow { color: #8a5a0b; }      /* deeper gold: 5.9:1 on white */
.cause__eyebrow { color: #000; }                                        /* 9.6:1 on gold */
.cause__title { color: #000; -webkit-text-stroke-color: #000; }         /* 9.6:1 on gold */
.strategy__eyebrow { color: #000; }                                     /* 9.6:1 on gold */
.strategy__title { color: #000; -webkit-text-stroke-color: #000; }      /* 9.6:1 on gold */
@media (max-width: 480px) { .theme-card__num { color: #8f887a; -webkit-text-stroke-color: #8f887a; } } /* phones: 3.2:1 on cream */

/* ==============================================================
   45. OUR TEAM PAGE (team.html + js/team.js)
   Intro with jump links → four groups of cards → join CTA.
   Each card opens the full profile in a native <dialog>.
   Group colour (--grp) marks each card's photo edge.
   ============================================================== */
.team-eyebrow { margin: 0 0 8px; font-family: var(--font-display); font-size: clamp(1.05rem, 1.3vw, 1.25rem); letter-spacing: .1em; text-transform: uppercase; color: #8a5a0b; }  /* 6.3:1 on white */

/* Intro */
.team-intro { padding-block: clamp(48px, 6vw, 88px); background: #fff; }
.team-intro__inner { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.team-intro__title { margin: 0 0 18px; font-size: clamp(2.3rem, 4.6vw, 3.9rem); line-height: 1; text-transform: uppercase; color: #1a1a1a; }
.team-intro__title span { color: #c62f27; }                        /* 5.6:1 on white */
.team-intro__text > p:last-child { margin: 0; max-width: 54ch; font-size: clamp(1.05rem, 1.2vw, 1.15rem); line-height: 1.6; color: #333; }
.team-jump { background: #1a1a1a; color: #fff; padding: clamp(22px, 3vw, 34px); border-top: 6px solid var(--accent); }
.team-jump__total { margin: 0 0 10px; font-family: var(--font-display); font-size: 1.25rem; letter-spacing: .06em; text-transform: uppercase; color: #e6e6e6; }
.team-jump__total strong { margin-right: 6px; font-size: 2.8rem; font-weight: 400; line-height: 1; color: var(--accent); }
.team-jump ul { list-style: none; margin: 0; padding: 0; }
.team-jump li + li { border-top: 1px solid rgba(255,255,255,.18); }
.team-jump a { display: flex; align-items: center; gap: 14px; min-height: 48px; color: #fff; text-decoration: none; font-family: var(--font-display); font-size: 1.45rem; letter-spacing: .05em; text-transform: uppercase; transition: color .2s, padding .25s var(--ease); }
.team-jump a:hover { color: var(--accent); padding-left: 6px; }
.team-jump a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.team-jump__count { min-width: 2ch; font-size: 1rem; color: var(--accent); }

/* Groups */
.team-group { --grp: var(--accent); padding-block: clamp(56px, 7vw, 100px); background: #fff; scroll-margin-top: 16px; }
.team-group--leadership { background: #f6f4ef; }
.team-group--core { --grp: var(--gold); }
.team-group--board { --grp: #c62f27; background: #1a1a1a; }
.team-group--advisory { --grp: #1a1a1a; background: #f6f4ef; }
.team-group__head { display: flex; align-items: flex-end; gap: clamp(14px, 3vw, 32px); margin-bottom: clamp(26px, 3.4vw, 44px); }
.team-group__num { flex-shrink: 0; font-family: var(--font-display); font-size: clamp(4rem, 9vw, 7.5rem); line-height: .78; color: transparent; -webkit-text-stroke: 2px #1a1a1a; }
.team-group__title { margin: 0; font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1; text-transform: uppercase; color: #1a1a1a; }
.team-group__desc { margin: 8px 0 0; max-width: 60ch; line-height: 1.55; color: #4a4a4a; }        /* 8.4:1 on cream */
.team-group--board .team-group__num { -webkit-text-stroke-color: var(--accent); }
.team-group--board .team-group__title { color: #fff; }
.team-group--board .team-group__desc { color: #d6d6d6; }                                        /* 12:1 on black */

/* Cards */
.team-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(14px, 2vw, 24px); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.team-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.team-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 900px; }
.member { position: relative; display: flex; flex-direction: column; background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 10px 24px -18px rgba(0,0,0,.35); transition: transform .3s var(--ease), box-shadow .3s; }
.member__photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #fff; }
.member__photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--grp); transition: height .3s var(--ease); }
.member__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s var(--ease); }
.member__body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.member__name { order: 2; margin: 0; font-size: clamp(1.4rem, 1.9vw, 1.75rem); line-height: 1.02; color: #1a1a1a; }
.member__role { order: 1; margin: 0 0 6px; font-family: var(--font-display); font-size: 1.02rem; line-height: 1.15; letter-spacing: .08em; text-transform: uppercase; color: #8a5a0b; }
.member__org { order: 3; margin: 6px 0 14px; font-size: .92rem; line-height: 1.4; color: #595959; }   /* 7:1 on white */
.member__more { order: 4; margin-top: auto; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding-bottom: 3px; border-bottom: 3px solid var(--accent); font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase; color: #1a1a1a; }
.member__more svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.member__open { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.member__open::after { content: ""; position: absolute; inset: 0; z-index: 1; }          /* whole card is the click target */
.member__open:focus-visible { outline: none; }
.member__open:focus-visible::after { outline: 3px solid #000; outline-offset: 3px; }
.team-group--board .member__open:focus-visible::after { outline-color: var(--accent); }
.member:hover { transform: translateY(-5px); box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 22px 38px -20px rgba(0,0,0,.45); }
.member:hover .member__photo img { transform: scale(1.04); }
.member:hover .member__photo::after { height: 10px; }
.member:hover .member__more svg { transform: translateX(4px); }

/* Full bio: shown under the card without JavaScript, in the dialog with it */
.member__bio { padding: 0 18px 20px; font-size: .95rem; line-height: 1.6; }
.member__bio p { margin: 0 0 .9em; }
.team-enhanced .member__bio { display: none; }
html:not(.team-enhanced) .member__more, html:not(.team-enhanced) .member__open::after { display: none; }
html:not(.team-enhanced) .member__open { cursor: text; }
.member__links { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; }
.member__link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 2px solid #1a1a1a; color: #1a1a1a; font-size: .95rem; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; transition: background .2s, color .2s; }
.member__link svg { width: 18px; height: 18px; flex-shrink: 0; }
.member__link:hover { background: var(--accent); }
.member__link:focus-visible { outline: 3px solid #000; outline-offset: 2px; }

/* Join CTA */
.team-cta { padding-block: clamp(52px, 6.5vw, 96px); background: var(--accent); }
.team-cta__title { margin: 0 0 12px; font-size: clamp(2.6rem, 6vw, 5rem); line-height: .95; text-transform: uppercase; color: #000; }
.team-cta p { margin: 0 0 26px; max-width: 58ch; font-size: clamp(1.05rem, 1.2vw, 1.15rem); line-height: 1.6; color: #1a1a1a; }
.team-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.team-cta__link { display: inline-flex; align-items: center; min-height: 44px; color: #000; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.team-cta__link:hover { text-decoration-thickness: 4px; }
.team-cta__link:focus-visible { outline: 3px solid #000; outline-offset: 3px; }

/* Profile dialog */
html:has(.profile[open]) { overflow: hidden; }
.profile { width: min(1000px, calc(100vw - 24px)); max-width: none; max-height: min(92vh, 92dvh); padding: 0; border: 0; background: #fff; color: #1a1a1a; overflow: hidden; box-shadow: 0 40px 80px -24px rgba(0,0,0,.6); }
.profile::backdrop { background: rgba(20,20,20,.72); }
.profile[open] { animation: dp-in .3s var(--ease); }
.profile__bar { position: sticky; top: 0; z-index: 3; height: 0; display: flex; justify-content: flex-end; }
.profile__close { width: 48px; height: 48px; margin: 12px; display: grid; place-items: center; border: 0; background: #1a1a1a; color: #fff; cursor: pointer; transition: background .2s; }
.profile__close svg { width: 22px; height: 22px; }
.profile__close:hover { background: #c62f27; }
.profile__close:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 6px #000; }
.profile__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.profile__photo { position: relative; align-self: start; aspect-ratio: 4 / 5; background: #fff; }
.profile__photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--accent); }
.profile__photo img { display: block; width: 100%; height: 100%; background: #fff; object-fit: cover; object-position: top; }
.profile__main { max-height: min(92vh, 92dvh); overflow-y: auto; padding: clamp(28px, 4vw, 52px); }
.profile__role { margin: 0 64px 8px 0; font-family: var(--font-display); font-size: 1.2rem; letter-spacing: .1em; text-transform: uppercase; color: #8a5a0b; }
.profile__name { margin: 0 64px 8px 0; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: .95; text-transform: uppercase; color: #1a1a1a; }
.profile__name:focus { outline: none; }
.profile__org { margin: 0 0 22px; font-style: italic; color: #595959; }
.profile__bio p { margin: 0 0 1em; font-size: 1.04rem; line-height: 1.68; color: #2b2b2b; }
.profile__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 30px; padding-top: 22px; border-top: 2px solid #eee; }
.profile__step { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px; border: 0; background: #f6f4ef; color: #1a1a1a; font: inherit; font-size: .95rem; font-weight: 600; line-height: 1.25; text-align: left; cursor: pointer; transition: background .2s; }
.profile__step--next { justify-content: flex-end; text-align: right; }
.profile__step small { display: block; font-family: var(--font-display); font-size: .98rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: #595959; }
.profile__step svg { width: 22px; height: 22px; flex-shrink: 0; }
.profile__step:hover { background: var(--accent); }
.profile__step:focus-visible { outline: 3px solid #000; outline-offset: 2px; }

/* Responsive */
@media (max-width: 1060px) {
  .team-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .team-intro__inner { grid-template-columns: 1fr; }
  .team-grid, .team-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .team-grid, .team-grid--3, .team-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .member__body { padding: 12px 12px 14px; }
  .member__name { font-size: 1.32rem; }
  .member__role { font-size: .95rem; }
  .member__org { font-size: .86rem; }
  .member__more { font-size: .98rem; }
  .profile { overflow-y: auto; max-height: 94dvh; }
  .profile__inner { grid-template-columns: 1fr; }
  .profile__photo { aspect-ratio: auto; height: min(300px, 42vh); }
  .profile__photo img { object-fit: contain; object-position: center bottom; }
  .profile__main { max-height: none; overflow: visible; padding: 22px var(--gutter) 26px; }
  .profile__nav { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
  .team-group__head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .member__body { padding: 10px 10px 12px; }
  .member__name { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .member, .member__photo img, .member__photo::after, .member__more svg, .team-jump a { transition: none; }
  .member:hover { transform: none; }
  .member:hover .member__photo img { transform: none; }
  .profile[open] { animation: none; }
}

/* ==============================================================
   46. MASTHEAD: two-tier site header (all pages)
   ┌ black: social ┐┌ grey: phone · email ······ [Join us] [Contact us] ┐  ← scrolls away
   └ yellow: logo  ┘└ white: menu ···································· ┘  ← stays on screen
   The left column lines up with the page container's left edge.
   ============================================================== */
.masthead {
  --top-h: 40px;
  --brand-w: calc(var(--edge) + clamp(250px, 24vw, 320px));
  position: sticky; top: calc(-1 * var(--top-h)); z-index: 50;
  background: #fff; color: #1a1a1a; box-shadow: 0 8px 24px -16px rgba(0,0,0,.35);
}
.masthead svg { display: block; }

/* Top tier */
.masthead__top { display: grid; grid-template-columns: var(--brand-w) minmax(0, 1fr); height: var(--top-h); }
.masthead__social { display: flex; align-items: center; padding-left: var(--edge); background: #1a1a1a; }
.masthead__social ul { display: flex; gap: 4px; list-style: none; margin: 0 0 0 -10px; padding: 0; }
.masthead__social a { display: grid; place-items: center; width: 36px; height: 36px; color: #fff; transition: color .2s, transform .2s var(--ease); }
.masthead__social svg { width: 17px; height: 17px; }
.masthead__social a:hover { color: var(--accent); transform: translateY(-1px); }
.masthead__social a:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.masthead__utility { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 var(--edge) 0 clamp(20px, 3vw, 40px); background: #eeede9; }
.masthead__contact { display: flex; gap: clamp(14px, 2vw, 28px); margin: 0; font-size: .86rem; white-space: nowrap; }
.masthead__contact a { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; color: #3a3a3a; text-decoration: none; }
.masthead__contact svg { width: 15px; height: 15px; color: #8a5a0b; }
.masthead__contact a:hover { color: #000; text-decoration: underline; text-underline-offset: 3px; }
.masthead__contact a:focus-visible { outline: 3px solid #000; outline-offset: 2px; }
.masthead__actions { display: flex; gap: 10px; margin-left: auto; }
.masthead__btn {
  display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px;
  border: 2px solid #a8a59c; color: #3a3a3a; background: transparent;
  font-family: var(--font-display); font-size: 1rem; letter-spacing: .08em; line-height: 1; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s;
}
.masthead__btn svg { width: 15px; height: 15px; }
.masthead__btn:hover { border-color: #1a1a1a; color: #000; }
.masthead__btn--solid { background: #1a1a1a; border-color: #1a1a1a; color: #fff; }
.masthead__btn--solid svg { color: var(--accent); }
.masthead__btn--solid:hover, .masthead__btn--solid[aria-current="page"] { background: #c62f27; border-color: #c62f27; color: #fff; }
.masthead__btn:focus-visible { outline: 3px solid #000; outline-offset: 2px; }

/* Main tier */
.masthead__main { position: relative; display: grid; grid-template-columns: var(--brand-w) minmax(0, 1fr); min-height: 96px; }
.masthead__brand { display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px var(--edge); background: var(--accent); color: #1a1a1a; text-decoration: none; }
.masthead__shield { width: auto; height: 62px; background: none; transition: transform .3s var(--ease); }
.masthead__brand:hover .masthead__shield { transform: rotate(-4deg) scale(1.05); }
.masthead__brand:focus-visible { outline: 3px solid #000; outline-offset: -5px; }
.masthead__name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.masthead__title { font-family: var(--font-display); font-size: 1.75rem; line-height: .95; letter-spacing: .03em; text-transform: uppercase; }
.masthead__bar { display: flex; align-items: stretch; justify-content: flex-end; gap: clamp(6px, 1.4vw, 18px); padding: 0 var(--edge) 0 clamp(20px, 3vw, 40px); background: #fff; border-bottom: 4px solid var(--accent); }

.masthead__nav { display: flex; margin-right: clamp(16px, 4vw, 64px); }
.masthead__nav > ul { display: flex; align-items: stretch; gap: clamp(18px, 2.4vw, 36px); list-style: none; margin: 0; padding: 0; }
.masthead__nav > ul > li { position: relative; display: flex; align-items: center; }
.masthead .nav a {
  position: relative; display: flex; align-items: center; height: 100%; padding: 0;
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase;
  color: #1a1a1a; text-decoration: none; text-shadow: none; transition: color .2s;
}
.masthead__nav > ul > li > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; background: #1a1a1a; transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.masthead .nav a:hover, .masthead .nav a[aria-current="page"] { color: #8a5a0b; }      /* 5.9:1 on white */
.masthead__nav > ul > li > a:hover::after, .masthead__nav > ul > li > a[aria-current="page"]::after { transform: scaleX(1); }
.masthead .nav a:focus-visible { outline: 3px solid #000; outline-offset: 4px; }
.masthead .has-sub { flex-wrap: nowrap; }
.masthead .sub-toggle { width: 26px; height: 32px; margin-left: 2px; color: #1a1a1a; }
.masthead .sub-toggle:hover { color: #8a5a0b; }
.masthead .sub-toggle svg { width: 12px; height: 12px; }
.masthead .sub-toggle:focus-visible { outline: 3px solid #000; outline-offset: 0; }
.masthead .has-sub:has(.submenu a[aria-current="page"]) > a { color: #8a5a0b; }
.masthead .submenu {
  position: absolute; top: calc(100% + 4px); left: -18px; min-width: 210px; margin: 0; padding: 6px 0;
  background: #fff; border: 0; border-top: 4px solid var(--accent); box-shadow: 0 18px 30px -12px rgba(0,0,0,.35);
}
.masthead .submenu a { display: flex; height: auto; padding: 12px 18px; font-size: 1.1rem; }
.masthead .submenu a:hover { background: #f6f4ef; }

.masthead .nav-toggle { display: none; }

/* Medium screens: drop the email, then the phone, to keep one tidy line */
@media (max-width: 1180px) { .masthead__contact a[href^="mailto:"] { display: none; } }
@media (max-width: 1040px) {
  .masthead__title { font-size: 1.5rem; }
    .masthead__nav > ul { gap: 18px; }
  .masthead .nav a { font-size: 1.1rem; }
}

/* Phones and tablets: menu folds into a panel under the main bar */
@media (max-width: 900px) {
  .masthead { --brand-w: auto; }
  .masthead__top { grid-template-columns: auto minmax(0, 1fr); }
  .masthead__social { padding-inline: var(--gutter) 12px; }
  .masthead__utility { padding: 0 var(--gutter) 0 12px; }
  .masthead__contact { display: none; }
  .masthead__main { grid-template-columns: minmax(0, 1fr) auto; min-height: 76px; }
  .masthead__nav { margin-right: 0; }
  .masthead__brand { padding: 8px 12px 8px var(--gutter); }
  .masthead__shield { height: 46px; }
  .masthead__bar { padding: 0 var(--gutter) 0 8px; gap: 6px; align-items: center; }
  .masthead .nav-toggle {
    display: grid; place-items: center; position: static; width: 46px; height: 46px; padding: 0;
    border: 2px solid #1a1a1a; background: #fff; cursor: pointer;
  }
  .masthead .nav-toggle__bar, .masthead .nav-toggle__bar::before, .masthead .nav-toggle__bar::after { display: block; width: 20px; height: 2px; background: #1a1a1a; margin: 0; position: relative; transition: transform .3s; }
  .masthead .nav-toggle__bar::before, .masthead .nav-toggle__bar::after { content: ""; position: absolute; left: 0; }
  .masthead .nav-toggle__bar::before { top: -6px; }
  .masthead .nav-toggle__bar::after { top: 6px; }
  .masthead .nav-toggle[aria-expanded="true"] { background: var(--accent); }
  .masthead .nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
  .masthead .nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(6px) rotate(45deg); }
  .masthead .nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { transform: translateY(-6px) rotate(-45deg); }
  .masthead .nav-toggle:focus-visible { outline: 3px solid #000; outline-offset: 2px; }

  .masthead__nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    max-height: calc(100dvh - 80px); overflow-y: auto;
    background: #fff; border-bottom: 4px solid var(--accent); box-shadow: 0 24px 30px -18px rgba(0,0,0,.45);
  }
  .masthead__nav.is-open { display: block; }
  .masthead__nav > ul { flex-direction: column; gap: 0; padding: 4px 0 10px; }
  .masthead__nav > ul > li { display: flex; flex-wrap: wrap; align-items: center; border-top: 1px solid #ecebe6; padding-inline: var(--gutter); }
  .masthead .nav a { min-height: 52px; height: auto; font-size: 1.3rem; }
  .masthead__nav > ul > li > a { flex: 1; }
  .masthead__nav > ul > li > a::after { display: none; }
  .masthead__nav > ul > li > a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--accent); padding-left: 12px; }
  .masthead .has-sub { flex-wrap: wrap; }
  .masthead .sub-toggle { width: 48px; height: 48px; }
  .masthead .submenu { position: static; flex-basis: 100%; min-width: 0; margin: 0 0 8px; padding: 0 0 0 14px; border-top: 0; border-left: 3px solid var(--accent); box-shadow: none; }
  .masthead .submenu a { padding: 0 0 0 4px; min-height: 48px; font-size: 1.2rem; }
}
@media (max-width: 600px) {
  .masthead__title { font-size: 1.12rem; }
  .masthead__shield { height: 40px; }
  .masthead__brand { gap: 10px; }
  .masthead__actions { gap: 6px; }
  .masthead__btn { padding: 0 9px; font-size: .95rem; }
}
@media (max-width: 380px) {
  .masthead__btn:not(.masthead__btn--solid) { display: none; }
  .masthead__social ul { gap: 0; }
  .masthead__title { font-size: 1.02rem; }
}
@media (prefers-reduced-motion: reduce) {
  .masthead__social a, .masthead__shield, .masthead__nav > ul > li > a::after { transition: none; }
  .masthead__brand:hover .masthead__shield, .masthead__social a:hover { transform: none; }
}

/* ==============================================================
   47. HOME: MISSION + SPOTLIGHT (replaces the placeholder gallery)
   Mission statement beside its intro, then a three-story mosaic:
   one large lead story on the left, two stacked on the right.
   ============================================================== */
.spotlight { background: #fff; }
.spotlight__head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(28px, 3.6vw, 48px); }
.spotlight__title { margin: 0; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1; text-transform: uppercase; color: #1a1a1a; }
.spotlight__title .accent { color: var(--accent-dark); }
.spotlight__intro p { margin: 0 0 16px; font-size: clamp(1.02rem, 1.15vw, 1.12rem); line-height: 1.65; color: #2b2b2b; }
.spotlight__all { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-bottom: 2px; border-bottom: 3px solid var(--accent); color: #1a1a1a; font-family: var(--font-display); font-size: 1.25rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: border-color .2s, color .2s; }
.spotlight__all:hover { color: #8a5a0b; border-color: #8a5a0b; }
.spotlight__all:focus-visible { outline: 3px solid #000; outline-offset: 3px; }

.spotlight__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(260px, 1fr)); gap: 6px; min-height: clamp(540px, 46vw, 660px); }
.story { position: relative; overflow: hidden; display: flex; align-items: flex-end; background: #1a1a1a; isolation: isolate; }
.story--lead { grid-row: span 2; }
.story picture, .story img { position: absolute; inset: 0; width: 100%; height: 100%; }
.story img { object-fit: cover; background: #1a1a1a; transition: transform .7s var(--ease); }
.story--lead img { object-position: 50% 40%; }
.story::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0,0,0,.93) 0%, rgba(0,0,0,.84) 42%, rgba(0,0,0,.35) 70%, rgba(0,0,0,0) 90%); }
.story::after { content: ""; position: absolute; left: 0; bottom: 0; z-index: 2; width: 72px; height: 6px; background: var(--accent); transition: width .35s var(--ease); }
.story--project::after { background: #c62f27; }
.story__body { position: relative; z-index: 2; width: 100%; padding: clamp(18px, 2.4vw, 34px); color: #fff; }
.story__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 10px; font-size: .9rem; color: #ececec; }
.story__chip { padding: 3px 9px 2px; background: var(--accent); color: #000; font-family: var(--font-display); font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; }
.story--project .story__chip { background: #c62f27; color: #fff; }
.story__title { margin: 0 0 14px; max-width: 30ch; font-size: clamp(1.45rem, 2.1vw, 2rem); line-height: 1.04; letter-spacing: .03em; text-transform: uppercase; color: #fff; }
.story--lead .story__title { max-width: 26ch; font-size: clamp(1.9rem, 3.2vw, 3rem); }
.story__title a { color: inherit; text-decoration: none; }
.story__title a::after { content: ""; position: absolute; inset: 0; z-index: 3; }        /* whole tile is clickable */
.story__title a:focus-visible { outline: none; }
.story__title a:focus-visible::after { outline: 4px solid var(--accent); outline-offset: -4px; }
.story__more { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 1.1rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.story__more svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.story:hover img { transform: scale(1.05); }
.story:hover::after { width: 100%; }
.story:hover .story__more svg { transform: translateX(5px); }

@media (max-width: 900px) {
  .spotlight__head { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 760px) {
  .spotlight__grid { grid-template-columns: 1fr; grid-template-rows: none; min-height: 0; }
  /* Phones: photo on top, headline on solid black below it, so text never sits on a busy photo */
  .story, .story--lead { display: block; grid-row: auto; min-height: 0; }
  .story picture { position: relative; display: block; height: auto; aspect-ratio: 16 / 9; }
  .story img { position: absolute; }
  .story::before { display: none; }
  .story__body { padding: 18px var(--gutter) 24px; }
  .story--lead .story__title { font-size: clamp(1.7rem, 7vw, 2.1rem); }
}
@media (prefers-reduced-motion: reduce) {
  .story img, .story::after, .story__more svg { transition: none; }
  .story:hover img { transform: none; }
}

/* 47b. The strategy card sits flush against the hero, so it only fades in (no slide that would open a gap) */
.strategy-card.reveal, .strategy-card.reveal.is-visible { margin-top: 0; transform: none; }

/* ==============================================================
   48. 404 PAGE
   ============================================================== */
.notfound { background: #f6f4ef; }
.notfound__inner { padding-block: clamp(64px, 10vw, 140px); }
.notfound__code { margin: 0; font-family: var(--font-display); font-size: clamp(6rem, 20vw, 13rem); line-height: .8; color: transparent; -webkit-text-stroke: 3px #1a1a1a; }
.notfound__title { margin: 18px 0 12px; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1; text-transform: uppercase; color: #1a1a1a; }
.notfound__lead { max-width: 52ch; margin: 0 0 26px; font-size: 1.1rem; line-height: 1.6; color: #333; }
.notfound__links { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.notfound__links a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; background: #1a1a1a; color: #fff; font-family: var(--font-display); font-size: 1.2rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: background .2s, color .2s; }
.notfound__links li:first-child a { background: var(--accent); color: #000; }
.notfound__links a:hover { background: #c62f27; color: #fff; }
.notfound__links a:focus-visible { outline: 3px solid #000; outline-offset: 3px; }

/* 47c. "At MYCU, our objectives are clear and ambitious": never more than 3 lines.
   The size follows the panel's own width (container units), so it fits at every screen size. */
@media (min-width: 901px) {
  .strategy-card__body { container-type: inline-size; }
  .strategy__title { font-size: clamp(1.6rem, 12.5cqi, 3rem); text-wrap: balance; }
}

/* ==============================================================
   49. CONTENT PROTECTION (with js/protect.js)
   Photos can't be dragged out or saved with a long-press on phones.
   ============================================================== */
img, picture, video { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
.protect-note {
  position: fixed; left: 50%; bottom: 20px; z-index: 200; width: max-content; max-width: calc(100vw - 32px);
  padding: 12px 18px; background: #1a1a1a; color: #fff; border-left: 6px solid var(--accent);
  font-size: .95rem; line-height: 1.4; box-shadow: 0 16px 32px -12px rgba(0,0,0,.5);
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s var(--ease);
}
.protect-note.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .protect-note { transition: none; } }

/* 46b. Logo name: "Champions" is spread to the exact width of "Malaria Youth" on wide screens
   (letters spaced out, not distorted). Screen readers hear the normal word. */
@media (min-width: 901px) {
  .masthead__title { display: inline-grid; }
  .masthead__line { display: block; }
  .masthead__line--fit { display: flex; justify-content: space-between; }
}