/* ==========================================================================
   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 ----------------------------------------------------------
     One family, as on focusuganda.org. Inter Tight is a tight-set grotesque
     that holds up at display sizes without the airiness a text face gets
     when you scale it up, so weight and tracking do the work that a second
     family used to.
     -------------------------------------------------------------------- */
  --font-display: "Inter Tight", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-sans:    "Inter Tight", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* A ~1.18 ratio. The old scale ran to 4.36rem at the top and jumped by
     nearly 1.3x a step, which is what made headings shout and sit
     unevenly against the copy beneath them. */
  --step--2: clamp(0.75rem, 0.73rem + 0.08vw, 0.80rem);
  --step--1: clamp(0.86rem, 0.84rem + 0.10vw, 0.92rem);
  --step-0:  clamp(1.00rem, 0.97rem + 0.14vw, 1.06rem);
  --step-1:  clamp(1.12rem, 1.07rem + 0.26vw, 1.28rem);
  --step-2:  clamp(1.32rem, 1.23rem + 0.44vw, 1.60rem);
  --step-3:  clamp(1.52rem, 1.39rem + 0.62vw, 1.92rem);
  --step-4:  clamp(1.76rem, 1.58rem + 0.90vw, 2.34rem);
  --step-5:  clamp(2.00rem, 1.76rem + 1.20vw, 2.76rem);
  --step-6:  clamp(2.30rem, 1.97rem + 1.64vw, 3.34rem);
  --step-7:  clamp(2.64rem, 2.20rem + 2.20vw, 4.04rem);

  /* Tracking. Inter Tight needs negative tracking as it gets larger and
     positive tracking when it is set small and uppercase. Naming the
     values stops each component inventing its own. */
  --tracking-tight:  -0.022em;   /* display sizes */
  --tracking-snug:   -0.012em;   /* headings */
  --tracking-normal: -0.005em;   /* body */
  --tracking-wide:    0.02em;
  --tracking-caps:    0.12em;    /* small uppercase labels */

  /* Leading */
  --leading-tight:   1.08;
  --leading-snug:    1.2;
  --leading-normal:  1.6;
  --leading-relaxed: 1.7;

  /* Weight */
  --weight-body:     400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-display:  800;

  /* --- 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);
  /* Coloured lifts, for the few elements that should feel lit rather than
     merely raised, the donate button, an active card. */
  --glow-gold:   0 10px 28px -10px rgba(176, 141, 62, 0.55);
  --glow-forest: 0 10px 28px -10px rgba(46, 125, 79, 0.45);

  /* --- Gradients -------------------------------------------------------
     Built only from the brand green and gold. Used sparingly: a warm wash
     behind a section, a lit edge on a dark band, a gradient on the one
     button that matters most on the page.
     --------------------------------------------------------------------- */
  --grad-gold:   linear-gradient(135deg, var(--gold-300) 0%, var(--gold-500) 52%, var(--gold-700) 100%);
  --grad-forest: linear-gradient(135deg, var(--forest-600) 0%, var(--forest-800) 55%, var(--forest-900) 100%);
  --grad-paper:  linear-gradient(180deg, var(--cream) 0%, var(--paper) 62%);
  --grad-edge:   linear-gradient(90deg, transparent, rgba(212, 175, 94, 0.55), transparent);
  /* Two soft off-centre washes. Laid over a pale ground they give a flat
     section some depth without reading as a colour block. */
  --aurora:
    radial-gradient(56% 46% at 12% 6%,  rgba(176, 141, 62, 0.16) 0%, transparent 62%),
    radial-gradient(52% 54% at 88% 20%, rgba(46, 125, 79, 0.14) 0%, transparent 66%);

  /* --- 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: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  font-weight: var(--weight-body);
  -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
   ========================================================================== */
/* Headings step down one scale step at a time and share one set of rules,
   so a h2 on the home page and a h2 in an article are the same size. The
   old scale skipped steps (h1 -6, h2 -4, h3 -2) which left a visible gulf
   between a section title and the subheadings under it. */
h1, h2, h3, h4, h5 {
  margin: 0 0 var(--s-sm);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  text-wrap: balance;
}

h1 { font-size: var(--step-6); }
h2 { font-size: var(--step-5); }
h3 { font-size: var(--step-3); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); }
h4 { font-size: var(--step-2); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); font-weight: var(--weight-bold); }
h5 { font-size: var(--step-1); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); font-weight: var(--weight-bold); }

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

strong, b { font-weight: var(--weight-bold); }

/* The small uppercase label that opens most sections */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--forest-600);
  margin-bottom: var(--s-sm);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-gold);
  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: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
  color: var(--text-muted);
  max-width: 62ch;
}
.lead--center { margin-inline: auto; }

/* A pulled-out line of speech. Inter Tight carries this at weight rather
   than in italic, a long italic passage in a grotesque reads as a slant,
   not as a voice. */
.display-quote {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  letter-spacing: var(--tracking-snug);
  text-wrap: balance;
}

.gold { color: var(--gold-600); }
.gold-em { color: var(--gold-300); font-weight: var(--weight-semibold); }

/* A headline word lit with the gold gradient. Falls back to a solid gold
   anywhere background-clip: text is unsupported. */
.grad-text {
  color: var(--gold-500);
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Long-form body copy (stories, programme detail) */
.prose { max-width: 68ch; }
.prose > p {
  font-size: var(--step-0);
  line-height: var(--leading-relaxed);
  color: var(--ink-700);
  margin-bottom: var(--s-md);
}
/* The opening paragraph carries the weight instead of a drop cap, which
   needs a face with real contrast to look deliberate rather than
   accidental. Inter Tight has none, so the emphasis is size and colour. */
.prose > p:first-of-type {
  font-size: var(--step-1);
  line-height: var(--leading-relaxed);
  color: var(--text);
}
.prose h2, .prose h3 { margin-top: var(--s-xl); }
.prose blockquote {
  position: relative;
  margin: var(--s-xl) 0;
  padding: var(--s-xs) 0 var(--s-xs) var(--s-md);
  border-left: 3px solid var(--gold-500);
  font-size: var(--step-2);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  letter-spacing: var(--tracking-snug);
  color: var(--forest-800);
}

/* ==========================================================================
   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 { position: relative; padding-block: var(--s-3xl); }
.section--tight { padding-block: var(--s-2xl); }

/* The alternate ground carries two soft off-centre washes on top of the
   flat colour. They are barely perceptible on their own, but they stop a
   long page reading as a stack of identical rectangles. */
.section--alt {
  background-color: var(--bg-alt);
  background-image: var(--aurora);
}
.section--sand { background: var(--sand); }
.section--deep {
  background-color: var(--bg-deep);
  background-image:
    radial-gradient(46% 62% at 84% 6%, rgba(176, 141, 62, 0.18) 0%, transparent 68%),
    radial-gradient(40% 58% at 6% 96%, rgba(67, 176, 115, 0.14) 0%, transparent 70%);
  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(320px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(212px, 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(15rem, 26%, 19rem);
  min-width: 0;
  max-width: 22rem;
}
/* Four-up variant for smaller tiles such as people */
.grid--balanced-sm > * { flex: 1 1 clamp(11rem, 20%, 14rem); max-width: 16rem; }

/* 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: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  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; }

/* The one button on any page that should feel lit rather than filled.
   The gradient sits above --btn-bg, which stays as the fallback colour. */
.btn--gold {
  --btn-bg: var(--gold-500);
  --btn-fg: var(--ink-900);
  --btn-bd: transparent;
  background-image: var(--grad-gold);
}
.btn--gold:hover {
  box-shadow: var(--glow-gold);
  filter: saturate(1.08) brightness(1.03);
}

.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: var(--tracking-caps);
  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: var(--tracking-caps);
  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; }

/* The one place on the site that goes a step past h1. The tracking was
   hand-set at -0.035em, which is too tight for Inter Tight, the letters
   began to touch at the largest size. */
.hero__title {
  font-size: var(--step-7);
  line-height: 1.04;
  letter-spacing: var(--tracking-tight);
  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: var(--leading-normal);
  color: rgba(255, 255, 255, 0.9);
  max-width: 48ch;
  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: var(--tracking-wide);
  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%;
}
/* Two scrims, not one. The single left-to-right wash faded to 0.34 by the
   right-hand edge, which is exactly where the longest line of the intro
   ends, so the copy finished on top of a bright, busy photograph. The
   second, vertical wash darkens the band the text actually occupies. */
.banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right, rgba(7, 43, 36, 0.92) 0%, rgba(7, 43, 36, 0.74) 52%, rgba(7, 43, 36, 0.52) 100%),
    linear-gradient(to top, rgba(7, 32, 27, 0.55) 0%, transparent 62%);
}
.banner__title {
  color: #fff;
  margin-bottom: var(--s-xs);
  font-size: var(--step-6);
  max-width: 18ch;
}
.banner__intro {
  font-size: var(--step-1);
  line-height: var(--leading-normal);
  color: rgba(255, 255, 255, 0.86);
  /* Measured in characters rather than rem, so the line breaks in the same
     place whatever the heading above it happens to be. */
  max-width: 46ch;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  margin-bottom: var(--s-sm);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-caps);
  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: var(--tracking-caps);
  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);
}
/* A gold hairline that wipes across the top edge on hover. One small
   flourish per card is enough to make a grid feel alive. */
.card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--grad-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t);
  z-index: 1;
}
.card:hover::after { transform: scaleX(1); }
/* 16:10 rather than 4:3. Three across, the taller crop made each card
   about 90px longer, which is what turned a row of cards into a wall. */
.card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  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-weight: var(--weight-medium);
  letter-spacing: var(--tracking-normal);
  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-sm) var(--s-sm) var(--s-md);
  gap: var(--s-3xs);
}
.card__kicker {
  font-size: var(--step--2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--forest-600);
}
.card__title {
  font-size: var(--step-1);
  margin: 0;
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}
.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: var(--tracking-wide);
}

/* --- 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: 16 / 10; }

/* 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: var(--tracking-caps);
  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: var(--tracking-caps);
  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 stay circular, so a row of people reads as a row of faces
   rather than a wall of images. What changed is everything around them:
   the bare centred circle on a white page looked like a placeholder, so
   each person now sits in a card with a tinted crown behind the portrait,
   a gold ring, and a rule separating the name from the biography.
   --------------------------------------------------------------------- */
.person {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 var(--s-sm) var(--s-md);
  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);
}
/* The tinted crown the portrait sits against */
.person::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4.75rem;
  background: linear-gradient(180deg, var(--forest-50) 0%, transparent 100%);
  border-bottom: 1px solid var(--line-soft);
}
.person:hover {
  transform: translateY(-4px);
  box-shadow: var(--e-3);
  border-color: var(--forest-200);
}

.person__media {
  position: relative;
  z-index: 1;
  margin-top: var(--s-md);
  width: clamp(92px, 11vw, 116px);
  aspect-ratio: 1;
  flex: none;
  overflow: hidden;
  border-radius: 50%;
  background: var(--sand);
  box-shadow: var(--e-2);
  /* A hairline ring, drawn outside the image, that warms to gold on hover */
  outline: 2px solid var(--paper);
  outline-offset: 3px;
  transition: outline-color var(--t), box-shadow var(--t);
}
.person:hover .person__media {
  outline-color: var(--gold-300);
  box-shadow: var(--glow-gold);
}
.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-sm) 0 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}
.person__role {
  display: block;
  margin-top: 0.35em;
  font-size: var(--step--2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--gold-600);
}
.person__bio {
  position: relative;
  margin-top: var(--s-sm);
  padding-top: var(--s-sm);
  font-size: var(--step--1);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}
/* A short centred rule instead of a full-width border */
.person__bio::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-gold);
}
.person__quote {
  margin-top: var(--s-xs);
  font-style: italic;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--ink-700);
}
.person__quote::before { content: "\201C"; }
.person__quote::after  { content: "\201D"; }

/* --- Fact strip ------------------------------------------------------
   Short, checkable facts set as a definition list. Two columns so the
   pairs stay next to each other, and a gold rule on the left so the strip
   reads as a panel rather than as more paragraphs.
   --------------------------------------------------------------------- */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: var(--s-sm) var(--s-md);
  margin: var(--s-lg) 0 0;
  padding: var(--s-md) 0 var(--s-md) var(--s-md);
  border-left: 3px solid var(--gold-500);
  background: linear-gradient(90deg, var(--gold-soft), transparent 70%);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.facts__item { min-width: 0; }
.facts dt {
  font-size: var(--step--2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.facts dd {
  margin: 0.3em 0 0;
  font-size: var(--step-0);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
  color: var(--text);
}

/* A centred divider that names each group of people, so leadership and
   staff read as two deliberate rows rather than one long list that happens
   to change size halfway down. */
.team-group {
  display: flex;
  align-items: center;
  gap: var(--s-md);
  margin-bottom: var(--s-lg);
}
.team-group::before,
.team-group::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.team-group__label {
  margin: 0;
  font-size: var(--step--2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Leadership read as the senior row: a larger portrait and a warmer crown,
   but the same card, so the page keeps one rhythm. */
.person--lead::before {
  height: 5.75rem;
  background: linear-gradient(180deg, var(--gold-100) 0%, transparent 100%);
}
.person--lead .person__media { width: clamp(116px, 13vw, 140px); }
.person--lead .person__name { font-size: var(--step-2); }

/* ==========================================================================
   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; }

/* --- 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: var(--tracking-caps);
  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(11.5rem, 1fr));
  gap: var(--s-sm);
  align-items: start;
}
.tile {
  position: relative;
  aspect-ratio: 16 / 11;
  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-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
  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: var(--tracking-caps);
  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-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
  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: var(--tracking-caps);
  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: var(--tracking-caps);
  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 {
  position: relative;
  background: var(--forest-900);
  color: rgba(255, 255, 255, 0.7);
}
/* A lit hairline along the very top edge, so the footer arrives as a
   deliberate band rather than the page simply going dark. */
.footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--grad-edge);
}

/* --- Newsletter band --------------------------------------------------- */
.footer__signup {
  position: relative;
  padding-block: var(--s-2xl);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  background:
    radial-gradient(52% 120% at 78% 0%, rgba(176, 141, 62, 0.20) 0%, transparent 70%),
    radial-gradient(46% 110% at 8% 100%, rgba(67, 176, 115, 0.14) 0%, transparent 72%);
}
.footer__signup-inner {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: var(--s-xl);
  align-items: center;
}
.footer__signup h3 {
  color: #fff;
  font-size: var(--step-3);
  margin-bottom: var(--s-2xs);
}
.footer__signup p {
  color: rgba(255, 255, 255, 0.66);
  font-size: var(--step--1);
  line-height: var(--leading-normal);
  max-width: 46ch;
}

/* --- Columns ----------------------------------------------------------- */
.footer__grid {
  display: grid;
  grid-template-columns: 1.7fr repeat(3, 1fr);
  gap: var(--s-xl);
  padding-block: var(--s-3xl) var(--s-2xl);
}
.footer__col--brand { max-width: 34ch; }
.footer__about {
  margin: var(--s-sm) 0 var(--s-sm);
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--step--1);
  line-height: var(--leading-normal);
}
.footer__reg {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: var(--s-md);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  color: rgba(255, 255, 255, 0.5);
}
.footer__reg-icon { width: 16px; height: 16px; flex: none; color: var(--gold-300); }

.footer h4 {
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: var(--s-sm);
}
.footer__links { display: grid; gap: 0.65rem; }
.footer__links a {
  display: inline-block;
  font-size: var(--step--1);
  color: rgba(255, 255, 255, 0.72);
  transition: color var(--t-fast), transform var(--t-fast);
}
.footer__links a:hover { color: var(--gold-300); transform: translateX(4px); }

.footer__contact { display: grid; gap: var(--s-xs); font-size: var(--step--1); }
.footer__contact li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 0.7em;
  align-items: start;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.5;
}
.footer__contact svg { width: 18px; height: 18px; margin-top: 2px; color: var(--gold-300); }
.footer__contact a { display: block; transition: color var(--t-fast); }
.footer__contact a:hover { color: var(--gold-300); }
.footer__give { margin-top: var(--s-md); }

.newsletter { display: flex; gap: var(--s-3xs); }
.newsletter input {
  flex: 1;
  min-width: 0;
  padding: 0.8em 1.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); flex-wrap: wrap; }
.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);
  background: rgba(0, 0, 0, 0.16);
}
.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);
}
.footer__totop {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.45em 0.95em;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-pill);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: rgba(255, 255, 255, 0.72);
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.footer__totop svg { width: 14px; height: 14px; }
.footer__totop:hover {
  color: var(--ink-900);
  background: var(--gold-300);
  border-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); }
.mb-xl { margin-bottom: var(--s-xl); }
.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; }
  .footer__signup-inner { grid-template-columns: 1fr; gap: var(--s-md); }
}

/* --------------------------------------------------------------------------
   The drawer breakpoint.

   This was 768px, which put every tablet on the desktop navigation: an iPad
   in portrait is 820 CSS pixels wide, so it got the full horizontal menu
   with hover-triggered dropdown panels. There is no hover on a tablet, and
   the seven items plus a donate button had nowhere near the room they need,
   so the menu was both cramped and half-unusable. 1024px hands every tablet
   the drawer instead, which is built for touch.

   Everything to do with the navigation lives in this block, and the block
   below it holds what is genuinely phone-only.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* Comfortable thumb targets. 44px is the smallest reliably tappable
     size; several controls were well under it. Tablets are touch devices
     too, so this is not phone-only. */
  .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,      on the iPad exactly as on the iPhone. */
  input, select, textarea { font-size: 16px; }

  .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;
    min-width: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    /* Collapsed by height rather than by a grid track.
       The grid 0fr -> 1fr trick was used here, but it only ever collapses
       ONE row. This panel holds four links as direct children, so the first
       took the explicit 0fr track and the other three fell into implicit
       'auto' rows, permanently expanded, whatever the toggle said. Opening
       then squeezed the first link to a fraction of its height while its
       icon and description stayed put, which is why it appeared to sit
       underneath the link below it.
       The cap only has to exceed the tallest menu (four links, ~245px); it
       is deliberately loose so that adding items later cannot clip them. */
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--t);
  }
  /* The desktop panel is centred under its link with translate(-50%, 0), set
     by a rule outside this media query at a higher specificity than the
     .dropdown reset above. Left alone it survives into the drawer and drags
     the opened panel half its own width off the left edge, so the open and
     hover states have to be neutralised here by name. */
  .nav__item:hover > .dropdown,
  .nav__item.is-open > .dropdown { transform: none; }
  .nav__item.is-open > .dropdown { max-height: 40rem; }
  .dropdown__link { padding-left: var(--s-sm); }
  .nav__cta { margin: var(--s-md) 0 0; align-self: flex-start; }

  /* A tablet has room to spare, so the drawer stops short of full width
     and the page stays visible beside it. On a phone the 100% floor takes
     over and it covers the screen as before. */
  .nav { width: min(26rem, 100%); right: auto; }

  /* A scrim over the page while the drawer is open. On a phone the drawer
     covers the screen and this is never seen; on a tablet it is what
     separates the menu from the page behind it, and tapping it closes the
     menu (handled in site.js).

     It sits just *below* the header rather than just below the drawer. The
     drawer is a child of the sticky header, so it paints inside the
     header's stacking context, a scrim at --z-drawer minus one would
     cover the header, the burger and the drawer along with it. */
  .nav-open body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-header) - 1);
    background: rgba(13, 11, 7, 0.45);
    backdrop-filter: blur(2px);
  }
}

@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); }

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

  .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; }
}