/* ==========================================================================
   Missing Children South Africa, proof of concept
   Design system
   ========================================================================== */

:root {
  /* Brand. #ED1F27 is MCSA's existing red, taken from the live site.
     --red-cta is a slightly deeper shade so white button text clears
     WCAG AA (4.5:1); the pure brand red only clears it at large sizes. */
  --red:        #ED1F27;
  --red-cta:    #CC141B;
  --red-deep:   #A51016;
  --red-tint:   #FEF3F3;

  --ink:        #12161C;
  --ink-2:      #2A313B;

  --muted:      #5C6672;
  --muted-soft: #8A929C;

  --cream:      #FBF9F6;
  --sand:       #F4F0EA;
  --line:       #E7E2DA;
  --white:      #FFFFFF;

  /* Hope / impact accents */
  --gold:       #F2B234;
  --sage:       #2F7A62;
  --sage-tint:  #EDF5F2;

  --font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --wrap: 1200px;
  --wrap-narrow: 780px;

  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --r-xl: 32px;

  --shadow-sm: 0 1px 2px rgba(18, 22, 28, .06), 0 2px 8px rgba(18, 22, 28, .04);
  --shadow: 0 4px 12px rgba(18, 22, 28, .07), 0 12px 32px rgba(18, 22, 28, .06);
  --shadow-lg: 0 8px 24px rgba(18, 22, 28, .10), 0 24px 60px rgba(18, 22, 28, .10);

  --header-h: 96px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
/* Long unbroken strings (mailto links, email addresses in prose) have no
   natural break point and overflow their container at narrow widths, e.g.
   taxcertificate@missingchildren.org.za on a 320px screen. This is a
   site-wide safety net, not just a donate-page fix. */
a { color: inherit; overflow-wrap: break-word; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 5.4vw, 4.1rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.85rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); letter-spacing: -.015em; }
h4 { font-size: 1.05rem; letter-spacing: -.01em; }
/* Applied to headings promoted from h4 to h3 to keep the document outline
   correct. Purely a size token: the level is the semantic part. */
.h4 { font-size: 1.05rem; letter-spacing: -.01em; }

p { text-wrap: pretty; }

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

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff;
  padding: 14px 22px; border-radius: 0 0 var(--r-sm) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.wrap-narrow { width: 100%; max-width: var(--wrap-narrow); margin-inline: auto; padding-inline: 24px; }

.section { padding-block: clamp(64px, 9vw, 118px); }
.section--tight { padding-block: clamp(48px, 6vw, 76px); }
.section--cream { background: var(--cream); }
.section--sand  { background: var(--sand); }
.section--ink   { background: var(--ink); color: #fff; }
.section--ink h1, .section--ink h2, .section--ink h3 { color: #fff; }
/* Steps sit on light cards even inside a dark section, so they must opt back
   out of the white heading colour above or the text vanishes. */
.section--ink .step h3 { color: var(--ink); }
.section--ink .step p  { color: var(--muted); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--red-deep);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: ''; width: 26px; height: 2px;
  background: var(--red); border-radius: 2px;
}
.section--ink .eyebrow { color: #FF8A8F; }

.section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 60px); }
.section-head p {
  margin-top: 18px; font-size: 1.12rem;
  color: var(--muted); line-height: 1.7;
}
.section--ink .section-head p { color: rgba(255,255,255,.72); }
.section-head--center { margin-inline: auto; text-align: center; }

.lede { font-size: 1.2rem; line-height: 1.72; color: var(--ink-2); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px;
  border: 2px solid transparent; border-radius: 100px;
  font-weight: 650; font-size: .98rem; letter-spacing: -.01em;
  text-decoration: none; cursor: pointer;
  transition: transform .16s ease, background-color .16s ease,
              box-shadow .16s ease, border-color .16s ease, color .16s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--red-cta); color: #fff; box-shadow: 0 4px 14px rgba(204, 20, 27, .3); }
.btn--primary:hover { background: var(--red-deep); box-shadow: 0 8px 22px rgba(204, 20, 27, .38); }

.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #000; }

.btn--outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--outline:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

.btn--ghost-light { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.35); }
.btn--ghost-light:hover { background: #fff; color: var(--ink); border-color: #fff; }

.btn--white { background: #fff; color: var(--ink); }
.btn--white:hover { background: var(--cream); }

.btn--lg { padding: 19px 34px; font-size: 1.06rem; }
.btn--block { width: 100%; }

.btn svg { flex-shrink: 0; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 2px 20px rgba(18,22,28,.05);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 24px;
  min-height: var(--header-h);
}

/* Official MCSA logo. assets/logo.png is the colour version for light
   backgrounds; assets/logo-white.png is the same artwork with the black text
   recoloured white so it stays legible on the dark footer. Both are cropped
   to the artwork's tight bounding box (aspect 2.196) with transparent
   backgrounds. Supply width/height on the <img> so nothing shifts on load. */
.logo {
  display: inline-flex; align-items: center;
  text-decoration: none; flex-shrink: 0;
}
.logo img { height: 64px; width: auto; display: block; }
@media (max-width: 560px) { .logo img { height: 50px; } }

.site-footer .logo img { height: 64px; }

.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a {
  padding: 10px 14px; border-radius: 100px;
  font-size: .95rem; font-weight: 550;
  color: var(--ink-2); text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.nav a:hover { background: var(--sand); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--red-deep); font-weight: 650; }

/* `.nav a` outranks `.btn--primary` on specificity, which would repaint the
   Donate button's label dark-on-red. Restore the button colours explicitly. */
.nav a.btn--primary { color: #fff; }
.nav a.btn--primary:hover { background: var(--red-deep); color: #fff; }
.nav a.btn--outline { color: var(--ink); }
.nav a.btn--outline:hover { background: var(--ink); color: #fff; }

.header-cta { display: flex; align-items: center; gap: 10px; margin-left: 8px; }

/* The nav carries its own copy of the CTAs for the mobile drawer only:
   without this they render twice in the desktop header. */
.nav .header-cta { display: none; }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: transparent; border: 1px solid var(--line);
  border-radius: 10px; cursor: pointer;
  /* 14px vertical padding brings the button to a 44px tap target */
  padding: 14px 15px;
}
.nav-toggle span {
  display: block; width: 20px; height: 2px;
  background: var(--ink); border-radius: 2px;
}
.nav-toggle span + span { margin-top: 5px; }

@media (max-width: 1040px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 0 0 auto; top: var(--header-h);
    flex-direction: column; align-items: stretch;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 16px 24px 26px; gap: 2px;
    box-shadow: var(--shadow);
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 14px 12px; font-size: 1.05rem; border-radius: var(--r-sm); }
  .site-header > .wrap > .header-cta { display: none; }
  .nav .header-cta { display: flex; flex-direction: column; margin: 14px 0 0; }
  .nav .btn { width: 100%; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 30%;
  opacity: .3;
}
.hero__bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(18,22,28,.94) 0%, rgba(18,22,28,.78) 45%, rgba(18,22,28,.42) 100%),
    linear-gradient(to top, rgba(18,22,28,.9), transparent 55%);
}
.hero .wrap { position: relative; z-index: 2; }
.hero__inner {
  padding-block: clamp(64px, 9vw, 116px);
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(36px, 5vw, 72px); align-items: center;
}
@media (max-width: 940px) { .hero__inner { grid-template-columns: 1fr; } }

.hero h1 { color: #fff; }
.hero h1 em {
  font-style: normal; color: var(--red);
  display: inline-block;
}
.hero__lede {
  margin-top: 22px; max-width: 54ch;
  font-size: 1.16rem; line-height: 1.7;
  color: rgba(255,255,255,.78);
}
.hero__flag {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(237,31,39,.16);
  border: 1px solid rgba(237,31,39,.45);
  color: #fff;
  padding: 9px 18px 9px 14px; border-radius: 100px;
  font-size: .82rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 26px;
}
.hero__actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; }

.hero__trust {
  margin-top: 38px; padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: 26px 44px;
}
.hero__trust div { min-width: 128px; }
.hero__trust dt {
  font-family: var(--font-display);
  font-size: 1.9rem; font-weight: 700; color: #fff;
  letter-spacing: -.02em;
}
.hero__trust dd {
  margin: 4px 0 0; font-size: .88rem;
  color: rgba(255,255,255,.6); line-height: 1.45;
}

/* Emergency call card in hero */
.call-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-xl);
  padding: clamp(26px, 3vw, 36px);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.call-card__label {
  font-size: .76rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.call-card__number {
  display: block; margin: 12px 0 6px;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.6vw, 2.5rem); font-weight: 700;
  color: #fff; text-decoration: none; letter-spacing: -.025em;
  transition: color .15s ease;
}
.call-card__number:hover { color: var(--red); }
.call-card__note { font-size: .9rem; color: rgba(255,255,255,.6); }
.call-card hr {
  border: 0; border-top: 1px solid rgba(255,255,255,.14);
  margin: 22px 0;
}
.call-card__steps { list-style: none; padding: 0; display: grid; gap: 12px; }
.call-card__steps li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: .93rem; color: rgba(255,255,255,.82); line-height: 1.5;
}
.call-card__steps b {
  flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--red); color: #fff;
  font-size: .72rem; font-weight: 700;
  display: grid; place-items: center;
  margin-top: 2px;
}

/* ---------- Stats ---------- */
.stat-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.stat {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 30px 28px;
}
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.4vw, 3.2rem); font-weight: 700;
  letter-spacing: -.035em; line-height: 1;
  color: var(--ink);
}
.stat__num--red { color: var(--red); }
.stat__num--sage { color: var(--sage); }
.stat__label { margin-top: 12px; font-weight: 650; font-size: 1rem; }
.stat__note { margin-top: 7px; font-size: .88rem; color: var(--muted); line-height: 1.55; }

/* ---------- Cards ---------- */
.grid { display: grid; gap: 22px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card--link:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: transparent;
}
/* Padding modifiers as classes, not inline styles. An inline style outranks
   media queries, so a card padded inline can never slim down on mobile. */
.card--roomy   { padding: 38px 34px; }
.card--compact { padding: 22px 24px; }

.card h3 { margin-bottom: 10px; }
.card p { color: var(--muted); font-size: .97rem; line-height: 1.65; }

.ordered-steps {
  padding-left: 22px; color: var(--muted); line-height: 1.9;
}

.card__icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--red-tint); color: var(--red-deep);
  display: grid; place-items: center;
  margin-bottom: 20px;
}
.card__icon--sage { background: var(--sage-tint); color: var(--sage); }
.card__icon--gold { background: #FEF6E4; color: #A9761A; }

/* Partner logo lockup, used instead of .card__icon where a real brand logo
   carries more credibility than an outline icon. No tinted box: these are
   full-colour logos and the tints made for monoline icons fight them.
   The container height is fixed so every card's heading starts on the same
   line no matter how tall its logo is. */
.card__logo {
  display: flex; align-items: center;
  height: 36px; margin-bottom: 20px;
}
.card__logo img { width: auto; max-width: 150px; }

/* Height is set by lockup structure, not by one shared number. A single line
   of type reads correctly at a smaller height than a two-line lockup, and a
   mark stacked above a wordmark needs more again, or its type turns to mush.
   Matching the bounding boxes instead would render SnapScan at 10px next to
   Woolworths at 25px. */
.card__logo--line  img { height: 22px; }  /* single line of type */
.card__logo--stack img { height: 28px; }  /* two-line lockup */
.card__logo--mark  img { height: 30px; }  /* square symbol, no type */

/* For a logo sitting beside its heading in a row rather than stacked above it. */
.card__logo--flush { margin-bottom: 0; flex: none; }

.card-link {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 18px;
  font-weight: 650; font-size: .93rem;
  color: var(--red-deep); text-decoration: none;
}
.card-link:hover { gap: 11px; }
.card-link svg { transition: transform .15s ease; }
/* The action inside a payment card. A filled pill rather than a text link, so
   it reads as something to press rather than something to read. Slightly
   tighter than a page-level .btn since it sits inside a card. */
.card__cta {
  margin-top: 20px;
  padding: 13px 22px;
  font-size: .94rem;
}
.card__cta svg { flex: none; }

/* ---------- Steps ---------- */
.steps { display: grid; gap: 20px; counter-reset: step; }
.step {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; gap: 22px;
  padding: 28px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.step__num {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--ink); color: #fff;
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.15rem;
  display: grid; place-items: center;
}
.step--urgent { border-color: rgba(237,31,39,.3); background: var(--red-tint); }
.step--urgent .step__num { background: var(--red-cta); }
.step h3 { margin-bottom: 8px; }
.step p { color: var(--muted); font-size: .98rem; }
.step p + p { margin-top: 10px; }

/* ---------- Callout ---------- */
.callout {
  border-left: 4px solid var(--red);
  background: var(--red-tint);
  padding: 22px 26px;
  border-radius: 0 var(--r) var(--r) 0;
}
.callout h4, .callout .h4 { color: var(--red-deep); margin-bottom: 7px; }
.callout p { font-size: .97rem; color: var(--ink-2); }
.callout--sage { border-left-color: var(--sage); background: var(--sage-tint); }
.callout--sage h4, .callout--sage .h4 { color: var(--sage); }
.callout--gold { border-left-color: var(--gold); background: #FEF9EF; }
.callout--gold h4, .callout--gold .h4 { color: #8A5D0C; }

/* Placeholder notice: visible on purpose for the POC */
.notice-poc {
  display: flex; gap: 14px; align-items: flex-start;
  background: #FFF8E6; border: 1px solid #F0D89B;
  border-radius: var(--r); padding: 16px 20px;
  font-size: .9rem; color: #6B5316; line-height: 1.6;
}
.notice-poc strong { color: #4A3A0F; }
.notice-poc svg { flex-shrink: 0; margin-top: 2px; color: #B58A20; }

/* Netlify Forms honeypot. Off-screen rather than display:none: present in
   the DOM and tab order-safe, but invisible to a real visitor. A bot that
   fills every input it finds will fill this one and get itself rejected. */
.hp-field {
  position: absolute;
  left: -5000px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---------- Split feature ---------- */
.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 76px); align-items: center;
}
/* Grid items default to min-width:auto, so a column refuses to shrink below
   its content's min-content width and blows out the container on narrow
   screens. min-width:0 lets it shrink. No effect where space is ample. */
.split > *, .grid > * { min-width: 0; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }
.split--reverse .split__media { order: 2; }
@media (max-width: 880px) { .split--reverse .split__media { order: 0; } }

.split__media img {
  width: 100%; border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}
.split__media { position: relative; }

.media-badge {
  position: absolute; bottom: -22px; left: -22px;
  background: #fff; border-radius: var(--r-lg);
  padding: 20px 24px; box-shadow: var(--shadow-lg);
  max-width: 230px;
}
.media-badge__num {
  font-family: var(--font-display);
  font-size: 2.1rem; font-weight: 700;
  color: var(--sage); line-height: 1; letter-spacing: -.03em;
}
.media-badge__text { margin-top: 6px; font-size: .85rem; color: var(--muted); line-height: 1.45; }
@media (max-width: 560px) { .media-badge { position: static; margin-top: 16px; max-width: none; } }

/* ---------- Donate ---------- */
.donate-panel {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: clamp(26px, 3vw, 38px);
  box-shadow: var(--shadow);
}
.amount-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; margin-bottom: 18px;
}
@media (max-width: 520px) { .amount-grid { grid-template-columns: repeat(2, 1fr); } }

.amount {
  position: relative;
  border: 2px solid var(--line); border-radius: var(--r);
  background: #fff; padding: 16px 12px;
  cursor: pointer; text-align: center;
  transition: border-color .15s ease, background-color .15s ease, transform .12s ease;
}
.amount:hover { border-color: var(--muted-soft); transform: translateY(-2px); }
.amount.is-selected { border-color: var(--red-cta); background: var(--red-tint); }
.amount__value {
  display: block; font-family: var(--font-display);
  font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em;
}
.amount__note { display: block; margin-top: 4px; font-size: .78rem; color: var(--muted); line-height: 1.4; }

.freq-toggle {
  display: inline-flex; background: var(--sand);
  border-radius: 100px; padding: 4px; margin-bottom: 22px;
}
.freq-toggle button {
  border: 0; background: transparent;
  padding: 11px 22px; border-radius: 100px;
  min-height: 44px;
  font-weight: 600; font-size: .92rem; cursor: pointer;
  color: var(--muted); transition: all .15s ease;
}
.freq-toggle button.is-active { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }

.impact-line {
  margin-top: 18px; padding: 15px 18px;
  background: var(--sage-tint); border-radius: var(--r);
  font-size: .93rem; color: #235A48; line-height: 1.55;
}

.pay-methods {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-top: 24px;
}
.pay-method {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px 16px; background: #fff;
  font-size: .92rem; font-weight: 600;
  text-decoration: none; color: var(--ink);
  transition: border-color .15s ease, transform .15s ease;
}
.pay-method:hover { border-color: var(--ink); transform: translateY(-2px); }
.pay-method small { display: block; font-weight: 400; color: var(--muted); font-size: .78rem; }

.bank-details {
  background: var(--ink); color: #fff;
  border-radius: var(--r-lg); padding: 30px;
}
.bank-details dl {
  display: grid; grid-template-columns: auto 1fr;
  gap: 10px 24px; margin: 18px 0 0; font-size: .95rem;
}

/* Label/value pairs, e.g. the contact page's fax and registration numbers.
   A class rather than an inline style so the mobile rules can restyle it. */
.detail-list {
  display: grid; grid-template-columns: auto 1fr;
  gap: 8px 20px; margin-top: 14px; font-size: .94rem;
}
.detail-list dt { color: var(--muted); }
.detail-list dd { margin: 0; font-weight: 600; }
.bank-details dt { color: rgba(255,255,255,.55); }
.bank-details dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Resources ---------- */
.resource {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.resource:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.resource__top {
  padding: 26px 26px 0;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.resource__tag {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line); border-radius: 100px;
  padding: 5px 11px; white-space: nowrap;
}
.resource__body { padding: 18px 26px 26px; flex: 1; display: flex; flex-direction: column; }
.resource__body p { color: var(--muted); font-size: .95rem; flex: 1; }
.resource__body h3 { margin-bottom: 10px; }

/* Short highlight bullets pulled from the real PDF. Not the full list, that
   lives in the document itself. flex:1 is left on the intro <p> above so it
   absorbs the leftover card height, keeping every card's button flush to
   the bottom of its row regardless of how many highlights it has. */
.resource__points {
  list-style: none; padding: 0; margin: 4px 0 14px;
  display: grid; gap: 8px;
}
.resource__points li {
  position: relative; padding-left: 16px;
  font-size: .87rem; line-height: 1.5; color: var(--ink-2);
}
.resource__points li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--red);
}

/* .resource__body p sets flex:1 with equal (class+tag) specificity, so the
   override here must match it on specificity or it silently loses. */
p.resource__meta {
  flex: none; font-size: .78rem; color: var(--muted-soft);
  margin: 0 0 14px;
}

/* ---------- Checklist ----------
   The marker is absolutely positioned rather than a grid/flex column: as a
   grid container each inline <strong> became its own grid item and jumped to
   a new line. Block layout keeps inline content flowing normally. */
.checklist { list-style: none; padding: 0; display: grid; gap: 14px; }
.checklist li {
  position: relative;
  padding-left: 36px;
  font-size: 1rem; line-height: 1.6;
}
.checklist li::before {
  content: '';
  position: absolute; left: 0; top: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--sage-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%232F7A62' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center no-repeat;
}
/* Numbered sequence, for MCSA's published "when your child goes missing" steps */
.step-list {
  list-style: none; padding: 0; margin: 0;
  counter-reset: steplist; display: grid; gap: 16px;
}
.step-list li {
  counter-increment: steplist;
  position: relative; padding-left: 50px;
  font-size: 1rem; line-height: 1.6;
  min-height: 34px;
}
.step-list li::before {
  content: counter(steplist);
  position: absolute; left: 0; top: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--red-cta); color: #fff;
  font-family: var(--font-display);
  font-weight: 700; font-size: .92rem;
  display: grid; place-items: center;
}

.checklist--warn li::before {
  background: var(--red-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23A51016' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center no-repeat;
}

/* ---------- Accordion ---------- */
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__trigger {
  width: 100%; background: transparent; border: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 4px; cursor: pointer; text-align: left;
  font-family: var(--font-display);
  font-size: 1.1rem; font-weight: 650; letter-spacing: -.015em;
  color: var(--ink);
}
.accordion__trigger:hover { color: var(--red-deep); }
.accordion__icon {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.accordion__trigger[aria-expanded="true"] .accordion__icon {
  transform: rotate(45deg); background: var(--ink); border-color: var(--ink); color: #fff;
}
.accordion__panel { display: none; padding: 0 4px 26px; }
.accordion__panel.is-open { display: block; }
.accordion__panel p { color: var(--muted); }
.accordion__panel p + p { margin-top: 12px; }
.accordion__panel ul { color: var(--muted); padding-left: 20px; margin-top: 10px; }
.accordion__panel li { margin-bottom: 7px; }

/* ---------- Forms ---------- */
.form-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .89rem; font-weight: 650; color: var(--ink-2); }
.field .req { color: var(--red); }
.field input, .field select, .field textarea {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 13px 15px; background: #fff;
  font-size: .97rem; width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--red-cta);
  box-shadow: 0 0 0 3px rgba(204,20,27,.12);
}
.field textarea { resize: vertical; min-height: 120px; }
.field__hint { font-size: .82rem; color: var(--muted); }

/* Amount field sitting inside a payment card rather than a full form. Narrower
   than a standard field so it reads as part of the card, not a form on its own. */
.field--inline-amount { margin-top: 18px; max-width: 190px; }
.field--inline-amount input { padding: 10px 13px; }

.fieldset-block {
  border: 0; padding: 0; margin: 0 0 34px;
}
.fieldset-block legend {
  font-family: var(--font-display);
  font-size: 1.2rem; font-weight: 700; letter-spacing: -.015em;
  padding: 0 0 6px; margin-bottom: 20px;
  width: 100%; border-bottom: 1px solid var(--line);
}
.fieldset-block legend span {
  display: inline-block; margin-right: 10px;
  color: var(--red); font-size: .95rem;
}

/* ---------- Helplines ---------- */
.helpline-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.helpline {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 20px; border-radius: var(--r);
  background: #fff; border: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
.helpline:hover { border-color: var(--ink); transform: translateY(-2px); }
.helpline__name { font-size: .93rem; font-weight: 600; }
.helpline__num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.02rem; color: var(--red-deep);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.section--ink .helpline { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); color: #fff; }
.section--ink .helpline:hover { border-color: #fff; }

/* .helpline__num was built for phone numbers, which should never break
   mid-number, hence nowrap. Contact's social-follow grid reuses the same
   component for handles like "MissingChildrenSouthAfrica": a single
   unbreakable word with no space to wrap on, which overflowed its card and
   visually spilled into the next one at ALL widths, not just narrow ones
   (the existing <420px fallback wasn't enough). Scoped to this grid only,
   so real phone-number helplines elsewhere keep their nowrap behaviour. */
.helpline-grid--handles .helpline { flex-wrap: wrap; }
.helpline-grid--handles .helpline__num { white-space: normal; overflow-wrap: anywhere; }
.section--ink .helpline__num { color: #FF8A8F; }

/* ---------- Cases (empty state) ---------- */
.case-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.case-card {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; background: #fff;
}
.case-card__photo {
  aspect-ratio: 3 / 4; background: var(--sand);
  display: grid; place-items: center; color: var(--muted-soft);
  position: relative;
}
.case-card__tmpl {
  position: absolute; top: 12px; left: 12px;
  background: var(--ink); color: #fff;
  font-size: .66rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 100px;
}
.case-card__body { padding: 18px 20px 22px; }
.case-card__body h3 { font-size: 1.05rem; }
.case-card__meta { margin-top: 10px; display: grid; gap: 5px; font-size: .86rem; color: var(--muted); }
.case-card__meta span { display: block; }
.skeleton-line {
  height: 10px; border-radius: 4px;
  background: var(--sand);
}

.empty-state {
  text-align: center; padding: clamp(48px, 7vw, 84px) 24px;
  border: 2px dashed var(--line); border-radius: var(--r-xl);
  background: var(--cream);
}
.empty-state__icon {
  width: 62px; height: 62px; margin: 0 auto 22px;
  border-radius: 50%; background: #fff;
  border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--muted-soft);
}
.empty-state h3 { margin-bottom: 12px; }
.empty-state p { color: var(--muted); max-width: 46ch; margin-inline: auto; }

/* ---------- Team ---------- */
.person { text-align: center; }
.person__avatar {
  width: 96px; height: 96px; margin: 0 auto 16px;
  border-radius: 50%; background: var(--sand);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.5rem; color: var(--muted-soft);
}
.person h4, .person .h4 { margin-bottom: 3px; }
.person p { font-size: .89rem; color: var(--muted); }

/* ---------- Timeline ---------- */
.timeline { position: relative; padding-left: 34px; }
.timeline::before {
  content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px;
  width: 2px; background: var(--line);
}
.timeline__item { position: relative; padding-bottom: 34px; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: ''; position: absolute; left: -34px; top: 6px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 3px solid var(--red);
}
.timeline__year {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.05rem; color: var(--red-deep); margin-bottom: 5px;
}
.timeline__item p { color: var(--muted); font-size: .97rem; }

/* ---------- CTA band ---------- */
.cta-band {
  /* --red-cta rather than pure brand red: white on #ED1F27 is only 4.35:1,
     which fails WCAG AA. #CC141B gives 5.7:1. */
  background: var(--red-cta);
  color: #fff;
  border-radius: var(--r-xl);
  padding: clamp(38px, 5vw, 64px);
  text-align: center;
}
.cta-band h2 { color: #fff; margin-bottom: 16px; }
.cta-band p {
  color: rgba(255,255,255,.93);
  max-width: 56ch; margin: 0 auto 30px;
  font-size: 1.1rem;
}
.cta-band .btn-row { justify-content: center; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink); color: rgba(255,255,255,.68);
  padding-top: clamp(56px, 7vw, 84px);
  font-size: .94rem;
}
.footer-grid {
  display: grid; gap: 40px;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  padding-bottom: 50px;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }

.site-footer h4, .site-footer .h4 {
  color: #fff; font-size: .8rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  margin-bottom: 18px;
}
.site-footer ul { list-style: none; padding: 0; display: grid; gap: 11px; }
.site-footer a { color: rgba(255,255,255,.68); text-decoration: none; transition: color .15s ease; }
.site-footer a:hover { color: #fff; }
.site-footer p { line-height: 1.7; }

.footer-emergency {
  background: rgba(237,31,39,.14);
  border: 1px solid rgba(237,31,39,.4);
  border-radius: var(--r); padding: 18px 20px; margin-top: 22px;
}
.footer-emergency span {
  display: block; font-size: .76rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.6); margin-bottom: 6px;
}
.footer-emergency a {
  font-family: var(--font-display); font-size: 1.35rem;
  font-weight: 700; color: #fff; letter-spacing: -.02em;
}

.socials { display: flex; gap: 10px; margin-top: 20px; }
.socials a {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  display: grid; place-items: center;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.socials a:hover { background: #fff; color: var(--ink); border-color: #fff; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-block: 26px;
  display: flex; flex-wrap: wrap; gap: 12px 28px;
  align-items: center; justify-content: space-between;
  font-size: .86rem; color: rgba(255,255,255,.5);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 20px; list-style: none; padding: 0; margin: 0; }

/* ==========================================================================
   Mobile refinements
   Components nest (wrap > card > callout), and each level adds horizontal
   padding. At 375px that left some text blocks only ~186px wide. These rules
   trim padding at the small end and stack the layouts that stayed side by
   side. Measure the rendered text width, not just document overflow: a page
   can report zero overflow and still be unreadable.
   ========================================================================== */
@media (max-width: 640px) {
  /* Reclaim 8px on each edge for every component on the page */
  .wrap, .wrap-narrow { padding-inline: 20px; }

  .card, .card--roomy, .card--compact { padding: 24px 20px; }
  .callout { padding: 18px 20px; }
  .ordered-steps { padding-left: 18px; }
  .donate-panel { padding: 22px 18px; }
  .bank-details { padding: 24px 20px; }

  /* The 46px number plus 22px gap squeezed step text to 186px. Stack it. */
  .step { grid-template-columns: 1fr; gap: 14px; padding: 24px 20px; }
  .step__num { width: 40px; height: 40px; font-size: 1.05rem; }

  /* Two-column definition lists get cramped; stack label above value */
  .bank-details dl, .detail-list { grid-template-columns: 1fr; gap: 2px; }
  .bank-details dt, .detail-list dt { margin-top: 12px; }
  .bank-details dt:first-child, .detail-list dt:first-child { margin-top: 0; }

  .resource__top { padding: 22px 20px 0; }
  .resource__body { padding: 16px 20px 22px; }

  .step-list li { padding-left: 44px; }
  .accordion__panel ul { padding-left: 18px; }

  /* Long email addresses in contact cards need to be able to break */
  .pay-method small { word-break: break-word; }

  /* Buttons are nowrap by default, which pushes long labels past the screen.
     Let them wrap rather than overflow, and trim the large variant. */
  .btn { white-space: normal; }
  .btn--lg { padding: 17px 24px; font-size: 1rem; }

  .cta-band { padding: 34px 22px; }
  .cta-band p { font-size: 1.02rem; }
}

/* Smallest phones still in use, e.g. iPhone SE 1st gen and budget Android,
   which matter for a South African audience. Trim nested padding again so
   text inside a callout inside a card still has usable width. */
@media (max-width: 380px) {
  .card, .card--roomy, .card--compact { padding: 20px 16px; }
  .callout { padding: 16px 16px; }
  .cta-band { padding: 30px 18px; }
  .step { padding: 20px 16px; }
}

/* Helpline rows put a label and a value on one line. The value is nowrap so
   phone numbers never split mid-number, but the social handles are long
   unbreakable strings. Below this width, stack them and allow wrapping;
   the value then has the full row and numbers still never break. */
@media (max-width: 420px) {
  .helpline { flex-direction: column; align-items: flex-start; gap: 6px; }
  .helpline__num { white-space: normal; overflow-wrap: anywhere; }
}

/* ---------- Modal (card payment / Paysoft Impact) ----------
   The iframe is sized generously but not to Paysoft's own suggested
   1400x2050: that assumes a full inline embed, not a popup. Paysoft told us
   the form itself reflows responsively, so width stays 100% and the modal
   body scrolls if the form is taller than the visible area, rather than
   clipping it. box-sizing + border:0 on the iframe specifically guards
   against the "some website builders' border settings cause mobile issues"
   warning their support team flagged. */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(18, 22, 28, .6);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.modal-overlay.is-open { opacity: 1; pointer-events: auto; }
.modal-overlay[hidden] { display: none; }
body.modal-open { overflow: hidden; }

.modal {
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: 760px; max-height: 90vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: translateY(12px);
  transition: transform .2s ease;
}
.modal-overlay.is-open .modal { transform: none; }

.modal__header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.modal__header h3 { margin: 0; font-size: 1.1rem; }
.modal__close {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none;
  background: none; border: 0; border-radius: 999px;
  color: var(--muted); cursor: pointer;
}
.modal__close:hover { background: var(--sand); color: var(--ink); }

.modal__body { overflow-y: auto; flex: 1; }
.modal__iframe-wrap { width: 100%; box-sizing: border-box; }
.modal__iframe-wrap iframe {
  display: block; width: 100%; height: 640px; border: 0;
}
@media (min-width: 640px) {
  .modal__iframe-wrap iframe { height: 820px; }
}

.modal__footer-note {
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  font-size: .85rem; color: var(--muted);
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- Utilities ---------- */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 12px; }
.mt-2 { margin-top: 22px; }
.mt-3 { margin-top: 34px; }
.mt-4 { margin-top: 48px; }
.mb-2 { margin-bottom: 22px; }
.mb-3 { margin-bottom: 34px; }
.text-center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: .88rem; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Long-form legal / prose ---------- */
/* Used by privacy-terms.html. Constrained measure so body copy stays
   readable, with the same vertical rhythm as the rest of the site. */
.prose { max-width: var(--wrap-narrow); }
.prose h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  letter-spacing: -.02em;
  margin: 44px 0 6px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 {
  font-size: 1.09rem;
  margin: 30px 0 8px;
  color: var(--ink);
}
.prose p { color: var(--muted); margin-bottom: 14px; }
.prose p strong { color: var(--ink-2); }
.prose .checklist { margin: 12px 0 18px; }
.prose a { color: var(--red-deep); }