/* ==========================================================================
   SNSW Foundation — Design System
   --------------------------------------------------------------------------
   Brand note: the original brand green (#00bf63) scores only 2.44:1 against
   white, well under the WCAG AA 4.5:1 threshold for body text. It is kept as
   the signature surface/accent colour, while a darkened variant (--brand-700,
   5.41:1) carries all text and links. The identity is unchanged; the
   contrast is now compliant.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand — green */
  --brand-50:  #e9faf1;
  --brand-100: #c9f2dd;
  --brand-200: #93e6bd;
  --brand-300: #57d79b;
  --brand-400: #1fc978;
  --brand-500: #00bf63;  /* original brand green — surfaces & accents */
  --brand-600: #05a355;
  --brand-700: #047a45;  /* text & links — AA on white */
  --brand-800: #035c34;
  --brand-900: #023d23;

  /* Brand — gold */
  --gold-50:  #fff9e6;
  --gold-100: #fff0bf;
  --gold-300: #ffd85c;
  --gold-500: #fec000;   /* original brand gold */
  --gold-600: #e0a800;
  --gold-700: #8a6a00;   /* AA on white */

  /* Neutrals — subtly green-cast so they sit with the brand */
  --ink-900: #0d1512;
  --ink-800: #1b2621;
  --ink-700: #2f3b36;
  --ink-600: #4a5852;
  --ink-500: #6b7a73;
  --ink-400: #94a19b;
  --ink-300: #c9d2cd;
  --ink-200: #e2e8e5;
  --ink-100: #f1f5f3;
  --ink-50:  #f8faf9;
  --white:   #ffffff;

  --danger: #b42318;
  --danger-bg: #fef3f2;

  /* Semantic */
  --bg: var(--white);
  --bg-subtle: var(--ink-50);
  --bg-muted: var(--ink-100);
  --surface: var(--white);
  --text: var(--ink-800);
  --text-muted: var(--ink-600);
  --text-subtle: var(--ink-500);
  --heading: var(--ink-900);
  --border: var(--ink-200);
  --border-strong: var(--ink-300);
  --link: var(--brand-700);
  --link-hover: var(--brand-800);

  /* Type */
  --font-display: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --text-xs:   0.8125rem;
  --text-sm:   0.9375rem;
  --text-base: 1.0625rem;
  --text-lg:   clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --text-xl:   clamp(1.3rem, 1.18rem + 0.6vw, 1.6rem);
  --text-2xl:  clamp(1.6rem, 1.4rem + 1vw, 2.1rem);
  --text-3xl:  clamp(2rem, 1.65rem + 1.7vw, 2.9rem);
  --text-4xl:  clamp(2.4rem, 1.85rem + 2.7vw, 3.9rem);

  /* Space */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;   --space-6: 2rem;
  --space-7: 2.5rem;   --space-8: 3rem;     --space-9: 4rem;
  --space-10: 5rem;    --space-11: 6rem;    --space-12: 8rem;
  --section-y: clamp(3.5rem, 2rem + 6vw, 6.5rem);

  /* Shape */
  --radius-sm: 6px;  --radius: 10px;  --radius-md: 14px;
  --radius-lg: 20px; --radius-xl: 28px; --radius-full: 999px;

  --shadow-xs: 0 1px 2px rgba(13, 21, 18, 0.05);
  --shadow-sm: 0 1px 3px rgba(13, 21, 18, 0.07), 0 1px 2px rgba(13, 21, 18, 0.04);
  --shadow:    0 4px 12px rgba(13, 21, 18, 0.07), 0 2px 4px rgba(13, 21, 18, 0.04);
  --shadow-lg: 0 12px 32px rgba(13, 21, 18, 0.10), 0 4px 10px rgba(13, 21, 18, 0.05);
  --shadow-xl: 0 24px 56px rgba(13, 21, 18, 0.14);

  /* Layout */
  --container: 1280px;
  --container-narrow: 780px;
  --gutter: clamp(1.125rem, 0.7rem + 2vw, 2.5rem);
  --header-h: 76px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b100e;
    --bg-subtle: #111815;
    --bg-muted: #16201c;
    --surface: #131b18;
    --text: #dde5e1;
    --text-muted: #a8b5af;
    --text-subtle: #8b9992;
    --heading: #f2f6f4;
    --border: #253029;
    --border-strong: #33423a;
    --link: var(--brand-300);
    --link-hover: var(--brand-200);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.5);
    --shadow:    0 4px 12px rgba(0,0,0,0.5);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.55);
    --shadow-xl: 0 24px 56px rgba(0,0,0,0.6);
  }
}
:root[data-theme="dark"] {
  --bg: #0b100e;
  --bg-subtle: #111815;
  --bg-muted: #16201c;
  --surface: #131b18;
  --text: #dde5e1;
  --text-muted: #a8b5af;
  --text-subtle: #8b9992;
  --heading: #f2f6f4;
  --border: #253029;
  --border-strong: #33423a;
  --link: var(--brand-300);
  --link-hover: var(--brand-200);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.5);
  --shadow:    0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.55);
  --shadow-xl: 0 24px 56px rgba(0,0,0,0.6);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--heading);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
p  { text-wrap: pretty; }

a { color: var(--link); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }

:focus-visible {
  outline: 3px solid var(--brand-500);
  outline-offset: 3px;
  border-radius: 3px;
}
::selection { background: var(--brand-200); color: var(--ink-900); }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

/* Keeps a comfortable reading measure WITHOUT re-centring the block, so
   text-heavy sections still start on the same left edge as every other
   section. container--narrow centres itself, which left neighbouring section
   headings on two different left edges. */
.measure { max-width: 46rem; }
.measure--wide { max-width: 58rem; }

.section { padding-block: var(--section-y); }
.section--subtle { background: var(--bg-subtle); }
.section--muted  { background: var(--bg-muted); }
.section--tight  { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }

.stack > * + * { margin-top: var(--flow, 1rem); }

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 200;
  background: var(--brand-700);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: var(--space-4); color: #fff; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   4. Typographic helpers
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--brand-700);
}
.eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--gold-500);
  border-radius: 2px;
}
.eyebrow--onDark { color: var(--brand-200); }

.lede { font-size: var(--text-lg); color: var(--text-muted); line-height: 1.6; }
.muted { color: var(--text-muted); }
.small { font-size: var(--text-sm); }
.tiny  { font-size: var(--text-xs); }

.section-head { max-width: 62ch; margin-bottom: var(--space-8); }
.section-head > * + * { margin-top: var(--space-3); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

.text-brand { color: var(--brand-700); }

/* Gold underline flourish for a key phrase in a heading.
   Uses a clipped background rather than an absolutely-positioned ::after with
   white-space:nowrap — that older approach forced the phrase onto one line and
   pushed the document 24px wider than a 320px viewport, causing horizontal
   scroll on small phones. box-decoration-break makes the highlight repeat
   correctly across wrapped lines. */
.mark {
  background-image: linear-gradient(
    to top,
    color-mix(in srgb, var(--gold-500) 42%, transparent) 0.30em,
    transparent 0.30em
  );
  background-position: 0 -0.06em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  line-height: 1;
  padding: 0.95rem 1.6rem;
  min-height: 44px;          /* touch target floor — the small header button
                                otherwise rendered at ~38px */
  border: 1.5px solid transparent;
  border-radius: var(--radius-full);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease),
              border-color 0.18s var(--ease), transform 0.18s var(--ease),
              box-shadow 0.18s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.05em; height: 1.05em; flex: none; }

/* brand-700, not brand-600: white on brand-600 measures 3.29:1, which fails
   AA for button text at this size. brand-700 gives 5.42:1. */
.btn--primary {
  background: var(--brand-700);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--brand-800); color: #fff; box-shadow: var(--shadow); }

.btn--gold {
  background: var(--gold-500);
  color: var(--ink-900);
  box-shadow: var(--shadow-sm);
}
.btn--gold:hover { background: var(--gold-600); color: var(--ink-900); box-shadow: var(--shadow); }

.btn--outline {
  background: transparent;
  color: var(--link);
  border-color: var(--border-strong);
}
.btn--outline:hover {
  border-color: var(--brand-500);
  background: color-mix(in srgb, var(--brand-500) 10%, transparent);
  color: var(--link-hover);
}

.btn--ghostLight {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border-color: rgba(255,255,255,0.45);
  backdrop-filter: blur(6px);
}
.btn--ghostLight:hover { background: rgba(255,255,255,0.2); color: #fff; border-color: #fff; }

.btn--lg { padding: 1.1rem 2rem; font-size: var(--text-base); }
.btn--sm { padding: 0.7rem 1.2rem; font-size: var(--text-xs); }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.btn-row--center { justify-content: center; }

/* --------------------------------------------------------------------------
   6. Header / navigation
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.header.is-stuck { border-bottom-color: var(--border); box-shadow: var(--shadow-sm); }

.header__bar {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; flex: none; }
.brand img { height: 42px; width: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--heading);
  letter-spacing: -0.01em;
}
.brand__tag {
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--brand-700);
  font-weight: 600;
}

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 0.35rem; list-style: none; padding: 0; margin: 0; }
.nav__link {
  display: block;
  position: relative;
  padding: 0.55rem 0.85rem;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color 0.16s var(--ease), background-color 0.16s var(--ease);
}
.nav__link:hover { color: var(--brand-700); background: var(--brand-50); }
.nav__link[aria-current="page"] { color: var(--brand-700); font-weight: 600; }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0.85rem; right: 0.85rem; bottom: 0.2rem;
  height: 2px;
  background: var(--gold-500);
  border-radius: 2px;
}

.header__cta { display: flex; align-items: center; gap: var(--space-3); flex: none; }

/* Only surfaces inside the mobile drawer */
.nav__cta-mobile { display: none; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--heading);
}
.nav-toggle__bars { position: relative; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: background 0.2s var(--ease); }
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px;
  background: currentColor; border-radius: 2px; transition: transform 0.25s var(--ease);
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav-toggle { display: inline-flex; order: 3; }
  .header__cta { order: 2; margin-left: auto; }
  .header__cta .btn--donate-header { display: none; }
  .nav {
    order: 4;
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    margin: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    padding: var(--space-4) var(--gutter) var(--space-6);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    display: none;
  }
  .nav.is-open { display: block; animation: slideDown 0.25s var(--ease-out); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0.15rem; }
  .nav__link { padding: 0.9rem 0.75rem; font-size: var(--text-base); border-radius: var(--radius); }
  .nav__link[aria-current="page"]::after { display: none; }
  .nav__link[aria-current="page"] { background: var(--brand-50); }
  .nav__cta-mobile { display: block; margin-top: var(--space-4); }
}
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

body.nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; color: #fff; }
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(2,25,15,0.72) 0%, rgba(2,25,15,0.60) 45%, rgba(2,25,15,0.85) 100%),
    linear-gradient(90deg, rgba(2,25,15,0.55) 0%, rgba(2,25,15,0.12) 70%);
}
.hero__inner {
  padding-top: clamp(3.5rem, 2rem + 7vw, 6.5rem);
  max-width: 54rem;
}
/* Vertically centre the copy on tall desktop viewports so the hero reads as a
   composed panel rather than content pinned to the top. */
@media (min-width: 1024px) {
  .hero__inner {
    min-height: min(64svh, 620px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
.hero h1 { color: #fff; margin-bottom: var(--space-5); line-height: 1.08; }
.hero__lede {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.92);
  max-width: 46ch;
  margin-bottom: var(--space-7);
}
.hero .eyebrow { color: var(--gold-300); margin-bottom: var(--space-5); }
.hero .eyebrow::before { background: var(--gold-500); }

/* Spans the full container rather than the narrower copy column, so the hero
   uses the width available on large screens instead of reading as one narrow
   column stranded in the middle of the viewport.
   Explicit column counts rather than auto-fit: these four must share one row at
   desktop, and auto-fit kept dropping the fourth onto its own line. */
.hero__stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(1.75rem, 0.5rem + 2.5vw, 3rem);
  row-gap: clamp(1.75rem, 1rem + 2vw, 2.5rem);
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  /* Generous top padding: the numbers use a tight line-height, so a smaller
     value reads as the text touching the rule above it. */
  padding: clamp(2.5rem, 1.75rem + 2vw, 3.5rem) 0 clamp(3rem, 2rem + 4vw, 5rem);
  border-top: 1px solid rgba(255,255,255,0.22);
}
@media (min-width: 700px) {
  .hero__stats { grid-template-columns: repeat(4, 1fr); }
  /* Column gap alone left these reading as one run-on block. A hairline rule
     plus its own inset makes each item legibly separate. Safe to apply to
     every li but the first because above 700px all four share one row. */
  .hero__stats li + li {
    border-left: 1px solid rgba(255,255,255,0.16);
    padding-left: clamp(1.5rem, 0.5rem + 1.8vw, 2.5rem);
  }
}
.hero__stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.25rem + 1.1vw, 1.95rem);
  font-weight: 700;
  color: var(--gold-500);
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.hero__stat-label {
  display: block;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: rgba(255,255,255,0.82);
  margin-top: 0.45rem;
  text-wrap: pretty;
}

/* Compact page hero for interior pages */
.page-hero {
  position: relative;
  isolation: isolate;
  background: var(--brand-900);
  color: #fff;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 70% 90% at 88% 0%, rgba(0,191,99,0.30), transparent 62%),
    radial-gradient(ellipse 60% 80% at 8% 100%, rgba(254,192,0,0.16), transparent 60%);
}
.page-hero__inner { padding-block: clamp(3rem, 2rem + 6vw, 5.5rem); max-width: 52rem; }
.page-hero h1 { color: #fff; margin-bottom: var(--space-3); }
.page-hero p { color: rgba(255,255,255,0.85); font-size: var(--text-lg); max-width: 44rem; }
.page-hero .eyebrow { color: var(--gold-300); margin-bottom: var(--space-3); }
.page-hero .eyebrow::before { background: var(--gold-500); }

.breadcrumb { margin-bottom: var(--space-5); font-size: var(--text-sm); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.breadcrumb li { display: flex; align-items: center; gap: 0.5rem; color: rgba(255,255,255,0.62); }
.breadcrumb li + li::before { content: "/"; color: rgba(255,255,255,0.35); }
.breadcrumb a { color: rgba(255,255,255,0.85); text-decoration: none; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: #fff; }

/* --------------------------------------------------------------------------
   8. Grid & cards
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: var(--space-5); }
/* 26rem min keeps this to a clean two-up at desktop widths — at 21rem a
   four-item set broke into an ugly 3 + 1 orphan row. */
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), border-color 0.25s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--brand-200); }
.card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-muted); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-out); }
.card:hover .card__media img { transform: scale(1.05); }
.card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.card__body > h3 { margin: 0; }
.card__kicker {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold-700);
}
.card__foot { margin-top: auto; padding-top: var(--space-2); }

.card-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm);
  text-decoration: none; color: var(--link);
}
.card-link svg { width: 1em; height: 1em; transition: transform 0.2s var(--ease); }
.card-link:hover svg { transform: translateX(3px); }

/* Icon feature card */
.feature { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.feature__icon {
  display: grid; place-items: center;
  width: 50px; height: 50px;
  border-radius: var(--radius);
  background: var(--brand-50);
  color: var(--brand-700);
  flex: none;
}
.feature__icon svg { width: 25px; height: 25px; }
.feature__icon--gold { background: var(--gold-50); color: var(--gold-700); }
.feature h3 { font-size: var(--text-lg); }
.feature p { color: var(--text-muted); font-size: var(--text-sm); }

/* --------------------------------------------------------------------------
   9. Operations — the concrete work
   -------------------------------------------------------------------------- */
.ops { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.op {
  position: relative;
  padding: var(--space-6) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.op::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--brand-500);
}
.op:nth-child(2)::before { background: var(--gold-500); }
.op:nth-child(3)::before { background: var(--brand-400); }
.op:nth-child(4)::before { background: var(--gold-600); }
.op__icon { color: var(--brand-700); margin-bottom: var(--space-3); }
.op__icon svg { width: 30px; height: 30px; }
.op h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.op p { font-size: var(--text-sm); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   10. Split / media sections
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse .split__media { order: 2; }
}
.split__media { position: relative; }
.split__media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; object-fit: cover; }
.split__body > * + * { margin-top: var(--space-4); }

/* Decorative gold frame behind image.
   Note: z-index:-1 would push this behind the *section's* background — .framed
   sets no stacking context, so a negative index escapes to the root and the
   frame vanishes on any tinted section. Layer within .framed instead. */
.framed { position: relative; isolation: isolate; }
.framed::before {
  content: "";
  position: absolute;
  inset: auto -14px -14px auto;
  width: 62%; height: 62%;
  border: 3px solid var(--gold-500);
  border-radius: var(--radius-lg);
  z-index: 0;
}
.framed img { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   11. Stats band
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.stat {
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  border-top: 3px solid var(--brand-500);
}
.stat:nth-child(even) { border-top-color: var(--gold-500); }
.stat__num {
  display: flex; align-items: baseline; gap: 0.1rem;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 1.7rem + 1.8vw, 3rem);
  font-weight: 700;
  color: var(--heading);
  line-height: 1;
  letter-spacing: -0.03em;
}
.stat__suffix { color: var(--brand-600); }
.stat__label { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); margin-top: var(--space-3); color: var(--heading); }
.stat__note { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-2); }

.source-note {
  margin-top: var(--space-6);
  font-size: var(--text-xs);
  color: var(--text-subtle);
  max-width: 70ch;
}

/* --------------------------------------------------------------------------
   12. Giving tiers
   -------------------------------------------------------------------------- */
.tiers { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.tier {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  text-align: center;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease);
}
.tier:hover { border-color: var(--brand-400); transform: translateY(-3px); box-shadow: var(--shadow); }
.tier--featured { border-color: var(--brand-500); box-shadow: var(--shadow); }
.tier__badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--gold-500); color: var(--ink-900);
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.3rem 0.85rem; border-radius: var(--radius-full);
  white-space: nowrap;
}
.tier__amount { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; color: var(--brand-700); line-height: 1; }
.tier__what { font-size: var(--text-sm); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   13. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  isolation: isolate;
  background: var(--brand-800);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: clamp(2.5rem, 1.5rem + 5vw, 4.5rem);
  overflow: hidden;
  text-align: center;
}
.cta-band::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 60% 100% at 15% 0%, rgba(0,191,99,0.45), transparent 60%),
    radial-gradient(ellipse 50% 90% at 90% 100%, rgba(254,192,0,0.22), transparent 60%);
}
.cta-band h2 { color: #fff; margin-bottom: var(--space-4); }
.cta-band p { color: rgba(255,255,255,0.87); max-width: 46ch; margin-inline: auto; margin-bottom: var(--space-6); font-size: var(--text-lg); }

/* --------------------------------------------------------------------------
   14. Values / list blocks
   -------------------------------------------------------------------------- */
.value-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
.value-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border);
}
.value-list li:last-child { border-bottom: 0; }
.value-list li:first-child { padding-top: 0; }
.value-list__marker {
  display: grid; place-items: center;
  width: 38px; height: 38px; flex: none;
  border-radius: var(--radius-full);
  background: var(--brand-50);
  color: var(--brand-700);
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm);
}
.value-list h3 { font-size: var(--text-base); margin-bottom: 0.4rem; }
.value-list p { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.6; }

.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.check-list li { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; font-size: var(--text-sm); }
.check-list svg { width: 20px; height: 20px; color: var(--brand-600); margin-top: 0.15rem; flex: none; }

/* --------------------------------------------------------------------------
   15. Accordion / FAQ
   -------------------------------------------------------------------------- */
.accordion { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); }
.accordion__item + .accordion__item { border-top: 1px solid var(--border); }
.accordion__trigger {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  width: 100%; text-align: left;
  padding: var(--space-5);
  background: transparent; border: 0;
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-base);
  color: var(--heading);
  transition: background 0.16s var(--ease);
}
.accordion__trigger:hover { background: var(--bg-subtle); }
.accordion__icon { flex: none; width: 22px; height: 22px; color: var(--brand-600); transition: transform 0.25s var(--ease); }
.accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(45deg); }
.accordion__panel { padding: 0 var(--space-5) var(--space-5); color: var(--text-muted); font-size: var(--text-sm); }
.accordion__panel[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Payment / bank details
   -------------------------------------------------------------------------- */
.pay {
  margin-top: var(--space-8);
  max-width: 46rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  box-shadow: var(--shadow-sm);
}
.pay__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
  margin-bottom: var(--space-6);
}
.pay__head h3 { margin-bottom: 0.2rem; }
.pay__foot { margin-top: var(--space-5); color: var(--text-muted); }

.bank { margin: 0; }
.bank__row {
  display: grid;
  grid-template-columns: 10.5rem 1fr;
  gap: var(--space-3) var(--space-4);
  align-items: baseline;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border);
}
.bank__row:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 560px) {
  .bank__row { grid-template-columns: 1fr; gap: 0.3rem; }
}
.bank dt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.bank dd {
  margin: 0;
  color: var(--heading);
  font-weight: 500;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
/* tabular-nums keeps the digit groups aligned and easier to transcribe */
.bank__value { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.bank__row--key .bank__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--brand-800);
}

.copy {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.9rem;
  min-height: 40px;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--brand-800);
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background 0.16s var(--ease), color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.copy:hover { background: var(--brand-100); }
.copy.is-copied { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
/* Without JS the button cannot do anything, so do not show it. */
html:not(.js) .copy { display: none; }

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */
.footer { background: var(--ink-900); color: var(--ink-300); padding-block: var(--space-9) var(--space-6); margin-top: 0; }
.footer__grid {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.footer__brand { max-width: 24rem; }
.footer__brand img { height: 44px; width: auto; margin-bottom: var(--space-4); background: #fff; padding: 0.4rem 0.6rem; border-radius: var(--radius-sm); }
.footer__brand p { font-size: var(--text-sm); color: var(--ink-400); }
.footer__heading {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.11em;
  text-transform: uppercase; color: #fff; margin-bottom: var(--space-4);
  line-height: 1.4;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.footer a { color: var(--ink-300); text-decoration: none; font-size: var(--text-sm); transition: color 0.16s var(--ease); }
.footer a:hover { color: var(--brand-300); }
.footer__bottom {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  align-items: center; justify-content: space-between;
  font-size: var(--text-xs); color: var(--ink-500);
}
.footer__bottom a { font-size: var(--text-xs); }

/* --------------------------------------------------------------------------
   20. Motion
   -------------------------------------------------------------------------- */
/* Scoped to .js so the page is fully visible when JavaScript is unavailable or
   fails to load. Without this gate, a JS error would leave the site blank. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .card:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   21. Print
   -------------------------------------------------------------------------- */
@media print {
  .header, .footer, .cta-band, .nav-toggle, .btn { display: none !important; }
  body { color: #000; background: #fff; font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}