/* ============================================================
   TAAE Foundation — KindAct-inspired theme
   Colours, type, components adapted from kindact.webflow.io
   Content + structure stays TAAE.
   ============================================================ */

:root {
  /* Brand palette (sampled from KindAct) */
  --forest:        #0b4e3d;   /* primary dark green bg */
  --forest-30:     #0b4e3d4d;
  --deep-pine:     #07271f;   /* darkest — body text on light */
  --deep-pine-60:  #07271fb3;
  --deep-pine-10:  #07271f1a;
  --teal:          #2b7f6a;
  --sage:          #a7c0b9;   /* subtle text / divider */
  --soft-aqua:     #cbe8e0;
  --mint:          #e6f5f1;   /* light section bg + card bg */
  --lime:          #a9cc4c;   /* signature accent — card panels (Mission/Vision) */
  --lime-deep:     #c2eb5e;
  --lime-bright:   #b0d64b;   /* refined button lime (nav + hero CTAs) */
  --lime-bright-deep: #a3cb3c;
  --green-arrow:   #31780f;   /* darker green arrow circle on bright-lime buttons */
  --lime-card:     #a9cc4c;   /* Who We Are overlapping card */
  --ink-brown:     #2d1717;   /* Who We Are text */
  --ink-black:     #080808;   /* hero h1 + get-involved button (Figma text-black) */
  --hero-lead:     rgba(74,74,74,0.82); /* hero lead paragraph */
  --surface-gray:  #eeeeee;   /* Who We Are section background */
  --cream:         #faf5f1;   /* warm section bg (Donate bank split, Figma 140:2099) */
  --charcoal:      #555555;
  --gray-stroke:   #cccccc;
  --white:         #ffffff;
  --white-15:      #ffffff26;
  --white-20:      #ffffff33;
  --white-30:      #ffffff4d;

  /* Fonts */
  --font-title: "Bricolage Grotesque", "Inter Tight", system-ui, sans-serif;
  --font-body:  "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Type scale */
  --fs-h1: 4rem;          /* 64 */
  --fs-h2: 2.5rem;        /* 40 */
  --fs-h3: 1.625rem;      /* 26 */
  --fs-h4: 1.125rem;      /* 18 */
  --fs-h5: 1rem;
  --fs-display: 4.5rem;
  --fs-xl:   1.5rem;
  --fs-lg:   1.25rem;
  --fs-md:   1.125rem;
  --fs-base: 1rem;
  --fs-sm:   0.875rem;
  --fs-xs:   0.75rem;

  --lh-h1:  1.21;
  --lh-h2:  1.36;
  --lh-body: 1.6;
  --lh-tight: 1.4;

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 60px;
  --sp-10: 80px;
  --sp-11: 120px;
  --sp-12: 144px;

  /* Radii */
  --r-xs:    10px;
  --r-sm:    20px;
  --r-md:    25px;
  --r-xl:    40px;
  --r-pill:  50px;

  /* Layout */
  --container: 1920px;
  --container-narrow: 1200px;
  --container-pad: 64px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(7, 39, 31, 0.06);
  --shadow-md: 0 12px 32px rgba(7, 39, 31, 0.10);
  --shadow-lg: 0 24px 60px rgba(7, 39, 31, 0.18);

  /* Dotted pattern for dark surfaces */
  --dots-light: radial-gradient(circle, rgba(255,255,255,0.06) 1.5px, transparent 1.5px);
  --dots-dark:  radial-gradient(circle, rgba(7,39,31,0.06) 1.5px, transparent 1.5px);
  --dots-size:  20px 20px;
}

/* ============================================================
   Reset + base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--deep-pine);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  /* Guard against any stray horizontal overflow on narrow phones.
     `clip` (not `hidden`) so it does NOT create a scroll container and
     therefore does NOT break the Mission/Vision position:sticky stacking. */
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-title);
  font-weight: 500;
  line-height: var(--lh-h2);
  letter-spacing: -0.005em;
  margin: 0 0 var(--sp-5);
  color: var(--deep-pine);
}
h1 { font-size: var(--fs-h1); font-weight: 700; line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; }
h4 { font-size: var(--fs-h4); font-weight: 600; }
p  { margin: 0 0 var(--sp-4); color: var(--charcoal); }

/* Decorative elements */
.script {
  font-family: var(--font-title);
  font-style: italic;
  color: var(--lime);
}
.eyebrow {
  display: inline-flex; align-items: center;
  font-family: var(--font-body); font-weight: 500;
  font-size: var(--fs-sm); letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--deep-pine);
  background: transparent;
  border: 1px solid var(--deep-pine);
  border-radius: var(--r-pill);
  padding: 10px 22px;
  margin-bottom: var(--sp-6);
}
.eyebrow.light {
  color: var(--white);
  border-color: var(--white-30);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -100px; left: 16px;
  background: var(--forest); color: white;
  padding: 12px 20px; border-radius: var(--r-pill);
  z-index: 1000; font-weight: 600;
}
.skip-link:focus { top: 16px; color: white; }

/* ============================================================
   Layout primitives
   ============================================================ */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--container-pad); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--container-pad); }

section { padding: var(--sp-11) 0; position: relative; }
section.tight { padding: var(--sp-9) 0; }
section.dark { background: var(--forest); color: var(--white); background-image: var(--dots-light); background-size: var(--dots-size); }
section.dark h1, section.dark h2, section.dark h3, section.dark h4 { color: var(--white); }
section.dark p { color: rgba(255, 255, 255, 0.78); }
section.mint { background: var(--mint); }

/* Big display heading on dark sections — per Figma 1:457 (h2, 58px) */
section.dark .section-head.center {
  margin-bottom: var(--sp-9);
  gap: var(--sp-4);            /* tight proximity between heading and its subtitle (was 60px grid gap) */
}
section.dark .section-head.center h2 {
  font-size: 58px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--white);
  max-width: 1344px;
  margin: 0 auto;             /* no extra bottom margin; the grid gap handles spacing */
  white-space: nowrap;
}
section.dark .section-head.center p {
  font-size: 18px;
  line-height: 1.34;
  color: rgba(255, 255, 255, 0.82);
  max-width: 866px;
  margin: 0 auto;
  text-align: center;
}
@media (max-width: 960px) {
  section.dark .section-head.center h2 {
    font-size: 44px;
    white-space: normal;
  }
}
@media (max-width: 600px) {
  section.dark .section-head.center h2 {
    font-size: 34px;
  }
}

.section-head {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-9);
  align-items: end; margin-bottom: var(--sp-9);
}
.section-head .right { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5); }
.section-head h2 { margin-bottom: 0; max-width: 540px; }
.section-head.center { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 0; }
.section-head.center .right { align-items: center; }
.section-head.center > .eyebrow { justify-self: center; }   /* its own 24px margin-bottom is the whole gap */
.section-head.center p { margin: var(--sp-4) 0 0; }
.section-head > .eyebrow { justify-self: start; }

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

@media (max-width: 960px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .section-head { grid-template-columns: 1fr; gap: var(--sp-5); }
  :root {
    --fs-h1: 2.5rem;
    --fs-h2: 1.875rem;
    --fs-display: 2.75rem;
    --sp-11: 64px;
    --container-pad: 20px;
  }
  section { padding: var(--sp-11) 0; }
}

/* ============================================================
   Floating pill header
   ============================================================ */
.site-header {
  position: absolute; top: 24px; left: 0; right: 0; z-index: 100;
  padding: 0 var(--container-pad);
}
.site-header .inner {
  background: var(--white);
  border-radius: 52px;
  padding: 16px 16px 16px 32px;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-6);
  max-width: var(--container);
  margin: 0 auto;
  box-shadow: var(--shadow-sm);
}
.site-header .nav > .btn { padding: 10px 10px 10px 24px; }
.site-header .nav > .btn::after { width: 38px; height: 38px; }
.site-header.scrolled .inner { box-shadow: var(--shadow-md); }
.site-header.solid {
  position: sticky; top: 0;
  background: var(--white);
  padding: 16px var(--container-pad);
}
.site-header.solid .inner {
  background: transparent;
  box-shadow: none; padding: 0;
}
/* Bare header — sits directly on a light hero, no pill (homepage) */
.site-header--bare { top: 32px; }
.site-header--bare .inner {
  background: transparent;
  box-shadow: none;
  padding: 0 0 0 4px;
}

.brand-mark {
  display: flex; align-items: center;
  text-decoration: none; color: var(--deep-pine);
}
.brand-mark img { height: 96px; width: auto; display: block; }
/* Brand text lives inside the logo lockup image now */
.brand-mark .name { display: none; }

.nav { display: flex; align-items: center; gap: var(--sp-7); }
.nav .menu-items {
  display: flex; align-items: center;
  gap: var(--sp-7);
}
.nav a {
  color: var(--deep-pine); font-weight: 500;
  font-size: var(--fs-base);
  padding: 8px 0;
  position: relative;
  transition: color .15s ease;
}
.nav a:hover { color: var(--forest); }
.nav a.active { color: var(--forest); font-weight: 500; }

.menu-toggle {
  display: none; background: var(--mint); border: 0;
  width: 44px; height: 44px; border-radius: 50%;
  align-items: center; justify-content: center;
  font-size: 1.2rem; color: var(--deep-pine);
}

@media (max-width: 1100px) {
  .site-header { top: 12px; padding: 0 12px; }
  .site-header .inner { padding: 6px 6px 6px 14px; gap: 6px; }
  .brand-mark { min-width: 0; flex: 1; }
  .brand-mark img { height: 28px; flex-shrink: 0; }
  .brand-mark .name { font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand-mark .name small { display: none; }
  .nav { gap: 4px; }
  .nav > .btn { padding: 4px 4px 4px 14px; font-size: var(--fs-sm); }
  .nav > .btn::after { width: 28px; height: 28px; background-size: 12px; }
  .nav .menu-items { display: none; }
  .nav .menu-items.open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: calc(100% + 8px); left: 12px; right: 12px;
    background: var(--white); padding: var(--sp-5);
    border-radius: var(--r-md);
    gap: var(--sp-3); box-shadow: var(--shadow-md);
  }
  .nav .menu-items a { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); }
  .nav .menu-items a:hover, .nav .menu-items a.active { background: var(--mint); color: var(--forest); }
  .nav .menu-items a.active::after { display: none; }
  .menu-toggle { display: inline-flex; width: 38px; height: 38px; }
}


/* ============================================================
   Mobile header — ALL pages, homepage included (Figma node 89:1134)
   Icon-only Africa-map logo, lime Donate pill, bare hamburger.
   ============================================================ */
@media (max-width: 1100px) {
  .site-header .inner {
    padding: 8px 12px 8px 16px;
  }
  /* Full lockup logo on mobile too (client request), not the icon-only mark */
  .site-header .brand-mark {
    flex: 0 1 auto;
    min-width: 0;
  }
  .site-header .brand-mark img { display: block; height: 52px; width: auto; max-width: 58vw; object-fit: contain; object-position: left center; }
  .site-header .brand-mark .name { display: none; }
  .site-header .brand-mark::after { content: none; }

  /* Bare three-line hamburger (no mint circle) */
  .site-header .menu-toggle {
    width: 40px;
    height: 40px;
    border-radius: 0;
    font-size: 0;
    background-color: transparent;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2307271f' stroke-width='2.2' stroke-linecap='round'><line x1='3.5' y1='7' x2='20.5' y2='7'/><line x1='3.5' y1='12' x2='20.5' y2='12'/><line x1='3.5' y1='17' x2='20.5' y2='17'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
  }

  /* Compact Donate pill — snug arrow-in-circle, smaller overall (Figma 89:1134:
     20px circle, 14px arrow = 3px inset, ~34px tall) */
  .site-header .nav > .btn {
    padding: 7px 7px 7px 15px;
    gap: 10px;
    font-size: var(--fs-sm);
  }
  .site-header .nav > .btn::after {
    width: 20px;
    height: 20px;
    background-size: 14px;
  }
}

/* ============================================================
   Buttons (lime pill with circular icon)
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: 8px 8px 8px 22px;
  font-family: var(--font-body); font-size: var(--fs-base);
  font-weight: 500; line-height: 1;
  border-radius: var(--r-pill); border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn::after {
  content: ''; display: inline-block;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--forest) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>") no-repeat center / 14px;
  flex-shrink: 0;
  transition: transform .2s ease, background-color .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:hover::after { transform: translateX(2px); }
.btn-primary {
  background: var(--lime-bright); color: var(--deep-pine);
}
.btn-primary::after { background-color: var(--green-arrow); }
.btn-primary:hover { background: var(--lime-bright-deep); color: var(--deep-pine); }
.btn-outline {
  background: transparent; color: var(--deep-pine);
  border-color: var(--deep-pine);
}
.btn-outline::after {
  background-color: var(--deep-pine);
}
.btn-outline:hover { background: var(--deep-pine); color: var(--white); }
.btn-outline:hover::after { background-color: var(--lime); }
.btn-ghost { background: var(--white); color: var(--deep-pine); }
.btn-ghost::after { background-color: var(--deep-pine); }
.btn-lg { padding: 12px 12px 12px 28px; font-size: var(--fs-md); }
.btn-lg::after { width: 42px; height: 42px; background-size: 16px; }
@media (max-width: 700px) {
  /* phones: large CTAs drop to the compact scale so pairs sit inline, arrow circle deflated */
  .btn-lg { padding: 8px 8px 8px 20px; font-size: var(--fs-base); }
  .btn-lg::after { width: 32px; height: 32px; background-size: 12px; }
  .hero .ctas { gap: 10px; }
}

.btn-naked {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 0; padding: 0;
  color: var(--deep-pine); font-weight: 500;
  text-decoration: none;
}
.btn-naked::after {
  content: ''; width: 32px; height: 32px; border-radius: 50%;
  background: var(--forest) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='7' y1='17' x2='17' y2='7'/><polyline points='7 7 17 7 17 17'/></svg>") no-repeat center / 12px;
}

/* Dark-surface variant (dark page/story heroes + dark sections) */
section.dark .btn-outline,
.page-hero .btn-outline,
.story-hero .btn-outline {
  color: var(--white); border-color: var(--white);
}
section.dark .btn-outline::after,
.page-hero .btn-outline::after,
.story-hero .btn-outline::after { background-color: var(--white); }
section.dark .btn-outline::after,
.page-hero .btn-outline::after,
.story-hero .btn-outline::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2307271f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>");
}
section.dark .btn-outline:hover,
.page-hero .btn-outline:hover,
.story-hero .btn-outline:hover { background: var(--white); color: var(--deep-pine); }
section.dark .btn-outline:hover::after,
.page-hero .btn-outline:hover::after,
.story-hero .btn-outline:hover::after { background-color: var(--deep-pine); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>"); }

/* ============================================================
   Hero (white, centered, with 4-photo strip — per Figma 32:4)
   ============================================================ */
.hero {
  background: var(--white);
  color: var(--deep-pine);
  padding: 170px 0 0;
  position: relative; overflow: hidden;
}
.hero .container { position: relative; z-index: 2; }
.hero-content {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding-bottom: var(--sp-9);
}
.hero .eyebrow {
  border: 0; background: transparent; padding: 0;
  color: var(--green-arrow);
  font-weight: 600; letter-spacing: 0.06em;
  margin-bottom: var(--sp-5);
}
.hero h1 {
  color: var(--ink-black);
  font-size: var(--fs-display);   /* 72px */
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 0.99;
  margin-bottom: var(--sp-5);
}
.hero p.lead {
  color: var(--hero-lead);   /* rgba(74,74,74,0.82) per Figma */
  font-size: var(--fs-md);   /* 18px */
  line-height: 1.34;          /* 24px */
  max-width: 670px;
  margin: 0 auto var(--sp-7);
}
.hero .ctas { display: flex; gap: var(--sp-4); flex-wrap: wrap; justify-content: center; }

/* Get involved button — exact Figma black #080808 */
.hero .btn-outline { color: var(--ink-black); border-color: var(--ink-black); }
.hero .btn-outline::after { background-color: var(--ink-black); }
.hero .btn-outline:hover { background: var(--ink-black); color: var(--white); }
.hero .btn-outline:hover::after { background-color: var(--lime-bright); }

/* Auto-sliding photo marquee across the bottom of the hero — full-bleed.
   GSAP drives the loop; hover freezes the slide and expands the hovered tile. */
.hero-marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.marquee-track .tile {
  flex: 0 0 320px;
  height: 380px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.marquee-track .tile img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  filter: grayscale(1);          /* black & white until hovered */
  transition: filter .5s ease;   /* GSAP drives the scale; CSS only transitions the filter */
}
.marquee-track .tile:hover img,
.marquee-track .tile.is-active img { filter: grayscale(0); }
/* CSS-only fallback (no JS/GSAP): plain marquee + hover zoom */
.no-gsap .marquee-track {
  animation: marquee-slide 64s linear infinite;
}
.no-gsap .marquee-track .tile img { transition: filter .5s ease, transform .5s ease; }
.no-gsap .hero-marquee:hover .marquee-track { animation-play-state: paused; }
.no-gsap .marquee-track .tile:hover img { transform: scale(1.08); filter: grayscale(0); }
@keyframes marquee-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .no-gsap .marquee-track { animation: none; }
}

@media (max-width: 960px) {
  .hero { padding: 130px 0 0; }
  .hero h1 { font-size: 2.5rem; }
  .hero-content, .hero p.lead { max-width: none; }   /* sides = the container's 20px padding, no extra inset */
  .marquee-track .tile { flex-basis: 240px; height: 240px; }
}
@media (max-width: 520px) {
  .hero h1 { font-size: 2.1rem; }
  .marquee-track .tile { flex-basis: 180px; height: 190px; }
}

/* ============================================================
   Sub-page hero (lighter, centered)
   ============================================================ */
.page-hero {
  background: var(--forest);          /* flat forest — same surface as the split heroes, no dot pattern */
  color: var(--white);
  min-height: 65vh;
  display: flex;
  align-items: flex-end;              /* content sits at the bottom, matching .hero-split */
  padding: 120px 0 64px;
  text-align: left;
  position: relative;
}
.page-hero .container { width: 100%; }
.page-hero .crumb {
  color: rgba(255,255,255,0.65); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: 0.09em;
  margin-bottom: var(--sp-4);
}
.page-hero .crumb .active { color: var(--white); }
.page-hero h1 { color: var(--white); font-size: clamp(2rem, 9vw, 3.75rem); line-height: 0.95; max-width: 1000px; margin: 0 0 var(--sp-4); }
.page-hero p { color: rgba(255,255,255,0.78); font-size: var(--fs-md); line-height: 1.4; max-width: 720px; margin: 0; }

@media (max-width: 960px) {
  .page-hero { min-height: max(420px, 55vh); padding: 120px 0 44px; }
}

/* ============================================================
   Pillars / Mission cards (lime panels — per Figma 1:457)
   ============================================================ */
.pillar {
  background: var(--lime);
  border-radius: var(--r-xl);
  padding: 60px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 32px;
  align-items: stretch;
}
.pillar.simple { grid-template-columns: 1fr; padding: var(--sp-7); }
.pillar.simple .cover { display: none; }
.pillar > div:first-child {
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
}
.pillar .icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--deep-pine); color: var(--white);
  display: grid; place-items: center;
  font-size: 1.5rem;
  margin-bottom: 0;
  flex-shrink: 0;
}
.pillar .icon i.ph { font-size: 24px; color: var(--white); line-height: 1; }
.pillar h3 {
  color: var(--deep-pine);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.75rem;       /* 28px */
  line-height: 1.357;        /* 38px */
  letter-spacing: -0.005em;
  margin-bottom: 0;
  padding-top: 16px;
}
.pillar p {
  color: rgba(7, 39, 31, 0.78);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.125rem;       /* 18px */
  line-height: 1.333;         /* 24px */
  max-width: 511px;
  margin-bottom: 0;
}
/* "Continue reading" link inside a pillar card (homepage Mission/Vision) */
.pillar-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: 4px;
  color: var(--deep-pine);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: gap 0.2s ease;
}
.pillar-link span {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.pillar-link i.ph { font-size: 1.05rem; transition: transform 0.2s ease; }
.pillar-link:hover { gap: 12px; }
.pillar-link:hover i.ph { transform: translateX(2px); }
/* Anchor landing offset when arriving from the homepage Continue-reading links */
#our-mission, #our-vision { scroll-margin-top: 100px; }
.pillar .cover {
  border-radius: 25px;
  overflow: hidden;
  align-self: stretch;
  min-height: 480px;
  max-height: 644px;
}
.pillar .cover img { width: 100%; height: 100%; object-fit: cover; }

.pillar.mint { background: var(--mint); }
.pillar.mint .icon { background: var(--forest); color: var(--white); }
.pillar.dark { background: var(--deep-pine); }
.pillar.dark h3 { color: var(--white); }
.pillar.dark p { color: rgba(255,255,255,0.78); }
.pillar.dark .icon { background: var(--lime); color: var(--deep-pine); }
.pillar.dark .icon i.ph { color: var(--deep-pine); }

/* Override section.dark inherited white text inside lime pillars */
section.dark .pillar h3 { color: var(--deep-pine); }
section.dark .pillar p { color: rgba(7, 39, 31, 0.78); }
section.dark .pillar.dark h3 { color: var(--white); }
section.dark .pillar.dark p { color: rgba(255, 255, 255, 0.78); }

/* Tablet: two columns would squeeze the photo into a tall portrait strip
   (taller than square) — stack instead so the photo keeps a landscape crop. */
@media (max-width: 1024px) {
  .pillar { grid-template-columns: 1fr; }
  .pillar .cover { aspect-ratio: 382 / 267; min-height: 0; max-height: none; }
}

@media (max-width: 800px) {
  /* Mobile Mission/Vision card — Figma node 102:1330:
     tighter padding, smaller heading + body text, looser body line-height,
     bigger gap before the photo, shorter photo with a smaller radius. */
  .pillar { padding: 24px; gap: 34px; }
  .pillar h3 { font-size: 1.875rem; }                 /* 30px */
  .pillar p { font-size: 1rem; line-height: 1.875; }  /* 16px text, 30px line-height */
  .pillar .cover { border-radius: 12px; }
}

/* ============================================================
   Phosphor icons — sensible defaults across all icon containers
   ============================================================ */
.icon i.ph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
}
.choice-tile .icon i.ph,
.donate-tier .icon i.ph,
.who-card .icon i.ph {
  font-size: 1.6rem;
}

/* ============================================================
   Story cards (KindAct program style — mint with image-top)
   ============================================================ */
.story-card {
  display: flex; flex-direction: column;
  background: var(--mint);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none; color: var(--deep-pine);
  transition: transform .25s ease, box-shadow .25s ease;
}
.story-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); color: var(--deep-pine); }
.story-card .cover {
  aspect-ratio: 4/3; overflow: hidden; position: relative;
  background: var(--soft-aqua);
}
.story-card .cover img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease;
}
.story-card:hover .cover img { transform: scale(1.04); }
.story-card .tag {
  position: absolute; bottom: 16px; left: 16px;
  background: var(--white); color: var(--deep-pine);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 18px; border-radius: var(--r-pill);
}
.story-card .body {
  padding: var(--sp-6) var(--sp-6) var(--sp-7);
  display: grid; grid-template-columns: 1fr 44px; gap: var(--sp-4);
  align-items: end;
}
.story-card .meta { font-size: var(--fs-xs); color: var(--charcoal); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.06em; }
.story-card h3 { font-size: 1.3rem; margin-bottom: 6px; font-family: var(--font-title); font-weight: 600; color: var(--deep-pine); }
.story-card p { color: var(--charcoal); margin: 0; font-size: var(--fs-sm); line-height: 1.55; }
.story-card .arrow {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--forest);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='7' y1='17' x2='17' y2='7'/><polyline points='7 7 17 7 17 17'/></svg>");
  background-repeat: no-repeat; background-position: center; background-size: 14px;
  flex-shrink: 0;
  transition: transform .25s ease;
}
.story-card:hover .arrow { transform: rotate(45deg); }

/* ============================================================
   Featured story (large 2-col with torn-edge image)
   ============================================================ */
.featured-story {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: var(--sp-9); align-items: center;
  background: var(--mint);
  border-radius: var(--r-xl);
  padding: var(--sp-10);
}
.featured-story .photo {
  aspect-ratio: 4/5; border-radius: var(--r-md);
  overflow: hidden;
}
.featured-story .photo img { width: 100%; height: 100%; object-fit: cover; }
.featured-story h2 { font-size: var(--fs-h2); margin-bottom: var(--sp-4); }
.featured-story .meta { color: var(--teal); font-weight: 600; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--sp-4); }
@media (max-width: 960px) {
  .featured-story { grid-template-columns: 1fr; padding: var(--sp-7); }
}

/* ============================================================
   Stats band (avatar bubbles + lime numbers + dividers)
   ============================================================ */
.stats {
  background: var(--forest);
  color: var(--white);
  padding: var(--sp-10) 0;
  background-image: var(--dots-light); background-size: var(--dots-size);
}
.stats .grid-4 { gap: 0; }
.stat {
  padding: var(--sp-5) var(--sp-7);
  border-right: 1px solid var(--white-20);
  text-align: left;
}
.stat:last-child { border-right: 0; }
.stat .num {
  font-family: var(--font-title);
  font-size: 3rem; font-weight: 700; color: var(--lime);
  display: block; line-height: 1; margin-bottom: var(--sp-3);
}
.stat .label { font-size: var(--fs-sm); color: rgba(255,255,255,0.78); }
@media (max-width: 800px) {
  .stat { border-right: 0; border-bottom: 1px solid var(--white-20); text-align: center; }
  .stat:last-child { border-bottom: 0; }
}

/* ============================================================
   "Who We Are" — full-bleed photo with overlapping lime card
   ============================================================ */
.who-block {
  position: relative;
}
.who-block .photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 28px;
  overflow: hidden;
}
.who-block .photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 20%;   /* keep the team's heads in frame on the 16:9 crop */
}
.who-card {
  position: absolute;
  right: 96px;                  /* photo bleeds ~96px past the card on the right (per Figma) */
  bottom: -204px;               /* card hangs below the photo and laps onto the next section */
  width: 48%;
  max-width: 600px;
  background: var(--lime-card);
  border-radius: var(--r-xl);
  padding: 56px 52px 52px;
  z-index: 3;                   /* sits above the dark section it overlaps */
  box-shadow: 0 24px 60px rgba(7, 39, 31, 0.18);
}
.who-card .eyebrow {
  border-color: var(--ink-brown);
  color: var(--ink-brown);
  margin-bottom: var(--sp-4);
}
.who-card h2 {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 2.5rem;        /* 40px */
  line-height: 1.125;       /* 45px */
  letter-spacing: -0.005em;
  color: var(--ink-brown);
  margin-bottom: var(--sp-4);
}
.who-card p {
  color: var(--ink-brown);
  font-size: 1rem;
  line-height: 1.44;        /* 23px */
  margin-bottom: var(--sp-5);
}
.who-card .who-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: var(--sp-6);
  gap: 0;
  background: transparent;     /* override the dark .stats band */
  padding: 0;
  background-image: none;
}
.who-card .who-stats .stat {
  padding: 12px 20px;
  border-right: 1px solid rgba(45, 23, 23, 0.25);
  border-bottom: 0;
  background: transparent;
  text-align: left;
  color: var(--ink-brown);
}
.who-card .who-stats .stat:first-child { padding-left: 0; }
.who-card .who-stats .stat:last-child { border-right: 0; padding-right: 0; }
.who-card .who-stats .num {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 2.4rem;          /* ~38px */
  line-height: 1;
  color: var(--ink-brown);
  display: block;
  margin-bottom: 10px;
}
.who-card .who-stats .label {
  font-size: 0.85rem;
  color: var(--ink-brown);
  display: block;
  letter-spacing: normal;
  text-transform: none;
  opacity: 1;
}

/* Dark CTA with lime arrow (for use on lime panels) */
.btn-dark {
  background: var(--forest);
  color: var(--white);
  padding: 8px 8px 8px 22px;
}
.btn-dark::after {
  background-color: var(--lime);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2307271f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>");
}
.btn-dark:hover { background: var(--deep-pine); color: var(--white); }

@media (max-width: 960px) {
  section.section-who { padding-bottom: var(--sp-9); }
  section.section-who + section.dark { padding-top: var(--sp-9); }
  .who-block { padding-bottom: 0; }
  .who-block .photo { aspect-ratio: 4/3; border-radius: var(--r-md) var(--r-md) 0 0; }  /* square bottom — joins the card */
  .who-card {
    position: static; width: 100%;
    margin-top: 0;                                   /* no overlap: photo and card sit flush */
    padding: 40px 24px;
    border-radius: 0 0 var(--r-xl) var(--r-xl);      /* square top — continues the photo */
  }
  .who-card .stats .stat { padding: 12px 12px; }
  .who-card .stats .stat:first-child { padding-left: 0; }
  .who-card .stats .stat:last-child { padding-right: 0; }
}

/* ============================================================
   Two-up text + photo blocks (about / work pages)
   ============================================================ */
.media-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-9); align-items: center;
}
.media-row.reverse > :first-child { order: 2; }
.media-row .photo {
  aspect-ratio: 4/5;
  overflow: hidden;
  /* Torn-paper polaroid effect — top, right, bottom, left all zigzag */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 250' preserveAspectRatio='none'><path d='M 4 6 L 12 1 L 20 5 L 28 0 L 36 4 L 44 1 L 52 5 L 60 0 L 68 4 L 76 1 L 84 5 L 92 0 L 100 4 L 108 1 L 116 5 L 124 0 L 132 4 L 140 1 L 148 5 L 156 0 L 164 4 L 172 1 L 180 5 L 188 0 L 196 4 L 200 12 L 195 22 L 199 32 L 194 42 L 200 52 L 195 62 L 199 72 L 194 82 L 200 92 L 195 102 L 199 112 L 194 122 L 200 132 L 195 142 L 199 152 L 194 162 L 200 172 L 195 182 L 199 192 L 194 202 L 200 212 L 195 222 L 199 232 L 196 242 L 188 248 L 180 244 L 172 250 L 164 245 L 156 249 L 148 244 L 140 250 L 132 245 L 124 249 L 116 244 L 108 250 L 100 246 L 92 250 L 84 244 L 76 249 L 68 245 L 60 250 L 52 244 L 44 249 L 36 245 L 28 250 L 20 244 L 12 249 L 4 244 L 0 236 L 5 226 L 1 216 L 6 206 L 0 196 L 5 186 L 1 176 L 6 166 L 0 156 L 5 146 L 1 136 L 6 126 L 0 116 L 5 106 L 1 96 L 6 86 L 0 76 L 5 66 L 1 56 L 6 46 L 0 36 L 5 26 L 1 16 L 6 8 Z' fill='black'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 250' preserveAspectRatio='none'><path d='M 4 6 L 12 1 L 20 5 L 28 0 L 36 4 L 44 1 L 52 5 L 60 0 L 68 4 L 76 1 L 84 5 L 92 0 L 100 4 L 108 1 L 116 5 L 124 0 L 132 4 L 140 1 L 148 5 L 156 0 L 164 4 L 172 1 L 180 5 L 188 0 L 196 4 L 200 12 L 195 22 L 199 32 L 194 42 L 200 52 L 195 62 L 199 72 L 194 82 L 200 92 L 195 102 L 199 112 L 194 122 L 200 132 L 195 142 L 199 152 L 194 162 L 200 172 L 195 182 L 199 192 L 194 202 L 200 212 L 195 222 L 199 232 L 196 242 L 188 248 L 180 244 L 172 250 L 164 245 L 156 249 L 148 244 L 140 250 L 132 245 L 124 249 L 116 244 L 108 250 L 100 246 L 92 250 L 84 244 L 76 249 L 68 245 L 60 250 L 52 244 L 44 249 L 36 245 L 28 250 L 20 244 L 12 249 L 4 244 L 0 236 L 5 226 L 1 216 L 6 206 L 0 196 L 5 186 L 1 176 L 6 166 L 0 156 L 5 146 L 1 136 L 6 126 L 0 116 L 5 106 L 1 96 L 6 86 L 0 76 L 5 66 L 1 56 L 6 46 L 0 36 L 5 26 L 1 16 L 6 8 Z' fill='black'/></svg>");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.media-row .photo img { width: 100%; height: 100%; object-fit: cover; }
.media-row h2 { margin-bottom: var(--sp-5); }
.media-row ul { padding-left: var(--sp-5); color: var(--charcoal); margin-bottom: var(--sp-5); }
.media-row li { margin-bottom: var(--sp-2); }
@media (max-width: 960px) {
  .media-row { grid-template-columns: 1fr; gap: var(--sp-6); }
  .media-row.reverse > :first-child { order: 0; }
}

/* Programs page (Figma 104:3165): mint background panel + a separate RECTANGULAR
   (landscape) image laid OVER it via z-index, with rounded corners. The image is a
   background-image container sitting just past its side of the panel; the text side is
   padded inside the mint. Sides alternate. */
.media-row {
  background: var(--mint);
  border-radius: 24px;
  overflow: hidden;                        /* clips the full-bleed image to the card's rounded corners */
  display: grid;
  grid-template-columns: 1.5fr 1fr;        /* text ~60% / image ~40% */
  gap: 0;                                  /* image bleeds to the card edge; text padding is the only inset */
  align-items: stretch;                    /* the grid IS the wrapper: text + image are equal heights */
  min-height: 600px;                       /* taller cards; text stays vertically centred via the text column */
}                                          /* wrapper is full container width — the text container carries the max-width */
.media-row.reverse {                       /* keep the image at 40% on reversed cards too (order swap alone would flip the column widths) */
  grid-template-columns: 1fr 1.5fr;
}
.media-row > div:first-child {             /* text — capped to a readable max-width and centred in its half */
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-self: center;                    /* centre the text block within its column */
  max-width: 720px;                        /* THE max-width lives here, not on the wrapper */
  padding: clamp(28px, 3.4vw, 48px);
}
.media-row .photo {                        /* image fills its column, flush to the card's top/right/bottom edges */
  align-self: stretch;
  min-height: 300px;
  aspect-ratio: auto;
  background-size: cover;
  background-position: center;
  -webkit-mask-image: none;
          mask-image: none;
}
@media (max-width: 960px) {
  .media-row { grid-template-columns: 1fr; }
  .media-row > div:first-child { padding: clamp(20px, 5vw, 32px); }
  .media-row .photo { aspect-ratio: 3 / 2; min-height: 0; }
}
.media-row h2 {
  font-size: 2.375rem;          /* 38px (Figma) */
  font-weight: 600;
  line-height: 1.0;             /* Figma 37px — tight */
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-5);
}
.media-row p { color: var(--charcoal); font-size: var(--fs-md); line-height: 1.44; margin-bottom: var(--sp-5); }
.media-row ul { list-style: disc; padding-left: 22px; color: var(--charcoal); font-size: var(--fs-md); line-height: 1.44; margin: 0 0 var(--sp-6); }
.media-row li { margin-bottom: var(--sp-3); }
.media-row .btn { align-self: flex-start; }   /* pill hugs its text, not full width */
/* Each card sits in its own section — trim the section padding so the gap reads ~64px */
#disability, #health, #education { padding: var(--sp-7) 0; }
@media (max-width: 700px) { .media-row h2 { font-size: 1.875rem; } }

/* ============================================================
   Team / Person cards
   ============================================================ */
.person { text-align: center; }
.person .photo {
  width: 220px; height: 220px; margin: 0 auto var(--sp-5);
  border-radius: 50%; overflow: hidden;
  background: var(--mint);
  box-shadow: var(--shadow-sm);
}
.person .photo img { width: 100%; height: 100%; object-fit: cover; }
.person h3 { margin-bottom: 4px; font-size: 1.3rem; }
.person .role {
  font-size: var(--fs-xs); color: var(--teal); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
.person p { font-size: var(--fs-sm); color: var(--charcoal); }

.founder-card {
  display: grid; grid-template-columns: 280px 1fr; gap: var(--sp-7);
  background: var(--mint); padding: var(--sp-7); border-radius: var(--r-xl);
  align-items: start;
}
.founder-card .photo {
  width: 100%; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden;
}
.founder-card .photo img { width: 100%; height: 100%; object-fit: cover; }
.founder-card .role { color: var(--teal); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--sp-2); }
.founder-card h3 { font-family: var(--font-title); font-size: 1.6rem; }
@media (max-width: 700px) {
  .founder-card { grid-template-columns: 1fr; }
}

/* ============================================================
   Forms
   ============================================================ */
.form { display: grid; gap: var(--sp-5); max-width: 560px; }
.form .field { display: flex; flex-direction: column; gap: var(--sp-2); }
.form label { font-weight: 600; font-size: var(--fs-sm); color: var(--deep-pine); }
.form input, .form select, .form textarea {
  font-family: var(--font-body); font-size: var(--fs-base);
  padding: 14px 18px;
  border: 1px solid var(--gray-stroke); border-radius: var(--r-pill);
  background: var(--white); color: var(--deep-pine);
  transition: border-color .15s ease;
}
.form textarea { border-radius: var(--r-md); min-height: 140px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--forest);
  box-shadow: 0 0 0 4px rgba(11, 78, 61, 0.12);
}

/* Polished form cards (Get Involved volunteer/partner forms) */
.form-card {
  max-width: none;
  background: var(--white);
  border-radius: var(--r-md);
  padding: clamp(28px, 3.2vw, 44px);
  box-shadow: var(--shadow-md);
}
.form-card input, .form-card select { background: #f6faf9; }
.form-card textarea { background: #f6faf9; min-height: 120px; }
.form-card .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.form-card .btn { justify-self: start; margin-top: var(--sp-2); }
.form-card--mint { background: var(--mint); box-shadow: none; }
.form-card--mint input, .form-card--mint select, .form-card--mint textarea { background: var(--white); border-color: transparent; }
@media (max-width: 640px) { .form-card .form-row { grid-template-columns: 1fr; } }

/* Bank-details request form (Donate page, sits inside the forest donate-card) */
.bank-request {
  display: grid; gap: var(--sp-4);
  max-width: 460px; margin: var(--sp-6) auto;
  text-align: left;
}
.bank-request .field { display: flex; flex-direction: column; gap: var(--sp-2); }
.bank-request label { font-weight: 600; font-size: var(--fs-sm); color: rgba(255,255,255,0.9); }
.bank-request input {
  font-family: var(--font-body); font-size: var(--fs-base);
  padding: 14px 18px;
  border: 1px solid transparent; border-radius: var(--r-pill);
  background: var(--white); color: var(--deep-pine);
}
.bank-request input:focus {
  outline: none; border-color: var(--lime);
  box-shadow: 0 0 0 4px rgba(169, 204, 76, 0.25);
}
.bank-request .btn { justify-self: center; margin-top: var(--sp-2); }
.bank-request [data-feedback] { text-align: center; color: var(--lime); }

/* Inline pill input (newsletter) */
.pill-input {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--white-20);
  border-radius: var(--r-pill);
  padding: 6px 6px 6px 22px;
  max-width: 420px;
}
.pill-input input {
  flex: 1; min-width: 0; border: 0; background: transparent;
  color: var(--white); font-family: var(--font-body); font-size: var(--fs-base);
  padding: 10px 0; outline: none;
}
.pill-input input::placeholder { color: rgba(255,255,255,0.5); }
.pill-input button {
  background: var(--lime); color: var(--deep-pine);
  border: 0; padding: 12px 22px;
  font-weight: 500; font-size: var(--fs-sm);
  border-radius: var(--r-pill);
  white-space: nowrap; flex-shrink: 0;
  transition: background .2s ease;
}
.pill-input button:hover { background: var(--lime-deep); }

/* ============================================================
   Donate / CTA card (lime panel)
   ============================================================ */
/* Dark-green band the lime card sits inset on (per Figma) */
.donate-band { background: var(--forest); padding-top: var(--sp-10); padding-bottom: var(--sp-10); }
.stats + .donate-band { padding-top: 0; }   /* continuous green with the stats band above */
.donate-card {
  background: var(--lime);
  border-radius: 40px;
  padding: var(--sp-10);
  text-align: center;
}
@media (max-width: 700px) {
  .donate-card { padding: var(--sp-9) 20px; }   /* keep the tall rhythm, stop squeezing the text sideways */
}
.donate-card .eyebrow { background: var(--white); border-color: transparent; }
.donate-card h2 {
  color: var(--deep-pine);
  font-family: var(--font-title); font-weight: 500;
  font-size: 2.5rem; line-height: 1.15; letter-spacing: -0.005em;
  margin-bottom: var(--sp-4);
}
.donate-card p { color: var(--deep-pine); opacity: 0.78; max-width: 580px; margin: 0 auto var(--sp-6); }
.donate-card .bank {
  background: var(--white); border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-6); margin: var(--sp-5) auto;
  font-family: ui-monospace, "SF Mono", monospace;
  max-width: 480px; text-align: left;
}
.donate-card .bank .label { color: var(--charcoal); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; }
.donate-card .bank .acct { color: var(--deep-pine); font-weight: 700; font-size: 1.4rem; letter-spacing: 0.08em; margin-top: 6px; }

/* Donate tiers v2 (Figma 140:2099) — colour-coded cards with Select Tier buttons */
.donate-tier {
  background: var(--white);
  border: 1px solid rgba(7,39,31,0.12);
  border-radius: 16px;
  padding: var(--sp-7) var(--sp-6);
  text-align: left;
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.donate-tier .amt { color: var(--deep-pine); font-family: var(--font-title); font-weight: 700; font-size: 2rem; line-height: 1; }
.donate-tier .what { color: var(--charcoal); margin: 0; flex: 1; }
.tier-btn {
  display: block; width: 100%;
  padding: 13px 20px; text-align: center;
  border: 1px solid var(--forest); border-radius: 10px;
  background: transparent; color: var(--forest);
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-base);
  cursor: pointer; transition: background .2s ease, color .2s ease;
}
.tier-btn:hover { background: var(--forest); color: var(--white); }
.donate-tier--lime { background: var(--lime-deep); border-color: transparent; box-shadow: var(--shadow-sm); }
.donate-tier--lime .what { color: rgba(7,39,31,0.75); }
.donate-tier--lime .tier-btn { background: var(--ink-black); border-color: transparent; color: var(--white); }
.donate-tier--lime .tier-btn:hover { background: var(--deep-pine); }
.donate-tier--forest { background: var(--forest); border-color: transparent; }
.donate-tier--forest .amt { color: var(--lime-deep); }
.donate-tier--forest .what { color: rgba(255,255,255,0.85); }
.donate-tier--forest .tier-btn { background: var(--lime-deep); border-color: transparent; color: var(--deep-pine); }
.donate-tier--forest .tier-btn:hover { background: var(--lime-bright); color: var(--deep-pine); }

/* Direct bank transfer — split copy + Notify of Transfer card */
section.cream { background: var(--cream); }
.bank-split {
  display: grid; grid-template-columns: 1fr 1.25fr;
  gap: clamp(32px, 5vw, 80px); align-items: start;
}
.bank-copy h2 { font-size: clamp(2.25rem, 4vw, 3.375rem); font-weight: 600; line-height: 1.08; color: var(--forest); }
.info-note {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  background: rgba(7,39,31,0.05); border-radius: 12px;
  padding: var(--sp-5) var(--sp-6);
  color: var(--charcoal); margin-top: var(--sp-6);
}
.info-note i { color: var(--forest); font-size: 1.25rem; line-height: 1.5; flex-shrink: 0; }
.info-note p { margin: 0; }
@media (max-width: 900px) { .bank-split { grid-template-columns: 1fr; gap: var(--sp-7); } }

/* ============================================================
   Policy pages (Whistleblowing, Safeguarding, FM, Privacy, CoI, Cookies)
   ============================================================ */
.policy-hero h1 { max-width: 900px; }
.policy-hero .meta-line { color: rgba(255,255,255,0.75); font-size: var(--fs-base); margin: 0; }
.policy-body { padding: var(--sp-10) 0; }
.policy-meta {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5) var(--sp-6);
  background: var(--mint); border-radius: 16px;
  padding: var(--sp-6) var(--sp-7);
  margin-bottom: var(--sp-9);
}
.policy-meta .k { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.07em; color: var(--charcoal); margin-bottom: 2px; }
.policy-meta .v { display: block; font-weight: 600; color: var(--deep-pine); overflow-wrap: anywhere; }
.policy-meta .v a { color: var(--forest); text-decoration: underline; text-underline-offset: 3px; }
.policy-prose h2 { font-size: 1.75rem; line-height: 1.25; margin: var(--sp-8) 0 var(--sp-4); }
.policy-prose h2:first-child { margin-top: 0; }
.policy-prose h3 { font-size: 1.2rem; font-weight: 600; color: var(--deep-pine); margin: var(--sp-6) 0 var(--sp-3); }
.policy-prose p, .policy-prose li { font-size: var(--fs-base); line-height: 1.75; color: var(--charcoal); }
.policy-prose ul { margin: 0 0 var(--sp-5); padding-left: 1.3em; }
.policy-prose li { margin-bottom: var(--sp-2); }
.table-wrap { overflow-x: auto; margin: var(--sp-6) 0; }
.policy-prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.policy-prose th, .policy-prose td {
  border: 1px solid rgba(7,39,31,0.15);
  padding: 10px 14px; text-align: left; vertical-align: top;
  line-height: 1.55; color: var(--charcoal);
}
.policy-prose th { background: var(--mint); color: var(--deep-pine); font-weight: 600; }
@media (max-width: 760px) { .policy-meta { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .policy-meta { grid-template-columns: 1fr; } }

/* footer: 4 link columns — let them wrap on narrow screens */
.footer-cols { flex-wrap: wrap; row-gap: 32px; }
@media (max-width: 1180px) { .footer-cols { gap: 56px; } }

/* ============================================================
   Blog (archive + post detail)
   ============================================================ */
/* Blog category filter — chips are plain links, so each filter is a shareable URL.
   :empty collapses the bar entirely when no post carries a category. */
.cat-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 var(--sp-7); }
.cat-filters:empty { display: none; }
.cat-chip {
  display: inline-flex; align-items: center;
  padding: 9px 18px; border-radius: var(--r-pill);
  border: 1px solid var(--deep-pine-10); background: var(--white);
  color: var(--deep-pine); font-size: var(--fs-sm); font-weight: 500;
  text-decoration: none; line-height: 1;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.cat-chip:hover { background: var(--mint); border-color: var(--forest-30); color: var(--forest); }
.cat-chip.is-active { background: var(--forest); border-color: var(--forest); color: var(--white); }
.blog-empty a { color: var(--forest); text-decoration: underline; text-underline-offset: 3px; }
/* Category in the post sidebar links back to its filtered archive. */
.detail-list .v a { color: var(--forest); text-decoration: underline; text-underline-offset: 2px; }
.blog-empty {
  text-align: center;
  background: var(--mint);
  border-radius: var(--r-md);
  padding: var(--sp-10) var(--sp-7);
  max-width: 640px; margin: 0 auto;
}
.blog-empty i { font-size: 2.4rem; color: var(--forest); }
.blog-empty h3 { margin: var(--sp-3) 0 var(--sp-2); }
.blog-empty p { margin: 0; color: var(--charcoal); }
.blog-cover-fallback {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--mint), var(--soft-aqua));
  color: var(--forest); font-size: 2.2rem;
}

/* ============================================================
   Policy consent (forms) + newsletter notes + impact filter
   ============================================================ */
.consent {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: var(--fs-sm); color: var(--charcoal);
  cursor: pointer;
}
.consent input { width: auto; margin-top: 4px; accent-color: var(--forest); }
.consent a { color: var(--forest); text-decoration: underline; text-underline-offset: 3px; }
.bank-request .consent { color: rgba(255,255,255,0.85); }
.bank-request .consent a { color: var(--lime); }

.consent-note { font-size: var(--fs-xs); margin: var(--sp-5) 0 0; }
.site-footer .consent-note { color: rgba(255,255,255,0.45); margin: var(--sp-5) 0 0; }  /* outranks .footer-newsletter p */
.site-footer .consent-note a { color: rgba(255,255,255,0.65); text-decoration: underline; text-underline-offset: 2px; }
.aside-newsletter .consent-note { color: var(--charcoal); opacity: 0.75; margin: var(--sp-5) 0 0; }  /* outranks .aside-newsletter p */
.aside-newsletter .consent-note a { color: var(--forest); text-decoration: underline; text-underline-offset: 2px; }

.impact-tabs {
  margin: 0 auto var(--sp-8);
  flex-wrap: wrap; justify-content: center;
}

/* Journey — year-grouped ledger (replaces the old dotted timeline) */
.journey { display: flex; flex-direction: column; gap: var(--sp-9); max-width: 1080px; }
.jy-group { display: grid; grid-template-columns: 150px 1fr; gap: var(--sp-6); align-items: start; }
.jy-year {
  font-family: var(--font-title); font-weight: 700;
  font-size: clamp(2.5rem, 4vw, 3.5rem); line-height: 1;
  color: var(--forest); opacity: 0.35;
  position: sticky; top: 110px;
}
.jy-rows { display: flex; flex-direction: column; }
.jy-row {
  display: flex; align-items: center; gap: var(--sp-6);
  padding: var(--sp-5) var(--sp-5);
  border-radius: 14px;                       /* rounding only for the hover pill */
  position: relative;
  transition: background .2s ease, transform .2s ease;
}
.jy-row::after {                             /* divider drawn straight, unaffected by the radius */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: rgba(7,39,31,0.10);
}
.jy-row:hover { background: var(--soft-aqua); transform: translateX(4px); }   /* deeper step of the mint, monotone */
.jy-row:hover::after { opacity: 0; }
.jy-date {
  flex: 0 0 72px;
  font-size: var(--fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--forest);
}
.jy-body h3 { font-size: 1.2rem; font-weight: 600; margin: 0 0 2px; color: var(--deep-pine); }
.jy-body p { margin: 0; font-size: var(--fs-sm); color: var(--charcoal); }
.jy-arrow {
  margin-left: auto; flex-shrink: 0;
  font-size: 1.2rem; color: var(--forest);
  opacity: 0; transform: translateX(-6px);
  transition: opacity .2s ease, transform .2s ease;
}
.jy-row:hover .jy-arrow { opacity: 1; transform: translateX(0); }
@media (max-width: 760px) {
  .jy-group { grid-template-columns: 1fr; gap: var(--sp-4); }
  .jy-year { position: static; font-size: 2rem; }
  .jy-row { align-items: flex-start; gap: var(--sp-4); padding: var(--sp-4) var(--sp-3); }
  .jy-arrow { display: none; }
}
@media (max-width: 900px) {
  .impact-tabs { width: 100%; }
  .impact-tabs button { flex: 1 1 auto; padding: 11px 14px; }
}

/* ============================================================
   Timeline
   ============================================================ */
.timeline { position: relative; padding-left: var(--sp-7); max-width: 760px; margin: 0 auto; }
.timeline::before {
  content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px;
  width: 2px; background: var(--sage); opacity: 0.4;
}
.timeline-item { position: relative; padding-bottom: var(--sp-8); }
.timeline-item::before {
  content: ''; position: absolute; left: -27px; top: 10px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--lime); border: 3px solid var(--forest);
}
.timeline-item .date {
  display: inline-block;
  font-weight: 600; color: var(--teal);
  font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.timeline-item h3 { font-size: 1.2rem; margin-bottom: 6px; }
.timeline-item p { color: var(--charcoal); margin: 0; }

/* ============================================================
   Gallery
   ============================================================ */
.gallery {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3);
}
.gallery .tile {
  aspect-ratio: 1; overflow: hidden; border-radius: var(--r-md);
  background: var(--mint);
}
.gallery .tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.gallery .tile:hover img { transform: scale(1.05); }
@media (max-width: 700px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   Story detail
   ============================================================ */
/* Story hero — full-bleed image + dark overlay + tag + title (Figma 121:2) */
.story-hero {
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: flex-end;
  padding: 0;
  overflow: hidden;
  background: var(--deep-pine);
  color: var(--white);
}
.story-hero .hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 28%;
}
/* Blog featured images are arbitrary uploads, often portrait phone photos dropped into
   this 2.4:1 hero, where ~70% of the frame gets cropped away. Centre them so the subject
   survives; the 28% top-bias above is for the hand-picked outreach-story heroes. */
[data-blog-post] .story-hero .hero-bg { background-position: center center; }
.story-hero .hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(7,39,31,0.40) 0%, rgba(7,39,31,0) 32%, rgba(7,39,31,0.88) 100%),
    linear-gradient(90deg, rgba(7,39,31,0.55) 0%, rgba(7,39,31,0.08) 72%);
}
.story-hero .container {
  position: relative; z-index: 2; width: 100%;
  padding-top: 168px; padding-bottom: var(--sp-9);
}
.story-hero .eyebrow.light { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.35); }
.story-hero .crumb {
  color: rgba(255,255,255,0.65); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: 0.09em;
  margin-bottom: var(--sp-4);
}
.story-hero .crumb a { color: rgba(255,255,255,0.65); }
.story-hero .crumb a:hover { color: var(--white); }
.story-hero .crumb .active { color: var(--white); }
.story-hero h1 {
  color: var(--white);
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.05;
  /* 17ch suited the short outreach titles but stacked long blog titles into 4 cramped
     lines. 28ch is the widest that still keeps the text over the dark part of the hero
     overlay (which fades to 0.08 by 72%); past this it gains no lines, only bright bg. */
  max-width: 28ch;
  margin-bottom: var(--sp-4);
}
.story-hero .sub { color: rgba(255,255,255,0.82); font-size: var(--fs-lg); margin: 0; }

.prose { max-width: 820px; margin: 0 auto; font-size: var(--fs-md); line-height: 1.8; color: var(--deep-pine); }
/* inherit, not hard-coded: a hard colour here beats any colour an author sets on a
   wrapper (e.g. a dark callout), turning its text dark-on-dark. Plain paragraphs
   still resolve to --deep-pine via .prose above. */
.prose p { color: inherit; }
.prose blockquote {
  background: var(--mint); border-radius: var(--r-md);
  padding: var(--sp-6) var(--sp-7);
  margin: var(--sp-7) 0; border-left: 4px solid var(--lime);
}
.prose blockquote p {
  font-family: var(--font-title); font-style: italic;
  font-size: var(--fs-xl); color: var(--forest);
  margin: 0; line-height: 1.4;
}

/* ============================================================
   Quick "choice" tiles (Get Involved page)
   ============================================================ */
.choice-tile {
  display: block; padding: var(--sp-7);
  background: var(--mint); border-radius: var(--r-xl);
  text-decoration: none; color: var(--deep-pine);
  transition: background .2s ease, transform .2s ease;
}
.choice-tile:hover { background: var(--lime); transform: translateY(-4px); color: var(--deep-pine); }
.choice-tile .icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--forest); color: var(--lime);
  display: grid; place-items: center;
  font-size: 1.5rem; margin-bottom: var(--sp-5);
}
.choice-tile h3 { color: var(--deep-pine); margin-bottom: var(--sp-3); }
.choice-tile p { color: var(--charcoal); margin-bottom: var(--sp-4); }
.choice-tile .arrow { color: var(--forest); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }

/* ============================================================
   Partner logo strip
   ============================================================ */
.partners {
  text-align: center; padding: var(--sp-9) 0 var(--sp-6);
}
.partners .heading {
  color: var(--charcoal); font-weight: 700;
  font-size: 1.375rem; margin-bottom: var(--sp-7);
}
.partners .row {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: var(--sp-10);
  filter: grayscale(1); opacity: 0.7;
}
.partners .row > * { color: var(--charcoal); font-weight: 600; font-size: 1.1rem; }

/* Who We Are — gray surface per Figma 32:4, tightened spacing */
section.section-who {
  background: var(--surface-gray);
  padding: var(--sp-10) 0 88px;          /* even-ish gray above (80) and below (88) the photo */
}
section.section-who + section.dark {
  padding-top: 170px;                    /* leaves room for the Who-We-Are card lapping over the top */
  padding-bottom: var(--sp-9);           /* tighter gap down into the Programs section */
}

/* ============================================================
   Notice strip (above header)
   ============================================================ */
.notice {
  background: var(--lime);
  color: var(--deep-pine);
  padding: 10px 0; text-align: center;
  font-weight: 500; font-size: var(--fs-sm);
  position: relative; z-index: 99;
}
.notice a { color: var(--deep-pine); text-decoration: underline; font-weight: 600; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  background: #131313;                 /* Figma footer ink */
  color: rgba(255, 255, 255, 0.7);
  padding: 80px 0 24px;
}
.site-footer .container { display: flex; flex-direction: column; gap: 32px; }

/* Brand lockup (top-left) */
.footer-brand { display: inline-block; line-height: 0; }
.footer-brand img { width: 280px; max-width: 70%; height: auto; display: block; }

/* Newsletter (left) + link columns (pushed to the right) */
.footer-main {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 60px 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 33px;
}
.footer-newsletter { width: 420px; max-width: 100%; }
.site-footer h4 {
  color: var(--white); font-family: var(--font-title);
  font-weight: 600; font-size: 1.2rem;            /* 19.2px */
  letter-spacing: -0.006em; line-height: 1.36; margin: 0 0 8px;
}
.footer-newsletter p {
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--fs-base); line-height: 1.45;
  margin: 0 0 20px; max-width: 420px;
}
.footer-cols { display: flex; gap: 88px; }
.footer-col h4 { margin-bottom: 20px; }
.footer-col a {
  display: block; color: rgba(255, 255, 255, 0.7);
  font-size: var(--fs-base); line-height: 30px; padding: 6px 0;
  transition: color .2s ease;
}
.footer-col a:hover { color: var(--lime); }

/* Legal line (copyright only, per the new design) */
.footer-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 21px;
}
.footer-legal span {
  font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.55); line-height: 1.6;
}

@media (max-width: 900px) {
  .footer-main { gap: 48px; }
  .footer-cols { gap: 56px; }
}
@media (max-width: 640px) {
  .site-footer { padding: 56px 0 24px; }
  .footer-brand img { width: 230px; max-width: 80%; }
  .footer-newsletter { width: 100%; }
  .footer-cols { gap: 40px; flex-wrap: wrap; }
}

/* ============================================================
   Mission / Vision — stacking cards (native CSS position: sticky).
   Each card sticks at the top offset as you scroll; the next card
   rises and covers it, then both release together at the bottom of
   .mv-stack. Because a sticky element is contained by its parent,
   the cards can NEVER escape into the next section — no pin, no
   pixel math, no z-index bleed. On very short viewports sticky is
   disabled (cards just stack in flow) so nothing clips.
   ============================================================ */
.mv-stack {
  /* --mv-dwell is how long the Vision card stays frozen (readable)
     once it covers Mission, before the section releases the scroll.
     Kept short so it doesn't leave a big empty gap before Programs. */
  --mv-dwell: 10vh;
  display: flex;
  flex-direction: column;
  gap: 28px;                        /* small gap → Mission is covered quickly, never lingers frozen alone */
  padding-bottom: var(--mv-dwell);  /* Vision holds frozen this long before release */
}
/* Both cards pin (sticky) so Vision visibly SLIDES UP and over Mission
   — that slide IS the animation. Mission pins only for the instant
   before Vision covers it; Vision is the card that actually holds. */
.mv-stack .pillar {
  position: sticky;
  top: 88px;
  box-shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.45);
}
/* Increasing z-index so each card slides cleanly OVER the one before. */
.mv-stack .pillar:nth-child(1) { z-index: 1; }
.mv-stack .pillar:nth-child(2) { z-index: 2; }
.mv-stack .pillar:nth-child(3) { z-index: 3; }
.mv-stack .pillar:nth-child(4) { z-index: 4; }

/* On phones, stacking tall cards is awkward — fall back to a simple
   stacked list. (Width-based, so it never disables on short laptops.) */
@media (max-width: 800px) {
  /* Full-bleed cards on mobile (Figma 102:1330): break the stack out of the
     container's side padding so the lime spans edge to edge; square the corners.
     The "Mission & Vision" heading stays centered inside the container. */
  .mv-stack {
    padding-bottom: 0;
    gap: 0;   /* cards join into one continuous lime block — no dark section background between them */
    margin-left: calc(-1 * var(--container-pad));
    margin-right: calc(-1 * var(--container-pad));
  }
  .mv-stack .pillar { position: static; border-radius: 0; box-shadow: none; }
}

/* ============================================================
   About page
   ============================================================ */
/* Mission & Vision columns */
.mv-col .icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--forest); color: var(--white);
  display: grid; place-items: center; margin-bottom: var(--sp-4);
}
.mv-col .icon i.ph { font-size: 24px; line-height: 1; }
.mv-col h3 {
  font-family: var(--font-title); font-weight: 600;
  font-size: 1.6rem; color: var(--deep-pine); margin-bottom: var(--sp-3);
}
.mv-col p { color: var(--ink-brown); margin-bottom: var(--sp-3); }
.mv-col p:last-child { margin-bottom: 0; }

/* TAAE Estate feature (dark) */
.estate { background: var(--deep-pine); color: var(--white); }
.estate .estate-inner { max-width: 820px; margin: 0 auto; text-align: center; }
.estate .eyebrow {
  background: transparent; border: 1px solid var(--white-20);
  color: var(--lime); margin-bottom: var(--sp-4);
}
.estate h2 {
  font-family: var(--font-title); font-weight: 700;
  font-size: 2.75rem; line-height: 1.1; color: var(--white);
  margin-bottom: var(--sp-4);
}
.estate p {
  color: rgba(255, 255, 255, 0.82); font-size: 1.125rem;
  line-height: 1.5; max-width: 720px; margin: 0 auto var(--sp-6);
}
.estate-tags {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3);
}
.estate-tags li {
  border: 1px solid var(--white-20); border-radius: 50px;
  padding: 9px 20px; font-size: var(--fs-sm); color: var(--lime);
}

/* Core values grid (7 cards, centred wrap) */
.values-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-5); max-width: 1080px; margin: 0 auto;
}
.value-card {
  flex: 1 1 300px; max-width: 340px;
  background: var(--mint); border-radius: 20px; padding: var(--sp-6);
}
.value-card .icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--forest); color: var(--white);
  display: grid; place-items: center; margin-bottom: var(--sp-4);
}
.value-card .icon i.ph { font-size: 24px; line-height: 1; }
.value-card h3 {
  font-family: var(--font-title); font-weight: 600;
  font-size: 1.3rem; color: var(--deep-pine); margin-bottom: var(--sp-2);
}
.value-card p { color: var(--ink-brown); font-size: var(--fs-base); margin: 0; }

/* Leadership initials placeholder (until real headshots arrive) */
.person .photo--initials {
  display: grid; place-items: center;
  font-family: var(--font-title); font-weight: 600; font-size: 2.6rem;
  color: var(--forest); background: var(--mint);
}

/* ============================================================
   About page — Figma rebuild (node 83:1133)
   ============================================================ */
/* Two-column hero — 65vh tall, content bottom-aligned, solid (no dot pattern) */
.page-hero.hero-split {
  min-height: 65vh;
  display: flex;
  align-items: flex-end;          /* content sits at the bottom of the hero */
  padding: 120px 0 64px;          /* top clears the absolute header; bottom = breathing room */
  background-image: none;         /* remove the dotted pattern */
}
.hero-split .container { width: 100%; }
.hero-split .hero-split-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: var(--sp-9); align-items: end; text-align: left;
}
.hero-split h1 { font-size: clamp(2rem, 9vw, 3.75rem); line-height: 0.95; margin-bottom: 0; }
.hero-split-right { max-width: 580px; padding-bottom: 6px; }
.hero-split-right p { margin-bottom: var(--sp-5); }
@media (max-width: 860px) {
  .hero-split .hero-split-grid { grid-template-columns: 1fr; gap: var(--sp-5); align-items: start; }
  /* Taller hero so content sits low under a generous gap (Figma 89:1134:
     ~186px between header and breadcrumb). flex-end keeps content bottom-aligned;
     max() gives short phones a floor so the spacing never collapses. */
  .page-hero.hero-split { min-height: max(600px, 76vh); padding-bottom: 44px; }
}

/* Full-width overview banner */
.overview-banner { padding: 0; }
.overview-banner img { display: block; width: 100%; height: clamp(360px, 46vw, 660px); object-fit: cover; }

/* Our Story: heading left, text + stats right */
.story-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: var(--sp-9); align-items: start; }
.story-head h2 { font-size: clamp(2rem, 3.2vw, 2.6rem); line-height: 1.12; }
.story-body p { margin-bottom: var(--sp-4); color: var(--charcoal); }
.inline-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: var(--sp-6); padding-top: var(--sp-5);
  border-top: 1px solid rgba(7, 39, 31, 0.12);
}
.inline-stats .stat { padding-right: var(--sp-5); border-right: 1px solid rgba(7, 39, 31, 0.12); }
.inline-stats .stat:last-child { border-right: 0; }
.inline-stats .num {
  display: block; font-family: var(--font-title); font-weight: 700;
  font-size: 2.2rem; color: var(--deep-pine); line-height: 1; margin-bottom: 8px;
}
.inline-stats .label { font-size: var(--fs-sm); color: var(--charcoal); }
@media (max-width: 860px) { .story-grid { grid-template-columns: 1fr; gap: var(--sp-6); } }
@media (max-width: 640px) {
  .inline-stats { grid-template-columns: 1fr; }
  .inline-stats .stat {
    display: flex; align-items: baseline; gap: 14px;
    padding: 12px 0; border-right: 0;
    border-bottom: 1px solid rgba(7, 39, 31, 0.12);
  }
  .inline-stats .stat:last-child { border-bottom: 0; }
  .inline-stats .num { margin-bottom: 0; font-size: 1.9rem; }
}

/* Mission & Vision: two lime cards (reusing .pillar), each text + photo */
.mv-articles { display: flex; flex-direction: column; gap: var(--sp-7); }

/* Core Values: tall image left + 7 items in a 2-col grid right */
.values-split { background: #eff8f6; padding: 0; display: grid; grid-template-columns: 0.42fr 0.58fr; align-items: stretch; }
.values-img { position: relative; overflow: hidden; }
.values-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.values-content { padding: var(--sp-10) clamp(36px, 4vw, 76px); }
.values-content .section-head { display: block; margin-bottom: var(--sp-7); }
.values-content .section-head .eyebrow { margin-bottom: var(--sp-4); }
.values-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7) var(--sp-6); }
.value-item .vi-icon i.ph { font-size: 28px; color: var(--forest); line-height: 1; }
.value-item h3 { font-family: var(--font-title); font-weight: 600; font-size: 1.25rem; color: var(--deep-pine); margin: 14px 0 6px; }
.value-item p { font-size: var(--fs-base); color: var(--charcoal); line-height: 1.45; }
@media (max-width: 900px) {
  .values-split { grid-template-columns: 1fr; }
  .values-img { height: 320px; }
  .values-content { padding: var(--sp-9) var(--container-pad); }
}
@media (max-width: 540px) { .values-grid2 { grid-template-columns: 1fr; } }

/* Team grid */
.team-section .section-head { display: block; }
.team-section .section-head h2 { max-width: 760px; }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-7) var(--sp-6); max-width: 1080px; }  /* left-aligned in the container */
.team-card .tc-photo {
  aspect-ratio: 29 / 34; border-radius: 14px; overflow: hidden;
  background: #eff8f6; margin-bottom: var(--sp-4);
}
.team-card .tc-photo img {
  width: 100%; height: 100%;
  object-fit: contain;            /* show the whole cutout — no head cropping */
  object-position: center bottom; /* grounded in the box, like Figma */
  display: block;
}
.team-card h3 { font-family: var(--font-title); font-weight: 600; font-size: 1.2rem; color: var(--deep-pine); margin-bottom: 4px; }
.team-card .tc-role {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--green-arrow); font-weight: 600; margin-bottom: 12px;
}
.team-card .tc-links { display: flex; gap: 12px; }
.team-card .tc-links a { color: var(--deep-pine); font-size: 20px; line-height: 1; transition: color .2s ease; }
.team-card .tc-links a:hover { color: var(--green-arrow); }
@media (max-width: 1000px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .team-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Story detail v2 — article + sticky sidebar (Figma 121:2)
   ============================================================ */
.article-section { padding: var(--sp-10) 0; }
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: clamp(32px, 3.5vw, 64px);
  align-items: start;
  max-width: 1160px;          /* centred block, not full width — closes the gap to the sidebar */
  margin: 0 auto;
}
.article-main.prose { max-width: none; margin: 0; }   /* fill the (now capped) main column, titles included */

/* prose rich-text enhancements */
.prose h2 { font-size: var(--fs-h2); line-height: 1.2; margin: var(--sp-9) 0 var(--sp-5); }
.prose h2:first-child { margin-top: 0; }
.prose > p { margin-bottom: var(--sp-5); }
.prose a:not(.btn) { color: var(--forest); text-decoration: underline; text-underline-offset: 3px; }
/* Article bodies carry author-pasted HTML that reuses generic class names ("btn
   primary", "btn ghost") which collide with the site's button component: it injects
   an arrow via ::after and leaves colour to .btn-primary/.btn-outline, which never
   match, so a pasted button on its own dark background renders dark-on-dark. The
   pasted markup styles itself inline, so drop the arrow and state each variant's
   text colour. No template puts a .btn inside .prose, so this is content-only. */
.prose .btn::after { content: none; }
.prose .btn:hover { transform: none; }
.prose .btn.primary { color: var(--white); }
.prose .btn.ghost { color: var(--deep-pine); }
.prose ul { margin: 0 0 var(--sp-6); padding-left: 1.4em; color: var(--charcoal); }
.prose li { margin-bottom: var(--sp-2); }
.article-figure { margin: var(--sp-8) 0; }
.article-figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-md); box-shadow: var(--shadow-md); }
.article-figure figcaption { margin-top: var(--sp-3); font-size: var(--fs-sm); font-style: italic; color: var(--charcoal); }

/* sticky sidebar */
.story-aside { position: sticky; top: 110px; display: flex; flex-direction: column; gap: var(--sp-5); }
.aside-card { background: var(--mint); border-radius: var(--r-md); padding: var(--sp-7); }
.aside-card h3 { font-size: var(--fs-h4); font-weight: 700; margin-bottom: var(--sp-5); color: var(--deep-pine); }
.detail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-5); }
.detail-list li { display: flex; align-items: flex-start; gap: var(--sp-3); }
.detail-list i { font-size: 1.3rem; color: var(--forest); line-height: 1; margin-top: 2px; flex-shrink: 0; }
.detail-list .k { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--charcoal); margin-bottom: 2px; }
.detail-list .v { display: block; font-weight: 600; color: var(--deep-pine); }
.aside-newsletter p { font-size: var(--fs-sm); color: var(--charcoal); margin-bottom: var(--sp-5); }
.aside-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.aside-form input { padding: 14px 18px; border: 1px solid rgba(7,39,31,0.14); border-radius: var(--r-sm); background: var(--white); font: inherit; color: var(--deep-pine); }
.aside-form input::placeholder { color: var(--charcoal); }
.aside-form button { padding: 14px; border: none; border-radius: var(--r-sm); background: var(--forest); color: var(--white); font-weight: 600; font-family: var(--font-body); transition: background .2s ease; }
.aside-form button:hover { background: var(--deep-pine); }
.aside-social .social-row { display: flex; gap: var(--sp-3); }
.aside-social a { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--white); color: var(--forest); font-size: 1.3rem; transition: background .2s ease, color .2s ease; }
.aside-social a:hover { background: var(--forest); color: var(--white); }

/* inline dark CTA card — solid deep-green, content centred (Figma 129:261) */
.inline-cta-section { padding: 0 0 var(--sp-10); }
.inline-cta {
  border-radius: var(--r-xl);
  background: linear-gradient(120deg, #05261c 0%, #0a3d2f 100%);
  padding: clamp(48px, 6vw, 88px) clamp(24px, 4vw, 48px);
  text-align: center;
}
.inline-cta-content { max-width: 620px; margin: 0 auto; }
.inline-cta-content h2 { color: var(--white); font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.12; margin-bottom: var(--sp-3); }
.inline-cta-content p { color: rgba(255,255,255,0.82); font-size: var(--fs-md); margin-bottom: var(--sp-6); }
.cta-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; }

/* paginated photo collage (Figma 129:468): tall tile left, wide tile top-right,
   two square tiles below, prev/next pager centred underneath */
.gallery-section .section-head { margin-bottom: var(--sp-8); gap: 0; }  /* eyebrow→heading spacing = the eyebrow's own 24px margin, not the 60px grid gap */

/* photo strip gallery — full-bleed auto-sliding band, like the home page hero marquee (colour, pause on hover) */
.gallery-section { padding-bottom: 0; }   /* strip runs flush to the section's bottom edge, like the home marquee */
.photo-strip { width: 100%; overflow: hidden; position: relative; }
.photo-strip .strip-track {
  display: flex; width: max-content;
  animation: marquee-slide 56s linear infinite;
}
.photo-strip:hover .strip-track { animation-play-state: paused; }
.photo-strip .tile {
  flex: 0 0 300px; height: 380px; overflow: hidden; position: relative;
  transition: flex-basis .45s ease;
}
.photo-strip .tile img {
  width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
  filter: grayscale(1);                      /* black & white until hovered, like the home marquee */
  transition: filter .5s ease, transform .5s ease;
}
.photo-strip .tile:hover { flex-basis: 425px; }   /* hovered photo expands, neighbours slide over */
.photo-strip .tile:hover img { filter: grayscale(0); transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .photo-strip .strip-track { animation: none; } }
@media (max-width: 700px) { .photo-strip .tile { flex: 0 0 220px; height: 300px; } }
.collage {
  display: none;
  grid-template-columns: 424fr 429fr 424fr;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
  aspect-ratio: 1312 / 878;
}
.collage.active { display: grid; }
.collage .tile { overflow: hidden; border-radius: var(--r-md); background: var(--white); }
.collage .tile img { width: 100%; height: 100%; object-fit: cover; }
.collage .t-tall { grid-row: 1 / 3; }
.collage .t-wide { grid-column: 2 / 4; }
.collage-nav { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-7); }
.collage-nav button {
  background: none; border: 0; padding: 4px;
  display: grid; place-items: center;
  font-size: 1.5rem; color: var(--deep-pine); cursor: pointer;
  transition: color .2s ease, transform .15s ease;
}
.collage-nav button:hover { color: var(--forest); transform: scale(1.1); }
.collage-nav .count { font-weight: 600; color: var(--deep-pine); min-width: 34px; text-align: center; }
@media (max-width: 700px) {
  .collage { grid-template-columns: 1fr 1fr; grid-template-rows: none; aspect-ratio: auto; gap: 12px; }
  .collage .t-tall { grid-row: auto; aspect-ratio: 1; }
  .collage .t-wide { grid-column: 1 / 3; aspect-ratio: 16 / 10; }
  .collage .tile { aspect-ratio: 1; }
  .collage .t-wide { aspect-ratio: 16 / 10; }
}

/* related section — eyebrow, one-line heading and button stacked left (Figma 129:309) */
.related-section { padding: var(--sp-10) 0; }
.related-head { margin-bottom: var(--sp-9); }
.related-head h2 { max-width: none; margin-bottom: var(--sp-6); }

@media (max-width: 980px) {
  .article-layout { grid-template-columns: 1fr; gap: var(--sp-9); }
  .story-aside { position: static; }
  .story-hero { min-height: 480px; }
  .story-hero .container { padding-top: 130px; }
}

/* ============================================================
   Get Involved v2 (Figma 134:522) — Impact Loop + tabbed forms
   ============================================================ */
.head-lg h2 { font-size: clamp(2.25rem, 4.4vw, 3.375rem); font-weight: 600; line-height: 1.08; max-width: none; }
.head-lg p { max-width: 780px; font-size: var(--fs-md); }
.eyebrow-plain {
  display: block;
  text-transform: uppercase; letter-spacing: 0.14em;
  font-weight: 600; font-size: var(--fs-sm);
  color: var(--green-arrow);
  margin-bottom: var(--sp-4);
}

/* Impact Loop cards */
.loop-card {
  border-radius: var(--r-sm);
  padding: var(--sp-7);
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--sp-4);
}
.loop-card .chip {
  width: 48px; height: 48px; border-radius: 12px;
  display: grid; place-items: center; font-size: 1.5rem;
}
.loop-card h3 { font-size: 1.75rem; font-weight: 600; margin: var(--sp-2) 0 0; }
.loop-card p { margin: 0; flex: 1; }
.loop-card .card-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; margin-top: var(--sp-2);
  transition: gap .2s ease;
}
.loop-card .card-link:hover { gap: 12px; }
.loop-card--mint { background: #eff8f6; }
.loop-card--mint .chip { background: var(--forest); color: var(--mint); }
.loop-card--mint .card-link { color: var(--forest); }
.loop-card--forest { background: var(--forest); }
.loop-card--forest h3 { color: var(--white); }
.loop-card--forest p { color: rgba(255,255,255,0.85); }
.loop-card--forest .chip { background: var(--lime-bright); color: var(--deep-pine); }
.loop-card--forest .card-link { color: var(--lime-bright); }
.loop-card--lime { background: var(--lime-deep); }
.loop-card--lime h3 { color: var(--deep-pine); }
.loop-card--lime p { color: rgba(7,39,31,0.75); }
.loop-card--lime .chip { background: var(--deep-pine); color: var(--lime-deep); }

/* Solid block button (Figma full-width dark rectangles) */
.btn-block {
  display: block; width: 100%;
  padding: 16px 24px;
  background: var(--deep-pine); color: var(--white);
  border: none; border-radius: 12px;
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-base);
  text-align: center; cursor: pointer;
  transition: background .2s ease, transform .15s ease;
}
.btn-block:hover { background: var(--forest); color: var(--white); transform: translateY(-1px); }
.loop-card--lime .btn-block { align-self: stretch; margin-top: var(--sp-2); }

/* Tab switcher */
.tab-switch {
  display: flex; width: max-content; margin: 0 auto var(--sp-9);
  background: #eff8f6; border: 1px solid rgba(7,39,31,0.08);
  border-radius: var(--r-pill); padding: 6px; gap: 4px;
}
.tab-switch button {
  border: none; background: transparent;
  padding: 12px 28px; border-radius: var(--r-pill);
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm);
  color: var(--deep-pine); cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.tab-switch button.active { background: var(--deep-pine); color: var(--white); }

/* Tab panels */
.tab-panel { display: none; }
.tab-panel.active {
  display: grid; grid-template-columns: 1fr 1.15fr;
  gap: clamp(32px, 5vw, 80px); align-items: start;
}
.join-copy h3 { font-size: clamp(1.5rem, 2.4vw, 1.875rem); font-weight: 600; color: var(--forest); margin-bottom: var(--sp-4); }
.note-quote {
  background: var(--mint); border-left: 4px solid var(--forest);
  border-radius: 10px; padding: var(--sp-5) var(--sp-6);
  font-style: italic; color: var(--charcoal);
  margin: var(--sp-6) 0;
}
.stat-badge { display: flex; align-items: center; gap: var(--sp-3); font-weight: 600; color: var(--deep-pine); }
.stat-badge .ic {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--lime-bright); color: var(--deep-pine);
  display: grid; place-items: center; font-size: 1.25rem;
}

/* Join form card — bordered white card, rectangular fields, uppercase labels */
.join-card {
  background: var(--white);
  border: 1px solid rgba(7,39,31,0.12);
  border-radius: 16px;
  padding: clamp(24px, 3vw, 36px);
  box-shadow: var(--shadow-sm);
  display: grid; gap: var(--sp-5);
}
.join-card h3 { font-size: 1.5rem; font-weight: 600; color: var(--forest); margin: 0 0 var(--sp-2); }
.join-card .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.join-card .field { display: flex; flex-direction: column; gap: var(--sp-2); }
.join-card label {
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.75rem; font-weight: 700; color: var(--deep-pine);
}
.join-card input, .join-card select, .join-card textarea {
  font-family: var(--font-body); font-size: var(--fs-base);
  padding: 13px 16px;
  border: 1px solid rgba(7,39,31,0.18); border-radius: 10px;
  background: var(--white); color: var(--deep-pine);
}
.join-card textarea { min-height: 120px; resize: vertical; }
.join-card input:focus, .join-card select:focus, .join-card textarea:focus {
  outline: none; border-color: var(--forest);
  box-shadow: 0 0 0 4px rgba(11, 78, 61, 0.12);
}
.join-card .btn-block { margin-top: var(--sp-2); }
.join-card [data-feedback] { color: var(--forest); }

@media (max-width: 900px) {
  .tab-panel.active { grid-template-columns: 1fr; gap: var(--sp-7); }
  .tab-switch { width: 100%; }
  .tab-switch button { flex: 1; padding: 12px 10px; }
}
@media (max-width: 640px) {
  .join-card .form-row { grid-template-columns: 1fr; }
}