/* ==========================================================================
   Kakuma Project — Core Stylesheet
   ========================================================================== */

/* --- Design tokens ------------------------------------------------------- */
:root {
  /* Palette */
  --navy-900: #0b1d33;
  --navy-800: #12294a;
  --navy-700: #1c3a62;
  --ink-900:  #111826;
  --ink-700:  #2b3648;
  --ink-500:  #4a5568;
  --ink-400:  #6b7385;
  --ink-300:  #9aa1b2;
  --line:     #e4e6ec;
  --cream:    #faf7f1;
  --sand:     #f2ece1;
  --white:    #ffffff;
  --amber:    #c9902a;
  --amber-dk: #a9761a;
  --terra:    #b95a3a;
  --success:  #2f7a5a;

  /* Type */
  --serif: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Layout */
  --max: 1200px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --radius: 4px;
  --radius-lg: 10px;

  /* Motion */
  --ease: cubic-bezier(.2,.7,.3,1);
}

/* --- Reset / base -------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-700);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; height: auto; }
a   { color: var(--navy-800); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--amber-dk); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink-900);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); }
h4 { font-size: 1.05rem; letter-spacing: .02em; }

p { margin: 0 0 1rem; }

.eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber-dk);
  margin-bottom: 1rem;
}

.lead { font-size: 1.18rem; color: var(--ink-500); }

/* --- Layout primitives --------------------------------------------------- */
.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.section--tight { padding: clamp(2rem, 4vw, 3rem) 0; }
.section--cream { background: var(--cream); }
.section--sand  { background: var(--sand); }
.section--navy  { background: var(--navy-900); color: #dbe1ee; }
.section--navy h2,
.section--navy h3 { color: var(--white); }

.grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* --- Header / nav -------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: .01em;
}
.brand:hover { color: var(--ink-900); }

.brand__mark {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: var(--navy-900);
  color: var(--white);
  font-family: var(--serif);
  font-weight: 700;
  border-radius: 50%;
  font-size: 1rem;
}

.brand__text   { font-size: 1.1rem; line-height: 1; }
.brand__tag    { display: block; font-family: var(--sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-400); margin-top: 3px; }

.nav__links {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0; padding: 0;
}

.nav__links a {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-700);
  padding: 6px 0;
  position: relative;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--ink-900); }

.nav__cta { display: flex; align-items: center; gap: 1rem; }

.nav__toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  width: 22px; height: 2px;
  background: var(--ink-900);
  margin: 5px 0;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 820px) {
  .nav__links {
    position: absolute;
    top: 74px; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    padding: 0.5rem 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s var(--ease);
  }
  .nav__links[data-open="true"] { max-height: 500px; }
  .nav__links li { border-top: 1px solid var(--line); }
  .nav__links a { display: block; padding: 14px var(--gutter); }
  .nav__links a::after { display: none; }
  .nav__toggle { display: block; }
  .nav__cta .btn--outline { display: none; }
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform .15s var(--ease), background .2s var(--ease), color .2s var(--ease), border .2s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }

.btn--primary {
  background: var(--amber);
  color: var(--white);
}
.btn--primary:hover { background: var(--amber-dk); color: var(--white); }

.btn--dark {
  background: var(--navy-900);
  color: var(--white);
}
.btn--dark:hover { background: var(--navy-800); color: var(--white); }

.btn--outline {
  background: transparent;
  color: var(--ink-900);
  border-color: var(--ink-900);
}
.btn--outline:hover { background: var(--ink-900); color: var(--white); }

.btn--ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,.4);
}
.btn--ghost:hover { background: rgba(255,255,255,.1); color: var(--white); }

.btn--sm { padding: 0.55rem 1.1rem; font-size: 0.85rem; }

/* --- Hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  color: var(--white);
  min-height: 82vh;
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--navy-900);
}
.hero__bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,29,51,.55) 0%, rgba(11,29,51,.85) 75%, var(--navy-900) 100%),
    radial-gradient(ellipse at 20% 20%, rgba(201,144,42,.28), transparent 55%),
    radial-gradient(ellipse at 80% 60%, rgba(185,90,58,.22), transparent 60%),
    linear-gradient(140deg, #0b1d33 0%, #1a355e 50%, #2a1d12 100%);
  z-index: -1;
}
.hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 2px, transparent 2px 4px);
  opacity: 0.35;
  mix-blend-mode: overlay;
}

.hero__inner {
  max-width: 780px;
  padding: 8rem 0 5rem;
}
.hero .eyebrow { color: #f2c85f; }
.hero h1 { color: var(--white); margin-bottom: 1.25rem; }
.hero p  { color: #d8dfee; font-size: 1.2rem; max-width: 620px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; }

/* page banners (non-home) */
.banner {
  background: var(--navy-900);
  color: var(--white);
  padding: clamp(5rem, 10vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.banner::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at 15% 30%, rgba(201,144,42,.18), transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(185,90,58,.15), transparent 55%),
    linear-gradient(135deg, #0b1d33, #12294a);
}
.banner h1 { color: var(--white); }
.banner p  { color: #c9d3e5; max-width: 660px; font-size: 1.1rem; }
.banner .eyebrow { color: #f2c85f; }

/* --- Cards --------------------------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px -20px rgba(10,24,50,.18);
}
.card h3 { margin-bottom: 0.6rem; }
.card p  { color: var(--ink-500); margin-bottom: 0; }

.card__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--sand);
  color: var(--amber-dk);
  border-radius: 50%;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 1.1rem;
}

.card--feature { background: var(--cream); border-color: transparent; }

/* --- Stats --------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.stat {
  background: var(--white);
  padding: 1.75rem 1.5rem;
  text-align: left;
}
.stat__num {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 600;
  color: var(--navy-900);
  line-height: 1;
  margin-bottom: 0.35rem;
  letter-spacing: -0.02em;
}
.stat__label {
  font-size: 0.85rem;
  color: var(--ink-500);
  line-height: 1.4;
}

/* --- Feature split ------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }

.split__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--navy-800), var(--navy-900));
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.85);
}
.split__media::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(201,144,42,.35), transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(185,90,58,.25), transparent 50%);
}
.split__media-label {
  position: relative;
  font-family: var(--serif);
  font-size: 1.5rem;
  padding: 1rem 1.5rem;
  text-align: center;
}

/* --- Story card ---------------------------------------------------------- */
.story {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1.75rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  align-items: start;
}
.story__avatar {
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--sand), var(--cream));
  display: grid; place-items: center;
  color: var(--amber-dk);
  font-family: var(--serif);
  font-size: 3rem;
  font-weight: 600;
}
.story h3 { margin-bottom: 0.25rem; }
.story__role { display: block; font-size: 0.85rem; color: var(--ink-400); margin-bottom: 1rem; font-style: italic; }
.story blockquote {
  margin: 0; padding: 1rem 0 0;
  border-top: 1px solid var(--line);
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-700);
}
@media (max-width: 560px) {
  .story { grid-template-columns: 1fr; }
  .story__avatar { width: 120px; }
}

/* --- Tables -------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); }
table.budget {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  background: var(--white);
}
table.budget th,
table.budget td { padding: 1rem 1.25rem; text-align: left; }
table.budget thead { background: var(--navy-900); color: var(--white); }
table.budget thead th { font-weight: 600; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
table.budget tbody tr + tr { border-top: 1px solid var(--line); }
table.budget tbody tr:hover { background: var(--cream); }
table.budget td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; color: var(--ink-900); }

/* --- Steps (donation) ---------------------------------------------------- */
.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.steps li {
  counter-increment: step;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.5rem 1.5rem 5rem;
  position: relative;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 1.5rem; top: 1.25rem;
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--amber);
}
.steps h4 { margin: 0 0 0.3rem; color: var(--ink-900); font-family: var(--serif); font-size: 1.1rem; font-weight: 600; }
.steps p  { margin: 0; color: var(--ink-500); font-size: 0.95rem; }

/* --- Team grid ----------------------------------------------------------- */
.team-member {
  text-align: center;
}
.team-member__avatar {
  aspect-ratio: 1;
  max-width: 180px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-900));
  color: var(--white);
  display: grid; place-items: center;
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 600;
}
.team-member h4 { margin: 0 0 0.15rem; font-family: var(--serif); font-size: 1.1rem; }
.team-member__role { font-size: 0.85rem; color: var(--ink-400); margin-bottom: 0.5rem; }
.team-member p { font-size: 0.92rem; color: var(--ink-500); margin: 0; }

/* --- Info blocks --------------------------------------------------------- */
.info-block {
  background: var(--white);
  border-left: 3px solid var(--amber);
  padding: 1.5rem 1.75rem;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  box-shadow: 0 1px 0 var(--line);
}
.info-block h4 { font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--amber-dk); margin-bottom: 0.5rem; }
.info-block p:last-child { margin-bottom: 0; }

/* --- Forms --------------------------------------------------------------- */
.form { display: grid; gap: 1.1rem; }
.form label { display: block; font-size: 0.88rem; font-weight: 500; color: var(--ink-700); margin-bottom: 0.35rem; }
.form input,
.form textarea,
.form select {
  width: 100%;
  padding: 0.75rem 0.9rem;
  font: inherit;
  color: var(--ink-900);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border .15s var(--ease), box-shadow .15s var(--ease);
}
.form input:focus,
.form textarea:focus,
.form select:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(201,144,42,.18);
}
.form textarea { min-height: 150px; resize: vertical; }
.form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 600px) { .form .form-row { grid-template-columns: 1fr; } }

/* --- CTA band ------------------------------------------------------------ */
.cta-band {
  background: linear-gradient(120deg, var(--navy-900), var(--navy-700));
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cta-band::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 85% 20%, rgba(201,144,42,.25), transparent 55%),
    radial-gradient(ellipse at 10% 80%, rgba(185,90,58,.18), transparent 60%);
  z-index: -1;
}
.cta-band h2 { color: var(--white); margin-bottom: 0.5rem; }
.cta-band p  { color: #c9d3e5; margin: 0; }
@media (max-width: 720px) { .cta-band { grid-template-columns: 1fr; } }

/* --- Footer -------------------------------------------------------------- */
.site-footer {
  background: var(--ink-900);
  color: #aab1c2;
  padding: 4rem 0 2rem;
  font-size: 0.92rem;
}
.site-footer a { color: #dbe1ee; }
.site-footer a:hover { color: var(--amber); }

.site-footer h4 {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 1.1rem;
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand { display: flex; align-items: center; gap: 0.75rem; color: var(--white); font-family: var(--serif); font-size: 1.15rem; margin-bottom: 1rem; }
.footer-brand .brand__mark { background: var(--white); color: var(--navy-900); }
.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list li { margin-bottom: 0.5rem; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 3rem;
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.82rem;
  color: #737d92;
}

/* --- Utilities ----------------------------------------------------------- */
.text-center { text-align: center; }
.max-measure { max-width: 680px; }
.mx-auto     { margin-left: auto; margin-right: auto; }
.mt-2        { margin-top: 2rem; }
.mb-0        { margin-bottom: 0; }
.divider     { height: 1px; background: var(--line); border: 0; margin: 3rem 0; }
.tag {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  background: var(--sand);
  color: var(--amber-dk);
}

/* Reveal-on-scroll */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* --- Image slots --------------------------------------------------------- */
/* Images placed inside .split__media, .story__avatar or .team-member__avatar
   fill the slot and sit above the gradient/label fallback. If the image
   fails to load (or no image is supplied), the original gradient + label
   continues to display unchanged. */
.split__media img,
.story__avatar img,
.team-member__avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
/* Avatars default to top crop so faces aren't cut off when photos are
   portrait-oriented. Override per-image via inline style="object-position: …"
   if a particular photo needs different framing. */
.story__avatar img,
.team-member__avatar img {
  object-position: center top;
}
.split__media,
.story__avatar,
.team-member__avatar { position: relative; }

.split__media img + .split__media-label,
.story__avatar img + span,
.team-member__avatar img + span { display: none; }

/* Hero photo override: drop a file at assets/img/hero.jpg and add the
   class hero--photo to the <section class="hero"> tag. */
.hero--photo .hero__bg {
  background:
    linear-gradient(180deg, rgba(11,29,51,.45) 0%, rgba(11,29,51,.85) 75%, var(--navy-900) 100%),
    url("../img/hero.jpg") center/cover no-repeat,
    linear-gradient(140deg, #0b1d33 0%, #1a355e 50%, #2a1d12 100%);
}

/* --- Donation outcome ladder --------------------------------------------- */
.outcome-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
.outcome-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.outcome-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px -20px rgba(10,24,50,.18);
  border-color: var(--amber);
}
.outcome-card__amount {
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--navy-900);
  line-height: 1;
}
.outcome-card__period {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber-dk);
}
.outcome-card__what {
  font-size: 0.95rem;
  color: var(--ink-500);
  margin: 0.2rem 0 0;
}

/* --- "Where your money goes" bar ----------------------------------------- */
.allocation {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  margin-top: 2rem;
}
.allocation__bar {
  display: flex;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--line);
  margin: 1rem 0 1.25rem;
}
.allocation__bar span {
  display: block;
  height: 100%;
}
.allocation__legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.6rem 1.5rem;
  font-size: 0.9rem;
}
.allocation__legend li {
  display: flex; align-items: center; gap: 0.55rem;
  list-style: none;
}
.allocation__legend i {
  width: 10px; height: 10px; border-radius: 2px; display: inline-block;
}

/* --- Program partners (Australia network) -------------------------------- */
.partner-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 1.25rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  align-items: center;
}
.partner-card__avatar {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sand), var(--cream));
  color: var(--amber-dk);
  display: grid; place-items: center;
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 600;
  overflow: hidden;
}
.partner-card__avatar img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.partner-card h4 { margin: 0 0 0.15rem; font-family: var(--serif); font-size: 1.1rem; }
.partner-card__role { font-size: 0.85rem; color: var(--ink-400); font-style: italic; margin-bottom: 0.5rem; }
.partner-card p { margin: 0 0 0.4rem; font-size: 0.95rem; color: var(--ink-500); }
.partner-card__contact { font-size: 0.88rem; color: var(--ink-700); }
.partner-card__contact a { color: var(--navy-800); }
@media (max-width: 480px) {
  .partner-card { grid-template-columns: 72px 1fr; gap: 1rem; padding: 1.2rem; }
  .partner-card__avatar { font-size: 1.3rem; }
}

/* --- Footer socials + newsletter ----------------------------------------- */
.social-row {
  display: flex;
  gap: 0.7rem;
  margin-top: 1rem;
}
.social-row a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  color: #dbe1ee;
  transition: background .2s var(--ease), color .2s var(--ease), transform .15s var(--ease);
}
.social-row a:hover {
  background: var(--amber);
  color: var(--white);
  transform: translateY(-2px);
}
.social-row svg { width: 17px; height: 17px; fill: currentColor; }

.newsletter {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.6rem;
}
.newsletter input {
  flex: 1;
  min-width: 0;
  padding: 0.65rem 0.85rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--white);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
}
.newsletter input::placeholder { color: #737d92; }
.newsletter input:focus {
  outline: none;
  border-color: var(--amber);
  background: rgba(255,255,255,.10);
}
.newsletter button {
  padding: 0.55rem 1rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy-900);
  background: var(--amber);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .2s var(--ease);
}
.newsletter button:hover { background: #f2c85f; }
.newsletter__msg { font-size: 0.82rem; color: #aab1c2; margin-top: 0.6rem; min-height: 1em; }

/* --- Map embed ---------------------------------------------------------- */
.map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--cream);
  box-shadow: 0 14px 40px -20px rgba(10,24,50,.18);
}
.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.map-locations {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.25rem;
  justify-content: center;
}
.map-locations span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 500;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-700);
}
.map-locations span::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--amber);
  display: inline-block;
}

/* --- Sticky mobile donate ------------------------------------------------ */
.sticky-donate {
  display: none;
  position: fixed;
  left: 1rem; right: 1rem; bottom: 1rem;
  z-index: 60;
  background: var(--amber);
  color: var(--white);
  font-weight: 600;
  text-align: center;
  padding: 0.95rem 1rem;
  border-radius: var(--radius);
  box-shadow: 0 12px 30px -8px rgba(0,0,0,.35);
}
.sticky-donate:hover { background: var(--amber-dk); color: var(--white); }
@media (max-width: 720px) {
  .sticky-donate { display: block; }
  body { padding-bottom: 4.5rem; }
}

/* ==========================================================================
   Polish layer — v2 (May 2026)
   Editorial / Trust & Authority refinements. Pure additions or refinements
   layered on top of the base system; nothing here removes existing styles.
   ========================================================================== */

:root {
  /* Elevation scale — soft, layered shadows for premium feel */
  --shadow-xs: 0 1px 2px rgba(10, 24, 50, 0.04), 0 1px 1px rgba(10, 24, 50, 0.03);
  --shadow-sm: 0 2px 6px rgba(10, 24, 50, 0.05), 0 1px 2px rgba(10, 24, 50, 0.04);
  --shadow-md: 0 8px 24px -10px rgba(10, 24, 50, 0.12), 0 2px 6px rgba(10, 24, 50, 0.04);
  --shadow-lg: 0 22px 48px -20px rgba(10, 24, 50, 0.22), 0 4px 10px rgba(10, 24, 50, 0.05);
  --shadow-amber: 0 18px 44px -22px rgba(201, 144, 42, 0.55);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(201, 144, 42, 0.30);
}

/* Global accessibility: visible focus on all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius);
}

/* --- Card — softer baseline + deeper hover ------------------------------- */
.card {
  box-shadow: var(--shadow-xs);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(228, 230, 236, 0.4);
}

/* --- Stat panel — refined dividers + accent line on numbers -------------- */
.stats {
  box-shadow: var(--shadow-sm);
}
.stat {
  position: relative;
  transition: background .25s var(--ease);
}
.stat:hover { background: var(--cream); }
.stat__num {
  position: relative;
  display: inline-block;
  padding-bottom: 0.35rem;
}
.stat__num::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 28px; height: 2px;
  background: var(--amber);
  border-radius: 2px;
}

/* --- Hero — subtle ken-burns + scroll cue -------------------------------- */
.hero--photo .hero__bg {
  transform: scale(1.02);
  transition: transform 18s linear;
  will-change: transform;
}
.hero--photo.is-loaded .hero__bg {
  transform: scale(1.10);
}
.hero__scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: var(--sans);
  z-index: 2;
}
.hero__scroll-cue::after {
  content: "";
  width: 1px; height: 32px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.6), transparent);
  animation: scrollCue 2.2s var(--ease) infinite;
}
@keyframes scrollCue {
  0%   { transform: translateY(-6px); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(10px); opacity: 0; }
}

/* --- Story — editorial pull-quote treatment ------------------------------ */
.story {
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.story:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.story blockquote {
  position: relative;
  padding: 1.25rem 0 0.25rem 1.6rem;
  font-size: 1.05rem;
  line-height: 1.5;
}
.story blockquote::before {
  content: "\201C";
  position: absolute;
  left: -0.1rem;
  top: 0.65rem;
  font-family: var(--serif);
  font-size: 3.2rem;
  line-height: 1;
  color: var(--amber);
  opacity: 0.75;
}

/* --- Trust band — Interseed / DGR / 100% / Secure ------------------------ */
.trust-band {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.25rem 2rem;
  align-items: center;
}
.trust-band__item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.trust-band__icon {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--sand);
  color: var(--amber-dk);
  display: grid;
  place-items: center;
}
.trust-band__icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.trust-band__label {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-400);
  display: block;
  margin-bottom: 1px;
}
.trust-band__value {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.2;
}

/* --- Fundraising progress bar ------------------------------------------- */
.progress {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem 1.6rem;
}
.progress__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}
.progress__title {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink-900);
  margin: 0;
}
.progress__goal {
  font-size: 0.85rem;
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
}
.progress__goal strong { color: var(--ink-900); font-weight: 600; }
.progress__track {
  position: relative;
  height: 12px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.progress__fill {
  position: absolute;
  inset: 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--amber), #e1ad4c);
  transition: width 1.6s var(--ease);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.06);
}
.progress.is-visible .progress__fill[data-target] {
  width: var(--progress-target, 0%);
}
.progress__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.65rem;
  font-size: 0.82rem;
  color: var(--ink-500);
}
.progress__meta strong { color: var(--ink-900); font-weight: 600; }

/* --- Outcome card — featured "most popular" tier ------------------------ */
.outcome-card {
  position: relative;
  box-shadow: var(--shadow-xs);
}
.outcome-card:hover { box-shadow: var(--shadow-md); }
.outcome-card--featured {
  border-color: var(--amber);
  box-shadow: var(--shadow-amber);
  background: linear-gradient(180deg, #fffdf7 0%, var(--white) 30%);
}
.outcome-card--featured:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 52px -22px rgba(201, 144, 42, 0.55);
}
.outcome-card__tag {
  position: absolute;
  top: -10px;
  left: 1.2rem;
  padding: 0.25rem 0.7rem;
  background: var(--amber);
  color: var(--white);
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

/* --- Refined buttons ----------------------------------------------------- */
.btn--primary {
  box-shadow: 0 6px 16px -6px rgba(201, 144, 42, 0.55);
}
.btn--primary:hover {
  box-shadow: 0 12px 26px -10px rgba(201, 144, 42, 0.6);
}
.btn--dark {
  box-shadow: 0 6px 16px -8px rgba(10, 24, 50, 0.5);
}

/* --- Decorative section divider (ornamental) ---------------------------- */
.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin: 0 auto;
  max-width: 320px;
  padding: 0.25rem 0;
  color: var(--ink-300);
}
.section-divider::before,
.section-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 40%, var(--line) 60%, transparent);
}
.section-divider__mark {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--amber);
  flex: 0 0 auto;
}

/* --- Refined sticky donate (mobile) ------------------------------------- */
.sticky-donate {
  box-shadow: 0 14px 30px -8px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,0.06) inset;
  display: none;
}
@media (max-width: 720px) {
  .sticky-donate { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; }
}

/* --- Newsletter success state ------------------------------------------- */
.newsletter__msg { transition: color .2s var(--ease); }

/* --- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero--photo .hero__bg,
  .hero--photo.is-loaded .hero__bg { transform: none; transition: none; }
  .hero__scroll-cue::after { animation: none; }
  .progress.is-visible .progress__fill[data-target] { transition: none; }
}

/* ==========================================================================
   Polish layer — v3 (May 2026)
   Editorial / kinetic refinements: scroll-progress, floating header,
   kinetic hero, hover-group cards, magazine story cards, tilt outcomes.
   ========================================================================== */

:root {
  --ease-out-quart: cubic-bezier(.165,.84,.44,1);
  --ease-in-out-quint: cubic-bezier(.86,0,.07,1);
  --paper: #fbfaf6;
  --ember: #d77a2f;
  --line-soft: rgba(11,29,51,.08);
  --header-h: 74px;
}

/* --- Scroll-linked progress bar (fixed top) ------------------------------ */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: transparent;
  z-index: 100;
  pointer-events: none;
}
.scroll-progress__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--amber), var(--ember));
  transform-origin: left;
  transition: width .12s linear;
  box-shadow: 0 0 12px rgba(201,144,42,.45);
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
}

/* --- Scroll-shrink floating header --------------------------------------- */
.site-header {
  transition: padding .35s var(--ease-out-quart), background .25s var(--ease-out-quart);
  will-change: padding;
}
.site-header[data-scrolled="true"] {
  padding: 0.5rem 0;
}
.site-header[data-scrolled="true"] .nav {
  height: 58px;
  background: rgba(255,255,255,0.78);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-radius: 999px;
  padding: 0 1.25rem 0 1rem;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  max-width: calc(var(--max) - 80px);
  margin: 0 auto;
  transition: height .35s var(--ease-out-quart), background .25s var(--ease-out-quart),
              max-width .35s var(--ease-out-quart);
}
.site-header[data-scrolled="true"] .brand__tag { display: none; }
.site-header[data-scrolled="true"] .brand__mark { width: 30px; height: 30px; font-size: 0.9rem; }
.site-header[data-scrolled="true"] .brand__text { font-size: 1rem; }
.site-header[data-scrolled="true"] .nav__links { gap: 1.5rem; }
@media (max-width: 820px) {
  .site-header[data-scrolled="true"] .nav { max-width: calc(100% - 2rem); }
  .site-header[data-scrolled="true"] .nav__links {
    top: 58px;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }
}

/* --- Kinetic hero headline reveal ---------------------------------------- */
.hero h1 .word,
.banner h1 .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.08em;
}
.hero h1 .word > span,
.banner h1 .word > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.95s var(--ease-out-quart);
}
.hero.is-loaded h1 .word > span,
.banner[data-loaded="true"] h1 .word > span {
  transform: translateY(0);
}
.hero h1 .word:nth-child(1) > span { transition-delay: 0.10s; }
.hero h1 .word:nth-child(2) > span { transition-delay: 0.18s; }
.hero h1 .word:nth-child(3) > span { transition-delay: 0.26s; }
.hero h1 .word:nth-child(4) > span { transition-delay: 0.34s; }
.hero h1 .word:nth-child(5) > span { transition-delay: 0.42s; }
.hero h1 .word:nth-child(6) > span { transition-delay: 0.50s; }
.hero h1 .word:nth-child(7) > span { transition-delay: 0.58s; }
.hero h1 .word:nth-child(8) > span { transition-delay: 0.66s; }

/* Hero ambient grain layer */
.hero::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: .35;
  mix-blend-mode: overlay;
  z-index: 0;
}
.hero__inner { position: relative; z-index: 1; }

/* Eyebrow — kinetic underline accent */
.eyebrow {
  position: relative;
  padding-left: 28px;
}
.eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 20px; height: 1px;
  background: var(--amber);
  transform: translateY(-50%) scaleX(0.4);
  transform-origin: left;
  transition: transform .6s var(--ease-out-quart);
}
[data-reveal].is-visible .eyebrow::before { transform: translateY(-50%) scaleX(1); }
.hero .eyebrow::before,
.banner .eyebrow::before { background: #f2c85f; }
.section--navy .eyebrow::before { background: #f2c85f; }

/* --- Hover-group dim on program / outcome card grids --------------------- */
.grid--hover-group .card,
.grid--hover-group .outcome-card {
  transition: transform .35s var(--ease-out-quart),
              opacity .35s var(--ease-out-quart),
              filter .35s var(--ease-out-quart),
              box-shadow .35s var(--ease-out-quart),
              border-color .35s var(--ease-out-quart);
}
.grid--hover-group:hover .card:not(:hover),
.grid--hover-group:hover .outcome-card:not(:hover) {
  opacity: 0.55;
  filter: saturate(0.7);
}
.grid--hover-group .card:hover,
.grid--hover-group .outcome-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--amber);
}

/* Card — animated index reveal */
.card__icon {
  position: relative;
  overflow: hidden;
  transition: background .3s var(--ease-out-quart), color .3s var(--ease-out-quart);
}
.card:hover .card__icon {
  background: var(--amber);
  color: var(--white);
}

/* --- Magazine story card (full-bleed photo) ------------------------------ */
.story--editorial {
  display: grid;
  grid-template-columns: 1fr;
  padding: 0;
  background: var(--ink-900);
  color: var(--white);
  overflow: hidden;
  border: 0;
  position: relative;
  isolation: isolate;
  min-height: 480px;
}
.story--editorial .story__avatar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-900));
  z-index: 0;
}
.story--editorial .story__avatar img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 1.4s var(--ease-out-quart);
  border-radius: 0;
}
.story--editorial:hover .story__avatar img { transform: scale(1.04); }
.story--editorial::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(11,29,51,0) 0%,
    rgba(11,29,51,0.25) 35%,
    rgba(11,29,51,0.78) 70%,
    rgba(11,29,51,0.92) 100%);
  z-index: 1;
}
.story--editorial > div:last-child {
  position: relative;
  z-index: 2;
  align-self: end;
  padding: 2.5rem clamp(1.5rem, 4vw, 3rem);
  max-width: 720px;
}
.story--editorial h3 { color: var(--white); margin-bottom: 0.35rem; }
.story--editorial .story__role { color: #f2c85f; font-style: normal; font-family: var(--sans); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.78rem; margin-bottom: 1rem; }
.story--editorial p { color: #dbe1ee; }
.story--editorial blockquote {
  color: var(--white);
  border-top-color: rgba(255,255,255,.18);
  font-size: 1.2rem;
}
.story--editorial blockquote::before { color: #f2c85f; opacity: 0.95; }
.story--editorial .tag {
  background: rgba(255,255,255,0.12);
  color: #f2c85f;
  backdrop-filter: blur(6px);
}

/* --- Programs grid: image-led card ---------------------------------------- */
.card--image {
  padding: 0;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--white);
  background: var(--ink-900);
  border: 0;
}
.card--image .card__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.card--image .card__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out-quart);
}
.card--image:hover .card__photo img { transform: scale(1.06); }
.card--image::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,29,51,0) 30%, rgba(11,29,51,0.85) 100%);
  z-index: 1;
}
.card--image > * { position: relative; z-index: 2; }
.card--image .card__body {
  padding: 1.5rem 1.5rem 1.65rem;
}
.card--image .card__index {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f2c85f;
  margin-bottom: 0.5rem;
}
.card--image h3 { color: var(--white); margin-bottom: 0.3rem; font-size: 1.4rem; }
.card--image p { color: #dbe1ee; font-size: 0.95rem; }

/* --- Split media: refined editorial frame -------------------------------- */
.split__media {
  box-shadow: var(--shadow-md);
  transition: transform .6s var(--ease-out-quart), box-shadow .6s var(--ease-out-quart);
}
.split__media:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.split__media img {
  transition: transform 1.2s var(--ease-out-quart);
}
.split__media:hover img { transform: scale(1.04); }

/* Editorial number marker for split sections */
.split-marker {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--amber-dk);
  margin-bottom: 1rem;
  letter-spacing: 0.04em;
}
.split-marker__num {
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1;
  color: var(--navy-900);
}

/* --- Subtle tilt on outcome cards ---------------------------------------- */
.outcome-card {
  transform-style: preserve-3d;
  perspective: 800px;
}
.outcome-card__amount {
  transition: transform .35s var(--ease-out-quart);
}
.outcome-card:hover .outcome-card__amount {
  transform: translateZ(20px);
}

/* --- Refined buttons: arrow slide on primary ----------------------------- */
.btn--primary {
  position: relative;
  overflow: hidden;
}
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .7s var(--ease-out-quart);
  pointer-events: none;
}
.btn--primary:hover::after { transform: translateX(100%); }

/* --- Sticky donate: refined slide-in -------------------------------------- */
@media (max-width: 720px) {
  .sticky-donate {
    transform: translateY(120%);
    transition: transform .5s var(--ease-out-quart);
  }
  .sticky-donate[data-visible="true"] { transform: translateY(0); }
}

/* --- Nav: refined indicator with growing dot ----------------------------- */
.nav__links a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.nav__links a[aria-current="page"]::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--amber);
  display: inline-block;
}

/* --- Trust band: hover lift on each item --------------------------------- */
.trust-band__item {
  transition: transform .3s var(--ease-out-quart);
}
.trust-band__item:hover { transform: translateY(-2px); }
.trust-band__icon {
  transition: background .3s var(--ease-out-quart), color .3s var(--ease-out-quart), transform .35s var(--ease-out-quart);
}
.trust-band__item:hover .trust-band__icon {
  background: var(--amber);
  color: var(--white);
  transform: scale(1.08);
}

/* --- Editorial section opener (column rule) ------------------------------ */
.section-opener {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.section-opener__label {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber-dk);
  padding-top: 0.65rem;
  border-top: 1px solid var(--line);
}
.section-opener h2 { margin: 0; max-width: 720px; }
@media (max-width: 720px) {
  .section-opener { grid-template-columns: 1fr; gap: 0.85rem; }
  .section-opener__label { padding-top: 0; border-top: 0; }
}

/* --- Steps: refined with connector line ---------------------------------- */
.steps {
  position: relative;
}
.steps li::after {
  content: "";
  position: absolute;
  left: 2.1rem;
  bottom: -1.25rem;
  width: 1px; height: 1.25rem;
  background: linear-gradient(to bottom, var(--line), transparent);
}
.steps li:last-child::after { display: none; }
.steps li {
  transition: transform .3s var(--ease-out-quart), border-color .3s var(--ease-out-quart);
}
.steps li:hover { transform: translateX(4px); border-color: var(--amber); }

/* --- Map embed: refined frame -------------------------------------------- */
.map-embed {
  transition: box-shadow .4s var(--ease-out-quart);
}
.map-embed:hover { box-shadow: 0 22px 50px -22px rgba(10,24,50,.3); }

/* --- Reveal-on-scroll: refined cascade ----------------------------------- */
[data-reveal] {
  transition: opacity .8s var(--ease-out-quart), transform .8s var(--ease-out-quart);
  transform: translateY(24px);
}
[data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal-delay="3"] { transition-delay: 0.24s; }

/* --- Photo crop defaults (keep faces in frame) ---------------------------
   object-fit: cover crops equally from top and bottom by default. For
   portrait shots of people, that lops off the top of the head. We shift
   the crop toward the upper third everywhere people appear, then let
   per-image inline style="object-position: …" override when a particular
   photo needs different framing.
*/
.split__media img,
.card--image .card__photo img,
.partner-card__avatar img {
  object-position: center 22%;
}
.story--editorial .story__avatar img {
  object-position: center 18%;
}

/* --- Reduced motion overrides for v3 ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero h1 .word > span,
  .banner h1 .word > span { transform: none; }
  .site-header,
  .site-header[data-scrolled="true"] .nav { transition: none; }
  .scroll-progress { display: none; }
  .grid--hover-group:hover .card:not(:hover),
  .grid--hover-group:hover .outcome-card:not(:hover) { opacity: 1; filter: none; }
  .story--editorial:hover .story__avatar img,
  .split__media:hover img,
  .card--image:hover .card__photo img { transform: none; }
  .btn--primary::after { display: none; }
}