/* ============================================================
   MEA UK — Donor Portal revamp
   Maasai beadwork palette · light + dark themes
   ============================================================ */

:root {
  /* Maasai beadwork palette */
  --bone:      #F6F1E7;
  --bone-2:    #FBF8F1;
  --card:      #FFFFFF;
  --ink:       #221C17;
  --ink-soft:  #5A4F45;
  --line:      #E4DBCB;
  --red:       #C0392B;   /* shuka red — primary action */
  --red-deep:  #9E2A20;
  --blue:      #1F4E9B;   /* rift cobalt */
  --green:     #356A4C;   /* acacia */
  --ochre:     #E4A93A;   /* savanna gold */
  --ochre-2:   #F0C260;

  --shadow:    0 1px 2px rgba(34,28,23,.06), 0 12px 28px -14px rgba(34,28,23,.28);
  --shadow-sm: 0 1px 2px rgba(34,28,23,.05), 0 6px 14px -10px rgba(34,28,23,.25);
  --radius:    14px;
  --radius-lg: 22px;

  --display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --maxw: 1140px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bone:     #181310;
    --bone-2:   #201914;
    --card:     #241C16;
    --ink:      #F3EADD;
    --ink-soft: #B6A895;
    --line:     #3A2F26;
    --red:      #E05B4C;
    --red-deep: #C0392B;
    --blue:     #5A87D6;
    --green:    #5CA079;
    --ochre:    #EEB94F;
    --ochre-2:  #F6D083;
    --shadow:   0 1px 2px rgba(0,0,0,.4), 0 18px 40px -18px rgba(0,0,0,.7);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 8px 18px -12px rgba(0,0,0,.6);
  }
}
/* Explicit toggle overrides — must win in both directions */
:root[data-theme="light"] {
  --bone:#F6F1E7; --bone-2:#FBF8F1; --card:#FFFFFF; --ink:#221C17; --ink-soft:#5A4F45;
  --line:#E4DBCB; --red:#C0392B; --red-deep:#9E2A20; --blue:#1F4E9B; --green:#356A4C;
  --ochre:#E4A93A; --ochre-2:#F0C260;
  --shadow:0 1px 2px rgba(34,28,23,.06), 0 12px 28px -14px rgba(34,28,23,.28);
  --shadow-sm:0 1px 2px rgba(34,28,23,.05), 0 6px 14px -10px rgba(34,28,23,.25);
}
:root[data-theme="dark"] {
  --bone:#181310; --bone-2:#201914; --card:#241C16; --ink:#F3EADD; --ink-soft:#B6A895;
  --line:#3A2F26; --red:#E05B4C; --red-deep:#C0392B; --blue:#5A87D6; --green:#5CA079;
  --ochre:#EEB94F; --ochre-2:#F6D083;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -18px rgba(0,0,0,.7);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 8px 18px -12px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Anchored sections land below the 68px sticky header instead of under it */
:where(#top, #impact, #pillars, #give, #story, #journeys, #partners) { scroll-margin-top: 84px; }
body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3 { font-family: var(--display); font-weight: 700; line-height: 1.08; text-wrap: balance; margin: 0; }
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; display: block; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.eyebrow {
  font-family: var(--sans); font-size: .74rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--red);
  display: inline-flex; align-items: center; gap: .55em;
}
.eyebrow::before { content:""; width: 26px; height: 2px; background: var(--red); display:inline-block; }

/* ---------- Signature: Maasai beadwork band ---------- */
.beadwork {
  height: 16px;
  width: 100%;
  background:
    repeating-linear-gradient(90deg,
      var(--red)   0 13px, var(--bone-2) 13px 15px,
      var(--blue)  15px 28px, var(--bone-2) 28px 30px,
      var(--ochre) 30px 43px, var(--bone-2) 43px 45px,
      var(--green) 45px 58px, var(--bone-2) 58px 60px);
  background-size: 60px 100%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(0,0,0,.12);
}
.beadwork.tall { height: 22px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content:center; gap: .5em;
  font-family: var(--sans); font-weight: 700; font-size: .98rem;
  padding: 14px 26px; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--red); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { transform: translateY(-2px); background: var(--red-deep); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { transform: translateY(-2px); background: var(--ink); color: var(--bone); }
.btn-outline-light { background: rgba(255,255,255,.1); color:#fff; border-color: rgba(255,255,255,.7); }
.btn-outline-light:hover { background:#fff; color: var(--ink); }
.btn-sm { padding: 10px 18px; font-size: .88rem; }
.btn:focus-visible, a:focus-visible, .tier:focus-visible { outline: 3px solid var(--ochre); outline-offset: 3px; }

/* ---------- Header ---------- */
header.site {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bone) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: 22px; height: 68px; }
.brand { display: flex; align-items: center; text-decoration: none; margin-right: auto; }
.brand img { height: 40px; width: auto; display: block; }
/* Keep the dark-blue logo legible on the dark header (media-query default + explicit toggle) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand img { background:#fff; padding:5px 9px; border-radius:8px; box-shadow: var(--shadow-sm); }
}
:root[data-theme="dark"] .brand img { background:#fff; padding:5px 9px; border-radius:8px; box-shadow: var(--shadow-sm); }
:root[data-theme="light"] .brand img { background:none; padding:0; box-shadow:none; }
.nav-links { display: flex; gap: 24px; align-items: center; }
.nav-links a { text-decoration: none; font-size: .92rem; font-weight: 600; color: var(--ink-soft); }
.nav-links a:hover { color: var(--ink); }
.nav-cta { display:flex; align-items:center; gap: 12px; }
.theme-toggle {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card); cursor: pointer; display: grid; place-items: center; color: var(--ink);
  font-size: 1rem;
}
.menu-btn { display: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor:pointer; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; padding: 74px 0 40px; }
.hero h1 { font-size: clamp(2.5rem, 5.4vw, 4.2rem); letter-spacing: -.01em; }
.hero h1 .l1 { color: var(--ink); }
.hero h1 .l2 { color: var(--red); }
.hero h1 .l3 { color: var(--green); }
.hero-sub { margin-top: 22px; font-size: 1.12rem; color: var(--ink-soft); max-width: 34ch; }
.hero-cta { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero-note { margin-top: 18px; font-size: .82rem; color: var(--ink-soft); display:flex; align-items:center; gap:8px; }
.hero-note b { color: var(--ink); }

/* Hero visual — savanna + acacia + labelled photo slot */
.hero-visual {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 4 / 3.4; box-shadow: var(--shadow);
  background:
    radial-gradient(120% 90% at 70% 10%, #F4C877 0%, #E9A94A 32%, #D0863A 62%, #9E5A2E 100%);
}
.hero-visual .sun { position: absolute; top: 12%; right: 16%; width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle, #FFF3D6, #FBD98A 60%, rgba(251,217,138,0) 72%); }
.hero-visual svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-visual .slot {
  position: absolute; left: 18px; bottom: 18px; right: 18px;
  background: rgba(26,19,16,.62); color: #fff; backdrop-filter: blur(3px);
  border: 1px dashed rgba(255,255,255,.5); border-radius: 12px;
  padding: 12px 14px; font-size: .8rem; line-height: 1.35;
}
.hero-visual .slot b { display:block; font-family: var(--display); font-size: .96rem; margin-bottom: 2px; }
.hero-badge {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  background: var(--card); color: var(--ink); border-radius: 12px; box-shadow: var(--shadow-sm);
  padding: 8px 13px; font-size: .74rem; font-weight: 700; display:flex; align-items:center; gap: 8px;
}
.hero-badge .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 25%, transparent); }

/* ---------- Trust bar ---------- */
.trust { background: var(--ink); color: var(--bone); }
.trust .wrap { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; padding: 16px 24px; justify-content: center; }
.trust .charity { font-weight: 700; font-size: .92rem; display:flex; align-items:center; gap: 10px; }
.trust .charity .num { font-family: var(--display); color: var(--ochre-2); font-size: 1.05rem; letter-spacing: .02em; }
.trust .badge { display: flex; align-items: center; gap: 9px; font-size: .86rem; color: color-mix(in srgb, var(--bone) 78%, transparent); }
.trust .badge svg { width: 20px; height: 20px; flex: none; color: var(--ochre-2); }
.trust .sep { width: 1px; height: 22px; background: rgba(255,255,255,.16); }

/* ---------- Sections ---------- */
section { padding: 78px 0; }
.sec-head { max-width: 640px; margin-bottom: 42px; }
.sec-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-top: 14px; }
.sec-head p { margin-top: 14px; color: var(--ink-soft); font-size: 1.06rem; }
.sec-head.center { margin-left:auto; margin-right:auto; text-align:center; }
.sec-head.center .eyebrow { justify-content:center; }

/* Impact matrix */
.impact { background: var(--bone-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.stat::before { content:""; position:absolute; left:0; top:0; bottom:0; width: 5px; }
.stat.c1::before { background: var(--red); }
.stat.c2::before { background: var(--blue); }
.stat.c3::before { background: var(--green); }
.stat.c4::before { background: var(--ochre); }
.stat .num { font-family: var(--display); font-weight: 700; font-size: clamp(2.1rem, 4vw, 2.9rem); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.stat .unit { font-size: 1.1rem; color: var(--ink-soft); font-family: var(--display); }
.stat .lbl { margin-top: 8px; font-size: .9rem; color: var(--ink-soft); line-height: 1.4; }

/* Pillars */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pillar { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform .14s ease, box-shadow .14s ease; }
.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.pillar .top { height: 128px; position: relative; display:grid; place-items:center; }
.pillar.p1 .top { background: linear-gradient(135deg, #C0392B, #7E241B); }
.pillar.p2 .top { background: linear-gradient(135deg, #1F4E9B, #143567); }
.pillar.p3 .top { background: linear-gradient(135deg, #356A4C, #E4A93A); }
.pillar .top svg { width: 52px; height: 52px; color: #fff; opacity: .95; }
.pillar .body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pillar h3 { font-size: 1.32rem; }
.pillar p { color: var(--ink-soft); font-size: .96rem; }
.pillar .foot { margin-top: auto; padding-top: 8px; }
.pillar .link { font-weight: 700; color: var(--red); text-decoration: none; font-size: .94rem; display:inline-flex; align-items:center; gap:6px; }
.pillar .link:hover { gap: 10px; }
.chip { align-self:flex-start; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }

/* Giving tiers */
.giving { background: var(--bone-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.give-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 34px; align-items: start; }
.tiers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.tier {
  text-align: left; background: var(--card); border: 2px solid var(--line); border-radius: var(--radius);
  padding: 18px; cursor: pointer; font: inherit; color: inherit; transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease; position: relative;
}
.tier:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.tier[aria-pressed="true"] { border-color: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 18%, transparent); }
.tier .amt { font-family: var(--display); font-weight: 700; font-size: 1.7rem; }
.tier .amt small { font-size: .78rem; font-family: var(--sans); font-weight: 700; color: var(--ink-soft); }
.tier .buys { margin-top: 6px; font-size: .88rem; color: var(--ink-soft); }
.tier .tick { position: absolute; top: 14px; right: 14px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; }
.tier[aria-pressed="true"] .tick { background: var(--red); border-color: var(--red); }
.tier[aria-pressed="true"] .tick svg { color:#fff; width: 12px; height: 12px; }
.tier .tick svg { width: 0; }

.give-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-sm); position: sticky; top: 88px; }
.give-panel h3 { font-size: 1.3rem; }
.give-readout { margin: 16px 0; padding: 18px; border-radius: var(--radius); background: var(--bone-2); border: 1px solid var(--line); }
.give-readout .big { font-family: var(--display); font-size: 2.4rem; font-weight: 700; color: var(--red); font-variant-numeric: tabular-nums; }
.give-readout .cadence { color: var(--ink-soft); font-weight: 700; font-size: .9rem; }
.give-readout .impact-line { margin-top: 8px; font-size: .92rem; color: var(--ink-soft); min-height: 2.6em; }
.giftaid { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0; font-size: .86rem; color: var(--ink-soft); }
.giftaid input { margin-top: 3px; accent-color: var(--green); width: 17px; height: 17px; }
.giftaid b { color: var(--green); }
.pay { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.pay span { font-size: .72rem; font-weight: 700; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 7px; padding: 6px 10px; background: var(--bone-2); }

/* Story */
.story-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 40px; align-items: center; }
.story-photo { border-radius: var(--radius-lg); aspect-ratio: 4/4.4; position: relative; overflow: hidden; box-shadow: var(--shadow); background: linear-gradient(150deg, #2E5539, #7C9A50 55%, #E4A93A); }
.story-photo .slot { position:absolute; left:16px; right:16px; bottom:16px; background: rgba(26,19,16,.6); color:#fff; border:1px dashed rgba(255,255,255,.5); border-radius: 12px; padding: 11px 13px; font-size: .78rem; backdrop-filter: blur(3px); }
.story-photo .slot b { font-family: var(--display); display:block; font-size:.92rem; }
.story blockquote { font-family: var(--display); font-size: clamp(1.5rem,2.6vw,2.05rem); line-height: 1.28; margin: 18px 0 0; }
.story .quote-mark { font-family: var(--display); color: var(--ochre); font-size: 3.4rem; line-height: .4; }
.story cite { display:block; margin-top: 22px; font-style: normal; font-size: .92rem; color: var(--ink-soft); }
.story cite b { color: var(--ink); font-style: normal; }

/* Journeys */
.journeys { display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.journey { border:1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; background: var(--card); box-shadow: var(--shadow-sm); }
.journey .kicker { font-size: .74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-soft); }
.journey h3 { font-size: 1.18rem; margin-top: 6px; }
.journey ol { margin: 16px 0 0; padding: 0; list-style: none; display:flex; flex-direction: column; gap: 12px; counter-reset: step; }
.journey li { display:flex; gap: 12px; font-size: .92rem; color: var(--ink-soft); }
.journey li::before { counter-increment: step; content: counter(step); flex:none; width: 26px; height: 26px; border-radius: 50%; background: var(--bone-2); border:1px solid var(--line); color: var(--ink); font-weight:700; font-size: .82rem; display:grid; place-items:center; }
.journey strong { color: var(--ink); }

/* Partners */
.partners { background: var(--bone-2); border-top: 1px solid var(--line); border-bottom:1px solid var(--line); }
.plogos { display:grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 8px; }
.plogo { border:1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 24px 16px; text-align:center; font-family: var(--display); font-weight:700; font-size: 1.05rem; color: var(--ink-soft); box-shadow: var(--shadow-sm); }
.plogo small { display:block; font-family: var(--sans); font-weight:700; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-soft); opacity:.75; margin-top:4px; }

/* Final CTA */
.final { background: linear-gradient(135deg, var(--red-deep), var(--red) 55%, var(--ochre)); color:#fff; text-align:center; }
.final h2 { color:#fff; font-size: clamp(2rem,4vw,3rem); }
.final p { color: rgba(255,255,255,.9); max-width: 46ch; margin: 16px auto 0; }
.final .hero-cta { justify-content:center; margin-top: 28px; }

/* Footer */
footer.site { background: var(--ink); color: color-mix(in srgb, var(--bone) 82%, transparent); padding: 56px 0 30px; }
.fgrid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; }
footer.site h4 { font-family: var(--sans); font-size: .78rem; letter-spacing:.14em; text-transform:uppercase; color: var(--ochre-2); margin: 0 0 14px; }
footer.site a { color: color-mix(in srgb, var(--bone) 80%, transparent); text-decoration:none; font-size:.92rem; display:block; padding: 4px 0; }
footer.site a:hover { color:#fff; }
.foot-brand b { font-family: var(--display); font-size: 1.2rem; color:#fff; }
.foot-brand p { font-size:.9rem; margin-top:10px; max-width: 30ch; }
.foot-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 40px; padding-top: 20px; display:flex; gap: 16px; justify-content: space-between; flex-wrap: wrap; font-size: .82rem; color: color-mix(in srgb, var(--bone) 60%, transparent); }

.note-banner { background: color-mix(in srgb, var(--ochre) 20%, var(--bone)); border-bottom:1px solid var(--line); font-size:.8rem; color: var(--ink-soft); text-align:center; padding: 8px 24px; }
.note-banner b { color: var(--ink); }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* Responsive */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 30px; padding-top: 48px; }
  .hero-sub { max-width: none; }
  .stats { grid-template-columns: repeat(2,1fr); }
  .pillars { grid-template-columns: 1fr; }
  .give-grid { grid-template-columns: 1fr; }
  .give-panel { position: static; }
  .story-grid { grid-template-columns: 1fr; }
  .journeys { grid-template-columns: 1fr; }
  .plogos { grid-template-columns: repeat(2,1fr); }
  .fgrid { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
  .menu-btn { display: grid; place-items:center; }
  .nav-links.open { display: flex; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; background: var(--bone-2); border-bottom: 1px solid var(--line); padding: 14px 24px; gap: 6px; }
  .nav-links.open a { padding: 8px 0; }
}
@media (max-width: 560px) {
  .stats { grid-template-columns: 1fr; }
  .tiers { grid-template-columns: 1fr; }
  .fgrid { grid-template-columns: 1fr; }
  .trust .sep { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}