/* ============================================================
   CRY FOR NEPAL — DESIGN SYSTEM
   Editorial humanitarian campaign. Deep forest green ground,
   warm cream editorial bands, campaign orange reserved for action.
   Plain CSS. No build step, no framework.
   ============================================================ */

:root {
  /* Ground */
  --forest:      #06261E;
  --forest-deep: #041D17;
  --ink:         #071713;
  --forest-soft: #0C332A;
  --forest-line: rgba(216, 201, 174, 0.16);

  /* Light bands */
  --cream:       #F4F0E7;
  --off-white:   #FAF8F2;
  --beige:       #D8C9AE;

  /* Action */
  --orange:      #FF5B2E;
  --orange-dark: #E8461B;
  --orange-soft: #FF7A55;

  /* Type on dark */
  --on-dark:        #F4F0E7;
  --on-dark-muted:  rgba(244, 240, 231, 0.68);
  --on-dark-faint:  rgba(244, 240, 231, 0.44);

  /* Type on light */
  --on-light:       #071713;
  --on-light-muted: rgba(7, 23, 19, 0.66);
  --on-light-faint: rgba(7, 23, 19, 0.42);

  --hair-dark:  rgba(244, 240, 231, 0.14);
  --hair-light: rgba(7, 23, 19, 0.12);

  --font-brand: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-head:  "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-body:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --shell: 1320px;
  --r-sm: 0.6rem;
  --r:    1rem;
  --r-lg: 1.5rem;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 76px;
}

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

/* Author `display` rules outrank the UA stylesheet's [hidden] rule, so a
   hidden .btn would still render. Make the attribute authoritative. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  /* `clip` rather than `hidden`: it stops sideways scroll without turning the
     root into a scroll container (which would break position: sticky). */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--forest);
  color: var(--on-dark);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.06;
  margin: 0;
}

::selection { background: var(--orange); color: #fff; }

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--orange);
  color: #fff;
  padding: 0.85rem 1.4rem;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

/* ---------- Layout ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 1.4rem;
}
@media (min-width: 768px)  { .shell { padding-inline: 2.5rem; } }
@media (min-width: 1200px) { .shell { padding-inline: 3rem; } }

.section { position: relative; padding-block: 4rem; }
@media (min-width: 768px)  { .section { padding-block: 6.5rem; } }
@media (min-width: 1200px) { .section { padding-block: 8.5rem; } }

.band-dark  { background: var(--forest); color: var(--on-dark); }
.band-deep  { background: var(--forest-deep); color: var(--on-dark); }
.band-cream { background: var(--cream); color: var(--on-light); }
.band-off   { background: var(--off-white); color: var(--on-light); }

/* ---------- Editorial type ---------- */
.label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 1.1rem;
}
.band-cream .label,
.band-off .label { color: var(--orange-dark); }

.h-display {
  font-size: clamp(2.1rem, 5.4vw, 4.1rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.h-section {
  font-size: clamp(1.85rem, 4vw, 3.1rem);
  line-height: 1.06;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
.h-sub {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.2;
}
.lede {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--on-dark-muted);
  max-width: 56ch;
}
.band-cream .lede,
.band-off .lede { color: var(--on-light-muted); }
@media (min-width: 768px) { .lede { font-size: 1.05rem; } }

.section-head { max-width: 40rem; margin-bottom: 2.5rem; }
@media (min-width: 768px) { .section-head { margin-bottom: 3.5rem; } }
.section-head.is-centred { margin-inline: auto; text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 1rem 1.75rem;
  border: 1px solid transparent;
  transition: background-color .3s, border-color .3s, color .3s,
              transform .3s var(--ease), box-shadow .3s;
  text-align: center;
}
.btn-orange {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 14px 34px -16px rgba(255, 91, 46, 0.9);
}
.btn-orange:hover { background: var(--orange-dark); transform: translateY(-2px); }
.btn-outline {
  border-color: rgba(244, 240, 231, 0.35);
  color: var(--on-dark);
}
.btn-outline:hover { border-color: var(--on-dark); background: rgba(244,240,231,0.08); transform: translateY(-2px); }
.band-cream .btn-outline,
.band-off .btn-outline { border-color: rgba(7,23,19,0.28); color: var(--on-light); }
.band-cream .btn-outline:hover,
.band-off .btn-outline:hover { background: rgba(7,23,19,0.05); border-color: var(--on-light); }
.btn-sm { padding: 0.72rem 1.25rem; font-size: 0.74rem; }
.btn-block { width: 100%; }

.btn-ico { width: 1rem; height: 1rem; flex: none; }
.btn-ico-heart { fill: currentColor; }
.btn-ico-arrow { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.btn:hover .btn-ico-arrow { transform: translateX(4px); }

/* Text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}
.link-arrow svg { width: 0.95rem; height: 0.95rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 200;
  transition: background-color .4s, border-color .4s, padding .4s var(--ease);
  padding-block: 0.9rem;
  border-bottom: 1px solid transparent;
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--forest-deep);
  transition: opacity .4s;
}
.site-header.is-scrolled {
  border-bottom-color: var(--forest-line);
  padding-block: 0.65rem;
}
/* The bar is painted by the pseudo-element, never by .site-header itself: a
   backdrop-filter on the header would make it a containing block for the
   fixed-position mobile menu, collapsing the panel to the height of the bar
   and letting the page show through behind the links. The fill is fully
   opaque now, so there is no blur here at all. */
.site-header.is-scrolled::before {
  background: var(--forest-deep);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
@media (min-width: 640px) { .header-inner { gap: 1rem; } }

/* The brand may shrink rather than push the actions off the edge. */
.brand { min-width: 0; }
.brand-lockup { min-width: 0; }
.brand-name, .brand-initiative { overflow: hidden; text-overflow: ellipsis; }

/* Never let the donate button wrap onto two lines — that was squeezing the
   header past the viewport and shifting the whole page sideways. */
.btn-donate { white-space: nowrap; flex: none; }
.donate-short { display: inline; }
.donate-full  { display: none; }
@media (min-width: 560px) {
  .donate-short { display: none; }
  .donate-full  { display: inline; }
}
@media (max-width: 400px) {
  .btn-donate { padding: 0.62rem 0.95rem; font-size: 0.68rem; gap: 0.4rem; }
  .btn-donate .btn-ico { width: 0.85rem; height: 0.85rem; }
  .nav-toggle { width: 2.6rem; height: 2.6rem; }
}
/* Smallest phones (~320px): shrink the lockup so the brand, the donate button
   and the menu still share one row without pushing the page sideways. */
@media (max-width: 380px) {
  .shell { padding-inline: 1rem; }
  .header-inner { gap: 0.4rem; }
  .nav-toggle { width: 2.3rem; height: 2.3rem; }
  .brand-name { font-size: 1rem; }
  .brand-initiative { font-size: 0.5rem; letter-spacing: 0.24em; }
  .btn-donate { padding: 0.58rem 0.8rem; font-size: 0.64rem; letter-spacing: 0.06em; }
  .nav-toggle { width: 2.4rem; height: 2.4rem; }
}

/* Brand lockup: campaign over initiative */
.brand { display: flex; align-items: center; position: relative; z-index: 220; }
.brand-lockup { display: grid; gap: 0.15rem; }
.brand-name {
  font-family: var(--font-brand);
  font-size: 1.15rem;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--on-dark);
  white-space: nowrap;
}
.brand-initiative {
  font-family: var(--font-body);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--orange);
  white-space: nowrap;
}
@media (min-width: 640px) {
  .brand-name { font-size: 1.35rem; }
  .brand-initiative { font-size: 0.6rem; }
}

.nav { display: none; gap: 1.9rem; }
@media (min-width: 1080px) { .nav { display: flex; } }
.nav-link {
  position: relative;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(244, 240, 231, 0.78);
  padding-block: 0.35rem;
  transition: color .25s;
  white-space: nowrap;
}
.nav-link:hover { color: var(--on-dark); }
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  border-radius: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease);
}
.nav-link:hover::after,
.nav-link.is-current::after { transform: scaleX(1); transform-origin: left; }
.nav-link.is-current { color: var(--on-dark); }

.header-actions { display: flex; align-items: center; gap: 0.6rem; position: relative; z-index: 220; }

.nav-toggle {
  width: 2.9rem; height: 2.9rem;
  display: grid; place-content: center; gap: 5px;
  border: 1px solid var(--hair-dark);
  border-radius: 999px;
  background: rgba(244, 240, 231, 0.06);
}
@media (min-width: 1080px) { .nav-toggle { display: none; } }
.nav-toggle span {
  display: block; width: 17px; height: 1.5px;
  background: var(--on-dark);
  transition: transform .3s var(--ease), opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile menu panel */
@media (max-width: 1079px) {
  .nav {
    position: fixed;
    inset: 0;
    z-index: 210;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding: 6rem 2rem 2rem;
    background: var(--forest-deep);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s var(--ease);
  }
  .nav.is-open { opacity: 1; pointer-events: auto; }
  .nav-link {
    font-family: var(--font-head);
    font-size: 1.9rem;
    color: var(--on-dark);
    border-bottom: 1px solid var(--hair-dark);
    padding-block: 1.05rem;
  }
  .nav-link::after { display: none; }
  .nav-link.is-current { color: var(--orange); }
}

/* ============================================================
   01 — HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 88svh;
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--header-h) + 2rem);
  padding-bottom: 2.5rem;
  overflow: hidden;
  background: var(--ink);
}
@media (min-width: 1024px) { .hero { min-height: 94svh; padding-bottom: 3.5rem; } }
/* On a tall screen the two hero columns are bottom-aligned, so the whole
   height difference between them piles up as dead space above the headline.
   Sit the block higher and centre the shorter column in its track instead of
   dropping it to the floor. Height-gated so the tight 1536x695 layout — where
   the hero has to fit the fold exactly — is left alone. */
@media (min-width: 1024px) and (min-height: 861px) {
  .hero { min-height: 86svh; padding-top: calc(var(--header-h) + 0.75rem); }
  .hero-copy { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
  .hero-slider { aspect-ratio: 16 / 9; }
}

.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  animation: heroDrift 26s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  from { transform: scale(1.06) translate3d(0,0,0); }
  to   { transform: scale(1.14) translate3d(0,-1.6%,0); }
}
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(4,29,23,0.82) 0%, rgba(4,29,23,0.35) 32%, rgba(4,29,23,0.72) 72%, rgba(4,29,23,0.96) 100%),
    linear-gradient(90deg, rgba(4,29,23,0.9) 0%, rgba(4,29,23,0.28) 62%, rgba(4,29,23,0.55) 100%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 2.5rem;
  align-items: end;
  width: 100%;
}
@media (min-width: 1024px) {
  .hero-inner { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: 3.5rem; }
}

/* The Rasuwa Rise seal, shown as a real mark above the hero label. The artwork
   is already cropped to a disc, so it needs no chip behind it on the dark hero. */
/* Width collapses to the widest line of the label/headline, so the seal's
   auto margins centre it over the words rather than over the whole column. */
.hero-headblock { width: fit-content; max-width: 100%; }

.hero-seal {
  display: block;
  width: clamp(7rem, 14vw, 15.5rem);
  height: auto;
  aspect-ratio: 1;
  /* Centred across the copy column rather than hung off the left edge. */
  margin: 0 auto 1.2rem;
  border-radius: 50%;
  /* Lifts the mark off the photograph without drawing a hard ring around it. */
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
}

.hero-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
}
.hero-label b {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--orange);
}
.hero-label span {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.hero-label i {
  width: 26px; height: 1px; background: var(--orange); display: inline-block;
}
@media (max-width: 520px) { .hero-label i { display: none; } }

.hero-title {
  font-size: clamp(2rem, 4.1vw, 3.5rem);
  line-height: 1.03;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--on-dark);
  /* No ch-based cap: it was narrower than the grid column and wrapped the
     four written lines onto six rendered ones, pushing the hero off screen. */
  max-width: 100%;
  text-wrap: balance;
}
.hero-title .accent { color: var(--orange); display: block; }
.hero-title .line { display: block; }

.hero-lead { margin-top: 1.15rem; display: grid; gap: 0.55rem; max-width: 46ch; }
.hero-lead p { color: var(--on-dark-muted); font-size: 0.97rem; line-height: 1.7; }
@media (min-width: 768px) { .hero-lead p { font-size: 1.02rem; } }

.hero-cta { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.7rem; }
@media (max-width: 480px) { .hero-cta { flex-direction: column; } .hero-cta .btn { width: 100%; } }

.hero-pills {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hair-dark);
}
.hero-pills li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.hero-pills li::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--orange);
  flex: none;
}

/* Right column: slideshow above the campaign panel */
.hero-side { display: grid; gap: 1rem; align-content: end; }

.hero-slider {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--forest-line);
  background: var(--ink);
  aspect-ratio: 16 / 10;
  isolation: isolate;
}
.hslide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity .9s var(--ease);
}
.hslide.is-active { opacity: 1; }
.hslide img { width: 100%; height: 100%; object-fit: cover; }
.hslide figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 2.6rem 1.1rem 1.5rem;
  display: grid;
  gap: 0.2rem;
  background: linear-gradient(to top, rgba(4,29,23,0.96) 12%, rgba(4,29,23,0.6) 55%, transparent);
}
.hslide-place {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
}
.hslide-caption {
  font-family: var(--font-head);
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--on-dark);
}
.hslide-ticks {
  position: absolute;
  left: 1.1rem; right: 1.1rem; bottom: 0.75rem;
  z-index: 2;
  display: flex;
  gap: 0.3rem;
}
.hstick {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: rgba(244, 240, 231, 0.28);
  transition: background-color .4s;
}
.hstick.is-active { background: var(--orange); }

/* Translucent info panel */
.hero-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--forest-line);
  background: rgba(6, 38, 30, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  padding: 1.3rem;
}
/* The Rasuwa Rise seal, ghosted into the panel. `luminosity` drops its blues
   and greens so it reads as texture in the campaign palette rather than as a
   second, competing logo. The children are given a stacking context of their
   own — a z-index:-1 pseudo would sit behind the panel's own background and
   never show. */
.hero-panel::before {
  content: "";
  position: absolute;
  /* Centred in the panel rather than tucked into a corner, so the seal reads as
     the campaign mark it is instead of a cropped texture. */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 74%;
  aspect-ratio: 1;
  background: url("../img/brand/rasuwa-rise-seal.png") center / contain no-repeat;
  opacity: 0.15;
  mix-blend-mode: luminosity;
  /* Soft-edged so the circle dissolves into the panel instead of ending on a
     hard rim; centred now that the seal itself is centred. */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 22%, rgba(0,0,0,0.62) 48%, rgba(0,0,0,0.22) 68%, transparent 84%);
  mask-image: radial-gradient(circle at 50% 50%, #000 22%, rgba(0,0,0,0.62) 48%, rgba(0,0,0,0.22) 68%, transparent 84%);
  pointer-events: none;
  z-index: 0;
}
.hero-panel > * { position: relative; }
@media (prefers-reduced-transparency: reduce) { .hero-panel::before { opacity: 0.18; } }
@media (min-width: 1024px) { .hero-panel { padding: 1.5rem; } }
.hero-panel-name {
  font-family: var(--font-head);
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--on-dark);
}
.hero-panel-strap {
  margin-top: 0.4rem;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
}
.hero-panel-title {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--hair-dark);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
}
.hero-panel-list { margin-top: 0.8rem; display: grid; gap: 0.7rem; }
.hero-panel-list li { display: flex; gap: 0.85rem; align-items: flex-start; }
.hero-panel-list .pi {
  width: 1.9rem; height: 1.9rem; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--forest-line);
  background: rgba(244,240,231,0.05);
}
.hero-panel-list .pi svg { width: 0.95rem; height: 0.95rem; fill: none; stroke: var(--orange); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hero-panel-list b { display: block; font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; color: var(--on-dark); }
.hero-panel-list span { display: block; font-size: 0.78rem; color: var(--on-dark-faint); line-height: 1.5; }
.hero-panel-note {
  margin-top: 1rem;
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--on-dark-faint);
}

/* Short laptop windows (roughly 1080px screens at 125% scale leave ~695px of
   viewport). Compress the hero so the headline, both CTAs, the pill row, the
   slideshow and the panel all still land on the first screen. */
@media (min-width: 1024px) and (max-height: 860px) {
  .hero { min-height: 100svh; padding-top: calc(var(--header-h) + 1rem); padding-bottom: 1.5rem; }
  .hero-inner { gap: 2.25rem; }
  /* Width collapses to the widest line of the label/headline, so the seal's
   auto margins centre it over the words rather than over the whole column. */
.hero-headblock { width: fit-content; max-width: 100%; }

.hero-seal { width: clamp(4.5rem, 7.5vw, 7.5rem); margin-bottom: 0.7rem; }
  .hero-label { margin-bottom: 0.7rem; }
  .hero-title { font-size: clamp(1.9rem, 3.1vw, 2.7rem); }
  .hero-lead { margin-top: 0.8rem; gap: 0.4rem; }
  .hero-lead p { font-size: 0.92rem; line-height: 1.55; }
  .hero-cta { margin-top: 1.1rem; }
  .hero-cta .btn { padding: 0.85rem 1.4rem; font-size: 0.76rem; }
  .hero-pills { margin-top: 1.1rem; padding-top: 0.8rem; gap: 0.4rem 1.2rem; }
  .hero-pills li { font-size: 0.62rem; }

  .hero-side { gap: 0.7rem; }
  .hero-slider { aspect-ratio: 2 / 1; }
  .hslide figcaption { padding: 2rem 0.9rem 1.1rem; }
  .hslide-caption { font-size: 0.9rem; }

  .hero-panel { padding: 1.1rem; }
  .hero-panel-name { font-size: 1.1rem; }
  .hero-panel-title { margin-top: 0.8rem; padding-top: 0.7rem; }
  .hero-panel-list { margin-top: 0.6rem; gap: 0.5rem; }
  .hero-panel-list .pi { width: 1.6rem; height: 1.6rem; }
  .hero-panel-list b { font-size: 0.82rem; }
  .hero-panel-list span span { font-size: 0.72rem; }
  /* The verification note is useful but not essential above the fold. */
  .hero-panel-note { display: none; }
}

/* ============================================================
   02 — THE CRISIS
   ============================================================ */
.crisis-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .crisis-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .crisis-grid { grid-template-columns: repeat(4, 1fr); } }

.crisis-card {
  position: relative;
  display: block;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--forest);
  min-height: 24rem;
  isolation: isolate;
}
.crisis-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  filter: brightness(1.1) saturate(1.05);
  transition: transform 1s var(--ease);
}
.crisis-card::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(4,29,23,0.02) 0%, rgba(4,29,23,0.4) 48%, rgba(4,29,23,0.92) 100%);
}
.crisis-card:hover img { transform: scale(1.05); }
.crisis-body {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  color: var(--on-dark);
}
.crisis-n {
  position: absolute;
  top: 1.3rem; left: 1.5rem;
  width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.crisis-title {
  font-family: var(--font-head);
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.crisis-text { margin-top: 0.6rem; font-size: 0.86rem; line-height: 1.6; color: var(--on-dark-muted); }

/* ============================================================
   03 — HUMAN STORIES
   ============================================================ */
.stories-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .stories-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .stories-grid { grid-template-columns: repeat(4, 1fr); } }

.story {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  min-height: 21rem;
  isolation: isolate;
  border: 1px solid var(--forest-line);
}
.story img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(1.12) saturate(1.06);
  transition: transform 1s var(--ease);
}
.story::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(4,29,23,0.08) 0%, rgba(4,29,23,0.3) 42%, rgba(4,29,23,0.9) 100%);
}
.story:hover img { transform: scale(1.05); }
.story-body {
  position: relative; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.5rem;
}
.story-ico {
  position: absolute; top: 1.4rem; left: 1.5rem;
  width: 2.3rem; height: 2.3rem;
}
.story-ico svg { width: 100%; height: 100%; fill: none; stroke: var(--beige); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.story-title {
  font-family: var(--font-head);
  font-size: 1.3rem;
  text-transform: uppercase;
  color: var(--orange);
}
.story-text { margin-top: 0.55rem; font-size: 0.85rem; line-height: 1.6; color: var(--on-dark-muted); }

/* ============================================================
   04 — RESPONSE TIMELINE
   ============================================================ */
.timeline { position: relative; }
.timeline-track {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .timeline-track { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
  /* the thin connecting line */
  .timeline-track::before {
    content: "";
    position: absolute;
    top: 2.35rem;
    left: 12.5%; right: 12.5%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hair-light) 12%, var(--hair-light) 88%, transparent);
  }
}
.stage { position: relative; text-align: center; }
.stage-dot {
  width: 4.7rem; height: 4.7rem;
  margin: 0 auto 1.4rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--forest);
  color: var(--cream);
  position: relative;
  transition: transform .5s var(--ease), box-shadow .4s;
}
.stage-dot svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.stage:hover .stage-dot { transform: translateY(-4px); box-shadow: 0 18px 34px -18px rgba(6,38,30,0.7); }
.stage-n {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--orange-dark);
}
.stage-title {
  margin-top: 0.5rem;
  font-family: var(--font-head);
  font-size: 1.25rem;
  text-transform: uppercase;
  color: var(--on-light);
}
.stage-text { margin-top: 0.55rem; font-size: 0.86rem; line-height: 1.6; color: var(--on-light-muted); max-width: 22ch; margin-inline: auto; }

/* ============================================================
   05 — WHERE YOUR SUPPORT GOES
   ============================================================ */
.support-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 1024px) { .support-grid { grid-template-columns: 1fr 0.85fr; gap: 4rem; } }

.areas {
  margin-top: 2.5rem;
  display: grid;
  gap: 1.6rem 1.8rem;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .areas { grid-template-columns: repeat(2, 1fr); } }
.area { display: flex; gap: 0.95rem; align-items: flex-start; }
.area-ico {
  width: 2.85rem; height: 2.85rem; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--forest-line);
  background: rgba(244,240,231,0.05);
}
.area-ico svg {
  width: 1.45rem; height: 1.45rem;
  fill: none; stroke: var(--orange); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Optical sizing. Measured drawn heights inside the 24-unit box: box 16,
   drop 15.5, bowl 14.2, heart 13.5 — and their centres sit at 12, 11.25, 11.9
   and 13.25. Left alone the heart reads small and low and the drop reads
   narrow, so each is scaled to the same optical weight and re-centred. */
.area-ico .ico-bowl  { transform: scale(1.08) translateY(0.05px); }
.area-ico .ico-drop  { transform: scale(1.08) translateY(0.45px); }
.area-ico .ico-heart { transform: scale(1.14) translateY(-0.7px); }
.area b {
  display: block;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark);
}
/* Scoped away from the icon badge. `.area span` (0,1,1) also matched
   `.area-ico` (0,1,0), so its `display: block` beat the badge's own
   `display: grid` — place-items then did nothing and every glyph dropped to
   the top-left corner of its circle instead of sitting in the middle. */
.area > span:not(.area-ico) { display: block; }
.area > span:not(.area-ico) > span {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--on-dark-muted);
}

/* Donation card */
.give-card {
  border-radius: var(--r-lg);
  border: 1px solid var(--forest-line);
  background: var(--forest-soft);
  padding: 1.6rem;
}
@media (min-width: 768px) { .give-card { padding: 2.1rem; } }
.give-title {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
}
.give-lead { margin-top: 0.8rem; font-size: 0.95rem; line-height: 1.65; color: var(--on-dark-muted); }
.give-amounts {
  margin-top: 1.5rem;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 420px) { .give-amounts { grid-template-columns: repeat(3, 1fr); } }
.amount {
  padding: 0.9rem 0.5rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--forest-line);
  background: rgba(244,240,231,0.04);
  color: var(--on-dark);
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: border-color .25s, background-color .25s, color .25s;
}
.amount:hover { border-color: rgba(255,91,46,0.55); background: rgba(255,91,46,0.1); }
.amount[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: #fff; }
.amount-other { grid-column: 1 / -1; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; }
.give-cta { margin-top: 1.2rem; }
.give-assurances {
  margin-top: 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  justify-content: center;
}
.give-assurances li {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
}
.give-assurances svg { width: 0.85rem; height: 0.85rem; fill: none; stroke: var(--orange); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================
   06 — FIELD UPDATES
   ============================================================ */
.updates-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2.5rem;
}
.updates-grid {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .updates-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .updates-grid { grid-template-columns: repeat(3, 1fr); } }

.update {
  border-radius: var(--r);
  overflow: hidden;
  background: var(--forest);
  border: 1px solid var(--forest-line);
  display: flex; flex-direction: column;
  transition: transform .4s var(--ease);
}
.update:hover { transform: translateY(-4px); }
.update-media { position: relative; overflow: hidden; }
.update-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 1s var(--ease); }
.update:hover .update-media img { transform: scale(1.05); }
.update-date {
  position: absolute; top: 0.9rem; right: 0.9rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: rgba(4,29,23,0.82);
  backdrop-filter: blur(6px);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark);
}
.update-body { padding: 1.3rem; display: flex; flex-direction: column; flex: 1; }
.update-place {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--orange);
}
.update-place svg {
  width: 0.85rem; height: 0.85rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.update-title { margin-top: 0.7rem; font-family: var(--font-head); font-size: 1.2rem; color: var(--on-dark); line-height: 1.2; }
.update-text { margin-top: 0.6rem; font-size: 0.85rem; line-height: 1.6; color: var(--on-dark-muted); }
.update-foot { margin-top: auto; padding-top: 1.1rem; }

/* ============================================================
   07 — IMPACT
   ============================================================ */
.impact-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 860px) { .impact-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 768px) { .impact-cell { padding: 1.8rem 1.4rem; } }
.impact-cell {
  padding: 1.4rem 1rem;
  border-radius: var(--r);
  border: 1px solid var(--hair-light);
  background: rgba(255,255,255,0.5);
  text-align: center;
}
.impact-cell .v {
  font-family: var(--font-head);
  font-size: clamp(1.1rem, 4.6vw, 2.1rem);
  line-height: 1.15;
  color: var(--on-light);
  text-transform: uppercase;
}
.impact-cell .k {
  margin-top: 0.5rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-light-faint);
}

/* ============================================================
   08 — TRANSPARENCY
   ============================================================ */
.trust-grid {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .trust-grid { grid-template-columns: repeat(4, 1fr); } }
.trust-col { padding-top: 1.4rem; border-top: 1px solid var(--hair-dark); }
/* A <span> is inline, so width/height were ignored and the svg's width:100%
   resolved against the whole column — the four icons rendered ~300px tall.
   Making the box a block is what actually constrains them. */
.trust-ico { display: block; width: 1.7rem; height: 1.7rem; margin-bottom: 1rem; }
.trust-ico svg { width: 100%; height: 100%; fill: none; stroke: var(--beige); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.trust-title {
  font-family: var(--font-body);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--on-dark);
}
.trust-text { margin-top: 0.6rem; font-size: 0.85rem; line-height: 1.6; color: var(--on-dark-muted); }
.trust-col .link-arrow { margin-top: 1rem; }

/* ============================================================
   09 — ABOUT
   ============================================================ */
.about-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 940px) { .about-grid { grid-template-columns: 1fr 0.9fr; gap: 4rem; } }
.about-body { display: grid; gap: 1rem; margin-top: 1.5rem; }
.about-body p { color: var(--on-light-muted); font-size: 0.98rem; line-height: 1.75; }
.about-facts { margin-top: 2rem; display: grid; gap: 0; border-top: 1px solid var(--hair-light); }
.about-facts div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--hair-light);
}
.about-facts dt { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-light-faint); margin: 0; }
.about-facts dd { margin: 0; font-weight: 600; color: var(--on-light); font-size: 0.92rem; text-align: right; }
/* A fact row may show the organisation's mark beside its name. The logo has
   an opaque white ground, which reads as a soft card against the cream band —
   no extra chip needed here, unlike the dark footer. */
.about-facts .fact-org {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: inherit; text-decoration: none;
}
.about-facts a.fact-org:hover { color: var(--orange); }
.fact-logo {
  height: 1.5rem; width: auto; flex: none;
  border-radius: 0.25rem;
  border: 1px solid var(--hair-light);
}

.about-media { border-radius: var(--r-lg); overflow: hidden; }
.about-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- The team ----------
   Seven portraits under the About copy. The row is a centred flex wrap, not a
   grid: seven cards never divide evenly into four columns, and flex lets the
   short last row sit centred instead of hanging off to the left. */
.team { margin-top: 4rem; padding-top: 3rem; border-top: 1px solid var(--hair-light); }
@media (min-width: 768px) { .team { margin-top: 5rem; } }

.team-head { max-width: 46rem; }
.team-title {
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem);
  line-height: 1.12;
  margin: 0.5rem 0 0;
  color: var(--on-light);
}
.team-lead { margin: 0.7rem 0 0; color: var(--on-light-muted); max-width: 40rem; }

.team-grid {
  list-style: none;
  margin: 2.4rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.6rem 1.4rem;
}
.team-card {
  flex: 0 1 calc((100% - 1.4rem) / 2);
  min-width: 0;
  text-align: center;
}
@media (min-width: 560px)  { .team-card { flex-basis: calc((100% - 2 * 1.4rem) / 3); } }
@media (min-width: 900px)  { .team-card { flex-basis: calc((100% - 3 * 1.4rem) / 4); } }
/* One single row on a desktop screen, however many people are on the team.
   --team-count is written by index.php from the actual member count, so adding
   or removing someone keeps the row intact instead of orphaning a card onto a
   second line. The gap tightens because that many portrait columns leave
   little room to spare. */
@media (min-width: 1024px) {
  .team-grid { gap: 1.2rem 0.75rem; flex-wrap: nowrap; }
  .team-card {
    flex: 0 1 calc((100% - (var(--team-count, 8) - 1) * 0.75rem) / var(--team-count, 8));
  }
  .team-name { font-size: 0.82rem; }
  .team .tbc { font-size: 0.62rem; padding-inline: 0.4rem; }
}

.team-photo {
  border-radius: var(--r);
  overflow: hidden;
  background: var(--beige);
  box-shadow: 0 1px 2px rgba(7, 23, 19, 0.06), 0 12px 28px -18px rgba(7, 23, 19, 0.45);
}
.team-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 18%;
}
/* A card still waiting on its real photograph reads as a placeholder rather
   than as a person with a strange grey face. */
.team-card.is-awaiting .team-photo { border: 1px dashed var(--hair-light); }
.team-card.is-awaiting .team-photo img { opacity: 0.85; }

.team-name {
  margin: 0.8rem 0 0;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--on-light);
  line-height: 1.3;
}
.team-role {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--on-light-muted);
}
/* ---------- Operating organisation lockup (footer) ---------- */
.footer-operator {
  display: inline-flex; align-items: center; gap: 0.75rem;
  margin-top: 1.4rem;
  padding: 0.5rem 0.9rem 0.5rem 0.5rem;
  border: 1px solid var(--forest-line);
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.footer-operator:hover { border-color: rgba(216,201,174,0.34); background: rgba(244,240,231,0.04); }
.footer-operator-mark {
  display: grid; place-items: center;
  padding: 0.35rem 0.45rem;
  background: #fff;
  border-radius: 0.4rem;
  flex: none;
}
.footer-operator-mark img { display: block; width: 74px; height: auto; }
.footer-operator-text {
  font-size: 0.78rem; line-height: 1.35;
  color: var(--on-dark-muted);
  display: flex; flex-direction: column; gap: 0.15rem;
}
.footer-operator-text b { color: var(--on-dark); font-weight: 600; }
.footer-operator-link {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--orange);
}
.footer-operator-link svg { width: 0.8rem; height: 0.8rem; }
.footer-operator:hover .footer-operator-link svg { transform: translateX(3px); }

/* .tbc is written for the dark footer; restate it for the cream band. */
.team .tbc {
  border-color: var(--hair-light);
  color: var(--on-light-faint);
  font-weight: 500;
}

/* ============================================================
   10 — FINAL CTA
   ============================================================ */
.final {
  position: relative;
  isolation: isolate;
  padding-block: 6rem;
  text-align: center;
  overflow: hidden;
}
@media (min-width: 768px) { .final { padding-block: 9rem; } }
.final img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.final::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(4,29,23,0.8), rgba(4,29,23,0.74));
}
.final-title {
  font-size: clamp(1.8rem, 4.4vw, 3.4rem);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--on-dark);
  max-width: 20ch;
  margin-inline: auto;
}
.final-lead { margin-top: 1.3rem; color: var(--on-dark-muted); max-width: 44ch; margin-inline: auto; }
.final-cta { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }
.final-strap {
  margin-top: 2.6rem;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--orange);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--forest-deep); padding-block: 3.5rem 2rem; border-top: 1px solid var(--forest-line); }
.footer-grid {
  display: grid; gap: 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1.2fr; gap: 3.5rem; } }
.footer-brand .brand-name { font-size: 1.6rem; }
.footer-brand .brand-initiative { font-size: 0.62rem; }
.footer-strap {
  margin-top: 1rem;
  font-size: 0.63rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--orange);
}
.footer-note { margin-top: 1rem; font-size: 0.88rem; line-height: 1.7; color: var(--on-dark-muted); max-width: 38ch; }
.footer-heading {
  font-family: var(--font-body);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--on-dark-faint);
  margin-bottom: 1.1rem;
}
.footer-col ul { display: grid; gap: 0.65rem; font-size: 0.9rem; }
.footer-col a { color: var(--on-dark-muted); transition: color .2s; }
.footer-col a:hover { color: var(--on-dark); }
.footer-contact li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.9rem; color: var(--on-dark-muted); }
.footer-contact svg { width: 1rem; height: 1rem; flex: none; margin-top: 0.28rem; fill: none; stroke: var(--orange); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tbc {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  border: 1px dashed var(--hair-dark);
  font-size: 0.72rem;
  color: var(--on-dark-faint);
}
.footer-base {
  margin-top: 3rem; padding-top: 1.4rem;
  border-top: 1px solid var(--forest-line);
  display: flex; flex-wrap: wrap; gap: 0.7rem 1.5rem; justify-content: space-between;
  font-size: 0.78rem; color: var(--on-dark-faint);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.2rem; }

/* ============================================================
   DONATION MODAL — four steps
   ============================================================ */
.modal[hidden] { display: none !important; }
.modal {
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center;
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(4, 20, 16, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: mFade .3s var(--ease) both;
}
.modal-panel {
  position: relative; z-index: 1;
  width: 100%; max-width: 27rem;
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 1.5rem 1.4rem 1.4rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--forest-line);
  background: var(--forest-soft);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.8);
  animation: mRise .4s var(--ease) both;
}
.modal-panel::-webkit-scrollbar { width: 0; height: 0; }
@media (min-width: 480px) { .modal-panel { padding: 1.9rem 1.8rem 1.6rem; } }
@keyframes mFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.modal-close {
  position: absolute; top: 0.6rem; right: 0.7rem;
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 1.5rem; line-height: 1;
  color: var(--on-dark-muted);
  transition: background-color .25s, color .25s;
}
.modal-close:hover { background: rgba(244,240,231,0.08); color: var(--on-dark); }

/* step rail */
.modal-rail { display: flex; gap: 0.35rem; margin-bottom: 1.2rem; padding-right: 2.5rem; }
.modal-rail span {
  flex: 1; height: 3px; border-radius: 999px;
  background: rgba(244,240,231,0.16);
  transition: background-color .35s;
}
.modal-rail span.is-done { background: var(--orange); }

.modal-step { display: none; }
.modal-step.is-active { display: block; }
.modal-kicker { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange); }
.modal-title { margin-top: 0.5rem; font-family: var(--font-head); font-size: 1.45rem; line-height: 1.15; color: var(--on-dark); }
.modal-lead { margin-top: 0.5rem; font-size: 0.87rem; line-height: 1.6; color: var(--on-dark-muted); }

.modal-field { margin-top: 1rem; }
.modal-field label { display: block; margin-bottom: 0.4rem; font-size: 0.78rem; font-weight: 500; color: var(--on-dark-muted); }
.modal-field input,
.modal-field select {
  width: 100%;
  padding: 0.8rem 0.95rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--forest-line);
  background: var(--forest-deep);
  color: var(--on-dark);
  font: inherit;
  font-size: 1rem;            /* 16px — stops iOS zooming on focus */
  transition: border-color .2s, box-shadow .2s;
}
.modal-field input::placeholder { color: var(--on-dark-faint); }
/* Browsers paint autofilled fields bright yellow, which looked broken against
   the dark panel. Re-assert the field's own colours. */
.modal-field input:-webkit-autofill,
.modal-field input:-webkit-autofill:hover,
.modal-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--on-dark);
  -webkit-box-shadow: 0 0 0 1000px var(--forest-deep) inset;
  caret-color: var(--on-dark);
  transition: background-color 9999s ease-in-out 0s;
}
.modal-field input:focus,
.modal-field select:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255,91,46,0.22);
}
.modal-error { margin-top: 0.8rem; font-size: 0.83rem; color: var(--orange-soft); }
.modal-actions { margin-top: 1.3rem; display: grid; gap: 0.6rem; }
.modal-back {
  margin-bottom: 0.5rem;
  font-size: 0.78rem;
  color: var(--on-dark-muted);
  transition: color .2s;
}
.modal-back:hover { color: var(--on-dark); }
.modal-fine { margin-top: 0.85rem; font-size: 0.72rem; line-height: 1.5; color: var(--on-dark-faint); text-align: center; }

.modal-amounts { margin-top: 1.1rem; display: grid; gap: 0.55rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 420px) { .modal-amounts { grid-template-columns: repeat(3, 1fr); } }
.modal-summary {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--forest-line);
  background: rgba(244,240,231,0.04);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.modal-summary span { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-dark-faint); }
.modal-summary b { font-family: var(--font-head); font-size: 1.3rem; color: var(--on-dark); }

.modal-qr { margin-top: 1rem; padding: 0.8rem; border-radius: var(--r); background: #fff; text-align: center; }
.modal-qr img { width: 100%; max-width: 10rem; height: auto; margin-inline: auto; }
.modal-merchant { margin-top: 0.5rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }

.copy-row {
  width: 100%;
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 0.3rem 1rem;
  text-align: left;
  padding: 0.8rem 1rem;
  margin-top: 0.7rem;
  border-radius: var(--r-sm);
  background: rgba(244,240,231,0.05);
  border: 1px solid transparent;
  transition: background-color .25s, border-color .25s;
}
.copy-row:hover { background: rgba(244,240,231,0.1); border-color: var(--forest-line); }
.copy-label { grid-column: 1; font-size: 0.72rem; color: var(--on-dark-faint); }
.copy-value { grid-column: 1; font-weight: 600; word-break: break-all; color: var(--on-dark); }
.copy-hint {
  grid-column: 2; grid-row: 1 / span 2;
  font-size: 0.7rem; color: var(--orange);
  border: 1px solid rgba(255,91,46,0.4);
  border-radius: 999px; padding: 0.24rem 0.7rem; white-space: nowrap;
}
.copy-row.is-copied .copy-hint { color: var(--beige); border-color: rgba(216,201,174,0.5); }

.modal-hint {
  margin-top: 0.8rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--forest-line);
  background: rgba(244,240,231,0.04);
  font-size: 0.8rem; line-height: 1.55;
  color: var(--on-dark-muted);
  text-align: center;
}
.modal-hint-warn {
  border-color: rgba(255, 91, 46, 0.45);
  background: rgba(255, 91, 46, 0.09);
  color: var(--on-dark);
}
.modal-hint-warn strong { color: var(--orange); }

.modal-alt { display: block; margin-top: 0.8rem; text-align: center; font-size: 0.82rem; color: var(--on-dark-muted); text-decoration: underline; text-underline-offset: 3px; }
.modal-alt:hover { color: var(--on-dark); }

/* Thank-you step */
.thanks-mark {
  width: 3.4rem; height: 3.4rem;
  margin: 0 auto 1.1rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,91,46,0.15);
  border: 1px solid rgba(255,91,46,0.4);
}
.thanks-mark svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: var(--orange); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.thanks-receipt { margin-top: 1.1rem; display: grid; gap: 0; border-top: 1px solid var(--forest-line); }
.thanks-receipt div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.65rem 0; border-bottom: 1px solid var(--forest-line); }
.thanks-receipt dt { margin: 0; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-faint); }
.thanks-receipt dd { margin: 0; font-weight: 600; font-size: 0.9rem; color: var(--on-dark); text-align: right; }

body.modal-open { overflow: hidden; }

/* ============================================================
   INNER PAGES
   ============================================================ */
.page-hero {
  position: relative;
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: 2.5rem;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}
@media (min-width: 768px) { .page-hero { padding-top: calc(var(--header-h) + 2.25rem); padding-bottom: 3rem; } }
/* The band under a page hero carries its own generous top padding, which on
   top of the hero's bottom padding left a visible hole. Tighten the join. */
.page-hero + .section { padding-top: 3.25rem; }
.page-hero img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: brightness(1.1); }
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(4,29,23,0.72), rgba(4,29,23,0.7) 50%, var(--forest));
}
.page-title {
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  text-transform: uppercase;
  line-height: 1.08;
  max-width: 20ch;
}
.page-title .accent { color: var(--orange); }
.page-lead { margin-top: 0.9rem; max-width: 56ch; color: var(--on-dark-muted); font-size: 0.98rem; }

/* Relief project cards */
.relief-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .relief-grid { grid-template-columns: repeat(2, 1fr); } }
.relief-card {
  display: flex; flex-direction: column; height: 100%;
  border-radius: var(--r-lg);
  border: 1px solid var(--forest-line);
  background: var(--forest-soft);
  overflow: hidden;
  transition: transform .45s var(--ease), border-color .35s;
}
.relief-card:hover { transform: translateY(-4px); border-color: rgba(244,240,231,0.24); }
.relief-media { position: relative; overflow: hidden; }
.relief-media img { width: 100%; aspect-ratio: 20 / 9; object-fit: cover; transition: transform .9s var(--ease); }
.relief-card:hover .relief-media img { transform: scale(1.04); }
.relief-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(4,29,23,0.75), transparent 55%); }
.relief-tag {
  position: absolute; left: 1.2rem; bottom: 1rem; z-index: 1;
  padding: 0.34rem 0.8rem; border-radius: 999px;
  background: rgba(4,29,23,0.72); border: 1px solid var(--forest-line);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-dark);
}
/* Status sits opposite the tag: what the project IS, and where it is up to. */
.relief-status {
  position: absolute; right: 1.2rem; bottom: 1rem; z-index: 1;
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.34rem 0.8rem; border-radius: 999px;
  background: rgba(4,29,23,0.72); border: 1px solid var(--forest-line);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--on-dark-muted);
}
.relief-status::before {
  content: ""; width: 0.42rem; height: 0.42rem; border-radius: 999px;
  background: var(--on-dark-faint);
}
.relief-status.is-live { color: var(--on-dark); border-color: rgba(255,91,46,0.5); }
.relief-status.is-live::before { background: var(--orange); }

.relief-body { display: flex; flex-direction: column; flex: 1; padding: 1.2rem; }
@media (min-width: 768px) { .relief-body { padding: 1.45rem; } }
.relief-name { font-family: var(--font-head); font-size: 1.5rem; text-transform: uppercase; color: var(--on-dark); }
.relief-lede { margin-top: 0.7rem; font-size: 0.95rem; line-height: 1.5; color: var(--orange); }
.relief-desc { margin-top: 0.7rem; font-size: 0.9rem; line-height: 1.65; color: var(--on-dark-muted); }
.relief-focus { margin-top: 1.2rem; margin-bottom: 1.35rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.relief-focus li {
  padding: 0.32rem 0.75rem; border-radius: 999px;
  border: 1px solid var(--forest-line); background: rgba(244,240,231,0.04);
  font-size: 0.74rem; color: var(--on-dark-muted);
}
/* The gap above the button belongs to the focus list, not to the button: a
   padding-top here inflated the pill itself and pushed its label off centre.
   `stretch` + a max-width makes both cards' buttons the same size whatever
   their label says — two pills of different widths side by side read as a
   mistake. */
.relief-cta {
  margin-top: auto;
  align-self: stretch;
  max-width: 22rem;
  justify-content: center;
}

/* Gallery folders */
.folder-grid { display: grid; gap: 1rem; }
.folder {
  border: 1px solid var(--forest-line);
  border-radius: var(--r-lg);
  background: var(--forest-soft);
  overflow: hidden;
  transition: border-color .3s, background-color .3s;
  scroll-margin-top: 6rem;
}
.folder:hover { border-color: rgba(244,240,231,0.24); }
.folder[open] { background: var(--forest-deep); }
.folder-cover { display: flex; align-items: center; gap: 1.1rem; padding: 0.9rem; cursor: pointer; list-style: none; }
.folder-cover::-webkit-details-marker { display: none; }
.folder-thumb { position: relative; flex: none; width: 6.5rem; aspect-ratio: 4/3; }
.folder-thumb img { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--forest-line); }
.folder-stack {
  position: absolute; inset: 0; z-index: 1;
  border-radius: var(--r-sm); background: var(--forest); border: 1px solid var(--forest-line);
  transform: translate(6px,-6px) rotate(2.5deg); transition: transform .35s var(--ease);
}
.folder:hover .folder-stack { transform: translate(9px,-8px) rotate(3.5deg); }
.folder[open] .folder-stack { transform: translate(3px,-3px) rotate(1deg); }
@media (min-width: 640px) { .folder-thumb { width: 8rem; } }
.folder-meta { flex: 1; display: grid; gap: 0.2rem; min-width: 0; }
.folder-kicker { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-dark-faint); }
.folder-name { font-family: var(--font-head); font-size: 1.35rem; color: var(--on-dark); line-height: 1.15; }
@media (min-width: 640px) { .folder-name { font-size: 1.55rem; } }
.folder-desc { font-size: 0.86rem; color: var(--on-dark-muted); margin-top: 0.15rem; }
.folder-count { margin-top: 0.3rem; font-size: 0.78rem; color: var(--on-dark-faint); }
.folder-open-label, .folder-close-label { color: var(--orange); font-weight: 600; }
.folder-close-label { display: none; }
.folder[open] .folder-open-label { display: none; }
.folder[open] .folder-close-label { display: inline; }
.folder-chevron {
  flex: none; width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--forest-line); background: rgba(244,240,231,0.05);
  transition: transform .35s var(--ease);
}
.folder[open] .folder-chevron { transform: rotate(180deg); }
.folder-chevron svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: var(--on-dark); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.folder .gallery { padding: 0 0.9rem 0.9rem; }

.gallery { display: grid; gap: 0.9rem; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery-item { position: relative; margin: 0; border-radius: var(--r); overflow: hidden; border: 1px solid var(--forest-line); background: var(--forest); }
@media (min-width: 1024px) { .gallery-item.is-wide { grid-column: span 2; } }
.gallery-item img { width: 100%; aspect-ratio: 16/10; object-fit: cover; transition: transform .7s var(--ease); }
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item figcaption {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: 2.2rem 1.1rem 1rem;
  display: grid; gap: 0.15rem;
  background: linear-gradient(to top, rgba(4,29,23,0.95), transparent);
}
.gallery-place { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange); }
.gallery-caption { font-family: var(--font-head); font-size: 1rem; color: var(--on-dark); }
.album-empty { padding: 2rem; border-radius: var(--r); border: 1px dashed var(--hair-dark); color: var(--on-dark-faint); text-align: center; }
.album-empty code { font-family: ui-monospace, Menlo, monospace; font-size: 0.85em; color: var(--orange); }

/* Donate page + 80G page */
.pay-grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .pay-grid { grid-template-columns: repeat(2, 1fr); } }
.pay-card { padding: 1.8rem; border-radius: var(--r-lg); border: 1px solid var(--forest-line); background: var(--forest-soft); }
.pay-heading { font-family: var(--font-head); font-size: 1.4rem; text-transform: uppercase; margin-top: 0.6rem; margin-bottom: 1.2rem; color: var(--on-dark); }
.pay-qr { margin-bottom: 1.1rem; padding: 1rem; border-radius: var(--r); background: #fff; text-align: center; }
.pay-qr img { width: 100%; max-width: 12rem; height: auto; margin-inline: auto; }
.pay-qr-name { margin-top: 0.5rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.pay-meta { margin: 1.3rem 0 0; display: grid; gap: 0; padding-top: 1.1rem; border-top: 1px solid var(--forest-line); }
.pay-meta > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; font-size: 0.9rem; }
.pay-meta dt { color: var(--on-dark-faint); margin: 0; }
.pay-meta dd { margin: 0; font-weight: 600; color: var(--on-dark); text-align: right; word-break: break-all; }
.pay-followup { margin-top: 1.6rem; font-size: 0.88rem; color: var(--on-dark-muted); max-width: 62ch; }
.pay-followup a { color: var(--orange); }

.tax-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .tax-grid { grid-template-columns: 1.25fr 0.85fr; } }
.tax-card { padding: 1.9rem; border-radius: var(--r-lg); border: 1px solid var(--forest-line); background: var(--forest-soft); }
.tax-lede { margin-top: 0.8rem; font-family: var(--font-head); font-size: 1.2rem; line-height: 1.4; color: var(--on-dark); }
.tax-body { margin-top: 0.9rem; color: var(--on-dark-muted); line-height: 1.7; font-size: 0.92rem; }
.tax-points { margin-top: 1.4rem; display: grid; gap: 0.55rem; }
.tax-points li { position: relative; padding-left: 1.5rem; font-size: 0.9rem; color: var(--on-dark-muted); }
.tax-points li::before {
  content: ""; position: absolute; left: 0; top: 0.42em;
  width: 0.65rem; height: 0.35rem;
  border-left: 2px solid var(--orange); border-bottom: 2px solid var(--orange);
  transform: rotate(-45deg);
}

/* ============================================================
   MOTION
   ============================================================ */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
/* Without the `js` class nothing is hidden, so no content can be stranded. */

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

/* All-time visitor count, under the operating-organisation block. */
.footer-visits {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 1.4rem 0 0;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--forest-line);
  border-radius: 999px;
  background: rgba(244, 240, 231, 0.04);
}
.footer-visits-n {
  font-family: var(--font-head);
  font-size: 1.15rem;
  line-height: 1;
  color: var(--on-dark);
  font-variant-numeric: tabular-nums;
}
.footer-visits-l {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
}

/* --------------------------------------------------------------------------
   Per-project impact figures (Seeds of Hope food support).
   Uses the existing card palette and type — no new colours are introduced.
   -------------------------------------------------------------------------- */

.relief-impact {
  margin-top: 1.15rem;
  padding-top: 1.05rem;
  border-top: 1px solid var(--hair-dark);
}
.relief-impact-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
  margin: 0;
}
.relief-impact-note {
  margin: 0.55rem 0 0;
  font-size: 0.84rem;
  line-height: 1.75;
  color: var(--on-dark-muted);
}

.relief-stats {
  list-style: none;
  margin: 0.95rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* The daily total is the conclusion of the other two, so it spans the row
   beneath them on narrow cards — the 2 + 1 layout. */
.relief-stats .is-lead { grid-column: 1 / -1; }

.relief-stat {
  min-width: 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--hair-dark);
  border-radius: var(--r-sm, 10px);
  background: rgba(244, 240, 231, 0.04);
}
.relief-stat-value {
  display: block;
  font-family: var(--font-head);
  font-size: 1.15rem;
  line-height: 1.15;
  color: var(--on-dark);
  overflow-wrap: anywhere;
}
.relief-stat-label {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--on-dark-faint);
}

/* The daily figure is the one that tells a donor what to give. */
.relief-stat.is-lead {
  border-color: rgba(255, 91, 46, 0.42);
  background: rgba(255, 91, 46, 0.09);
}
.relief-stat.is-lead .relief-stat-value {
  color: var(--orange);
  font-size: 1.35rem;
}
.relief-stat.is-lead .relief-stat-label { color: var(--on-dark-muted); }

/* Wide enough for all three side by side without squeezing the labels. */
@media (min-width: 1180px) {
  .relief-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .relief-stats .is-lead { grid-column: auto; }
}

/* --------------------------------------------------------------------------
   Short screens: fit the donate dialog on a phone.

   The details step is the tallest, and with five fields it overflowed a 640px
   screen, leaving "Continue to payment" below the fold. A sticky action bar
   was tried and rejected: sticking it to the bottom lifts it over the fields
   above, hiding the email and UPI inputs a donor still has to fill in.

   So the step is compacted instead — the action stays in normal flow and can
   never cover a field. Where it still does not fit, the panel's scrollbar is
   made visible so there is an obvious cue that more lies below.
   -------------------------------------------------------------------------- */
@media (max-height: 780px) {
  .modal-panel {
    padding: 1.05rem 1.2rem 1.1rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(244, 240, 231, 0.28) transparent;
  }
  .modal-panel::-webkit-scrollbar { width: 4px; }
  .modal-panel::-webkit-scrollbar-thumb {
    background: rgba(244, 240, 231, 0.28);
    border-radius: 4px;
  }

  .modal-rail   { margin-bottom: 0.7rem; }
  .modal-kicker { margin-bottom: 0.2rem; }
  .modal-title  { font-size: 1.35rem; }
  .modal-lead   { margin-top: 0.3rem; margin-bottom: 0.8rem; font-size: 0.86rem; }
  .modal-back   { margin-bottom: 0.3rem; }

  .modal-field { margin-bottom: 0.62rem; }
  .modal-field > label { margin-bottom: 0.2rem; font-size: 0.78rem; }
  /* Kept at 0.55rem so the tap target stays about 42px tall. */
  .modal-field input,
  .modal-field select { padding-block: 0.55rem; }

  .modal-actions { margin-top: 0.9rem; }
}

/* Very short screens (a 640px-tall phone, or any phone in landscape). The
   supporting line under the heading is the one thing that can go without
   costing the donor information — the labels and placeholders already say what
   each field is for. */
@media (max-height: 700px) {
  .modal-step[data-step="2"] .modal-lead { display: none; }
  .modal-title { font-size: 1.2rem; }
  .modal-field { margin-bottom: 0.5rem; }
  .modal-rail  { margin-bottom: 0.55rem; }
}

/* --------------------------------------------------------------------------
   Bank transfer details, revealed inside the donate dialog.
   -------------------------------------------------------------------------- */

.modal-bank { margin-top: 0.8rem; }

/* A <summary> styled as the outline button it replaces. list-style:none plus
   the ::-webkit-details-marker rule removes the default disclosure triangle,
   which no browser lets you style. */
.modal-bank-toggle {
  list-style: none;
  cursor: pointer;
  justify-content: center;
}
.modal-bank-toggle::-webkit-details-marker { display: none; }
.modal-bank-toggle::marker { content: ""; }
.modal-bank-toggle svg {
  width: 1rem; height: 1rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
/* The chevron turns when the panel is open, so the control reads as a toggle. */
.modal-bank-toggle::after {
  content: "";
  width: 0.45rem; height: 0.45rem;
  margin-left: 0.15rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .25s var(--ease);
}
.modal-bank[open] .modal-bank-toggle::after { transform: translateY(1px) rotate(-135deg); }

.modal-bank-body { margin-top: 0.35rem; }
.modal-bank-body .copy-row { margin-top: 0.5rem; }

.modal-bank-meta {
  margin: 0.8rem 0 0;
  display: grid;
  gap: 0.4rem;
}
.modal-bank-meta div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.82rem;
}
.modal-bank-meta dt { color: var(--on-dark-faint); }
.modal-bank-meta dd { margin: 0; font-weight: 600; color: var(--on-dark); text-align: right; }


/* --------------------------------------------------------------------------
   Floating WhatsApp button, bottom-right.
   Small by request. z-index sits under the donate dialog (200+) so it never
   floats over an open modal, and it respects the iOS safe area.
   -------------------------------------------------------------------------- */
.wa-float {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 120;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 8px 22px -6px rgba(0, 0, 0, 0.55);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.wa-float:hover,
.wa-float:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -6px rgba(0, 0, 0, 0.65);
}
.wa-float svg { width: 1.75rem; height: 1.75rem; fill: #fff; }
/* The glyph is punched out of the bubble in the page background colour. */
.wa-float .wa-glyph { fill: #25D366; }

/* Out of the way of the thumb on a small screen. */
@media (max-width: 480px) {
  .wa-float { width: 2.75rem; height: 2.75rem; }
  .wa-float svg { width: 1.6rem; height: 1.6rem; }
}

/* Hidden while the donate dialog is open, so it cannot overlap the form. */
body.modal-open .wa-float { opacity: 0; pointer-events: none; }

/* ------------------------------------------------- QR download + GPay mark */

.qr-download {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.7rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--forest-line);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--on-dark-muted);
  text-decoration: none;
  transition: border-color .2s, color .2s;
}
.qr-download:hover { border-color: var(--on-dark); color: var(--on-dark); }
.qr-download svg {
  width: 0.95rem; height: 0.95rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

/* A copy row carrying a payment-method mark: the label and value shift right
   to make room, and the mark spans both rows of the grid. */
.copy-row.has-mark { grid-template-columns: auto 1fr auto; }
.copy-row.has-mark .copy-mark  { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.copy-row.has-mark .copy-label { grid-column: 2; }
.copy-row.has-mark .copy-value { grid-column: 2; }
.copy-row.has-mark .copy-hint  { grid-column: 3; }

.copy-mark { display: block; width: 1.9rem; height: 1.9rem; }
.gpay-mark { display: block; width: 100%; height: 100%; }