/* ==========================================================================
   HAPPY DAYS FOR THE NEEDY FOUNDATION
   Design system — editorial, restrained, international.

   Benchmarked against classicalchoraleug.com: generous whitespace, an
   editorial serif paired with a quiet sans, hairline rules instead of heavy
   shadows, and photography given room to breathe.

   CONTENTS
     01  Tokens
     02  Reset & base
     03  Typography
     04  Layout primitives
     05  Buttons & forms
     06  Header, nav, topbar
     07  Hero (home)
     08  Page banner
     09  Statistics band
     10  Cards — programme, story, event, photo, person
     11  Sections — mission, values, approach, timeline, testimonials
     12  Gallery & lightbox
     13  Giving
     14  Footer
     15  Floating actions & chat
     16  Motion
     17  Utilities
     18  Responsive
   ========================================================================== */

/* ==========================================================================
   01  TOKENS
   ========================================================================== */
:root {
  /* --- Ink (warm near-black, per the reference palette) ------------- */
  --ink-900: #17130D;   /* --ink */
  --ink-800: #241E16;
  --ink-700: #3A332A;   /* --ink-soft */
  --ink-500: #7C7466;   /* --muted */
  --ink-400: #948B7C;
  --ink-300: #B3AA9A;

  /* --- Paper (warm ivory ground) ------------------------------------ */
  --paper:   #FFFFFF;   /* --paper-raised */
  --cream:   #FAF7F1;   /* --paper */
  --sand:    #F2ECE0;
  --line:    #E7E0D2;   /* --line */
  --line-soft: #F0EADE;

  /* --- Green (the foundation's own brand mark, kept as support) ----- */
  --forest-900: #163A26;
  --forest-800: #1F5335;
  --forest-700: #2E7D4F;   /* matches the reference --success */
  --forest-600: #379962;
  --forest-500: #43B073;
  --forest-200: #BFE0CD;
  --forest-100: #E6F2EA;
  --forest-50:  #F3F9F5;

  /* --- Antique gold (the reference accent) -------------------------- */
  --gold-800: #6F581F;
  --gold-700: #8A6E30;
  --gold-600: #9C7C36;
  --gold-500: #B08D3E;   /* --gold */
  --gold-300: #D4AF5E;   /* --gold-bright */
  --gold-100: #F7F1E2;
  --gold-soft: rgba(176, 141, 62, 0.12);

  /* --- Semantic ------------------------------------------------------ */
  --bg:        var(--paper);
  --bg-alt:    var(--cream);
  --bg-deep:   var(--ink-900);
  --text:      var(--ink-900);
  --text-muted:var(--ink-500);
  --border:    var(--line);
  --primary:   var(--forest-700);
  --accent:    var(--gold-500);
  --danger:    #B3382C;

  /* --- Type (single family, as on the reference site) --------------- */
  --font-display: "Arsenal", "Segoe UI", system-ui, sans-serif;
  --font-sans: "Arsenal", "Segoe UI", system-ui, sans-serif;

  --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --step--1: clamp(0.84rem, 0.81rem + 0.14vw, 0.92rem);
  --step-0:  clamp(1.00rem, 0.97rem + 0.16vw, 1.09rem);
  --step-1:  clamp(1.19rem, 1.13rem + 0.30vw, 1.37rem);
  --step-2:  clamp(1.41rem, 1.31rem + 0.51vw, 1.73rem);
  --step-3:  clamp(1.68rem, 1.51rem + 0.83vw, 2.18rem);
  --step-4:  clamp(2.00rem, 1.74rem + 1.29vw, 2.75rem);
  --step-5:  clamp(2.38rem, 1.98rem + 1.96vw, 3.46rem);
  --step-6:  clamp(2.83rem, 2.25rem + 2.90vw, 4.36rem);

  /* --- Space (fluid) -------------------------------------------------- */
  --s-3xs: 0.25rem;
  --s-2xs: 0.5rem;
  --s-xs:  0.75rem;
  --s-sm:  1rem;
  --s-md:  1.5rem;
  --s-lg:  2rem;
  --s-xl:  3rem;
  --s-2xl: 4rem;
  --s-3xl: clamp(4rem, 3rem + 5vw, 7rem);
  --s-4xl: clamp(5rem, 3.5rem + 7vw, 9rem);

  /* --- Radii ---------------------------------------------------------- */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* --- Elevation (restrained) ----------------------------------------- */
  --e-1: 0 1px 2px rgba(16, 26, 23, 0.04);
  --e-2: 0 4px 14px -6px rgba(16, 26, 23, 0.10);
  --e-3: 0 14px 40px -18px rgba(16, 26, 23, 0.20);
  --e-4: 0 28px 70px -28px rgba(16, 26, 23, 0.28);

  /* --- Layout ---------------------------------------------------------- */
  --wrap: 1200px;
  --wrap-narrow: 780px;
  --wrap-wide: 1400px;
  /* Layering. One ordered scale, so nothing has to guess a number.
     The drawer must outrank the floating buttons, which is exactly what
     the old ad-hoc values got wrong. */
  --z-fab: 150;
  --z-flash: 200;
  --z-header: 300;
  --z-drawer: 310;
  --z-lightbox: 400;
  --z-skip: 999;

  --topbar-h: 40px;
  --header-h: 76px;

  /* --- Motion ---------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 200ms var(--ease);
  --t: 380ms var(--ease);
  --t-slow: 700ms var(--ease);
}

/* Dark mode — the same warm palette, inverted for low light.
   The reference site is light-only, so this is derived from its hues
   rather than copied: warm charcoal grounds, the same antique gold. */
[data-theme="dark"] {
  --bg:        #14110C;
  --bg-alt:    #1B1712;
  --bg-deep:   #0D0B07;
  --paper:     #14110C;
  --cream:     #1B1712;
  --sand:      #241F18;
  --line:      #332C22;
  --line-soft: #262019;
  --text:      #F3EFE7;
  --text-muted:#A79D8C;
  --ink-900:   #F3EFE7;
  --ink-800:   #E5DFD3;
  --ink-700:   #CFC7B8;
  --ink-500:   #A79D8C;
  --ink-400:   #8E8474;
  --ink-300:   #6F675A;
  --forest-100:#1C3527;
  --forest-50: #16281D;
  --forest-700:#4FA878;
  --gold-100:  #2E2617;
  --gold-500:  #C9A557;
  --gold-600:  #B08D3E;
  --primary:   #4FA878;
  --e-1: 0 1px 2px rgba(0,0,0,0.35);
  --e-2: 0 4px 14px -6px rgba(0,0,0,0.55);
  --e-3: 0 14px 40px -18px rgba(0,0,0,0.65);
  --e-4: 0 28px 70px -28px rgba(0,0,0,0.75);
}

/* ==========================================================================
   02  RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s-lg));
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background var(--t), color var(--t);
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
figure { margin: 0; }

::selection { background: var(--gold-300); color: var(--ink-900); }

:focus-visible {
  outline: 2px solid var(--forest-600);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-skip);
  padding: var(--s-xs) var(--s-md);
  background: var(--forest-800);
  color: #fff;
  border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   03  TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5 {
  margin: 0 0 var(--s-sm);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}

h1 { font-size: var(--step-6); letter-spacing: -0.03em; }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 var(--s-sm); }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; }

/* The small uppercase label that opens most sections */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2xs);
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--forest-600);
  margin-bottom: var(--s-sm);
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--gold-500);
  flex: none;
}
.eyebrow--gold { color: var(--gold-600); }
.eyebrow--light { color: rgba(255, 255, 255, 0.82); }
.eyebrow--light::before { background: var(--gold-300); }
.eyebrow--center { justify-content: center; }

/* A lead paragraph — used under section titles */
.lead {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 62ch;
}

.display-quote {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.35;
  font-style: italic;
  letter-spacing: -0.01em;
}

.gold { color: var(--gold-600); }
.gold-em {
  color: var(--gold-300);
  font-style: italic;
}

/* Long-form body copy (stories, programme detail) */
.prose { max-width: 68ch; }
.prose > p {
  font-size: var(--step-1);
  line-height: 1.75;
  color: var(--ink-700);
  margin-bottom: var(--s-md);
}
.prose > p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 3.6em;
  line-height: 0.82;
  padding: 0.08em 0.1em 0 0;
  color: var(--forest-700);
  font-weight: 700;
}
.prose h2, .prose h3 { margin-top: var(--s-xl); }
.prose blockquote {
  margin: var(--s-xl) 0;
  padding-left: var(--s-md);
  border-left: 2px solid var(--gold-500);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-2);
  line-height: 1.45;
  color: var(--forest-700);
}

/* ==========================================================================
   04  LAYOUT PRIMITIVES
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s-md);
}
.wrap--narrow { max-width: var(--wrap-narrow); }
.wrap--wide { max-width: var(--wrap-wide); }

.section { padding-block: var(--s-3xl); }
.section--tight { padding-block: var(--s-2xl); }
.section--alt { background: var(--bg-alt); }
.section--sand { background: var(--sand); }
.section--deep {
  background: var(--bg-deep);
  color: rgba(255, 255, 255, 0.86);
}
.section--deep h1,
.section--deep h2,
.section--deep h3 { color: #fff; }
.section--deep .lead { color: rgba(255, 255, 255, 0.72); }

/* A hairline rule that separates sections without shouting */
.section--ruled { border-top: 1px solid var(--border); }

.section-head {
  max-width: 64ch;
  margin-bottom: var(--s-2xl);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head--center .lead { margin-inline: auto; }

/* Title on the left, action on the right */
.section-head--split {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-lg);
  flex-wrap: wrap;
}
.section-head--split > div { max-width: 52ch; }

.grid { display: grid; gap: var(--s-md); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }

/* A grid whose final row centres instead of leaving a hole on one side.
   Used wherever the number of items is not a multiple of the column count
   (five values, two events, and so on). */
.grid--balanced {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-md);
}
.grid--balanced > * {
  flex: 1 1 clamp(16rem, 30%, 21rem);
  min-width: 0;
  max-width: 26rem;
}
/* Four-up variant for smaller tiles such as people */
.grid--balanced-sm > * { flex: 1 1 clamp(12rem, 22%, 15rem); max-width: 18rem; }

/* Editorial split: image one side, words the other */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--s-lg), 5vw, var(--s-3xl));
  align-items: center;
}
.split--wide-text { grid-template-columns: 0.85fr 1.15fr; }
.split--wide-media { grid-template-columns: 1.15fr 0.85fr; }
.split--top { align-items: start; }
/* Both columns share the row height, so a photograph never leaves the
   opposite column visually stranded. */
.split--stretch { align-items: stretch; }
.split--stretch > * { min-width: 0; }

/* ==========================================================================
   05  BUTTONS & FORMS
   ========================================================================== */
.btn {
  --btn-bg: var(--forest-700);
  --btn-fg: #fff;
  --btn-bd: var(--forest-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2xs);
  padding: 0.85em 1.6em;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), transform var(--t-fast),
              box-shadow var(--t-fast);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--e-2);
}
.btn:active { transform: translateY(0); }
.btn svg { width: 1.05em; height: 1.05em; flex: none; }

.btn--gold {
  --btn-bg: var(--gold-500);
  --btn-fg: var(--ink-900);
  --btn-bd: var(--gold-500);
}
.btn--gold:hover { --btn-bg: var(--gold-600); --btn-bd: var(--gold-600); }

.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--forest-700);
  --btn-bd: var(--forest-700);
}
.btn--outline:hover {
  --btn-bg: var(--forest-700);
  --btn-fg: #fff;
}

.btn--quiet {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--border);
}
.btn--quiet:hover { --btn-bd: var(--forest-600); --btn-fg: var(--forest-700); }

.btn--ghost {
  --btn-bg: rgba(255, 255, 255, 0.08);
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(10px);
}
.btn--ghost:hover { --btn-bg: #fff; --btn-fg: var(--ink-900); --btn-bd: #fff; }

.btn--lg { padding: 1em 2em; font-size: var(--step-0); }
.btn--sm { padding: 0.6em 1.2em; font-size: var(--step--2); }
.btn--block { width: 100%; }

/* A text link with a moving underline */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-weight: 700;
  font-size: var(--step--1);
  color: var(--forest-700);
  padding-bottom: 2px;
  background-image: linear-gradient(var(--gold-500), var(--gold-500));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size var(--t);
}
.link-arrow svg { width: 1em; height: 1em; transition: transform var(--t-fast); }
.link-arrow:hover { background-size: 100% 1px; }
.link-arrow:hover svg { transform: translateX(3px); }

/* --- Fields ---------------------------------------------------------- */
.field { margin-bottom: var(--s-sm); }
.field > label {
  display: block;
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s-3xs);
}

input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="url"], input[type="search"],
select, textarea {
  width: 100%;
  padding: 0.8em 1em;
  background: var(--paper);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
input::placeholder, textarea::placeholder { color: var(--ink-300); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--forest-600);
  box-shadow: 0 0 0 3px var(--forest-100);
}
textarea { resize: vertical; min-height: 8rem; }

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6B65' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9em center;
  background-size: 1.1em;
  padding-right: 2.6em;
}

.errorlist {
  margin: var(--s-3xs) 0 0;
  padding: 0;
  font-size: var(--step--1);
  color: #B4232A;
}

.form-note {
  font-size: var(--step--1);
  color: var(--text-muted);
}

/* Flash messages */
.flash-stack {
  position: fixed;
  top: calc(var(--header-h) + var(--s-md));
  right: var(--s-md);
  z-index: var(--z-flash);
  display: grid;
  gap: var(--s-2xs);
  max-width: min(28rem, calc(100vw - 2 * var(--s-md)));
}
.flash {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2xs);
  padding: var(--s-xs) var(--s-sm);
  background: var(--paper);
  border: 1px solid var(--border);
  border-left: 3px solid var(--forest-600);
  border-radius: var(--r-md);
  box-shadow: var(--e-3);
  font-size: var(--step--1);
  animation: flashIn 400ms var(--ease) both;
}
.flash--success { border-left-color: var(--forest-600); }
.flash--error { border-left-color: #B4232A; }
.flash--warning { border-left-color: var(--gold-500); }
.flash button { color: var(--ink-300); margin-left: auto; line-height: 1; }
@keyframes flashIn {
  from { opacity: 0; transform: translateX(1rem); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   06  HEADER, NAV, TOPBAR
   ========================================================================== */
.topbar {
  background: var(--forest-900);
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--step--2);
  letter-spacing: 0.01em;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  min-height: var(--topbar-h);
}
.topbar__list { display: flex; align-items: center; gap: var(--s-md); flex-wrap: wrap; }
.topbar__list li { display: inline-flex; align-items: center; gap: 0.45em; }
.topbar__list svg { width: 13px; height: 13px; opacity: 0.6; }
.topbar a { transition: color var(--t-fast); }
.topbar a:hover { color: var(--gold-300); }
.topbar__right { display: flex; align-items: center; gap: var(--s-sm); }
.topbar__socials { display: flex; gap: var(--s-xs); }
.topbar__socials svg { width: 14px; height: 14px; }

.theme-toggle {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-pill);
  color: rgba(255, 255, 255, 0.75);
  transition: background var(--t-fast), color var(--t-fast);
}
.theme-toggle:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.theme-toggle svg { width: 15px; height: 15px; }
.theme-toggle .i-moon { display: none; }
[data-theme="dark"] .theme-toggle .i-sun { display: none; }
[data-theme="dark"] .theme-toggle .i-moon { display: block; }

/* --- Header ---------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.header.is-stuck {
  border-bottom-color: var(--border);
  box-shadow: var(--e-1);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  min-height: var(--header-h);
}

/* --- Brand ----------------------------------------------------------- */
.brand { display: inline-flex; align-items: center; gap: var(--s-2xs); }
.brand__mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: var(--r-md);
  background: linear-gradient(140deg, var(--forest-700), var(--forest-500));
  color: var(--gold-300);
  overflow: hidden;
}
.brand__mark img { width: 100%; height: 100%; object-fit: cover; }
.brand__mark svg { width: 24px; height: 24px; }
.brand__text { display: grid; line-height: 1.15; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
}
.brand__sub {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.brand--light .brand__name { color: #fff; }
.brand--light .brand__sub { color: rgba(255, 255, 255, 0.6); }

/* --- Navigation ------------------------------------------------------- */
.nav { display: flex; align-items: center; gap: var(--s-sm); }
.nav__list { display: flex; align-items: center; }
.nav__item { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.6rem 0.85rem;
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--ink-700);
  border-radius: var(--r-sm);
  transition: color var(--t-fast);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.25rem;
  height: 1px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t);
}
.nav__link:hover,
.nav__link[aria-current="page"],
.nav__item.is-open > .nav__link { color: var(--forest-700); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after,
.nav__item.is-open > .nav__link::after { transform: scaleX(1); }
.nav__link .chev { width: 12px; height: 12px; transition: transform var(--t-fast); }
.nav__item.is-open .chev { transform: rotate(180deg); }

/* Dropdown */
.dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 260px;
  padding: var(--s-2xs);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--e-4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t), transform var(--t), visibility var(--t);
}
.nav__item:hover > .dropdown,
.nav__item.is-open > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.dropdown__link {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--s-2xs);
  padding: 0.6rem 0.7rem;
  border-radius: var(--r-md);
  transition: background var(--t-fast);
}
.dropdown__link:hover { background: var(--forest-50); }
.dropdown__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--forest-100);
  color: var(--forest-700);
}
.dropdown__icon svg { width: 16px; height: 16px; }
.dropdown__title {
  display: block;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--text);
}
.dropdown__desc {
  display: block;
  font-size: var(--step--2);
  color: var(--text-muted);
}

.nav__cta { margin-left: var(--s-2xs); }

/* Burger */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 9px;
  border-radius: var(--r-md);
}
.burger span {
  height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--t), opacity var(--t-fast);
}
.burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ==========================================================================
   07  HERO (home)
   ========================================================================== */
.hero {
  position: relative;
  /* Tall enough that the photograph reads as a photograph, not a strip. */
  min-height: clamp(660px, 94vh, 1040px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink-900);
  color: #fff;
  isolation: isolate;
}

.hero__stage { position: absolute; inset: 0; z-index: 0; }

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1200ms var(--ease-in-out);
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transform: scale(1.04);
}
.hero__slide.is-active img {
  animation: heroDrift 12s linear forwards;
}
@keyframes heroDrift {
  /* A very slight drift — enough to feel alive, not enough to soften detail */
  from { transform: scale(1.02); }
  to   { transform: scale(1.06); }
}

/* Scrim: a narrow band behind the words only. The rest of the frame is left
   almost untouched so the photograph stays sharp and readable. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top,
      rgba(23, 19, 13, 0.88) 0%,
      rgba(23, 19, 13, 0.40) 26%,
      rgba(23, 19, 13, 0.04) 52%,
      rgba(23, 19, 13, 0) 70%),
    linear-gradient(to right,
      rgba(23, 19, 13, 0.52) 0%,
      rgba(23, 19, 13, 0.10) 42%,
      rgba(23, 19, 13, 0) 68%);
}

.hero__body {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: clamp(var(--s-2xl), 8vh, var(--s-4xl));
}
.hero__content { max-width: 46rem; }

.hero__title {
  font-size: var(--step-6);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: #fff;
  margin-bottom: var(--s-sm);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
.hero__sub {
  font-size: var(--step-1);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
  max-width: 38rem;
  margin-bottom: var(--s-lg);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.45);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-xs); }

/* Words animate in with the picture */
.hero__slide-copy > * {
  opacity: 0;
  transform: translateY(1.4rem);
}
.hero__slide.is-active .hero__slide-copy > * {
  animation: heroCopyIn 900ms var(--ease) forwards;
}
.hero__slide.is-active .hero__slide-copy > *:nth-child(1) { animation-delay: 240ms; }
.hero__slide.is-active .hero__slide-copy > *:nth-child(2) { animation-delay: 360ms; }
.hero__slide.is-active .hero__slide-copy > *:nth-child(3) { animation-delay: 480ms; }
.hero__slide.is-active .hero__slide-copy > *:nth-child(4) { animation-delay: 600ms; }
@keyframes heroCopyIn {
  to { opacity: 1; transform: none; }
}

/* Per-slide caption — the photograph's own credit line */
.hero__credit {
  position: absolute;
  right: var(--s-md);
  bottom: var(--s-md);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 0.9em;
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(7, 43, 36, 0.42);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-pill);
}
.hero__credit::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-300);
  flex: none;
}

/* Controls */
.hero__controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--s-md);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--s-sm);
}
.hero__dots { display: flex; gap: var(--s-2xs); }
.hero__dot {
  position: relative;
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
  transition: width var(--t);
}
.hero__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold-300);
  transform-origin: left;
  transform: scaleX(0);
}
.hero__dot.is-active { width: 56px; }
.hero__dot.is-active::after { animation: dotFill linear forwards; }
@keyframes dotFill { to { transform: scaleX(1); } }

.hero__arrows { display: flex; gap: var(--s-3xs); margin-left: auto; }
.hero__arrow {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.hero__arrow:hover {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--ink-900);
}
.hero__arrow svg { width: 16px; height: 16px; }

/* ==========================================================================
   08  PAGE BANNER
   ========================================================================== */
.banner {
  position: relative;
  padding-block: clamp(var(--s-2xl), 12vh, var(--s-4xl));
  background: var(--forest-900);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.banner__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.banner__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
.banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right, rgba(7, 43, 36, 0.90) 0%, rgba(7, 43, 36, 0.62) 55%, rgba(7, 43, 36, 0.34) 100%);
}
.banner__title { color: #fff; margin-bottom: var(--s-xs); }
.banner__intro {
  font-size: var(--step-1);
  color: rgba(255, 255, 255, 0.82);
  max-width: 46rem;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  margin-bottom: var(--s-sm);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.crumbs a { color: var(--gold-300); transition: color var(--t-fast); }
.crumbs a:hover { color: #fff; }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: 0.5em; opacity: 0.4; }

/* ==========================================================================
   09  STATISTICS BAND
   ========================================================================== */
.stats {
  position: relative;
  z-index: 3;
  margin-top: calc(var(--s-2xl) * -1);
}
.stats__panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--e-4);
  overflow: hidden;
}
.stat {
  padding: var(--s-lg) var(--s-md);
  text-align: center;
  position: relative;
}
.stat + .stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: var(--border);
}
.stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--forest-700);
}
.stat__value .suffix { color: var(--gold-500); }
.stat__label {
  display: block;
  margin-top: var(--s-3xs);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Inline variant used inside dark sections */
.stats--inline .stats__panel {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
.stats--inline .stat__value { color: var(--gold-300); }
.stats--inline .stat__label { color: rgba(255, 255, 255, 0.66); }
.stats--inline .stat + .stat::before { background: rgba(255, 255, 255, 0.16); }

/* ==========================================================================
   10  CARDS
   ========================================================================== */

/* --- Shared card frame ------------------------------------------------ */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--e-3);
  border-color: var(--forest-200);
}
.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--sand);
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.card:hover .card__media img { transform: scale(1.05); }

/* The caption that rides on the photograph */
.card__overlay {
  position: absolute;
  left: var(--s-xs);
  right: var(--s-xs);
  bottom: var(--s-xs);
  padding: 0.45em 0.85em;
  font-size: var(--step--2);
  font-family: var(--font-display);
  font-style: italic;
  color: #fff;
  background: rgba(7, 43, 36, 0.55);
  backdrop-filter: blur(8px);
  border-radius: var(--r-pill);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t), transform var(--t);
}
.card:hover .card__overlay { opacity: 1; transform: none; }

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--s-md);
  gap: var(--s-2xs);
}
.card__kicker {
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--forest-600);
}
.card__title {
  font-size: var(--step-1);
  margin: 0;
  letter-spacing: -0.015em;
}
.card__title a { transition: color var(--t-fast); }
.card__title a:hover { color: var(--forest-700); }
.card__text {
  color: var(--text-muted);
  font-size: var(--step--1);
  line-height: 1.6;
  margin: 0;
}
.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2xs);
  margin-top: auto;
  padding-top: var(--s-xs);
}
.card__meta {
  font-size: var(--step--2);
  color: var(--ink-400);
  letter-spacing: 0.04em;
}

/* --- Programme card --------------------------------------------------- */
.programme {
  display: grid;
  grid-template-rows: auto 1fr;
}
.programme__icon {
  position: absolute;
  top: var(--s-xs);
  left: var(--s-xs);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.94);
  color: var(--forest-700);
  box-shadow: var(--e-2);
}
.programme__icon svg { width: 19px; height: 19px; }
.programme__impact {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  margin-top: var(--s-3xs);
  font-size: var(--step--2);
  color: var(--text-muted);
}
.programme__impact b {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--gold-600);
  letter-spacing: -0.02em;
}

/* --- Story card ------------------------------------------------------- */
.story-card .card__media { aspect-ratio: 3 / 2; }

/* Featured story — editorial split */
.story-feature {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.story-feature__media { position: relative; min-height: 22rem; }
.story-feature__media img { width: 100%; height: 100%; object-fit: cover; }
.story-feature__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-xs);
  padding: clamp(var(--s-md), 4vw, var(--s-2xl));
}

/* --- Event card ------------------------------------------------------- */
.event-card .card__media { aspect-ratio: 16 / 10; }
.event-date {
  position: absolute;
  top: var(--s-xs);
  left: var(--s-xs);
  display: grid;
  place-items: center;
  min-width: 54px;
  padding: 0.4rem 0.5rem;
  background: var(--paper);
  border-radius: var(--r-md);
  box-shadow: var(--e-2);
  text-align: center;
  line-height: 1;
}
.event-date__day {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--forest-700);
}
.event-date__mon {
  margin-top: 2px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.28em 0.8em;
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  background: var(--forest-100);
  color: var(--forest-700);
}
.chip--gold { background: var(--gold-100); color: var(--gold-800); }
.chip--muted { background: var(--sand); color: var(--text-muted); }
.chip--float {
  position: absolute;
  top: var(--s-xs);
  right: var(--s-xs);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--e-1);
}

/* --- Person card -----------------------------------------------------
   Portraits are small circles rather than tall rectangles, so a row of
   people reads as a row of faces and not a wall of images.
   --------------------------------------------------------------------- */
.person {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--s-sm) var(--s-xs) var(--s-md);
}
.person__media {
  position: relative;
  width: clamp(104px, 12vw, 132px);
  aspect-ratio: 1;
  flex: none;
  overflow: hidden;
  border-radius: 50%;
  background: var(--sand);
  box-shadow: var(--e-2);
  /* A hairline gold ring, drawn outside the image */
  outline: 1px solid var(--line);
  outline-offset: 5px;
  transition: outline-color var(--t), box-shadow var(--t);
}
.person:hover .person__media {
  outline-color: var(--gold-500);
  box-shadow: var(--e-3);
}
.person__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;   /* keeps faces in frame when cropped square */
  transition: transform var(--t-slow);
}
.person:hover .person__media img { transform: scale(1.06); }

.person__name {
  margin: var(--s-md) 0 0;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: -0.005em;
}
.person__role {
  display: block;
  margin-top: 2px;
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--gold-600);
}
.person__bio {
  margin-top: var(--s-2xs);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 30ch;
}
/* The quote now sits below the portrait instead of covering it */
.person__quote {
  margin-top: var(--s-2xs);
  font-style: italic;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--ink-700);
  max-width: 30ch;
}
.person__quote::before { content: "\201C"; }
.person__quote::after  { content: "\201D"; }

/* Leadership are only slightly larger — the difference should be quiet */
.person--lead .person__media { width: clamp(132px, 15vw, 164px); }
.person--lead .person__name { font-size: var(--step-1); }

/* ==========================================================================
   11  SECTIONS
   ========================================================================== */

/* --- Mission cards (goal / vision / motto) ---------------------------- */
.pillar {
  padding: var(--s-lg);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  border-top: 3px solid var(--forest-700);
  transition: transform var(--t), box-shadow var(--t);
}
.pillar:hover { transform: translateY(-3px); box-shadow: var(--e-2); }
.pillar--gold { border-top-color: var(--gold-500); }
.pillar--deep { border-top-color: var(--forest-900); }
.pillar__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: var(--s-sm);
  border-radius: var(--r-md);
  background: var(--forest-100);
  color: var(--forest-700);
}
.pillar__icon svg { width: 22px; height: 22px; }
.pillar h3 { font-size: var(--step-1); margin-bottom: var(--s-3xs); }
.pillar p { color: var(--text-muted); font-size: var(--step--1); line-height: 1.65; }

/* Icon beside the words rather than above them — reads better in a
   narrow column and keeps the block vertically compact. */
.pillar--row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-sm);
  align-items: start;
}
.pillar--row .pillar__icon { margin-bottom: 0; }

/* Keeps a text column vertically centred against a full-height photograph */
.split__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* A short intro column beside a long list (a timeline, a set of steps).
   Sticking it in place stops the short side from looking abandoned. */
.split__aside {
  position: sticky;
  top: calc(var(--header-h) + var(--s-lg));
  align-self: start;
}
@media (max-width: 900px) {
  .split__aside { position: static; }
}

/* --- Value tiles (photo + word) --------------------------------------- */
.value {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 20rem;
  padding: var(--s-md);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: #fff;
  isolation: isolate;
  background: var(--forest-800);
}
.value__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.value__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.value:hover .value__bg img { transform: scale(1.06); }
.value::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(7, 43, 36, 0.94) 8%, rgba(7, 43, 36, 0.45) 55%, rgba(7, 43, 36, 0.12) 100%);
  transition: background var(--t);
}
.value:hover::after {
  background: linear-gradient(to top, rgba(122, 90, 18, 0.92) 8%, rgba(7, 43, 36, 0.42) 60%, rgba(7, 43, 36, 0.08) 100%);
}
.value__num {
  position: absolute;
  top: var(--s-md);
  right: var(--s-md);
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: -0.04em;
}
.value__name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  color: #fff;
  margin: 0 0 var(--s-3xs);
  letter-spacing: -0.02em;
}
.value__text {
  font-size: var(--step--1);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.84);
  margin: 0;
}

/* --- Approach steps --------------------------------------------------- */
.steps { counter-reset: step; }
.step {
  position: relative;
  padding: var(--s-md) 0 var(--s-md) var(--s-2xl);
  border-top: 1px solid var(--border);
}
.step:last-child { border-bottom: 1px solid var(--border); }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: var(--s-md);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--gold-500);
  letter-spacing: -0.02em;
}
.step h3 { font-size: var(--step-1); margin-bottom: var(--s-3xs); }
.step p { color: var(--text-muted); font-size: var(--step--1); margin: 0; }

/* --- Timeline ---------------------------------------------------------- */
.timeline { position: relative; padding-left: var(--s-lg); }
.timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--border);
}
.milestone { position: relative; padding-bottom: var(--s-xl); }
.milestone:last-child { padding-bottom: 0; }
.milestone::before {
  content: "";
  position: absolute;
  left: calc(var(--s-lg) * -1);
  top: 8px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--gold-500);
}
.milestone__year {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--forest-700);
  letter-spacing: -0.02em;
}
.milestone__title {
  font-size: var(--step-0);
  font-weight: 700;
  margin: var(--s-3xs) 0;
  font-family: var(--font-sans);
}
.milestone p { color: var(--text-muted); font-size: var(--step--1); margin: 0; }

/* --- Testimonials ------------------------------------------------------ */
.quote-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  padding: var(--s-lg);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  position: relative;
}
.quote-card::before {
  content: "\201C";
  position: absolute;
  top: -0.12em;
  left: var(--s-md);
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  color: var(--gold-300);
  opacity: 0.6;
}
.quote-card__text {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-800);
  margin: var(--s-sm) 0 0;
}
.quote-card__who {
  display: flex;
  align-items: center;
  gap: var(--s-2xs);
  margin-top: auto;
  padding-top: var(--s-sm);
  border-top: 1px solid var(--line-soft);
}
.quote-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: var(--sand);
}
.quote-card__name { font-weight: 700; font-size: var(--step--1); }
.quote-card__role { font-size: var(--step--2); color: var(--text-muted); }

/* --- Image + quote feature (the picture that speaks) ------------------- */
.voice {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--sand);
}
.voice img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.voice:hover img { transform: scale(1.03); }

/* Fills the height of its grid row rather than keeping a fixed ratio */
.voice--fill { height: 100%; display: flex; }
.voice--fill img {
  aspect-ratio: auto;
  height: 100%;
  min-height: 30rem;
}
.voice__caption {
  position: absolute;
  inset: auto var(--s-sm) var(--s-sm);
  padding: var(--s-sm) var(--s-md);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(14px);
  border-radius: var(--r-lg);
  box-shadow: var(--e-2);
}
.voice__title {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-style: italic;
  line-height: 1.4;
  color: var(--ink-900);
  margin: 0;
}
.voice__where {
  display: block;
  margin-top: var(--s-3xs);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--forest-600);
}

/* --- Partner strip ----------------------------------------------------- */
.partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-xl);
}
.partners img {
  height: 42px;
  width: auto;
  opacity: 0.55;
  filter: grayscale(1);
  transition: opacity var(--t-fast), filter var(--t-fast);
}
.partners a:hover img { opacity: 1; filter: none; }

/* --- CTA band ---------------------------------------------------------- */
.cta-band {
  position: relative;
  padding-block: var(--s-3xl);
  background: linear-gradient(135deg, var(--forest-900), var(--forest-700));
  color: #fff;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -8%;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 162, 39, 0.28), transparent 68%);
  pointer-events: none;
}
.cta-band__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-xl);
  flex-wrap: wrap;
}
.cta-band h2 { color: #fff; margin-bottom: var(--s-2xs); max-width: 20ch; }
.cta-band p { color: rgba(255, 255, 255, 0.78); max-width: 44ch; margin: 0; }
.cta-band__actions { display: flex; gap: var(--s-xs); flex-wrap: wrap; }

/* ==========================================================================
   12  GALLERY & LIGHTBOX
   ========================================================================== */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3xs);
  margin-bottom: var(--s-xl);
}
.filter {
  padding: 0.5em 1.1em;
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  transition: all var(--t-fast);
}
.filter:hover { border-color: var(--forest-600); color: var(--forest-700); }
.filter.is-active {
  background: var(--forest-700);
  border-color: var(--forest-700);
  color: #fff;
}

/* A uniform grid rather than a masonry. Every card is the same size, so
   the photographs line up on both axes no matter how many there are or
   what shape the originals were. */
.mosaic {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--s-sm);
  align-items: start;
}
.tile {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--sand);
  cursor: zoom-in;
  isolation: isolate;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.tile:hover {
  border-color: var(--gold-500);
  box-shadow: var(--e-2);
  transform: translateY(-2px);
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow), filter var(--t);
}
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(23, 19, 13, 0.90) 0%, rgba(23, 19, 13, 0.20) 48%, transparent 72%);
  opacity: 0;
  transition: opacity var(--t);
}
.tile:hover img { transform: scale(1.05); }
.tile:hover::after { opacity: 1; }

.tile__caption {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  padding: var(--s-xs);
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t), transform var(--t);
}
.tile:hover .tile__caption { opacity: 1; transform: none; }
.tile__title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-style: italic;
  line-height: 1.3;
  /* Cards are small, so a long sentence is trimmed rather than
     allowed to cover the whole photograph. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tile__where {
  display: block;
  margin-top: 3px;
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-300);
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: none;
  place-items: center;
  padding: var(--s-md);
  background: rgba(7, 15, 13, 0.96);
  backdrop-filter: blur(6px);
}
.lightbox.is-open { display: grid; animation: fadeIn 260ms var(--ease); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.lightbox__figure {
  display: grid;
  justify-items: center;
  gap: var(--s-sm);
  max-width: min(100%, 78rem);
}
.lightbox__img {
  max-width: 100%;
  max-height: 74vh;
  border-radius: var(--r-md);
  box-shadow: var(--e-4);
}
.lightbox__cap {
  text-align: center;
  max-width: 56ch;
  color: rgba(255, 255, 255, 0.9);
}
.lightbox__cap strong {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  font-weight: 400;
}
.lightbox__cap span {
  display: block;
  margin-top: var(--s-3xs);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-300);
}
.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  transition: background var(--t-fast), color var(--t-fast);
}
.lightbox__btn:hover { background: var(--gold-500); color: var(--ink-900); border-color: var(--gold-500); }
.lightbox__btn svg { width: 20px; height: 20px; }
.lightbox__close { top: var(--s-md); right: var(--s-md); }
.lightbox__prev { left: var(--s-md); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: var(--s-md); top: 50%; transform: translateY(-50%); }
.lightbox__count {
  position: absolute;
  bottom: var(--s-md);
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   13  GIVING
   ========================================================================== */
.give-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(var(--s-lg), 4vw, var(--s-2xl));
  align-items: start;
}

.give-form {
  padding: clamp(var(--s-md), 3vw, var(--s-xl));
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--e-2);
}

.freq {
  display: grid;
  grid-auto-flow: column;
  gap: 2px;
  padding: 3px;
  margin-bottom: var(--s-md);
  background: var(--sand);
  border-radius: var(--r-pill);
}
.freq label { cursor: pointer; }
.freq input { position: absolute; opacity: 0; pointer-events: none; }
.freq span {
  display: block;
  padding: 0.62em 1em;
  text-align: center;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--text-muted);
  border-radius: var(--r-pill);
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.freq input:checked + span {
  background: var(--paper);
  color: var(--forest-700);
  box-shadow: var(--e-1);
}
.freq input:focus-visible + span { outline: 2px solid var(--forest-600); outline-offset: 2px; }

.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--s-2xs);
  margin-bottom: var(--s-md);
}
.tier {
  padding: var(--s-sm);
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: all var(--t-fast);
}
.tier:hover { border-color: var(--forest-500); }
.tier.is-active {
  border-color: var(--forest-700);
  background: var(--forest-50);
  box-shadow: inset 0 0 0 1px var(--forest-700);
}
.tier__amount {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--forest-700);
  letter-spacing: -0.02em;
}
.tier__label {
  display: block;
  margin-top: 2px;
  font-size: var(--step--2);
  color: var(--text-muted);
  line-height: 1.35;
}

.impact-list { display: grid; gap: 0; }
.impact-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-sm);
  padding: var(--s-sm) 0;
  border-bottom: 1px solid var(--line-soft);
  align-items: baseline;
}
.impact-list li:last-child { border-bottom: 0; }
.impact-list b {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--gold-600);
  white-space: nowrap;
  letter-spacing: -0.02em;
}
.impact-list span { font-size: var(--step--1); color: var(--text-muted); line-height: 1.55; }

.give-aside {
  padding: clamp(var(--s-md), 3vw, var(--s-xl));
  background: var(--forest-50);
  border: 1px solid var(--forest-100);
  border-radius: var(--r-xl);
}

/* Way-to-give tile */
.way {
  display: flex;
  flex-direction: column;
  gap: var(--s-2xs);
  padding: var(--s-lg);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: transform var(--t), box-shadow var(--t);
}
.way:hover { transform: translateY(-3px); box-shadow: var(--e-2); }
.way__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-md);
  background: var(--gold-100);
  color: var(--gold-700);
  margin-bottom: var(--s-2xs);
}
.way__icon svg { width: 22px; height: 22px; }
.way h3 { font-size: var(--step-1); margin: 0; }
.way p { font-size: var(--step--1); color: var(--text-muted); margin: 0; }
.way .link-arrow { margin-top: auto; padding-top: var(--s-xs); }

/* Accordion (FAQs) */
.accordion { border-top: 1px solid var(--border); }
.acc-item { border-bottom: 1px solid var(--border); }
.acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-sm);
  width: 100%;
  padding: var(--s-md) 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.015em;
  transition: color var(--t-fast);
}
.acc-head:hover { color: var(--forest-700); }
.acc-head svg { width: 18px; height: 18px; flex: none; color: var(--gold-600); transition: transform var(--t); }
.acc-item.is-open .acc-head svg { transform: rotate(45deg); }
.acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t);
}
.acc-item.is-open .acc-body { grid-template-rows: 1fr; }
.acc-body > div { overflow: hidden; }
.acc-body p {
  padding-bottom: var(--s-md);
  color: var(--text-muted);
  max-width: 68ch;
}

/* ==========================================================================
   14  FOOTER
   ========================================================================== */
.footer {
  background: var(--forest-900);
  color: rgba(255, 255, 255, 0.7);
  padding-top: var(--s-3xl);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--s-xl);
  padding-bottom: var(--s-2xl);
}
.footer__about {
  margin: var(--s-sm) 0 var(--s-md);
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--step--1);
  max-width: 34ch;
  line-height: 1.65;
}
.footer h4 {
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: var(--s-sm);
}
.footer__links { display: grid; gap: 0.6rem; }
.footer__links a {
  font-size: var(--step--1);
  color: rgba(255, 255, 255, 0.72);
  transition: color var(--t-fast), padding-left var(--t-fast);
}
.footer__links a:hover { color: var(--gold-300); padding-left: 4px; }
.footer__contact { display: grid; gap: 0.6rem; font-size: var(--step--1); }
.footer__contact li { color: rgba(255, 255, 255, 0.72); }
.footer__contact a:hover { color: var(--gold-300); }

.newsletter { display: flex; gap: var(--s-3xs); max-width: 24rem; }
.newsletter input {
  flex: 1;
  padding: 0.7em 1em;
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
  border-radius: var(--r-pill);
}
.newsletter input::placeholder { color: rgba(255, 255, 255, 0.42); }
.newsletter input:focus {
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.16);
}
.newsletter__note {
  margin-top: var(--s-2xs);
  font-size: var(--step--2);
  color: var(--gold-300);
  min-height: 1.2em;
}

.socials { display: flex; gap: var(--s-2xs); }
.socials a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.75);
  transition: all var(--t-fast);
}
.socials a:hover {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--ink-900);
  transform: translateY(-2px);
}
.socials svg { width: 16px; height: 16px; }

.footer__base {
  padding-block: var(--s-md);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.footer__base-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-sm);
  flex-wrap: wrap;
  font-size: var(--step--2);
  color: rgba(255, 255, 255, 0.5);
}
.footer__motto {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold-300);
}

/* ==========================================================================
   15  FLOATING ACTIONS & CHAT
   ========================================================================== */
.fab {
  position: fixed;
  z-index: var(--z-fab);
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: var(--r-pill);
  color: #fff;
  box-shadow: var(--e-3);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.fab:hover { transform: translateY(-3px) scale(1.04); box-shadow: var(--e-4); }
.fab svg { width: 25px; height: 25px; }

.fab__halo {
  position: absolute;
  inset: -6px;
  border-radius: var(--r-pill);
  z-index: -1;
  animation: halo 2.6s var(--ease-in-out) infinite;
  pointer-events: none;
}
@keyframes halo {
  0%   { transform: scale(0.92); opacity: 0.55; }
  100% { transform: scale(1.45); opacity: 0; }
}

.fab__tip {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translate(-6px, -50%);
  padding: 0.42em 0.85em;
  white-space: nowrap;
  font-size: var(--step--2);
  font-weight: 700;
  color: #fff;
  background: var(--ink-900);
  border-radius: var(--r-pill);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.fab:hover .fab__tip { opacity: 1; transform: translate(0, -50%); }

.fab--whatsapp {
  left: var(--s-md);
  bottom: var(--s-md);
  background: linear-gradient(140deg, #25D366, #10896A);
}
.fab--whatsapp .fab__halo { background: rgba(37, 211, 102, 0.4); }

.fab--chat {
  right: var(--s-md);
  bottom: var(--s-md);
  background: linear-gradient(140deg, var(--forest-600), var(--forest-800));
}
.fab--chat .fab__halo { background: rgba(20, 112, 92, 0.35); }
.fab--chat .i-close { display: none; }
.fab--chat.is-open .i-chat { display: none; }
.fab--chat.is-open .i-close { display: block; }
.fab--chat.is-open .fab__halo,
.fab--chat.is-open .fab__badge { display: none; }

.fab__badge {
  position: absolute;
  top: -3px;
  right: -3px;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--ink-900);
  background: var(--gold-500);
  border: 2px solid var(--bg);
  border-radius: var(--r-pill);
}

.to-top {
  position: fixed;
  right: var(--s-md);
  bottom: calc(var(--s-md) + 66px);
  z-index: calc(var(--z-fab) - 1);
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--forest-700);
  border: 1px solid var(--border);
  box-shadow: var(--e-2);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity var(--t), transform var(--t), background var(--t-fast), color var(--t-fast);
}
.to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.to-top:hover { background: var(--forest-700); color: #fff; border-color: var(--forest-700); }
.to-top svg { width: 18px; height: 18px; }
.to-top.is-hidden { opacity: 0 !important; pointer-events: none !important; }

/* --- Chat panel -------------------------------------------------------- */
.chat {
  position: fixed;
  right: var(--s-md);
  bottom: calc(var(--s-md) + 66px);
  z-index: calc(var(--z-fab) + 1);
  width: min(360px, calc(100vw - 2 * var(--s-md)));
  max-height: min(560px, calc(100vh - 8rem));
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--e-4);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px) scale(0.97);
  transform-origin: bottom right;
  transition: opacity var(--t), transform var(--t);
}
.chat.is-open { opacity: 1; pointer-events: auto; transform: none; }

.chat__head {
  display: flex;
  align-items: center;
  gap: var(--s-2xs);
  padding: var(--s-sm) var(--s-md);
  background: linear-gradient(135deg, var(--forest-800), var(--forest-600));
  color: #fff;
}
.chat__avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.18);
  color: var(--gold-300);
}
.chat__avatar svg { width: 21px; height: 21px; }
.chat__who strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
  color: #fff;
}
.chat__who span {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--step--2);
  color: rgba(255, 255, 255, 0.78);
}
.dot-live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #56E39F;
  box-shadow: 0 0 0 3px rgba(86, 227, 159, 0.24);
  animation: pulse 2s infinite;
}
@keyframes pulse { 50% { opacity: 0.45; } }

.chat__body {
  flex: 1;
  padding: var(--s-md);
  background: var(--bg-alt);
  overflow-y: auto;
}
.chat__bubble {
  max-width: 88%;
  padding: var(--s-2xs) var(--s-sm);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  border-bottom-left-radius: var(--r-xs);
  font-size: var(--step--1);
  line-height: 1.55;
  box-shadow: var(--e-1);
}
.chat__time {
  display: block;
  margin-top: 4px;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--ink-300);
}
.chat__quick { display: grid; gap: var(--s-3xs); margin-top: var(--s-md); }
.chat__quick a {
  display: flex;
  align-items: center;
  gap: var(--s-2xs);
  padding: 0.6rem 0.8rem;
  font-size: var(--step--1);
  font-weight: 400;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: all var(--t-fast);
}
.chat__quick a:hover {
  border-color: var(--forest-500);
  color: var(--forest-700);
  transform: translateX(3px);
}
.chat__quick i {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--forest-100);
  font-style: normal;
  font-size: 0.9rem;
}
.chat__foot {
  padding: var(--s-2xs) var(--s-sm);
  text-align: center;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background: var(--paper);
  border-top: 1px solid var(--border);
}

/* ==========================================================================
   16  MOTION
   ========================================================================== */
/* Every rule that hides content is scoped to .js, which is set by an inline
   script in the head. Without JavaScript nothing is ever hidden, so a failed
   or blocked script can never leave the page blank. */
.js [data-animate] {
  opacity: 0;
  transform: translateY(1.6rem);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}
.js [data-animate].is-in { opacity: 1; transform: none; }

.js [data-animate="fade"] { transform: none; }
.js [data-animate="left"] { transform: translateX(-2rem); }
.js [data-animate="right"] { transform: translateX(2rem); }
.js [data-animate="scale"] { transform: scale(0.96); }
.js [data-animate="reveal"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1100ms var(--ease-in-out);
}
.js [data-animate="reveal"].is-in { clip-path: inset(0 0 0 0); }

/* Stagger children */
.js [data-stagger] > * {
  opacity: 0;
  transform: translateY(1.4rem);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.js [data-stagger].is-in > * { opacity: 1; transform: none; }
.js [data-stagger].is-in > *:nth-child(1) { transition-delay: 0ms; }
.js [data-stagger].is-in > *:nth-child(2) { transition-delay: 90ms; }
.js [data-stagger].is-in > *:nth-child(3) { transition-delay: 180ms; }
.js [data-stagger].is-in > *:nth-child(4) { transition-delay: 270ms; }
.js [data-stagger].is-in > *:nth-child(5) { transition-delay: 360ms; }
.js [data-stagger].is-in > *:nth-child(6) { transition-delay: 450ms; }

/* ==========================================================================
   17  UTILITIES
   ========================================================================== */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.muted { color: var(--text-muted); }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-sm { margin-top: var(--s-sm); }
.mt-md { margin-top: var(--s-md); }
.mt-lg { margin-top: var(--s-lg); }
.mt-xl { margin-top: var(--s-xl); }
.mb-0 { margin-bottom: 0; }
.mb-md { margin-bottom: var(--s-md); }
.mb-lg { margin-bottom: var(--s-lg); }
.flow > * + * { margin-top: var(--s-sm); }
.stack-sm { display: grid; gap: var(--s-2xs); }
.stack { display: grid; gap: var(--s-sm); }
.stack-lg { display: grid; gap: var(--s-lg); }
.row { display: flex; gap: var(--s-xs); flex-wrap: wrap; align-items: center; }
.empty-note {
  padding: var(--s-xl);
  text-align: center;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: var(--r-lg);
}

.rounded-media {
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--sand);
}
.rounded-media img { width: 100%; height: 100%; object-fit: cover; }

/* Figure with a caption printed underneath — editorial style */
.figure figcaption {
  margin-top: var(--s-2xs);
  font-size: var(--step--2);
  color: var(--text-muted);
  letter-spacing: 0.02em;
  padding-left: var(--s-2xs);
  border-left: 2px solid var(--gold-500);
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2xs);
  margin-top: var(--s-2xl);
}
.pagination a, .pagination span {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--s-2xs);
  font-size: var(--step--1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: all var(--t-fast);
}
.pagination a:hover { border-color: var(--forest-600); color: var(--forest-700); }
.pagination .is-current {
  background: var(--forest-700);
  border-color: var(--forest-700);
  color: #fff;
}

/* ==========================================================================
   18  RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .story-feature { grid-template-columns: 1fr; }
  .story-feature__media { min-height: 16rem; }
}

@media (max-width: 900px) {
  .split, .split--wide-text, .split--wide-media { grid-template-columns: 1fr; }
  .give-grid { grid-template-columns: 1fr; }
  .cta-band__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 768px) {
  :root { --header-h: 64px; }

  /* Give the content the screen. At 24px a side, a 375px phone lost 13% of
     its width to empty gutters before a single word appeared. */
  .wrap { padding-inline: var(--s-sm); }

  /* Anything that reads as a full-width band goes truly edge to edge,
     rather than floating in a narrow column with margins either side. */
  .stats__panel,
  .cta-band__inner { border-radius: var(--r-md); }

  /* Comfortable thumb targets. 44px is the smallest reliably tappable
     size; several controls were well under it. */
  .btn,
  .burger,
  .nav__link,
  .filter,
  .fab,
  .to-top,
  .pager__link { min-height: 44px; }
  .burger { min-width: 44px; }

  /* iOS zooms the whole page in when a focused input is under 16px. */
  input, select, textarea { font-size: 16px; }

  .topbar__list li:nth-child(n + 2) { display: none; }
  .burger { display: flex; }

  /* The drawer hangs off the bottom of the header rather than sitting at a
     fixed offset from the top of the viewport. The header is sticky, so a
     fixed offset only lines up while the page is scrolled to the very top;
     open the menu after scrolling and a strip of the page showed through
     above it. Anchoring to the header means it is correct at any scroll
     position. */
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--z-drawer);
    height: calc(100dvh - var(--header-h));
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s-sm) var(--s-md) var(--s-xl);
    background: var(--bg);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Parked off the LEFT edge, not the right. A closed drawer sitting to
       the right adds its full width to the scrollable area, and on a touch
       screen that empty strip can be dragged into view — the page appears
       to slide sideways for no reason. overflow-x: hidden on the body stops
       a programmatic scroll but does not reliably stop touch panning.
       Nothing can scroll to negative x, so parking it left removes the
       pannable area altogether rather than trying to cover it up. */
    transform: translateX(-100%);
    transition: transform var(--t);
    box-shadow: var(--e-4);
  }
  .nav.is-open { transform: translateX(0); }

  /* Hold the page still while the drawer is open, so a scroll that runs
     past the end of the menu does not start moving the content behind it. */
  .nav-open,
  .nav-open body { overflow: hidden; }

  /* While the drawer is open the header outranks the floating buttons and
     they step aside. Without this the WhatsApp and chat buttons float on
     top of the menu. */
  .nav-open .fab,
  .nav-open .to-top,
  .nav-open .chat {
    opacity: 0;
    pointer-events: none;
  }
  .nav__list { flex-direction: column; align-items: stretch; }
  .nav__item { width: 100%; }
  .nav__link {
    justify-content: space-between;
    padding: var(--s-sm) 0;
    font-size: var(--step-1);
    border-bottom: 1px solid var(--line-soft);
    border-radius: 0;
  }
  .nav__link::after { display: none; }

  .dropdown {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    display: grid;
    grid-template-rows: 0fr;
    min-width: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    transition: grid-template-rows var(--t);
  }
  .dropdown > * { overflow: hidden; }
  .nav__item.is-open > .dropdown { grid-template-rows: 1fr; }
  .dropdown__link { padding-left: var(--s-sm); }
  .nav__cta { margin: var(--s-md) 0 0; align-self: flex-start; }

  .hero { min-height: 78vh; }
  .stats { margin-top: 0; }
  .stats__panel { border-radius: var(--r-lg); }
  .stat + .stat::before { display: none; }
  .stat { border-top: 1px solid var(--border); }
  .stat:nth-child(-n + 2) { border-top: 0; }
  .stats__panel { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(odd)::after {
    content: "";
    position: absolute;
    right: 0; top: 22%; bottom: 22%;
    width: 1px;
    background: var(--border);
  }

  .footer__grid { grid-template-columns: 1fr; gap: var(--s-lg); }
  .section-head--split { align-items: flex-start; }

  .fab { width: 48px; height: 48px; }
  .fab svg { width: 22px; height: 22px; }
  .fab__tip { display: none; }
  .to-top { bottom: calc(var(--s-md) + 58px); }
  .chat { bottom: calc(var(--s-md) + 58px); }
}

@media (max-width: 480px) {
  .brand__sub { display: none; }
  .hero__actions .btn { flex: 1; }
  .mosaic { grid-template-columns: repeat(2, 1fr); gap: var(--s-2xs); }
  .prose > p:first-of-type::first-letter { font-size: 3em; }

  /* Tighter again on the smallest phones. */
  .wrap { padding-inline: var(--s-xs); }

  /* Long words and URLs must wrap rather than force the page sideways. */
  h1, h2, h3, .card__title, .prose { overflow-wrap: anywhere; }

  /* Stack anything still trying to sit side by side. */
  .give-grid,
  .contact-grid,
  .footer__grid { grid-template-columns: 1fr; }
}

/* Print — clean, readable, no chrome */
@media print {
  .topbar, .header, .footer, .fab, .to-top, .chat, .hero__controls { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1rem; }
}

/* Respect the visitor's motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-animate], [data-stagger] > * { opacity: 1 !important; transform: none !important; }
  [data-animate="reveal"] { clip-path: none !important; }
}