/* ==========================================================================
   KENYA SIDE-BY-SIDE CHURCH INTERNATIONAL — DESIGN SYSTEM
   Signature motif: "Small Beginnings" — a growing root/branch line, echoing
   the ministry's founding under a mango tree (1999) and Zechariah 4:10.
   ========================================================================== */

/* ---------- Design Tokens ---------- */
:root{
  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Karla", "Segoe UI", system-ui, sans-serif;

  /* Light theme (default) — warm ivory paper, indigo ink, sun-gold + acacia
     + clay-brick accents drawn from the ministry's own logo and buildings */
  --bg: #F8F4EA;
  --bg-alt: #F1EADA;
  --surface: #FFFFFF;
  --surface-2: #FBF8F1;
  --ink: #1B2A38;
  --ink-soft: #4A5A68;
  --ink-faint: #7C8A96;
  --border: rgba(27,42,56,0.12);
  --border-strong: rgba(27,42,56,0.22);
  --gold: #B9822B;
  --gold-soft: #E7C878;
  --green: #2E5232;
  --green-soft: #8FAE8B;
  --clay: #A8602F;
  --clay-soft: #D9A57C;
  --overlay-scrim: linear-gradient(180deg, rgba(14,20,26,.15) 0%, rgba(14,20,26,.55) 100%);
  --shadow-sm: 0 1px 2px rgba(27,42,56,.06), 0 1px 1px rgba(27,42,56,.04);
  --shadow-md: 0 8px 24px rgba(27,42,56,.10);
  --shadow-lg: 0 24px 64px rgba(27,42,56,.16);
  --focus-ring: 0 0 0 3px rgba(185,130,43,.45);

  /* Motion tokens */
  --ease-out: cubic-bezier(.19,1,.22,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: 180ms;
  --dur-med: 420ms;
  --dur-slow: 900ms;
  --dur-cinematic: 9000ms;

  /* Spacing scale (8px base) */
  --sp-1: .5rem;
  --sp-2: .75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2.25rem;
  --sp-6: 3.5rem;
  --sp-7: 5.5rem;
  --sp-8: 8.5rem;

  /* Layout */
  --container: 1240px;
  --container-narrow: 800px;
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --nav-h: 84px;

  color-scheme: light;
}

[data-theme="dark"]{
  --bg: #0E1620;
  --bg-alt: #121C27;
  --surface: #16212C;
  --surface-2: #1B2732;
  --ink: #F2EEE3;
  --ink-soft: #C6CDD5;
  --ink-faint: #8C97A2;
  --border: rgba(242,238,227,0.12);
  --border-strong: rgba(242,238,227,0.22);
  --gold: #E3B255;
  --gold-soft: #F3D793;
  --green: #7FA57E;
  --green-soft: #4C6B4E;
  --clay: #D08A5C;
  --clay-soft: #8A5738;
  --overlay-scrim: linear-gradient(180deg, rgba(6,9,13,.35) 0%, rgba(6,9,13,.78) 100%);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 8px 24px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 70px rgba(0,0,0,.6);
  --focus-ring: 0 0 0 3px rgba(227,178,85,.5);
  color-scheme: dark;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background var(--dur-med) var(--ease-in-out), color var(--dur-med) var(--ease-in-out);
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
h1,h2,h3,h4{ font-family: var(--font-display); color: var(--ink); line-height:1.12; margin:0 0 var(--sp-3); font-weight: 600; }
p{ margin:0 0 var(--sp-3); color: var(--ink-soft); }
a{ color: inherit; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; }
:focus-visible{ outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }

.container{ max-width: var(--container); margin-inline:auto; padding-inline: var(--sp-4); }
.container--narrow{ max-width: var(--container-narrow); }

.skip-link{
  position:fixed; top:-100px; left:var(--sp-3); z-index:1000;
  background: var(--ink); color: var(--bg); padding: .8rem 1.2rem; border-radius: var(--radius-sm);
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus{ top: var(--sp-3); }

/* ---------- Typography helpers ---------- */
.eyebrow{
  font-family: var(--font-body); font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  font-size:.78rem; color: var(--gold); display:inline-flex; align-items:center; gap:.6rem; margin-bottom: var(--sp-2);
}
.eyebrow::before{ content:""; width:22px; height:1.5px; background: var(--gold); display:inline-block; }
.heading-xl{ font-size: clamp(2.6rem, 6vw, 5rem); letter-spacing:-.01em; }
.heading-lg{ font-size: clamp(2.1rem, 4.2vw, 3.4rem); letter-spacing:-.01em; }
.heading-md{ font-size: clamp(1.5rem, 2.6vw, 2rem); }
.lede{ font-size: 1.2rem; color: var(--ink-soft); max-width: 62ch; }
.italic{ font-style: italic; }
.text-gold{ color: var(--gold); }
.text-green{ color: var(--green); }
.scripture{
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem); color: var(--ink); line-height:1.5;
}
.scripture cite{ display:block; font-style:normal; font-family: var(--font-body); font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; color: var(--gold); margin-top: var(--sp-2); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding: .95rem 1.7rem; border-radius: 999px; font-weight:700; font-size: .95rem;
  border: 1.5px solid transparent; cursor:pointer; text-decoration:none;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }
.btn-primary{ background: var(--gold); color:#221605; box-shadow: var(--shadow-sm); }
.btn-primary:hover{ box-shadow: var(--shadow-md); }
.btn-outline{ background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn-outline:hover{ border-color: var(--gold); color: var(--gold); }
.btn-ghost-inverse{ background: rgba(255,255,255,.08); color:#fff; border-color: rgba(255,255,255,.5); backdrop-filter: blur(6px); }
.btn-ghost-inverse:hover{ background: rgba(255,255,255,.18); border-color:#fff; }
.btn-sm{ padding:.6rem 1.1rem; font-size:.85rem; }
.btn svg{ width:18px; height:18px; }

/* ---------- Header / Nav ---------- */
.site-header{
  position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: 500;
  display:flex; align-items:center;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-med), background var(--dur-med), box-shadow var(--dur-med);
}
.site-header.is-scrolled{ border-color: var(--border); box-shadow: var(--shadow-sm); }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap: var(--sp-4); }
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.brand img{ height: 44px; width:auto; }
.brand-word{ font-family: var(--font-display); font-weight:600; font-size:1.05rem; line-height:1.1; color: var(--ink); }
.brand-word small{ display:block; font-family: var(--font-body); font-weight:600; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color: var(--gold); margin-top:.15rem; }
.header-actions{ display:flex; align-items:center; gap: var(--sp-3); }

/* Theme toggle */
.theme-toggle{
  position:relative; width:52px; height:30px; border-radius:999px; border:1px solid var(--border-strong);
  background: var(--surface-2); cursor:pointer; padding:0; flex-shrink:0;
}
.theme-toggle .knob{
  position:absolute; top:2px; left:2px; width:24px; height:24px; border-radius:50%;
  background: var(--gold); display:flex; align-items:center; justify-content:center; color:#221605;
  transition: transform var(--dur-med) var(--ease-in-out);
}
[data-theme="dark"] .theme-toggle .knob{ transform: translateX(22px); }
.theme-toggle svg{ width:14px; height:14px; }

/* Hamburger */
.nav-toggle{
  width:52px; height:52px; border-radius:50%; border:1px solid var(--border-strong); background: var(--surface-2);
  display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; z-index: 620;
}
.nav-toggle .bars{ position:relative; width:20px; height:14px; }
.nav-toggle .bars span{
  position:absolute; left:0; width:100%; height:2px; background: var(--ink); border-radius:2px;
  transition: transform var(--dur-med) var(--ease-in-out), opacity var(--dur-fast);
}
.nav-toggle .bars span:nth-child(1){ top:0; }
.nav-toggle .bars span:nth-child(2){ top:6px; }
.nav-toggle .bars span:nth-child(3){ top:12px; }
.nav-open .nav-toggle .bars span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle .bars span:nth-child(2){ opacity:0; }
.nav-open .nav-toggle .bars span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* Fullscreen overlay nav */
.nav-overlay{
  position:fixed; inset:0; z-index:600; visibility:hidden; opacity:0;
  transition: opacity var(--dur-med) var(--ease-in-out), visibility 0s linear var(--dur-med);
  display:flex; overflow-y:auto;
}
.nav-open .nav-overlay{ visibility:visible; opacity:1; transition-delay:0s; }
.nav-overlay-bg{
  position:absolute; inset:0; background: var(--bg);
}
.nav-overlay-bg::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image: url('../images/church-network-gathering.jpg');
  background-size:cover; background-position:center;
  filter: saturate(.4) blur(1px);
  mask-image: radial-gradient(circle at 82% 18%, rgba(0,0,0,.55), transparent 55%);
}
[data-theme="dark"] .nav-overlay-bg::before{ opacity:.28; }
.nav-overlay-bg::after{ content:""; position:absolute; inset:0; background: color-mix(in srgb, var(--bg) 84%, transparent); }
.nav-panel{ position:relative; z-index:2; margin:auto; width:100%; max-width:1100px; padding: calc(var(--nav-h) + var(--sp-6)) var(--sp-4) var(--sp-6); display:grid; grid-template-columns: 1.3fr .7fr; gap: var(--sp-6); }
.nav-links{ display:flex; flex-direction:column; gap:.2rem; }
.nav-links a{
  font-family: var(--font-display); font-size: clamp(1.35rem, 3.1vw, 2.05rem); text-decoration:none; color: var(--ink-faint);
  padding:.2em 0; display:flex; align-items:baseline; gap:.6rem; position:relative;
  transform: translateY(18px); opacity:0; transition: color var(--dur-fast), transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out);
}
.nav-open .nav-links a{ transform:translateY(0); opacity:1; }
.nav-links a .idx{ font-family: var(--font-body); font-size:.9rem; color: var(--gold); font-weight:700; }
.nav-links a:hover, .nav-links a:focus-visible, .nav-links a.is-active{ color: var(--ink); }
.nav-links a.is-active::after{ content:""; position:absolute; left:0; bottom:.18em; height:3px; width:38px; background: var(--gold); border-radius:2px; }
.nav-aside{ align-self:end; display:flex; flex-direction:column; gap: var(--sp-4); color: var(--ink-soft); }
.nav-aside .scripture{ font-size:1.05rem; }
.nav-aside .aside-block h4{ font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color: var(--gold); font-family: var(--font-body); margin-bottom:.4rem; }
.nav-aside a.aside-link{ text-decoration:none; color: var(--ink-soft); display:block; padding:.15rem 0; }
.nav-aside a.aside-link:hover{ color: var(--gold); }

/* Scroll progress — styled as a growing branch, the site's signature motif */
.scroll-progress{ position:fixed; top:0; left:0; height:3px; width:100%; z-index:700; background: transparent; pointer-events:none; }
.scroll-progress-bar{ height:100%; width:0%; background: linear-gradient(90deg, var(--green), var(--gold)); transform-origin:left; transition: width 80ms linear; }

/* ---------- Hero ---------- */
.hero{ position:relative; height:100svh; min-height:560px; display:flex; align-items:flex-end; overflow:hidden; }
.hero-track{ position:absolute; inset:0; }
.hero-slide{
  position:absolute; inset:0; opacity:0; transform: scale(1.08);
  transition: opacity 1600ms var(--ease-in-out);
  background-size:cover; background-position:center;
}
.hero-slide.is-active{ opacity:1; animation: kenburns var(--dur-cinematic) var(--ease-in-out) forwards; }
@keyframes kenburns{ from{ transform: scale(1.1) translate(0,0);} to{ transform: scale(1) translate(-1%,-1%);} }
@media (prefers-reduced-motion: reduce){ .hero-slide.is-active{ animation:none; transform:scale(1);} }
.hero-scrim{ position:absolute; inset:0; background: var(--overlay-scrim); }
.hero-grain{ position:absolute; inset:0; opacity:.05; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero-content{ position:relative; z-index:2; width:100%; padding: 0 0 var(--sp-7); color:#fff; }
.hero-content .eyebrow{ color: var(--gold-soft); }
.hero-content .eyebrow::before{ background: var(--gold-soft); }
.hero-title{ font-size: clamp(2.8rem, 7vw, 5.6rem); color:#fff; text-shadow: 0 2px 30px rgba(0,0,0,.25); max-width: 16ch; }
.hero-sub{ color: rgba(255,255,255,.86); font-size: clamp(1.05rem, 1.6vw, 1.3rem); max-width:56ch; margin-bottom: var(--sp-5); }
.hero-cta{ display:flex; flex-wrap:wrap; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.hero-meta{ display:flex; flex-wrap:wrap; gap: var(--sp-5); border-top:1px solid rgba(255,255,255,.25); padding-top: var(--sp-4); }
.hero-meta div{ }
.hero-meta strong{ display:block; font-family: var(--font-display); font-size:1.5rem; color:#fff; }
.hero-meta span{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color: rgba(255,255,255,.7); }
.scroll-cue{
  position:absolute; right: var(--sp-4); bottom: var(--sp-5); z-index:2; color:#fff; writing-mode: vertical-rl;
  display:flex; align-items:center; gap:.6rem; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; text-decoration:none; opacity:.85;
}
.scroll-cue .line{ width:1.5px; height:52px; background: rgba(255,255,255,.55); position:relative; overflow:hidden; }
.scroll-cue .line::after{ content:""; position:absolute; top:-100%; left:0; width:100%; height:100%; background:#fff; animation: cue-fall 2.2s var(--ease-in-out) infinite; }
@keyframes cue-fall{ to{ top:100%; } }

/* ---------- Sections ---------- */
section{ position:relative; padding: var(--sp-8) 0; }
.section-alt{ background: var(--bg-alt); }
.section-head{ max-width: 720px; margin-bottom: var(--sp-6); }
.section-head.center{ margin-inline:auto; text-align:center; }
.reveal{ opacity:0; transform: translateY(28px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-stagger > *{ opacity:0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.reveal-stagger.is-visible > *{ opacity:1; transform:none; }
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay:0ms; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay:90ms; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay:180ms; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay:270ms; }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay:360ms; }
.reveal-stagger.is-visible > *:nth-child(6){ transition-delay:450ms; }
.reveal-stagger.is-visible > *:nth-child(7){ transition-delay:540ms; }

/* Root/branch divider — signature motif */
.root-divider{ display:flex; justify-content:center; margin: var(--sp-6) 0; opacity:.7; }
.root-divider svg{ width:120px; height:28px; color: var(--gold); }

/* ---------- History / split layout ---------- */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items:center; }
.split-media{ position:relative; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/5; }
.split-media img{ width:100%; height:100%; object-fit:cover; }
.split-media .cap{
  position:absolute; left:0; right:0; bottom:0; padding: var(--sp-4);
  background: linear-gradient(0deg, rgba(0,0,0,.62), transparent); color:#fff; font-size:.85rem;
}
.stat-row{ display:flex; gap: var(--sp-5); margin-top: var(--sp-5); flex-wrap:wrap; }
.stat{ }
.stat strong{ display:block; font-family: var(--font-display); font-size:2rem; color: var(--gold); }
.stat span{ font-size:.82rem; color: var(--ink-faint); text-transform:uppercase; letter-spacing:.06em; }

/* ---------- Cards ---------- */
.grid{ display:grid; gap: var(--sp-5); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }

.value-pill{
  display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1.1rem; border-radius:999px;
  background: var(--surface); border:1px solid var(--border); font-size:.88rem; font-weight:600; color: var(--ink-soft);
  transition: border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.value-pill:hover{ border-color: var(--gold); color: var(--ink); transform: translateY(-2px); }
.value-grid{ display:flex; flex-wrap:wrap; gap: .7rem; }

.card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-md);
  overflow:hidden; box-shadow: var(--shadow-sm); transition: box-shadow var(--dur-med), transform var(--dur-med);
  display:flex; flex-direction:column;
}
.card:hover{ box-shadow: var(--shadow-md); transform: translateY(-4px); }
.card-media{ position:relative; aspect-ratio:4/3; overflow:hidden; background: var(--bg-alt); }
.card-media img{ width:100%; height:100%; object-fit:cover; transition: transform 900ms var(--ease-out); }
.card:hover .card-media img{ transform: scale(1.06); }
.card-media .badge{
  position:absolute; top:.9rem; left:.9rem; background: rgba(20,20,20,.55); color:#fff; backdrop-filter: blur(6px);
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; padding:.35rem .7rem; border-radius:999px;
}
.card-body{ padding: var(--sp-4); flex:1; display:flex; flex-direction:column; }
.card-body .idx{ font-family: var(--font-display); font-size:.85rem; color: var(--gold); font-weight:700; margin-bottom:.3rem; }
.card-body h3{ font-size:1.28rem; margin-bottom:.5rem; }
.card-body p{ font-size:.95rem; flex:1; }
.card-tag{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-faint); margin-bottom:.5rem; display:block; }

/* Sensitive-ministry card treatment — no photography, textile-inspired pattern */
/* ---------- City of Champions: Vision Centres ---------- */
.vision-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.vision-grid > *:last-child{ grid-column: 2 / span 2; }
.vision-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.5rem;
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration:none;
  color: var(--ink);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
  position:relative;
}
a.vision-card:hover, a.vision-card:focus-visible{
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold);
}
.vision-card.is-vision{ border-style: dashed; }
.vision-num{
  font-family: var(--font-display);
  font-size:.85rem;
  font-weight:700;
  color: var(--gold);
}
.vision-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:50%;
  background: var(--bg-alt);
  color: var(--green);
}
.vision-icon svg{ width:20px; height:20px; }
.vision-card h3{ font-size:1.05rem; margin:0; }
.vision-card p{ font-size:.88rem; color: var(--ink-soft); margin:0; }
.vision-tag{
  font-size:.68rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--clay);
  border:1px solid var(--clay-soft);
  border-radius: 999px;
  padding:.2rem .6rem;
  margin-top:.2rem;
}
@media (max-width: 980px){
  .vision-grid{ grid-template-columns: repeat(2, 1fr); }
  .vision-grid > *:last-child{ grid-column: 1 / span 2; }
}
@media (max-width: 640px){
  .vision-grid{ grid-template-columns: 1fr; }
  .vision-grid > *:last-child{ grid-column: auto; }
}

.card-media.pattern{
  background:
    radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--gold) 30%, transparent) 0, transparent 45%),
    radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--green) 35%, transparent) 0, transparent 50%),
    repeating-linear-gradient(135deg, var(--border) 0 2px, transparent 2px 26px);
  display:flex; align-items:center; justify-content:center;
}
.card-media.pattern svg{ width:56px; height:56px; color: var(--gold); opacity:.85; }

/* ---------- Leadership ---------- */
.leader-card{ display:grid; grid-template-columns: .8fr 1.2fr; gap: var(--sp-6); align-items:center; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-6); box-shadow: var(--shadow-sm); }
.leader-photo{ border-radius: var(--radius-md); overflow:hidden; aspect-ratio: 3/4; box-shadow: var(--shadow-md); }
.leader-photo img{ width:100%; height:100%; object-fit:cover; }
.leader-sig{ font-family: var(--font-display); font-style:italic; color: var(--gold); font-size:1.1rem; margin-top: var(--sp-3); }

/* ---------- Org chart ---------- */
.org-chart{ display:flex; flex-direction:column; align-items:center; gap:0; }
.org-node{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-5); text-align:center; box-shadow: var(--shadow-sm); }
.org-node strong{ display:block; font-family: var(--font-display); font-size:1.05rem; }
.org-node span{ font-size:.78rem; color: var(--ink-faint); }
.org-connector{ width:1.5px; height: var(--sp-4); background: var(--border-strong); }
.org-branch{ display:flex; gap: var(--sp-4); flex-wrap:wrap; justify-content:center; margin-top: var(--sp-4); position:relative; }
.org-branch::before{ content:""; }

/* ---------- International presence ---------- */
.nation-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: var(--sp-3); }
.nation-chip{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding: var(--sp-3); display:flex; align-items:center; gap:.7rem; font-weight:700; font-size:.95rem;
}
.nation-chip .dot{ width:8px; height:8px; border-radius:50%; background: var(--green); flex-shrink:0; }
.nation-chip.hq .dot{ background: var(--gold); }

/* ---------- Gallery ---------- */
.gallery-grid{ display:grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 120px; gap: var(--sp-2); }
.gallery-item{ position:relative; overflow:hidden; border-radius: var(--radius-sm); cursor:pointer; background: var(--bg-alt); }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition: transform var(--dur-med) var(--ease-out); }
.gallery-item:hover img{ transform: scale(1.08); }
.gallery-item.big{ grid-column: span 3; grid-row: span 2; }
.gallery-item.wide{ grid-column: span 3; }
.gallery-item.tall{ grid-row: span 2; }
.gallery-caption{ position:absolute; inset:auto 0 0 0; padding:.6rem .8rem; background: linear-gradient(0deg, rgba(0,0,0,.7), transparent); color:#fff; font-size:.72rem; opacity:0; transition: opacity var(--dur-fast); }
.gallery-item:hover .gallery-caption{ opacity:1; }

/* Lightbox */
.lightbox{ position:fixed; inset:0; z-index:900; display:flex; align-items:center; justify-content:center; padding: var(--sp-4); background: rgba(6,9,13,.92); opacity:0; visibility:hidden; transition: opacity var(--dur-med); }
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox img{ max-width:min(1100px,92vw); max-height:86vh; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); }
.lightbox-close{ position:absolute; top: var(--sp-4); right: var(--sp-4); width:48px; height:48px; border-radius:50%; background: rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.3); cursor:pointer; }
.lightbox-cap{ position:absolute; bottom: var(--sp-4); left:0; right:0; text-align:center; color:#fff; font-size:.85rem; }

/* ---------- CTA banner ---------- */
.cta-band{ position:relative; border-radius: var(--radius-lg); overflow:hidden; padding: var(--sp-7) var(--sp-6); text-align:center; }
.cta-band .bg{ position:absolute; inset:0; background-image:url('../images/international-team-arrival.jpg'); background-size:cover; background-position:center; }
.cta-band .scrim{ position:absolute; inset:0; background: var(--overlay-scrim); }
.cta-band > *{ position:relative; z-index:1; }
.cta-band .eyebrow{ color: var(--gold-soft); }
.cta-band h2{ color:#fff; }
.cta-band p{ color: rgba(255,255,255,.86); max-width:60ch; margin-inline:auto; }
.cta-actions{ display:flex; gap: var(--sp-3); justify-content:center; flex-wrap:wrap; margin-top: var(--sp-5); }

/* ---------- Forms ---------- */
.form-card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-6); box-shadow: var(--shadow-sm); }
.field{ margin-bottom: var(--sp-4); }
.field label{ display:block; font-size:.82rem; font-weight:700; letter-spacing:.03em; margin-bottom:.4rem; color: var(--ink); }
.field input, .field textarea, .field select{
  width:100%; padding:.85rem 1rem; border-radius: var(--radius-sm); border:1.5px solid var(--border-strong);
  background: var(--surface-2); color: var(--ink); font-family: inherit; font-size:.98rem;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field input:focus, .field textarea:focus, .field select:focus{ border-color: var(--gold); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap: var(--sp-3); }
.form-note{ font-size:.82rem; color: var(--ink-faint); margin-top: var(--sp-3); }
.radio-row{ display:flex; gap: var(--sp-4); }
.radio-row label{ display:flex; align-items:center; gap:.4rem; font-weight:500; font-size:.92rem; color: var(--ink-soft); }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.contact-info-card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-5); }
.contact-info-card + .contact-info-card{ margin-top: var(--sp-4); }
.contact-info-card h3{ font-size:1.1rem; display:flex; align-items:center; gap:.6rem; }
.contact-info-card h3 svg{ width:20px; height:20px; color: var(--gold); }
.map-wrap{ border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--border); height:260px; }
.map-wrap iframe{ width:100%; height:100%; border:0; filter: grayscale(.15); }
[data-theme="dark"] .map-wrap iframe{ filter: invert(.92) hue-rotate(180deg) grayscale(.3); }

/* ---------- Footer ---------- */
.site-footer{ background: var(--ink); color: rgba(255,255,255,.72); padding: var(--sp-7) 0 var(--sp-4); }
[data-theme="dark"] .site-footer{ background: #090D12; }
.site-footer h4{ color:#fff; font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; font-family: var(--font-body); margin-bottom: var(--sp-3); }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-6); padding-bottom: var(--sp-6); border-bottom:1px solid rgba(255,255,255,.12); }
.footer-grid a{ display:block; text-decoration:none; color: rgba(255,255,255,.65); padding:.3rem 0; font-size:.92rem; transition: color var(--dur-fast); }
.footer-grid a:hover{ color: var(--gold-soft); }
.footer-brand p{ color: rgba(255,255,255,.62); font-size:.92rem; max-width:36ch; }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap: var(--sp-2); padding-top: var(--sp-4); font-size:.82rem; color: rgba(255,255,255,.5); }
.footer-bottom a{ color: inherit; text-decoration:underline; }

/* ---------- Utility ---------- */
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.text-center{ text-align:center; }
.mt-6{ margin-top: var(--sp-6); }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .split, .leader-card, .contact-grid{ grid-template-columns:1fr; }
  .leader-photo{ max-width:320px; margin-inline:auto; }
  .grid-3{ grid-template-columns: repeat(2,1fr); }
  .nav-panel{ grid-template-columns:1fr; }
  .nav-aside{ display:none; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  body{ font-size:16px; }
  section{ padding: var(--sp-6) 0; }
  .grid-3, .grid-2{ grid-template-columns: 1fr; }
  .gallery-grid{ grid-template-columns: repeat(3,1fr); grid-auto-rows:90px; }
  .gallery-item.big{ grid-column: span 3; grid-row: span 2; }
  .gallery-item.wide{ grid-column: span 3; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .hero-meta{ gap: var(--sp-4); }
  .field-row{ grid-template-columns:1fr; }
  .brand-word{ display:none; }
}

/* ==========================================================================
   V2.1 — CINEMATIC & INTERACTIVE UPGRADES
   Adds: loading intro, layered/parallax hero with particles + count-up,
   growth journey, interactive org chart, radial international map,
   filterable themed gallery, nav preview thumbnails, theme mood refinement.
   ========================================================================== */

/* ---------- Loading intro (branded, skipped instantly on repeat visits
   or reduced motion) ---------- */
.intro-loader{
  position:fixed; inset:0; z-index:2000; background: var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition: opacity 600ms var(--ease-in-out), visibility 0s linear 600ms;
}
.intro-loader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.intro-loader svg{ width:120px; height:120px; color: var(--gold); }
.intro-loader path{ stroke-dasharray: 340; stroke-dashoffset:340; animation: draw-tree 1400ms var(--ease-out) forwards .1s; }
.intro-loader circle{ opacity:0; animation: fade-in 500ms ease forwards 1.1s; }
@keyframes draw-tree{ to{ stroke-dashoffset:0; } }
@keyframes fade-in{ to{ opacity:1; } }

/* ---------- Hero: layered depth, particles, parallax ---------- */
.hero-slide{ will-change: transform; }
.hero-particles{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.hero-particles span{
  position:absolute; bottom:-10%; width:3px; height:3px; border-radius:50%;
  background: rgba(255,255,255,.55); opacity:0;
  animation: rise linear infinite;
}
[data-theme="dark"] .hero-particles span{ background: var(--gold-soft); box-shadow:0 0 6px var(--gold-soft); }
@keyframes rise{
  0%{ transform: translateY(0) translateX(0); opacity:0; }
  10%{ opacity:.7; }
  90%{ opacity:.4; }
  100%{ transform: translateY(-115vh) translateX(var(--drift,20px)); opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .hero-particles{ display:none; } }
.hero-content{ will-change: transform; }
.hero-title, .hero-sub, .hero-cta, .hero-meta{ will-change: transform, opacity; }

/* Count-up stat reveal */
.hero-meta strong.is-counting{ font-variant-numeric: tabular-nums; }

/* ---------- Section transition mask (page-turn feel) ---------- */
.section-turn{ position:relative; overflow:hidden; }
.section-turn::before{
  content:""; position:absolute; inset:0; z-index:5; background: var(--bg);
  transform-origin: top; transform: scaleY(1); transition: transform 900ms var(--ease-in-out);
}
.section-turn.is-visible::before{ transform: scaleY(0); }
@media (prefers-reduced-motion: reduce){ .section-turn::before{ display:none; } }

/* ---------- Growth Journey ---------- */
.journey{ position:relative; max-width:920px; margin-inline:auto; }
.journey-line{ position:absolute; left:36px; top:8px; bottom:8px; width:2px; }
.journey-line svg{ height:100%; width:2px; overflow:visible; }
.journey-line path{ stroke: var(--border-strong); stroke-width:2; fill:none; }
.journey-line path.draw{ stroke: var(--gold); stroke-dasharray:1000; stroke-dashoffset:1000; transition: stroke-dashoffset 1400ms var(--ease-out); }
.journey.is-visible .journey-line path.draw{ stroke-dashoffset:0; }
.journey-stage{ position:relative; display:grid; grid-template-columns:74px 1fr; gap: var(--sp-4); padding-bottom: var(--sp-7); }
.journey-stage:last-child{ padding-bottom:0; }
.journey-marker{
  width:74px; height:74px; border-radius:50%; background: var(--surface); border:2px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:1.4rem; color: var(--ink-faint);
  transition: border-color 500ms, color 500ms, background 500ms; z-index:1;
}
.journey.is-visible .journey-stage:nth-child(1) .journey-marker{ transition-delay:200ms; border-color: var(--gold); color: var(--gold); background: var(--surface); }
.journey.is-visible .journey-stage:nth-child(2) .journey-marker{ transition-delay:700ms; border-color: var(--green); color: var(--green); }
.journey.is-visible .journey-stage:nth-child(3) .journey-marker{ transition-delay:1200ms; border-color: var(--clay); color: var(--clay); }
.journey-body{ padding-top:.6rem; }
.journey-body .eyebrow{ margin-bottom:.3rem; }
.journey-media{ display:flex; gap:.6rem; margin-top: var(--sp-3); }
.journey-media img{ width:84px; height:84px; object-fit:cover; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.journey-media img:nth-child(2){ margin-top:14px; }
.journey-media img:nth-child(3){ margin-top:-10px; }

/* ---------- Interactive org chart ---------- */
.org-node.is-toggle{ cursor:pointer; border-color: var(--border-strong); position:relative; padding-right: var(--sp-6); }
.org-node.is-toggle:hover{ border-color: var(--gold); }
.org-node.is-toggle .chevron{ position:absolute; right: var(--sp-3); top:50%; transform: translateY(-50%) rotate(0deg); transition: transform var(--dur-med) var(--ease-in-out); color: var(--gold); }
.org-node.is-toggle[aria-expanded="true"] .chevron{ transform: translateY(-50%) rotate(180deg); }
.org-detail{
  max-width:1000px; margin:0 auto; overflow:hidden; max-height:0; opacity:0;
  transition: max-height 600ms var(--ease-in-out), opacity 400ms, margin 400ms;
}
.org-detail.is-open{ max-height:1400px; opacity:1; margin-top: var(--sp-4); }
.org-detail-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap: var(--sp-3); padding: var(--sp-4); background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-md); }
.org-mini{ display:flex; gap:.7rem; align-items:flex-start; text-align:left; }
.org-mini img{ width:52px; height:52px; border-radius:10px; object-fit:cover; flex-shrink:0; }
.org-mini h5{ margin:0 0 .2rem; font-family:var(--font-display); font-size:.95rem; color:var(--ink); }
.org-mini p{ margin:0; font-size:.8rem; color: var(--ink-faint); }

/* ---------- Radial international ministry map ---------- */
.radial-map{ position:relative; max-width:640px; margin:var(--sp-6) auto 0; aspect-ratio:1/1; }
.radial-map svg{ width:100%; height:100%; overflow:visible; }
.radial-map .spoke{ stroke: var(--border-strong); stroke-width:1.5; fill:none; stroke-dasharray:220; stroke-dashoffset:220; transition: stroke-dashoffset 900ms var(--ease-out), stroke 400ms; }
.radial-map.is-visible .spoke{ stroke-dashoffset:0; }
.radial-map .hub-circle{ fill: var(--gold); }
.radial-map .node-circle{ fill: var(--surface); stroke: var(--border-strong); stroke-width:1.5; transition: stroke 300ms, fill 300ms; cursor:pointer; }
.radial-map .node-group:hover .node-circle, .radial-map .node-group:focus .node-circle{ stroke: var(--gold); fill: var(--gold-soft); }
.radial-map .node-group:hover .spoke, .radial-map .node-group:focus .spoke{ stroke: var(--gold); }
.radial-map text{ font-family: var(--font-body); font-weight:700; fill: var(--ink); pointer-events:none; }
.radial-map .hub-label{ font-size:11px; fill:#221605; }
.radial-map .node-label{ font-size:10px; }
.map-tooltip{
  position:absolute; pointer-events:none; background: var(--ink); color: var(--bg); font-size:.78rem;
  padding:.5rem .75rem; border-radius: var(--radius-sm); max-width:220px; opacity:0; transform: translate(-50%,-120%);
  transition: opacity var(--dur-fast); z-index:5; box-shadow: var(--shadow-md);
}
.map-tooltip.is-visible{ opacity:1; }
.nation-list-fallback{ margin-top:var(--sp-5); }

/* ---------- Gallery filters ---------- */
.gallery-filters{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom: var(--sp-4); }
.gallery-filter{
  padding:.5rem 1.05rem; border-radius:999px; border:1.5px solid var(--border-strong); background: var(--surface);
  font-size:.85rem; font-weight:700; color: var(--ink-soft); cursor:pointer; transition: all var(--dur-fast);
}
.gallery-filter:hover{ border-color: var(--gold); }
.gallery-filter.is-active{ background: var(--gold); border-color: var(--gold); color:#221605; }
.gallery-item{ transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); }
.gallery-item.is-hidden{ display:none; }

/* ---------- Nav preview thumbnail ---------- */
.nav-preview{
  position:absolute; right:0; top:0; width:230px; aspect-ratio:4/5; border-radius: var(--radius-md); overflow:hidden;
  opacity:0; transform: translateX(14px); transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
  box-shadow: var(--shadow-lg); pointer-events:none;
}
.nav-preview.is-visible{ opacity:1; transform:translateX(0); }
.nav-preview img{ width:100%; height:100%; object-fit:cover; }
.nav-links{ position:relative; }
@media (max-width: 980px){ .nav-preview{ display:none; } }

/* ---------- Theme mood refinement ---------- */
[data-theme="dark"] .hero-scrim{ background: radial-gradient(120% 90% at 50% 100%, rgba(6,9,13,.15) 0%, rgba(6,9,13,.82) 100%); }
[data-theme="dark"] .hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.5) 0, transparent 60%),
    radial-gradient(1px 1px at 60% 15%, rgba(255,255,255,.4) 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 80% 40%, rgba(255,255,255,.5) 0, transparent 60%),
    radial-gradient(1px 1px at 35% 60%, rgba(255,255,255,.35) 0, transparent 60%),
    radial-gradient(1px 1px at 90% 70%, rgba(255,255,255,.4) 0, transparent 60%);
}
[data-theme="light"] .card, html:not([data-theme]) .card{ }
[data-theme="light"] .card:hover{ box-shadow: 0 16px 40px rgba(185,130,43,.14); }
[data-theme="dark"] .card:hover{ box-shadow: 0 16px 46px rgba(0,0,0,.55), 0 0 0 1px rgba(227,178,85,.15); }

/* ---------- Form validation polish ---------- */
.field.has-error input, .field.has-error textarea{ border-color:#C0473A; }
.field-error{ display:none; color:#C0473A; font-size:.78rem; margin-top:.35rem; font-weight:600; }
.field.has-error .field-error{ display:block; }

/* ---------- Responsive additions ---------- */
@media (max-width: 640px){
  .journey-stage{ grid-template-columns:56px 1fr; }
  .journey-marker{ width:56px; height:56px; font-size:1.1rem; }
  .journey-line{ left:28px; }
  .org-detail-grid{ grid-template-columns:1fr; }
  .radial-map{ max-width:100%; }
}

/* ==========================================================================
   V2.2 — WATCH & LISTEN, DAILY VERSE, DEVOTIONALS, GIVING, TESTIMONIES
   Restored and improved from the prior build, still 100% verified/functional
   external resources (no fabricated data).
   ========================================================================== */

/* ---------- Watch & Listen (dark band) ---------- */
.media-band{ background: var(--ink); color: rgba(255,255,255,.82); }
[data-theme="dark"] .media-band{ background:#090D12; }
.media-band .eyebrow{ color: var(--gold-soft); }
.media-band .eyebrow::before{ background: var(--gold-soft); }
.media-band h2{ color:#fff; }
.media-band .lede{ color: rgba(255,255,255,.62); }
.media-grid{ display:grid; grid-template-columns: 1.3fr .9fr; gap: var(--sp-6); align-items:start; }
.video-frame{ position:relative; aspect-ratio:16/9; border-radius: var(--radius-md); overflow:hidden; box-shadow: var(--shadow-lg); background:#000; }
.video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-frame-label{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color: rgba(255,255,255,.5); margin:.6rem 0 var(--sp-4); }
.watch-cta-row{ display:flex; flex-direction:column; gap: var(--sp-2); margin-top: var(--sp-4); }
.watch-cta{ display:flex; align-items:center; gap: var(--sp-3); background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); text-decoration:none; color:#fff; transition: background var(--dur-fast), transform var(--dur-fast); }
.watch-cta:hover{ background: rgba(255,255,255,.13); transform: translateY(-2px); }
.watch-cta .wc-icon{ width:2.6rem; height:2.6rem; border-radius:.7rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; background: rgba(255,255,255,.1); }
.watch-cta .wc-icon svg{ width:20px; height:20px; }
.watch-cta .wc-label{ font-weight:700; font-size:.92rem; margin:0; }
.watch-cta .wc-desc{ font-size:.78rem; color: rgba(255,255,255,.55); margin:0; }

/* ---------- Verse of the day ---------- */
.verse-of-day{
  position:relative; text-align:center; max-width:760px; margin:0 auto var(--sp-6); padding: var(--sp-6) var(--sp-5);
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.vod-badge{ display:inline-block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); padding:.4rem .9rem; border-radius:999px; margin-bottom: var(--sp-3); }
.verse-of-day .v{ font-family: var(--font-display); font-style:italic; font-size: clamp(1.3rem,2.6vw,1.8rem); color: var(--ink); line-height:1.5; margin:0 0 var(--sp-2); }
.verse-of-day cite{ font-style:normal; font-size:.85rem; letter-spacing:.06em; color: var(--ink-faint); }
.vod-countdown{ margin-top: var(--sp-3); font-size:.78rem; color: var(--ink-faint); }

/* ---------- Growth / devotional cards ---------- */
.growth-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-4);
  text-decoration:none; color:inherit; display:block; transition: border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
}
.growth-card:hover{ border-color: var(--gold); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.growth-card .g-tag{ display:block; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color: var(--gold); font-weight:700; margin-bottom:.4rem; }
.growth-card h3{ font-size:1.08rem; display:flex; align-items:center; gap:.4rem; margin-bottom:.4rem; }
.growth-card .gc-arrow{ color: var(--gold); transition: transform var(--dur-fast); }
.growth-card:hover .gc-arrow{ transform: translate(3px,-3px); }
.growth-card p{ font-size:.9rem; margin:0; }

/* ---------- Giving / Mobile Money ---------- */
.giving-cats{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin:var(--sp-5) 0; }
.giving-cat{ padding:.55rem 1.15rem; border-radius:999px; border:1px solid var(--border-strong); font-size:.85rem; font-weight:700; color: var(--ink-soft); }
.mpesa-widget{ max-width:560px; margin:0 auto; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow-md); }
.mpesa-header{ display:flex; align-items:center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.mpesa-icon{ width:3rem; height:3rem; border-radius:.85rem; background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); display:flex; align-items:center; justify-content:center; }
.mpesa-icon svg{ width:22px; height:22px; }
.mpesa-header h3{ margin:0; font-size:1.1rem; }
.mpesa-header p{ margin:0; font-size:.8rem; color: var(--ink-faint); }
.mpesa-field{ background: var(--bg-alt); border-radius: var(--radius-sm); padding: var(--sp-4); text-align:center; margin-bottom: var(--sp-4); }
.mpesa-field .label{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-faint); margin:0 0 .3rem; }
.mpesa-field .value{ font-family: var(--font-display); font-size:1.7rem; color: var(--ink); margin:0 0 var(--sp-3); }
.mpesa-instructions{ font-size:.88rem; color: var(--ink-soft); margin-bottom: var(--sp-3); }
.mpesa-verse{ font-style:italic; font-size:.85rem; color: var(--ink-faint); text-align:center; border-top:1px solid var(--border); padding-top: var(--sp-3); margin:0; }
.giving-provenance{ text-align:center; font-size:.8rem; color: var(--ink-faint); margin-top: var(--sp-4); }

/* ---------- Testimonies ---------- */
.testimony-panel{
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap: var(--sp-4);
  padding: var(--sp-6); background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); height:100%;
}
.testimony-panel svg{ width:40px; height:40px; color: var(--gold); }
.testimony-panel p{ font-family: var(--font-display); font-style:italic; font-size:1.2rem; color: var(--ink); max-width:32ch; }
.testimony-panel cite{ font-style:normal; font-size:.8rem; letter-spacing:.06em; color: var(--ink-faint); }

/* Section badges for restored-content provenance */
.provenance-note{ font-size:.78rem; color: var(--ink-faint); text-align:center; margin-top: var(--sp-4); }

.growth-grid{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px){
  .media-grid{ grid-template-columns:1fr; }
  .growth-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .growth-grid{ grid-template-columns: 1fr; }
}