:root {
  /* ---------- Brand palette (warm, light, human) ---------- */
  --color-bg: #f7f3ea;          /* main background — warm ivory */
  --color-bg-alt: #e9dfcf;      /* alternate section background — soft sand */
  --color-surface: #fffcf7;     /* cards and light surfaces — soft white */
  --color-text: #252a28;        /* primary text — deep charcoal */
  --color-text-muted: #4b524b;  /* secondary text — softened charcoal, AA-safe on ivory/sand */

  --color-accent: #c9633d;         /* primary accent — terracotta (small highlights, links, borders) */
  --color-accent-strong: #a84c2c;  /* deepened terracotta for solid button fills — keeps white label text AA-compliant */
  --color-olive: #65705a;          /* supporting accent */
  --color-olive-deep: #5c644c;     /* medium muted olive — People section background. Lightened from an earlier, darker pass; capped here (not lighter) because sand text drops below AA 4.5:1 past this point — see comment on .people-section */
  --color-olive-deep-tint: #757b65; /* one step lighter than olive-deep, for the placeholder stripe pattern on that background */
  --color-olive-footer: #4f5840;   /* footer background — a shade darker than --color-olive-deep, as requested; ivory/sand text both verified AA against it (6.77:1 / 5.68:1) */
  --color-blue-green: #547b78;     /* optional water-related accent, used sparingly */

  --color-border: rgba(37, 42, 40, 0.12); /* thin, understated borders */
  --shadow-soft: 0 12px 28px rgba(37, 42, 40, 0.08);

  --font-heading: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.65;
}

a {
  color: inherit;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
}

/* ---------- Header / Navigation ---------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 2rem;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

/* Logo is a roughly-square badge mark (fish + stacked wordmark), not a wide
   horizontal wordmark, so it's sized by height with width following the
   image's own intrinsic aspect ratio — never stretched or cropped. The
   surrounding header padding above is the "clear space" around it. */
.brand-logo {
  display: block;
  height: 82px;
  width: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.site-nav a {
  text-decoration: none;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: color 0.2s ease;
}

.site-nav a:hover {
  color: var(--color-text);
}

.nav-cta {
  /* Explicit here, not inherited — it used to rely on .site-nav a's
     text-decoration:none, but .nav-cta moved out of .site-nav into
     .header-actions when the mobile menu was built, which silently
     brought back the browser-default underline. */
  text-decoration: none;
  padding: 0.55rem 1.3rem;
  background: var(--color-accent-strong);
  border-radius: 999px;
  color: var(--color-surface) !important;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(168, 76, 44, 0.28);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  cursor: pointer;
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.nav-toggle-bar {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--color-text);
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Simple X-morph on open — no extra markup, just rotate/hide the three
   bars around the middle one's centre. */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ---------- Hero ---------- */
/* Photographic hero: a still from the Foundation's own footage (no standalone
   photographs of the mentorship relationship existed in the supplied assets —
   see project notes) showing genuine connection, not a catch. A light
   ivory-to-transparent panel sits behind the copy for legibility; there is no
   dark overlay across the photo itself. */

.hero {
  position: relative;
  width: 100%;
  /* Leave a deliberate sliver of the next section visible on a standard
     laptop screen, rather than filling the entire viewport. */
  height: calc(100vh - 72px);
  min-height: 520px;
  max-height: 860px;
  overflow: hidden;
  background-color: var(--color-bg-alt);
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 72% 32%;
}

.hero-wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* A soft ivory panel behind the text column, plus a very light overall
     warmth wash and edge vignette — never a dark scrim. */
  background:
    linear-gradient(100deg, rgba(247, 243, 234, 0.94) 0%, rgba(247, 243, 234, 0.72) 34%, rgba(247, 243, 234, 0) 62%),
    radial-gradient(ellipse at 50% 50%, rgba(247, 243, 234, 0) 55%, rgba(247, 243, 234, 0.25) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  /* Wider than the paragraph's own 30rem cap below — this is what gives the
     button row (see .hero-actions) enough room to sit side by side on
     desktop/tablet without wrapping; it doesn't widen the paragraph itself,
     since that has its own explicit max-width. */
  max-width: 40rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  padding: 0 1.5rem 0 clamp(1.5rem, 7vw, 6.5rem);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-accent-strong);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  margin-bottom: 0.9rem;
}

/* The only eyebrow line in the hero (a former "CARP HUNTERS FOUNDATION"
   line above it, duplicating the header/logo, was removed) — borrows
   .eyebrow's restrained terracotta treatment but a touch smaller/lighter.
   margin-bottom is inherited from .eyebrow. */
.eyebrow--tagline {
  display: block;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--color-accent);
  opacity: 0.85;
}

.hero-content h1 {
  font-weight: 700;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.15;
  margin: 0 0 1.1rem;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.hero-content p {
  max-width: 30rem;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--color-text-muted);
  margin: 0 0 2rem;
}

.hero-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 14px;
  justify-content: flex-start;
}

.scroll-hint {
  position: absolute;
  bottom: 1.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--color-text-muted);
  opacity: 0.6;
  font-size: 1.3rem;
}

/* Shallow curved transition into "Why We Exist" — a single static shape,
   filled with that section's own ivory background, clipped inside the
   hero's existing box (see .hero's overflow:hidden) so it never adds
   height or overflows horizontally at any width. */
.hero-curve {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 44px;
  z-index: 2;
}

.hero-curve path {
  fill: var(--color-bg);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 0.85rem 1.75rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.btn-primary {
  background: var(--color-accent-strong);
  color: var(--color-surface);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(168, 76, 44, 0.28);
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--color-text);
  color: var(--color-text);
}

.btn-secondary:hover {
  background: var(--color-text);
  color: var(--color-surface);
  transform: translateY(-2px);
}

/* ---------- Content sections ----------
   Shared base rules for the four main <section> elements — each section
   also has its own scoped overrides further down (#why, #programme,
   .people-section, .sponsor) for anything that differs from this base. */

.content-section {
  padding: 5.5rem 1.5rem;
}

.content-section.alt {
  background: var(--color-bg-alt);
}

.section-inner {
  max-width: 68rem;
  margin: 0 auto;
}

.section-inner.center {
  text-align: center;
}

.content-section .eyebrow {
  color: var(--color-accent-strong);
}

.content-section h2 {
  font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  margin: 0 0 2rem;
  color: var(--color-text);
}

.section-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.section-grid.reverse {
  grid-template-columns: 1fr 1.1fr;
}

.section-text p {
  color: var(--color-text-muted);
}

/* ---------- Mission section ("Why We Exist") ----------
   Scoped to #why specifically so its lede/paragraph spacing doesn't affect
   the shared .content-section/.section-text base rules other sections
   also use. */

#why h2 {
  margin-bottom: 1rem;
}

#why .section-lede {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.7vw, 1.35rem);
  line-height: 1.4;
  color: var(--color-text);
  margin: 0 0 1.25rem;
}

#why .section-text p {
  margin: 0 0 1.25rem;
}

#why .section-text p:last-child {
  margin-bottom: 0;
}

/* Wider carousel column — the centre-mode effect needs room to show the
   active slide plus slivers of its neighbours. Scoped to a min-width media
   query deliberately: #why's ID specificity would otherwise beat the
   shared 860px single-column collapse rule below and break mobile stacking
   regardless of source order. */
@media (min-width: 861px) {
  #why .section-grid {
    grid-template-columns: 1fr 1.15fr;
    gap: 3rem;
  }
}

/* ---------- Mission carousel ----------
   Centre-mode carousel: every slide shares the same flex-basis (so the
   translateX centring math in js/mission-carousel.js stays simple), and the
   size difference between the active slide and its neighbours is purely a
   visual transform:scale — that doesn't affect layout, which is what lets
   the viewport's height settle naturally from the (uniform, unscaled) slide
   height without any JS-measured height juggling. */

.carousel {
  position: relative;
}

.carousel-viewport {
  overflow: hidden;
}

.carousel-track {
  display: flex;
  align-items: center;
  transition: transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
  touch-action: pan-y;
  border-radius: 12px;
}

.carousel-track:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

.carousel-slide {
  flex: 0 0 auto;
  width: min(70%, 320px);
  margin: 0 10px;
  transform: scale(0.82);
  opacity: 0.5;
  transition: transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 620ms ease;
  cursor: pointer;
}

.carousel-slide.is-active {
  transform: scale(1);
  opacity: 1;
  cursor: default;
}

.carousel-slide-inner {
  aspect-ratio: 3 / 4;
  width: 100%;
  height: auto;
  border-radius: 12px;
  overflow: hidden;
}

.carousel-slide-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: rgba(255, 252, 247, 0.85);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  padding: 0;
}

.carousel-arrow svg {
  width: 18px;
  height: 18px;
}

.carousel-arrow:hover,
.carousel-arrow:focus-visible {
  background: var(--color-surface);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-soft);
}

.carousel-arrow--prev {
  left: -4px;
}

.carousel-arrow--next {
  right: -4px;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 999px;
  border: none;
  background: var(--color-border);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.carousel-dot[aria-selected="true"] {
  background: var(--color-accent-strong);
  transform: scale(1.25);
}

/* Reduced motion: the carousel stays fully usable, it just stops animating —
   JS also skips starting autoplay in this case. */
@media (prefers-reduced-motion: reduce) {
  .carousel-track,
  .carousel-slide {
    transition: none;
  }
}

@media (max-width: 767px) {
  .carousel-slide {
    width: min(80%, 260px);
    margin: 0 6px;
  }

  .carousel-arrow {
    width: 34px;
    height: 34px;
  }

  .carousel-arrow--prev {
    left: 2px;
  }

  .carousel-arrow--next {
    right: 2px;
  }
}

/* ---------- Programme pathway ("How the Programme Works") ----------
   Four stages laid along a single connecting line rather than in cards.
   Each .pathway-stage is its own fixed-height grid (1fr / auto / 1fr) so the
   marker (the auto row) always centres vertically regardless of how much
   copy sits above or below it — that's what keeps the four markers level
   with each other without any JS measurement. Content alternates above/below
   via the --above / --below modifiers, which just swap which row (1 or 3)
   the content sits in. */

/* Scoped padding override — shallower than the shared .content-section
   5.5rem, part of the ~25-30% height reduction for this section only. */
#programme.content-section {
  padding-top: 2.75rem;
  padding-bottom: 2.75rem;
}

#programme h2 {
  margin-bottom: 0.5rem;
}

#programme .section-lede {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.7vw, 1.35rem);
  line-height: 1.4;
  color: var(--color-text);
  max-width: 34rem;
  margin: 0 0 0.5rem;
}

.pathway {
  position: relative;
  margin-top: 1rem;
}

.pathway-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Each tier's curve is only shown in the width range it was calibrated
   for — see the HTML comment above these two <svg> elements for why one
   curve can't safely cover both. */
.pathway-line--desktop,
.pathway-line--tablet {
  display: none;
}

@media (min-width: 980px) {
  .pathway-line--desktop {
    display: block;
  }
}

@media (min-width: 768px) and (max-width: 979px) {
  .pathway-line--tablet {
    display: block;
  }
}

.pathway-line-path {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.4;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.3s ease;
}

.pathway.is-visible .pathway-line-path {
  stroke-dashoffset: 0;
}

.pathway-line-mobile {
  display: none;
}

.pathway-stages {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Without this, grid's default align-items:stretch forces every stage to
     match the height of the tallest one, and CSS Grid's distribution of
     that extra space across each stage's own minmax(210px,auto)/auto/
     minmax(210px,auto) rows isn't consistent stage-to-stage — which was
     quietly un-levelling the markers again at narrower widths even after
     the minmax fix below. Each stage keeping its own natural (unstretched)
     height is what makes every stage's row maths independent and reliable. */
  align-items: start;
  gap: 0 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pathway-stage {
  display: grid;
  /* Fixed (floor) row heights, not 1fr — 1fr only splits space evenly when
     both rows actually have content in them. Here one of row1/row3 is
     always empty (only "above" stages use row1, only "below" stages use
     row3), so with 1fr the empty row collapsed toward its own near-zero
     content-minimum while the populated row claimed the rest, pulling the
     marker row off-centre by a different amount per stage — which is what
     let the connecting line drift into the text. A shared minmax() floor
     keeps the marker at the same offset from the stage top on every stage
     regardless of which side has copy, and still grows if a row's content
     ever needs more than the floor. */
  /* Two-tier floor, not one fixed value — measured actual content height
     at every width in play: 768px needs up to 282.7px, 900px up to 231.2px,
     980px/1024px up to 219.4px, 1440px up to 189px. A single floor low
     enough to compact the common 980px+ desktop case would overflow and
     re-break marker alignment at 768-979px, where the narrower 4-column
     grid wraps the same (unshortened, unshrunk) copy onto more lines. So:
     290px here covers the 768-979px range (see the override below for
     980px+, reusing the site's existing nav-collapse breakpoint). */
  grid-template-rows: minmax(290px, auto) auto minmax(290px, auto);
  align-items: center;
  justify-items: center;
  text-align: center;
  min-width: 0;
}

/* At 980px+ the 4-column grid is wide enough that copy wraps to fewer
   lines (measured max 219.4px at 980-1024px, 189px by 1440px), so the
   floor can shrink a lot further here without touching the 768-979px
   safety floor above — this is most of this pass's height reduction. */
@media (min-width: 980px) {
  .pathway-stage {
    grid-template-rows: minmax(225px, auto) auto minmax(225px, auto);
  }
}

.pathway-stage--above .pathway-content {
  grid-row: 1;
  align-self: end;
  padding-bottom: 1.5rem;
}

.pathway-stage--above .pathway-marker {
  grid-row: 2;
}

.pathway-stage--below .pathway-marker {
  grid-row: 2;
}

.pathway-stage--below .pathway-content {
  grid-row: 3;
  align-self: start;
  padding-top: 1.5rem;
}

.pathway-marker,
.pathway-content {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.pathway.is-visible .pathway-marker,
.pathway.is-visible .pathway-content {
  opacity: 1;
  transform: translateY(0);
}

.pathway-stage:nth-child(1) .pathway-marker,
.pathway-stage:nth-child(1) .pathway-content {
  transition-delay: 0.1s;
}

.pathway-stage:nth-child(2) .pathway-marker,
.pathway-stage:nth-child(2) .pathway-content {
  transition-delay: 0.35s;
}

.pathway-stage:nth-child(3) .pathway-marker,
.pathway-stage:nth-child(3) .pathway-content {
  transition-delay: 0.6s;
}

.pathway-stage:nth-child(4) .pathway-marker,
.pathway-stage:nth-child(4) .pathway-content {
  transition-delay: 0.85s;
}

.pathway-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
}

.pathway-marker-icon {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-strong);
  flex-shrink: 0;
}

.pathway-marker-icon svg {
  width: 20px;
  height: 20px;
}

.pathway-number {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--color-accent-strong);
}

.pathway-content h3 {
  font-size: 1.15rem;
  margin: 0 0 0.5rem;
  color: var(--color-text);
}

.pathway-content p {
  color: var(--color-text-muted);
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  max-width: 100%;
}

/* Reduced motion: show the complete pathway immediately, no line reveal,
   no fade/rise — js/programme-pathway.js also skips the IntersectionObserver
   entirely in this case and adds .is-visible on load. */
@media (prefers-reduced-motion: reduce) {
  .pathway-line-path,
  .pathway-marker,
  .pathway-content {
    transition: none;
  }
}

/* Below 768px: vertical journey — line on the left, marker + content side
   by side per stage, reading order top to bottom. */
@media (max-width: 767px) {
  .pathway-line {
    display: none;
  }

  .pathway-stages {
    /* Undo the desktop-only align-items:start (see base .pathway-stages
       rule) — in a column flex layout align-items controls the cross
       (horizontal) axis, not vertical, and "start" there was collapsing
       each stage to its own min-content width instead of filling the row. */
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
  }

  .pathway-stage,
  .pathway-stage--above,
  .pathway-stage--below {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: none;
    height: auto;
    column-gap: 1.25rem;
    text-align: left;
    align-items: start;
    justify-items: start;
  }

  .pathway-stage--above .pathway-marker,
  .pathway-stage--below .pathway-marker {
    grid-row: 1;
    grid-column: 1;
  }

  .pathway-stage--above .pathway-content,
  .pathway-stage--below .pathway-content {
    grid-row: 1;
    grid-column: 2;
    align-self: start;
    padding: 0;
  }

  .pathway-content p {
    max-width: none;
  }

  .pathway-line-mobile {
    display: block;
    position: absolute;
    left: 21px;
    /* Measured, not assumed: the marker is icon + gap + number stacked
       (~73px tall), not just the 44px icon circle, so its centre sits
       further from the row edge than half the circle would suggest — and
       the first/last stage's own row height (whichever of marker/content is
       taller) differs slightly, hence the two different offsets. */
    top: 50px;
    bottom: 72px;
    width: 1.5px;
    background: var(--color-accent);
    opacity: 0.4;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 1.15s ease;
  }

  .pathway.is-visible .pathway-line-mobile {
    transform: scaleY(1);
  }
}

/* ---------- People section ("People Behind the Purpose") ----------
   Medium muted olive editorial section — lighter than the first pass, but
   deliberately not as light as the range first suggested when refining
   this section. At that lighter range (#6F775D-#747C63), soft sand (the
   colour used for role/bio text) drops to ~3.3-3.6:1 against the
   background — below the 4.5:1 AA needs for text that size, and even
   switching everything to ivory only reaches ~4.2:1 at the lightest end.
   #5c644c is the lightest shade in that direction that keeps sand (the
   tighter of the two) at >=4.5:1 (measures 4.71:1; ivory measures 5.61:1),
   so it's the boundary AA allows rather than the exact suggested hex.

   Compact 2x2 grid on desktop (was one profile per row): every profile
   combines a smaller portrait + text side by side, columns alternate which
   side the portrait sits on for rhythm, and a subtle low-opacity numeral
   sits behind each one. Terracotta stays reserved for decorative-only
   elements (the accent marks, the numerals) rather than label text itself,
   for the same contrast reason as before — it measures ~1.2-1.3:1 against
   this background, nowhere near text-safe. */

.people-section {
  position: relative;
  background: var(--color-olive-deep);
  overflow: hidden;
  padding-top: 3.25rem;
  padding-bottom: 3.25rem;
}

.people-wave {
  position: absolute;
  left: 0;
  width: 100%;
  height: 28px;
  z-index: 1;
}

.people-wave path {
  fill: var(--color-bg-alt);
}

.people-wave--top {
  top: 0;
}

.people-wave--bottom {
  bottom: 0;
}

.accent-mark {
  display: inline-block;
  width: 1.1rem;
  height: 2px;
  background: var(--color-accent);
  margin-right: 0.6rem;
  flex-shrink: 0;
}

.people-section h2 {
  color: var(--color-bg);
  margin: 0 0 0.75rem;
}

.people-section .section-lede {
  color: var(--color-bg-alt);
  max-width: 32rem;
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0 0 2rem;
}

.people-list {
  position: relative;
  z-index: 1;
  display: grid;
  /* Columns size to their own content (not a full 1fr each) and the whole
     grid is centred — that's what keeps the two cards close together
     instead of stretching across the full section width. */
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  column-gap: 4.5rem;
  row-gap: 1.75rem;
}

.person {
  position: relative;
  display: grid;
  /* Fixed, deliberately smaller portrait-column width — roughly half the
     first pass's 340px — is what keeps each profile compact while still
     reading as a real photograph rather than a thumbnail. Text column is
     also fixed (not 1fr) so every card — and both grid columns — end up
     an identical width regardless of how long any one role title is. */
  grid-template-columns: 170px 200px;
  gap: 1.5rem;
}

.person-portrait {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(247, 243, 234, 0.14);
}

.person-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.person-text {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}

.person-text h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-bg);
  margin: 0 0 0.35rem;
}

.person-role {
  display: flex;
  align-items: center;
  color: var(--color-bg-alt);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
}

.person-number {
  position: absolute;
  top: -1rem;
  left: -0.5rem;
  z-index: 0;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2.75rem, 5vw, 4rem);
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.13;
  pointer-events: none;
  user-select: none;
}

/* Tablet and mobile both stack to a single column — same portrait-left,
   text-right card reused at full row width instead of a fixed text
   column, so there's no leftover gap or cramped wrapping at these
   widths. */
@media (max-width: 860px) {
  .people-list {
    grid-template-columns: 1fr;
  }

  .person {
    grid-template-columns: 170px 1fr;
  }

  .person-text {
    text-align: left;
  }

  .person-number {
    display: none;
  }
}

@media (max-width: 767px) {
  .people-section {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .people-wave {
    height: 18px;
  }

  .people-section .section-lede {
    margin-bottom: 1.5rem;
  }

  .person {
    grid-template-columns: 108px 1fr;
    gap: 1rem;
  }
}

/* ---------- Sponsor section ("Help Put Opportunity Within Reach") ----------
   Warm ivory background with olive text and terracotta accents — a
   deliberate change from this section's earlier sand background, chosen so
   it reads as its own focused CTA rather than a continuation of the
   surrounding sand-toned sections. Olive-on-ivory measures 4.72:1 (body
   copy) and 5.61:1 (heading, using the darker olive-deep) — both comfortably
   AA. Terracotta accent-strong (used for the eyebrow label) measures
   5.08:1; plain accent is reserved for the button fill and the decorative
   motif, where the relevant contrast is the button's own ivory-on-terracotta
   label text (already AA-safe per the .btn-primary comment), not terracotta
   against the page background. */

.sponsor {
  background: var(--color-bg);
  padding-top: 5rem;
  padding-bottom: 5.5rem;
}

.sponsor-motif {
  width: 90px;
  height: auto;
  margin: 0 auto 1rem;
  display: block;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.35;
}

.sponsor-motif circle {
  fill: var(--color-accent);
  stroke: none;
}

.sponsor-eyebrow {
  justify-content: center;
  color: var(--color-accent-strong);
}

.sponsor .section-inner.center {
  max-width: 36rem;
  margin: 0 auto;
}

#sponsor h2 {
  color: var(--color-olive-deep);
}

.sponsor-copy {
  text-align: left;
  margin: 0 auto 2.25rem;
}

.sponsor-copy p {
  color: var(--color-olive);
  font-size: 1.02rem;
  line-height: 1.7;
  margin: 0 0 1.15rem;
}

.sponsor-copy p:last-child {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .sponsor {
    padding-top: 3.5rem;
    padding-bottom: 4rem;
  }

  .sponsor-motif {
    width: 70px;
  }

  .sponsor-copy p {
    font-size: 0.95rem;
    line-height: 1.65;
  }
}

/* ---------- Footer ----------
   Deep olive, a shade darker than the leadership section, deliberately
   with no curved boundary above it (the brief explicitly asked to avoid
   stacking another curve right after the sponsor section) — just a clean
   flat colour change. Ivory for primary text, sand for supporting copy
   (same AA-checked pair used throughout the olive sections); terracotta is
   reserved for hover states and the divider, not resting label text — see
   the People section's contrast comment for why: terracotta only measures
   ~1.9:1 against this family of olive backgrounds. Focus outlines use sand
   rather than terracotta for the same reason — a focus ring needs to be
   reliably visible, not just decorative. */

.site-footer {
  padding: 3rem 1.5rem 1.75rem;
  color: var(--color-bg-alt);
  font-size: 0.9rem;
  background: var(--color-olive-footer);
}

.footer-inner {
  max-width: 68rem;
  margin: 0 auto;
}

.footer-main {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 2.5rem;
  text-align: left;
  margin-bottom: 2.25rem;
}

.footer-brand {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-bg);
  margin: 0 0 0.35rem;
}

.footer-tagline {
  /* Not --color-accent here — terracotta measures only ~1.9:1 against this
     background (same issue noted throughout the olive sections), so the
     accent lives in the mark beside it instead, and the text itself stays
     on the AA-safe sand/ivory pair. */
  display: flex;
  align-items: center;
  color: var(--color-bg-alt);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 0.9rem;
}

.footer-desc {
  color: var(--color-bg-alt);
  line-height: 1.6;
  max-width: 22rem;
  margin: 0;
}

.footer-heading {
  display: flex;
  align-items: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-bg);
  margin: 0 0 1rem;
}

.footer-links,
.footer-contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.footer-links a,
.footer-contact-item a {
  color: var(--color-bg-alt);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links a:hover,
.footer-links a:focus-visible,
.footer-contact-item a:hover,
.footer-contact-item a:focus-visible {
  color: var(--color-accent);
}

.footer-links a:focus-visible,
.footer-contact-item a:focus-visible {
  outline: 2px solid var(--color-bg-alt);
  outline-offset: 3px;
  border-radius: 2px;
}

.footer-contact-person {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-bg);
  margin: 0 0 0.75rem;
}

.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-bg-alt);
  line-height: 1.4;
}

.footer-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-bg-alt);
  opacity: 0.75;
}

.footer-icon svg {
  width: 16px;
  height: 16px;
}

.footer-contact-item.is-pending {
  color: var(--color-bg-alt);
  opacity: 0.75;
  font-size: 0.85rem;
  font-style: italic;
}

.footer-legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(201, 99, 61, 0.4);
  font-size: 0.8rem;
  color: var(--color-bg-alt);
  opacity: 0.85;
}

.footer-legal p {
  margin: 0;
}

@media (max-width: 767px) {
  .site-footer {
    /* Extra bottom padding, not the base 1.5rem — the fixed WhatsApp
       button (50px tall, 1rem/16px from the viewport bottom on mobile —
       see .whatsapp-fab) sits on top of whatever's at the true bottom of
       the page once fully scrolled, since it's viewport-fixed rather than
       part of document flow. 5.5rem clears the button's ~66px footprint
       with room to spare, so it never overlaps the copyright line. */
    padding: 2.5rem 1.5rem 5.5rem;
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
  }

  .footer-desc {
    max-width: none;
  }

  .footer-legal {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- Responsive ---------- */

/* Four nav links plus the CTA and wordmark is a lot to fit in one row below
   980px, so the nav links become a toggled dropdown panel instead — the
   exact same <nav> element, not a duplicated copy, just repositioned and
   hidden/shown by js/nav-toggle.js. "Support Us" stays visible in the
   header bar at every width since it's the primary conversion action. */
@media (max-width: 980px) {
  .nav-toggle {
    display: flex;
  }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 1.5rem 1rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-soft);
    display: none;
  }

  .site-nav.is-open {
    display: flex;
  }

  .site-nav a {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 1rem;
  }

  .site-nav a:last-child {
    border-bottom: none;
  }
}

@media (max-width: 860px) {
  .section-grid,
  .section-grid.reverse {
    grid-template-columns: 1fr;
  }

  .hero-video {
    object-position: 78% 28%;
  }
}

/* Below 768px: hero buttons stack full-width instead of sitting side by
   side. Primary stays first, secondary second — that's just DOM order. */
@media (max-width: 767px) {
  .hero-actions {
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
  }

  .hero-actions .btn {
    width: 100%;
    text-align: center;
  }

  .hero-curve {
    height: 28px;
  }
}

@media (max-width: 560px) {
  .site-header {
    padding: 0.65rem 1rem;
  }

  .brand-logo {
    height: 68px;
  }

  .nav-cta {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }

  .hero-wash {
    background:
      linear-gradient(180deg, rgba(247, 243, 234, 0.96) 0%, rgba(247, 243, 234, 0.8) 45%, rgba(247, 243, 234, 0.35) 100%);
  }

  .hero-content {
    padding: 0 1.25rem;
    align-items: flex-start;
  }
}

/* ---------- WhatsApp floating button ----------
   Deliberately WhatsApp's own green/white rather than the site's warm
   palette — the whole point is that it reads instantly as "this opens
   WhatsApp" at a glance, which a terracotta- or olive-toned version
   wouldn't. */
.whatsapp-fab {
  text-decoration: none;
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 30;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.whatsapp-fab svg {
  width: 28px;
  height: 28px;
}

.whatsapp-fab:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.whatsapp-fab:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .whatsapp-fab {
    right: 1rem;
    bottom: 1rem;
    width: 50px;
    height: 50px;
  }

  .whatsapp-fab svg {
    width: 26px;
    height: 26px;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .btn,
  .nav-cta,
  .whatsapp-fab {
    transition: none;
  }
}