/* Roboto, self-hosted (audit, Oct 2026): no render-blocking request to Google; text shows in a
   fallback font for a moment rather than waiting. One variable file covers weights 100–900. */
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/roboto-latin.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("../fonts/roboto-latin-italic.woff2") format("woff2"); }

/* SOS Children's Villages Eswatini — shared styles
   Motion follows a few rules: respond on press, animate only transform/opacity,
   everything a person can grab or reverse is interruptible, and reduced-motion is honoured. */

/* ───────────────────────── Tokens ───────────────────────── */
:root {
  --blue: #009fe3;          /* SOS blue (original site used #029ee0) */
  --blue-ink: #0077b3;      /* blue that passes AA as text on white */
  --navy: #0e3862;
  --sun: #f2af29;           /* warm accent from the original site */
  --bg: #ffffff;
  --bg-2: #f5f7fa;
  --surface: #ffffff;
  --text: #0b1b2b;
  --text-2: #4a5866;
  --line: rgba(14, 56, 98, 0.12);
  --tint: rgba(0, 159, 227, 0.1);
  --tint-2: rgba(0, 159, 227, 0.16);
  --glass: rgba(255, 255, 255, 0.72);
  --glass-strong: rgba(255, 255, 255, 0.86);
  --glass-edge: rgba(255, 255, 255, 0.6);
  --shadow-sm: 0 1px 2px rgba(14, 56, 98, .06), 0 2px 8px rgba(14, 56, 98, .06);
  --shadow-lg: 0 2px 6px rgba(14, 56, 98, .06), 0 18px 48px rgba(14, 56, 98, .14);
  --radius: 10px;      /* cards, panels */
  --radius-sm: 6px;    /* controls, rows, badges */
  --gutter: max(16px, env(safe-area-inset-left));
  --max: 1180px;
  --nav-h: 68px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);      /* entering / exiting UI */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* moving on screen */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);   /* sheets (iOS-like) */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --blue-ink: #4cc3f5; --bg: #0b1622; --bg-2: #0f1e2e; --surface: #132538;
    --text: #eef3f8; --text-2: #a6b4c2; --line: rgba(255, 255, 255, .1);
    --tint: rgba(76, 195, 245, .12); --tint-2: rgba(76, 195, 245, .2);
    --glass: rgba(11, 22, 34, .7); --glass-strong: rgba(19, 37, 56, .88); --glass-edge: rgba(255, 255, 255, .08);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow-lg: 0 18px 48px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --blue-ink: #4cc3f5; --bg: #0b1622; --bg-2: #0f1e2e; --surface: #132538;
  --text: #eef3f8; --text-2: #a6b4c2; --line: rgba(255, 255, 255, .1);
  --tint: rgba(76, 195, 245, .12); --tint-2: rgba(76, 195, 245, .2);
  --glass: rgba(11, 22, 34, .7); --glass-strong: rgba(19, 37, 56, .88); --glass-edge: rgba(255, 255, 255, .08);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow-lg: 0 18px 48px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

/* The site always uses its dark theme, whatever the visitor's device is set to.
   (data-theme="dark" is on <html>; the light tokens above remain only as a fallback.) */

/* Page-to-page cross-fade where supported; the header stays put */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; animation-timing-function: var(--ease-out); }

/* ───────────────────────── Base ───────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 64px); }
body {
  margin: 0;
  font: 100%/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--text);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 8px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 760px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--blue); color: #fff; padding: .6rem 1rem; border-radius: 6px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* Type: tracking and leading change with size */
.display, .h1, .h2 { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif; font-weight: 700; margin: 0; }
.display { font-size: clamp(2.5rem, 6.4vw, 4.75rem); line-height: 1.02; letter-spacing: -0.035em; }
.h1 { font-size: clamp(2.25rem, 5.2vw, 3.9rem); line-height: 1.04; letter-spacing: -0.033em; }
.h2 { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -0.028em; }
.h3 { font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.012em; font-weight: 650; margin: 0; }
.lede { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.5; color: var(--text-2); letter-spacing: -0.005em; margin: 0; }
.eyebrow { font-size: .8125rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-ink); margin: 0 0 .9rem; }
.muted { color: var(--text-2); }

/* Long-form reading */
.prose { font-size: 1.0625rem; line-height: 1.65; max-width: 68ch; }
.prose p { margin: 0 0 1.1em; }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; letter-spacing: -0.022em; margin: 2.2em 0 .6em; }
.prose h3 { font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.012em; margin: 1.8em 0 .5em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1.2em; }
.prose li { margin: .35em 0; }
.prose li::marker { color: var(--blue); }
.prose blockquote { margin: 1.6em 0; padding: .2em 0 .2em 1.2em; border-left: 3px solid var(--blue); font-size: 1.15rem; line-height: 1.5; color: var(--text); font-weight: 500; }
.prose blockquote cite { display: block; margin-top: .6em; font-style: normal; font-size: .875rem; color: var(--text-2); font-weight: 600; }
.prose a { color: var(--blue-ink); text-underline-offset: 3px; }

/* ───────────────────────── Buttons ───────────────────────── */
.btn {
  -webkit-tap-highlight-color: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 1.4rem; border-radius: 6px; border: 0;
  font: inherit; font-weight: 600; font-size: 1rem; letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer; user-select: none;
  transition: transform 160ms var(--ease-out), background-color 200ms, box-shadow 200ms;
}
.btn:active { transform: scale(.96); transition-duration: 60ms; }   /* feedback on press, instantly */
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 6px 18px rgba(0, 159, 227, .32); }
.btn-primary:hover { background: #008bd0; }
.btn-ghost { background: var(--tint); color: var(--blue-ink); }
.btn-ghost:hover { background: var(--tint-2); }
.btn-white { background: #fff; color: var(--navy); }
.btn-sm { min-height: 38px; padding: 0 1rem; font-size: .9375rem; }
.btn svg { width: 1.05em; height: 1.05em; flex: none; }
.link-arrow { color: var(--blue-ink); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.link-arrow svg { width: 16px; height: 16px; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .link-arrow:hover svg, a:hover > .link-arrow svg { transform: translateX(3px); } }

/* ───────────────────────── Nav (translucent material) ───────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50; view-transition-name: site-nav;
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
}
.nav::after { /* scroll-edge effect instead of a hard divider */
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(14, 56, 98, .08), transparent);
  opacity: 0; transition: opacity 240ms;
}
.nav.scrolled::after { opacity: 1; }
.nav > .wrap { display: flex; align-items: center; gap: 1rem; height: var(--nav-h); }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
.brand-mark { width: 38px; height: 38px; flex: none; }
.brand-name { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name b { font-size: 1rem; letter-spacing: -0.01em; }
.brand-name span { font-size: .75rem; color: var(--text-2); letter-spacing: .02em; }

.nav-menu { display: flex; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.nav-menu > li { position: relative; }
.nav-trigger, .nav-menu > li > a {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .55rem .8rem; border-radius: 6px; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: .9375rem; font-weight: 550; color: var(--text); text-decoration: none;
  -webkit-tap-highlight-color: transparent; transition: background-color 160ms;
}
.nav-trigger:hover, .nav-menu > li > a:hover, .nav-trigger[aria-expanded="true"] { background: var(--tint); }
.nav-trigger:active, .nav-menu > li > a:active { background: var(--tint-2); }
.nav-trigger svg { width: 14px; height: 14px; transition: transform 260ms var(--ease-out); opacity: .7; }
.nav-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.is-current > .nav-trigger, .nav-menu > li > a[aria-current="page"] { color: var(--blue-ink); }
.is-current > .nav-trigger::after, .nav-menu > li > a[aria-current="page"]::after {
  content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; margin-left: .15rem;
}

/* Dropdown: a light material panel that grows from its trigger. CSS transitions reverse from
   their current value, so hovering on/off quickly never jumps. */
.dropdown {
  position: absolute; top: calc(100% + 10px); left: 50%; width: 340px; margin-left: -170px;
  padding: .5rem; border-radius: 10px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  transform-origin: 50% -10px;
  opacity: 0; transform: translateY(-6px) scale(.96); filter: blur(4px); visibility: hidden;
  transition: opacity 180ms var(--ease-out), transform 320ms var(--ease-out), filter 220ms, visibility 0s 320ms;
}
.dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* hover bridge */
.open > .dropdown { opacity: 1; transform: none; filter: none; visibility: visible; transition-delay: 0s; }
.dropdown a {
  display: grid; grid-template-columns: 40px 1fr; gap: .8rem; align-items: center;
  padding: .65rem .7rem; border-radius: 8px; text-decoration: none; transition: background-color 140ms;
}
.dropdown a:hover, .dropdown a:focus-visible { background: var(--tint); }
.dropdown a:active { background: var(--tint-2); }
.dropdown a[aria-current="page"] { background: var(--tint); }
.dropdown i { width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; background: var(--tint); color: var(--blue-ink); }
.dropdown i svg { width: 20px; height: 20px; }
.dropdown b { display: block; font-size: .9375rem; letter-spacing: -0.008em; }
.dropdown small { display: block; font-size: .8125rem; line-height: 1.3; color: var(--text-2); }

.menu-btn {
  display: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent;
  color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 120ms var(--ease-out), background-color 160ms;
}
.menu-btn:active { transform: scale(.92); background: var(--tint-2); }
.menu-btn svg { width: 22px; height: 22px; }
@media (max-width: 1060px) {
  .nav-menu, .nav .btn-donate-desktop { display: none; }
  .menu-btn { display: inline-grid; place-items: center; }
}

/* Mobile menu: a sheet that grows out of the button that opened it */
.menu-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(5, 15, 25, .32); opacity: 0; pointer-events: none; transition: opacity 280ms var(--ease-out); }
.menu-sheet {
  position: fixed; z-index: 61; top: calc(env(safe-area-inset-top) + 10px); right: 10px; left: 10px; bottom: auto;
  max-width: 420px; max-height: calc(100dvh - 20px); overflow: auto; overscroll-behavior: contain; margin-left: auto;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--glass-edge); border-radius: 10px; box-shadow: var(--shadow-lg); padding: .75rem;
  transform-origin: calc(100% - 32px) 30px;
  transform: scale(.6); opacity: 0; filter: blur(8px); pointer-events: none;
  transition: transform 420ms var(--ease-drawer), opacity 240ms, filter 300ms;
}
.menu-open .menu-scrim { opacity: 1; pointer-events: auto; }
.menu-open .menu-sheet { transform: none; opacity: 1; filter: none; pointer-events: auto; }
.menu-sheet header { display: flex; justify-content: space-between; align-items: center; padding: .25rem .25rem .25rem .75rem; }
.menu-sheet header .menu-btn { display: inline-grid; place-items: center; }
.menu-sheet h3 { margin: .9rem .9rem .3rem; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.menu-sheet ul { list-style: none; margin: 0; padding: 0; }
.menu-sheet li a {
  display: flex; justify-content: space-between; align-items: center;
  padding: .7rem .9rem; border-radius: 8px; text-decoration: none;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em;
}
.menu-sheet li a svg { width: 16px; height: 16px; opacity: .45; }
.menu-sheet li a:active { background: var(--tint-2); }
.menu-sheet li a[aria-current="page"] { color: var(--blue-ink); background: var(--tint); }
.menu-sheet .btn { width: 100%; margin-top: .75rem; }

/* ───────────────────────── Home hero ───────────────────────── */
.hero { padding: clamp(2.5rem, 6vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4.5rem); }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero .lede { margin: 1.4rem 0 2rem; max-width: 34ch; }
.ctas { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 2.25rem; font-size: .9375rem; color: var(--text-2); }
.hero-meta span { display: inline-flex; align-items: center; gap: .45rem; }
.hero-meta svg { width: 18px; height: 18px; color: var(--blue); }
.hero-art { position: relative; aspect-ratio: 4 / 4.4; }
.hero-art .p1 { inset: 0 18% 14% 0; }
.hero-art .p1 .tag { top: 12px; bottom: auto; } /* keep the caption clear of the quote card */
.hero-art .p2 { right: 0; bottom: 0; width: 46%; aspect-ratio: 1; }
.hero-quote {
  position: absolute; left: -4%; bottom: 4%; max-width: 270px; z-index: 2;
  background: var(--glass); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-edge); border-radius: 10px; padding: 1rem 1.1rem; box-shadow: var(--shadow-lg);
  font-size: .9375rem; line-height: 1.4; font-weight: 550; letter-spacing: -0.003em;
}
.hero-quote small { display: block; margin-top: .45rem; font-weight: 600; font-size: .75rem; letter-spacing: .03em; color: var(--blue-ink); text-transform: uppercase; }
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-art { aspect-ratio: 4 / 3.4; }
  .hero-quote { left: 4%; }
}

/* ───────────────────────── Sub-page hero ───────────────────────── */
.page-hero { padding: clamp(2rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem); }
.crumbs { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; list-style: none; margin: 0 0 1.25rem; padding: 0; font-size: .875rem; color: var(--text-2); }
.crumbs a { text-decoration: none; color: var(--text-2); }
.crumbs a:hover { color: var(--blue-ink); }
.crumbs li + li::before { content: "›"; margin-right: .4rem; opacity: .5; }
.page-hero .lede { margin-top: 1.1rem; max-width: 40ch; }
.page-hero .ctas { margin-top: 1.75rem; }
.page-hero.split .wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: end; }
.page-hero .banner { position: relative; height: clamp(220px, 34vw, 420px); margin-top: clamp(2rem, 4vw, 3rem); }
.page-hero .banner .photo { inset: 0; }
@media (max-width: 860px) { .page-hero.split .wrap { grid-template-columns: 1fr; } }

/* "On this page" — sticky chips with scroll-spy and a sliding indicator */
.subnav {
  position: sticky; top: var(--nav-h); z-index: 40;
  background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
}
.subnav .wrap { position: relative; }
.subnav ul {
  position: relative; display: flex; gap: .25rem; list-style: none; margin: 0; padding: .55rem 0;
  overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a {
  position: relative; z-index: 1; display: block; white-space: nowrap; padding: .45rem .9rem; border-radius: 6px;
  font-size: .875rem; font-weight: 600; text-decoration: none; color: var(--text-2); transition: color 200ms;
}
.subnav a:hover { color: var(--text); }
.subnav a.on { color: var(--blue-ink); }
.subnav .pill {
  position: absolute; z-index: 0; top: .55rem; left: 0; height: calc(100% - 1.1rem); width: 0; border-radius: 6px;
  background: var(--tint); transition: transform 260ms var(--ease-in-out), width 260ms var(--ease-in-out), opacity 200ms ease; opacity: 0;
}

/* ───────────────────────── Sections ───────────────────────── */
section { scroll-margin-top: calc(var(--nav-h) + 16px); }
.section { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.section.tight { padding: clamp(3rem, 6vw, 5rem) 0; }
.section.alt { background: var(--bg-2); }
.section-head { max-width: 680px; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head .lede { margin-top: 1rem; }
.section-head.row { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.section-head.row > div { max-width: 640px; }
.split-2 { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.split-2.even { grid-template-columns: 1fr 1fr; }
.sticky-col { position: sticky; top: calc(var(--nav-h) + 80px); }
@media (max-width: 860px) { .split-2, .split-2.even { grid-template-columns: 1fr; } .sticky-col { position: static; } }

/* Photo placeholders: swap for real SOS Eswatini photography */
.photo {
  position: absolute; border-radius: var(--radius); overflow: hidden;
  background: radial-gradient(120% 80% at 20% 15%, rgba(255, 255, 255, .55), transparent 60%), linear-gradient(160deg, #ffd27a 0%, #f2a65a 38%, #d9735a 70%, #8a4a5c 100%);
  box-shadow: var(--shadow-lg);
}
.photo.cool { background: radial-gradient(120% 80% at 80% 10%, rgba(255, 255, 255, .5), transparent 60%), linear-gradient(200deg, #9fe0ff 0%, #3fb6ec 40%, #127fc0 75%, #0e3862 100%); }
.photo.green { background: radial-gradient(120% 80% at 30% 0%, rgba(255, 255, 255, .5), transparent 60%), linear-gradient(180deg, #d9efc5 0%, #9fcf7f 45%, #5c9e5a 80%, #2f6145 100%); }
.photo.static { position: relative; }
.photo .tag {
  position: absolute; left: 12px; bottom: 12px; right: 12px; font-size: .75rem; font-weight: 600; letter-spacing: .01em; color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35); display: flex; align-items: center; gap: .4rem;
}
.photo .tag svg { width: 14px; height: 14px; flex: none; opacity: .9; }

/* Stats */
.footprint { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.footprint.four { grid-template-columns: repeat(4, 1fr); }
.stat { background: var(--surface); padding: 1.75rem 1.4rem; }
.stat b { display: block; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif; font-size: clamp(2.5rem, 4.5vw, 3.5rem); line-height: 1; letter-spacing: -0.04em; font-weight: 700; color: var(--blue-ink); font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: .6rem; font-size: .9375rem; line-height: 1.35; color: var(--text-2); }
@media (max-width: 900px) { .footprint, .footprint.four { grid-template-columns: repeat(2, 1fr); } .footprint:not(.four) .stat:last-child { grid-column: span 2; } }

/* Generic tiles */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.tiles.two { grid-template-columns: repeat(2, 1fr); }
.tiles.four { grid-template-columns: repeat(4, 1fr); }
.tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem;
  display: flex; flex-direction: column; gap: .55rem; text-decoration: none;
  transition: transform 160ms var(--ease-out), box-shadow 220ms, border-color 200ms;
}
.tile p { margin: 0; color: var(--text-2); }
a.tile:hover { box-shadow: var(--shadow-lg); border-color: transparent; }
a.tile:active { transform: scale(.98); }
.tile .link-arrow { margin-top: auto; padding-top: .5rem; }
.tile .ico { width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; background: var(--tint); color: var(--blue-ink); margin-bottom: .35rem; }
.tile .ico svg { width: 22px; height: 22px; }
.ico-badge { width: 48px; height: 48px; border-radius: 8px; display: grid; place-items: center; background: var(--tint); color: var(--blue-ink); margin-bottom: 1.1rem; }
.ico-badge svg { width: 24px; height: 24px; }
.tile .num { font-size: .8125rem; font-weight: 700; color: var(--blue-ink); letter-spacing: .04em; }
@media (max-width: 900px) { .tiles, .tiles.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tiles, .tiles.two, .tiles.four { grid-template-columns: 1fr; } }

.villages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; }
.village {
  display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.25rem; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: transform 140ms var(--ease-out), border-color 200ms;
}
a.village:hover { border-color: rgba(0, 159, 227, .45); }
a.village:active { transform: scale(.985); }
.village i { width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; background: var(--tint); color: var(--blue-ink); flex: none; }
.village i svg { width: 20px; height: 20px; }
.village b { display: block; letter-spacing: -0.01em; }
.village small { color: var(--text-2); font-size: .8125rem; }
@media (max-width: 720px) { .villages { grid-template-columns: 1fr; } }

/* Programmes carousel */
.viewport {
  overflow: hidden; touch-action: pan-y; cursor: grab;
  margin-right: calc(-1 * var(--gutter)); padding: 8px 0 28px;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}
.viewport.dragging { cursor: grabbing; }
.viewport.dragging a { pointer-events: none; }
.track { display: flex; gap: 18px; will-change: transform; }
.card {
  flex: 0 0 clamp(270px, 30vw, 340px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; user-select: none; -webkit-user-select: none;
}
.card .photo { position: relative; height: 190px; border-radius: 0; box-shadow: none; }
.card-body { padding: 1.25rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.card-body p { margin: 0; color: var(--text-2); font-size: .9688rem; line-height: 1.5; }
.card-body .link-arrow { margin-top: auto; padding-top: .6rem; font-size: .9375rem; }
.carousel-ctrls { display: flex; gap: .5rem; }
.round {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text);
  cursor: pointer; display: grid; place-items: center; -webkit-tap-highlight-color: transparent;
  transition: transform 120ms var(--ease-out), opacity 200ms, background-color 160ms;
}
.round:hover { background: var(--bg-2); }
.round:active { transform: scale(.9); }
.round:disabled { opacity: .35; cursor: default; }
.round svg { width: 20px; height: 20px; }
.dots { display: flex; gap: 6px; justify-content: center; }
.dots i { width: 7px; height: 7px; border-radius: 6px; background: var(--line); transition: width 240ms var(--ease-in-out), background-color 240ms ease; }
.dots i.on { width: 22px; background: var(--blue); }

/* Vision */
.vision { text-align: center; }
.vision blockquote { margin: 0 auto; max-width: 22ch; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.08; letter-spacing: -0.032em; font-weight: 700; }
.vision blockquote em { font-style: normal; color: var(--blue-ink); }
.vision p { margin-top: 1.5rem; }

/* Channels list (contact rows) */
.channels { display: grid; gap: .75rem; }
.channel {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 1rem; align-items: center;
  padding: 1.05rem 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); text-decoration: none;
  transition: transform 140ms var(--ease-out), border-color 200ms;
}
a.channel:hover { border-color: rgba(0, 159, 227, .45); }
a.channel:active { transform: scale(.985); }
.channel i { width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; background: var(--tint); color: var(--blue-ink); }
.channel i svg { width: 22px; height: 22px; }
.channel b { display: block; font-size: 1rem; letter-spacing: -0.01em; }
.channel small { display: block; color: var(--text-2); font-size: .875rem; }
.channel .chev { color: var(--text-2); width: 18px; height: 18px; }
.channel.urgent i { background: rgba(242, 175, 41, .18); color: #b07405; }
.checks { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; gap: .8rem; }
.checks li { display: flex; gap: .75rem; align-items: start; color: var(--text-2); }
.checks svg { width: 22px; height: 22px; color: var(--blue); flex: none; margin-top: 1px; }
.checks b { color: var(--text); font-weight: 600; }

/* Ways to give */
.give { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 1rem; }
.give-card {
  position: relative; border-radius: var(--radius); padding: 1.6rem; background: var(--surface); border: 1px solid var(--line);
  text-decoration: none; display: flex; flex-direction: column; gap: .5rem; min-height: 190px;
  transition: transform 160ms var(--ease-out), box-shadow 220ms;
}
.give-card:hover { box-shadow: var(--shadow-lg); }
.give-card:active { transform: scale(.98); }
.give-card p { margin: 0; color: var(--text-2); }
.give-card .link-arrow { margin-top: auto; }
.feature {
  grid-row: span 2; color: #fff; border: 0; overflow: hidden; min-height: 400px;
  background: radial-gradient(140% 90% at 0% 0%, #2bbcf3 0%, var(--blue) 35%, #0a5f9c 75%, var(--navy) 100%);
}
.feature p { color: rgba(255, 255, 255, .86); font-size: 1.0625rem; max-width: 30ch; }
.feature .h2, .feature .h3 { color: #fff; }
.feature .eyebrow { color: rgba(255, 255, 255, .8); }
.feature .btn { background: #fff; color: var(--navy); align-self: start; margin-top: 1.25rem; box-shadow: none; }
.lilangeni {
  position: absolute; right: -40px; bottom: -40px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe39a, var(--sun) 55%, #c98a0e);
  box-shadow: inset 0 -10px 30px rgba(0, 0, 0, .18), 0 20px 50px rgba(0, 0, 0, .25);
  display: grid; place-items: center; color: rgba(90, 55, 0, .75); font-weight: 800; font-size: 3.5rem; letter-spacing: -0.04em;
}
.lilangeni::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; border: 2px dashed rgba(90, 55, 0, .25); }
@media (max-width: 900px) { .give { grid-template-columns: 1fr 1fr; } .give .feature { grid-column: span 2; grid-row: auto; min-height: 340px; } }
@media (max-width: 560px) { .give { grid-template-columns: 1fr; } .give .feature { grid-column: auto; } }

/* Banner CTA */
.cta-band { border-radius: 8px; padding: clamp(2rem, 5vw, 3.5rem); display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; position: relative; overflow: hidden; }
.cta-band .lede { color: rgba(255, 255, 255, .85); margin-top: .75rem; max-width: 46ch; }
@media (max-width: 760px) { .cta-band { grid-template-columns: 1fr; } }

/* News / posts */
.news { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem 1.25rem; }
.post { text-decoration: none; display: flex; flex-direction: column; gap: .7rem; }
.post .photo { position: relative; aspect-ratio: 16 / 10; box-shadow: none; transition: transform 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .post:hover .photo { transform: scale(1.015); } }
.post:active .photo { transform: scale(.985); transition-duration: 80ms; }
.post time, .post .meta { font-size: .8125rem; color: var(--text-2); font-weight: 550; }
.post .kind { color: var(--blue-ink); font-weight: 650; }
.post h3 { margin: 0; font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.012em; }
.post p { margin: 0; color: var(--text-2); font-size: .9375rem; }
.post[hidden] { display: none; }
@media (max-width: 860px) { .news { grid-template-columns: 1fr; } .post { display: grid; grid-template-columns: 130px 1fr; gap: .4rem 1rem; align-items: start; } .post .photo { grid-row: span 4; aspect-ratio: 1; } }

/* Segmented control with a sliding thumb */
.segmented {
  position: relative; display: inline-flex; padding: 4px; border-radius: 6px; background: var(--bg-2); border: 1px solid var(--line);
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.segmented button {
  position: relative; z-index: 1; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: .9375rem; font-weight: 600;
  padding: .5rem 1.1rem; border-radius: 6px; color: var(--text-2); white-space: nowrap; -webkit-tap-highlight-color: transparent;
  transition: color 200ms, transform 120ms var(--ease-out);
}
.segmented button:active { transform: scale(.95); }
.segmented button[aria-pressed="true"] { color: var(--text); }
.segmented .thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; border-radius: 6px; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform 260ms var(--ease-in-out), width 260ms var(--ease-in-out); }

/* Timeline */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 70px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.timeline li { display: grid; grid-template-columns: 70px 1fr; gap: 1.75rem; padding: 0 0 1.75rem; position: relative; }
.timeline li::after { content: ""; position: absolute; left: 65px; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 3px solid var(--blue); }
.timeline time { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--blue-ink); letter-spacing: -0.01em; padding-top: 1px; }
.timeline p { margin: 0; color: var(--text-2); }
.timeline b { color: var(--text); font-weight: 600; }
.section.alt .timeline li::after { background: var(--bg-2); }

/* People */
.people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.person { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1.25rem; display: flex; gap: .9rem; align-items: center; }
.avatar { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .9375rem; color: #fff; letter-spacing: .02em; background: linear-gradient(140deg, var(--blue), var(--navy)); }
.person b { display: block; letter-spacing: -0.01em; line-height: 1.25; }
.person small { color: var(--text-2); font-size: .8125rem; }
.person.lead .avatar { background: linear-gradient(140deg, var(--sun), #d9735a); }
@media (max-width: 900px) { .people { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .people { grid-template-columns: 1fr; } }

/* Simple bulleted grid list */
.list-cols { columns: 2; column-gap: 2.5rem; list-style: none; padding: 0; margin: 0; }
.list-cols li { break-inside: avoid; padding: .7rem 0; border-bottom: 1px solid var(--line); display: flex; gap: .6rem; align-items: start; }
.list-cols li svg { width: 20px; height: 20px; color: var(--blue); flex: none; margin-top: 2px; }
@media (max-width: 640px) { .list-cols { columns: 1; } }

/* Accordion: native <details>, height animates where the browser supports it */
:root { interpolate-size: allow-keywords; }
.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.25rem .25rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; -webkit-tap-highlight-color: transparent;
  border-radius: 6px; transition: background-color 140ms;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:active { background: var(--tint); }
.accordion summary .pm { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--tint); color: var(--blue-ink); display: grid; place-items: center; transition: transform 300ms var(--ease-out); }
.accordion summary .pm svg { width: 14px; height: 14px; }
.accordion details[open] summary .pm { transform: rotate(45deg); }
.accordion details::details-content { block-size: 0; overflow: hidden; opacity: 0; transition: block-size 300ms var(--ease-out), opacity 200ms ease, content-visibility 300ms allow-discrete; }
.accordion details[open]::details-content { block-size: auto; opacity: 1; }
.accordion .answer { padding: 0 .25rem 1.4rem; color: var(--text-2); max-width: 68ch; }
.accordion .answer p { margin: 0 0 .8em; }

/* Bank / payment detail card with copy buttons */
.paycard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.paycard h3 { display: flex; align-items: center; gap: .6rem; }
.paycard h3 i { width: 36px; height: 36px; border-radius: 6px; display: grid; place-items: center; background: var(--tint); color: var(--blue-ink); }
.paycard h3 i svg { width: 18px; height: 18px; }
.paycard dl { margin: 1rem 0 0; display: grid; gap: 0; }
.paycard .row { display: grid; grid-template-columns: 1fr auto; gap: .25rem 1rem; align-items: center; padding: .8rem 0; border-top: 1px solid var(--line); }
.paycard dt { font-size: .8125rem; color: var(--text-2); grid-column: 1; }
.paycard dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .01em; grid-column: 1; }
.copy {
  grid-column: 2; grid-row: 1 / span 2; border: 0; cursor: pointer; font: inherit; font-size: .8125rem; font-weight: 600;
  padding: .45rem .8rem; border-radius: 6px; background: var(--tint); color: var(--blue-ink); min-width: 74px;
  -webkit-tap-highlight-color: transparent; transition: transform 120ms var(--ease-out), background-color 200ms, color 200ms;
}
.copy:active { transform: scale(.94); }
.copy.done { background: #1f9d55; color: #fff; }

/* Notices */
.notice { display: flex; gap: .9rem; align-items: start; padding: 1rem 1.2rem; border-radius: var(--radius-sm); background: rgba(242, 175, 41, .14); border: 1px solid rgba(242, 175, 41, .45); font-size: .9375rem; }
.notice svg { width: 22px; height: 22px; flex: none; color: #b07405; margin-top: 1px; }
.notice p { margin: 0; }
.notice.info { background: var(--tint); border-color: rgba(0, 159, 227, .3); }
.notice.info svg { color: var(--blue-ink); }
/* Visible only in the prototype — remove before launch */
.proto-note { display: flex; gap: .6rem; align-items: start; margin: 1rem 0; padding: .7rem .9rem; border-radius: 8px; border: 1px dashed #c26; background: rgba(204, 34, 102, .06); color: #a1144f; font-size: .8125rem; font-weight: 550; line-height: 1.4; }
.proto-note::before { content: "PROTOTYPE"; font-size: .6875rem; font-weight: 800; letter-spacing: .06em; background: #c26; color: #fff; border-radius: 6px; padding: .15rem .4rem; flex: none; }

/* Forms */
.form { display: grid; gap: 1rem; }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .form .two { grid-template-columns: 1fr; } }
.field { display: grid; gap: .4rem; }
.field label { font-size: .875rem; font-weight: 600; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; /* ≥16px stops iOS zooming on focus */
  padding: .8rem .95rem; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text);
  transition: border-color 160ms, box-shadow 160ms;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0, 159, 227, .18); }
.field .err { font-size: .8125rem; color: #c0392b; min-height: 0; display: none; }
.field.invalid input, .field.invalid textarea, .field.invalid select { border-color: #c0392b; }
.field.invalid .err { display: block; }
.form-done { display: none; padding: 1.5rem; border-radius: var(--radius); background: var(--tint); }
.form.sent .form-done { display: block; }
.form.sent > :not(.form-done) { display: none; }

/* Partner wordmarks */
.logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.logos span { background: var(--surface); display: grid; place-items: center; text-align: center; padding: 1.75rem 1rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text-2); min-height: 100px; font-size: .9375rem; }
@media (max-width: 760px) { .logos { grid-template-columns: repeat(2, 1fr); } }

/* Map placeholder */
.map { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 320px; background: var(--bg-2); border: 1px solid var(--line); }
.map::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 38px, var(--line) 38px 39px), repeating-linear-gradient(90deg, transparent 0 38px, var(--line) 38px 39px); }
.map .pin { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -100%); color: var(--blue); width: 44px; height: 44px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .2)); }
.map .label { position: absolute; left: 50%; top: 48%; transform: translateX(-50%); background: var(--glass-strong); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--line); border-radius: 8px; padding: .5rem .8rem; font-size: .875rem; font-weight: 600; white-space: nowrap; box-shadow: var(--shadow-sm); }

/* Footer */
footer { background: var(--navy); color: rgba(255, 255, 255, .78); padding: 4rem 0 calc(2rem + env(safe-area-inset-bottom)); font-size: .9375rem; }
footer a { color: rgba(255, 255, 255, .78); text-decoration: none; }
footer a:hover { color: #fff; text-decoration: underline; }
.foot-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 2rem; }
footer h4 { color: #fff; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 1rem; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
footer .brand-name b { color: #fff; }
footer .brand-name span { color: rgba(255, 255, 255, .6); }
.foot-safe { margin-top: 1.25rem; display: inline-flex; gap: .6rem; align-items: center; padding: .6rem .9rem; border-radius: 8px; background: rgba(255, 255, 255, .08); color: #fff; font-weight: 600; }
.foot-safe svg { width: 18px; height: 18px; color: var(--sun); }
.foot-bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .8125rem; color: rgba(255, 255, 255, .55); }
@media (max-width: 960px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > :first-child { grid-column: span 2; } }

/* Scroll reveal: gentle, one-time */
/* Scroll reveal: see "Animation pass" at the end of this file */

/* ───────────────────────── Accessibility preferences ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
  .menu-sheet, .dropdown { transform: none !important; filter: none !important; transition: opacity 200ms ease, visibility 0s 200ms; }
  .open > .dropdown { transition: opacity 200ms ease; }
  .btn:active, .round:active, a.tile:active, .give-card:active, a.channel:active, a.village:active, .copy:active, .segmented button:active { transform: none; }
  .post:hover .photo, .post:active .photo { transform: none; }
  .segmented .thumb, .subnav .pill { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .nav, .subnav, .menu-sheet, .dropdown, .hero-quote, .map .label { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --line: rgba(255, 255, 255, .4); --text-2: #d3dce5; }  /* the site is always dark */
  .nav { background: var(--bg); border-bottom: 1px solid var(--text); }
}

/* ───────────────────────── Brand, photography & iconography (v3) ───────────────────────── */
/* Official SOS logo. The footer gets a white knock-out of the same file. */
.logo { display: block; height: 42px; width: auto; }
footer .logo { height: 46px; filter: brightness(0) invert(1); opacity: .95; }
@media (max-width: 520px) { .nav .logo { height: 34px; } }

/* Real photography: always cover, never stretch; a calm tone while loading */
.photo:has(img) { background: var(--bg-2); }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 1rem .85rem;
  font-size: .75rem; font-weight: 550; letter-spacing: .01em; color: rgba(255, 255, 255, .92);
  background: linear-gradient(to top, rgba(5, 15, 25, .62), transparent);
}
figure.photo { margin: 0; }
/* Hairline inner edge so light photos don't bleed into light backgrounds */
.photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(14, 56, 98, .08); pointer-events: none; }
.hero-art .p1 figcaption { top: 0; bottom: auto; padding: .85rem 1rem 2.5rem; background: linear-gradient(to bottom, rgba(5, 15, 25, .5), transparent); }

/* Icon badges: a soft tinted tile with a hairline, so duotone icons read as a crafted set */
.ico, .ico-badge, .dropdown i, .village i, .channel i, .paycard h3 i {
  background: linear-gradient(180deg, var(--tint-2), var(--tint));
  box-shadow: inset 0 0 0 1px rgba(0, 159, 227, .14), 0 1px 2px rgba(14, 56, 98, .06);
}
.channel.urgent i { background: linear-gradient(180deg, rgba(242, 175, 41, .26), rgba(242, 175, 41, .14)); box-shadow: inset 0 0 0 1px rgba(242, 175, 41, .3); }
.tile .ico svg, .ico-badge svg { width: 24px; height: 24px; }
.dropdown i svg, .village i svg { width: 22px; height: 22px; }
.channel i svg { width: 23px; height: 23px; }
.btn svg { width: 1.15em; height: 1.15em; }
.link-arrow svg { width: 15px; height: 15px; }
.checks svg { width: 22px; height: 22px; }

/* Portraits */
.avatar.has-img { padding: 0; overflow: hidden; background: var(--bg-2); }
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.person .avatar { width: 56px; height: 56px; }

/* Document covers */
.cover { position: relative; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; background: var(--bg-2); box-shadow: var(--shadow-sm); margin-bottom: .6rem; }
.cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { a.tile:hover .cover img { transform: scale(1.03); } }

/* Section image (sticky column in long-form pages) */
.media { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--bg-2); margin-top: 2rem; box-shadow: var(--shadow-sm); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media.tall { aspect-ratio: 3 / 4; }

/* Branded newsletter cover */
.nl-cover { position: relative; display: grid; place-items: center; align-content: center; gap: .6rem; background: radial-gradient(120% 90% at 0% 0%, #2bbcf3, var(--blue) 40%, var(--navy)); }
.nl-cover img { position: static !important; width: 58% !important; height: auto !important; object-fit: contain !important; filter: brightness(0) invert(1); }
.nl-cover span { color: rgba(255, 255, 255, .85); font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.media.reveal { margin-top: 2rem; }
@media (max-width: 860px) { .media { aspect-ratio: 16 / 10; } .media.tall { aspect-ratio: 4 / 3; } }
.tiles.docs { grid-template-columns: repeat(3, minmax(0, 240px)); }
@media (max-width: 560px) { .tiles.docs { grid-template-columns: repeat(2, 1fr); } }
.strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: 1.5rem 0; }
.strip .photo { aspect-ratio: 1; border-radius: 8px; box-shadow: none; }
.strip figcaption { padding: 1.6rem .6rem .5rem; font-size: .6875rem; }
.cover { aspect-ratio: 1 / 1.414; }            /* A4, so covers aren't cropped */
.cover img { object-position: top; }
.logo { height: 48px; }
@media (max-width: 520px) { .nav .logo { height: 38px; } }

/* ───────────────────────── Homepage v4 — live-site structure ───────────────────────── */
/* Announcement pill (replaces the live site's annual-report slide) */
.announce {
  display: inline-flex; align-items: center; gap: .6rem; padding: .35rem .8rem .35rem .35rem; margin-bottom: 1.5rem;
  border-radius: 6px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  font-size: .875rem; font-weight: 600; text-decoration: none; color: var(--text);
  transition: transform 160ms var(--ease-out), border-color 200ms;
}
.announce:active { transform: scale(.97); }
.announce-tag { background: var(--blue); color: #fff; border-radius: 6px; padding: .2rem .6rem; font-size: .75rem; letter-spacing: .02em; }
.announce svg { width: 14px; height: 14px; color: var(--text-2); transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .announce:hover { border-color: rgba(0, 159, 227, .45); } .announce:hover svg { transform: translateX(2px); } }
.hero-title { font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.06; letter-spacing: -0.032em; max-width: 16ch; }
.hero-quote .q { display: block; width: 22px; height: 22px; color: var(--blue); margin-bottom: .4rem; }

/* Key areas of focus */
.focus { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: .75rem; }
.focus li {
  display: flex; flex-direction: column; gap: .8rem; padding: 1.1rem 1rem 1.2rem; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--line); font-weight: 600; font-size: .9375rem; line-height: 1.3; letter-spacing: -0.006em;
}
.focus i { width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; color: var(--blue-ink);
  background: linear-gradient(180deg, var(--tint-2), var(--tint)); box-shadow: inset 0 0 0 1px rgba(0, 159, 227, .14); }
.focus i svg { width: 24px; height: 24px; }
@media (max-width: 1100px) { .focus { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .focus { grid-template-columns: repeat(2, 1fr); } .focus li:last-child { grid-column: span 2; } }

/* Impact */
.impact { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.impact-total {
  grid-column: span 2; grid-row: span 2; border-radius: var(--radius); padding: clamp(1.75rem, 3vw, 2.5rem); color: #fff;
  display: flex; flex-direction: column; justify-content: flex-end; gap: .5rem; min-height: 320px; position: relative; overflow: hidden;
  background: radial-gradient(130% 100% at 0% 0%, #2bbcf3 0%, var(--blue) 30%, #0a5f9c 70%, var(--navy) 100%);
}
.impact-total::before { /* faint concentric rings: a quiet nod to "reach" */
  content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(255, 255, 255, .09) 0 1px, transparent 1px 34px);
}
.impact-total .label { font-size: .8125rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.impact-total b { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif; font-size: clamp(3.5rem, 8vw, 6.5rem); line-height: .95; letter-spacing: -0.045em; font-weight: 700; font-variant-numeric: tabular-nums; }
.impact-total .muted { color: rgba(255, 255, 255, .8); max-width: 30ch; }
.impact-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.35rem 1.35rem 1.1rem; }
.impact-card:nth-of-type(1) { grid-row: span 2; }   /* family-like care has the most figures */
.impact-card h3 { display: flex; align-items: center; gap: .6rem; margin: 0 0 .6rem; font-size: 1rem; letter-spacing: -0.01em; }
.impact-card h3 i { width: 34px; height: 34px; border-radius: 6px; display: grid; place-items: center; color: var(--blue-ink); background: linear-gradient(180deg, var(--tint-2), var(--tint)); box-shadow: inset 0 0 0 1px rgba(0, 159, 227, .14); }
.impact-card h3 i svg { width: 19px; height: 19px; }
.impact-card dl { margin: 0; display: grid; }
.impact-card dl > div { padding: .7rem 0; border-top: 1px solid var(--line); display: flex; flex-direction: column-reverse; gap: .1rem; }
.impact-card dd { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif; font-size: 1.75rem; line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; color: var(--blue-ink); font-variant-numeric: tabular-nums; }
.impact-card dt { font-size: .8125rem; line-height: 1.35; color: var(--text-2); }
@media (max-width: 1000px) { .impact { grid-template-columns: repeat(2, 1fr); } .impact-card:nth-of-type(1) { grid-row: auto; } }
@media (max-width: 560px) { .impact { grid-template-columns: 1fr; } .impact-total { grid-column: auto; grid-row: auto; min-height: 240px; } }

/* Programme card icon */
.card-ico { width: 38px; height: 38px; border-radius: 6px; display: grid; place-items: center; color: var(--blue-ink); margin: -2.3rem 0 .35rem; position: relative;
  background: var(--surface); box-shadow: 0 0 0 4px var(--surface), inset 0 0 0 1px rgba(0, 159, 227, .2), var(--shadow-sm); }
.card-ico svg { width: 21px; height: 21px; }

/* Commitment list */
.commit { list-style: none; margin: 0; padding: 0; counter-reset: c; display: grid; gap: .75rem; }
.commit li { display: grid; grid-template-columns: 52px 1fr; gap: 1.1rem; align-items: center; padding: 1.1rem 1.25rem; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); }
.commit span { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; color: #fff; background: linear-gradient(140deg, #2bbcf3, var(--blue) 45%, var(--navy)); font-variant-numeric: tabular-nums; }
.commit p { margin: 0; font-size: 1.0625rem; font-weight: 550; line-height: 1.4; letter-spacing: -0.008em; }

/* SDGs */
.sdg-wrap { display: grid; grid-template-columns: 300px 1fr; gap: 2rem; align-items: center; }
.sdgs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: .6rem; }
.sdgs li { aspect-ratio: 1; border-radius: 8px; background: var(--sdg); color: #fff; padding: .7rem; display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--shadow-sm); }
.sdgs b { font-size: 1.6rem; line-height: 1; font-weight: 800; letter-spacing: -0.03em; }
.sdgs span { font-size: .6875rem; font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: .03em; }
@media (max-width: 900px) { .sdg-wrap { grid-template-columns: 1fr; } .sdgs { grid-template-columns: repeat(3, 1fr); } }

/* Success stories (video cards) */
.stories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.story { text-decoration: none; display: flex; flex-direction: column; gap: .6rem; }
.story .photo { position: relative; aspect-ratio: 16 / 10; box-shadow: none; transition: transform 160ms var(--ease-out); }
.story:active .photo { transform: scale(.98); }
.story img { transition: transform 500ms var(--ease-out); }
.play {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; z-index: 1;
  display: grid; place-items: center; color: #fff;
  background: rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), 0 8px 24px rgba(0, 0, 0, .25);
  transition: transform 200ms var(--ease-out), background-color 200ms;
}
.play svg { width: 24px; height: 24px; margin-left: 3px; }
@media (hover: hover) and (pointer: fine) { .story:hover img { transform: scale(1.03); } .story:hover .play { transform: scale(1.06); background: rgba(255, 255, 255, .32); } }
.story .meta { font-size: .8125rem; color: var(--text-2); font-weight: 550; }
.story .kind { color: var(--blue-ink); font-weight: 650; }
.story h3 { margin: 0; font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.012em; }
@media (max-width: 860px) { .stories { grid-template-columns: 1fr; } }

/* Ways to support */
.ways { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1rem; }
.way { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 220px; text-decoration: none; color: #fff; display: flex; isolation: isolate; transition: transform 160ms var(--ease-out); }
.way:active { transform: scale(.985); }
.way .photo { inset: 0; border-radius: 0; box-shadow: none; z-index: -1; }
.way .photo::after { box-shadow: none; background: linear-gradient(to top, rgba(5, 15, 25, .78) 0%, rgba(5, 15, 25, .25) 55%, transparent 100%); }
.way img { transition: transform 600ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .way:hover img { transform: scale(1.04); } }
.way-body { margin-top: auto; padding: 1.25rem 1.35rem; display: flex; flex-direction: column; gap: .35rem; }
.way-body .h3 { color: #fff; }
.way-body .link-arrow { color: rgba(255, 255, 255, .9); font-size: .9375rem; }
.way-lg { grid-row: span 2; }
.way-lg .way-body { padding: clamp(1.5rem, 3vw, 2.25rem); gap: .6rem; }
.way-lg .eyebrow { color: rgba(255, 255, 255, .85); margin: 0; }
.way-lg .h2 { color: #fff; }
.way-lg p { margin: 0; color: rgba(255, 255, 255, .88); max-width: 32ch; }
.way-lg .btn { align-self: start; margin-top: .75rem; }
@media (max-width: 900px) { .ways { grid-template-columns: 1fr 1fr; grid-template-rows: auto; } .way-lg { grid-column: span 2; grid-row: auto; min-height: 380px; } }
@media (max-width: 560px) { .ways { grid-template-columns: 1fr; } .way-lg { grid-column: auto; } }

/* Trust band */
.trust-band { display: grid; grid-template-columns: auto 1fr auto; gap: 1.25rem; align-items: center; }
.trust-band > i { width: 52px; height: 52px; border-radius: 8px; display: grid; place-items: center; color: var(--blue-ink); background: linear-gradient(180deg, var(--tint-2), var(--tint)); box-shadow: inset 0 0 0 1px rgba(0, 159, 227, .14); }
.trust-band > i svg { width: 26px; height: 26px; }
.trust-band p { margin: .25rem 0 0; font-size: .9375rem; }
@media (max-width: 760px) { .trust-band { grid-template-columns: 1fr; } }

/* Footer newsletter */
.subscribe { display: flex; gap: .5rem; margin-top: .25rem; }
.subscribe input { flex: 1; min-width: 0; font: inherit; font-size: 1rem; padding: .7rem .9rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); color: #fff; }
.subscribe input::placeholder { color: rgba(255, 255, 255, .5); }
.subscribe input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0, 159, 227, .25); }
.subscribe button { width: 46px; flex: none; border: 0; border-radius: 8px; background: var(--blue); color: #fff; cursor: pointer; display: grid; place-items: center; transition: transform 120ms var(--ease-out); }
.subscribe button:active { transform: scale(.94); }
.subscribe button svg { width: 18px; height: 18px; }
.subscribe-done { display: none; color: #fff; font-weight: 600; }
.sent .subscribe { display: none; } .sent .subscribe-done { display: block; }

@media (prefers-reduced-motion: reduce) {
  .announce:active, .story:active .photo, .way:active, .subscribe button:active { transform: none; }
  .story:hover img, .way:hover img, .story:hover .play { transform: none; }
}

.foot-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr 1.3fr; }
@media (max-width: 1060px) { .foot-grid { grid-template-columns: 1fr 1fr 1fr; } .foot-grid > :first-child, .foot-grid > :last-child { grid-column: span 3; } }
@media (max-width: 640px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > :first-child, .foot-grid > :last-child { grid-column: span 2; } }

/* ───────────────────────── Video player (native <dialog>) ─────────────────────────
   Modals stay centred (no trigger-anchored origin). Enter 260ms, exit faster at 180ms. */
html:has(.video-modal[open]) { overflow: hidden; }
.video-modal {
  width: min(1100px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px);
  padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: #000; color: #fff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .08);
  opacity: 0; transform: scale(.96);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), overlay 180ms allow-discrete, display 180ms allow-discrete;
}
.video-modal[open] { opacity: 1; transform: none; transition-duration: 260ms; }
@starting-style { .video-modal[open] { opacity: 0; transform: scale(.96); } }
.video-modal::backdrop {
  background: rgba(5, 10, 20, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);
  transition: background-color 180ms, backdrop-filter 180ms, overlay 180ms allow-discrete, display 180ms allow-discrete;
}
.video-modal[open]::backdrop { background: rgba(5, 10, 20, .78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition-duration: 260ms; }
@starting-style { .video-modal[open]::backdrop { background: rgba(5, 10, 20, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } }
.video-frame { aspect-ratio: 16 / 9; background: #000; }
.video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.video-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .7rem .7rem 1.15rem; }
.video-title { margin: 0; font-weight: 600; font-size: .9375rem; letter-spacing: -0.005em; color: rgba(255, 255, 255, .9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.video-close {
  width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: #fff;
  background: rgba(255, 255, 255, .12); -webkit-tap-highlight-color: transparent; transition: transform 120ms var(--ease-out), background-color 160ms;
}
.video-close svg { width: 18px; height: 18px; }
.video-close:active { transform: scale(.92); }
@media (hover: hover) and (pointer: fine) { .video-close:hover { background: rgba(255, 255, 255, .2); } }
@media (max-width: 560px) { .video-modal { width: calc(100vw - 16px); border-radius: 8px; } }
@media (prefers-reduced-motion: reduce) {
  .video-modal, .video-modal[open] { transform: none; }
  @starting-style { .video-modal[open] { transform: none; } }
  .video-close:active { transform: none; }
}

/* ───────────────────────── Cinematic hero ─────────────────────────
   Timing: each slide holds 7s (progress bar, linear). Crossfade 1.4s ease-in-out (on-screen morph).
   Ken Burns drift is linear (constant motion) and one-way per slide — never an oscillating loop. */
.cine {
  --hold: 7000ms;
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  margin: 0 12px; border-radius: 10px;
  height: clamp(560px, 86svh, 880px);
  background: #0b1622;
  touch-action: pan-y; -webkit-user-select: none; user-select: none;
}
.cine-stage { position: absolute; inset: 0; z-index: -1; }
.cine-slide { position: absolute; inset: 0; margin: 0; opacity: 0; z-index: 0; transition: opacity 1400ms var(--ease-in-out); }
.cine-slide.is-active { opacity: 1; z-index: 2; }
.cine-slide.is-prev { opacity: 1; z-index: 1; transition: none; }  /* stays put underneath while the next one fades in */
.cine-slide img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transform-origin: var(--kb, 50% 50%); will-change: transform; }
.cine-slide.is-active img, .cine-slide.is-prev img { animation: kenburns calc(var(--hold) + 2400ms) linear both; }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.12); } }
.cine.is-paused .cine-slide img, .cine.is-paused .cine-fill { animation-play-state: paused; }

/* Scrim: darkest where the words sit, clear where the photo breathes */
.cine-scrim { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(to top, rgba(4, 12, 22, .88) 0%, rgba(4, 12, 22, .55) 32%, rgba(4, 12, 22, .1) 62%, transparent 75%),
    linear-gradient(to right, rgba(4, 12, 22, .55) 0%, transparent 60%),
    linear-gradient(to bottom, rgba(4, 12, 22, .35), transparent 22%);
}

.cine-content { position: absolute; inset: 0; z-index: 4; display: flex; align-items: flex-end; padding-bottom: 128px; pointer-events: none; }
.cine-content .wrap { width: 100%; }
.cine-content a, .cine-content button { pointer-events: auto; }
.announce-glass { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .28); color: #fff; box-shadow: none;
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); }
.announce-glass svg { color: rgba(255, 255, 255, .8); }
@media (hover: hover) and (pointer: fine) { .announce-glass:hover { border-color: rgba(255, 255, 255, .5); } }

.cine-copies { display: grid; }
.cine-copy { grid-area: 1 / 1; align-self: end; max-width: 760px; }
/* Each line enters in sequence; the outgoing copy leaves quickly. Blur masks the swap. */
.cine-copy > * { opacity: 0; transform: translateY(14px); filter: blur(6px);
  transition: opacity 220ms ease, transform 220ms var(--ease-out), filter 220ms ease; }
.cine-copy.is-active > * { opacity: 1; transform: none; filter: none;
  transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out), filter 700ms var(--ease-out); }
.cine-copy.is-active > :nth-child(1) { transition-delay: 380ms; }
.cine-copy.is-active > :nth-child(2) { transition-delay: 440ms; }
.cine-copy.is-active > :nth-child(3) { transition-delay: 500ms; }
.cine-copy.is-active > :nth-child(4) { transition-delay: 560ms; }
.cine-eyebrow { margin: 0 0 .9rem; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.cine-h {
  margin: 0; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif; font-weight: 700;
  font-size: clamp(2.1rem, 4.8vw, 4rem); line-height: 1.04; letter-spacing: -0.034em; max-width: 18ch;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .25); text-wrap: balance;
}
.cine-p { margin: 1rem 0 0; font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.5; color: rgba(255, 255, 255, .88); max-width: 44ch; font-weight: 450; }
.cine-ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.btn-glass { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); }
@media (hover: hover) and (pointer: fine) { .btn-glass:hover { background: rgba(255, 255, 255, .24); } }
.cine .btn-primary { box-shadow: 0 8px 24px rgba(0, 159, 227, .45); }

/* Controls: progress segments + caption + pause */
.cine-ui { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding-bottom: 28px; }
.cine-ui .wrap { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
.cine-segs { display: flex; gap: 10px; flex: 1; max-width: 640px; }
.cine-seg { flex: 1; min-width: 0; border: 0; background: none; color: inherit; cursor: pointer; padding: 12px 0 0; text-align: left; font: inherit; -webkit-tap-highlight-color: transparent; }
.cine-bar { display: block; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .28); overflow: hidden; }
.cine-fill { display: block; height: 100%; width: 100%; background: #fff; border-radius: inherit; transform: scaleX(0); transform-origin: left; }
.cine-seg.is-done .cine-fill { transform: scaleX(1); }
.cine-seg.is-active .cine-fill { animation: fill var(--hold) linear forwards; }
@keyframes fill { to { transform: scaleX(1); } }
.cine-label { display: block; margin-top: .55rem; font-size: .75rem; font-weight: 600; letter-spacing: .02em; color: rgba(255, 255, 255, .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 300ms; }
.cine-seg.is-active .cine-label { color: #fff; }
@media (hover: hover) and (pointer: fine) { .cine-seg:hover .cine-label { color: rgba(255, 255, 255, .9); } .cine-seg:hover .cine-bar { background: rgba(255, 255, 255, .42); } }
.cine-seg:focus-visible { outline-offset: 4px; }

.cine-right { display: flex; align-items: center; gap: .75rem; }
.cine-cap { display: inline-flex; align-items: center; gap: .45rem; font-size: .8125rem; font-weight: 550; color: rgba(255, 255, 255, .8); transition: opacity 300ms; }
.cine-cap svg { width: 15px; height: 15px; opacity: .8; }
.cine-cap.swap { opacity: 0; }
.cine-pause {
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: #fff;
  background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); -webkit-tap-highlight-color: transparent;
  transition: transform 120ms var(--ease-out), background-color 160ms;
}
.cine-pause svg { width: 16px; height: 16px; grid-area: 1 / 1; transition: opacity 160ms, transform 200ms var(--ease-out); }
.cine-pause .i-playy { opacity: 0; transform: scale(.6); margin-left: 2px; }
.cine.is-paused .cine-pause .i-pause { opacity: 0; transform: scale(.6); }
.cine.is-paused .cine-pause .i-playy { opacity: 1; transform: none; }
.cine-pause:active { transform: scale(.92); }
@media (hover: hover) and (pointer: fine) { .cine-pause:hover { background: rgba(255, 255, 255, .26); } }

/* Facts strip under the hero */
.facts { padding: 1.1rem 0; }
.facts .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 1.5rem; font-size: .9375rem; color: var(--text-2); font-weight: 550; }
.facts span, .facts a { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; }
.facts svg { width: 20px; height: 20px; color: var(--blue); }
.facts a { color: var(--text); }
.facts a svg { color: #b07405; }
@media (hover: hover) and (pointer: fine) { .facts a:hover { color: var(--blue-ink); } }

@media (max-width: 760px) {
  .cine { margin: 0 8px; border-radius: 10px; height: clamp(560px, 82svh, 760px); }
  .cine-content { padding-bottom: 104px; }
  .cine-cap { display: none; }
  .cine-label { display: none; }
  .cine-segs { max-width: none; }
  .cine-ui { padding-bottom: 22px; }
  .cine-ui .wrap { align-items: center; }
  .cine-seg { padding: 16px 0; }
  .facts .wrap { justify-content: flex-start; font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cine-slide { transition: opacity 300ms ease; }
  .cine-slide img { animation: none !important; transform: none; }
  .cine-copy > *, .cine-copy.is-active > * { transform: none; filter: none; transition: opacity 250ms ease; transition-delay: 0ms !important; }
  .cine-pause:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .btn-glass, .announce-glass, .cine-pause { background: rgba(4, 12, 22, .75); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ───────────────────────── Key areas of focus: photo cards ───────────────────────── */
.areas { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 260px; gap: 1rem; }
.area { position: relative; display: flex; border-radius: var(--radius); overflow: hidden; isolation: isolate; text-decoration: none; color: #fff;
  transition: transform 160ms var(--ease-out); }
.area:first-child { grid-column: span 2; }          /* Education leads the set */
.area:active { transform: scale(.985); }
.area .photo { inset: 0; border-radius: 0; box-shadow: none; z-index: -1; }
.area .photo::after { box-shadow: none; background: linear-gradient(to top, rgba(4, 12, 22, .9) 0%, rgba(4, 12, 22, .45) 45%, rgba(4, 12, 22, .05) 75%); }
.area img { transition: transform 600ms var(--ease-out); }
.area-body { margin-top: auto; padding: 1.1rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: .3rem; }
.area-body b { font-size: 1.125rem; line-height: 1.2; letter-spacing: -0.012em; font-weight: 650; }
.area-body span { font-size: .875rem; line-height: 1.4; color: rgba(255, 255, 255, .78); }
.area:first-child .area-body b { font-size: 1.5rem; letter-spacing: -0.02em; }
@media (hover: hover) and (pointer: fine) { .area:hover img { transform: scale(1.05); } }
@media (max-width: 1000px) { .areas { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; } }
@media (max-width: 520px) { .areas { grid-auto-rows: 190px; gap: .6rem; } .area-body { padding: .9rem; } .area-body span { display: none; } .area-body b { font-size: 1rem; } }
@media (prefers-reduced-motion: reduce) { .area:active { transform: none; } .area:hover img { transform: none; } }


/* ───────────────────────── Animation pass (audit fixes) ───────────────────────── */

/* 1. Scroll reveals, site-wide: a visible, unhurried rise as each block scrolls in.
      Marketing-page motion, so it may run longer than UI motion; delay capped at 480ms so a
      grid never keeps you waiting. Entering → strong ease-out. */
/* The reveal moves with the independent `translate` property, so it never collides with the
   `transform` used for hover lifts and press feedback on the same element. `.reveal.reveal`
   outranks component transition lists, and carries their hover/press properties too. */
.reveal.reveal { opacity: 0; translate: 0 28px;
  transition: opacity 800ms var(--ease-out), translate 1000ms var(--ease-out),
              transform 220ms var(--ease-out), box-shadow 280ms ease, border-color 200ms ease, background-color 200ms ease;
  transition-delay: min(var(--d, 0ms), 480ms), min(var(--d, 0ms), 480ms), 0ms, 0ms, 0ms, 0ms; }
.reveal.reveal.in { opacity: 1; translate: none; }
.no-js .reveal.reveal { opacity: 1; translate: none; }

/* 2. Dropdown: 200ms in, 150ms out (the system's response snaps shut) */
.dropdown { transition: opacity 120ms ease, transform 150ms var(--ease-out), filter 120ms ease, visibility 0s 150ms; }
.open > .dropdown { transition: opacity 150ms var(--ease-out), transform 200ms var(--ease-out), filter 150ms ease, visibility 0s 0s; }

/* 8. Press feedback where it was missing */
.nav-trigger, .dropdown a, .cine-seg { transition: transform 120ms var(--ease-out), background-color 160ms ease; }
.nav-trigger:active, .cine-seg:active { transform: scale(.97); }
.dropdown a:active { transform: scale(.98); }

/* Mobile menu: items settle in one after another as the sheet opens; they leave together, instantly */
.menu-sheet li, .menu-sheet h3, .menu-sheet > .btn { opacity: 0; transform: translateY(6px); transition: opacity 120ms ease, transform 120ms ease; }
.menu-open .menu-sheet li, .menu-open .menu-sheet h3, .menu-open .menu-sheet > .btn {
  opacity: 1; transform: none;
  transition: opacity 240ms var(--ease-out), transform 300ms var(--ease-out);
  transition-delay: calc(60ms + var(--i, 0) * 30ms); }

/* Form success: the one rare, emotional moment in a form — let it arrive */
.form.sent .form-done, form.sent .subscribe-done {
  opacity: 1; transform: none; transform-origin: 50% 0;
  transition: opacity 260ms var(--ease-out), transform 320ms var(--ease-out); }
@starting-style { .form.sent .form-done, form.sent .subscribe-done { opacity: 0; transform: translateY(6px) scale(.97); } }

/* Copy button: blur bridges the "Copy" → "Copied" swap */
.copy { transition: transform 120ms var(--ease-out), background-color 200ms ease, color 200ms ease, filter 140ms ease, opacity 140ms ease; }
.copy.swapping { filter: blur(2px); opacity: .5; }

@media (prefers-reduced-motion: reduce) {
  .reveal.reveal { translate: none; transition: opacity 300ms ease, box-shadow 280ms ease, border-color 200ms ease, background-color 200ms ease; transition-delay: 0ms; }
  .menu-sheet li, .menu-sheet h3, .menu-sheet > .btn { transform: none !important; }
  .nav-trigger:active, .cine-seg:active, .dropdown a:active { transform: none; }
  .form.sent .form-done, form.sent .subscribe-done { transform: none; }
  @starting-style { .form.sent .form-done, form.sent .subscribe-done { transform: none; } }
}

/* ───────────────────────── Hover pass ─────────────────────────
   Hover is seen tens of times a visit, so it stays fast and subtle: a 4px lift and a deeper shadow
   on things you can click, a slow photo push-in inside them. Only clickable things lift; information
   (impact figures, the commitment list) stays still so movement keeps meaning "this is a link".
   Mouse/trackpad only: touch screens fire false hovers on tap. */
.card { transition: transform 220ms var(--ease-out), box-shadow 280ms ease; }
.card .photo img, .post .photo img, .village i, .channel i, .tile .ico, .dropdown i { transition: transform 500ms var(--ease-out); }
.btn { transition: transform 160ms var(--ease-out), translate 220ms var(--ease-out), background-color 200ms ease, box-shadow 220ms ease; }
footer a { transition: color 150ms ease; }
.nav-menu > li > a, .nav-trigger { transition: transform 120ms var(--ease-out), background-color 160ms ease, color 160ms ease; }

@media (hover: hover) and (pointer: fine) {
  a.tile:hover, .give-card:hover, a.village:hover, a.channel:hover, .way:hover, .area:hover, .card:hover, .sdg:hover { transform: translateY(-4px); }
  a.tile:hover, .give-card:hover, a.village:hover, a.channel:hover, .card:hover { box-shadow: var(--shadow-lg); border-color: rgba(76, 195, 245, .35); }
  .way:hover, .area:hover { box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
  .card:hover .photo img, .post:hover .photo img { transform: scale(1.04); }
  a.village:hover i, a.channel:hover i, a.tile:hover .ico, .dropdown a:hover i { transform: scale(1.08); }
  .post:hover h3, .story:hover h3 { color: var(--blue-ink); }
  .post h3, .story h3 { transition: color 200ms ease; }
  .btn-primary:hover { translate: 0 -1px; box-shadow: 0 10px 28px rgba(0, 159, 227, .45); }
  .btn-ghost:hover, .btn-glass:hover, .btn-white:hover { translate: 0 -1px; }
  .round:not(:disabled):hover { border-color: rgba(76, 195, 245, .45); }
}
/* Press always wins over hover lift, so a click still feels like a press */
a.tile:active, .give-card:active, a.village:active, a.channel:active, .way:active, .area:active, .card:active, .sdg:active { transform: translateY(-1px) scale(.985); }
.btn:active { translate: none; }

@media (prefers-reduced-motion: reduce) {
  a.tile:hover, .give-card:hover, a.village:hover, a.channel:hover, .way:hover, .area:hover, .card:hover,
  a.tile:active, .give-card:active, a.village:active, a.channel:active, .way:active, .area:active, .card:active, .sdg:hover, .sdg:active { transform: none; }
  .card:hover .photo img, .post:hover .photo img, a.village:hover i, a.channel:hover i, a.tile:hover .ico, .dropdown a:hover i { transform: none; }
  .btn-primary:hover, .btn-ghost:hover, .btn-glass:hover, .btn-white:hover { translate: none; }
}

/* ───────────────────────── Dropdowns v2: text links + featured photo ─────────────────────────
   Opens from the trigger's corner (left menus grow from top-left, right menus from top-right).
   200ms in, 150ms out. Switching between menus while one is open is instant — like tooltips,
   the first open earns the animation, browsing doesn't. */
.dropdown {
  left: 0; margin-left: 0; width: 600px; padding: 10px;
  display: grid; grid-template-columns: 1fr 210px; gap: 10px;
  border-radius: 10px; transform-origin: 24px -8px;
  transform: translateY(-6px) scale(.97);
}
.dropdown.dd-right { left: auto; right: 0; transform-origin: calc(100% - 24px) -8px; }
.nav-menu.instant .dropdown { transition: none !important; }

.dd-links { display: flex; flex-direction: column; padding: 6px 2px 6px 6px; }
.dd-label { margin: 4px 12px 8px; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.dropdown a.dd-link {
  display: block; position: relative; padding: .7rem 2.2rem .7rem .85rem; border-radius: 8px;
  text-decoration: none; transition: background-color 150ms ease, transform 120ms var(--ease-out);
}
.dd-link b { display: block; font-size: .9688rem; font-weight: 600; letter-spacing: -0.01em; transition: color 150ms ease; }
.dd-link small { display: block; margin-top: .1rem; font-size: .8125rem; line-height: 1.35; color: var(--text-2); }
/* A small arrow slides in on hover/focus to say "this goes somewhere" */
.dd-link::after {
  content: ""; position: absolute; right: .9rem; top: 50%; width: 7px; height: 7px; margin-top: -4px;
  border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor; color: var(--blue-ink);
  opacity: 0; transform: translateX(-4px) rotate(45deg); transition: opacity 150ms ease, transform 200ms var(--ease-out);
}
.dropdown a.dd-link:hover, .dropdown a.dd-link:focus-visible { background: var(--tint); }
.dd-link:hover b, .dd-link:focus-visible b, .dd-link[aria-current="page"] b { color: var(--blue-ink); }
.dd-link:hover::after, .dd-link:focus-visible::after { opacity: 1; transform: translateX(0) rotate(45deg); }
.dropdown a.dd-link[aria-current="page"] { background: var(--tint); }
.dropdown a.dd-link:active { transform: scale(.98); }

.dropdown .dd-feature {
  position: relative; display: flex; align-items: flex-end; border-radius: 8px; overflow: hidden; isolation: isolate;
  min-height: 230px; padding: 0; text-decoration: none; color: #fff; background: var(--bg-2);
  transition: transform 120ms var(--ease-out);
}
.dropdown .dd-feature:hover { background: var(--bg-2); }
.dropdown .dd-feature:active { transform: scale(.985); }
.dd-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 500ms var(--ease-out); }
.dd-feature::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(4, 12, 22, .88), rgba(4, 12, 22, .1) 65%); }
.dd-feature span { padding: .95rem 1rem; display: flex; flex-direction: column; gap: .15rem; }
.dd-feature b { font-size: .9688rem; letter-spacing: -0.01em; }
.dd-feature small { font-size: .8125rem; line-height: 1.35; color: rgba(255, 255, 255, .8); }
@media (hover: hover) and (pointer: fine) { .dd-feature:hover img { transform: scale(1.05); } }

/* Menu bar now carries Home too: collapse to the mobile menu a little earlier */
@media (max-width: 1180px) { .nav-menu, .nav .btn-donate-desktop { display: none; } .menu-btn { display: inline-grid; place-items: center; } }
@media (min-width: 1181px) and (max-width: 1280px) { .nav-trigger, .nav-menu > li > a { padding: .55rem .62rem; } }

@media (prefers-reduced-motion: reduce) {
  .dd-link::after { transform: rotate(45deg); }
  .dd-link:hover::after, .dd-link:focus-visible::after { transform: rotate(45deg); }
  .dd-feature:hover img { transform: none; }
}
/* Legibility first: a near-solid panel so page text never competes with menu text */
.dropdown { background: rgba(16, 31, 47, .97); border-color: rgba(255, 255, 255, .08); box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .04); }

/* ───────────────────────── SDG contribution cards ─────────────────────────
   Official goal colours carry each card's identity in a number badge and a top hairline;
   the colour blooms gently on hover. Each card says what SOS actually does for that goal. */
.sdg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.sdg {
  position: relative; display: flex; flex-direction: column; gap: .6rem; padding: 1.4rem 1.4rem 1.3rem;
  border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); overflow: hidden; isolation: isolate;
  text-decoration: none; color: var(--text);
}
.sdg::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--sdg); }
.sdg::after { /* soft glow in the goal's colour, revealed on hover */
  content: ""; position: absolute; z-index: -1; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sdg) 28%, transparent), transparent 70%);
  opacity: .35; transition: opacity 300ms ease;
}
.sdg-top { display: flex; align-items: center; gap: .75rem; margin-bottom: .2rem; }
.sdg-num {
  width: 52px; height: 52px; border-radius: 8px; display: grid; place-items: center; flex: none;
  background: var(--sdg); color: #fff; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--sdg) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.sdg-goal { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.sdg b { font-size: 1.1875rem; line-height: 1.25; letter-spacing: -0.015em; font-weight: 650; }
.sdg p { margin: 0; color: var(--text-2); font-size: .9375rem; line-height: 1.5; }
.sdg .link-arrow { margin-top: auto; padding-top: .5rem; font-size: .875rem; }
@media (hover: hover) and (pointer: fine) {
  .sdg:hover { border-color: color-mix(in srgb, var(--sdg) 55%, transparent); }
  .sdg:hover::after { opacity: 1; }
}
@media (max-width: 900px) { .sdg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sdg-grid { grid-template-columns: 1fr; } .sdg-num { width: 46px; height: 46px; font-size: 1.3rem; } }

/* SDG cards v2: the official UN icon, unaltered (square, no overlays, no recolouring),
   beside what SOS does for that goal. The icon carries the number and name. */
.sdg { display: grid; grid-template-columns: 104px 1fr; gap: 1.2rem; align-items: start; padding: 1.25rem; }
.sdg-icon { width: 104px; height: 104px; display: block; border-radius: 0; box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }
.sdg-body { display: flex; flex-direction: column; gap: .5rem; min-height: 104px; }
.sdg-body p { margin: 0; color: var(--text); font-size: .9688rem; line-height: 1.5; }
.sdg-body .link-arrow { margin-top: auto; padding-top: .25rem; font-size: .875rem; }
@media (max-width: 1100px) and (min-width: 901px) { .sdg { grid-template-columns: 84px 1fr; } .sdg-icon { width: 84px; height: 84px; } .sdg-body { min-height: 84px; } }
@media (max-width: 560px) { .sdg { grid-template-columns: 84px 1fr; gap: 1rem; } .sdg-icon { width: 84px; height: 84px; } .sdg-body { min-height: 84px; } }

/* ───────────────────────── Authenticity pass ─────────────────────────
   Fewer decorative tells: flat brand colours instead of glowing gradients, no ornamental rings,
   glows or novelty graphics. Real photography carries the emotion; colour carries the brand. */
.feature, .give-card.feature, .cta-band.feature { background: var(--navy); }
.cta-photo { position: relative; isolation: isolate; overflow: hidden; }
.cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .55; }
.cta-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14, 56, 98, .96) 0%, rgba(14, 56, 98, .82) 45%, rgba(14, 56, 98, .35) 100%); }
.impact-total { background: var(--blue); min-height: 300px; }
.impact-total::before { display: none; }
.impact-total .muted { color: rgba(255, 255, 255, .9); max-width: 34ch; }
.impact-card h3 { font-size: 1.0625rem; margin-bottom: .4rem; }
.impact-strip { grid-column: 1 / -1; }
.impact-card:nth-of-type(1) { grid-row: span 2; }
.sdg::after { display: none; }
.commit span { background: var(--blue); }
.nl-cover { background: var(--navy); }
.lilangeni { display: none; }
.avatar { background: #1d3a57; }
.person.lead .avatar { background: #1d3a57; }

/* Honest empty state (careers) */
.empty { display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.5rem; border-radius: var(--radius); border: 1px dashed var(--line); background: var(--surface); }
.empty > i { width: 48px; height: 48px; flex: none; border-radius: 8px; display: grid; place-items: center; color: var(--blue-ink); background: var(--tint); }
.empty > i svg { width: 24px; height: 24px; }
.empty p { margin: .35rem 0 0; }
.impact-total { isolation: isolate; background: var(--navy); }
.impact-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.impact-total::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0, 100, 160, .97) 0%, rgba(0, 120, 190, .85) 45%, rgba(0, 159, 227, .45) 100%); }


/* ───────────────────────── Corner scale ─────────────────────────
   10px panels · 8px inner surfaces · 6px controls. Circles only where the object is round
   (portraits, play/pause, carousel arrows). The hero runs edge to edge, square. */
.cine { margin: 0; border-radius: 0; }
@media (max-width: 760px) { .cine { margin: 0; border-radius: 0; } }
.avatar, .round, .cine-pause, .play, .video-close, .menu-btn { border-radius: 50%; }
.cine-bar, .cine-fill { border-radius: 2px; }
.dots i { border-radius: 2px; }
.sdg-icon { border-radius: 0; }

/* ───────────────────────── Full-width layout ─────────────────────────
   Content fills the screen; only the side gutter grows with it (16px on phones → 96px on large
   displays). Reading measure is still protected where it matters: .prose (68ch), ledes, headings. */
:root { --max: none; --gutter: max(clamp(16px, 4.5vw, 96px), env(safe-area-inset-left)); }
.wrap { max-width: none; }
.wrap.narrow { max-width: calc(760px + 2 * var(--gutter)); margin-left: 0; }  /* FAQs: readable, aligned left */
.section-head { max-width: 760px; }
.section-head.row > div { max-width: 760px; }
@media (min-width: 1600px) {
  .tiles.four, .people { grid-template-columns: repeat(4, 1fr); }
  .news, .stories { gap: 1.75rem; }
}

/* ───────────────────────── Dropdown open: an unhurried unroll ─────────────────────────
   Open ≈ 420ms: the panel unrolls downward from the menu bar (clip-path), fading and sharpening;
   then the label, links and photo settle in 45ms apart. Close stays fast (160ms) so the menu
   never blocks the page. Moving to a neighbouring menu skips the panel unroll but keeps the
   content cascade, so every menu still animates without making you wait. */
.dropdown {
  clip-path: inset(0 0 100% 0 round 10px);
  transform: translateY(-8px);
  filter: blur(4px);
  transition: clip-path 160ms var(--ease-out), opacity 140ms ease, transform 160ms var(--ease-out), filter 140ms ease, visibility 0s 160ms;
}
.open > .dropdown {
  clip-path: inset(-40px -60px -80px -60px round 10px);   /* fully open, with room for the shadow */
  transform: none; filter: none;
  transition: clip-path 420ms var(--ease-out), opacity 240ms var(--ease-out), transform 420ms var(--ease-out), filter 300ms var(--ease-out), visibility 0s 0s;
}

/* Contents cascade in after the panel starts to unroll */
.dropdown .dd-label, .dropdown .dd-link, .dropdown .dd-feature {
  opacity: 0; translate: 0 8px;
  transition: opacity 120ms ease, translate 120ms ease;
}
.open > .dropdown .dd-label, .open > .dropdown .dd-link, .open > .dropdown .dd-feature {
  opacity: 1; translate: none;
  transition: opacity 360ms var(--ease-out), translate 420ms var(--ease-out);
}
.open > .dropdown .dd-label { transition-delay: 100ms; }
.open > .dropdown .dd-link:nth-of-type(1) { transition-delay: 140ms; }
.open > .dropdown .dd-link:nth-of-type(2) { transition-delay: 185ms; }
.open > .dropdown .dd-link:nth-of-type(3) { transition-delay: 230ms; }
.open > .dropdown .dd-link:nth-of-type(4) { transition-delay: 275ms; }
.open > .dropdown .dd-feature { transition-delay: 160ms; }
/* The photo settles with a slow push-out as it arrives */
.dropdown .dd-feature img { scale: 1.1; transition: scale 160ms ease, transform 500ms var(--ease-out); }
.open > .dropdown .dd-feature img { scale: 1; transition: scale 900ms var(--ease-out) 120ms, transform 500ms var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .dropdown, .open > .dropdown { clip-path: none; transform: none !important; filter: none !important; }
  .dropdown .dd-label, .dropdown .dd-link, .dropdown .dd-feature { translate: none; }
  .open > .dropdown .dd-label, .open > .dropdown .dd-link, .open > .dropdown .dd-feature { transition: opacity 200ms ease; transition-delay: 0ms; }
  .dropdown .dd-feature img, .open > .dropdown .dd-feature img { scale: 1; transition: none; }
}

/* ───────────────────────── Blue palette ─────────────────────────
   A family of blues instead of one accent on near-black. Depth = shade:
   midnight (page) → navy (alternate sections) → rich blue (feature bands) → lifted blue (cards),
   with sky and cyan for type accents and SOS blue kept for primary actions. */
:root[data-theme="dark"] {
  --ink: #05162a;         /* footer */
  --midnight: #071d33;    /* page */
  --navy-2: #0b2b4c;      /* alternate sections */
  --rich: #0b4a80;        /* feature bands */
  --cerulean: #1484cf;    /* hovers, borders, chips */
  --sky: #8fdcfb;         /* labels, big numbers */
  --cyan: #4fc3f7;        /* links */

  --bg: var(--midnight);
  --bg-2: var(--navy-2);
  --surface: #0f3358;
  --text: #eef6fc;
  --text-2: #a8c4dd;
  --line: rgba(143, 220, 251, .14);
  --blue-ink: var(--cyan);
  --tint: rgba(20, 132, 207, .18);
  --tint-2: rgba(20, 132, 207, .3);
  --glass: rgba(7, 29, 51, .78);
  --glass-strong: rgba(11, 43, 76, .96);
}
body { background: var(--bg); }
.eyebrow, .dd-label, .cine-eyebrow { color: var(--sky); }
.section.alt { background: var(--navy-2); }

/* Feature bands: a richer blue with its own surfaces so cards still separate */
.band-rich { background: var(--rich) !important; --surface: #0d3c69; --line: rgba(255, 255, 255, .14); --text-2: #c7ddf0; --blue-ink: #a6e6ff; --tint: rgba(255, 255, 255, .1); }
.band-rich .eyebrow { color: #cdeefe; }

/* Numbers and highlights in lighter blues */
.stat b, .impact-card dd { color: var(--sky); }
.impact-total::after { background: linear-gradient(to top, rgba(0, 90, 150, .97) 0%, rgba(0, 120, 190, .85) 45%, rgba(0, 159, 227, .5) 100%); }
.commit span { background: var(--cerulean); }
.ico, .ico-badge, .village i, .channel i, .paycard h3 i, .empty > i { background: rgba(20, 132, 207, .22); color: var(--sky); box-shadow: inset 0 0 0 1px rgba(143, 220, 251, .18); }

/* Buttons: SOS blue for the main action, a deeper blue for secondary */
.btn-ghost { background: rgba(20, 132, 207, .22); color: #cdeefe; }
@media (hover: hover) and (pointer: fine) { .btn-ghost:hover { background: rgba(20, 132, 207, .36); } }
.band-rich .btn-ghost { background: rgba(255, 255, 255, .14); color: #fff; }

/* Chrome */
.nav { background: rgba(7, 29, 51, .82); }
.facts { background: var(--navy); }
.subnav { background: rgba(11, 43, 76, .9); }
footer { background: var(--ink); border-top: 1px solid rgba(143, 220, 251, .12); }
.feature, .give-card.feature, .cta-band.feature { background: var(--rich); }
.cta-photo::before { background: linear-gradient(90deg, rgba(11, 74, 128, .97) 0%, rgba(11, 74, 128, .85) 45%, rgba(20, 132, 207, .35) 100%); }

/* Hover borders pick up the cerulean */
@media (hover: hover) and (pointer: fine) {
  a.tile:hover, .give-card:hover, a.village:hover, a.channel:hover, .card:hover { border-color: rgba(20, 132, 207, .7); }
}

/* ───────────────────────── Article / story pages ───────────────────────── */
/* Reading progress: scroll-linked where supported (no JS), JS fallback elsewhere. Constant → linear. */
.read-progress { position: fixed; z-index: 49; left: 0; right: 0; top: var(--nav-h); height: 3px; transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--cerulean), var(--sky)); pointer-events: none; }
@supports (animation-timeline: scroll()) {
  .read-progress { transform: scaleX(0); animation: read-progress linear both; animation-timeline: scroll(root); }
  @keyframes read-progress { to { transform: scaleX(1); } }
}

.article-head { padding-top: clamp(2rem, 5vw, 3.5rem); padding-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.article-head .crumbs li:last-child { max-width: 36ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; margin: 0 0 1.1rem; font-size: .875rem; color: var(--text-2); font-weight: 550; }
.article-meta .kind { padding: .25rem .6rem; border-radius: 6px; background: rgba(20, 132, 207, .22); color: var(--sky); font-weight: 700; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
.article-meta > :not(.kind) + :not(.kind)::before { content: "·"; margin-right: .9rem; opacity: .6; }
.article-title { margin: 0; max-width: 22ch; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.06; letter-spacing: -0.032em; font-weight: 700; text-wrap: balance; }
.article-standfirst { margin: 1.1rem 0 0; max-width: 56ch; font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.5; color: var(--text-2); }

.article-hero { margin: 0 auto; }
.article-hero img { display: block; width: 100%; max-height: 640px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: var(--bg-2); }
.article-hero figcaption, .article-figure figcaption { margin-top: .7rem; font-size: .8125rem; color: var(--text-2); }

.article-layout { display: grid; grid-template-columns: 180px minmax(0, 68ch); gap: clamp(2rem, 6vw, 5rem); padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: 2rem; }
.article-body { font-size: 1.125rem; line-height: 1.7; }
.article-body > p:first-child::first-line { font-weight: 600; color: var(--text); }
.article-body blockquote { margin: 2em 0; padding: .1em 0 .1em 1.4em; border-left: 3px solid var(--cerulean); font-size: 1.3rem; line-height: 1.45; font-weight: 550; letter-spacing: -0.01em; }
.article-body blockquote cite { font-size: .875rem; color: var(--sky); }
.article-figure { margin: 2.2em 0; }
.article-figure img { display: block; width: 100%; max-height: 560px; object-fit: cover; border-radius: 8px; background: var(--bg-2); }
.article-note { margin: 2.2em 0 0; padding: 1.1rem 1.25rem; border-radius: 8px; background: rgba(20, 132, 207, .16); border: 1px solid rgba(143, 220, 251, .2); font-size: 1rem; line-height: 1.55; }
.article-note a { color: var(--sky); font-weight: 600; }

/* Share rail: sticky beside the text on desktop, a row above the text on smaller screens */
.article-rail { position: sticky; top: calc(var(--nav-h) + 32px); align-self: start; display: flex; flex-direction: column; gap: .4rem; }
.rail-label { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); margin-bottom: .2rem; }
.share { display: inline-flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-radius: 6px; border: 1px solid var(--line); background: transparent;
  color: var(--text); font: inherit; font-size: .875rem; font-weight: 550; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms ease, border-color 150ms ease, transform 120ms var(--ease-out); }
.share svg { width: 18px; height: 18px; color: var(--sky); flex: none; }
.share:active { transform: scale(.97); }
.share.done { background: rgba(31, 157, 85, .25); border-color: rgba(31, 157, 85, .6); }
@media (hover: hover) and (pointer: fine) { .share:hover { background: var(--tint); border-color: rgba(20, 132, 207, .6); } }
.rail-back { margin-top: 1rem; display: inline-flex; align-items: center; gap: .4rem; font-size: .875rem; font-weight: 600; color: var(--cyan); text-decoration: none; }
.rail-back svg { width: 16px; height: 16px; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .rail-back:hover svg { transform: translateX(-3px); } }

/* Previous / next */
.article-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-top: 2rem; padding-bottom: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); }
.pn { display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem 1.25rem; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; transition: transform 220ms var(--ease-out), border-color 200ms ease; }
.pn small { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sky); }
.pn b { font-size: 1.0625rem; line-height: 1.3; letter-spacing: -0.01em; }
.pn.next { text-align: right; grid-column: 2; }
.pn:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) { .pn:hover { transform: translateY(-3px); border-color: rgba(20, 132, 207, .7); } }

@media (max-width: 900px) {
  .article-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .article-rail { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .rail-label { margin: 0 .3rem 0 0; }
  .share span { display: none; }
  .share { padding: .55rem; }
  .rail-back { margin: 0 0 0 auto; }
  .article-pn { grid-template-columns: 1fr; }
  .pn.next { grid-column: auto; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .share:active, .pn:active, .pn:hover { transform: none; } }

/* ───────────────────────── Photo gallery ───────────────────────── */
.album-count { font-size: .875rem; font-weight: 600; color: var(--sky); padding: .35rem .7rem; border-radius: 6px; background: rgba(20, 132, 207, .2); }
.album { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(160px, 18vw, 260px); gap: .6rem; }
.album-portrait { grid-template-columns: repeat(5, 1fr); grid-auto-rows: clamp(240px, 26vw, 420px); }
.shot { position: relative; padding: 0; border: 0; border-radius: 8px; overflow: hidden; cursor: zoom-in; background: var(--bg-2); -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out); }
.shot-wide { grid-column: span 2; }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease-out), filter 300ms ease; }
.shot::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(143, 220, 251, .12); border-radius: inherit; pointer-events: none; }
.shot:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) { .shot:hover img { transform: scale(1.04); } }
@media (max-width: 900px) { .album { grid-template-columns: repeat(2, 1fr); } .album-portrait { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .shot-wide { grid-column: span 2; } }

/* Lightbox: modal, so it stays centred. Opens 240ms, closes 160ms; photos crossfade 220ms. */
html:has(.lightbox[open]) { overflow: hidden; }
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #fff;
  opacity: 0; transition: opacity 160ms ease, overlay 160ms allow-discrete, display 160ms allow-discrete; }
.lightbox[open] { opacity: 1; transition-duration: 240ms; }
@starting-style { .lightbox[open] { opacity: 0; } }
.lightbox::backdrop { background: rgba(3, 12, 22, .94); }
.lb-stage { position: absolute; inset: 56px 72px 64px; margin: 0; display: grid; place-items: center; }
.lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  transform: scale(.97); transition: opacity 220ms ease, transform 280ms var(--ease-out), filter 220ms ease; }
.lightbox[open] .lb-stage img { transform: none; }
.lb-stage img.swapping { opacity: 0; filter: blur(4px); }
.lb-stage figcaption { position: absolute; left: 0; right: 0; bottom: -44px; display: flex; justify-content: space-between; font-size: .875rem; color: rgba(255, 255, 255, .8); }
.lb-count { font-variant-numeric: tabular-nums; }
.lb-btn { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; color: #fff;
  background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); -webkit-tap-highlight-color: transparent;
  transition: transform 120ms var(--ease-out), background-color 160ms ease; }
.lb-btn svg { width: 20px; height: 20px; }
.lb-btn:active { transform: scale(.92); }
@media (hover: hover) and (pointer: fine) { .lb-btn:hover { background: rgba(255, 255, 255, .22); } }
.lb-prev { left: 14px; top: 50%; margin-top: -24px; }
.lb-next { right: 14px; top: 50%; margin-top: -24px; }
.lb-close { right: 14px; top: 14px; }
@media (max-width: 640px) { .lb-stage { inset: 64px 12px 72px; } .lb-prev, .lb-next { top: auto; bottom: 14px; margin: 0; } .lb-prev { left: calc(50% - 60px); } .lb-next { right: calc(50% - 60px); } .lb-stage figcaption { bottom: -40px; } }
@media (prefers-reduced-motion: reduce) {
  .lb-stage img, .lightbox[open] .lb-stage img { transform: none; }
  .shot:active, .lb-btn:active { transform: none; }
  .shot:hover img { transform: none; }
}

/* ───────────────────────── Fewer icons ─────────────────────────
   Icons are kept only where they do a job words can't (menus, close, arrows for moving through
   media, play/pause, expand, share marks). Everywhere else, typography and spacing carry it. */
.channel { grid-template-columns: 1fr auto; padding: 1rem 1.2rem; }
.channel b { font-size: 1.0625rem; }
.channel.urgent { border-color: rgba(242, 175, 41, .45); background: linear-gradient(90deg, rgba(242, 175, 41, .1), transparent 60%), var(--surface); }
.village { padding: 1.1rem 1.25rem; }
.village b { font-size: 1.0625rem; }
.tile .h3 { margin-top: .1rem; }
.focus i, .card-ico, .ico, .ico-badge { display: none; }

/* Lists: a short sky-blue rule instead of tick icons */
.checks li { position: relative; display: block; padding-left: 1.25rem; }
.checks li::before { content: ""; position: absolute; left: 0; top: .72em; width: .55rem; height: 2px; border-radius: 2px; background: var(--sky); }

/* Notices: a coloured edge instead of a warning icon */
.notice { border-left: 3px solid #f2af29; }
.notice.info { border-left-color: var(--cerulean); }

/* Facts strip and footer hotline: text only, separated by spacing */
.facts .wrap { gap: .5rem 2.5rem; justify-content: flex-start; }
.facts a { color: var(--sky); }
.foot-safe { gap: 0; }
.trust-band { grid-template-columns: 1fr auto; }

/* Newsletter button is a word now */
.subscribe button { width: auto; padding: 0 1rem; font: inherit; font-size: .9375rem; font-weight: 600; }

/* ───────────────────────── Type scale (calmer) ─────────────────────────
   Headings ~25% smaller; tracking eases as size drops (large type wants tighter tracking,
   smaller type less). Body copy stays 16–17px for comfortable reading. */
.display      { font-size: clamp(2.1rem, 4.6vw, 3.6rem);  letter-spacing: -0.03em; }
.h1           { font-size: clamp(1.9rem, 3.6vw, 2.9rem);  letter-spacing: -0.028em; line-height: 1.08; }
.h2           { font-size: clamp(1.55rem, 2.5vw, 2.2rem); letter-spacing: -0.022em; line-height: 1.15; }
.h3           { font-size: 1.125rem; letter-spacing: -0.01em; }
.lede         { font-size: clamp(1.02rem, 1.15vw, 1.15rem); }
.cine-h       { font-size: clamp(1.85rem, 3.5vw, 3rem);   letter-spacing: -0.028em; line-height: 1.07; max-width: 20ch; }
.cine-p       { font-size: clamp(.98rem, 1.1vw, 1.08rem); }
.article-title { font-size: clamp(1.85rem, 3.3vw, 2.75rem); letter-spacing: -0.026em; line-height: 1.1; }
.article-standfirst { font-size: clamp(1.02rem, 1.3vw, 1.18rem); }
.article-body { font-size: 1.0625rem; }
.article-body blockquote { font-size: 1.15rem; }
.vision blockquote { font-size: clamp(1.6rem, 3.2vw, 2.5rem); letter-spacing: -0.026em; }
.prose h2     { font-size: clamp(1.3rem, 2vw, 1.6rem); }
.prose h3     { font-size: 1.0625rem; }
.prose blockquote { font-size: 1.0625rem; }
.stat b       { font-size: clamp(1.9rem, 3vw, 2.5rem); }
.impact-total b { font-size: clamp(2.8rem, 5.5vw, 4.5rem); }
.impact-card dd { font-size: 1.45rem; }
.area-body b  { font-size: 1rem; }
.area:first-child .area-body b { font-size: 1.25rem; }
.way-lg .h2   { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.sdg-body p, .tile p, .card-body p { font-size: .9375rem; }
.commit p     { font-size: 1rem; }
.timeline p   { font-size: .9688rem; }
.dd-link b    { font-size: .9375rem; }
.section-head .lede { margin-top: .75rem; }
/* The homepage mission sentence is a long heading: keep it readable, not shouty */
#welcome .h2  { font-size: clamp(1.45rem, 2.2vw, 1.95rem); line-height: 1.22; max-width: 30ch; }

/* ───────────────────────── Compact footer ─────────────────────────
   Same content, less height: tighter padding and list rhythm, smaller logo, the hotline as a
   text link instead of a boxed badge, and a slimmer bottom bar. */
footer { padding: 2.25rem 0 calc(1rem + env(safe-area-inset-bottom)); font-size: .875rem; }
footer .logo { height: 36px; }
footer .brand { margin-bottom: .75rem !important; }
footer p { margin: 0 0 .15rem !important; line-height: 1.5; }
footer h4 { margin: 0 0 .6rem; font-size: .75rem; }
footer ul { gap: .3rem; }
footer li a { line-height: 1.45; }
.foot-grid { gap: 1.25rem 2rem; align-items: start; }
.foot-safe { margin-top: .5rem; padding: 0; background: none; color: var(--sky); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .foot-safe:hover { text-decoration: underline; } }
.foot-grid p[style] + p { margin-top: 0; }
footer .subscribe input { padding: .55rem .8rem; font-size: .9375rem; }
footer .subscribe button { padding: 0 .9rem; font-size: .875rem; }
.foot-bottom { margin-top: 1.5rem; padding-top: .9rem; font-size: .75rem; }
@media (max-width: 1060px) { .foot-grid { gap: 1.25rem 1.5rem; } }
@media (max-width: 640px) {
  footer { padding-top: 1.75rem; }
  .foot-grid > div:not(:first-child):not(:last-child) ul { gap: .2rem; }
  .foot-bottom { flex-direction: column; gap: .35rem; margin-top: 1.25rem; }
}
/* Footer link groups: plain headings on desktop, tap-to-open rows on phones */
.foot-col summary { list-style: none; cursor: default; }
.foot-col summary::-webkit-details-marker { display: none; }
.foot-col summary h4 { display: inline; }
@media (min-width: 641px) { .foot-col summary { pointer-events: none; } }
@media (max-width: 640px) {
  .foot-grid { grid-template-columns: 1fr; gap: 0; }
  .foot-grid > :first-child { margin-bottom: 1rem; }
  .foot-grid > :last-child { margin-top: 1rem; grid-column: auto; }
  .foot-col { border-top: 1px solid rgba(143, 220, 251, .12); }
  .foot-col:last-of-type { border-bottom: 1px solid rgba(143, 220, 251, .12); }
  .foot-col summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: .8rem 0; -webkit-tap-highlight-color: transparent; }
  .foot-col summary h4 { margin: 0; }
  .foot-col summary::after { content: ""; width: 7px; height: 7px; border-right: 1.6px solid var(--sky); border-bottom: 1.6px solid var(--sky); transform: rotate(45deg); margin-top: -4px; transition: transform 220ms var(--ease-out); }
  .foot-col[open] summary::after { transform: rotate(-135deg); margin-top: 2px; }
  .foot-col ul { padding-bottom: .9rem; }
}

/* ───────────────────────── Compact dropdown ─────────────────────────
   ~25% smaller: narrower panel, tighter link rows, smaller type, a square photo card.
   Fully opaque so page content can never show through mid-fade. */
.dropdown { width: 460px; padding: 8px; gap: 8px; grid-template-columns: 1fr 150px; border-radius: 10px; background: #0f2238; }
.dd-links { padding: 4px 0 4px 4px; }
.dd-label { margin: 4px 10px 4px; font-size: .625rem; }
.dropdown a.dd-link { padding: .45rem 1.8rem .45rem .65rem; border-radius: 6px; }
.dd-link b { font-size: .875rem; }
.dd-link small { font-size: .75rem; margin-top: 0; }
.dd-link::after { right: .7rem; width: 6px; height: 6px; }
.dropdown .dd-feature { min-height: 0; aspect-ratio: auto; border-radius: 6px; }
.dd-feature span { padding: .7rem .75rem; }
.dd-feature b { font-size: .8125rem; }
.dd-feature small { font-size: .6875rem; }

/* ───────────────────────── Hero v3: bright photo, compact panel ─────────────────────────
   The photo stays bright: the overlay only darkens the bottom edge (for the progress bars)
   and the top (for the menu). The words live in a compact frosted-navy panel, so legibility
   no longer depends on darkening faces. One strong action + a quiet text link. */
.cine-scrim { background:
  linear-gradient(to top, rgba(4, 12, 22, .6) 0%, rgba(4, 12, 22, 0) 30%),
  linear-gradient(to bottom, rgba(4, 12, 22, .35) 0%, transparent 16%); }
.cine-content { padding-bottom: 104px; }
.cine-copies {
  max-width: 600px; padding: 1.4rem 1.6rem 1.5rem; border-radius: 10px;
  background: rgba(7, 29, 51, .74); border: 1px solid rgba(143, 220, 251, .16);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}
.cine-copy { max-width: none; }
.cine-eyebrow { margin-bottom: .6rem; font-size: .6875rem; }
.cine-h { font-size: clamp(1.4rem, 2.3vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; max-width: none; text-shadow: none; }
.cine-p { margin-top: .6rem; font-size: .9688rem; color: rgba(238, 246, 252, .85); }
.cine-ctas { margin-top: 1.25rem; align-items: center; gap: .75rem 1.5rem; }

/* The one strong action */
.btn-hero { min-height: 46px; padding: 0 1.35rem; font-size: .9688rem;
  box-shadow: 0 6px 18px rgba(0, 159, 227, .35), inset 0 1px 0 rgba(255, 255, 255, .25); }
@media (hover: hover) and (pointer: fine) { .btn-hero:hover { background: #12aef0; } }

/* The quiet secondary: underlined text whose arrow nudges on hover */
.hero-link { display: inline-flex; align-items: center; gap: .4rem; color: #fff; font-weight: 600; font-size: .9688rem;
  text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 5px; text-decoration-thickness: 1.5px;
  transition: text-decoration-color 160ms ease; }
.hero-link svg { width: 15px; height: 15px; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .hero-link:hover { text-decoration-color: #fff; } .hero-link:hover svg { transform: translateX(3px); } }
.hero-link:active svg { transform: translateX(1px); }

@media (max-width: 760px) {
  .cine-content { padding-bottom: 84px; }
  .cine-copies { padding: 1.1rem 1.15rem 1.2rem; }
  .cine-h { font-size: 1.35rem; }
}
@media (prefers-reduced-transparency: reduce) { .cine-copies { background: #0b2b4c; -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-reduced-motion: reduce) { .hero-link:hover svg, .hero-link:active svg { transform: none; } }
/* Panel height follows the active slide's copy, settling smoothly between slides */
.cine-copy { align-self: start; }

/* Hero height: about two-thirds of the screen, so the next section peeks in and invites a scroll */
.cine { height: clamp(440px, 66svh, 640px); }
.cine-content { padding-bottom: 92px; }
@media (max-width: 760px) { .cine { height: clamp(480px, 72svh, 600px); } .cine-content { padding-bottom: 78px; } }
.cine-copies { max-width: 540px; padding: 1.2rem 1.4rem 1.3rem; }
.cine-ctas { margin-top: 1.05rem; }

/* Hero text panel moves with the story: each slide sets which side is quiet in its photo,
   and the panel glides there (on-screen movement → ease-in-out). Translate retargets mid-flight,
   so jumping between slides never makes it finish an old trip first. */
.cine-content .wrap { container-type: inline-size; }
.cine-copies { translate: 0 0; transition: translate 900ms var(--ease-in-out); will-change: translate; }
.cine[data-side="right"] .cine-copies { translate: calc(100cqw - 100%) 0; }
@media (max-width: 760px) { .cine[data-side="right"] .cine-copies { translate: 0 0; } }   /* full width on phones: nowhere to move */
@media (prefers-reduced-motion: reduce) { .cine-copies { transition: none; } }

/* Smaller hero panel: lets the photo lead */
.cine-copies { max-width: 440px; padding: 1rem 1.15rem 1.1rem; }
.cine-eyebrow { font-size: .625rem; margin-bottom: .45rem; }
.cine-h { font-size: clamp(1.2rem, 1.75vw, 1.55rem); line-height: 1.18; letter-spacing: -0.016em; }
.cine-p { font-size: .875rem; margin-top: .45rem; line-height: 1.45; }
.cine-ctas { margin-top: .9rem; gap: .6rem 1.15rem; }
.btn-hero { min-height: 40px; padding: 0 1.05rem; font-size: .875rem; }
.hero-link { font-size: .875rem; text-underline-offset: 4px; }
.hero-link svg { width: 13px; height: 13px; }
@media (max-width: 760px) { .cine-copies { max-width: none; } .cine-h { font-size: 1.2rem; } }

/* ───────────────────────── Hero v4: shorter, quieter controls ─────────────────────────
   The panel is centred vertically so it never crowds the controls; the controls become one
   small cluster (dashes + pause) bottom-left, with the photo caption bottom-right. */
.cine { height: clamp(400px, 58svh, 560px); }
.cine-content { align-items: center; padding: 16px 0 44px; }
.cine-scrim { background:
  linear-gradient(to top, rgba(4, 12, 22, .45) 0%, rgba(4, 12, 22, 0) 22%),
  linear-gradient(to bottom, rgba(4, 12, 22, .3) 0%, transparent 14%); }

.cine-ui { padding-bottom: 14px; }
.cine-ui .wrap { align-items: center; gap: 12px; }
.cine-right { display: contents; }                 /* lets pause sit beside the dashes */
.cine-segs { flex: none; max-width: none; gap: 6px; order: 1; }
.cine-seg { flex: none; width: 28px; padding: 10px 0; }
.cine-label { display: none; }
.cine-bar { height: 2px; background: rgba(255, 255, 255, .35); }
.cine-pause { order: 2; width: 28px; height: 28px; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.cine-pause svg { width: 11px; height: 11px; }
.cine-cap { order: 3; margin-left: auto; font-size: .75rem; color: rgba(255, 255, 255, .75); }
@media (hover: hover) and (pointer: fine) { .cine-seg:hover .cine-bar { background: rgba(255, 255, 255, .6); } }
@media (max-width: 760px) {
  .cine { height: clamp(440px, 64svh, 560px); }
  .cine-content { padding-bottom: 48px; }
  .cine-cap { display: none; }
}

/* Hero: taller again (about three-quarters of the screen); compact controls stay */
.cine { height: clamp(560px, 76svh, 780px); }
.cine-content { align-items: flex-end; padding: 16px 0 60px; }
@media (max-width: 760px) { .cine { height: clamp(560px, 80svh, 720px); } .cine-content { padding-bottom: 56px; } }

/* ───────────────────────── Flat, printed-page layout ─────────────────────────
   Content sits directly on the section background: no card panels, borders, rounded corners
   or shadows. Items are separated by a hairline rule above them, the way a printed page uses
   rules, and photos are set square and flush. Controls (buttons, inputs) keep their small radius. */
:root { --rule: 1px solid var(--line); }

/* 1. Text cards → open blocks with a top rule */
.tile, .card, .village, .paycard, .give-card:not(.feature), .impact-card, .person, .commit li,
.sdg, .pn, .empty, .focus li, .form.paycard, .channel {
  background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  border-top: var(--rule) !important; padding-left: 0 !important; padding-right: 0 !important;
}
.tile, .give-card:not(.feature), .impact-card, .sdg, .pn, .person { padding-top: 1.1rem !important; }
.channel, .village { padding: .95rem 0 !important; }
.channel.urgent { border-top: 2px solid #f2af29 !important; }
.form.paycard { padding-top: 1.25rem !important; }
.paycard { padding-top: 1.1rem !important; }
.sdg::before { left: 0; right: auto; width: 56px; height: 3px; top: -1px; }    /* a short goal-colour rule */
.commit li { padding-top: .9rem !important; padding-bottom: .4rem !important; }
.card-body { padding: 1rem 0 0; }
.pn.next { text-align: right; }

/* Grids of open blocks breathe a little more */
.tiles, .people, .sdg-grid, .impact, .give, .channels { column-gap: clamp(1.25rem, 2.5vw, 2.25rem); }
.channels { gap: 0; }

/* Stats: numbers set on the page, divided by hairlines, no outer frame */
.footprint { background: transparent; border: 0; border-radius: 0; gap: 0; }
.footprint .stat { background: transparent; border-top: var(--rule); padding: 1.1rem 1.25rem 0 0; }

/* 2. Photos: square and flush */
.photo, .media, .cover, .shot, .area, .way, .impact-total, .feature, .cta-band, .dd-feature,
.article-hero img, .article-figure img, .card .photo, .post .photo, .story .photo, .avatar.has-img,
.banner .photo, .strip .photo, .nl-cover {
  border-radius: 0 !important; box-shadow: none !important;
}
.photo::after, .shot::after { box-shadow: none; }

/* 3. Notices: a coloured edge on the page, no tinted box */
.notice, .article-note { background: transparent; border: 0; border-left: 3px solid #f2af29; border-radius: 0; padding: .2rem 0 .2rem 1rem; }
.notice.info, .article-note { border-left-color: var(--cerulean); }

/* 4. Hover: open blocks don't lift like objects; the rule and title take the colour instead */
@media (hover: hover) and (pointer: fine) {
  a.tile:hover, .give-card:not(.feature):hover, a.village:hover, a.channel:hover, .card:hover, .sdg:hover, .pn:hover { transform: none; }
  a.tile:hover, .give-card:not(.feature):hover, a.village:hover, a.channel:hover, .card:hover, .pn:hover { border-top-color: var(--cyan) !important; }
  a.tile:hover .h3, a.village:hover b, a.channel:hover b, .card:hover .h3, .pn:hover b, .give-card:not(.feature):hover .h3 { color: var(--cyan); }
}
a.tile:active, .give-card:not(.feature):active, a.village:active, a.channel:active, .card:active, .sdg:active, .pn:active { transform: none; }
.tile .h3, .village b, .channel b, .card .h3, .pn b { transition: color 160ms ease; }
.map, .map .label { border-radius: 0 !important; }

/* ───────────────────────── Phone fit (audit fixes) ───────────────────────── */
/* Grid items may shrink below their content width (prevents forms/long words pushing the page wider) */
.split-2 > *, .tiles > *, .news > *, .stories > *, .ways > *, .areas > *, .impact > *, .sdg-grid > *,
.give > *, .people > *, .foot-grid > *, .form, .field, .two > * { min-width: 0; }
.field input, .field select, .field textarea { width: 100%; max-width: 100%; }
.field input[type="file"] { font-size: .875rem; }
.prose, .article-body, .channel b, .channel small { overflow-wrap: anywhere; }

@media (max-width: 640px) {
  /* Footer: a true single column, so nothing spans phantom columns */
  .foot-grid > * { grid-column: auto !important; }
  /* Hero label readable on small screens */
  .cine-eyebrow { font-size: .75rem; }
}

/* Touch screens: controls keep their small look but get finger-sized hit areas (≈44px) */
@media (pointer: coarse) {
  .cine-seg { padding: 20px 0; }
  .cine-segs { gap: 8px; }
  .cine-pause { width: 40px; height: 40px; }
  .copy { min-height: 40px; min-width: 76px; }
  .round { width: 48px; height: 48px; }
  .share { min-height: 44px; }
  .subnav a { padding: .6rem .95rem; }
  footer li a { display: inline-block; padding: .3rem 0; }
}
/* Inline-defined grids collapse properly on phones too */
@media (max-width: 640px) {
  .tiles[style*="grid-template-columns"], .give[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .footprint[style*="grid-template-columns"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .footprint[style*="grid-template-columns"] .stat { padding-right: .6rem; }
  .footprint[style*="grid-template-columns"] .stat b { font-size: 1.6rem; }
  .give .feature { min-height: 0; }
}
@media (max-width: 900px) { .footprint[style*="grid-template-columns"] .stat:last-child { grid-column: auto; } }
/* Partner names: flat list with hairlines, no box */
.logos { background: transparent; border: 0; border-radius: 0; gap: 0; border-top: 1px solid var(--line); }
.logos span { background: transparent; border-bottom: 1px solid var(--line); justify-content: start; text-align: left; place-items: center start; padding: 1.1rem 0; min-height: 0; }

/* ───────────────────────── Hero: editorial slideshow ─────────────────────────
   Full-bleed photos crossfade (1.4s, ease-in-out) with a slow one-way drift (linear);
   headline, actions and proof are fixed on the darkened lower band, never over faces. */
.ed-hero { --hold: 7000ms; position: relative; isolation: isolate; height: clamp(600px, 88svh, 860px); overflow: hidden; color: #fff; display: flex; align-items: flex-end; background: #051222; }
.ed-slides { position: absolute; inset: 0; z-index: 0; }
.ed-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 30%); transform-origin: var(--kb, 50% 50%);
  opacity: 0; transition: opacity 1400ms var(--ease-in-out); }
.ed-img.is-active { opacity: 1; z-index: 2; }
.ed-img.is-prev { opacity: 1; z-index: 1; transition: none; }
.ed-img.is-active, .ed-img.is-prev { animation: kenburns calc(var(--hold) + 2400ms) linear both; }
.ed-hero.is-paused .ed-img, .ed-hero.is-paused .ed-dash span { animation-play-state: paused; }
.ed-shade { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(5, 18, 34, .94) 0%, rgba(5, 18, 34, .78) 26%, rgba(5, 18, 34, .2) 50%, transparent 62%),
              linear-gradient(to bottom, rgba(5, 18, 34, .45), transparent 18%); }
.ed-body { position: relative; z-index: 2; width: 100%; }
.ed-main { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 5vw, 5rem); align-items: end; padding-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.ed-title { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif; font-weight: 700;
  font-size: clamp(2.6rem, 6.2vw, 5.6rem); line-height: .98; letter-spacing: -0.04em; text-shadow: 0 2px 24px rgba(0, 0, 0, .3); }
.ed-side p { margin: 0; max-width: 40ch; font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.55; color: rgba(238, 246, 252, .9); }
.ed-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 1.4rem; }
.ed-ctas .btn-hero { min-height: 48px; padding: 0 1.6rem; font-size: 1rem; }
.ed-ctas .hero-link { font-size: 1rem; }
.ed-proof { margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255, 255, 255, .22); }
.ed-proof > div { display: flex; flex-direction: column-reverse; gap: .1rem; padding: 1.1rem 1.25rem 1.4rem 0; }
.ed-proof > div + div { padding-left: 1.25rem; border-left: 1px solid rgba(255, 255, 255, .14); }
.ed-proof dd { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif; font-size: clamp(1.4rem, 2vw, 1.9rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.ed-proof dt { font-size: .8125rem; color: rgba(238, 246, 252, .75); }
.ed-proof a { color: inherit; text-decoration: none; }
.ed-proof > div:last-child dd { color: #f2af29; }
.ed-main > *, .ed-proof { animation: edUp 900ms var(--ease-out) both; }
.ed-main > :nth-child(2) { animation-delay: 120ms; } .ed-proof { animation-delay: 240ms; }
@keyframes edUp { from { opacity: 0; transform: translateY(18px); } }

/* Controls: one small cluster, top-right, out of the photo's way */
.ed-ui { position: absolute; z-index: 3; top: 20px; right: var(--gutter); display: flex; align-items: center; gap: 12px; }
.ed-cap { font-size: .75rem; font-weight: 550; color: rgba(255, 255, 255, .8); transition: opacity 300ms ease; text-shadow: 0 1px 6px rgba(0, 0, 0, .4); }
.ed-cap.swap { opacity: 0; }
.ed-dashes { display: flex; gap: 6px; }
.ed-dash { width: 26px; padding: 10px 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 120ms var(--ease-out); }
.ed-dash span { display: block; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .35); position: relative; overflow: hidden; }
.ed-dash span::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.ed-dash.is-done span::after { transform: scaleX(1); }
.ed-dash.is-active span::after { animation: fill var(--hold) linear forwards; }
.ed-hero.is-paused .ed-dash.is-active span::after { animation-play-state: paused; }
.ed-dash:active { transform: scale(.94); }
.ed-pause { width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: #fff;
  background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); -webkit-tap-highlight-color: transparent; transition: transform 120ms var(--ease-out), background-color 160ms ease; }
.ed-pause svg { width: 11px; height: 11px; grid-area: 1 / 1; transition: opacity 160ms ease, transform 200ms var(--ease-out); }
.ed-pause .i-playy { opacity: 0; transform: scale(.6); margin-left: 1px; }
.ed-hero.is-paused .ed-pause .i-pause { opacity: 0; transform: scale(.6); }
.ed-hero.is-paused .ed-pause .i-playy { opacity: 1; transform: none; }
.ed-pause:active { transform: scale(.92); }
@media (hover: hover) and (pointer: fine) { .ed-pause:hover { background: rgba(255, 255, 255, .26); } .ed-dash:hover span { background: rgba(255, 255, 255, .6); } }
@media (pointer: coarse) { .ed-dash { padding: 18px 0; } .ed-pause { width: 40px; height: 40px; } }

@media (max-width: 860px) {
  .ed-hero { height: auto; min-height: 640px; }
  .ed-slides { bottom: auto; height: 360px; }
  .ed-shade { background: linear-gradient(to bottom, rgba(5, 18, 34, .4) 0, transparent 60px, transparent 250px, #051222 360px); }
  .ed-body { padding-top: 330px; }
  .ed-main { grid-template-columns: 1fr; gap: 1rem; }
  .ed-proof { grid-template-columns: 1fr 1fr; }
  .ed-proof > div { padding: .9rem 0 !important; border-left: 0 !important; }
  .ed-proof > div:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .14); }
  .ed-cap { display: none; }
  .ed-ui { top: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .ed-img { transition: opacity 300ms ease; }
  .ed-img.is-active, .ed-img.is-prev { animation: none; }
  .ed-main > *, .ed-proof { animation: none; }
  .ed-pause:active, .ed-dash:active { transform: none; }
}

/* Dash fill is now an element driven by the Web Animations API (works in every browser, incl. Safari) */
.ed-dash span::after { display: none; }
.ed-dash i { position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.ed-dash.is-done i { transform: scaleX(1); }

/* Per-slide copy: stacked in one grid cell; the outgoing copy leaves fast (200ms),
   the incoming one rises in line by line, with a light blur masking the swap. */
.ed-copies { display: grid; grid-template-columns: none; padding-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.ed-copies > .ed-copy { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 5vw, 5rem); align-items: end; animation: none; }
.ed-copy .ed-title, .ed-copy .ed-side { opacity: 0; transform: translateY(16px); filter: blur(6px);
  transition: opacity 200ms ease, transform 200ms var(--ease-out), filter 200ms ease; }
.ed-copy.is-active .ed-title, .ed-copy.is-active .ed-side { opacity: 1; transform: none; filter: none;
  transition: opacity 700ms var(--ease-out) 350ms, transform 900ms var(--ease-out) 350ms, filter 700ms var(--ease-out) 350ms; }
.ed-copy.is-active .ed-side { transition-delay: 470ms; }
.ed-copy:not(.is-active) { pointer-events: none; }
@media (max-width: 860px) { .ed-copies > .ed-copy { grid-template-columns: 1fr; gap: 1rem; } }
@media (prefers-reduced-motion: reduce) {
  .ed-copy .ed-title, .ed-copy .ed-side, .ed-copy.is-active .ed-title, .ed-copy.is-active .ed-side { transform: none; filter: none; transition: opacity 300ms ease; }
}
/* Hero without the proof strip: copy sits a little higher off the bottom edge */
.ed-copies { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
@media (max-width: 860px) { .ed-hero { min-height: 0; } .ed-copies { padding-bottom: 2.25rem; } }
/* Donate buttons carry the hand-holding-heart icon */
.btn svg[aria-hidden] { width: 1.15em; height: 1.15em; flex: none; }

/* ───────────────────────── Passing the Baton ───────────────────────── */
.baton-intro { max-width: 68ch; margin-top: 1.1rem; color: var(--text-2); font-size: 1.0625rem; line-height: 1.65; }
.baton-intro p { margin: 0 0 .8em; }
.baton-intro b { color: var(--text); }
.product-need-top { width: 100vw; max-width: none; margin: clamp(1.75rem, 4vw, 3rem) 0 0 calc(50% - 50vw); padding: 1.4rem var(--gutter) 0; border-top: 1px solid var(--line); }
.product-need-top .h2 { margin-bottom: 1rem; }
.product-need-top .prose { max-width: none; }
.baton-motto { margin: 1.25rem 0 0; font-weight: 650; font-size: 1.0625rem; color: var(--sky); letter-spacing: -0.005em; }
.ready { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .75rem; margin-top: 1.5rem; }
.ready .hero-link { margin-left: .5rem; }
.statement { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.4; color: var(--text) !important; font-weight: 550; letter-spacing: -0.01em; margin-top: .35rem !important; }

/* The connected approach: a chain of steps joined by arrows */
.chain { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); counter-reset: ch; }
.chain li { position: relative; padding: 1.1rem 1.75rem 1.1rem 0; border-top: 2px solid var(--cerulean); font-weight: 700; font-size: 1rem; line-height: 1.3; letter-spacing: -0.01em; text-transform: uppercase; color: var(--sky); }
.chain li::before { counter-increment: ch; content: counter(ch, decimal-leading-zero); display: block; font-size: .75rem; letter-spacing: .08em; color: var(--text-2); margin-bottom: .35rem; }
.chain li:not(:last-child)::after { content: "→"; position: absolute; right: .6rem; top: 1.55rem; font-size: 1.25rem; color: var(--cerulean); text-transform: none; }
.chain li:last-child { color: var(--text); border-top-color: #f2af29; }

/* Index of the four batons */
.baton-index { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.baton-index a { display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1rem 1rem 0; text-decoration: none; font-weight: 650; font-size: 1.0625rem; letter-spacing: -0.01em; transition: color 160ms ease; }
.baton-index span { font-size: .75rem; letter-spacing: .08em; color: var(--sky); font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .baton-index a:hover { color: var(--cyan); } }

/* One baton: name & photo | what it supports | price tiers & actions */
.baton-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.baton-num { display: block; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif; font-size: clamp(2.5rem, 4vw, 3.4rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--cerulean); margin-bottom: .8rem; }
.baton-head .eyebrow { margin-bottom: .5rem; }
.baton-name { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif; font-size: clamp(1.45rem, 2.3vw, 2rem); line-height: 1.12; letter-spacing: -0.02em; font-weight: 700; }
.baton-en { margin: .4rem 0 0; font-style: italic; color: var(--text-2); }
.baton-photo { margin: 1.5rem 0 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-2); }
.baton-photo img { width: 100%; height: 100%; object-fit: cover; }
.baton-lede { margin: 0 0 .4rem; font-size: 1.25rem; font-weight: 650; letter-spacing: -0.012em; }
.baton-body .muted { margin: 0 0 .9rem; }
.baton-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.baton-list li { padding: .6rem 0; border-bottom: 1px solid var(--line); font-size: .9688rem; }
.tiers { border-top: 2px solid var(--cerulean); }
.tier { display: grid; grid-template-columns: 1fr auto; gap: .1rem 1rem; align-items: baseline; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.tier-label { font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.tier-price { text-align: right; white-space: nowrap; color: var(--text-2); font-size: .9375rem; }
.tier-price small { font-size: .75rem; }
.tier-price b { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif; font-size: 1.5rem; letter-spacing: -0.03em; color: var(--sky); }
.tier-sub { grid-column: 1 / -1; font-size: .8125rem; color: var(--text-2); }
.tier:has(.tier-price) .tier-sub { text-align: right; }
.baton-note { margin: 0; padding-top: .9rem; border-top: 2px solid var(--cerulean); color: var(--text-2); }
.baton-tagline { margin: 1.25rem 0 0; font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; color: var(--text); }
.baton-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1.1rem; }
@media (max-width: 1000px) { .baton-grid { grid-template-columns: 1fr 1fr; } .baton-head { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; align-items: end; } .baton-photo { grid-column: 2; grid-row: 1 / span 4; margin: 0; } }
@media (max-width: 680px) {
  .baton-grid, .baton-head { grid-template-columns: 1fr; }
  .baton-photo { grid-column: auto; grid-row: auto; margin-top: 1.25rem; }
  .chain { grid-template-columns: 1fr; }
  .chain li { padding-right: 0; }
  .chain li:not(:last-child)::after { content: "↓"; right: 0; }
  .baton-index { grid-template-columns: 1fr 1fr; }
}

/* Six steps from giving to impact */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1.25rem, 3vw, 2.5rem); counter-reset: st; }
.steps li { padding: 1.1rem 0 1.4rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: .35rem; }
.steps li::before { counter-increment: st; content: counter(st, decimal-leading-zero); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.03em; color: var(--cerulean); }
.steps b { font-size: 1.0625rem; letter-spacing: -0.01em; }
.steps span { color: var(--text-2); font-size: .9375rem; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* "What matters most to you?" choices */
.choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(1.25rem, 2.5vw, 2rem); }
.choice { display: flex; flex-direction: column; gap: .4rem; padding-top: 1.1rem; border-top: 2px solid var(--cerulean); }
.choice-want { margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.012em; }
.choice-baton { margin: 0; color: var(--text-2); font-size: .9375rem; }
.choice-baton b { color: var(--sky); }
.choice-price { margin: .3rem 0 .9rem; font-size: .9375rem; color: var(--text-2); flex: 1; }
.choice-price b { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif; font-size: 1.6rem; letter-spacing: -0.03em; color: var(--text); }
.choice .btn { align-self: start; }
@media (max-width: 1000px) { .choices { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 560px) { .choices { grid-template-columns: 1fr; } }

/* Simple two-column ruled list */
.list-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; border-top: 1px solid var(--line); }
.list-grid li { padding: .7rem 0; border-bottom: 1px solid var(--line); font-size: .9688rem; }
@media (max-width: 520px) { .list-grid { grid-template-columns: 1fr; } }

/* "Find the right fit" rows */
.fit { border-top: 1px solid var(--line); }
.fit-row { display: grid; grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1fr) minmax(0, 1.1fr); gap: .5rem 1.5rem; align-items: center; padding: 1.15rem 0; border-bottom: 1px solid var(--line); text-decoration: none; transition: color 160ms ease; }
.fit-need { font-weight: 650; letter-spacing: -0.01em; }
.fit-arrow { color: var(--cerulean); font-size: 1.25rem; }
.fit-baton b { display: block; color: var(--sky); }
.fit-baton small { color: var(--text-2); font-size: .8125rem; }
.fit-price { color: var(--text-2); font-size: .9375rem; }
@media (hover: hover) and (pointer: fine) { .fit-row:hover .fit-need { color: var(--cyan); } }
@media (max-width: 760px) { .fit-row { grid-template-columns: 1fr; } .fit-arrow { display: none; } }

/* Sponsorship team contacts */
.team { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; border-top: 1px solid var(--line); }
.team > div { display: flex; flex-direction: column; gap: .15rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.team-role { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.team a { color: var(--sky); font-weight: 650; text-decoration: none; overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) { .team a:hover { text-decoration: underline; } }
@media (max-width: 560px) { .team { grid-template-columns: 1fr; } }

/* Closing band: three actions */
.cta-actions { display: flex; flex-direction: column; gap: .6rem; align-items: stretch; min-width: 220px; }
.cta-actions .btn { justify-content: center; }
@media (max-width: 760px) { .cta-actions { flex-direction: row; flex-wrap: wrap; min-width: 0; } }

/* ═════════════════════════ SOS brand book (Brand visual guidelines, Jan 2022) ═════════════════════════
   Backgrounds are only white and Brand blue 20%. Dark blue is for text and separator lines,
   Brand blue for the most important details (bubble, title lines, numbers), red for small accents.
   Type: Aktiv Grotesk, with Roboto as the brand's digital fallback. Sentence case, no all caps.
   Signature shapes: the speech bubble (one big curve, bottom-right), the title line, the background curve. */
:root[data-theme="light"] {
  --brand: #00abec; --brand-50: #84ccf1; --brand-20: #cde8f8; --brand-10: #e4f3fb;
  --dark: #1c325d; --dark-2: #78849e; --dark-3: #b3c3cf; --red: #de5a6c; --red-20: #f1c9c6;
  --font: "Aktiv Grotesk", Roboto, Arial, sans-serif;

  --blue: var(--brand); --blue-ink: var(--dark); --navy: var(--dark); --sun: var(--red);
  --bg: #fff; --bg-2: var(--brand-20); --surface: #fff;
  --text: var(--dark); --text-2: #4a5a7a; --line: rgba(28, 50, 93, .16);
  --tint: rgba(0, 171, 236, .12); --tint-2: rgba(0, 171, 236, .22);
  --glass: rgba(255, 255, 255, .9); --glass-strong: rgba(255, 255, 255, .97); --glass-edge: rgba(28, 50, 93, .08);
  --shadow-sm: 0 0 0 1px rgba(28, 50, 93, .04), 0 2px 12px rgba(28, 50, 93, .10);
  --shadow-lg: 0 0 0 1px rgba(28, 50, 93, .04), 0 18px 48px rgba(28, 50, 93, .16);
  /* the old dark-palette names now point at brand colours */
  --ink: var(--brand-20); --midnight: #fff; --navy-2: var(--brand-20); --rich: var(--brand-20);
  --cerulean: var(--brand); --sky: var(--dark); --cyan: var(--dark);
  /* bubble: 10 × 12.5 with a 7 × 7 curve; background curve is smaller (4.5) */
  --bubble-r: 70% 56%;
  --curve: clamp(56px, 9vw, 150px);
  --glow: 0 0 18px rgba(0, 0, 0, .14);
  color-scheme: light;
}

/* ── Type ── */
body *:not(#\#) { font-family: var(--font); text-transform: none; }
body { background: #fff; color: var(--text); font-family: var(--font); }
body :is(.h1, .h2, .display, h1, h2, .ed-title, .baton-name, .vision blockquote):not(#\#) { font-weight: 500; letter-spacing: 0; line-height: 1.15; }
body :is(.h3, h3, h4):not(#\#) { font-weight: 700; letter-spacing: 0; }
body :is(.stat b, .impact-total b, .impact-card dd, .baton-num, .tier-price b, .choice-price b, .steps li::before, .commit span):not(#\#) { font-weight: 900; letter-spacing: 0; }
body :is(.stat b, .impact-card dd, .baton-num, .tier-price b, .steps li::before):not(#\#) { color: var(--brand); }
p, li, dd, .lede { letter-spacing: 0; }
.lede { color: var(--text-2); }
/* Quotes: Times New Roman italic, with an oversized bold quotation mark */
body :is(blockquote, .quote, .hero-quote p):not(#\#):not(#\#) { font-family: "Times New Roman", Times, serif; font-style: italic; font-weight: 400; }

/* Eyebrows become small sub-titles with a short brand line (no caps, no tracking) */
.eyebrow, .dd-label, .cine-eyebrow, .menu-sheet h3, footer h4, .rail-label, .pn small, .sdg-goal, .tier-label, .team-role, .impact-total .label {
  letter-spacing: 0 !important; text-transform: none !important; }
.eyebrow { display: flex; align-items: center; gap: .6rem; color: var(--dark); font-size: .9375rem; font-weight: 700; }
.eyebrow::before { content: ""; width: 28px; height: 3px; flex: none; background: var(--brand); }
.band-rich .eyebrow, .feature .eyebrow { color: var(--dark); }

/* Title line: a brand-blue line runs in from the page edge to the title (it may cross the margin) */
:is(.section-head > .h2:first-child, .section-head > div > .h2:first-child, .sticky-col > .h2:first-child, .page-hero .h1) { position: relative; }
:is(.section-head > .h2:first-child, .section-head > div > .h2:first-child, .sticky-col > .h2:first-child, .page-hero .h1)::before {
  content: ""; position: absolute; right: 100%; margin-right: .4em; top: .58em; width: var(--gutter); height: 3px; background: var(--brand); }
.page-hero .eyebrow::before { display: none; }

/* Bullets are always lines: an em-dash shape in brand blue */
.checks li::before { width: .9rem; height: 2px; top: .75em; background: var(--brand); border-radius: 0; }
.checks li > svg { display: none; }
.baton-list li, .list-grid li { position: relative; padding-left: 1.6rem; }
.baton-list li::before, .list-grid li::before { content: ""; position: absolute; left: 0; top: 1.25em; width: .9rem; height: 2px; background: var(--brand); }

/* ── Colour surfaces: white and Brand blue 20% only ── */
.section.alt, .band-rich { background: var(--brand-20) !important; border-bottom-right-radius: var(--curve); }
.band-rich { --surface: #fff; --line: rgba(28, 50, 93, .16); --text-2: #3d4d6c; --blue-ink: var(--dark); --tint: rgba(28, 50, 93, .08); color: var(--text); }
.band-rich .h2, .band-rich .h3 { color: var(--dark); }
.facts { background: var(--brand-20); color: var(--dark); }
.ico, .ico-badge, .village i, .channel i, .paycard h3 i, .empty > i { background: var(--brand-20); color: var(--dark); box-shadow: none; }
.commit span { background: var(--brand); }
.album-count, .article-meta .kind { background: var(--brand-20); color: var(--dark); }
.read-progress, .progress { background: var(--brand); }

/* Links: dark blue, underlined in brand blue */
.link-arrow, .rail-back, .article-note a, .facts a { color: var(--dark); }
.prose a, .article-body a, .answer a { color: var(--dark) !important; text-decoration: underline; text-decoration-color: var(--brand); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.hero-link { color: var(--dark); text-decoration-color: var(--brand); }
@media (hover: hover) and (pointer: fine) { .hero-link:hover { text-decoration-color: var(--dark); } }

/* ── Buttons ── */
.btn { font-weight: 700; letter-spacing: 0; }
.btn-primary { background: var(--dark); color: #fff; box-shadow: none; }
.btn-ghost, .btn-glass { background: #fff; color: var(--dark); box-shadow: inset 0 0 0 1.5px var(--dark); }
.btn-white { background: #fff; color: var(--dark); box-shadow: none; }
/* Giving buttons: the brand's accent red, as on the international SOS website */
a.btn[href^="donate.html"]:not(.btn-white):not(.btn-ghost):not(.btn-glass) { background: var(--red); color: #fff; }
.band-rich .btn-ghost { background: #fff; color: var(--dark); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: #2a4677; box-shadow: none; }
  .btn-ghost:hover, .btn-glass:hover, .band-rich .btn-ghost:hover { background: var(--brand-10); }
  a.btn[href^="donate.html"]:not(.btn-white):not(.btn-ghost):not(.btn-glass):hover { background: #cf4a5c; }
}

/* ── Chrome ── */
.nav { background: rgba(255, 255, 255, .94); border-bottom: 1px solid var(--line); }
.nav-menu a, .nav-menu button, .menu-btn { color: var(--dark); }
.subnav { background: rgba(255, 255, 255, .95); border-bottom: 1px solid var(--line); }
.subnav .pill { background: var(--brand-20); }
.dropdown, .menu-sheet { background: #fff; color: var(--dark); }

/* The white page curves onto a Brand blue 20% footer (the background curve) */
main { position: relative; z-index: 1; background: #fff; border-bottom-right-radius: var(--curve); }
footer { background: var(--brand-20); color: var(--text-2); border-top: 0; margin-top: calc(-1 * var(--curve)); padding-top: calc(var(--curve) + 2rem); }
footer h4, footer .brand-name b { color: var(--dark); }
footer a { color: var(--dark); }
@media (hover: hover) and (pointer: fine) { footer a:hover { color: var(--dark); } }
footer .logo { filter: none; opacity: 1; }
.foot-safe { color: var(--dark); }
.foot-bottom { color: var(--text-2); border-top-color: var(--line); }
.foot-col, .foot-col:last-of-type { border-color: var(--line) !important; }
.foot-col summary::after { border-color: var(--dark) !important; }
.subscribe input { background: #fff; color: var(--dark); border-color: var(--line); }
.subscribe input::placeholder { color: var(--dark-2); }
.subscribe button { background: var(--dark); color: #fff; }
.subscribe-done { color: var(--dark); }
@media (max-width: 640px) { main { border-bottom-right-radius: 64px; } footer { margin-top: -64px; padding-top: calc(64px + 1.75rem); } }

/* ── Feature blocks become bubbles: Brand blue, white type, one big curve, soft outer glow ── */
.feature, .give-card.feature { background: var(--brand); color: #fff; border-bottom-right-radius: var(--curve) !important; box-shadow: var(--glow); }
.feature :is(.h2, .h3, .eyebrow, p, .lede) { color: #fff !important; }
.feature .eyebrow::before { background: #fff; }

/* Closing call to action: a Brand blue bubble anchored to a photo */
.cta-band.cta-photo { background: var(--brand-20); color: #fff; grid-template-columns: minmax(0, 54%); border-radius: 0; box-shadow: none; overflow: hidden; padding: clamp(2rem, 4.5vw, 3.5rem); }
.cta-photo .cta-bg { left: 46%; width: 54%; opacity: 1; }
.cta-photo::before { inset: 0 auto 0 0; width: 58%; background: var(--brand); border-bottom-right-radius: var(--bubble-r); box-shadow: var(--glow); }
.cta-photo .h2, .cta-photo .eyebrow { color: #fff !important; }
.cta-photo .eyebrow::before { background: #fff; }
.cta-band .lede { color: rgba(255, 255, 255, .94); }
.cta-photo .cta-actions { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; min-width: 0; padding-bottom: clamp(1rem, 3vw, 2.5rem); }
.cta-photo .cta-actions .btn-white { color: var(--dark); }
.cta-photo .cta-actions .btn-glass { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
@media (hover: hover) and (pointer: fine) { .cta-photo .cta-actions .btn-glass:hover { background: rgba(255, 255, 255, .14); } }
@media (max-width: 760px) {
  .cta-band.cta-photo { grid-template-columns: 1fr; padding-top: 220px; background: var(--brand); }
  .cta-photo .cta-bg { left: 0; width: 100%; height: 200px; bottom: auto; }
  .cta-photo::before { inset: 200px 0 0 0; width: auto; border-radius: 0; }
}

/* Photo curve: the large page-top photo and feature photos end in a bubble curve */
.banner, .banner .photo, .way-lg, .baton-photo, .article-hero img, .impact-total { border-bottom-right-radius: var(--curve) !important; overflow: hidden; }

/* Impact block: brand blue instead of a dark wash */
.impact-total::after { background: linear-gradient(to top, rgba(0, 171, 236, .97) 0%, rgba(0, 171, 236, .88) 45%, rgba(0, 171, 236, .35) 100%); }

/* Hover accents */
@media (hover: hover) and (pointer: fine) {
  a.tile:hover, .give-card:not(.feature):hover, a.village:hover, a.channel:hover, .card:hover, .pn:hover { border-top-color: var(--brand) !important; }
  a.tile:hover .h3, a.village:hover b, a.channel:hover b, .card:hover .h3, .pn:hover b, .give-card:not(.feature):hover .h3 { color: var(--dark); text-decoration: underline; text-decoration-color: var(--brand); text-underline-offset: 3px; }
}

/* Baton pages on the light palette */
.chain li { color: var(--dark); border-top-color: var(--brand); }
.chain li:last-child { color: var(--dark); border-top-color: var(--red); }
.chain li::before { color: var(--brand); font-weight: 900; }
.chain li:not(:last-child)::after { color: var(--brand); }
.baton-motto { color: var(--dark); }
.baton-index span { color: var(--brand); font-weight: 900; }
.baton-num { color: var(--brand); }
.tiers, .choice, .baton-note { border-top-color: var(--brand); }
.choice-baton b, .fit-baton b { color: var(--dark); }
.fit-arrow { color: var(--brand); }
.team a { color: var(--dark); text-decoration: underline; text-decoration-color: var(--brand); text-underline-offset: 3px; }

/* ── Homepage hero: photo slideshow with the copy in a Brand blue bubble anchored to its lower edge ── */
.ed-hero { height: auto; min-height: clamp(600px, 88svh, 880px); background: var(--brand-20); color: #fff; padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.ed-slides { inset: 0 0 clamp(110px, 16vh, 170px) 0; overflow: hidden; }
.ed-shade { background: linear-gradient(to bottom, rgba(28, 50, 93, .5), transparent 140px); bottom: clamp(110px, 16vh, 170px); }
.ed-body { display: flex; }
.ed-copies { position: relative; width: min(620px, 100%); background: var(--brand); border-bottom-right-radius: var(--bubble-r); box-shadow: var(--glow);
  /* brand text margins: left = width/10, top = ×1.5, bottom = ×2.3 */
  padding: clamp(1.75rem, 3vw, 2.6rem) clamp(2.2rem, 5vw, 4rem) clamp(3rem, 6vw, 4.6rem) clamp(1.5rem, 3vw, 2.2rem); }
.ed-copies::after { content: ""; position: absolute; left: 100%; top: calc(clamp(1.75rem, 3vw, 2.6rem) + .75em); width: clamp(28px, 4vw, 64px); height: 3px; background: var(--red); font-size: clamp(2rem, 3.6vw, 3.1rem); }
.ed-copies > .ed-copy { grid-template-columns: 1fr; gap: 1rem; }
.ed-title { font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.1; text-shadow: none; color: #fff; }
.ed-side p { color: rgba(255, 255, 255, .95); max-width: 44ch; }
.ed-ctas { margin-top: 1.25rem; }
.ed-ctas a.btn[href^="donate.html"] { background: #fff; color: var(--dark); }
@media (hover: hover) and (pointer: fine) { .ed-ctas a.btn[href^="donate.html"]:hover { background: var(--brand-10); } }
.ed-ctas .hero-link { color: #fff; text-decoration-color: rgba(255, 255, 255, .6); }
@media (max-width: 860px) {
  .ed-hero { min-height: 0; }
  .ed-slides { inset: 0 0 auto 0; height: 340px; }
  .ed-shade { bottom: auto; height: 340px; background: linear-gradient(to bottom, rgba(28, 50, 93, .45), transparent 110px); }
  .ed-body { padding-top: 290px; }
  .ed-copies { padding: 1.6rem 2rem 2.8rem 1.4rem; }
  .ed-copies::after { display: none; }
  .ed-ui { top: 14px; }
}
.ed-hero { background: #fff; }
.ed-ctas a.btn.btn-hero[href^="donate.html"]:not(#\#) { background: #fff; color: var(--dark); }
@media (hover: hover) and (pointer: fine) { .ed-ctas a.btn.btn-hero[href^="donate.html"]:not(#\#):hover { background: var(--brand-10); } }
.ed-copies::after { display: none; }

/* ── Structure from the Local Sponsorship Website Copy ── */
/* Flat main menu (eight items, per the recommended navigation) */
.nav-menu { gap: 0; }
.nav-menu a { padding: .5rem .6rem; font-size: .875rem; font-weight: 500; white-space: nowrap; }
.nav-menu a[aria-current] { font-weight: 700; text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 3px; text-underline-offset: 8px; }
.nav-menu a[aria-current]::after { display: none; }
@media (max-width: 1280px) { .nav-menu, .nav .btn-donate-desktop { display: none; } .menu-btn { display: inline-grid; place-items: center; } }

/* Hero slide label (baton number and siSwati name) */
.ed-eyebrow { display: block; margin-bottom: .7rem; font-size: .9375rem; font-weight: 700; line-height: 1.3; color: rgba(255, 255, 255, .92); }

/* Impact stories */
.stories { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3.5rem); }
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.5rem; align-items: start; }
.story-photo { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--brand-20); border-bottom-right-radius: 34% 28%; }
.story-photo img { width: 100%; height: 100%; object-fit: cover; }
.story .h3 { margin: 0 0 .5rem; font-size: 1.35rem; }
.story p { color: var(--text-2); }
.story .btn { margin-top: .5rem; }
@media (max-width: 960px) { .stories { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .story { grid-template-columns: 1fr; } .story-photo { aspect-ratio: 4 / 3; } }

/* Final call to action carries all five actions */
.cta-photo .cta-actions { gap: .6rem; }
/* Give now now points to the donation channels */
.btn { white-space: nowrap; }
a.btn[href="give-individual.html#give-now"]:not(.btn-white):not(.btn-ghost):not(.btn-glass) { background: var(--red); color: #fff; }
.ed-ctas a.btn.btn-hero[href="give-individual.html#give-now"]:not(#\#) { background: #fff; color: var(--dark); }
@media (hover: hover) and (pointer: fine) {
  a.btn[href="give-individual.html#give-now"]:not(.btn-white):not(.btn-ghost):not(.btn-glass):hover { background: #cf4a5c; }
  .ed-ctas a.btn.btn-hero[href="give-individual.html#give-now"]:not(#\#):hover { background: var(--brand-10); }
}
@media (max-width: 520px) { .btn { white-space: normal; } }
/* Logo: icon + "SOS Children's Villages" (no country line) */
.logo, .nav .logo { height: 40px; width: auto; }
footer .logo { height: 36px; }
@media (max-width: 520px) { .nav .logo { height: 32px; } }
.nav .brand, footer .brand { flex: none; }
.logo { width: auto !important; max-width: none !important; aspect-ratio: 1166 / 202; object-fit: contain; }
/* Fit logo + eight links + Give now on one line from 1300px up */
.nav > .wrap { gap: .75rem; }
.nav-menu a { padding: .5rem .5rem; font-size: .84rem; }
@media (min-width: 1281px) and (max-width: 1500px) { .nav .logo { height: 34px; } .nav-menu a { padding: .5rem .4rem; font-size: .8125rem; } }
@media (max-width: 1300px) { .nav-menu, .nav .btn-donate-desktop { display: none; } .menu-btn { display: inline-grid; place-items: center; } }
.nav-menu > li > a { padding: .5rem .5rem; font-size: .875rem; font-weight: 500; }
@media (min-width: 1301px) and (max-width: 1520px) { .nav .logo { height: 34px; } .nav-menu > li > a { padding: .5rem .38rem; font-size: .8125rem; } }

/* ═════════════ Buttons: SOS Children's Villages International system (sos-childrensvillages.org) ═════════════
   Bold uppercase label, 6px corners, a 2px darker "lip" along the bottom edge (inset shadow),
   colour change on hover (200ms ease-out). Primary/Donate = SOS blue → dark blue on hover.
   White = white with blue label. On photos/blue: white-outline pill that fills white on hover.
   Added: a subtle press (scale .97) so the button acknowledges the tap. */
:root { --sos-blue: #00a7e4; --sos-dark: #1c325d; --btn-ease: cubic-bezier(0.23, 1, 0.32, 1); }
body .btn:not(#\#) {
  min-height: 0; padding: 11px 20px 13px; border: 0; border-radius: 6px;
  font-family: var(--font); font-size: .875rem; font-weight: 700; line-height: 1.2; letter-spacing: .02em;
  text-transform: uppercase; text-decoration: none; text-align: center;
  background: var(--sos-blue); color: #fff;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
  translate: none;
  transition: background-color 200ms ease-out, color 200ms ease-out, box-shadow 200ms ease-out, transform 140ms var(--btn-ease);
}
body .btn:not(#\#) svg { width: 1.1em; height: 1.1em; }
body .btn.btn-sm:not(#\#) { padding: 9px 16px 11px; font-size: .8125rem; }
body .btn.btn-hero:not(#\#), body .ready > .btn:not(#\#), body .cta-actions .btn:not(#\#) { padding: 14px 26px 16px; font-size: .9375rem; }

/* Primary and every Give now / Donate button */
body .btn-primary:not(#\#), body a.btn[href*="give-now"]:not(.btn-white):not(.btn-ghost):not(.btn-glass):not(#\#) { background: var(--sos-blue); color: #fff; }

/* Secondary: SOS "btn-white" — white, blue label, hairline border */
body .btn-ghost:not(#\#) { background: #fff; color: var(--sos-blue); box-shadow: inset 0 0 0 1px #e6e6e6, inset 0 -2px 0 rgba(0, 0, 0, .06); }
body .btn-white:not(#\#) { background: #fff; color: var(--sos-blue); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .1); }

/* On photos and blue surfaces: SOS "btn-white btn-transparent rounded" — outlined pill */
body .btn-glass:not(#\#), body .ed-ctas .hero-link.btn:not(#\#) { background: transparent; color: #fff; border-radius: 200px; box-shadow: inset 0 0 0 2px #fff; }
/* The hero's main button sits on the blue bubble: white, like SOS's white button on colour */
body .ed-ctas a.btn.btn-hero:not(#\#):not(#\#) { background: #fff; color: var(--sos-blue); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .1); }

@media (hover: hover) and (pointer: fine) {
  body .btn:not(#\#):hover, body .btn-primary:not(#\#):hover,
  body a.btn[href*="give-now"]:not(.btn-white):not(.btn-ghost):not(.btn-glass):not(#\#):hover { background: var(--sos-dark); color: #fff; translate: none; }
  body .btn-ghost:not(#\#):hover, body .btn-white:not(#\#):hover { background: #f3f5f8; color: #5e6468; }
  body .btn-glass:not(#\#):hover { background: #fff; color: var(--sos-blue); }
  body .ed-ctas a.btn.btn-hero:not(#\#):not(#\#):hover { background: var(--sos-dark); color: #fff; }
}
body .btn:not(#\#):focus-visible { outline: 3px solid var(--sos-dark); outline-offset: 2px; }
body .btn-glass:not(#\#):focus-visible, body .ed-ctas .btn:not(#\#):focus-visible { outline-color: #fff; }
body .btn:not(#\#):active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { body .btn:not(#\#):active { transform: none; } }

/* ── Hero motion: the bubble travels left ↔ right between slides ──
   Moving on screen → ease-in-out, slow enough to read as travel (1.1s, matched to the photo crossfade).
   The curved corner mirrors so the bubble's curve always faces into the photo.
   The copy enters sideways from the direction of travel, after the bubble has mostly arrived. */
.ed-body { container-type: inline-size; }
.ed-copies {
  --bub: 70% 56%;
  border-radius: 0 0 var(--bub) 0;
  transform: translateX(0);
  transition: transform 1100ms var(--ease-in-out), border-radius 1100ms var(--ease-in-out);
  will-change: transform;
}
.ed-hero[data-side="right"] .ed-copies { transform: translateX(calc(100cqw - 100%)); border-radius: 0 0 0 var(--bub); }
.ed-hero[data-side="right"] .ed-copies { padding-left: clamp(2.2rem, 5vw, 4rem); padding-right: clamp(1.5rem, 3vw, 2.2rem); }

.ed-copy .ed-title, .ed-copy .ed-side {
  transform: translateX(var(--from, 48px)); filter: blur(4px);
  transition: opacity 220ms ease, transform 220ms var(--ease-out), filter 220ms ease;
}
.ed-copy:not(.is-active) .ed-title, .ed-copy:not(.is-active) .ed-side { transform: translateX(calc(var(--from, 48px) * -0.5)); }
.ed-copy.is-active .ed-title, .ed-copy.is-active .ed-side {
  transform: none; filter: none;
  transition: opacity 700ms var(--ease-out) 650ms, transform 900ms var(--ease-out) 650ms, filter 700ms var(--ease-out) 650ms;
}
.ed-copy.is-active .ed-side { transition-delay: 760ms; }

/* Phones: the bubble is full width, so only the copy slides sideways */
@media (max-width: 860px) {
  .ed-hero[data-side] .ed-copies { transform: none; border-radius: 0 0 var(--bub) 0; padding: 1.6rem 2rem 2.8rem 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ed-hero[data-side] .ed-copies { transform: none; transition: none; border-radius: 0 0 var(--bub) 0; }
  .ed-copy .ed-title, .ed-copy .ed-side, .ed-copy.is-active .ed-title, .ed-copy.is-active .ed-side { transform: none; filter: none; transition: opacity 300ms ease; }
}
/* Curve corner swap (longhands: an elliptical radius can't sit in the 4-value shorthand) */
.ed-copies { border-radius: 0; border-bottom-right-radius: var(--bub); border-bottom-left-radius: 0 0;
  transition: transform 1100ms var(--ease-in-out), border-bottom-right-radius 1100ms var(--ease-in-out), border-bottom-left-radius 1100ms var(--ease-in-out); }
.ed-hero[data-side="right"] .ed-copies { border-radius: 0; border-bottom-left-radius: var(--bub); border-bottom-right-radius: 0 0; }
@media (max-width: 860px) { .ed-hero[data-side] .ed-copies { border-bottom-left-radius: 0 0; border-bottom-right-radius: var(--bub); } }
@media (prefers-reduced-motion: reduce) { .ed-hero[data-side] .ed-copies { border-bottom-left-radius: 0 0; border-bottom-right-radius: var(--bub); } }

/* ── Closing band: the bubble is a slider that reveals the photo ──
   On entering view the Brand-blue bubble covers the whole band, then sweeps back (ease-in-out:
   it's moving on screen) to its resting width, its curve forming as it lands. The photo settles
   from a slight zoom underneath (ease-out), so it feels uncovered, not swapped in.
   One-time, on scroll, so it can afford marketing-length timing. */
.cta-band.cta-photo.reveal.reveal { opacity: 1; translate: none; }
.cta-photo::before {
  transition: width 1300ms var(--ease-in-out) 150ms, border-bottom-right-radius 1300ms var(--ease-in-out) 150ms;
}
.cta-photo .cta-bg { transition: transform 1800ms var(--ease-out) 300ms; }
body:not(.no-js) .cta-photo.reveal:not(.in)::before { width: 100%; border-bottom-right-radius: 0 0; }
body:not(.no-js) .cta-photo.reveal:not(.in) .cta-bg { transform: scale(1.12); }
/* Copy rides in with the bubble, then settles */
.cta-photo > div { transition: opacity 600ms ease 250ms, transform 900ms var(--ease-out) 250ms; }
body:not(.no-js) .cta-photo.reveal:not(.in) > div { opacity: 0; transform: translateX(-24px); }

/* Phones: photo on top, bubble below; the bubble slides down to uncover the photo */
@media (max-width: 760px) {
  .cta-photo::before { transition: top 1200ms var(--ease-in-out) 150ms; }
  body:not(.no-js) .cta-photo.reveal:not(.in)::before { width: auto; top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-photo::before, .cta-photo .cta-bg { transition: none; }
  body:not(.no-js) .cta-photo.reveal:not(.in)::before { width: 58%; border-bottom-right-radius: var(--bubble-r); }
  body:not(.no-js) .cta-photo.reveal:not(.in) .cta-bg { transform: none; }
  .cta-photo > div { transition: opacity 300ms ease; }
  body:not(.no-js) .cta-photo.reveal:not(.in) > div { transform: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  body:not(.no-js) .cta-photo.reveal:not(.in)::before { width: auto; top: 200px; border-radius: 0; }
}

/* ═════════════ Bubble curtain: one slide-in for everything with the SOS curve ═════════════
   Same motion as the closing band: a Brand-blue curtain covers the shape, then sweeps back to
   the left (ease-in-out, it's travelling on screen), its corner rounding into the bubble curve
   as it goes. One-time, on scroll into view. The content under it settles from a slight zoom. */
/* Curved photos: curtain on top */
.curtain { position: relative; isolation: isolate; }
.curtain::after {
  content: ""; position: absolute; inset: 0 auto 0 0; z-index: 3; width: 0; pointer-events: none;
  background: var(--brand); border-bottom-right-radius: var(--bubble-r);
  transition: width 1200ms var(--ease-in-out) 100ms, border-bottom-right-radius 1200ms var(--ease-in-out) 100ms;
}
.curtain img { transition: transform 1600ms var(--ease-out) 250ms; }
body:not(.no-js) .curtain:not(.is-in)::after { width: 100%; border-bottom-right-radius: 0 0; }
body:not(.no-js) .curtain:not(.is-in) img { transform: scale(1.1); }
/* The banner's own fade/rise would hide the sweep; let the curtain do the work */
.banner.curtain.reveal.reveal { opacity: 1; translate: none; }

/* Light-blue curved sections: the background itself sweeps in from the left */
.curtain-bg { position: relative; isolation: isolate; background: transparent !important; }
.curtain-bg::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--brand-20); border-bottom-right-radius: var(--curve);
  clip-path: inset(0 0 0 0);
  transition: clip-path 1300ms var(--ease-in-out);
}
body:not(.no-js) .curtain-bg:not(.is-in)::before { clip-path: inset(0 100% 0 0); }

/* Hero: a Brand-blue curtain covers the first photo, then slides back into the bubble */
.ed-hero::after {
  content: ""; position: absolute; z-index: 1; top: 0; left: 0; bottom: clamp(110px, 16vh, 170px); width: 0; pointer-events: none;
  background: var(--brand); border-bottom-right-radius: var(--bubble-r);
  transition: width 1400ms var(--ease-in-out), border-bottom-right-radius 1400ms var(--ease-in-out);
}
body:not(.no-js) .ed-hero:not(.is-revealed)::after { width: 100%; border-bottom-right-radius: 0 0; }
body:not(.no-js) .ed-hero:not(.is-revealed) .ed-img.is-active { transform: scale(1.08); }
body:not(.no-js) .ed-hero:not(.is-revealed) .ed-copy.is-active .ed-title,
body:not(.no-js) .ed-hero:not(.is-revealed) .ed-copy.is-active .ed-side { opacity: 0; transform: translateX(-32px); }
@media (max-width: 860px) { .ed-hero::after { bottom: auto; height: 340px; } }

@media (prefers-reduced-motion: reduce) {
  .curtain::after, .curtain-bg::before, .ed-hero::after { transition: none; }
  body:not(.no-js) .curtain:not(.is-in)::after, body:not(.no-js) .ed-hero:not(.is-revealed)::after { width: 0; }
  body:not(.no-js) .curtain-bg:not(.is-in)::before { clip-path: none; }
  body:not(.no-js) .curtain:not(.is-in) img, body:not(.no-js) .ed-hero:not(.is-revealed) .ed-img.is-active { transform: none; }
}

/* ── Baton titles ride the curtain ──
   While the photo is covered, the title sits on the blue curtain (white type, inset into the photo).
   When the curtain sweeps back, the title travels up to its place above the photo and returns to
   its normal colours. It moves on screen → ease-in-out, slightly behind the curtain so they read as one motion. */
.baton-head { position: relative; }
.baton-title { position: relative; z-index: 4; }
.title-ride .baton-title {
  transition: transform 1100ms var(--ease-in-out) 250ms;
}
.title-ride .baton-title :is(.baton-num, .eyebrow, .baton-name, .baton-en) { transition: color 700ms ease 450ms; }
.title-ride .baton-title .eyebrow::before { transition: background-color 700ms ease 450ms; }
body:not(.no-js) .title-ride:has(.baton-photo:not(.is-in)) .baton-title { transform: translate(28px, var(--dy, 0px)); }
body:not(.no-js) .title-ride:has(.baton-photo:not(.is-in)) .baton-title :is(.baton-num, .eyebrow, .baton-name, .baton-en) { color: #fff; }
body:not(.no-js) .title-ride:has(.baton-photo:not(.is-in)) .baton-title .eyebrow::before { background: #fff; }
/* keep the title inside the photo's width while it rides */
body:not(.no-js) .title-ride:has(.baton-photo:not(.is-in)) .baton-name { max-width: calc(100% - 56px); }
@media (prefers-reduced-motion: reduce) {
  .title-ride .baton-title { transition: none; transform: none !important; }
}
body:not(.no-js) .title-ride:has(.baton-photo:not(.is-in)) .baton-title .baton-num:not(#\#):not(#\#) { color: #fff; }
.title-ride .baton-title .baton-num:not(#\#):not(#\#) { transition: color 700ms ease 450ms; }

/* ═════════════ Bubble orientation: the curve changes corner across the site ═════════════
   data-curve = br | bl (mirrored) | tr | tl (upside down), set in document order by site.js.
   The curtain always sweeps away from the side its curve is on, so the curve leads the motion. */
.banner, .baton-photo { --r: var(--curve); }
.story-photo { --r: 34% 28%; }
.curtain-bg { --r: var(--curve); }
[data-curve]:is(.banner, .baton-photo, .story-photo) { border-radius: 0 !important; }
[data-curve="br"]:is(.banner, .baton-photo, .story-photo) { border-bottom-right-radius: var(--r) !important; }
[data-curve="bl"]:is(.banner, .baton-photo, .story-photo) { border-bottom-left-radius: var(--r) !important; }
[data-curve="tr"]:is(.banner, .baton-photo, .story-photo) { border-top-right-radius: var(--r) !important; }
[data-curve="tl"]:is(.banner, .baton-photo, .story-photo) { border-top-left-radius: var(--r) !important; }
[data-curve] .photo { border-radius: inherit !important; }

/* Curtain on photos: anchored on the side away from the curve, curve on its leading edge */
.curtain::after { border-radius: 0; transition: width 1200ms var(--ease-in-out) 100ms, border-radius 1200ms var(--ease-in-out) 100ms; }
.curtain[data-curve="br"]::after { inset: 0 auto 0 0; border-bottom-right-radius: var(--bubble-r); }
.curtain[data-curve="tr"]::after { inset: 0 auto 0 0; border-top-right-radius: var(--bubble-r); }
.curtain[data-curve="bl"]::after { inset: 0 0 0 auto; border-bottom-left-radius: var(--bubble-r); }
.curtain[data-curve="tl"]::after { inset: 0 0 0 auto; border-top-left-radius: var(--bubble-r); }
body:not(.no-js) .curtain[data-curve]:not(.is-in)::after { border-radius: 0; }

/* Light-blue sections: curve on the chosen corner; the sweep comes from the side opposite it */
.curtain-bg::before { border-radius: 0; }
.curtain-bg[data-curve="br"]::before { border-bottom-right-radius: var(--r); }
.curtain-bg[data-curve="bl"]::before { border-bottom-left-radius: var(--r); }
.curtain-bg[data-curve="tr"]::before { border-top-right-radius: var(--r); }
.curtain-bg[data-curve="tl"]::before { border-top-left-radius: var(--r); }
.section.curtain-bg[data-curve], .band-rich.curtain-bg[data-curve] { border-radius: 0 !important; }
body:not(.no-js) .curtain-bg[data-curve="bl"]:not(.is-in)::before,
body:not(.no-js) .curtain-bg[data-curve="tl"]:not(.is-in)::before { clip-path: inset(0 0 0 100%); }

/* Closing band: bubble flipped upside down on some pages */
.cta-photo[data-curve="tr"]::before { border-bottom-right-radius: 0; border-top-right-radius: var(--bubble-r); transition: width 1300ms var(--ease-in-out) 150ms, border-top-right-radius 1300ms var(--ease-in-out) 150ms; }
body:not(.no-js) .cta-photo[data-curve="tr"].reveal:not(.in)::before { border-top-right-radius: 0 0; }
@media (max-width: 760px) { .cta-photo[data-curve="tr"]::before { border-top-right-radius: 0; } }

@media (prefers-reduced-motion: reduce) {
  body:not(.no-js) .curtain-bg[data-curve]:not(.is-in)::before { clip-path: none; }
  body:not(.no-js) .cta-photo[data-curve="tr"].reveal:not(.in)::before { border-top-right-radius: var(--bubble-r); }
}

/* ═════════════ Every photo: curtain + its text riding in ═════════════ */
.article-hero-img, .fig-img { position: relative; overflow: hidden; }
.article-hero-img img, .fig-img img { display: block; width: 100%; }
/* Story photos show whole, at their own shape: never cropped, only scaled down to fit the page */
.article-hero-img img, .fig-img img { width: auto; max-width: 100%; height: auto; max-height: min(82vh, 900px); aspect-ratio: auto; object-fit: contain; margin-inline: auto; }
.article-hero img { border-radius: 0 !important; }
.curtain { --r: var(--curve); }
.story-photo.curtain { --r: 34% 28%; }
.post .photo.curtain { --r: clamp(40px, 6vw, 90px); }
.curtain[data-curve] { border-radius: 0 !important; }
.curtain[data-curve="br"] { border-bottom-right-radius: var(--r) !important; }
.curtain[data-curve="bl"] { border-bottom-left-radius: var(--r) !important; }
.curtain[data-curve="tr"] { border-top-right-radius: var(--r) !important; }
.curtain[data-curve="tl"] { border-top-left-radius: var(--r) !important; }

/* The rider: a heading/caption that starts on the curtain (white, inset 24px into the photo)
   and travels to its place as the curtain sweeps back, a beat behind it so they read as one move. */
.ride { position: relative; z-index: 5; transition: transform 1100ms var(--ease-in-out) 250ms, color 700ms ease 450ms; }
body:not(.no-js) .ride:not(.ride-in) { transform: translate(var(--rx, 0px), var(--ry, 0px)); color: #fff !important; }
body:not(.no-js) .ride:not(.ride-in)::before { opacity: 0; }   /* hide the title line while riding */
.ride::before { transition: opacity 400ms ease 900ms; }
/* Captions and card titles never wider than the photo they ride on */
.fig-img + figcaption.ride, .post h3.ride { max-width: 100%; }
@media (prefers-reduced-motion: reduce) { .ride { transition: none; transform: none !important; } }
.ride { transform-origin: 0 0; }
body:not(.no-js) .ride:not(.ride-in) { transform: translate(var(--rx, 0px), var(--ry, 0px)) scale(var(--rs, 1)); }

/* ═════════════ Hero: the bubble is a curtain that hangs in a corner ═════════════
   The photo fills the hero. A Brand-blue layer (.ed-curtain) starts over the whole hero and its
   clip-path morphs into a curved bubble set inside a corner (margin all round, never on the edge).
   Between slides it closes over the photo (the photo swaps unseen) and reopens into the next corner.
   Moving on screen → ease-in-out; 850ms keeps it deliberate without dragging. */
.ed-curtained.ed-hero { --m: clamp(16px, 3vw, 40px); display: block; height: clamp(600px, 88svh, 860px); min-height: 0; padding: 0; background: #12305a; }
.ed-curtained.ed-hero::after { display: none; }
.ed-curtained .ed-slides { inset: 0; height: auto; }
.ed-curtained .ed-img { transition: none; }
.ed-curtained .ed-shade { inset: 0; height: auto; background: linear-gradient(to bottom, rgba(28, 50, 93, .38), transparent 20%, transparent 80%, rgba(28, 50, 93, .3)); }
.ed-curtain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--brand);
  clip-path: inset(0px 0px 0px 0px round 0px 0px 0px 0px / 0px 0px 0px 0px);
  transition: clip-path 850ms var(--ease-in-out);
  filter: drop-shadow(0 0 18px rgba(0, 0, 0, .12));
}
.ed-curtained .ed-body { position: absolute; inset: 0; z-index: 3; display: block; padding: 0; max-width: none; pointer-events: none; }
.ed-curtained .ed-ui { z-index: 4; }

/* The text box: transparent (the curtain draws the bubble), hung inside a corner */
.ed-curtained .ed-copies:not(#\#) {
  position: absolute; width: min(600px, calc(100% - 2 * var(--m))); margin: 0;
  background: none; box-shadow: none; transform: none; transition: none; border-radius: 0; pointer-events: auto;
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.6rem, 3vw, 2.4rem) clamp(1.8rem, 3.2vw, 2.6rem);
}
.ed-curtained .ed-copies::after { display: none; }
/* Corner placement; extra room on the two sides that meet the curve */
.ed-curtained[data-corner="bl"] .ed-copies:not(#\#) { left: var(--m); bottom: var(--m); top: auto; right: auto; padding-top: clamp(3rem, 6vw, 5rem); padding-right: clamp(4rem, 10vw, 9rem); }
.ed-curtained[data-corner="br"] .ed-copies:not(#\#) { right: var(--m); bottom: var(--m); top: auto; left: auto; padding-top: clamp(3rem, 6vw, 5rem); padding-left: clamp(4rem, 10vw, 9rem); }
.ed-curtained[data-corner="tl"] .ed-copies:not(#\#) { left: var(--m); top: var(--m); bottom: auto; right: auto; padding-bottom: clamp(3rem, 6vw, 5rem); padding-right: clamp(4rem, 10vw, 9rem); }
.ed-curtained[data-corner="tr"] .ed-copies:not(#\#) { right: var(--m); top: var(--m); bottom: auto; left: auto; padding-bottom: clamp(3rem, 6vw, 5rem); padding-left: clamp(4rem, 10vw, 9rem); }

/* Slide controls sit in the corner opposite the bubble */
.ed-curtained .ed-ui { top: auto; right: auto; bottom: auto; left: auto; }
.ed-curtained[data-corner="bl"] .ed-ui { top: calc(var(--m) + 4px); right: calc(var(--m) + 4px); }
.ed-curtained[data-corner="br"] .ed-ui { top: calc(var(--m) + 4px); left: calc(var(--m) + 4px); }
.ed-curtained[data-corner="tl"] .ed-ui { bottom: calc(var(--m) + 4px); right: calc(var(--m) + 4px); }
.ed-curtained[data-corner="tr"] .ed-ui { bottom: calc(var(--m) + 4px); left: calc(var(--m) + 4px); }

/* Copy: hidden while the curtain is closed, rises in once it opens; leaves fast */
.ed-curtained .ed-copy .ed-title, .ed-curtained .ed-copy .ed-side { opacity: 0; transform: translateY(12px); filter: none; transition: opacity 160ms ease, transform 160ms ease; }
.ed-curtained.is-revealed .ed-copy.is-active .ed-title, .ed-curtained.is-revealed .ed-copy.is-active .ed-side {
  opacity: 1; transform: none; transition: opacity 600ms var(--ease-out) 520ms, transform 800ms var(--ease-out) 520ms; }
.ed-curtained.is-revealed .ed-copy.is-active .ed-side { transition-delay: 620ms; }

@media (max-width: 860px) {
  .ed-curtained.ed-hero { height: clamp(580px, 92svh, 720px); }
  .ed-curtained .ed-slides, .ed-curtained .ed-shade { inset: 0; height: auto; }
  .ed-curtained[data-corner] .ed-copies:not(#\#) { left: var(--m); right: var(--m); bottom: var(--m); top: auto; width: auto; padding: 2.4rem 3rem 1.8rem 1.4rem; }
  .ed-curtained[data-corner] .ed-ui { top: 14px; right: var(--m); bottom: auto; left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ed-curtain { transition: none; }
  .ed-curtained .ed-copy .ed-title, .ed-curtained .ed-copy .ed-side { transform: none; transition: opacity 300ms ease; }
}

/* Closed curtain = title card for the incoming slide. Text arrives once the curtain has mostly
   closed (ease-out), and is wiped by the curtain itself as it opens into the corner bubble. */
.ed-card { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 0 var(--gutter); text-align: center; color: #fff; }
.ed-card-eb { font-size: clamp(.875rem, 1.2vw, 1rem); font-weight: 700; opacity: .92; display: flex; align-items: center; gap: .6rem; }
.ed-card-eb::before, .ed-card-eb::after { content: ""; width: 28px; height: 3px; background: #fff; }
.ed-card-eb:empty { display: none; }
.ed-card-title { max-width: 18ch; font-size: clamp(2.2rem, 5.2vw, 4.6rem); font-weight: 500; line-height: 1.08; text-wrap: balance; }
.ed-card > * { opacity: 0; transform: translateY(14px); transition: opacity 200ms ease, transform 200ms ease; }
.ed-curtained.is-closed .ed-card > * { opacity: 1; transform: none; transition: opacity 500ms var(--ease-out) 380ms, transform 700ms var(--ease-out) 380ms; }
.ed-curtained.is-closed .ed-card-title { transition-delay: 460ms; }
/* While opening, the card fades a touch so the wipe reads as the curtain leaving, not text being cut */
.ed-curtained:not(.is-closed) .ed-card > * { transition: opacity 500ms ease, transform 500ms ease; }
@media (prefers-reduced-motion: reduce) { .ed-card > * { transform: none !important; } }
/* Slide copy stays hidden while the curtain is closed (the card is showing); it rises in as it opens */
.ed-curtained.is-revealed.is-closed .ed-copy.is-active .ed-title,
.ed-curtained.is-revealed.is-closed .ed-copy.is-active .ed-side { opacity: 0; transform: translateY(12px); transition: opacity 160ms ease, transform 160ms ease; }

/* ═════════════ Type scale, reduced ═════════════
   Headlines come down ~20%, supporting text ~10%, body stays readable (15–16px). */
body:not(#\#) { font-size: .9375rem; }
body .display:not(#\#)      { font-size: clamp(1.8rem, 3.8vw, 2.9rem); }
body .h1:not(#\#)           { font-size: clamp(1.65rem, 2.9vw, 2.35rem); }
body .h2:not(#\#)           { font-size: clamp(1.35rem, 2vw, 1.8rem); }
body .h3:not(#\#)           { font-size: 1.0625rem; }
body .lede:not(#\#)         { font-size: clamp(.97rem, 1.05vw, 1.06rem); }
body .eyebrow:not(#\#)      { font-size: .875rem; }
body .prose:not(#\#)        { font-size: 1rem; }
body .prose h2:not(#\#)     { font-size: clamp(1.2rem, 1.7vw, 1.4rem); }
body .prose h3:not(#\#)     { font-size: 1rem; }
body .prose blockquote:not(#\#) { font-size: 1rem; }
body .article-title:not(#\#) { font-size: clamp(1.65rem, 2.8vw, 2.3rem); }
body .article-standfirst:not(#\#) { font-size: clamp(.97rem, 1.15vw, 1.08rem); }
body .baton-intro:not(#\#)  { font-size: 1rem; }
body .baton-motto:not(#\#)  { font-size: 1rem; }
body .statement:not(#\#)    { font-size: clamp(1rem, 1.25vw, 1.15rem); }
body .baton-name:not(#\#)   { font-size: clamp(1.3rem, 1.9vw, 1.65rem); }
body .baton-num:not(#\#)    { font-size: clamp(2.1rem, 3.2vw, 2.8rem); }
body .baton-lede:not(#\#)   { font-size: 1.125rem; }
body .tier-price b:not(#\#), body .choice-price b:not(#\#) { font-size: 1.35rem; }
body .choice-want:not(#\#)  { font-size: 1.05rem; }
body .story .h3:not(#\#)    { font-size: 1.2rem; }
body .chain li:not(#\#)     { font-size: .9375rem; }
body .ed-title:not(#\#)     { font-size: clamp(1.75rem, 2.9vw, 2.55rem); }
body .ed-side p:not(#\#)    { font-size: clamp(.95rem, 1.05vw, 1.05rem); }
body .ed-card-title:not(#\#) { font-size: clamp(1.9rem, 4.2vw, 3.6rem); }
body .nav-menu > li > a:not(#\#) { font-size: .8125rem; }
@media (min-width: 1301px) and (max-width: 1520px) { body .nav-menu > li > a:not(#\#) { font-size: .78rem; } }
body footer:not(#\#)        { font-size: .84rem; }

/* Smaller hero bubble: narrower box, tighter padding, text scaled to fit */
.ed-curtained .ed-copies:not(#\#) { width: min(450px, calc(100% - 2 * var(--m))); padding: clamp(1.2rem, 2.2vw, 1.75rem) clamp(1.25rem, 2.2vw, 1.75rem) clamp(1.35rem, 2.4vw, 1.9rem); }
.ed-curtained[data-corner="bl"] .ed-copies:not(#\#) { padding-top: clamp(2.2rem, 4vw, 3.2rem); padding-right: clamp(3rem, 6.5vw, 5.5rem); }
.ed-curtained[data-corner="br"] .ed-copies:not(#\#) { padding-top: clamp(2.2rem, 4vw, 3.2rem); padding-left: clamp(3rem, 6.5vw, 5.5rem); }
.ed-curtained[data-corner="tl"] .ed-copies:not(#\#) { padding-bottom: clamp(2.2rem, 4vw, 3.2rem); padding-right: clamp(3rem, 6.5vw, 5.5rem); }
.ed-curtained[data-corner="tr"] .ed-copies:not(#\#) { padding-bottom: clamp(2.2rem, 4vw, 3.2rem); padding-left: clamp(3rem, 6.5vw, 5.5rem); }
.ed-curtained .ed-copies > .ed-copy { gap: .7rem; }
body .ed-curtained .ed-title:not(#\#) { font-size: clamp(1.4rem, 2.2vw, 1.95rem); line-height: 1.12; }
body .ed-curtained .ed-eyebrow:not(#\#) { font-size: .8125rem; margin-bottom: .5rem; }
body .ed-curtained .ed-side p:not(#\#) { font-size: .9375rem; line-height: 1.5; }
.ed-curtained .ed-ctas { margin-top: .9rem; gap: .6rem 1.2rem; }
body .ed-curtained .ed-ctas .btn.btn-hero:not(#\#) { padding: 11px 20px 13px; font-size: .8125rem; }
body .ed-curtained .ed-ctas .hero-link:not(#\#) { font-size: .875rem; }
@media (max-width: 860px) {
  .ed-curtained[data-corner] .ed-copies:not(#\#) { width: auto; padding: 1.9rem 2.4rem 1.4rem 1.2rem; }
}

/* ═════════════ Title lines: red, and they pull their heading into place ═════════════
   Phase 1 (≈0–420ms, ease-out): the line draws out from the page edge, long.
   Phase 2 (≈420–1400ms, ease-in-out, it's moving on screen): it shrinks back to the margin while the
   heading travels the same distance left, so the line reads as pulling the words in.
   The line stays anchored at the page edge because its width grows by exactly the heading's offset. */
main { overflow-x: clip; }
:is(.section-head > .h2:first-child, .section-head > div > .h2:first-child, .sticky-col > .h2:first-child, .page-hero .h1)::before { background: var(--red); }
.pull { --pull: min(34vw, 420px); }
body:not(.no-js) .pull:not(.pulled) { opacity: 0; }
body:not(.no-js) .pull:not(.pulled)::before { width: 0; }
.pull.pulled { animation: pullText 1400ms both; }
.pull.pulled::before { animation: pullLine 1400ms both; }
@keyframes pullText {
  0%   { transform: translateX(var(--pull)); opacity: 0; animation-timing-function: linear; }
  22%  { transform: translateX(var(--pull)); opacity: 0; animation-timing-function: ease-out; }
  30%  { transform: translateX(var(--pull)); opacity: 1; animation-timing-function: var(--ease-in-out); }
  100% { transform: none; opacity: 1; }
}
@keyframes pullLine {
  0%   { width: 0; animation-timing-function: var(--ease-out); }
  30%  { width: calc(var(--gutter) + var(--pull)); animation-timing-function: var(--ease-in-out); }
  100% { width: var(--gutter); }
}
@media (prefers-reduced-motion: reduce) {
  .pull.pulled, .pull.pulled::before { animation: none; }
  body:not(.no-js) .pull:not(.pulled) { opacity: 1; }
}

/* ── Mirrored title lines: every other heading comes in from the right ── */
.pull { --dir: 1; }
.pull-r { --dir: -1; text-align: right; }
.pull-r::before { right: auto !important; left: 100%; margin-right: 0 !important; margin-left: .4em; }
@keyframes pullText {
  0%   { transform: translateX(calc(var(--pull) * var(--dir))); opacity: 0; animation-timing-function: linear; }
  22%  { transform: translateX(calc(var(--pull) * var(--dir))); opacity: 0; animation-timing-function: ease-out; }
  30%  { transform: translateX(calc(var(--pull) * var(--dir))); opacity: 1; animation-timing-function: var(--ease-in-out); }
  100% { transform: none; opacity: 1; }
}
/* Full-width section heads move to the right, with their intro line */
.section-head.head-r { margin-left: auto; text-align: right; }
.section-head.head-r .lede { margin-left: auto; }
.section-head.row.head-r { flex-direction: row-reverse; }
.section-head.row.head-r > div { text-align: right; }
/* Split sections: the heading column swaps to the right */
.split-2.split-flip { grid-template-columns: 1.15fr 1fr; }
.split-2.split-flip > .sticky-col { order: 2; text-align: right; }
.split-2.split-flip > .sticky-col .lede { margin-left: auto; }
@media (max-width: 860px) {
  .split-2.split-flip { grid-template-columns: 1fr; }
  .split-2.split-flip > .sticky-col { order: 0; }
}

/* ═════════════ Header: sos-childrensvillages.org pattern ═════════════
   Thin utility bar (12px, grey) above a white main bar with a #d3dae5 hairline. Menu centred,
   16px/500 grey #5E6468; hover turns SOS blue (200ms ease-out, colour only, like the original).
   On scroll the bar gains their soft drop shadow and the logo eases down (transform only, no layout jump). */
:root { --nav-h: 84px; }
.topbar { background: #fff; border-bottom: 1px solid #d3dae5; font-size: .75rem; color: #5e6468; }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 40px; }
.topbar ul { display: flex; gap: 25px; margin: 0; padding: 0; list-style: none; }
.topbar a { color: #5e6468; text-decoration: none; transition: color 200ms ease-out; }
.topbar a[aria-current] { color: var(--sos-blue); }
@media (hover: hover) and (pointer: fine) { .topbar a:hover { color: var(--sos-blue); } }
@media (max-width: 860px) { .topbar { display: none; } }

body .nav:not(#\#) { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid #d3dae5; transition: box-shadow 200ms ease-out; }
.nav::after { display: none; }
.nav.scrolled { box-shadow: 0 10px 10px rgba(0, 0, 0, .1); }
.nav > .wrap { height: var(--nav-h); gap: 1rem; }
body .nav .logo:not(#\#) { height: 2.5rem; transform-origin: 0 50%; transition: transform 200ms ease-out; }
.nav.scrolled .logo { transform: scale(.85); }
.nav .brand { margin-right: 0; }
.nav-menu { flex: 1; justify-content: center; gap: 0; }
body .nav-menu > li > a:not(#\#) {
  font-size: 1rem; font-weight: 500; line-height: 20px; color: #5e6468;
  padding: 15px 14px; border: 1px solid transparent; border-radius: 10px; background: transparent;
  text-decoration: none; transition: color 200ms ease-out;
}
body .nav-menu > li > a[aria-current]:not(#\#) { color: var(--sos-blue); text-decoration: none; }
.nav-menu > li > a::after { display: none !important; }
@media (hover: hover) and (pointer: fine) {
  body .nav-menu > li > a:not(#\#):hover { color: var(--sos-blue); background: transparent; transform: none; }
}
body .nav-menu > li > a:not(#\#):active { transform: none; background: transparent; }
@media (min-width: 1301px) and (max-width: 1500px) { body .nav-menu > li > a:not(#\#) { font-size: .9375rem; padding: 15px 10px; } body .nav .logo:not(#\#) { height: 2.2rem; } }
@media (max-width: 1300px) { :root { --nav-h: 72px; } body .nav .logo:not(#\#) { height: 2.2rem; } }
@media (max-width: 520px) { body .nav .logo:not(#\#) { height: 2rem; } }
@media (prefers-reduced-motion: reduce) { .nav .logo, .nav.scrolled .logo { transform: none; } }

/* Utility bar: SOS Eswatini social channels, small grey icons like the international site */
.topbar .topbar-social { gap: 18px; align-items: center; }
.topbar-social a { display: grid; place-items: center; width: 22px; height: 22px; color: #5e6468; transition: color 200ms ease-out; }
.topbar-social svg { width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) { .topbar-social a:hover { color: var(--sos-blue); } }

/* ── Donate = red, everywhere; Sponsorship = SOS white button beside it ──
   Same SOS button system (caps, 6px corners, bottom lip, 200ms colour hover); the giving action in the
   brand's accent red so it is unmistakable. Hover deepens the red. */
:root { --donate: #de3c4b; --donate-hover: #b92d3b; }
body a.btn[href*="give-now"]:not(#\#):not(#\#):not(#\#) { background: var(--donate); color: #fff; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18); border-radius: 6px; }
@media (hover: hover) and (pointer: fine) {
  body a.btn[href*="give-now"]:not(#\#):not(#\#):not(#\#):hover { background: var(--donate-hover); color: #fff; }
}
/* Sponsorship: SOS "btn-white" (white, blue label, hairline border) */
body .nav .btn-sponsor:not(#\#):not(#\#) { background: #fff; color: var(--sos-blue); box-shadow: inset 0 0 0 1px #e6e6e6, inset 0 -2px 0 rgba(0, 0, 0, .06); }
@media (hover: hover) and (pointer: fine) { body .nav .btn-sponsor:not(#\#):not(#\#):hover { background: #f3f5f8; color: #5e6468; } }
.nav .btn-sponsor { margin-right: -.4rem; }
.menu-sheet .btn + .btn { margin-top: .5rem; }
.nav .btn-sponsor { margin-right: 0; }
@media (min-width: 1301px) and (max-width: 1560px) {
  body .nav-menu > li > a:not(#\#) { font-size: .9rem; padding: 15px 8px; }
  body .nav .logo:not(#\#) { height: 2.1rem; }
  body .nav .btn.btn-sm:not(#\#) { padding: 9px 13px 11px; }
}
@media (min-width: 1301px) and (max-width: 1380px) { body .nav-menu > li > a:not(#\#) { font-size: .85rem; padding: 15px 6px; } }
/* Footer: brand + four link columns + newsletter on one row */
@media (min-width: 1061px) { .foot-grid { grid-template-columns: 1.25fr repeat(4, minmax(0, 1fr)) 1.35fr; gap: 1.25rem 1.75rem; } }

/* Phones/tablets: hamburger pinned to the far right; utility bar keeps the social icons */
@media (max-width: 1300px) {
  .nav > .wrap > .menu-btn { margin-left: auto; margin-right: -10px; }
}
@media (max-width: 860px) {
  .topbar { display: block; }
  .topbar .wrap { height: 36px; }
  .topbar ul:not(.topbar-social) { display: none; }
  .topbar .topbar-social { gap: 14px; }
  .topbar-social a { width: 32px; height: 32px; }   /* comfortable tap target */
  .topbar-social svg { width: 16px; height: 16px; }
}

/* ── Official SOS icon set ── */
/* Social logos as masks, so they take the link colour (grey → SOS blue on hover) */
.soc-ic { display: block; width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.share .soc-ic { width: 18px; height: 18px; color: var(--sos-blue); }
/* Illustrated icons (brand blue as supplied) above pathway titles */
.sos-ic { display: block; width: 56px; height: 56px; object-fit: contain; margin: 0 0 .75rem; }
.baton-index a { align-items: flex-start; }
.baton-index .sos-ic { width: 52px; height: 52px; margin-bottom: .5rem; }
.choice .sos-ic { margin-bottom: .4rem; }
/* Trimmed icons: one consistent visual size, aligned to the text's left edge */
.sos-ic { width: 52px; height: 52px; object-fit: contain; object-position: left center; }
.baton-index .sos-ic { width: 48px; height: 48px; }
.soc-ic { width: 17px; height: 17px; }

/* ═════════════ Donate panel: MoMo / Bank transfer ═════════════
   Segmented tabs; the white thumb slides between options (moving on screen → ease-in-out, 240ms —
   used occasionally, so a touch of motion helps show "this replaced that"). Panels swap instantly:
   donors come here to act, not to watch. */
.donate-panel { background: #fff; border: 1px solid #d3dae5; border-radius: 10px; padding: clamp(1.25rem, 2.5vw, 2rem); box-shadow: 0 10px 30px rgba(28, 50, 93, .06); }
.dp-tabs { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; margin-bottom: 1.4rem; background: #f3f5f8; border: 1px solid #d3dae5; border-radius: 10px; }
.dp-tab { position: relative; z-index: 1; padding: 10px 18px; border: 0; background: none; cursor: pointer; border-radius: 7px;
  font: inherit; font-size: .875rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #5e6468;
  transition: color 200ms ease-out; -webkit-tap-highlight-color: transparent; }
.dp-tab[aria-selected="true"] { color: var(--sos-blue); }
.dp-tab:focus-visible { outline: 2px solid var(--sos-blue); outline-offset: 2px; }
.dp-thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: 0; background: #fff; border-radius: 7px;
  box-shadow: 0 1px 2px rgba(28, 50, 93, .12), 0 2px 8px rgba(28, 50, 93, .08); transition: transform 240ms var(--ease-in-out), width 240ms var(--ease-in-out); }
@media (hover: hover) and (pointer: fine) { .dp-tab[aria-selected="false"]:hover { color: var(--dark); } }
.dp-lede { margin: 0 0 1rem; color: var(--text-2); }
.dp-number { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.25rem; margin-bottom: 1.25rem;
  background: var(--brand-20); border-radius: 8px; }
.dp-number span { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 900; letter-spacing: .02em; color: var(--dark); font-variant-numeric: tabular-nums; }
.dp-steps { margin: 0 0 1.25rem; padding: 0; list-style: none; counter-reset: dps; display: grid; gap: .7rem; }
.dp-steps li { position: relative; padding-left: 2.4rem; color: var(--text); line-height: 1.5; }
.dp-steps li::before { counter-increment: dps; content: counter(dps); position: absolute; left: 0; top: -.1rem; width: 1.7rem; height: 1.7rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--sos-blue); color: #fff; font-size: .8125rem; font-weight: 700; }
.dp-note { margin: 0; font-size: .875rem; color: var(--text-2); }
.dp-note a { color: var(--dark); text-decoration: underline; text-decoration-color: var(--sos-blue); text-underline-offset: 3px; }
.dp-rows { margin: 0 0 1.1rem; }
.dp-rows .row { display: grid; grid-template-columns: 9rem 1fr auto; gap: .5rem 1rem; align-items: center; padding: .75rem 0; border-bottom: 1px solid #e6ebf1; }
.dp-rows dt { color: var(--text-2); font-size: .875rem; }
.dp-rows dd { margin: 0; font-weight: 700; color: var(--dark); }
.donate-panel .copy { padding: 6px 12px; border-radius: 6px; border: 1px solid #d3dae5; background: #fff; color: var(--sos-blue); font: inherit; font-size: .75rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; cursor: pointer; transition: background-color 200ms ease-out, color 200ms ease-out, transform 140ms var(--ease-out); }
.donate-panel .copy:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .donate-panel .copy:hover { background: #f3f5f8; } }
.donate-panel .copy.done { background: #1f9d55; border-color: #1f9d55; color: #fff; }
@media (max-width: 520px) { .dp-rows .row { grid-template-columns: 1fr auto; } .dp-rows dt { grid-column: 1 / -1; } .dp-tabs { display: grid; width: 100%; } }
@media (prefers-reduced-motion: reduce) { .dp-thumb { transition: none; } }
.donate-panel .dp-rows .row:not(#\#) { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; }
.donate-panel .dp-rows dt:not(#\#) { grid-column: 1; order: 0; }
.donate-panel .dp-rows dd:not(#\#) { grid-column: 2; order: 0; text-align: left; }
.donate-panel .dp-rows .copy:not(#\#) { grid-column: 3; order: 0; width: auto; justify-self: end; }
@media (max-width: 520px) {
  .donate-panel .dp-rows .row:not(#\#) { grid-template-columns: minmax(0, 1fr) auto; }
  .donate-panel .dp-rows dt:not(#\#) { grid-column: 1 / -1; }
  .donate-panel .dp-rows dd:not(#\#) { grid-column: 1; }
  .donate-panel .dp-rows .copy:not(#\#) { grid-column: 2; }
}

/* ── Online donations ── */
.dp-test { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 1rem; padding: 5px 10px; border-radius: 999px; background: #fff4d6; color: #7a5300; font-size: .75rem; font-weight: 700; }
.dp-test::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #e0a100; }
.dp-test[hidden] { display: none; }
.dp-amounts { border: 0; margin: 0 0 1.25rem; padding: 0; min-width: 0; }
.dp-amounts legend { padding: 0; margin-bottom: .6rem; font-size: .875rem; font-weight: 700; color: var(--dark); }
.dp-chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
.dp-chips label { position: relative; cursor: pointer; }
.dp-chips input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.dp-chips label > span { display: grid; place-items: center; height: 48px; border: 1px solid #d3dae5; border-radius: 8px; background: #fff; font-weight: 700; color: var(--dark);
  transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out, transform 120ms var(--ease-out); }
.dp-chips input:checked + span { background: var(--sos-blue); border-color: var(--sos-blue); color: #fff; }
.dp-chips input:focus-visible + span { outline: 2px solid var(--sos-blue); outline-offset: 2px; }
.dp-chips label:active > span { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .dp-chips input:not(:checked) + span:hover { border-color: var(--sos-blue); } }
.dp-other { display: flex; align-items: center; height: 48px; border: 1px solid #d3dae5; border-radius: 8px; background: #fff; padding: 0 .6rem; }
.dp-other:focus-within { border-color: var(--sos-blue); box-shadow: 0 0 0 3px rgba(0, 167, 228, .15); }
.dp-other b { color: var(--text-2); margin-right: .25rem; }
.dp-other input { width: 100%; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-weight: 700; color: var(--dark); padding: 0; }
.dp-impact { margin: .6rem 0 0; min-height: 1.4em; font-size: .875rem; color: var(--text-2); }
.dp-tabs { display: grid; }
.dp-form .field { margin-bottom: 1rem; }
.dp-phone { display: flex; align-items: stretch; border: 1px solid #d3dae5; border-radius: 8px; overflow: hidden; background: #fff; }
.dp-phone span { display: grid; place-items: center; padding: 0 .8rem; background: #f3f5f8; color: var(--text-2); font-weight: 700; border-right: 1px solid #d3dae5; }
.dp-phone input { flex: 1; min-width: 0; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.field.invalid .dp-phone { border-color: #c0392b; }
.dp-pay { width: 100%; justify-content: center; }
.dp-pay.is-busy { opacity: .75; pointer-events: none; }
.dp-pay.is-busy span::after { content: "…"; }
.dp-fine { margin: .75rem 0 0; font-size: .8125rem; color: var(--text-2); }
.dp-fx { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin-top: .75rem; font-size: .8125rem; color: var(--text-2); }
.dp-fx label { margin: 0; font: inherit; color: inherit; }
.dp-fx select { width: auto; max-width: 100%; min-height: 36px; padding: .25rem .5rem; font: inherit; font-size: 16px; color: var(--dark); background: transparent; border: 1px solid rgba(0, 0, 0, .18); border-radius: 8px; }
.dp-fx-out { flex-basis: 100%; margin: 0; color: var(--dark); }
.dp-abroad { margin: 1rem 0 0; font-size: .8125rem; color: var(--text-2); }
.dp-abroad b { color: var(--dark); }
.dp-sub { margin: 0 0 .6rem; font-size: 1rem; }
/* Waiting for the MoMo approval: a calm pulse (constant → linear), stops when done */
.dp-status { text-align: center; padding: 1.5rem 0 .5rem; }
.dp-phone-pulse { position: relative; width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%; background: var(--brand-20); display: grid; place-items: center; }
.dp-phone-pulse span { width: 22px; height: 36px; border: 3px solid var(--sos-blue); border-radius: 6px; }
.dp-phone-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--sos-blue); animation: dpPulse 1.6s linear infinite; }
@keyframes dpPulse { from { transform: scale(1); opacity: .7; } to { transform: scale(1.6); opacity: 0; } }
.dp-status[data-state="done"] .dp-phone-pulse::after, .dp-status[data-state="failed"] .dp-phone-pulse::after { animation: none; opacity: 0; }
.dp-status[data-state="failed"] .dp-phone-pulse span { border-color: #c0392b; }
.dp-status-text { margin: .4rem auto 1.25rem; max-width: 36ch; color: var(--text-2); }
.dp-cancel { border: 0; background: none; color: var(--dark); font: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--sos-blue); text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 560px) { .dp-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dp-other { grid-column: span 2; } }
@media (prefers-reduced-motion: reduce) { .dp-phone-pulse::after { animation: none; opacity: .4; } }
.thanks .h1 { max-width: 20ch; }
.dp-tabs[hidden], .dp-amounts[hidden], .dp-status[hidden] { display: none !important; }
/* Four payment tabs: compact labels; wrap to two rows on phones */
.dp-tabs { grid-auto-columns: minmax(0, 1fr); }
.dp-tab { padding: 10px 8px; font-size: .8125rem; white-space: nowrap; }
@media (max-width: 560px) { .dp-tabs { grid-auto-flow: row; grid-template-columns: 1fr 1fr; } .dp-thumb { display: none; } .dp-tab[aria-selected="true"] { background: #fff; box-shadow: 0 1px 2px rgba(28,50,93,.12); } }
.dp-or { margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid #e6ebf1; font-size: .875rem; color: var(--text-2); }
.dp-or .copy { margin-left: .25rem; vertical-align: 1px; }
.dp-wallets { display: grid; gap: .75rem; }
.dp-wallet { padding: 1rem 1.1rem; border: 1px solid #e6ebf1; border-radius: 8px; }
.dp-wallet h4 { margin: 0 0 .2rem; font-size: 1rem; color: var(--dark); }
.dp-wallet .dp-fine { margin: 0 0 .6rem; }
.dp-tbc { margin: 0; display: inline-block; padding: 4px 10px; border-radius: 999px; background: #f3f5f8; color: var(--text-2); font-size: .75rem; font-weight: 700; }
.dp-number-sm { padding: .6rem .9rem; margin: 0; }
.dp-number-sm span { font-size: 1.25rem; }
.dp-lede a, .dp-fine a { color: var(--dark); text-decoration: underline; text-decoration-color: var(--sos-blue); text-underline-offset: 3px; }

/* ═════════════ Video cards (episode series) ═════════════
   Poster in the SOS bubble shape with a play button; text and a Donate button beside it.
   Placeholder state ("Video coming soon") is dimmed and not clickable until a YouTube ID is added. */
.vcard { display: grid; gap: 1.1rem; }
.vcard-wide { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.vc-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--brand-20);
  border-radius: 0 0 var(--curve) 0; isolation: isolate; text-decoration: none; }
.vc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.vc-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(28, 50, 93, .55), rgba(28, 50, 93, .05) 55%); }
.vc-play { position: absolute; z-index: 1; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: var(--sos-blue); box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  transition: transform 200ms var(--ease-out), background-color 200ms ease-out, color 200ms ease-out; }
.vc-play svg { width: 30px; height: 30px; margin-left: 4px; }
.vc-tag { position: absolute; z-index: 1; left: 1rem; bottom: .9rem; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .92);
  color: var(--dark); font-size: .75rem; font-weight: 700; }
.vc-media.is-soon .vc-play { opacity: .7; }
.vc-media.is-soon img { filter: saturate(.75); }
a.vc-media:active .vc-play { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  a.vc-media:hover img { transform: scale(1.03); }
  a.vc-media:hover .vc-play { background: var(--sos-blue); color: #fff; transform: scale(1.06); }
}
.vc-body .eyebrow { margin-bottom: .5rem; }
.vc-body .h3 { margin: 0 0 .5rem; font-size: clamp(1.2rem, 1.8vw, 1.5rem); }
.vc-body p { margin: 0 0 1.1rem; color: var(--text-2); }
.vcard-wide .vc-body .h3 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); }
.vgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.vgrid .vc-media { border-radius: 0 0 34% 0 / 0 0 40% 0; }
.vgrid .vc-play { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
.vgrid .vc-play svg { width: 24px; height: 24px; }
@media (max-width: 960px) { .vgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .vcard-wide { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .vgrid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .vc-media img, .vc-play { transition: none; } }
/* Play button on a page-top photo (inner pages): sits under the reveal curtain, above the photo */
.banner-play { position: absolute; inset: 0; z-index: 2; display: block; text-decoration: none; }
.banner-play::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(28, 50, 93, .45), transparent 55%); }
@media (hover: hover) and (pointer: fine) { .banner-play:hover .vc-play { background: var(--sos-blue); color: #fff; transform: scale(1.06); } }
.banner-play:active .vc-play { transform: scale(.94); }
/* Inline programme video (Our work): replaces the section photo, same bubble shape */
.vc-inline { border-radius: 0 0 34% 0 / 0 0 40% 0; }
.vc-inline .vc-play { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
.vc-inline .vc-play svg { width: 26px; height: 26px; }
.band-rich .vc-inline .vc-tag { background: #fff; }
.banner .photo:has(.banner-play) figcaption { display: none; }
.dp-status-text { overflow-wrap: anywhere; }
.dp-mini-steps { margin: 0 0 .7rem; padding-left: 1.2rem; font-size: .875rem; color: var(--text-2); display: grid; gap: .2rem; }
.dp-mini-steps b { color: var(--dark); }

/* ── Payment brand logos ── */
.pl { display: inline-block; height: 28px; width: auto; object-fit: contain; vertical-align: middle; flex: none; }
.pl-tab { height: 18px; margin-right: .45rem; vertical-align: -4px; }
.pl-tab.pl-visa { height: 11px; vertical-align: 0; }
.pl-lg { height: 40px; }
.pl-lg.pl-visa { height: 20px; }
.pl-pair { display: inline-flex; align-items: center; gap: .6rem; }
.dp-brand { display: flex; align-items: center; gap: .9rem; margin: 0 0 1.1rem; padding: .8rem 1rem; border: 1px solid #e6ebf1; border-radius: 8px; background: #fff; }
.dp-brand span:last-child { display: flex; flex-direction: column; line-height: 1.3; }
.dp-brand b { color: var(--dark); font-size: .9375rem; }
.dp-brand small { color: var(--text-2); font-size: .8125rem; }
.dp-wallet-h { display: flex; align-items: center; gap: .65rem; }
.dp-wallet-h .pl { height: 26px; }
.dp-wallet-h .pl-dark { height: 30px; padding: 4px 8px; border-radius: 5px; background: #1c325d; }
.pl-blank { width: 26px; height: 26px; border-radius: 6px; background: #f3f5f8; }
.dp-tab { display: inline-flex; align-items: center; justify-content: center; }
.dp-tab:not([aria-selected="true"]) .pl-tab { filter: grayscale(1); opacity: .65; transition: filter 200ms ease-out, opacity 200ms ease-out; }
@media (hover: hover) and (pointer: fine) { .dp-tab:hover .pl-tab { filter: none; opacity: 1; } }
@media (max-width: 560px) { .dp-brand { padding: .7rem .8rem; } .pl-lg { height: 34px; } }

/* ═════════════ SOS feedback, Oct 2026 — landing page structure, product tiles, impact, payment page ═════════════ */

/* Initiative banner: "Pass on the Baton", brand blue with the bubble curve, right under the hero */
.initiative { position: relative; background: var(--brand); color: #fff; padding: clamp(3.5rem, 7vw, 6rem) 0;
  border-bottom-right-radius: var(--curve); overflow: hidden; }
.initiative-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.initiative-kicker { margin: 0 0 .75rem; display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: .9375rem; color: #fff; }
.initiative-kicker::before { content: ""; width: 28px; height: 3px; background: #fff; }
body .initiative-title:not(#\#) { margin: 0; font-size: clamp(2.4rem, 5.4vw, 4.25rem); font-weight: 900; line-height: 1; letter-spacing: -0.01em; color: #fff; }
.initiative-lead { margin: 1.25rem 0 0; font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.45; color: #fff; max-width: 28em; }
.initiative-body p { margin: 0 0 1rem; font-size: 1.0625rem; line-height: 1.6; color: rgba(255, 255, 255, .94); }
.initiative-body b, .initiative-lead b { color: #fff; }
.initiative-call { grid-column: 1 / -1; margin: clamp(.5rem, 2vw, 1.5rem) 0 0; padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 3vw, 2.25rem);
  background: var(--dark); color: #fff; font-weight: 700; font-size: clamp(1.1rem, 1.9vw, 1.45rem); line-height: 1.35;
  border-radius: 0 0 clamp(36px, 6vw, 90px) 0; }

/* Product tiles (alloutafrica.com-style: photo, label, pitch, Explore) that open a detail panel */
.ptiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.pt { scroll-margin-top: calc(var(--nav-h) + 24px); }
.pt-link { height: 100%; display: flex; flex-direction: column; background: #fff; color: var(--dark); text-decoration: none;
  border-radius: 0 0 var(--curve) 0; overflow: hidden; box-shadow: var(--shadow-sm); -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out), box-shadow 220ms ease; }
.pt-link:active { transform: scale(.98); }
.pt-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--brand-20); }
.pt-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.pt-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(28, 50, 93, .45), transparent 55%); }
.pt-media .vc-play { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
.pt-body { flex: 1; display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem 1.25rem 1.4rem; }
.pt-num { font-size: .8125rem; font-weight: 900; color: var(--brand); }
.pt-cat { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em !important; color: var(--dark-2); }
.pt-name { font-size: 1.1875rem; font-weight: 700; line-height: 1.2; color: var(--dark); }
.pt-pitch { margin-top: .2rem; font-size: .9375rem; line-height: 1.45; color: var(--text-2); }
.pt-foot { margin-top: auto; padding-top: 1rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.pt-price { font-size: .875rem; color: var(--text-2); }
.pt-price b { color: var(--dark); font-weight: 900; }
.pt-more { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: .875rem; color: var(--dark);
  padding: .5rem .85rem; border-radius: 999px; background: var(--brand-20); }
.pt-more svg { width: 14px; height: 14px; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .pt-link:hover { box-shadow: var(--shadow-lg); }
  .pt-link:hover .pt-media img { transform: scale(1.04); }
  .pt-link:hover .pt-more svg { transform: translateX(3px); }
}
.pt-link:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }

/* Legacy & transformational giving */
.legacy { margin-top: clamp(1.5rem, 3vw, 2.25rem); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) auto; gap: 1.25rem 2.5rem; align-items: center;
  background: #fff; padding: clamp(1.25rem, 3vw, 2rem); border-left: 4px solid var(--red); }
.legacy .eyebrow { margin: 0 0 .35rem; }
.legacy .h3 { margin: 0 0 .35rem; }
.legacy .muted { margin: 0; font-size: .9375rem; }
.legacy-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1.25rem; }
.legacy-list li { position: relative; padding-left: 1.1rem; font-size: .9375rem; font-weight: 500; }
.legacy-list li::before { content: ""; position: absolute; left: 0; top: .7em; width: .6rem; height: 2px; background: var(--red); }

/* Product detail panel: centred modal on desktop, bottom sheet on phones. Enter 260ms, exit 180ms. */
html:has(.pdialog[open]) { overflow: hidden; }
.pdialog { width: min(880px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 48px); padding: 0; border: 0;
  border-radius: 0 0 var(--curve) 0; background: #fff; color: var(--dark); overflow: hidden;
  box-shadow: 0 30px 80px rgba(10, 20, 40, .35);
  opacity: 0; transform: translateY(12px) scale(.98);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), overlay 180ms allow-discrete, display 180ms allow-discrete; }
.pdialog[open] { opacity: 1; transform: none; transition-duration: 260ms; }
@starting-style { .pdialog[open] { opacity: 0; transform: translateY(12px) scale(.98); } }
.pdialog::backdrop { background: rgba(10, 20, 40, 0); transition: background-color 180ms, overlay 180ms allow-discrete, display 180ms allow-discrete; }
.pdialog[open]::backdrop { background: rgba(10, 20, 40, .6); transition-duration: 260ms; }
@starting-style { .pdialog[open]::backdrop { background: rgba(10, 20, 40, 0); } }
.pd-scroll { position: relative; max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain; }
.pd-close { position: absolute; z-index: 3; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: rgba(255, 255, 255, .94); color: var(--dark); box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
  -webkit-tap-highlight-color: transparent; transition: transform 140ms var(--ease-out); }
.pd-close svg { width: 18px; height: 18px; }
.pd-close:active { transform: scale(.92); }
.pd-media { position: relative; display: block; aspect-ratio: 16 / 7; overflow: hidden; background: var(--brand-20); }
.pd-media img { width: 100%; height: 100%; object-fit: cover; }
.pd-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(28, 50, 93, .5), transparent 60%); }
.pd-media.is-soon img { filter: saturate(.85); }
.pd-body { padding: clamp(1.25rem, 3.5vw, 2.5rem); }
.pd-body > .eyebrow { margin: 0 0 .6rem; }
body .pd-title:not(#\#) { margin: 0; font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 700; line-height: 1.1; }
.pd-en { margin: .5rem 0 0; color: var(--text-2); }
.pd-en b { color: var(--dark); }
.pd-focus { list-style: none; margin: 1.1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.pd-focus li, .pd-chips li { padding: .35rem .75rem; border-radius: 999px; background: var(--brand-20); font-size: .8125rem; font-weight: 600; }
.pd-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.pd-h { margin: 2rem 0 .8rem !important; font-size: 1rem !important; }
.pd-note { margin: 1rem 0 0; color: var(--text-2); font-size: .9375rem; }

/* Giving levels: amount → what it does (each row starts a donation with that amount) */
.give-levels { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--brand); }
.give-levels li { border-bottom: 1px solid var(--line); }
.give-levels li > span, .gl-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; gap: .25rem 1rem; align-items: baseline; padding: .85rem 0; }
.gl-row { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; border-radius: 4px;
  transition: background-color 160ms ease, transform 140ms var(--ease-out); }
.gl-row:active { transform: scale(.99); background: var(--brand-10); }
.gl-amt b { font-size: 1.25rem; font-weight: 900; color: var(--dark); }
.gl-amt small { display: block; font-size: .75rem; color: var(--text-2); }
.gl-text { font-size: .9375rem; line-height: 1.45; color: var(--text-2); }
.gl-go { align-self: center; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-20); color: var(--dark);
  transition: transform 200ms var(--ease-out), background-color 160ms ease, color 160ms ease; }
.gl-go svg { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) {
  .gl-row:hover { background: var(--brand-10); }
  .gl-row:hover .gl-go { background: var(--red); color: #fff; transform: translateX(2px); }
}
.pd-quote { margin: 1.75rem 0 0; padding: 1.1rem 1.25rem; background: var(--brand-10); border-left: 4px solid var(--brand); font-size: 1.1875rem; line-height: 1.4; }
.pd-quote small { display: block; margin-bottom: .3rem; font-family: var(--font) !important; font-style: normal !important; font-weight: 700; font-size: .8125rem; color: var(--dark-2); }
.pd-ways { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.pd-ways > div { padding: 1rem 1.1rem; border: 1.5px solid var(--brand-20); }
.pd-ways b { display: block; margin-bottom: .3rem; }
.pd-ways p { margin: 0; font-size: .9063rem; color: var(--text-2); }
.pd-stats { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.pd-stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .3rem; padding: 1rem; background: #fff; }
.pd-stats dd { margin: 0; font-size: 1.75rem; font-weight: 900; line-height: 1; color: var(--brand); font-variant-numeric: tabular-nums; }
.pd-stats dt { font-size: .875rem; line-height: 1.35; color: var(--text-2); }
.pd-story { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 1rem; align-items: center; color: inherit; text-decoration: none;
  background: var(--brand-10); border-radius: 0 0 32px 0; overflow: hidden; transition: transform 140ms var(--ease-out); }
a.pd-story:active { transform: scale(.99); }
.pd-story img { width: 100%; height: 100%; min-height: 104px; object-fit: cover; }
.pd-story > span { display: flex; flex-direction: column; gap: .25rem; padding: .9rem 1rem .9rem 0; }
.pd-story small { font-weight: 700; color: var(--dark-2); font-size: .8125rem; }
.pd-story b { line-height: 1.3; }
.pd-story .muted { font-size: .875rem; }
.pd-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.pd-fine { margin: 1.25rem 0 0; font-size: .8125rem; color: var(--text-2); }
.pd-fine a { color: var(--dark); }
@media (max-width: 640px) {
  .pdialog { width: 100vw; max-height: 92dvh; margin: auto 0 0; border-radius: 18px 18px 0 0; transform: translateY(100%);
    transition-timing-function: var(--ease-drawer); }
  .pdialog[open] { transform: none; transition-duration: 380ms; }
  @starting-style { .pdialog[open] { opacity: 1; transform: translateY(100%); } }
  .pdialog { opacity: 1; }
  .pd-scroll { max-height: 92dvh; }
  .pd-media { aspect-ratio: 16 / 9; }
  .give-levels li > span, .gl-row { grid-template-columns: 5.5rem minmax(0, 1fr) auto; }
  .pd-ways { grid-template-columns: 1fr; }
  .pd-story { grid-template-columns: 96px minmax(0, 1fr); }
}

/* Our impact in Eswatini */
.impact-head { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--brand); }
.ih { padding: 1.4rem 1.25rem 1.6rem 0; }
.ih + .ih { padding-left: 1.25rem; border-left: 1px solid var(--line); }
.ih b { display: block; font-size: clamp(2.4rem, 4.6vw, 3.75rem); font-weight: 900; line-height: 1; color: var(--brand); font-variant-numeric: tabular-nums; }
.ih span { display: block; margin-top: .6rem; color: var(--text-2); font-size: .9688rem; line-height: 1.35; }
.impact-progs { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.ip { padding: 1.25rem 1.25rem 1.1rem; background: var(--brand-10); border-radius: 0 0 36px 0; }
.ip-h { margin: 0 0 .75rem !important; font-size: .9375rem !important; text-transform: uppercase; letter-spacing: .05em !important; color: var(--dark); }
.ip ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ip li { display: grid; grid-template-columns: auto 1fr; gap: .65rem; align-items: baseline; }
.ip li b { font-size: 1.25rem; font-weight: 900; color: var(--dark); font-variant-numeric: tabular-nums; }
.ip li span { font-size: .875rem; line-height: 1.35; color: var(--text-2); }

/* How your support creates lasting change — 5-icon horizontal infographic */
.journey { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; }
.journey::before { content: ""; position: absolute; left: 10%; right: 10%; top: 44px; height: 2px; background: var(--brand);
  transform-origin: left; transform: scaleX(0); transition: transform 900ms var(--ease-in-out) 120ms; }
.journey.is-in::before, .no-js .journey::before { transform: none; }
.journey li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .45rem; }
.jy-ic { position: relative; width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; background: #fff;
  box-shadow: 0 0 0 2px var(--brand), 0 6px 18px rgba(28, 50, 93, .1); margin-bottom: .6rem; }
.jy-ic img { width: 56px; height: 56px; object-fit: contain; }

.journey b { font-size: 1.0625rem; }
.journey li > span:last-child { font-size: .9063rem; line-height: 1.45; color: var(--text-2); }
.journey li { opacity: 0; transform: translateY(10px); transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); transition-delay: calc(var(--i) * 70ms + 150ms); }
.journey.is-in li, .no-js .journey li { opacity: 1; transform: none; }

/* What you receive (donor recognition benefits) */
.benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.benefits.one { grid-template-columns: 1fr; }
.benefit { padding: 1.5rem 1.5rem 1.6rem; background: var(--brand-10); border-radius: 0 0 var(--curve) 0; }
.benefit .sos-ic { width: 52px; height: 52px; }
.benefit .h3 { margin: .9rem 0 0; }
.benefit .checks { margin-top: 1rem; }
.benefits.one .benefit { background: transparent; padding: 0; }
.benefits.one .benefit .sos-ic, .benefits.one .benefit .h3 { display: none; }
.benefits.one .checks { margin-top: 0; }

/* Stories of change */
.change-stories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.cs { display: flex; flex-direction: column; gap: .35rem; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform 160ms var(--ease-out); }
a.cs:active { transform: scale(.985); }
.cs-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: .75rem; border-radius: 0 0 var(--curve) 0; background: var(--brand-20); }
.cs-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.cs-kind { font-size: .8125rem; font-weight: 700; color: var(--dark-2); }
.cs b { font-size: 1.1875rem; line-height: 1.25; }
.cs-text { color: var(--text-2); font-size: .9375rem; }
.cs .link-arrow { margin-top: .35rem; }
@media (hover: hover) and (pointer: fine) { a.cs:hover .cs-media img { transform: scale(1.04); } a.cs:hover .link-arrow svg { transform: translateX(3px); } }

/* Why partner with SOS */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1.25rem, 3vw, 2.5rem); }
.pillar { padding: 1.5rem 0 1.75rem; border-top: 1px solid var(--line); }
.pillar .sos-ic { width: 52px; height: 52px; }
.pillar .h3 { margin: .8rem 0 .4rem; }
.pillar p { margin: 0; color: var(--text-2); font-size: .9688rem; }

/* Corporate & SME partnership */
.partner-band .partner-benefits li { font-weight: 600; }

/* Transparency & accountability */
.trust { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.trust a { height: 100%; display: flex; flex-direction: column; gap: .4rem; padding: 1.25rem 1.2rem 1.35rem; background: #fff; color: inherit; text-decoration: none;
  border-top: 3px solid var(--brand); -webkit-tap-highlight-color: transparent; transition: transform 160ms var(--ease-out), box-shadow 220ms ease; }
.trust a:active { transform: scale(.98); }
.trust b { font-size: 1rem; }
.trust span:not(.link-arrow) { color: var(--text-2); font-size: .875rem; line-height: 1.4; }
.trust .link-arrow { margin-top: auto; padding-top: .5rem; font-size: .875rem; }
@media (hover: hover) and (pointer: fine) { .trust a:hover { box-shadow: var(--shadow-sm); } .trust a:hover .link-arrow svg { transform: translateX(3px); } }

/* Payment page: "What can my contribution do?" */
.contrib-do { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--brand); }
.contrib-do a { display: grid; grid-template-columns: 9rem 1.5rem minmax(0, 1fr); gap: .75rem; align-items: baseline; padding: 1.05rem 0; border-bottom: 1px solid var(--line);
  color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background-color 160ms ease; }
.contrib-do b { font-size: 1.25rem; font-weight: 900; color: var(--dark); }
.cd-arrow { color: var(--brand); font-weight: 700; transition: transform 200ms var(--ease-out); }
.contrib-do span:last-child { font-size: 1.0625rem; }
@media (hover: hover) and (pointer: fine) { .contrib-do a:hover { background: var(--brand-10); } .contrib-do a:hover .cd-arrow { transform: translateX(4px); } }

/* Payment page: a card per product, each level a donate button */
.gproducts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.gp { display: flex; flex-direction: column; padding: clamp(1.25rem, 2.5vw, 1.75rem); background: #fff; border-radius: 0 0 var(--curve) 0; scroll-margin-top: calc(var(--nav-h) + 24px); }
.gp-head { display: flex; gap: .9rem; align-items: center; margin-bottom: 1.1rem; }
.gp-head .sos-ic { width: 52px; height: 52px; flex: none; }
.gp-head .h3 { margin: 0; }
.gp-name { margin: .15rem 0 0; color: var(--text-2); font-size: .875rem; }
.gp .pd-quote { font-size: 1.0625rem; margin-top: 1.25rem; }
.gp > .btn { margin-top: 1.25rem; align-self: flex-start; }
.gp.is-chosen { box-shadow: 0 0 0 2px var(--brand), var(--shadow-sm); }
.secure-note { display: inline-flex; align-items: center; gap: .5rem; margin: 1.25rem 0 0; font-weight: 700; color: var(--dark); }
.secure-note svg { width: 22px; height: 22px; color: var(--brand); }
.dp-chosen { margin: 1rem 0 0; padding: .8rem 1rem; background: var(--brand-10); border-left: 3px solid var(--brand); font-size: .9375rem; }
.understand { max-width: 880px; padding: clamp(1.25rem, 3vw, 2rem); background: var(--brand-10); border-radius: 0 0 var(--curve) 0; }
.understand .h3 { margin: 0 0 .75rem; }
.understand p { margin: 0 0 .75rem; color: var(--text-2); }
.understand p:last-child { margin: 0; color: var(--dark); }

/* Donor journey (8 steps) */
.donor-journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.donor-journey li { display: flex; flex-direction: column; gap: .35rem; padding: 1.25rem 1.25rem 1.4rem; background: #fff; border-top: 3px solid var(--brand); }
.donor-journey li:last-child { border-top-color: var(--red); }
.dj-n { font-size: .8125rem; font-weight: 900; color: var(--brand); }
.donor-journey b { font-size: 1.0625rem; }
.donor-journey i { font-style: normal; font-weight: 600; font-size: .875rem; color: var(--dark-2); }
.donor-journey p { margin: .25rem 0 0; font-size: .9063rem; line-height: 1.45; color: var(--text-2); }
.donor-journey .dj-msg { margin-top: auto; padding-top: .75rem; color: var(--dark); font-weight: 600; font-size: .875rem; }

/* Responsive */
@media (max-width: 1060px) {
  .ptiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legacy { grid-template-columns: 1fr; }
  .trust { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .donor-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .impact-head { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ih:nth-child(3) { padding-left: 0; border-left: 0; }
  .ih:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 860px) {
  .initiative-grid { grid-template-columns: 1fr; }
  .journey { grid-template-columns: 1fr; gap: 0; }
  .journey::before { left: 43px; right: auto; top: 44px; bottom: 44px; width: 2px; height: auto; transform-origin: top; transform: scaleY(0); }
  .journey.is-in::before { transform: none; }
  .journey li { display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 1.1rem; text-align: left; align-items: start; padding-bottom: 1.25rem; }
  .jy-ic { grid-row: span 2; margin: 0; }
  .journey b { align-self: end; padding-top: 1.1rem; }
  .benefits, .change-stories, .pillars { grid-template-columns: 1fr; }
  .gproducts { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ptiles { grid-template-columns: 1fr; }
  .legacy-list { grid-template-columns: 1fr; }
  .trust { grid-template-columns: 1fr; }
  .donor-journey { grid-template-columns: 1fr; }
  .contrib-do a { grid-template-columns: 1fr; gap: .15rem; }
  .cd-arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .journey::before, .journey li { transition: opacity 200ms ease; transform: none !important; }
  .pdialog, .pdialog[open] { transform: none !important; }
}
.impact-progs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.impact-progs > .ip:first-child { grid-row: span 2; }
@media (max-width: 1060px) { .impact-progs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .impact-progs { grid-template-columns: 1fr; } .impact-progs > .ip:first-child { grid-row: auto; } }

/* Tiles: a smaller curve so it never clips the Explore pill */
.pt-link { border-radius: 0 0 56px 0; }
.pt-body { padding-bottom: 1.6rem; }
.pt-foot { padding-right: 1.4rem; }
.pdialog { border-radius: 0 0 48px 0; }
.pd-body { padding-bottom: clamp(2rem, 4vw, 3rem); }
@media (max-width: 640px) { .pdialog { border-radius: 18px 18px 0 0; } }
.contrib-do a { grid-template-columns: 10.5rem 1.5rem minmax(0, 1fr); }

/* ═════════════ Product briefs, FAQs, donor declaration & safeguarding forms (SOS, Oct 2026) ═════════════ */
.pd-meaning { margin: 1rem 0 0; padding-left: 1rem; border-left: 3px solid var(--brand); color: var(--dark); font-weight: 500; line-height: 1.55; }
.pd-prose p { margin: 0 0 .75rem; color: var(--text-2); line-height: 1.6; }
.pd-objective { padding: .9rem 1rem; background: var(--brand-10); color: var(--dark) !important; }
.pd-list { margin-top: 0 !important; gap: .55rem !important; }
.pd-list li { font-size: .9375rem; }
.pd-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }
.pd-movement { margin: 2rem 0 0; font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 700; line-height: 1.3; color: var(--dark); }
.pd-chips + .pd-note { margin-top: .9rem; }
.pd-note + .pd-chips { margin-top: .5rem; }

/* Partner levels with the impact of each level */
.ptiers { border-top: 2px solid var(--brand); }
.ptier { padding: .9rem 0 1rem; border-bottom: 1px solid var(--line); }
.ptier-h { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.ptier-l { font-weight: 700; color: var(--dark); }
.ptier-p { color: var(--text-2); font-size: .9375rem; }
.ptier-p b { font-size: 1.25rem; font-weight: 900; color: var(--brand); }
.ptier-p small { font-size: .8125rem; }
.ptier p { margin: .35rem 0 0; font-size: .9063rem; line-height: 1.45; color: var(--text-2); }

/* FAQ groups */
.faq-groups { display: grid; gap: clamp(2rem, 4vw, 3rem); max-width: 880px; }
.faq-h { margin: 0 0 .75rem !important; display: flex; align-items: center; gap: .6rem; }
.faq-h::before { content: ""; width: 28px; height: 3px; background: var(--brand); }
.accordion .answer ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.accordion .answer li { margin: .2rem 0; }

/* Rights · responsibilities · commitments */
.pact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.pact-col { background: #fff; padding: clamp(1.25rem, 2.5vw, 1.75rem); border-top: 3px solid var(--brand); }
.pact-col:last-child { border-top-color: var(--red); }
.pact-col .h3 { margin: 0 0 .35rem; }
.pact-col .muted { margin: 0; font-size: .9375rem; }
.pact-col .checks { margin-top: 1rem; gap: .65rem; }
.pact-col .checks li { font-size: .9375rem; }

/* Form and brief downloads reuse the transparency cards */
.forms-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.forms-list.briefs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.forms-list .link-arrow svg { width: 16px; height: 16px; }

/* Pledge form consents */
.consents { margin: 0; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); display: grid; gap: .7rem; }
.consent { display: grid; grid-template-columns: 20px 1fr; gap: .65rem; align-items: start; font-size: .875rem; line-height: 1.45; color: var(--text-2); cursor: pointer; }
.consent input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--brand); }
.consent a { color: var(--dark); }
.consents .err { display: none; color: var(--red); font-size: .8125rem; font-weight: 600; }
.consents.invalid { border-color: var(--red); }
.consents.invalid .err { display: block; }
.steps.steps-3 { grid-template-columns: 1fr; margin-bottom: 1.25rem; }

/* Sita-Ngalonako: support areas, partnership examples, options */
.areas-acc .answer { padding-bottom: 1rem; }
.area-list { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: 1fr 1fr; gap: .35rem 1.5rem; }
.area-list li { position: relative; padding-left: 1rem; font-size: .9375rem; color: var(--text-2); }
.area-list li::before { content: ""; position: absolute; left: 0; top: .7em; width: .55rem; height: 2px; background: var(--brand); }
.ink-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.ink { padding: 1.25rem 1.25rem 1.4rem; background: var(--brand-10); border-radius: 0 0 40px 0; }
.ink b { display: block; margin-bottom: .4rem; color: var(--dark); }
.ink p { margin: 0; font-size: .9063rem; color: var(--text-2); line-height: 1.45; }
.benefits.ink-opts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.benefits.ink-opts .benefit { background: #fff; }
.benefits.ink-opts .h3 { margin-top: 0; }

@media (max-width: 1060px) {
  .pact, .forms-list, .forms-list.briefs { grid-template-columns: 1fr 1fr; }
  .ink-grid, .benefits.ink-opts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .pact, .forms-list, .forms-list.briefs, .ink-grid, .benefits.ink-opts { grid-template-columns: 1fr; }
  .pd-two, .area-list { grid-template-columns: 1fr; }
}

/* ═════════════ Our impact: bento + segmented programmes (Oct 2026 redesign) ═════════════ */
.ibento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(168px, auto)); gap: 12px; }
.ib { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: .45rem; padding: clamp(1.1rem, 2vw, 1.6rem);
  background: var(--brand-10); border-radius: 20px; overflow: hidden; isolation: isolate; }
.ib b { font-size: clamp(2.2rem, 3.6vw, 3.25rem); font-weight: 900; line-height: .95; letter-spacing: -0.03em !important; color: var(--dark); font-variant-numeric: tabular-nums; }
.ib-t { font-size: .9375rem; line-height: 1.35; color: var(--text-2); max-width: 22ch; }
.ib-k { position: absolute; top: clamp(1.1rem, 2vw, 1.6rem); left: clamp(1.1rem, 2vw, 1.6rem); font-size: .8125rem; font-weight: 700; letter-spacing: .04em !important; text-transform: uppercase; }

/* The hero tile: navy, with the SOS bubble curve rising from the corner */
.ib-hero { grid-column: span 2; grid-row: span 2; background: var(--dark); justify-content: flex-end; padding: clamp(1.5rem, 3vw, 2.5rem); }
.ib-hero::before { content: ""; position: absolute; z-index: -1; right: -8%; bottom: -30%; width: 62%; aspect-ratio: 1; background: var(--brand);
  border-radius: 0 0 0 0; border-top-left-radius: 100% 100%; opacity: .95; }
.ib-hero::after { content: ""; position: absolute; z-index: -1; right: 6%; bottom: -12%; width: 34%; aspect-ratio: 1; background: rgba(255, 255, 255, .12); border-top-left-radius: 100% 100%; }
.ib-hero .ib-k { color: var(--brand-50); top: clamp(1.5rem, 3vw, 2.5rem); left: clamp(1.5rem, 3vw, 2.5rem); }
.ib-hero b { color: #fff; font-size: clamp(3.5rem, 8.5vw, 7.5rem); letter-spacing: -0.045em !important; }
.ib-hero .ib-t { color: rgba(255, 255, 255, .78); font-size: clamp(1rem, 1.3vw, 1.125rem); max-width: 26ch; }
.ib-years { background: var(--brand); }
.ib-years b, .ib-years .ib-t { color: #fff; }
.ib-years .ib-t { color: rgba(255, 255, 255, .9); }

/* By programme: segmented control (iOS-style sliding thumb) */
.iprog { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.iprog-k { margin: 0 0 .9rem; font-size: .8125rem; font-weight: 700; letter-spacing: .04em !important; text-transform: uppercase; color: var(--dark-2); }
.seg { position: relative; display: flex; gap: 2px; padding: 4px; background: var(--brand-10); border-radius: 999px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.seg::-webkit-scrollbar { display: none; }
.seg-thumb { position: absolute; top: 4px; bottom: 4px; left: 0; width: var(--w, 0); transform: translateX(var(--x, 0)); border-radius: 999px; background: #fff;
  box-shadow: 0 1px 2px rgba(28, 50, 93, .08), 0 3px 10px rgba(28, 50, 93, .1); transition: transform 380ms var(--ease-drawer), width 380ms var(--ease-drawer); }
.seg-btn { position: relative; z-index: 1; flex: 1 0 auto; padding: .7rem 1.05rem; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  font: inherit; font-size: .875rem; font-weight: 600; color: var(--text-2); white-space: nowrap; -webkit-tap-highlight-color: transparent;
  transition: color 200ms ease, transform 120ms var(--ease-out); }
.seg-btn[aria-selected="true"] { color: var(--dark); }
.seg-btn:active { transform: scale(.96); }
.seg-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.no-js .seg-thumb { display: none; }
.no-js .seg-btn[aria-selected="true"] { background: #fff; }
@media (hover: hover) and (pointer: fine) { .seg-btn:hover { color: var(--dark); } }

.ipanels { display: grid; margin-top: 12px; }
.ipanel { grid-area: 1 / 1; padding: clamp(1.25rem, 3vw, 2rem); border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--line);
  opacity: 0; visibility: hidden; transform: translateY(6px); filter: blur(4px);
  transition: opacity 160ms ease, transform 160ms var(--ease-out), filter 160ms ease, visibility 0s 160ms; }
.ipanel.is-on { opacity: 1; visibility: visible; transform: none; filter: none;
  transition: opacity 280ms var(--ease-out) 60ms, transform 320ms var(--ease-out) 60ms, filter 280ms var(--ease-out) 60ms, visibility 0s; }
.no-js .ipanel { position: static; opacity: 1; visibility: visible; transform: none; filter: none; grid-area: auto; margin-bottom: 12px; }
.ipanel-h { margin: 0 0 1.25rem !important; font-size: 1.125rem !important; }
.ipanel-g { display: grid; grid-template-columns: repeat(var(--c, 3), minmax(0, 1fr)); gap: 1.25rem 2rem; }
.ipanel-g.n1 { --c: 1; } .ipanel-g.n2 { --c: 2; } .ipanel-g.n3 { --c: 3; } .ipanel-g.n4 { --c: 4; } .ipanel-g.n5 { --c: 5; }
.ipn { display: flex; flex-direction: column; gap: .4rem; padding-top: .9rem; border-top: 2px solid var(--brand); }
.ipn b { font-size: clamp(1.9rem, 3.2vw, 2.75rem); font-weight: 900; line-height: 1; letter-spacing: -0.03em !important; color: var(--dark); font-variant-numeric: tabular-nums; }
.ipn span { font-size: .9063rem; line-height: 1.4; color: var(--text-2); max-width: 28ch; }

@media (max-width: 1060px) {
  .ibento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .ib-hero { grid-column: 1 / -1; grid-row: auto; min-height: 280px; }
  .ib { min-height: 150px; }
  .ipanel-g.n4, .ipanel-g.n5 { --c: 3; }
}
@media (max-width: 640px) {
  .ib b { font-size: 2rem; }
  .ib-t { font-size: .875rem; }
  .ipanel-g { --c: 2 !important; }
  .ipanel-g.n1 { --c: 1 !important; }
  .seg { border-radius: 14px; }
  .seg-thumb { border-radius: 11px; }
  .seg-btn { border-radius: 11px; flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .seg-thumb { transition: none; }
  .ipanel, .ipanel.is-on { transform: none; filter: none; transition: opacity 180ms ease, visibility 0s; }
}
.ib-hero::after { right: -12%; bottom: -26%; width: 44%; }
@media (max-width: 640px) {
  .ib-hero { min-height: 300px; }
  .ib-hero b { font-size: clamp(3.25rem, 15vw, 4.5rem); }
  .ib-hero::before { right: -30%; bottom: -42%; width: 78%; }
  .ib-hero::after { right: -24%; bottom: -30%; width: 48%; }
  .ib-hero .ib-t { max-width: 16ch; }
}

/* ═════════════ No accent stripes (Oct 2026) ═════════════
   Coloured top/side stripes on cards and callouts read as template-made. Cards are soft rounded
   surfaces instead (same 20px language as the impact tiles); list rules are neutral hairlines;
   callouts are tinted blocks. Colour is kept for the content itself: numbers, icons, buttons. */
:root { --card-r: 20px; }

/* Cards: no stripe, rounded, lift gently on hover (pointer devices only) */
.trust a, .donor-journey li, .pact-col { border-top: 0 !important; border-radius: var(--card-r); }
.trust a { box-shadow: 0 0 0 1px rgba(28, 50, 93, .06); transition: transform 160ms var(--ease-out), box-shadow 220ms ease; }
.legacy { border-left: 0; border-radius: var(--card-r); }
.legacy-list li::before { background: var(--dark-3); }
@media (hover: hover) and (pointer: fine) {
  .trust a:hover { box-shadow: 0 0 0 1px rgba(28, 50, 93, .06), 0 10px 30px rgba(28, 50, 93, .1); transform: translateY(-2px); }
  a.tile:hover, .give-card:not(.feature):hover, a.village:hover, a.channel:hover, .card:hover, .pn:hover { border-top-color: var(--line) !important; }
}
.donor-journey .dj-n { align-self: flex-start; padding: .25rem .6rem; border-radius: 999px; background: var(--brand-10); color: var(--dark); font-size: .75rem; }
.donor-journey li:last-child .dj-n { background: var(--brand); color: #fff; }

/* Lists and figures: neutral hairline instead of a thick brand rule */
.tiers, .choice, .baton-note, .give-levels, .ptiers, .contrib-do, .impact-head { border-top: 1px solid var(--line) !important; }
.chain li, .chain li:last-child { border-top: 1px solid var(--line) !important; }
.chain li:last-child { color: var(--brand) !important; }
.ipn { border-top: 0; padding-top: 0; }
.ipanel-g { gap: 1.5rem 2.5rem; }

/* Callouts and quotes: tinted, rounded, no side bar */
.pd-quote, .dp-chosen { border-left: 0; border-radius: 14px; }
.pd-quote { padding: 1.15rem 1.35rem 1.2rem; }
.pd-meaning { border-left: 0; padding-left: 0; font-size: 1.0625rem; }
.prose blockquote { border-left: 0; padding-left: 0; }
.pd-objective, .understand, .ip, .ink, .benefit { border-radius: 14px; }
.understand, .benefit { border-radius: var(--card-r); }

/* ═════════════ "On this page" local nav (Oct 2026 redesign) ═════════════
   Apple-style local nav: the current section names itself on the left (with a ring that fills as you
   read the page), plain links on the right with a small dot for the current one. No pill, no box.
   On phones the links fold into a menu that opens from the section name. */
.subnav { background: rgba(255, 255, 255, .8) !important; border-bottom: 0 !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); }
.subnav::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; pointer-events: none;
  background: linear-gradient(rgba(28, 50, 93, .07), rgba(28, 50, 93, 0)); }
.subnav .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 56px; }
.subnav .pill { display: none !important; }

.sn-now { display: inline-flex; align-items: center; gap: .65rem; flex: none; min-width: 0; padding: .4rem 0; border: 0; background: none;
  font: inherit; color: var(--dark); cursor: default; -webkit-tap-highlight-color: transparent; }
.sn-ring { width: 20px; height: 20px; flex: none; transform: rotate(-90deg); }
.sn-ring circle { fill: none; stroke-width: 2.5; }
.sn-ring-bg { stroke: var(--brand-20); }
.sn-ring-fg { stroke: var(--brand); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.sn-idx { font-size: .75rem; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; letter-spacing: .02em !important; }
.sn-label { position: relative; display: block; overflow: hidden; height: 1.4em; min-width: 9.5rem; font-size: .9375rem; font-weight: 700; line-height: 1.4; }
.sn-label > span { display: block; white-space: nowrap; }
.sn-label > span + span { position: absolute; inset: 0; }
.sn-chev { display: none; width: 14px; height: 14px; color: var(--text-2); transition: transform 220ms var(--ease-out); }

.subnav ul { margin-left: auto !important; padding: 0 !important; gap: .15rem !important; -webkit-mask-image: none !important; mask-image: none !important; }
.subnav a { display: inline-flex !important; align-items: center; gap: .45rem; padding: .5rem .7rem !important; border-radius: 8px;
  font-size: .875rem !important; font-weight: 500 !important; color: var(--text-2) !important; transition: color 180ms ease, background-color 180ms ease !important; }
.subnav a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex: none;
  transform: scale(0); opacity: 0; margin-right: -.45rem; transition: transform 240ms var(--ease-out), opacity 180ms ease, margin 240ms var(--ease-out); }
.subnav a.on { color: var(--dark) !important; font-weight: 600 !important; }
.subnav a.on::before { transform: scale(1); opacity: 1; margin-right: 0; }
.subnav a:active { background: var(--brand-10); }
@media (hover: hover) and (pointer: fine) { .subnav a:hover { color: var(--dark) !important; } }
.subnav a:focus-visible, .sn-now:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Phones and small tablets: the section name is a button that opens the list */
@media (max-width: 860px) {
  .subnav .wrap { position: relative; min-height: 52px; }
  .sn-now { cursor: pointer; width: 100%; }
  .sn-label { flex: 1; min-width: 0; }
  .sn-label > span { overflow: hidden; text-overflow: ellipsis; }
  .sn-chev { display: block; margin-left: auto; }
  .subnav.is-open .sn-chev { transform: rotate(180deg); }
  .subnav ul { position: absolute !important; top: calc(100% + 6px); left: var(--gutter); right: var(--gutter); margin: 0 !important;
    flex-direction: column; gap: 2px !important; padding: 6px !important; overflow: visible !important;
    background: rgba(255, 255, 255, .97); border-radius: 16px; box-shadow: 0 0 0 1px rgba(28, 50, 93, .06), 0 16px 40px rgba(28, 50, 93, .16);
    transform-origin: top left; opacity: 0; transform: scale(.97) translateY(-4px); visibility: hidden;
    transition: opacity 140ms ease, transform 140ms var(--ease-out), visibility 0s 140ms; }
  .subnav.is-open ul { opacity: 1; transform: none; visibility: visible; transition: opacity 180ms var(--ease-out), transform 220ms var(--ease-out), visibility 0s; }
  .subnav a { width: 100%; padding: .75rem .8rem !important; border-radius: 10px; font-size: .9375rem !important; }
  .subnav a.on { background: var(--brand-10); }
}
.no-js .sn-now { display: none; }
@media (prefers-reduced-motion: reduce) {
  .subnav ul, .subnav.is-open ul { transform: none !important; }
  .subnav a::before { transition: opacity 150ms ease; }
}
@media (prefers-reduced-transparency: reduce) { .subnav { background: #fff !important; -webkit-backdrop-filter: none; backdrop-filter: none; } }
.sn-now { text-align: left; }
body:has(.subnav) section, body:has(.subnav) .pt { scroll-margin-top: calc(var(--nav-h) + 72px); }

/* Product panel: reference detail folds away under "More about this pathway" */
.pd-more { margin-top: 1.75rem; border-top: 1px solid var(--line); }
.pd-more summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; cursor: pointer; list-style: none;
  font-weight: 700; color: var(--dark); -webkit-tap-highlight-color: transparent; }
.pd-more summary::-webkit-details-marker { display: none; }
.pd-more summary .pm { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--brand-10); display: grid; place-items: center; transition: transform 240ms var(--ease-out); }
.pd-more summary .pm svg { width: 14px; height: 14px; }
.pd-more[open] summary .pm { transform: rotate(45deg); }
.pd-more::details-content { block-size: 0; overflow: hidden; opacity: 0; transition: block-size 280ms var(--ease-out), opacity 200ms ease, content-visibility 280ms allow-discrete; }
.pd-more[open]::details-content { block-size: auto; opacity: 1; }
.pd-more-body > :first-child { margin-top: 0; }
.pd-more-body .pd-h:first-child { margin-top: .5rem !important; }
@media (prefers-reduced-motion: reduce) { .pd-more::details-content { transition: opacity 150ms ease, content-visibility 150ms allow-discrete; } }

/* ═════════════ Audit pass, Oct 2026: faster, quieter motion ═════════════
   One signature (the bubble curtain), short enough not to hide content. UI ≤ 250ms, reveals ≤ 500ms,
   marketing sweeps ≤ 700ms. Hovers 300ms. */

/* Scroll reveal: restored to the original slow, visible rise (Oct 2026, by request) — see the
   "Animation pass" rule above: 28px rise, 800ms fade, 1000ms travel, cascade capped at 480ms. */

/* Headings: static red accent line, always left-aligned */
.pull-r { text-align: left; }   /* the pull-in animation is back (by request); sides no longer alternate */
.section-head.head-r { margin-left: 0; text-align: left; }

/* Hero: the headline arrives almost at once; the curtain moves in 600ms */
.ed-curtain { transition-duration: 600ms; }
.ed-curtained.is-revealed:not(.is-closed) .ed-copy.is-active .ed-title, .ed-curtained.is-revealed:not(.is-closed) .ed-copy.is-active .ed-side {
  transition: opacity 360ms var(--ease-out) 360ms, transform 420ms var(--ease-out) 360ms; }
.ed-curtained.is-revealed:not(.is-closed) .ed-copy.is-active .ed-side { transition-delay: 420ms; }
/* The centred title card gets out of the way fast as the curtain opens, so it never overlaps the copy */
.ed-curtained:not(.is-closed) .ed-card > * { transition: opacity 180ms ease, transform 180ms ease !important; }
.ed-main > *, .ed-proof { animation-duration: 450ms; }

/* Curtains on banners and the closing band: 650ms, photo settles in 700ms */
.curtain::after { transition: width 650ms var(--ease-in-out) 60ms, border-bottom-right-radius 650ms var(--ease-in-out) 60ms; }
.curtain img { transition: transform 700ms var(--ease-out) 100ms; }
.curtain-bg::before { transition: clip-path 650ms var(--ease-in-out); }
.cta-photo::before { transition: width 650ms var(--ease-in-out) 60ms, border-bottom-right-radius 650ms var(--ease-in-out) 60ms; }
.cta-photo .cta-bg { transition: transform 700ms var(--ease-out) 100ms; }
.cta-photo > div { transition: opacity 400ms ease 120ms, transform 450ms var(--ease-out) 120ms; }
@media (max-width: 760px) { .cta-photo::before { transition: top 650ms var(--ease-in-out) 60ms; } }

/* Menu dropdown: 220ms open, 150ms close */
.nav .dropdown { transition: clip-path 150ms var(--ease-out), opacity 120ms ease, transform 150ms var(--ease-out), filter 120ms ease, visibility 0s 150ms !important; }
.nav .open > .dropdown { transition: clip-path 220ms var(--ease-out), opacity 180ms var(--ease-out), transform 220ms var(--ease-out), filter 180ms ease, visibility 0s !important; }
.nav .dropdown .dd-feature img, .open > .dropdown .dd-feature img { transition: scale 220ms var(--ease-out), transform 300ms var(--ease-out); }

/* Hover image zooms: 300ms */
.story img, .way img, .area img, .shot img, .dd-feature img, .card .photo img, .post .photo img,
.pt-media img, .cs-media img, .vc-media img { transition-duration: 300ms !important; }

/* On-page nav dot: never grows from nothing */
.subnav a::before { transform: scale(.5); }
.subnav a.on::before { transform: scale(1); }

/* Spacing: shorter pages, same content */
.section { padding: clamp(3.5rem, 6vw, 5rem) 0; }
.section.tight { padding: clamp(2.5rem, 4.5vw, 3.75rem) 0; }

/* Payment page: the donate form is the first thing, beside a short intro and a pathway picker */
.give-hero { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.give-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.give-intro .h1 { margin-top: .25rem; }
.give-intro .lede { margin-top: 1rem; }
.pw-label { margin: 1.75rem 0 .65rem; font-size: .875rem; font-weight: 700; color: var(--dark); }
.pw-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.pw-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 1rem; border-radius: 999px; background: var(--brand-10);
  color: var(--dark); font-size: .875rem; font-weight: 600; text-decoration: none; -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 0 0 1.5px transparent; transition: background-color 160ms ease, box-shadow 160ms ease, transform 120ms var(--ease-out); }
.pw-chip:active { transform: scale(.97); }
.pw-chip.is-on { background: #fff; box-shadow: inset 0 0 0 1.5px var(--brand); }
@media (hover: hover) and (pointer: fine) { .pw-chip:hover { background: var(--brand-20); } .pw-chip.is-on:hover { background: #fff; } }
.give-intro .dp-chosen { margin-top: 1rem; }
.give-intro .secure-note { margin-top: 1.25rem; }
.give-alt { margin: .9rem 0 0; }
@media (max-width: 960px) {
  .give-top { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* Giving levels on phones: amount and arrow on one line, the explanation full width underneath */
@media (max-width: 640px) {
  .give-levels li > span, .gl-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "amt go" "text text"; row-gap: .35rem; }
  .gl-amt { grid-area: amt; display: flex; align-items: baseline; gap: .4rem; }
  .gl-amt small { display: inline; }
  .gl-text { grid-area: text; }
  .gl-go { grid-area: go; }
  .give-levels li > span .gl-text { grid-column: 1 / -1; }
}
/* Title card on a slide change: in while the (faster) curtain is closed, out before the copy arrives */
.ed-curtained.is-closed .ed-card > * { transition: opacity 260ms var(--ease-out) 180ms, transform 320ms var(--ease-out) 180ms !important; }

/* Footer, three groups + brand column (audit, Oct 2026) */
body .foot-grid:not(#\#) { grid-template-columns: 1.3fr 1fr 1fr 1.3fr; }
.foot-channels dl { margin: 0; display: grid; gap: .35rem; }
.foot-channels dl > div { display: flex; justify-content: space-between; gap: 1rem; max-width: 260px; }
.foot-channels dt { opacity: .75; }
.foot-channels dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 1060px) { body .foot-grid:not(#\#) { grid-template-columns: 1fr 1fr; } body .foot-grid:not(#\#) > :first-child, body .foot-grid:not(#\#) > :last-child { grid-column: auto; } }
@media (max-width: 640px) { body .foot-grid:not(#\#) { grid-template-columns: 1fr; } }

/* Partner routes (homepage + Partner with us page) */
.partner-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pw-card { display: flex; flex-direction: column; gap: .45rem; padding: clamp(1.25rem, 2.5vw, 1.6rem); background: #fff; border-radius: 20px;
  color: inherit; text-decoration: none; box-shadow: 0 0 0 1px rgba(28, 50, 93, .06); -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out), box-shadow 220ms ease; }
.section:not(.alt) .pw-card { background: var(--brand-10); box-shadow: none; }
.pw-card:active { transform: scale(.98); }
.pw-card .sos-ic { width: 48px; height: 48px; margin-bottom: .35rem; }
.pw-k { font-size: .8125rem; font-weight: 700; letter-spacing: .04em !important; text-transform: uppercase; color: var(--dark-2); }
.pw-card > b { font-size: 1.125rem; line-height: 1.3; color: var(--dark); }
.pw-p { color: var(--text-2); font-size: .9375rem; }
.pw-p b { color: var(--dark); font-weight: 900; }
.pw-card .link-arrow { margin-top: auto; padding-top: .5rem; }
@media (hover: hover) and (pointer: fine) {
  .pw-card:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(28, 50, 93, .06), 0 10px 30px rgba(28, 50, 93, .1); }
  .pw-card:hover .link-arrow svg { transform: translateX(3px); }
}
@media (max-width: 860px) { .partner-ways { grid-template-columns: 1fr; } }
.pd-full { margin: 1rem 0 0; }

/* Pathways page: compare starting levels */
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(28, 50, 93, .06); }
.compare { width: 100%; min-width: 620px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.compare th, .compare td { padding: 1rem 1.25rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare thead th { font-size: .8125rem; font-weight: 700; letter-spacing: .04em !important; text-transform: uppercase; color: var(--dark-2); }
.compare tbody th a { display: block; font-weight: 700; color: var(--dark); text-decoration: none; }
.compare tbody th small { display: block; margin-top: .15rem; font-weight: 400; font-size: .8125rem; color: var(--text-2); }
.compare td b { font-size: 1.125rem; font-weight: 900; color: var(--dark); }
.compare td { color: var(--text-2); }
@media (hover: hover) and (pointer: fine) { .compare tbody th a:hover { color: var(--brand); } }

/* ═════════════ Pathways menu in the header (Oct 2026) ═════════════
   Light panel that grows from the trigger (top-left origin). 200ms in, 140ms out; the four products
   settle 30ms apart. Switching between menus stays instant (existing .instant rule). */
.nav .nav-menu > li.has-drop { position: relative; }
body .nav .dd-paths:not(#\#) {
  left: -12px; right: auto; margin: 0; width: 620px; padding: 8px; display: grid; grid-template-columns: 1fr 190px; gap: 8px;
  background: #fff; border: 0; border-radius: 18px; color: var(--dark);
  box-shadow: 0 0 0 1px rgba(28, 50, 93, .06), 0 18px 48px rgba(28, 50, 93, .16);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  clip-path: none; filter: none; transform-origin: 32px -6px;
  opacity: 0; transform: translateY(-4px) scale(.97); visibility: hidden;
  transition: opacity 120ms ease, transform 140ms var(--ease-out), visibility 0s 140ms !important;
}
body .nav .open > .dd-paths:not(#\#) {
  opacity: 1; transform: none; visibility: visible;
  transition: opacity 160ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s !important;
}
.dd-paths .dd-links { padding: 6px; gap: 2px; }
body .dd-paths .dd-label:not(#\#) { margin: 2px 10px 6px; font-size: .75rem; letter-spacing: .06em !important; color: var(--dark-2); }
body .dd-paths a.dd-prod:not(#\#) { display: grid; grid-template-columns: 40px 1fr; gap: .8rem; align-items: center; padding: .6rem 2rem .6rem .6rem; border-radius: 12px; color: var(--dark); }
.dd-prod img { width: 40px; height: 40px; object-fit: contain; }
.dd-prod span { display: flex; flex-direction: column; min-width: 0; }
body .dd-paths .dd-prod b:not(#\#) { font-size: .9375rem; font-weight: 700; color: var(--dark); }
body .dd-paths .dd-prod small:not(#\#) { margin: 0; font-size: .8125rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-prod em { font-style: normal; font-size: .75rem; font-weight: 700; color: var(--brand); margin-top: .1rem; }
body .dd-paths a.dd-prod:not(#\#):hover, body .dd-paths a.dd-prod:not(#\#):focus-visible, body .dd-paths a.dd-prod[aria-current="page"]:not(#\#) { background: var(--brand-10); }
body .dd-paths .dd-prod:not(#\#)::after { color: var(--dark); }
/* "All pathways" card: brand blue with the bubble curve */
body .dd-paths .dd-all:not(#\#) { min-height: 0; align-items: flex-end; background: var(--brand); color: #fff; border-radius: 12px 12px 48px 12px; }
.dd-paths .dd-all::before { display: none; }
.dd-all span { padding: 1rem 1.1rem 1.2rem; gap: .35rem !important; }
body .dd-paths .dd-all b:not(#\#) { font-size: 1rem; line-height: 1.25; color: #fff; }
body .dd-paths .dd-all small:not(#\#) { color: rgba(255, 255, 255, .88); }
.dd-all i { margin-top: .5rem; font-style: normal; font-weight: 700; font-size: .875rem; color: #fff; }
@media (hover: hover) and (pointer: fine) { body .dd-paths .dd-all:not(#\#):hover { background: #0099d6; } }
/* Contents: short cascade */
body .dd-paths .dd-label:not(#\#), body .dd-paths .dd-link:not(#\#), body .dd-paths .dd-feature:not(#\#) { opacity: 0; translate: 0 4px; transition: opacity 100ms ease, translate 100ms ease, background-color 150ms ease; }
body .open > .dd-paths .dd-label:not(#\#), body .open > .dd-paths .dd-link:not(#\#), body .open > .dd-paths .dd-feature:not(#\#) {
  opacity: 1; translate: none; transition: opacity 200ms var(--ease-out), translate 220ms var(--ease-out), background-color 150ms ease; }
.open > .dd-paths .dd-link:nth-of-type(1) { transition-delay: 30ms; }
.open > .dd-paths .dd-link:nth-of-type(2) { transition-delay: 60ms; }
.open > .dd-paths .dd-link:nth-of-type(3) { transition-delay: 90ms; }
.open > .dd-paths .dd-link:nth-of-type(4) { transition-delay: 120ms; }
.open > .dd-paths .dd-feature { transition-delay: 80ms; }
/* Trigger: same look as the other menu links */
body .nav .nav-trigger:not(#\#) { display: inline-flex; align-items: center; gap: .3rem; background: none; border: 0; cursor: pointer; font: inherit; color: inherit; padding: inherit; }
.nav .is-current > .nav-trigger { color: var(--brand); }
.nav .is-current > .nav-trigger::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  body .nav .dd-paths:not(#\#), body .nav .open > .dd-paths:not(#\#) { transform: none; transition: opacity 150ms ease, visibility 0s !important; }
  body .dd-paths .dd-link:not(#\#), body .dd-paths .dd-feature:not(#\#) { translate: none; }
}
/* Pathways trigger: identical box to the other menu links */
body .nav-menu > li > .nav-trigger:not(#\#) {
  font-size: 1rem; font-weight: 500; line-height: 20px; color: #5e6468; padding: 15px 14px; border: 1px solid transparent;
  border-radius: 10px; background: transparent; gap: .3rem; transition: color 200ms ease-out; }
body .nav-menu > li.is-current > .nav-trigger:not(#\#), body .nav-menu > li > .nav-trigger[aria-expanded="true"]:not(#\#) { color: var(--sos-blue); }
body .nav-menu > li > .nav-trigger:not(#\#) svg { width: 12px; height: 12px; opacity: .8; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { body .nav-menu > li > .nav-trigger:not(#\#):hover { color: var(--sos-blue); background: transparent; } }
@media (min-width: 1301px) and (max-width: 1560px) { body .nav-menu > li > .nav-trigger:not(#\#) { font-size: .9rem; padding: 15px 8px; } }
@media (min-width: 1301px) and (max-width: 1380px) { body .nav-menu > li > .nav-trigger:not(#\#) { font-size: .85rem; padding: 15px 6px; } }
/* Products in the menu: never underlined */
body .nav-menu .dd-paths a:not(#\#), body .nav-menu .dd-paths a[aria-current]:not(#\#) { text-decoration: none; font-weight: inherit; }
/* "All pathways" card: text wraps inside the card, curve visible */
body .dd-paths .dd-all:not(#\#) { overflow: hidden; min-width: 0; padding: 0; }
body .dd-paths .dd-all:not(#\#) span { white-space: normal; min-width: 0; }
body .dd-paths .dd-all small:not(#\#) { font-size: .8125rem; line-height: 1.4; white-space: normal; }
body .nav .dd-paths .dd-all:not(#\#) { border-radius: 12px 12px 48px 12px !important; }
.dd-all i { white-space: nowrap; }
.dd-paths .dd-home { display: block; margin: 6px 6px 2px; padding: .7rem .6rem 0; border-top: 1px solid var(--line); font-size: .8125rem; font-weight: 600; color: var(--dark-2); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .dd-paths .dd-home:hover { color: var(--brand); } }
body .dd-paths .dd-home:not(#\#) { opacity: 0; transition: opacity 100ms ease; }
body .open > .dd-paths .dd-home:not(#\#) { opacity: 1; transition: opacity 200ms var(--ease-out) 140ms; }

/* Main menu: smaller text so Home + six items sit comfortably */
body .nav-menu > li > a:not(#\#), body .nav-menu > li > .nav-trigger:not(#\#) { font-size: .875rem; padding: 15px 10px; }
@media (min-width: 1301px) and (max-width: 1560px) {
  body .nav-menu > li > a:not(#\#), body .nav-menu > li > .nav-trigger:not(#\#) { font-size: .8125rem; padding: 15px 7px; }
}
@media (min-width: 1301px) and (max-width: 1380px) {
  body .nav-menu > li > a:not(#\#), body .nav-menu > li > .nav-trigger:not(#\#) { font-size: .78rem; padding: 15px 5px; }
}
/* Donate buttons stay red now that they link to the top of the payment page (no #give-now) */
body a.btn[href^="give-individual.html"]:not(.btn-ghost):not(.btn-white):not(.btn-glass):not(#\#):not(#\#):not(#\#) { background: var(--donate); color: #fff; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18); border-radius: 6px; }
@media (hover: hover) and (pointer: fine) {
  body a.btn[href^="give-individual.html"]:not(.btn-ghost):not(.btn-white):not(.btn-glass):not(#\#):not(#\#):not(#\#):hover { background: var(--donate-hover); color: #fff; }
}

/* ═════════════ Every donate button: red, white text, white icon ═════════════
   Keyed on the donate icon (and the payment form's submit), so new donate buttons follow automatically. */
body .btn:is(:has(use[href="#i-donate"]), .dp-pay):not(#\#):not(#\#):not(#\#) {
  background: var(--donate); color: #fff; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18); border: 0; }
body .btn:is(:has(use[href="#i-donate"]), .dp-pay):not(#\#):not(#\#):not(#\#) svg { color: #fff; fill: currentColor; }
@media (hover: hover) and (pointer: fine) {
  body .btn:is(:has(use[href="#i-donate"]), .dp-pay):not(#\#):not(#\#):not(#\#):hover { background: var(--donate-hover); color: #fff; }
}
body .btn.dp-pay:disabled:not(#\#):not(#\#):not(#\#) { opacity: .7; }

/* ═════════════ Donate form v2 (Oct 2026): amount first, then one grouped list of payment methods ═════════════
   Calm checkout: a big editable amount with quiet preset pills; payment methods as an iOS-style grouped
   list where the chosen method opens its fields beneath it; one full-width red button per method. */
body .dp2:not(#\#) { background: #f4f8fc; border: 0; border-radius: 24px; box-shadow: none; padding: clamp(1.25rem, 3vw, 2rem); }
.dp2 .dp-k { margin: 0; font-size: .8125rem; font-weight: 700; color: var(--dark-2); letter-spacing: .02em !important; }

/* Amount */
.dp2 .dp-amount-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
body .dp2 .dp-test:not(#\#) { margin: 0; padding: 0; background: none; font-size: .75rem; font-weight: 600; color: #a86b00; }
.dp2 .dp-big { display: flex; align-items: baseline; gap: .15rem; margin: .35rem 0 .9rem; color: var(--dark); }
.dp2 .dp-big span { font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 700; color: var(--dark-2); }
body .dp2 .dp-big input:not(#\#) { width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; box-shadow: none; outline: none;
  font: 900 clamp(2.8rem, 6vw, 3.75rem)/1 var(--font); letter-spacing: -0.03em; color: var(--dark); font-variant-numeric: tabular-nums; caret-color: var(--brand); }
.dp2 .dp-big:focus-within { box-shadow: inset 0 -2px 0 var(--brand); }
body .dp2 .dp-chips:not(#\#) { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; border: 0; }
body .dp2 .dp-chips label > span:not(#\#) { display: inline-flex; align-items: center; height: 36px; padding: 0 .95rem; border: 0; border-radius: 999px;
  background: #fff; box-shadow: 0 0 0 1px rgba(28, 50, 93, .1); color: var(--dark); font-size: .875rem; font-weight: 600;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 120ms var(--ease-out); }
body .dp2 .dp-chips input:checked + span:not(#\#) { background: var(--dark); color: #fff; box-shadow: none; }
.dp2 .dp-chips label:active > span { transform: scale(.96); }
body .dp2 .dp-chips input:focus-visible + span:not(#\#) { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { body .dp2 .dp-chips label:hover input:not(:checked) + span:not(#\#) { box-shadow: 0 0 0 1px rgba(28, 50, 93, .3); } }
body .dp2 .dp-impact:not(#\#) { min-height: 1.4em; margin: .85rem 0 0; font-size: .9063rem; line-height: 1.45; color: var(--text-2); }

/* Methods: grouped list */
.dp2 .dp-methods { margin-top: 1.5rem; }
.dp2 .dp-methods > .dp-k { margin-bottom: .6rem; }
.dp2 .dp-group { background: #fff; border-radius: 18px; box-shadow: 0 0 0 1px rgba(28, 50, 93, .06), 0 1px 2px rgba(28, 50, 93, .04); overflow: hidden; }
.dp2 .dp-method + .dp-method { border-top: 1px solid rgba(28, 50, 93, .08); }
.dp2 .dp-mrow { display: grid; grid-template-columns: 44px minmax(0, 1fr) 22px; gap: .9rem; align-items: center; width: 100%; padding: .85rem 1rem;
  border: 0; background: none; text-align: left; font: inherit; color: var(--dark); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms ease; }
.dp2 .dp-mrow:active { background: var(--brand-10); }
.dp2 .dp-mrow:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 18px; }
@media (hover: hover) and (pointer: fine) { .dp2 .dp-method:not(.is-open) .dp-mrow:hover { background: #f7fafd; } }
.dp2 .dp-logo { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 1px rgba(28, 50, 93, .1); overflow: hidden; }
.dp2 .dp-logo img { max-width: 34px; max-height: 26px; object-fit: contain; }
.dp2 .dp-logo-2 { grid-auto-flow: column; gap: 1px; }
.dp2 .dp-logo-2 img { max-width: 19px; max-height: 14px; }
.dp2 .dp-mtext { display: flex; flex-direction: column; min-width: 0; }
.dp2 .dp-mtext b { font-size: .9688rem; font-weight: 700; }
.dp2 .dp-mtext small { font-size: .8125rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp2 .dp-radio { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(28, 50, 93, .25); position: relative; transition: box-shadow 160ms ease; }
.dp2 .dp-radio::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--brand); transform: scale(.4); opacity: 0;
  transition: transform 200ms var(--ease-out), opacity 150ms ease; }
.dp2 .is-open .dp-radio { box-shadow: inset 0 0 0 1.5px var(--brand); }
.dp2 .is-open .dp-radio::after { transform: none; opacity: 1; }

/* Opening a method: interruptible height via grid rows */
.dp2 .dp-mbody { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 260ms var(--ease-out); }
.dp2 .is-open > .dp-mbody { grid-template-rows: 1fr; }
.dp2 .dp-minner { min-height: 0; overflow: hidden; }
.dp2 .dp-minner > .dp-panel { padding: .25rem 1rem 1.15rem; opacity: 0; transition: opacity 120ms ease; }
.dp2 .is-open .dp-minner > .dp-panel { opacity: 1; transition: opacity 220ms var(--ease-out) 60ms; }
body .dp2 .dp-panel:not(#\#) { border: 0; box-shadow: none; background: none; margin: 0; }
.dp2 .dp-panel[hidden] { display: block; }

/* Fields and the pay button */
.dp2 .field { margin: 0 0 .9rem; }
.dp2 .field label { font-size: .8125rem; font-weight: 600; color: var(--dark); }
body .dp2 .dp-pay:not(#\#):not(#\#):not(#\#) { width: 100%; min-height: 52px; border-radius: 14px; font-size: 1rem; font-weight: 700; letter-spacing: 0; text-transform: none; justify-content: center; }
.dp2 .dp-pay:active { transform: scale(.98); }
body .dp2 .dp-fine:not(#\#) { margin: .75rem 0 0; font-size: .8125rem; line-height: 1.5; color: var(--text-2); }
.dp2 .dp-fine .copy { margin: 0 .15rem; padding: 2px 8px; }
.dp2 .dp-sub { margin: 1.25rem 0 .6rem; font-size: .875rem; font-weight: 600; color: var(--dark); }
.dp2 .dp-rows { margin-top: .25rem; }
.dp2 .dp-panel > .btn { margin-top: .9rem; }

.dp2 .dp-secure { display: flex; align-items: center; gap: .45rem; margin: 1rem .25rem 0; font-size: .8125rem; color: var(--text-2); }
.dp2 .dp-secure svg { width: 14px; height: 14px; flex: none; color: var(--dark-2); }

@media (max-width: 640px) {
  body .dp2:not(#\#) { padding: 1.1rem; border-radius: 20px; }
  .dp2 .dp-mrow { padding: .8rem .85rem; gap: .75rem; }
  .dp2 .dp-minner > .dp-panel { padding: .25rem .85rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .dp2 .dp-mbody { transition: none; }
  .dp2 .dp-radio::after { transition: opacity 150ms ease; transform: none; }
}
@media (max-width: 640px) { .dp2 .dp-mtext small { white-space: normal; } }

/* Custom amount: the big number reads as editable, and "Other amount" says so in words */
.dp2 .dp-big { position: relative; padding-bottom: .35rem; box-shadow: inset 0 -1.5px 0 rgba(28, 50, 93, .15); cursor: text; transition: box-shadow 160ms ease; }
.dp2 .dp-big:focus-within { box-shadow: inset 0 -2px 0 var(--brand); }
body .dp2 .dp-big input:not(#\#)::placeholder { color: rgba(28, 50, 93, .25); }
.dp2 .dp-edit { flex: none; width: 22px; height: 22px; align-self: center; color: var(--dark-2); opacity: .7; transition: opacity 150ms ease, color 150ms ease; }
.dp2 .dp-big:focus-within .dp-edit { color: var(--brand); opacity: 1; }
.dp2 .dp-hint { margin: .45rem 0 .8rem; font-size: .8125rem; color: var(--text-2); }
.dp2 .dp-other-btn { display: inline-flex; align-items: center; height: 36px; padding: 0 .95rem; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; box-shadow: inset 0 0 0 1px rgba(28, 50, 93, .25); color: var(--dark); font: inherit; font-size: .875rem; font-weight: 600;
  -webkit-tap-highlight-color: transparent; transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 120ms var(--ease-out); }
.dp2 .dp-other-btn:active { transform: scale(.96); }
.dp2 .dp-other-btn.is-on { background: var(--dark); color: #fff; box-shadow: none; }
.dp2 .dp-other-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .dp2 .dp-other-btn:not(.is-on):hover { box-shadow: inset 0 0 0 1px rgba(28, 50, 93, .45); } }

/* ═════════════ Homepage, full feedback structure kept lean (Oct 2026) ═════════════ */
/* Why it matters: text and the five-step chain side by side, one band */
.why-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
body .chain.chain-sm:not(#\#) { display: grid; grid-template-columns: 1fr; gap: 0; counter-reset: ch; }
body .chain.chain-sm li:not(#\#) { display: flex; align-items: baseline; gap: .8rem; padding: .6rem 0; border-top: 1px solid var(--line) !important;
  font-size: .9688rem; text-transform: none; letter-spacing: 0; color: var(--dark); }
body .chain.chain-sm li:not(#\#)::before { margin: 0; font-size: .75rem; min-width: 1.5rem; }
body .chain.chain-sm li:not(#\#)::after { display: none; }
body .chain.chain-sm li:last-child:not(#\#) { font-weight: 800; color: var(--brand) !important; }
@media (max-width: 860px) { .why-row { grid-template-columns: 1fr; } }

/* Lean versions of the supporting sections on the homepage */
#benefits .section-head, #why-sos .section-head, #transparency .section-head { margin-bottom: 1.5rem; }
#benefits .benefit { padding: 1.25rem 1.25rem 1.35rem; }
#benefits .benefit .sos-ic { width: 40px; height: 40px; }
#benefits .benefit .h3 { margin-top: .6rem; font-size: 1.0625rem; }
#benefits .benefit .checks { margin-top: .6rem; gap: .4rem; }
#benefits .benefit .checks li { font-size: .9063rem; }
#why-sos .pillar { display: grid; grid-template-columns: 40px 1fr; column-gap: .9rem; padding: 1rem 0 1.1rem; }
#why-sos .pillar .sos-ic { width: 40px; height: 40px; grid-row: span 2; }
#why-sos .pillar .h3 { margin: 0 0 .2rem; font-size: 1rem; }
#why-sos .pillar p { font-size: .875rem; }
#transparency .trust a { padding: 1rem 1rem 1.1rem; }
#transparency .trust span:not(.link-arrow) { display: none; }
#transparency .trust b { font-size: .9375rem; }
#faq .accordion summary { padding-top: .85rem; padding-bottom: .85rem; }

/* Form sending: hidden spam trap, error line */
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-error { margin: 0; padding: .75rem 1rem; border-radius: 12px; background: #fdecee; color: #a3202f; font-size: .875rem; font-weight: 600; }
.send-choices { display: flex; flex-wrap: wrap; gap: .6rem; }
.send-note { margin: .9rem 0 0; font-size: .8125rem; }
.send-edit { margin-top: .9rem; padding: 0; border: 0; background: none; font: inherit; font-size: .875rem; cursor: pointer; }

/* Stories: recent films + placeholders (Oct 2026) */
.cs .cs-media .vc-play { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
.cs .cs-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(28, 50, 93, .35), transparent 55%); pointer-events: none; }
@media (hover: hover) and (pointer: fine) { a.cs:hover .vc-play { background: var(--sos-blue); color: #fff; transform: scale(1.06); } }
.cs-ph { display: grid !important; place-items: center; background: linear-gradient(135deg, var(--brand-10), var(--brand-20)) !important; }
.cs-ph::after { display: none; }
.cs-ph .sos-ic { width: 72px; height: 72px; opacity: .55; }
.cs.is-placeholder b { color: var(--dark); }
.cs.is-placeholder .cs-text { color: var(--text-2); }
.change-stories.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1060px) { .change-stories.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .change-stories.four { grid-template-columns: 1fr; } }
/* Product pages: the story sits as a wide horizontal card */
.pp-story { margin-top: 2.25rem; max-width: 860px; }
.cs.cs-wide { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: 1.5rem; align-items: start; }
.cs.cs-wide .cs-media { grid-row: 1 / span 4; margin: 0; aspect-ratio: 16 / 10; }
@media (max-width: 640px) { .cs.cs-wide { grid-template-columns: 1fr; } .cs.cs-wide .cs-media { grid-row: auto; margin-bottom: .75rem; } }

/* ═════════════ About us: vision, history, villages (Oct 2026) ═════════════ */
.vmv { margin-top: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.vmv > div { padding: 1.4rem 1.4rem 1.5rem; background: var(--brand-10); border-radius: 20px; }
.vmv > div:first-child { background: var(--dark); }
.vmv > div:first-child span, .vmv > div:first-child p { color: #fff; }
.vmv span { display: block; margin-bottom: .5rem; font-size: .8125rem; font-weight: 700; letter-spacing: .04em !important; text-transform: uppercase; color: var(--dark-2); }
.vmv p { margin: 0; font-size: 1.0625rem; line-height: 1.45; font-weight: 600; color: var(--dark); }

.history-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.history-intro { position: sticky; top: calc(var(--nav-h) + 72px); }
.history-photo { margin: 1.75rem 0 0; border-radius: 0 0 var(--curve) 0; overflow: hidden; }
.history-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.history-photo figcaption { padding: .6rem 0 0; font-size: .8125rem; color: var(--text-2); background: none; }
.timeline-v { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline-v::before { content: ""; position: absolute; left: 4.6rem; top: .6rem; bottom: .6rem; width: 2px; background: rgba(28, 50, 93, .12); }
.timeline-v li { position: relative; display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: 1.5rem; padding: 0 0 1.75rem; }
.timeline-v li::after { content: ""; position: absolute; left: calc(4.6rem - 5px); top: .45rem; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px var(--brand); }
.tl-y { font-size: 1.125rem; font-weight: 900; color: var(--dark); font-variant-numeric: tabular-nums; padding-right: .5rem; }
.timeline-v b { display: block; font-size: 1.0625rem; color: var(--dark); }
.timeline-v p { margin: .3rem 0 0; color: var(--text-2); font-size: .9688rem; line-height: 1.55; }
.timeline-v .tl-now::after { background: var(--brand); box-shadow: 0 0 0 4px rgba(0, 171, 236, .2); }
.timeline-v .tl-now .tl-y { color: var(--brand); }

.villages3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.vlg { display: flex; flex-direction: column; background: var(--brand-10); border-radius: 20px; overflow: hidden; }
.vlg figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.vlg figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vlg-body { padding: 1.25rem 1.35rem 1.5rem; }
.vlg-k { margin: 0 0 .3rem; font-size: .8125rem; font-weight: 700; color: var(--brand); }
.vlg .h3 { margin: 0 0 .4rem; }
.vlg-body > p:not(.vlg-k) { margin: 0; color: var(--text-2); font-size: .9375rem; }
.vlg-list { list-style: none; margin: .9rem 0 0; padding: .9rem 0 0; border-top: 1px solid rgba(28, 50, 93, .1); display: grid; gap: .35rem; }
.vlg-list li { position: relative; padding-left: 1rem; font-size: .9063rem; color: var(--dark); }
.vlg-list li::before { content: ""; position: absolute; left: 0; top: .65em; width: .5rem; height: 2px; background: var(--brand); }

.wwd { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.wwd-card { display: flex; flex-direction: column; gap: .4rem; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform 160ms var(--ease-out); }
.wwd-card:active { transform: scale(.985); }
.wwd-card figure { margin: 0 0 .7rem; aspect-ratio: 4 / 3; border-radius: 0 0 var(--curve) 0; overflow: hidden; }
.wwd-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 300ms var(--ease-out); }
.wwd-card b { font-size: 1.1875rem; color: var(--dark); }
.wwd-card > span:not(.link-arrow) { color: var(--text-2); font-size: .9375rem; line-height: 1.5; }
.wwd-card .link-arrow { margin-top: .35rem; }
@media (hover: hover) and (pointer: fine) { .wwd-card:hover img { transform: scale(1.04); } .wwd-card:hover .link-arrow svg { transform: translateX(3px); } }
.approach-photo { margin: 1.5rem 0 0; border-radius: 0 0 var(--curve) 0; overflow: hidden; }
.approach-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

@media (max-width: 960px) {
  .vmv, .villages3, .wwd { grid-template-columns: 1fr; }
  .history-grid { grid-template-columns: 1fr; }
  .history-intro { position: static; }
}
@media (max-width: 640px) {
  .timeline-v::before { left: 3.6rem; }
  .timeline-v li { grid-template-columns: 3.6rem minmax(0, 1fr); gap: 1.1rem; }
  .timeline-v li::after { left: calc(3.6rem - 5px); }
  .tl-y { font-size: 1rem; }
}

/* Impact hero tile: a blurred photo under a navy wash instead of the curve shapes */
.ib-hero::before, .ib-hero::after { display: none !important; }
.ib-hero { background: var(--dark); isolation: isolate; }
.ib-hero .ib-bg { position: absolute; top: 0; right: 0; bottom: 0; left: auto; z-index: -2; width: 68%; height: 100%; object-fit: cover;
  object-position: 45% 40%; filter: blur(1.5px) saturate(1.1); }   /* the photo fills the right side, softly focused */
.ib-hero .ib-wash { position: absolute; inset: 0; z-index: -1;
  /* navy behind the text on the left, fading so the photo shows through on the right */
  background: linear-gradient(90deg, var(--dark) 0%, var(--dark) 32%, rgba(28, 50, 93, .55) 52%, rgba(28, 50, 93, .1) 100%),
              linear-gradient(0deg, rgba(28, 50, 93, .45) 0%, rgba(28, 50, 93, 0) 40%); }
@media (max-width: 1060px) { .ib-hero .ib-bg { width: 60%; } }
@media (max-width: 640px) { .ib-hero .ib-bg { width: 100%; } .ib-hero .ib-wash { background: linear-gradient(0deg, var(--dark) 15%, rgba(28, 50, 93, .55) 60%, rgba(28, 50, 93, .2) 100%); } }
@media (prefers-reduced-transparency: reduce) { .ib-hero .ib-bg { display: none; } }

/* Product page: the product video spot (a calm "coming soon" frame until SOS sends the film) */
.pv-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.pv-frame { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
  aspect-ratio: 16 / 9; border-radius: 0 0 var(--curve) 0; overflow: hidden; text-align: center; padding: 1.5rem; }
.pv-soon { background: radial-gradient(120% 90% at 30% 20%, #27447a 0%, var(--dark) 60%); color: #fff; }
.product-video-banner .pv-frame { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0 0 var(--curve) 0; }
.pv-soon .pv-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .48; }
.pv-soon::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 25, 52, .18), rgba(8, 25, 52, .78)); pointer-events: none; }
.product-video-hero > :not(.pv-poster) { position: relative; z-index: 1; }
.pv-play { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin-bottom: .6rem;
  background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); color: rgba(255, 255, 255, .75); }
.pv-play svg { width: 26px; height: 26px; margin-left: 3px; }
.pv-k { font-size: .8125rem; font-weight: 700; letter-spacing: .04em !important; text-transform: uppercase; color: var(--brand-50); }
.pv-soon b { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; color: #fff; }
.pv-t { max-width: 34ch; font-size: .9375rem; color: rgba(255, 255, 255, .78); }
@media (max-width: 860px) { .pv-row { grid-template-columns: 1fr; } }

/* ═════════════ Forms: spam honeypot + sending state (pre-launch, Oct 2026) ═════════════ */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* While the request is in flight: dim the button and say so, so a second tap doesn't feel ignored */
.is-sending button[type="submit"], form.is-sending .subscribe button { opacity: .7; cursor: progress; pointer-events: none; transition: opacity 150ms ease; }
.is-sending button[type="submit"]::after { content: "…"; }

/* Payment states added for the double-payment guard (Oct 2026).
   Still waiting: the same pulse, slowed, so it reads as patient rather than stuck.
   Already received / couldn't confirm: the pulse stops; nothing is happening any more. */
.dp-status[data-state="waiting"] .dp-phone-pulse::after { animation-duration: 2.6s; }
.dp-status[data-state="duplicate"] .dp-phone-pulse::after, .dp-status[data-state="unknown"] .dp-phone-pulse::after { animation: none; opacity: 0; }
.dp-status[data-state="unknown"] .dp-phone-pulse span { border-color: #b7791f; }


/* Hero slide 1: SOS's headline in bold capitals */
body .ed-curtained .ed-title.ed-title-caps:not(#\#) { text-transform: uppercase !important; font-weight: 900; letter-spacing: .01em !important; line-height: 1.08; }
.ed-card-title { text-transform: none; }

/* Hero slide 1: SOS's initiative name as the headline, in bold capitals (Oct 2026 feedback) */
body .ed-curtained .ed-copy:first-child .ed-title:not(#\#) { text-transform: uppercase !important; font-weight: 900; letter-spacing: .01em !important; line-height: 1.08; }
body .ed-curtained .ed-copy:first-child .ed-eyebrow:empty { display: none; }
.who-films { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.who-films .h3 { margin: 0 0 .35rem; }
.who-films > .muted { margin: 0 0 1.25rem; }
.vgrid.vgrid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .vgrid.vgrid-3 { grid-template-columns: 1fr; } }

/* Payment page: one Donate section — step 1 choose (cards), step 2 pay (form) */
.df-step + .df-step { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid rgba(28, 50, 93, .12); }
.df-k { display: flex; align-items: center; gap: .6rem; margin: 0 0 .6rem; font-size: .875rem; font-weight: 700; color: var(--dark); }
.df-k span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--dark); color: #fff; font-size: .8125rem; font-weight: 800; }
.df-h { margin: 0 0 .5rem; font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 500; color: var(--dark); }
.df-lede { margin: 0 0 1.5rem; color: var(--text-2); max-width: 46em; }
.df-lede b { color: var(--dark); }
.df-pay .dp2 { background: #fff; }

/* Partner pages: justified body text on larger screens (SOS request); left-aligned on phones to avoid gaps */
@media (min-width: 900px) {
  body:is([data-page="give-sme"], [data-page="give-corporate"], [data-page="partner"]) main :is(.prose p, .lede, .baton-intro p, .section-head .lede, .pillar p, .pw-card > b) {
    text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; }
}

/* Safeguarding, anti-fraud and corruption page */
.sg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sg { padding: 1.15rem 1.2rem 1.25rem; background: var(--brand-10); border-radius: 16px; }
.section.alt .sg { background: #fff; }
.sg b { display: block; margin-bottom: .3rem; color: var(--dark); }
.sg p { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--text-2); }
.prose-lite { margin: 0 0 1.25rem; font-size: 1.0625rem; color: var(--dark); }
.sg-warn { margin-top: 1.25rem; padding: 1.15rem 1.3rem; border-radius: 16px; background: #fdecee; }
.sg-warn b:first-child { display: block; margin-bottom: .3rem; color: #a3202f; }
.sg-warn p { margin: 0; color: #5c1c25; font-size: .9375rem; line-height: 1.55; }
.report-ways { display: grid; gap: 10px; }
.rw { padding: 1.05rem 1.2rem; background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px rgba(28, 50, 93, .06); }
.rw b { display: block; color: var(--dark); }
.rw p { margin: .25rem 0 0; color: var(--text-2); }
.rw a { color: var(--dark); font-weight: 700; }
.rw-urgent { background: var(--dark); }
.rw-urgent b, .rw-urgent p, .rw-urgent a { color: #fff; }
.pol-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; }
.pol-list li { padding: 1rem 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: .2rem; }
.pol-list b { color: var(--dark); }
.pol-list span { color: var(--text-2); font-size: .9375rem; }
.sg-band { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding: 1.4rem 1.6rem; border-radius: 20px;
  background: var(--dark); color: #fff; text-decoration: none; transition: transform 160ms var(--ease-out); }
.sg-band:active { transform: scale(.99); }
.sg-band b { display: block; font-size: 1.125rem; }
.sg-band small { color: rgba(255, 255, 255, .8); font-size: .9375rem; }
.sg-band .link-arrow { color: #fff; }
@media (max-width: 860px) { .sg-grid, .pol-list { grid-template-columns: 1fr; } }

/* Homepage: the bar lists the four packages (links to their pages), so no section ring/number */
.subnav-packages .sn-ring, .subnav-packages .sn-idx { display: none; }
.subnav-packages a::before { display: none !important; }
@media (hover: hover) and (pointer: fine) { .subnav-packages a:hover { background: var(--brand-10); } }

/* Closing CTA: make the complete action set easy to scan without letting one action
   overpower the others. The grid keeps the two long labels balanced on desktop. */
.cta-photo .cta-actions {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .7rem;
  width: min(100%, 880px);
}
.cta-photo .cta-actions .btn { min-width: 0; }
.cta-photo .cta-actions .btn:nth-child(-n + 3) { grid-column: span 2; }
.cta-photo .cta-actions .btn:nth-child(n + 4) { grid-column: span 3; }
body .cta-photo .cta-actions .btn-cta-donate:not(#\#) {
  background: var(--red);
  color: #fff;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18);
}
@media (hover: hover) and (pointer: fine) {
  body .cta-photo .cta-actions .btn-cta-donate:not(#\#):hover { background: #cf4a5c; }
}
@media (max-width: 760px) {
  .cta-photo .cta-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-photo .cta-actions .btn:nth-child(n) { grid-column: span 1; }
  .cta-photo .cta-actions .btn:first-child { grid-column: 1 / -1; }
}

/* Pass on the Baton: SOS's banner is the section. It runs edge to edge, shown whole, and its blue band
   carries straight on into the section's background, so the line and the text under it are one piece with
   the picture. Text is navy: white is too faint on this blue except at the size of the heading. */
.initiative { --baton-navy: #0b1d4f; padding-top: 0; background: #0191ea; color: var(--baton-navy); }
.initiative.curtain-bg { color: var(--baton-navy); }
.initiative.curtain-bg::before { background: #0191ea; border-bottom-right-radius: var(--curve); }
/* The curtain: the banner and tagline sweep in with the blue behind them, at the same speed (see .curtain-bg) */
.baton-banner { margin: 0; clip-path: inset(0 0 0 0); transition: clip-path 650ms var(--ease-in-out); }
body:not(.no-js) .initiative.curtain-bg:not(.is-in) .baton-banner { clip-path: inset(0 100% 0 0); }
.baton-banner img { display: block; width: 100%; height: auto; }
.baton-banner figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .15em 1.25em; padding: .25rem var(--gutter) 0; color: #fff; text-align: center; }
.baton-banner b { font-size: clamp(.9375rem, 1.3vw, 1.125rem); font-weight: 800; color: var(--baton-navy); }
.baton-banner span { font-size: clamp(1.3rem, 2.4vw, 2rem); font-weight: 900; }
.baton-banner em { font-style: normal; }
.baton-banner .bb-you { padding: 0 .3em; background: #ffd36b; color: var(--baton-navy); }
.baton-banner .bb-forward { color: var(--baton-navy); }
.initiative .initiative-grid { margin-top: clamp(2.25rem, 4.5vw, 3.75rem); }
.initiative .initiative-kicker { color: var(--baton-navy); }
.initiative .initiative-kicker::before { background: var(--baton-navy); }
body .initiative-title:not(#\#) { color: #fff; }
.initiative .initiative-lead, .initiative .initiative-body p,
.initiative .initiative-body b, .initiative .initiative-lead b { color: var(--baton-navy); }

@media (prefers-reduced-motion: reduce) {
  .initiative.curtain-bg::before { clip-path: none; }
  body:not(.no-js) .initiative.curtain-bg:not(.is-in) .baton-banner { clip-path: none; }
}

/* Sections added in the editor (_build/blocks.py) */
.block-body { white-space: pre-line; }
.block-text { max-width: 760px; }
.block-text .h2, .block-copy .h2 { margin: .25rem 0 0; }
.block-text .block-body { margin-top: 1rem; }
.block-media { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.block-media.flip .block-fig { order: 2; }
.block-fig { margin: 0; }
.block-fig img, .block-full img { display: block; width: 100%; height: auto; border-radius: 8px; }
.block-copy .block-body { margin: 1rem 0 1.5rem; color: var(--text-2); }
.block-full { margin: 0 auto; }
.block-full figcaption { margin-top: .75rem; font-size: .9375rem; color: var(--text-2); }
.block-quote { max-width: 820px; margin: 0 auto; text-align: center; }
.block-quote blockquote { margin: 0; font-size: clamp(1.4rem, 2.8vw, 2rem); line-height: 1.3; letter-spacing: -.015em; color: var(--navy); }
.block-quote figcaption { margin-top: 1rem; color: var(--text-2); }
.block-cols-title { margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); }
.block-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.block-cols .block-body { margin: .5rem 0 0; color: var(--text-2); }
.block-cta { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; padding: clamp(2rem, 5vw, 3.5rem); border-radius: 8px; background: var(--navy); color: #fff; }
.block-cta .h2 { margin: 0; color: #fff; }
.block-cta .block-body { margin: .75rem 0 0; color: rgba(255, 255, 255, .85); max-width: 46ch; }
.block-cta .btn { background: #fff; color: var(--navy); }
@media (max-width: 760px) {
  .block-media, .block-cols, .block-cta { grid-template-columns: 1fr; }
  .block-media.flip .block-fig { order: 0; }
}

/* Policy and legal pages: the title and text share one centred column, so the page isn't lopsided */
body:is([data-page="privacy"], [data-page="terms"], [data-page="refund-policy"], [data-page="governing-law"]) main .wrap { max-width: calc(820px + 2 * var(--gutter)); }
body:is([data-page="privacy"], [data-page="terms"], [data-page="refund-policy"], [data-page="governing-law"]) .page-hero .lede { max-width: none; }
body:is([data-page="privacy"], [data-page="terms"], [data-page="refund-policy"], [data-page="governing-law"]) .prose { max-width: none; }
body:is([data-page="privacy"], [data-page="terms"], [data-page="refund-policy"], [data-page="governing-law"]) .section.tight { padding-top: 0; }
body:is([data-page="privacy"], [data-page="terms"], [data-page="refund-policy"], [data-page="governing-law"]) .page-hero .h1::before { display: none; }

/* Client feedback, Nov 2026 */
/* Explore: solid blue so it reads as the card's action. #0077b3 keeps white text legible. */
.pt-more { background: #0077b3; color: #fff; transition: background-color 160ms ease, transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .pt-link:hover .pt-more { background: #00659a; } }
.pt-link:active .pt-more { transform: scale(.97); }
.pt-metric { margin-top: .5rem; font-size: .8125rem; font-weight: 700; line-height: 1.35; color: var(--blue-ink); }

.invest-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.invest-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.invest-grid .h3 { font-size: 1rem; }
.sg p { margin: .35rem 0 0; }
.sg .checks { margin-top: .75rem; }
.invest-close { margin: 1.75rem auto 0; max-width: 46em; font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 700; line-height: 1.35; text-align: center; color: var(--blue-ink); }

.results-path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.results-path li { position: relative; display: flex; flex-direction: column; gap: .25rem; padding: 1rem .9rem; background: var(--brand-10); border-radius: 14px; }
.results-path li:first-child { background: #0077b3; color: #fff; }
.results-path li:last-child { background: var(--dark); color: #fff; }
.results-path b { font-size: .9375rem; }
.results-path span { font-size: .8125rem; line-height: 1.35; opacity: .85; }
.results-outcome { margin: 1.5rem auto 0; max-width: 46em; padding: 1rem 1.25rem; text-align: center; background: var(--brand-10); border-radius: 14px; }
.results-outcome small { display: block; margin-bottom: .25rem; font-weight: 700; color: var(--blue-ink); }
@media (max-width: 900px) { .results-path { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* One card: the name opens the product, the PDF sits at the foot of it */
.forms-list.briefs li.brief-card { display: flex; flex-direction: column; gap: .75rem; padding: 1.1rem 1.2rem; background: var(--bg); border: 1px solid var(--line); border-radius: 16px; }
.forms-list.briefs .brief-card a { display: flex; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; color: inherit; }
.forms-list.briefs .brief-open { flex-direction: column; gap: .25rem; flex: 1; }
.forms-list.briefs .brief-card .link-arrow { flex-direction: row; align-items: center; gap: .4rem; margin-top: auto; font-weight: 700; color: var(--blue-ink); }

/* Footer: About, Support, Legal, Contact and Newsletter side by side, with the logo above. Tablets and phones keep
   the layout set further up. */
@media (min-width: 1061px) {
  body .foot-grid:not(#\#) { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.35fr); }
  body .foot-grid:not(#\#) > :first-child { grid-column: 1 / -1; }
}
footer .foot-grid > :first-child .brand { margin-bottom: 0 !important; }
footer .foot-grid a { overflow-wrap: anywhere; }

.team p { margin: .25rem 0 0; }

/* Product pages: the need lines up with the page instead of reaching past the scrollbar */
.product-need-top { width: auto; margin-left: 0; padding-inline: 0; }

/* Product pages open with a big title, the video, then the presentation slide */
body .product-title:not(#\#):not(#\#) { font-size: clamp(2.1rem, 5.4vw, 4.1rem); line-height: 1.04; letter-spacing: -.02em !important; text-transform: uppercase !important; }
.product-sub { margin: .75rem 0 0; font-size: clamp(1rem, 1.5vw, 1.2rem); color: var(--text-2); }
.product-sub b { color: var(--dark); font-weight: 700; }
.product-top .product-video-banner { margin-top: clamp(1.25rem, 3vw, 2rem); }
.product-top .ready { margin-top: 1.5rem; }

.inv-slide { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.inv-need { position: sticky; top: 110px; display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem; min-height: 420px; padding: clamp(1.5rem, 3vw, 2.25rem); background: #0077b3; color: #fff; border-radius: 0 0 var(--curve) 0; }
body .inv-need small:not(#\#) { display: block; margin-bottom: .6rem; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.inv-need p { margin: 0; color: #fff; }
.inv-need-t { font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.inv-obj p { font-weight: 600; line-height: 1.4; }
.inv-hint { margin: 0 0 .75rem; font-weight: 700; color: var(--dark); }
.inv-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.inv-card { order: var(--o2); position: relative; display: flex; flex-direction: column; gap: .4rem; min-height: 132px; margin-bottom: 12px; padding: 1.1rem 2.75rem 1.1rem 1.2rem; font: inherit; text-align: left; text-decoration: none; color: var(--text-2); background: #fff; border: 1px solid transparent; border-radius: 14px; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform 160ms var(--ease-out), border-color 160ms ease, background-color 160ms ease; }
body .inv-card b:not(#\#) { font-size: 1rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--dark); }
.inv-card:active { transform: scale(.97); }
.inv-card:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .inv-card:hover { border-color: #0077b3; } }
.inv-card[aria-expanded="true"] { border-color: #0077b3; background: var(--brand-10); }
.inv-pm { position: absolute; top: 1rem; right: 1rem; display: grid; place-items: center; width: 26px; height: 26px; color: #fff; background: #0077b3; border-radius: 50%; transition: transform 200ms var(--ease-out); }
.inv-pm svg { width: 14px; height: 14px; }
.inv-card[aria-expanded="true"] .inv-pm { transform: rotate(45deg); }
.inv-panel { order: var(--o2); grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 240ms var(--ease-out), visibility 0s linear 240ms; }
.inv-panel.is-open { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 240ms var(--ease-out), visibility 0s; }
body.no-js .inv-panel { grid-template-rows: 1fr; visibility: visible; }
.inv-panel-in { min-height: 0; overflow: hidden; }
.inv-panel-body { margin-bottom: 12px; padding: 1.2rem 1.25rem 1.35rem; background: #fff; border-radius: 14px; opacity: 0; transition: opacity 160ms ease; }
.inv-panel.is-open .inv-panel-body, body.no-js .inv-panel-body { opacity: 1; }
.inv-panel-body .h3 { margin: 0 0 .75rem; font-size: 1.0625rem; }
.inv-panel-body .btn { margin-top: 1.1rem; }
.inv-main .invest-close { margin-top: 1.25rem; }
@media (prefers-reduced-motion: reduce) { .inv-panel, .inv-panel.is-open, .inv-pm, .inv-card { transition: none; } }
@media (max-width: 960px) { .inv-slide { grid-template-columns: minmax(0, 1fr); } .inv-need { position: static; min-height: 0; } }
@media (max-width: 760px) {
  .inv-cards { grid-template-columns: minmax(0, 1fr); }
  .inv-card, .inv-panel { order: var(--o1); }
  .inv-card { min-height: 0; scroll-margin-top: 90px; }
}

.pv-play { flex: none; }

.inv-panel-body .ready { margin-top: 1.1rem; }
.inv-panel-body .ready .btn { margin-top: 0; }
.field[hidden] { display: none; }
.two:has(> [data-money-only][hidden]) { grid-template-columns: minmax(0, 1fr); }

/* ALL CAPS from the editor's formatting bar. Strong, because the site's type rules turn capitals off. */
body .caps:not(#\#):not(#\#) { text-transform: uppercase !important; }

/* Payment form: the gift on a navy panel, the methods side by side, and a baton that travels with the donor.
   All the rules below answer to the space the form has, not the screen, because it also sits in a column on Contact. */
body .dp2:not(#\#) { container: dp2 / inline-size; padding: 0; overflow: hidden; background: #fff; border-radius: 20px 20px 88px 20px; box-shadow: 0 2px 6px rgba(28, 50, 93, .06), 0 28px 64px rgba(28, 50, 93, .16); }
.df-pay .give-top { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
.dp-split { display: grid; grid-template-columns: minmax(0, 1fr); }
.dp-side { display: flex; flex-direction: column; gap: 2rem; padding: clamp(1.5rem, 3vw, 2.25rem); color: #fff; background: var(--dark); }
.dp-main { min-width: 0; padding: clamp(1.5rem, 3vw, 2.25rem); }
@container dp2 (min-width: 820px) {
  .dp-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .dp-side { justify-content: space-between; }
  .dp-split { min-height: 34rem; }
  .dp-main { padding-bottom: 3rem; }
}

/* The navy panel */
.dp2 .dp-side .dp-amounts { margin: 0; }
body .dp2 .dp-side .dp-k:not(#\#), body .dp2 .dp-side .dp-hint:not(#\#), body .dp2 .dp-side .dp-fx:not(#\#) { color: var(--brand-20); }
body .dp2 .dp-side .dp-test:not(#\#) { color: #ffd479; }
body .dp2 .dp-side .dp-big:not(#\#) { color: #fff; }
.dp2 .dp-side .dp-big:focus-within { box-shadow: inset 0 -2px 0 var(--brand-50); }
body .dp2 .dp-side .dp-big span:not(#\#) { color: #fff; font-weight: 500; }
body .dp2 .dp-side .dp-big input:not(#\#) { color: #fff; font-weight: 500; caret-color: var(--brand-50); }
body .dp2 .dp-side .dp-big input:not(#\#)::placeholder { color: rgba(255, 255, 255, .4); }
body .dp2 .dp-side .dp-chips label > span:not(#\#), body .dp2 .dp-side .dp-other-btn:not(#\#) { color: #fff; background: transparent; box-shadow: inset 0 0 0 1px rgba(205, 232, 248, .45); }
body .dp2 .dp-side .dp-chips input:checked + span:not(#\#), body .dp2 .dp-side .dp-other-btn.is-on:not(#\#) { color: var(--dark); background: #fff; box-shadow: none; }
body .dp2 .dp-side .dp-chips input:focus-visible + span:not(#\#) { outline-color: #fff; }
@media (hover: hover) and (pointer: fine) { body .dp2 .dp-side .dp-chips label:hover input:not(:checked) + span:not(#\#) { box-shadow: inset 0 0 0 1px #fff; } }
body .dp2 .dp-side .dp-impact:not(#\#) { color: #fff; font-size: 1.0625rem; font-weight: 500; line-height: 1.35; }
.dp-side .dp-fx select { color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(205, 232, 248, .45); }
.dp-side .dp-fx select option { color: var(--dark); }
body .dp2 .dp-side .dp-fx-out:not(#\#) { color: #fff; }

/* The baton's path */
.ds-caption { min-height: 2.8em; margin: 0 0 .9rem; font-size: 1.125rem; font-weight: 500; line-height: 1.3; letter-spacing: -.005em; color: #fff; transition: opacity 120ms ease, transform 160ms var(--ease-out); }
.ds-caption.is-out { opacity: 0; transform: translateY(4px); }
.ds-track { position: relative; height: 18px; }
.ds-line { position: absolute; top: 8px; left: 0; right: 0; height: 2px; overflow: hidden; background: rgba(205, 232, 248, .28); border-radius: 1px; }
.ds-line i { display: block; height: 100%; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform 520ms var(--ease-drawer); }
.ds-node { position: absolute; top: 5px; width: 8px; height: 8px; margin-left: -4px; background: var(--dark); border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(205, 232, 248, .55); }
.ds-node:nth-of-type(2) { left: 4px; } .ds-node:nth-of-type(3) { left: 33.33%; } .ds-node:nth-of-type(4) { left: 66.66%; } .ds-node:nth-of-type(5) { left: calc(100% - 4px); }
.ds-baton { position: absolute; top: 3px; left: 0; width: 34px; height: 12px; background: linear-gradient(90deg, var(--brand), #fff); border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 171, 236, .55); opacity: .35; transition: transform 520ms var(--ease-drawer), opacity 200ms ease; }
.dp-story:not([data-stage="0"]) .ds-baton { opacity: 1; }
.dp-story[data-stage="4"] .ds-baton { animation: ds-pulse 1.1s ease-in-out infinite; }
.dp-story[data-stage="5"] .ds-baton { background: #fff; box-shadow: 0 0 0 4px rgba(0, 171, 236, .35), 0 2px 12px rgba(0, 171, 236, .6); }
@keyframes ds-pulse { 50% { box-shadow: 0 0 0 7px rgba(0, 171, 236, .28), 0 2px 10px rgba(0, 171, 236, .55); } }
.ds-labels { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: .55rem 0 0; padding: 0; font-size: .75rem; color: var(--brand-20); }
.ds-labels li:nth-child(2), .ds-labels li:nth-child(3) { text-align: center; }
.ds-labels li:last-child { text-align: right; }
@media (prefers-reduced-motion: reduce) {
  .ds-baton, .ds-line i { transition: opacity 200ms ease; }
  .dp-story[data-stage="4"] .ds-baton { animation: none; }
  .ds-caption { transition: opacity 120ms ease; transform: none; }
}

/* The methods, side by side, with the chosen one's details underneath */
.dp2 .dp-methods { margin-top: 0; }
body .dp2 .dp-group:not(#\#) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; overflow: visible; background: none; border-radius: 0; box-shadow: none; }
.dp2 .dp-method { display: contents; }
.dp2 .dp-method + .dp-method { border-top: 0; }
body .dp2 .dp-mrow:not(#\#) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem; min-height: 88px; padding: .6rem .35rem; background: #fff; border-radius: 14px; box-shadow: inset 0 0 0 1.5px #d9e4ec; transition: transform 120ms var(--ease-out), box-shadow 160ms ease, background-color 160ms ease; }
body .dp2 .dp-mrow:not(#\#):active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { body .dp2 .dp-method:not(.is-open) .dp-mrow:not(#\#):hover { background: #fff; box-shadow: inset 0 0 0 1.5px #0077b3; } }
body .dp2 .is-open .dp-mrow:not(#\#) { background: var(--brand-10); box-shadow: inset 0 0 0 1.5px #0077b3; }
.dp2 .dp-mrow .dp-logo { width: auto; height: 28px; background: none; box-shadow: none; }
.dp2 .dp-mrow .dp-radio { display: none; }
.dp2 .dp-mrow .dp-mtext { align-items: center; }
.dp2 .dp-mrow .dp-mtext b { font-size: .875rem; font-weight: 500; }
.dp2 .dp-mrow .dp-mtext small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dp2 .dp-mbody { grid-column: 1 / -1; order: 1; display: none; }
.dp2 .is-open > .dp-mbody { display: block; animation: dp-show 240ms var(--ease-out); }
@keyframes dp-show { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .dp2 .is-open > .dp-mbody { animation-name: dp-fade; } @keyframes dp-fade { from { opacity: 0; } } }
.dp2 .dp-minner { overflow: visible; }
.dp2 .dp-minner > .dp-panel, .dp2 .is-open .dp-minner > .dp-panel { padding: .9rem 0 0; opacity: 1; }
.dp2 .dp-abroad { margin-top: 1.25rem; }
/* While a payment is under way, only that payment is on the screen */
.dp2.is-paying .dp-abroad, .dp2.is-paying .dp-secure { display: none; }
.dp2.is-paying .dp-side { justify-content: center; }
.dp2.is-paying .dp-main { display: flex; flex-direction: column; justify-content: center; }
@container dp2 (max-width: 460px) {
  body .dp2 .dp-group:not(#\#) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .dp2 .dp-mrow:not(#\#) { min-height: 76px; }
}