/* ==========================================================================
   Global Refugee Reach — Core Stylesheet
   Palette: Dark Blue rgb(8,55,150) · Light Blue rgb(171,216,230) · Neutrals
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand */
  --blue-900: #041e56;
  --blue-800: #062a75;
  --blue-700: rgb(8, 55, 150);      /* PRIMARY DARK BLUE */
  --blue-600: #1247b5;
  --blue-500: #2f63cf;
  --blue-200: #cfe6f0;
  --blue-100: rgb(171, 216, 230);   /* SECONDARY LIGHT BLUE */
  --blue-50:  #eef7fb;

  /* Page tint — rgb(179, 216, 226) laid over white at low opacity */
  --tint-rgb: 179, 216, 226;
  --tint-50: rgba(var(--tint-rgb), .10);
  --tint-100: rgba(var(--tint-rgb), .18);
  --tint-200: rgba(var(--tint-rgb), .30);

  /* Neutrals */
  --white: #ffffff;
  --gray-50: #f8fafc;
  --gray-100: #f1f4f8;
  --gray-200: #e4e9f0;
  --gray-300: #cdd5e0;
  --gray-500: #6b7688;
  --gray-700: #3d4657;
  --gray-900: #151b26;

  /* Semantic */
  --bg: #eff7fa;              /* tinted page background */
  --bg-alt: #e7f2f6;          /* one step deeper */
  --surface: #ffffff;         /* cards sit above the tint */
  --ink: var(--gray-900);
  --ink-soft: var(--gray-500);
  --line: #dbe6ec;
  --brand: var(--blue-700);
  --accent: var(--blue-100);

  /* Type — a warm display serif against a neutral UI sans */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Space & shape */
  --container: 1240px;
  --container-narrow: 880px;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(4, 30, 86, .06);
  --shadow-sm: 0 4px 14px rgba(4, 30, 86, .07);
  --shadow-md: 0 12px 30px rgba(4, 30, 86, .10);
  --shadow-lg: 0 24px 60px rgba(4, 30, 86, .16);

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .35s;

  --header-h: 76px;
}

/* Large displays get more room and slightly larger type, so the layout
   keeps breathing instead of stranding content in the middle. */
@media (min-width: 1500px) { :root { --container: 1400px; --header-h: 84px; } }
@media (min-width: 1800px) { :root { --container: 1560px; } }
@media (min-width: 2200px) { :root { --container: 1720px; } }

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@media (min-width: 1500px) { body { font-size: 1.125rem; } }
img, svg, video { max-width: 100%; display: block; }
h1, h2, h3, h4 {
  margin: 0 0 .5em; line-height: 1.14; letter-spacing: -.012em;
  font-family: var(--font-display); font-weight: 700; color: var(--blue-900);
}
h1 { font-size: clamp(2.4rem, 5.2vw, 4.1rem); letter-spacing: -.018em; font-weight: 600; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); letter-spacing: -.015em; font-weight: 600; }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
p  { margin: 0 0 1.1em; }
a  { color: var(--blue-600); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--blue-700); }
ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }
li { margin-bottom: .4em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }
:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 3px; border-radius: 4px; }

/* ---------- 3. Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.15rem, 4vw, 2.5rem); }
.container--narrow { max-width: var(--container-narrow); }
.section { padding: clamp(3.75rem, 8vw, 7rem) 0; }
.section--tight { padding: clamp(2.75rem, 5vw, 4.25rem) 0; }
.section--alt { background: var(--bg-alt); }
.section--tint { background: linear-gradient(180deg, rgba(var(--tint-rgb), .32) 0%, rgba(var(--tint-rgb), .04) 100%); }
.section--plain { background: var(--surface); }
.section--brand { background: var(--blue-700); color: #dbe7ff; }
.section--brand h2, .section--brand h3 { color: var(--white); }

.section-head { max-width: 720px; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--ink-soft); font-size: 1.1rem; margin-bottom: 0; }
.section--brand .section-head p { color: #b9cdf5; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--blue-600); margin-bottom: .9rem;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--blue-100); border-radius: 2px; }
.section--brand .eyebrow { color: var(--blue-100); }
.section--brand .eyebrow::before { background: rgba(171,216,230,.5); }

.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); }
.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split--wide-left { grid-template-columns: 1.15fr .85fr; } }
.text-center { text-align: center; }
.lead { font-size: clamp(1.08rem, 1.7vw, 1.28rem); color: var(--gray-700); }

/* ---------- 4. Buttons ---------- */
.btn {
  --btn-bg: var(--blue-700); --btn-fg: #fff; --btn-bd: var(--blue-700);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.6rem; border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-weight: 600; font-size: .97rem; letter-spacing: .005em;
  background: var(--btn-bg); color: var(--btn-fg); border: 2px solid var(--btn-bd);
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.28) 50%, transparent 80%);
  transform: translateX(-120%); transition: transform .7s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--btn-fg); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0); }
.btn--primary:hover { --btn-bg: var(--blue-600); --btn-bd: var(--blue-600); }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--blue-700); --btn-bd: var(--blue-700); }
.btn--outline:hover { --btn-bg: var(--blue-700); --btn-fg: #fff; }
.btn--light { --btn-bg: var(--white); --btn-fg: var(--blue-700); --btn-bd: var(--white); }
.btn--light:hover { --btn-bg: var(--blue-100); --btn-bd: var(--blue-100); --btn-fg: var(--blue-900); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--blue-800); --btn-bd: transparent; }
.btn--ghost:hover { --btn-bg: rgba(var(--tint-rgb), .42); --btn-bd: rgba(var(--tint-rgb), .42); --btn-fg: var(--blue-700); }
.btn--ghost-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.55); }
.btn--ghost-light:hover { --btn-bg: rgba(255,255,255,.14); --btn-bd: #fff; }
/* Nav button for the page you're already on */
.nav__actions .btn--ghost[aria-current="page"] { --btn-bg: rgba(var(--tint-rgb), .5); --btn-bd: rgba(var(--tint-rgb), .5); --btn-fg: var(--blue-700); }
.nav__actions .btn--outline[aria-current="page"] { --btn-bg: var(--blue-700); --btn-fg: #fff; }
.btn--sm { padding: .6rem 1.15rem; font-size: .88rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }
.btn-row--center { justify-content: center; }

.link-arrow { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; color: var(--blue-700); }
.link-arrow span { transition: transform var(--dur) var(--ease); }
.link-arrow:hover span { transform: translateX(5px); }

/* ---------- 5. Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(239, 247, 250, .78);
  backdrop-filter: saturate(170%) blur(16px);
  -webkit-backdrop-filter: saturate(170%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); border-bottom-color: var(--line); background: rgba(244, 250, 252, .93); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; min-height: var(--header-h); }

.brand { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.brand__mark {
  width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
  background: #fff; border: 1px solid rgba(8, 55, 150, .12);
  display: grid; place-items: center; overflow: hidden;
  transition: transform var(--dur) var(--ease);
}
.brand:hover .brand__mark { transform: rotate(-4deg) scale(1.05); }
/* logo.png is a 1920x1080 export with the mark small and centred. Contain fits the
   whole canvas, then the scale blows the mark up and the chip crops the white
   margins away. Swap in a square, tightly-cropped export to drop the transform. */
.brand__mark img { width: 100%; height: 100%; object-fit: contain; transform: scale(3.15); }
@media (min-width: 1500px) { .brand__mark { width: 62px; height: 62px; } }
.brand__mark span { font-weight: 900; font-size: .74rem; color: var(--blue-700); letter-spacing: .02em; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; color: var(--blue-900); letter-spacing: -.01em; }
.brand__tag { font-size: .63rem; font-weight: 800; letter-spacing: .19em; text-transform: uppercase; color: var(--blue-600); }

.nav__links { display: flex; align-items: center; justify-content: center; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.nav__links li { margin: 0; }
.nav__links a {
  position: relative; display: block; padding: .55rem .7rem; border-radius: var(--radius-sm);
  font-family: var(--font-display); font-weight: 500; font-size: 1.02rem;
  letter-spacing: -.005em; color: var(--blue-900);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav__links a::after {
  content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .28rem; height: 2px;
  background: var(--blue-700); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease);
}
.nav__links a:hover { color: var(--blue-700); background: rgba(var(--tint-rgb), .28); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--blue-700); }

/* Brand left · links centred · actions right */
.nav__menu { display: flex; align-items: center; gap: 1rem; flex: 1 1 auto; justify-content: flex-end; }
.nav__menu .nav__links { flex: 1 1 auto; }
.nav__actions { display: flex; align-items: center; gap: .55rem; flex-shrink: 0; }
.nav__divider { width: 1px; height: 26px; background: var(--line); }

.nav__toggle {
  display: none; width: 46px; height: 46px; border-radius: 12px;
  background: var(--blue-50); border: 1px solid var(--line); cursor: pointer;
  padding: 0; place-items: center;
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  display: block; width: 20px; height: 2px; background: var(--blue-700); border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity .2s linear;
}
.nav__toggle span { position: relative; }
.nav__toggle span::before, .nav__toggle span::after { content: ""; position: absolute; left: 0; }
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after  { top: 6px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1180px) {
  .nav__toggle { display: grid; }
  .nav__menu {
    position: fixed; inset: var(--header-h) 0 auto 0;
    background: var(--white); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    padding: 1rem clamp(1.15rem, 4vw, 2.5rem) 1.75rem;
    display: grid; gap: .35rem; align-items: stretch;
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  }
  .nav__menu.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav__links { flex-direction: column; align-items: stretch; gap: .1rem; }
  .nav__links a { padding: .8rem .9rem; font-size: 1.02rem; }
  .nav__links a::after { display: none; }
  .nav__actions { flex-direction: column; align-items: stretch; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line); }
  .nav__actions .btn { width: 100%; }
  .nav__divider { display: none; }
}

/* ---------- 6. Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(3.5rem, 7vw, 7.5rem) 0 clamp(3.5rem, 7vw, 7rem);
  background: linear-gradient(165deg, rgba(var(--tint-rgb), .42) 0%, rgba(var(--tint-rgb), .06) 52%, rgba(var(--tint-rgb), .38) 100%);
}
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5; pointer-events: none; z-index: 1; }
.hero::before { width: 520px; height: 520px; background: var(--blue-100); top: -190px; right: -140px; }
.hero::after  { width: 420px; height: 420px; background: #dbe9ff; bottom: -200px; left: -160px; }
.hero .container { position: relative; z-index: 2; }

/* ---- Ambient image carousel behind the hero ----
   Two rows drifting in opposite directions at very low opacity. Swap each
   .bg-tile for <div class="bg-tile"><img src="..." alt=""></div> when photos land. */
.hero__backdrop {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(1rem, 3vw, 3rem) 0; gap: clamp(1rem, 3vw, 2.5rem);
  opacity: .18;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.bg-row { display: flex; gap: clamp(.75rem, 1.5vw, 1.5rem); width: max-content; }
.bg-row--a { animation: scrollx 75s linear infinite; }
.bg-row--b { animation: scrollx-rev 95s linear infinite; }
.bg-tile {
  width: clamp(170px, 15vw, 320px); aspect-ratio: 4 / 3; flex-shrink: 0;
  border-radius: 20px; overflow: hidden;
  background-color: rgba(var(--tint-rgb), .6);
  background-image: repeating-linear-gradient(45deg, rgba(8,55,150,.11) 0 14px, transparent 14px 28px);
  border: 1px solid rgba(8,55,150,.09);
}
.bg-tile img { width: 100%; height: 100%; object-fit: cover; }
@keyframes scrollx-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (max-width: 900px) { .hero__backdrop { opacity: .11; } }
.hero__inner { display: grid; gap: clamp(2.25rem, 5vw, 4rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 940px) { .hero__inner { grid-template-columns: 1fr 1.05fr; } }
@media (min-width: 1500px) { .hero__inner { grid-template-columns: 1fr 1.12fr; } }
.hero h1 { margin-bottom: .55em; }
.hero h1 .accent { position: relative; display: inline-block; color: var(--blue-700); z-index: 0; }
.hero h1 .accent::after {
  content: ""; position: absolute; left: -.06em; right: -.06em; bottom: .04em; height: .32em;
  background: var(--blue-100); border-radius: 4px; z-index: -1; opacity: .85;
}
.hero p.lead { max-width: 54ch; }
.hero__badge {
  display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1.4rem;
  padding: .45rem .95rem .45rem .55rem; border-radius: var(--radius-pill);
  background: var(--white); border: 1px solid var(--blue-200); box-shadow: var(--shadow-xs);
  font-size: .84rem; font-weight: 700; color: var(--blue-800);
}
.hero__badge b { display: inline-grid; place-items: center; padding: .2rem .6rem; border-radius: var(--radius-pill); background: var(--blue-700); color: #fff; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 1.5rem 2.25rem; margin-top: 2.25rem; padding-top: 1.75rem; border-top: 1px solid var(--blue-200); }
.hero__meta div strong { display: block; font-size: 1.75rem; font-weight: 900; color: var(--blue-700); line-height: 1.1; }
.hero__meta div span { font-size: .82rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); }
.hero__media { position: relative; }
.hero__media .ph { box-shadow: var(--shadow-lg); }
.hero__float {
  position: absolute; bottom: -22px; left: -18px; z-index: 2;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: .95rem 1.15rem; display: flex; align-items: center; gap: .8rem;
  animation: floaty 5s ease-in-out infinite;
}
.hero__float .dot { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.18); flex-shrink: 0; }
.hero__float strong { display: block; font-size: .92rem; color: var(--blue-900); }
.hero__float span { font-size: .78rem; color: var(--ink-soft); }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (max-width: 640px) { .hero__float { left: 50%; transform: translateX(-50%); bottom: -18px; animation: none; } }

/* Page banner (interior pages) */
.page-hero { position: relative; overflow: hidden; padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem); background: var(--blue-700); color: #e3ecff; }
.page-hero::before { content: ""; position: absolute; inset: 0; opacity: .18; background-image: radial-gradient(circle at 18% 22%, var(--blue-100) 0, transparent 42%), radial-gradient(circle at 84% 78%, #6f9fe8 0, transparent 44%); }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; margin-bottom: .35em; }
.page-hero p { max-width: 62ch; color: #c3d5f7; font-size: 1.1rem; margin-bottom: 0; }
.page-hero .eyebrow { color: var(--blue-100); }
.page-hero .eyebrow::before { background: rgba(171,216,230,.5); }
.crumbs { display: flex; gap: .5rem; align-items: center; font-size: .85rem; color: #a8c0ec; margin-bottom: 1.25rem; }
.crumbs a { color: var(--blue-100); font-weight: 600; }
.crumbs a:hover { color: #fff; }

/* ---------- 7. Placeholders ---------- */
.ph {
  position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: var(--radius); border: 2px dashed var(--blue-200);
  background-color: var(--blue-50);
  background-image: repeating-linear-gradient(45deg, rgba(171,216,230,.34) 0 12px, transparent 12px 24px);
  display: grid; place-items: center; text-align: center;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ph::after {
  content: attr(data-label);
  font-size: .74rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
  color: var(--blue-600); opacity: .85; padding: .35rem .7rem; max-width: 88%; line-height: 1.4;
  background: rgba(255,255,255,.82); border-radius: var(--radius-pill);
}
.ph:hover { border-color: var(--blue-700); background-color: #e6f2f8; }
.ph--wide  { aspect-ratio: 16 / 10; }
.ph--video { aspect-ratio: 16 / 9; }
.ph--tall  { aspect-ratio: 4 / 5; }
.ph--circle { border-radius: 50%; }
.ph--logo { aspect-ratio: 3 / 2; border-radius: var(--radius-sm); }
.ph--flat { border-style: solid; border-color: var(--line); background-image: none; background-color: var(--gray-100); }

/* ---- Offset photo stack ----
   A large photo with a second one overlapping its lower-right corner. */
/* padding-bottom reserves the room B hangs into, so it clears A's lower corner
   instead of sitting on top of it */
.photo-stack { position: relative; padding: 0 0 29% 0; }
.photo-stack__a, .photo-stack__b {
  overflow: hidden; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.photo-stack__a img, .photo-stack__b img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s var(--ease);
}
.photo-stack__a { width: 76%; aspect-ratio: 4 / 3; }
.photo-stack__b {
  position: absolute; right: 0; bottom: 0; width: 50%; aspect-ratio: 1 / 1;
  /* ring in the page colour so the two photos read as separate layers */
  outline: 8px solid var(--bg); outline-offset: -1px;
  box-shadow: var(--shadow-lg);
}
.photo-stack:hover .photo-stack__a { transform: translate(-6px, -6px); box-shadow: var(--shadow-lg); }
.photo-stack:hover .photo-stack__b { transform: translate(6px, 6px); }
.photo-stack__a:hover img, .photo-stack__b:hover img { transform: scale(1.06); }
/* soft tint bloom behind the stack */
.photo-stack::before {
  content: ""; position: absolute; z-index: -1;
  left: -6%; top: -6%; width: 62%; aspect-ratio: 1 / 1;
  background: rgba(var(--tint-rgb), .55); border-radius: 50%; filter: blur(46px);
}
.section--alt .photo-stack__b { outline-color: var(--bg-alt); }
@media (max-width: 520px) {
  .photo-stack { padding: 0; display: grid; gap: .9rem; }
  .photo-stack__a { width: 100%; }
  .photo-stack__b { position: static; width: 100%; aspect-ratio: 4 / 3; outline: 0; }
  .photo-stack:hover .photo-stack__a,
  .photo-stack:hover .photo-stack__b { transform: none; }
}

/* Real photos — same geometry as .ph, with a slow zoom on hover */
.media {
  position: relative; width: 100%; overflow: hidden;
  border-radius: var(--radius); background: rgba(var(--tint-rgb), .35);
  aspect-ratio: 1 / 1;
}
.media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.media--wide   { aspect-ratio: 16 / 10; }
.media--video  { aspect-ratio: 16 / 9; }
.media--tall   { aspect-ratio: 4 / 5; }
.media--photo  { aspect-ratio: 4 / 3; }
.media--circle { border-radius: 50%; }
/* Logos arrive at every shape and aspect, so they all sit on an identical white
   plate and are contained inside it. That keeps the row even regardless of the
   source file. */
.media--logo {
  aspect-ratio: 3 / 2; background: #fff;
  border: 1px solid var(--line); border-radius: 14px;
  padding: clamp(.9rem, 2vw, 1.4rem);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.media--logo img { object-fit: contain; }
.partner:hover .media--logo,
.partner-strip__item:hover .media--logo { border-color: var(--blue-200); box-shadow: var(--shadow-sm); }
/* Our logo.png is a 1920x1080 canvas with the mark small and centred, so scale it
   up inside the plate (same trick as .brand__mark) and hold it there on hover. */
.partner .media--logo-ours img,
.partner .media--logo-ours:hover img,
.partner:hover .media--logo-ours img { transform: scale(1.75); }
figure:hover .media img, .card:hover .media img,
.event-row:hover .media img, .hero__media:hover .media img,
.split:hover .media img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .media img { transition: none; } }

/* ---------- 8. Cards ---------- */
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 2.4vw, 2rem); box-shadow: var(--shadow-xs); position: relative; overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--blue-700), var(--blue-100));
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--blue-200); }
.card:hover::before { transform: scaleX(1); }
.card h3 { margin-bottom: .45em; }
.card p:last-child { margin-bottom: 0; }
.card__icon {
  width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center;
  background: var(--blue-50); color: var(--blue-700); border: 1px solid var(--blue-200);
  margin-bottom: 1.1rem; transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.card:hover .card__icon { transform: scale(1.08) rotate(-5deg); background: var(--blue-100); }
.card--plain::before { display: none; }

/* ---------- 9. Stats ---------- */
.stats { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.stat {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3vw, 2.25rem) 1.25rem; text-align: center; position: relative; overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.stat::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 60px; height: 4px; transform: translateX(-50%); background: var(--blue-100); border-radius: 4px 4px 0 0; transition: width var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.stat:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.stat:hover::after { width: 100%; background: var(--blue-700); }
.stat__num { font-family: var(--font-display); font-size: clamp(2.6rem, 5.5vw, 3.9rem); font-weight: 600; line-height: 1; color: var(--blue-700); letter-spacing: -.02em; }
.stat__label { margin-top: .7rem; font-size: .84rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-700); }
.stat__note { margin-top: .45rem; font-size: .85rem; color: var(--ink-soft); }
.section--brand .stat { background: rgba(255,255,255,.07); border-color: rgba(171,216,230,.28); }
.section--brand .stat__num { color: #fff; }
.section--brand .stat__label { color: var(--blue-100); }
.section--brand .stat__note { color: #a9c2ee; }
.section--brand .stat::after { background: rgba(171,216,230,.5); }
.section--brand .stat:hover::after { background: var(--blue-100); }

/* ---------- 10. Steps & timeline ---------- */
.steps { counter-reset: step; display: grid; gap: clamp(1.75rem, 2.5vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); margin-top: 2rem; }
.step { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2.6rem 1.75rem 1.9rem; box-shadow: var(--shadow-xs); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: -24px; left: 1.75rem;
  width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  background: var(--blue-700); color: #fff; font-weight: 900; font-size: 1.3rem;
  box-shadow: 0 8px 20px rgba(8,55,150,.28); transition: transform var(--dur) var(--ease);
}
.step:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.step:hover::before { transform: scale(1.08) rotate(-6deg); }
.step h3 { margin-top: .3rem; }
.step p:last-child { margin-bottom: 0; }

.timeline { position: relative; padding-left: 2.25rem; }
.timeline::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, var(--blue-700), var(--blue-100)); border-radius: 2px; }
.timeline__item { position: relative; padding-bottom: 2.25rem; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before { content: ""; position: absolute; left: -2.25rem; top: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--white); border: 4px solid var(--blue-700); transition: transform var(--dur) var(--ease); }
.timeline__item:hover::before { transform: scale(1.2); }
.timeline__meta { font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-600); margin-bottom: .25rem; }
.timeline__item h3 { font-size: 1.15rem; margin-bottom: .35em; }
.timeline__item p { margin-bottom: 0; color: var(--gray-700); }

/* Event cards with a photo slot on top */
.event-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.event-card .ph { border: 0; border-radius: 0; aspect-ratio: 16 / 10; }
.event-card__body { padding: clamp(1.35rem, 2.2vw, 1.75rem); }
.event-card__body > :last-child { margin-bottom: 0; }

/* Past events — photo + text rows, separated by hairlines */
.event-list { display: grid; gap: 0; border-top: 1px solid var(--blue-200); }
.event-row {
  display: grid; gap: 1rem 2rem; align-items: center;
  padding: clamp(1.35rem, 2.5vw, 2rem) 0; border-bottom: 1px solid var(--blue-200);
  transition: padding-left var(--dur) var(--ease);
}
@media (min-width: 700px) { .event-row { grid-template-columns: minmax(200px, 300px) 1fr; } }
.event-row:hover { padding-left: .6rem; }
.event-row .ph { aspect-ratio: 4 / 3; }
.event-row:hover .ph { border-color: var(--blue-700); }
.event-row h3 { margin-bottom: .3em; }
.event-row p { margin: 0; color: var(--gray-700); }

/* Creed — mission/vision/promise as ruled rows instead of a card grid */
.creed { margin: 0; padding: 0; border-top: 1px solid var(--blue-200); }
.creed__row {
  display: grid; gap: .35rem 2.5rem; align-items: baseline;
  padding: 1.6rem 0; border-bottom: 1px solid var(--blue-200);
  transition: padding-left var(--dur) var(--ease);
}
@media (min-width: 620px) { .creed__row { grid-template-columns: 150px 1fr; padding-block: 1.9rem; } }
.creed__row:hover { padding-left: .6rem; }
.creed dt {
  font-family: var(--font-sans); font-size: .76rem; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase; color: var(--blue-600);
  display: flex; align-items: center; gap: .6rem;
}
.creed dt::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--blue-100); border: 2px solid var(--blue-700);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.creed__row:hover dt::before { transform: scale(1.3); background: var(--blue-700); }
.creed dd {
  margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.1rem, 1.9vw, 1.4rem); line-height: 1.45; color: var(--blue-900);
}

/* Values as a single typographic line, not four boxes */
.values-line {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: .6rem clamp(1rem, 3vw, 2.5rem);
  margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0; list-style: none;
}
.values-line li {
  margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.05rem, 2.2vw, 1.6rem); color: var(--blue-800);
  position: relative; transition: color var(--dur) var(--ease);
}
.values-line li:not(:last-child)::after {
  content: "\2022"; margin-left: clamp(1rem, 3vw, 2.5rem);
  color: var(--blue-100); font-size: .8em;
}
.values-line li:hover { color: var(--blue-700); }

/* Milestone rail — compact horizontal alternative to the timeline */
.milestones {
  display: grid; gap: clamp(1rem, 2vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  position: relative;
}
.milestone {
  position: relative; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem 1.6rem;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.milestone:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--blue-200); }
.milestone__step {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  border-radius: 13px; margin-bottom: 1rem;
  background: var(--blue-50); border: 1px solid var(--blue-200);
  font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--blue-700);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.milestone:hover .milestone__step { background: var(--blue-100); transform: scale(1.08); }
.milestone--now { border-color: var(--blue-700); box-shadow: var(--shadow-sm); }
.milestone--now .milestone__step { background: var(--blue-700); color: #fff; border-color: var(--blue-700); }
.milestone h3 { font-size: 1.1rem; margin-bottom: .3em; }
.milestone p { margin: 0; font-size: .95rem; color: var(--ink-soft); }

/* ---------- 11. Team ---------- */
.team { display: grid; gap: clamp(1.5rem, 2.5vw, 2.25rem); grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); align-items: start; }
/* Five co-founders sit on a single row once there's room for it. */
@media (min-width: 1140px) { .team--five { grid-template-columns: repeat(5, 1fr); } }
.member { text-align: center; }
.member__photo { position: relative; width: 100%; max-width: 270px; margin: 0 auto 1.3rem; }
.member__photo .ph { border-radius: 50%; }
.member__photo::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 2px solid var(--blue-100); opacity: 0; transform: scale(.94);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.member:hover .member__photo::after { opacity: 1; transform: scale(1); }
.member:hover .member__photo .ph { transform: translateY(-4px); border-color: var(--blue-700); }
.member__name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--blue-900); margin-bottom: .2rem; }
.member__role { font-size: .84rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--blue-600); }
.member__bio { font-size: .93rem; color: var(--ink-soft); margin-top: .6rem; margin-bottom: 0; }
.member__tag { display: inline-block; margin-top: .6rem; padding: .2rem .7rem; border-radius: var(--radius-pill); background: var(--blue-50); border: 1px solid var(--blue-200); font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--blue-700); }

/* ---------- 12. Partners ---------- */
.partner-grid { display: grid; gap: clamp(1.25rem, 2vw, 1.75rem); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.partner {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem; display: flex; flex-direction: column; gap: 1.1rem;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.partner:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--blue-200); }
.partner__logo .ph { aspect-ratio: 3 / 2; }
.partner__name { font-family: var(--font-display); font-weight: 600; color: var(--blue-900); font-size: 1.18rem; margin-bottom: .35rem; }
.partner__desc { font-size: .92rem; color: var(--ink-soft); margin: 0; }

.partner-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: stretch; }
.partner-strip__item { display: flex; flex-direction: column; align-items: stretch; text-align: center; gap: .9rem; width: clamp(210px, 22vw, 280px); transition: transform var(--dur) var(--ease); }
.partner-strip__item:hover { transform: translateY(-4px); }
.partner-strip__item .ph { aspect-ratio: 3 / 2; }
.partner-strip__item span { font-size: .84rem; font-weight: 700; color: var(--gray-700); text-align: center; line-height: 1.35; }

/* ---------- 13. Gallery ---------- */
.gallery { display: grid; gap: clamp(1rem, 2vw, 1.75rem); grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.gallery figure { margin: 0; }
.gallery .ph { aspect-ratio: 4 / 3; }
.gallery figcaption { font-size: .92rem; }
.gallery figcaption { margin-top: .65rem; font-size: .88rem; color: var(--ink-soft); }
.gallery figure:hover .ph { transform: scale(1.015); }

/* ---------- 14. Lists, chips, quotes, bands ---------- */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.checklist li { position: relative; padding-left: 2rem; margin: 0; color: var(--gray-700); }
.checklist li::before {
  content: "\2713"; position: absolute; left: 0; top: .15rem;
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--blue-100); color: var(--blue-800); font-size: .78rem; font-weight: 900;
}
.checklist--no li::before { content: "\00D7"; background: #fde2e2; color: #b3261e; }
.chips { display: flex; flex-wrap: wrap; gap: .55rem; padding: 0; margin: 0; list-style: none; }
.chips li { margin: 0; padding: .42rem .95rem; border-radius: var(--radius-pill); background: var(--blue-50); border: 1px solid var(--blue-200); font-size: .88rem; font-weight: 600; color: var(--blue-800); transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.chips li:hover { background: var(--blue-100); transform: translateY(-2px); }

.quote { border-left: 4px solid var(--blue-100); padding: .5rem 0 .5rem 1.6rem; margin: 0; }
.quote p { font-size: clamp(1.15rem, 2.2vw, 1.45rem); font-weight: 600; color: var(--blue-900); line-height: 1.45; }
.quote footer { font-size: .9rem; color: var(--ink-soft); font-weight: 600; }

.band { background: linear-gradient(135deg, var(--blue-700) 0%, var(--blue-600) 55%, var(--blue-500) 100%); color: #fff; border-radius: var(--radius-lg); padding: clamp(2.25rem, 5vw, 3.75rem); position: relative; overflow: hidden; text-align: center; }
.band::before { content: ""; position: absolute; inset: 0; opacity: .22; background-image: radial-gradient(circle at 12% 20%, var(--blue-100) 0, transparent 40%), radial-gradient(circle at 88% 84%, #a7c6ff 0, transparent 42%); }
.band > * { position: relative; z-index: 1; }
.band h2 { color: #fff; }
.band p { color: #d8e5ff; max-width: 62ch; margin-inline: auto; font-size: 1.1rem; }

/* ---------- 15. FAQ ---------- */
.faq { display: grid; gap: .85rem; }
.faq details { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 1.35rem; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.faq details[open] { border-color: var(--blue-200); box-shadow: var(--shadow-sm); }
.faq summary { cursor: pointer; list-style: none; padding: 1.15rem 2rem 1.15rem 0; font-weight: 700; color: var(--blue-900); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 400; color: var(--blue-600); transition: transform var(--dur) var(--ease); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { margin: 0 0 1.15rem; color: var(--gray-700); }

/* ---------- 16. Forms ---------- */
.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .4rem; }
.field label { font-size: .87rem; font-weight: 700; color: var(--gray-700); }
.field label .req { color: #c0392b; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: .98rem; color: var(--ink);
  padding: .78rem .95rem; border-radius: var(--radius-sm);
  border: 1px solid var(--gray-300); background: var(--white);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue-600); box-shadow: 0 0 0 4px rgba(8,55,150,.13); }
.field--check { display: flex; align-items: flex-start; gap: .65rem; }
.field--check input { width: 18px; height: 18px; margin-top: .3rem; accent-color: var(--blue-700); }
.field--check label { font-weight: 500; color: var(--gray-700); font-size: .92rem; }
.form__note { font-size: .85rem; color: var(--ink-soft); margin: 0; }
.form-panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.6rem, 3vw, 2.5rem); box-shadow: var(--shadow-sm); }
.form-status { display: none; padding: .9rem 1.1rem; border-radius: var(--radius-sm); font-size: .92rem; font-weight: 600; }
.form-status.is-visible { display: block; }
.form-status--ok { background: #e8f6ec; color: #1c6b34; border: 1px solid #bfe3cb; }

.info-list { display: grid; gap: 1.15rem; list-style: none; padding: 0; margin: 0; }
.info-list li { display: flex; gap: 1rem; align-items: flex-start; margin: 0; }
.info__icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 13px; display: grid; place-items: center; background: var(--blue-50); border: 1px solid var(--blue-200); color: var(--blue-700); }
.info-list strong { display: block; color: var(--blue-900); font-size: .95rem; }
.info-list span, .info-list a { font-size: .93rem; color: var(--ink-soft); }
.info-list a:hover { color: var(--blue-700); }

/* ---------- 17. Footer ---------- */
.site-footer { background: var(--blue-900); color: #b5c6e6; padding: clamp(3rem, 6vw, 4.5rem) 0 0; }
.footer__grid { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.footer__brand { max-width: 340px; }
.footer__brand .brand__name { color: #fff; }
.footer__brand .brand__tag { color: var(--blue-100); }
.footer__brand p { font-size: .93rem; color: #9db2d8; margin-top: 1rem; }
.footer__col h4 { color: #fff; font-size: .82rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 1.1rem; }
.footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.footer__col li { margin: 0; }
.footer__col a { color: #b5c6e6; font-size: .94rem; display: inline-block; transition: color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.footer__col a:hover { color: #fff; transform: translateX(4px); }
.footer__badge { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.25rem; padding: .4rem .85rem; border-radius: var(--radius-pill); background: rgba(171,216,230,.12); border: 1px solid rgba(171,216,230,.28); font-size: .78rem; font-weight: 700; color: var(--blue-100); }
.footer__bottom { margin-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid rgba(181,198,230,.18); padding: 1.5rem 0; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; font-size: .87rem; color: #8ba3cd; }
.footer__bottom a { color: #8ba3cd; }
.footer__bottom a:hover { color: #fff; }
.socials { display: flex; gap: .6rem; }
.socials a { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: rgba(255,255,255,.07); border: 1px solid rgba(181,198,230,.2); color: #cfdcf3; transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.socials a:hover { background: var(--blue-100); color: var(--blue-900); transform: translateY(-3px); }

/* ---------- 17a. Live fundraising (Donorbox) ----------
   The iframes' insides belong to Donorbox; we only style the frames around them
   and pass our blue in through the embed URL. */
.fundraise {
  position: relative; padding: clamp(3rem, 6vw, 5rem) 0;
  background: linear-gradient(180deg, rgba(var(--tint-rgb), .34) 0%, rgba(var(--tint-rgb), .10) 100%);
  border-block: 1px solid rgba(8, 55, 150, .08);
}
.fundraise__grid { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); align-items: stretch; grid-template-columns: 1fr; }
@media (min-width: 900px) { .fundraise__grid { grid-template-columns: 1fr 1.1fr; } }
.fundraise__goal { display: flex; flex-direction: column; justify-content: center; }
.fundraise__title { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: .4em; }
.fundraise__goal > p { color: var(--gray-700); max-width: 46ch; }

.fundraise__meter {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 1rem 1.25rem .35rem; margin: .6rem 0 1.5rem; max-width: 460px;
}
.fundraise__meter iframe { display: block; width: 100%; min-width: 250px; height: 93px; border: 0; }

.fundraise__wall {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.fundraise__wall-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.35rem; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(var(--tint-rgb), .25), rgba(var(--tint-rgb), 0));
}
.fundraise__wall-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--blue-900); }
.fundraise__live { display: inline-flex; align-items: center; gap: .45rem; font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--blue-700); }
/* Donorbox prints its own "Donor Wall" heading, flush left, at the top of the
   embed. Our card header already names the panel, so the frame pads the sides
   and the embed is pulled up behind the frame's top edge to crop that heading. */
.fundraise__wall-frame { position: relative; flex: 1; overflow: hidden; min-height: 345px; padding: 0 1.1rem; }
.fundraise__wall-frame iframe { display: block; width: 100%; min-width: 0; min-height: 385px; margin-top: -40px; border: 0; }

/* pulsing "live" indicator */
.live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; flex-shrink: 0; animation: live-pulse 2s ease-out infinite; }
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); }
  70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.eyebrow--live::before { display: none; }

/* embedded Donorbox form on the Donate page */
.donate-embed { display: flex; flex-direction: column; align-items: center; gap: 1rem; min-height: 520px; }
.donate-embed dbox-widget { display: block; width: 100%; max-width: 480px; }
.donate-embed__note { margin: 0; font-size: .88rem; color: var(--ink-soft); text-align: center; }

/* ---------- 17b. Chapter spotlights ----------
   Photo-led panels: the image carries the panel, and a glass plate floats over
   its lower edge with the location. Hovering (or focusing) expands the plate to
   reveal what that chapter actually did. */
.spotlights {
  display: grid; gap: clamp(.85rem, 1.6vw, 1.35rem);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .spotlights { grid-template-columns: 1fr 1fr; } }

.spotlight {
  position: relative; overflow: hidden; border-radius: 6px;
  aspect-ratio: 4 / 5; min-height: 340px;
  background: var(--blue-900); isolation: isolate;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .5s var(--ease);
}
.spotlight:hover, .spotlight:focus-within { box-shadow: var(--shadow-lg); }
@media (min-width: 900px) { .spotlight { aspect-ratio: 3 / 4; } }

.spotlight > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 0; transition: transform 1.4s var(--ease), filter .6s var(--ease);
}
.spotlight:hover > img, .spotlight:focus-within > img { transform: scale(1.06); }
/* scrim so the plate always has something legible under it */
.spotlight::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(4,30,86,.72) 0%, rgba(4,30,86,.28) 34%, rgba(4,30,86,0) 62%);
}

.spotlight__plate {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  margin: clamp(.85rem, 2vw, 1.35rem);
  padding: clamp(1rem, 2vw, 1.4rem);
  border-radius: 4px;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 12px 34px rgba(4, 30, 86, .28);
  transition: transform .5s var(--ease);
}
.spotlight:hover .spotlight__plate,
.spotlight:focus-within .spotlight__plate { transform: translateY(-4px); }

.spotlight__place {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-sans); font-size: .7rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--blue-700);
  margin-bottom: .5rem;
}
.spotlight__place::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--blue-700); flex-shrink: 0;
}
.spotlight__name {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.15;
  color: var(--blue-900); margin: 0; letter-spacing: -.015em;
}
/* the reveal */
.spotlight__more {
  display: grid; grid-template-rows: 0fr;
  opacity: 0; transition: grid-template-rows .5s var(--ease), opacity .4s var(--ease);
}
.spotlight__more > div { overflow: hidden; }
.spotlight:hover .spotlight__more,
.spotlight:focus-within .spotlight__more { grid-template-rows: 1fr; opacity: 1; }
.spotlight__more p { margin: .7rem 0 0; font-size: .93rem; line-height: 1.55; color: var(--gray-700); }
.spotlight__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: .8rem 0 0; padding: 0; list-style: none; }
.spotlight__tags li {
  margin: 0; font-family: var(--font-sans); font-size: .72rem; font-weight: 700;
  letter-spacing: .04em; color: var(--blue-800);
  background: rgba(var(--tint-rgb), .45); padding: .24rem .62rem; border-radius: var(--radius-pill);
}
/* founding chapter gets a marker in the top corner */
.spotlight__flag {
  position: absolute; z-index: 2; top: 0; left: 0;
  margin: clamp(.85rem, 2vw, 1.35rem);
  font-family: var(--font-sans); font-size: .68rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: #fff;
  background: var(--blue-700); padding: .35rem .8rem; border-radius: 3px;
  box-shadow: 0 6px 18px rgba(4,30,86,.35);
}

/* the recruiting panel has no photo — brand colour instead */
.spotlight--invite {
  grid-column: 1 / -1; aspect-ratio: auto; min-height: 0;
  background: linear-gradient(135deg, var(--blue-700) 0%, var(--blue-600) 60%, var(--blue-500) 100%);
  display: grid; align-items: center; gap: 1.25rem 2.5rem;
  padding: clamp(1.75rem, 4vw, 2.75rem);
}
@media (min-width: 760px) { .spotlight--invite { grid-template-columns: 1fr auto; } }
.spotlight--invite::after {
  background: radial-gradient(circle at 12% 20%, rgba(171,216,230,.35) 0, transparent 42%),
              radial-gradient(circle at 88% 84%, rgba(167,198,255,.3) 0, transparent 44%);
}
.spotlight--invite > * { position: relative; z-index: 2; }
.spotlight--invite .spotlight__name { color: #fff; margin-bottom: .4rem; }
.spotlight--invite p { margin: 0; color: #cfe0ff; font-size: .98rem; max-width: 52ch; }
.spotlight--invite .spotlight__place { color: var(--blue-100); }
.spotlight--invite .spotlight__place::before { background: var(--blue-100); }

/* no hover on touch — show the detail outright */
@media (hover: none) {
  .spotlight__more { grid-template-rows: 1fr; opacity: 1; }
}

/* ---------- 17c. Arrow flow ---------- */
.flow { display: grid; gap: 4rem 3.25rem; grid-template-columns: 1fr; margin-top: 2rem; }
@media (min-width: 1040px) { .flow { grid-template-columns: repeat(4, 1fr); gap: 3rem 3.25rem; } }
.flow__step {
  position: relative;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 2.6rem 1.6rem 1.7rem; box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.flow__step:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--blue-200); }
.flow__step h3 { margin-top: .3rem; font-size: 1.12rem; margin-bottom: .35em; }
.flow__step p { margin: 0; font-size: .95rem; color: var(--ink-soft); }
/* floating badge overhanging the card's top-left corner */
.flow__num {
  position: absolute; top: -24px; left: 1.6rem;
  display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: 16px; background: var(--blue-700); color: #fff;
  font-family: var(--font-sans); font-size: 1.3rem; font-weight: 800;
  box-shadow: 0 8px 20px rgba(8, 55, 150, .28);
  transition: transform var(--dur) var(--ease);
}
.flow__step:hover .flow__num { transform: scale(1.08) rotate(-6deg); }
/* connector: a rule with a chevron head, between each step and the next */
.flow__step:not(:last-child)::before,
.flow__step:not(:last-child)::after { content: ""; position: absolute; background: transparent; }
.flow__step:not(:last-child)::before {
  /* the shaft */
  left: 50%; bottom: -2.6rem; width: 2px; height: 1.3rem; transform: translateX(-50%);
  background: var(--blue-200);
}
.flow__step:not(:last-child)::after {
  /* the head */
  left: 50%; bottom: -2.8rem; width: 10px; height: 10px; margin-left: -5px;
  border-right: 2px solid var(--blue-700); border-bottom: 2px solid var(--blue-700);
  transform: rotate(45deg);
}
@media (min-width: 1040px) {
  .flow__step:not(:last-child)::before {
    left: auto; bottom: auto; right: -2.4rem; top: 50%;
    width: 1.5rem; height: 2px; transform: translateY(-50%);
  }
  .flow__step:not(:last-child)::after {
    left: auto; bottom: auto; right: -1.1rem; top: 50%; margin-left: 0;
    transform: translateY(-50%) rotate(-45deg);
  }
}

/* ---------- 17d. Lightbox ---------- */
.is-zoomable { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(4, 30, 86, .93);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: grid; grid-template-rows: 1fr auto; align-items: center; justify-items: center;
  padding: clamp(3.25rem, 7vw, 4.5rem) clamp(1rem, 5vw, 4rem) clamp(1.5rem, 4vw, 2.5rem);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__figure { margin: 0; display: grid; justify-items: center; gap: 1rem; max-height: 100%; }
.lightbox__img {
  max-width: 100%; max-height: 76vh; width: auto; height: auto;
  border-radius: var(--radius); box-shadow: 0 30px 80px rgba(0,0,0,.5);
  transform: scale(.96); transition: transform var(--dur) var(--ease);
}
.lightbox.is-open .lightbox__img { transform: scale(1); }
.lightbox__cap { color: #cfe0ff; font-size: .95rem; text-align: center; max-width: 60ch; margin: 0; }
.lightbox__count { color: #8ba3cd; font-size: .82rem; font-weight: 600; letter-spacing: .1em; }
.lightbox__btn {
  position: absolute; display: grid; place-items: center; cursor: pointer;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); color: #fff;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.lightbox__btn:hover { background: rgba(255,255,255,.24); transform: scale(1.08); }
.lightbox__close { top: clamp(.9rem, 2vw, 1.5rem); right: clamp(.9rem, 2vw, 1.5rem); }
.lightbox__prev { left: clamp(.5rem, 2vw, 1.75rem); top: 50%; margin-top: -23px; }
.lightbox__next { right: clamp(.5rem, 2vw, 1.75rem); top: 50%; margin-top: -23px; }
body.lightbox-open { overflow: hidden; }
@media (max-width: 560px) {
  .lightbox__prev { left: .5rem; } .lightbox__next { right: .5rem; }
  .lightbox__img { max-height: 62vh; }
}

/* ---------- 18. Utilities & motion ---------- */
.to-top {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--blue-700); color: #fff; display: grid; place-items: center;
  box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; transform: translateY(12px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.to-top:hover { background: var(--blue-600); transform: translateY(-3px); }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--blue-700); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 var(--radius-sm) 0; font-weight: 700; }
.skip-link:focus { left: 0; color: #fff; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }

@keyframes scrollx { from { transform: translateX(0); } to { transform: translateX(-50%); } }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .site-footer, .to-top, .btn { display: none !important; }
  body { color: #000; }
}