/* ===========================================================
   Mission Maasai design system
   Warm & photographic. Giving-first.
   =========================================================== */

:root{
  /* ---- Brand colours, sampled from the Mission Maasai logo ---- */
  --brand-red:  #9E2423;   /* the shuka in the mark */
  --brand-blue: #2B29A0;   /* the checked cloth in the mark */

  /* ---- Beadwork accents, one per ministry area ----
     Maasai beadwork colour meanings:
     red = unity & bravery · blue = sky & water · green = land & nourishment
     gold = growth · orange = hospitality & enterprise                        */
  --area-gospel:    #9E2423;
  --area-education: #C08419;
  --area-health:    #C25A18;
  --area-shamba:    #2C7A55;
  --area-physical:  #2B29A0;

  /* Core palette */
  --ink:        #16130F;   /* near-black, warm */
  --ink-2:      #453D36;   /* body text on light */
  --ink-3:      #78695F;   /* muted */
  --paper:      #FAF7F2;   /* page background */
  --paper-2:    #F1EAE0;   /* alt band */
  --sand:       #E3D9C9;   /* rules, borders */
  --clay:       #9E2423;   /* primary action, brand red */
  --clay-dark:  #7E1A19;
  --ochre:      #C08419;   /* secondary accent */
  --acacia:     #1E1C7A;   /* deep indigo band, from the brand blue */
  --acacia-2:   #14135A;

  --shadow-sm: 0 1px 2px rgba(27,21,18,.06), 0 4px 12px rgba(27,21,18,.05);
  --shadow-md: 0 2px 6px rgba(27,21,18,.07), 0 16px 40px rgba(27,21,18,.09);

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;

  --serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --wrap: 1180px;
  --gutter: 24px;
}

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

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink-2);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

h1,h2,h3,h4{
  font-family:var(--serif);
  color:var(--ink);
  font-weight:600;
  line-height:1.1;
  margin:0 0 .5em;
  letter-spacing:-0.015em;
  font-variation-settings:"SOFT" 0, "WONK" 0;
}
h1{ font-size:clamp(2.6rem, 6vw, 4.6rem); }
h2{ font-size:clamp(2rem, 4vw, 3rem); }
h3{ font-size:clamp(1.25rem, 2vw, 1.55rem); }
h4{ font-size:1.05rem; font-family:var(--sans); font-weight:650; letter-spacing:-0.01em; }

p{ margin:0 0 1.1em; }
a{ color:var(--clay); text-decoration:none; }
a:hover{ text-decoration:underline; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-narrow{ max-width:760px; }
.section{ padding:clamp(64px,9vw,120px) 0; }
.section-tight{ padding:clamp(44px,6vw,72px) 0; }

/* ---------- Utility type ---------- */
.eyebrow{
  font-family:var(--sans);
  font-size:.74rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--clay); margin:0 0 1rem;
  display:flex; align-items:center; gap:.7rem;
}
.eyebrow::before{
  content:""; width:26px; height:2px; background:var(--ochre); display:inline-block; flex:none;
}
.lede{ font-size:clamp(1.1rem,1.6vw,1.3rem); color:var(--ink-2); line-height:1.6; }
.muted{ color:var(--ink-3); }
.small{ font-size:.86rem; }
.center{ text-align:center; }
.center .eyebrow{ justify-content:center; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--sans); font-size:.95rem; font-weight:600; letter-spacing:.01em;
  padding:.92em 1.7em; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
  text-decoration:none !important; line-height:1; white-space:nowrap; flex:0 0 auto;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--clay); color:#fff; box-shadow:0 6px 20px rgba(169,53,32,.28); }
.btn-primary:hover{ background:var(--clay-dark); }
.btn-outline{ border-color:var(--ink); color:var(--ink); background:transparent; }
.btn-outline:hover{ background:var(--ink); color:var(--paper); }
.btn-ghost-light{ border-color:rgba(255,255,255,.65); color:#fff; background:rgba(255,255,255,.06); backdrop-filter:blur(4px); }
.btn-ghost-light:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.btn-sm{ padding:.7em 1.25em; font-size:.86rem; }
.btn-lg{ padding:1.05em 2.1em; font-size:1.03rem; }
.btn-block{ width:100%; }

.textlink{
  font-weight:600; color:var(--ink); display:inline-flex; align-items:center; gap:.45em;
  border-bottom:1.5px solid var(--ochre); padding-bottom:2px; text-decoration:none !important;
}
.textlink:hover{ color:var(--clay); border-color:var(--clay); }
.textlink .arrow{ transition:transform .18s ease; }
.textlink:hover .arrow{ transform:translateX(3px); }

/* ---------- Photo placeholders ----------
   These are labeled slots. Replace each .photo with a real <img>.
   The label text lives in data-shot and describes the photograph to source. */
.photo{ position:relative; overflow:hidden; background:var(--paper-2); color:#fff; }
.photo::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(180deg, rgba(20,17,13,.16), rgba(20,17,13,.46)),
    repeating-linear-gradient(90deg, rgba(158,36,35,.55) 0 12px, rgba(126,26,25,.55) 12px 24px, rgba(255,255,255,.30) 24px 27px, rgba(126,26,25,.55) 27px 39px),
    repeating-linear-gradient(0deg, rgba(43,41,160,.30) 0 12px, rgba(158,36,35,.22) 12px 24px, rgba(255,255,255,.22) 24px 27px, rgba(158,36,35,.22) 27px 39px),
    linear-gradient(135deg, #7E1A19, #C25A18 55%, #2B29A0);
  background-size:auto, 52px 52px, 52px 52px, auto;
}
/* variants so adjacent placeholders read as different photographs */
.photo.v2::before{ background-image:
    linear-gradient(180deg, rgba(20,17,13,.14), rgba(20,17,13,.5)),
    repeating-linear-gradient(90deg, rgba(43,41,160,.6) 0 14px, rgba(26,25,104,.6) 14px 28px, rgba(255,255,255,.34) 28px 32px, rgba(26,25,104,.6) 32px 46px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.20) 0 14px, rgba(43,41,160,.24) 14px 28px),
    linear-gradient(160deg, #1E1C7A, #2B29A0 60%, #C08419);
  background-size:auto, 62px 62px, 62px 62px, auto; }
.photo.v3::before{ background-image:
    linear-gradient(180deg, rgba(20,17,13,.12), rgba(20,17,13,.46)),
    repeating-linear-gradient(90deg, rgba(192,132,25,.55) 0 9px, rgba(158,36,35,.5) 9px 18px, rgba(20,17,13,.35) 18px 21px, rgba(158,36,35,.5) 21px 30px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.16) 0 9px, rgba(126,26,25,.22) 9px 18px),
    linear-gradient(110deg, #C08419, #9E2423 65%, #4E1211);
  background-size:auto, 42px 42px, 42px 42px, auto; }
.photo.v4::before{ background-image:
    linear-gradient(180deg, rgba(20,17,13,.20), rgba(20,17,13,.5)),
    repeating-linear-gradient(90deg, rgba(20,17,13,.5) 0 13px, rgba(69,61,54,.45) 13px 24px, rgba(158,36,35,.45) 24px 29px, rgba(69,61,54,.45) 29px 40px),
    repeating-linear-gradient(0deg, rgba(227,217,201,.18) 0 13px, rgba(20,17,13,.2) 13px 24px),
    linear-gradient(200deg, #453D36, #9E2423 70%, #C08419);
  background-size:auto, 56px 56px, 56px 56px, auto; }
.photo.v5::before{ background-image:
    linear-gradient(180deg, rgba(20,17,13,.14), rgba(20,17,13,.48)),
    repeating-linear-gradient(90deg, rgba(126,26,25,.55) 0 17px, rgba(43,41,160,.55) 17px 32px, rgba(255,255,255,.28) 32px 36px, rgba(43,41,160,.55) 36px 51px),
    repeating-linear-gradient(0deg, rgba(44,122,85,.26) 0 17px, rgba(20,17,13,.18) 17px 32px),
    linear-gradient(145deg, #9E2423, #2C7A55 55%, #1E1C7A);
  background-size:auto, 70px 70px, 70px 70px, auto; }
.photo-4x3{ aspect-ratio:4/3; }
.photo-1x1{ aspect-ratio:1/1; }
.photo-3x4{ aspect-ratio:3/4; }
.photo-16x9{ aspect-ratio:16/9; }
.photo-r{ border-radius:var(--r-md); }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(250,246,240,.92); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--sand);
}
.header-inner{ display:flex; align-items:center; gap:28px; height:98px; }
.logo{ display:flex; align-items:center; gap:12px; text-decoration:none !important; margin-right:auto; }
.logo img{ width:236px; height:auto; }
.logo-tag{
  font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3);
  font-weight:700; border-left:1px solid var(--sand); padding-left:12px; line-height:1.45; max-width:10ch;
}
@media (max-width:1080px){ .logo-tag{ display:none; } }

.nav{ display:flex; align-items:center; gap:26px; }
.nav a{
  color:var(--ink); font-size:.93rem; font-weight:550; text-decoration:none !important;
  padding:6px 0; border-bottom:2px solid transparent; transition:border-color .18s, color .18s;
}
.nav a:hover{ border-color:var(--ochre); }
.nav a[aria-current="page"]{ border-color:var(--clay); }
.nav-toggle{ display:none; background:none; border:0; padding:8px; cursor:pointer; color:var(--ink); }

@media (max-width:900px){
  .nav-toggle{ display:block; }
  .header-inner{ height:78px; }
  .logo img{ width:172px; }
  .nav{
    position:absolute; top:78px; left:0; right:0; flex-direction:column; align-items:stretch;
    gap:0; background:var(--paper); border-bottom:1px solid var(--sand); padding:10px var(--gutter) 22px;
    box-shadow:var(--shadow-md);
  }
  .nav:not(.open){ display:none; }
  .nav a{ padding:13px 0; border-bottom:1px solid var(--sand); }
  .nav .btn{ margin-top:14px; }
}

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:min(86vh,760px); display:flex; align-items:flex-end; }
.hero .photo{ position:absolute; inset:0; }
.hero-content{ position:relative; z-index:2; padding-block:clamp(48px,8vw,92px); max-width:820px; }
.hero h1{ color:#fff; text-shadow:0 2px 30px rgba(0,0,0,.3); }
.hero p{ color:rgba(255,255,255,.93); font-size:clamp(1.08rem,1.7vw,1.32rem); max-width:600px; text-shadow:0 1px 14px rgba(0,0,0,.35); }
.hero .eyebrow{ color:#F2C88A; }
.hero .eyebrow::before{ background:#F2C88A; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.hero-note{ font-size:.85rem !important; color:rgba(255,255,255,.75) !important; margin-top:18px !important; }

.page-hero{ background:var(--acacia); color:rgba(255,255,255,.86); padding:clamp(64px,9vw,110px) 0 clamp(56px,8vw,90px); }
.page-hero h1{ color:#fff; max-width:16ch; }
.page-hero .lede{ color:rgba(255,255,255,.86); max-width:60ch; }
.page-hero .eyebrow{ color:#E8B979; }
.page-hero .eyebrow::before{ background:#E8B979; }

/* ---------- Stat band ---------- */
.stats{ background:var(--ink); color:#fff; }
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.14); }
.stat{ background:var(--ink); padding:38px 26px; }
.stat b{ display:block; font-family:var(--serif); font-size:clamp(2.2rem,4vw,3.1rem); color:#fff; line-height:1; margin-bottom:.35em; font-weight:600; }
.stat span{ font-size:.88rem; color:rgba(255,255,255,.72); line-height:1.45; display:block; }
@media (max-width:760px){ .stat-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Layout helpers ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.split-40{ grid-template-columns:.85fr 1.15fr; }
.split-60{ grid-template-columns:1.15fr .85fr; }
@media (max-width:860px){ .split,.split-40,.split-60{ grid-template-columns:1fr; } }

.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
@media (max-width:960px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.band-alt{ background:var(--paper-2); }
.band-dark{ background:var(--acacia); color:rgba(255,255,255,.84); }
.band-dark h2,.band-dark h3,.band-dark h4{ color:#fff; }
.band-dark .eyebrow{ color:#E8B979; }
.band-dark .eyebrow::before{ background:#E8B979; }
.band-dark .lede{ color:rgba(255,255,255,.86); }
.band-ink{ background:var(--ink); color:rgba(255,255,255,.8); }
.band-ink h2,.band-ink h3{ color:#fff; }

/* ---------- Cards ---------- */
.card{
  background:#fff; border:1px solid var(--sand); border-radius:var(--r-md); overflow:hidden;
  display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.card-body{ padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; }
.card-body h3{ font-size:1.28rem; margin-bottom:.45em; }
.card-body p{ font-size:.95rem; color:var(--ink-2); }
.card-body .textlink{ margin-top:auto; align-self:flex-start; padding-top:6px; }
.card .photo{ aspect-ratio:16/10; }

.tag{
  display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--clay); background:rgba(169,53,32,.09); padding:.4em .75em; border-radius:999px; margin-bottom:.9em;
}

/* ---------- Giving module ---------- */
.give-card{
  background:#fff; border:1px solid var(--sand); border-radius:var(--r-lg);
  padding:clamp(24px,3vw,34px); box-shadow:var(--shadow-md);
}
.toggle{
  display:grid; grid-template-columns:1fr 1fr; gap:4px; background:var(--paper-2);
  border-radius:999px; padding:4px; margin-bottom:24px;
}
.toggle button{
  border:0; background:transparent; padding:.8em 1em; border-radius:999px; cursor:pointer;
  font-family:var(--sans); font-size:.93rem; font-weight:600; color:var(--ink-3); transition:all .18s ease;
}
.toggle button[aria-pressed="true"]{ background:#fff; color:var(--ink); box-shadow:var(--shadow-sm); }

.amounts{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
.amt{
  border:1.5px solid var(--sand); background:#fff; border-radius:var(--r-sm);
  padding:.95em .4em; font-family:var(--serif); font-size:1.22rem; font-weight:600; color:var(--ink);
  cursor:pointer; transition:all .16s ease;
}
.amt:hover{ border-color:var(--ochre); }
.amt[aria-pressed="true"]{ border-color:var(--clay); background:rgba(169,53,32,.06); box-shadow:inset 0 0 0 1px var(--clay); }
.amt-custom{
  width:100%; border:1.5px solid var(--sand); border-radius:var(--r-sm); padding:.85em 1em;
  font-family:var(--sans); font-size:1rem; color:var(--ink); background:#fff; margin-bottom:18px;
}
.amt-custom:focus{ outline:2px solid var(--ochre); outline-offset:1px; border-color:var(--ochre); }

.impact-line{
  background:var(--paper-2); border-left:3px solid var(--ochre); border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:14px 18px; font-size:.94rem; color:var(--ink-2); margin-bottom:20px; min-height:64px;
}
.impact-line b{ color:var(--ink); }

.designations{ display:grid; gap:10px; margin-bottom:22px; }
.desig{
  display:flex; align-items:flex-start; gap:12px; border:1.5px solid var(--sand); border-radius:var(--r-sm);
  padding:14px 16px; cursor:pointer; background:#fff; transition:all .16s ease; text-align:left; width:100%;
  font-family:var(--sans);
}
.desig:hover{ border-color:var(--ochre); }
.desig[aria-pressed="true"]{ border-color:var(--clay); background:rgba(169,53,32,.05); }
.desig .dot{
  width:16px; height:16px; border-radius:50%; border:1.5px solid var(--sand); flex:none; margin-top:3px; background:#fff;
}
.desig[aria-pressed="true"] .dot{ border-color:var(--clay); box-shadow:inset 0 0 0 4px var(--clay); }
.desig b{ display:block; color:var(--ink); font-size:.98rem; font-weight:650; }
.desig span{ display:block; font-size:.85rem; color:var(--ink-3); line-height:1.45; margin-top:2px; }

/* ---------- Campaign progress ---------- */
.progress{ height:7px; background:var(--sand); border-radius:999px; overflow:hidden; margin:14px 0 10px; }
.progress span{ display:block; height:100%; background:linear-gradient(90deg,var(--clay),var(--ochre)); border-radius:999px; }
.progress-meta{ display:flex; justify-content:space-between; gap:12px; font-size:.84rem; color:var(--ink-3); }
.progress-meta b{ color:var(--ink); font-variant-numeric:tabular-nums; }
.band-dark .progress{ background:rgba(255,255,255,.18); }
.band-dark .progress-meta{ color:rgba(255,255,255,.6); }
.band-dark .progress-meta b{ color:#fff; }
.campaign{ background:#fff; border:1px solid var(--sand); border-radius:var(--r-md); padding:22px 22px 24px; display:flex; flex-direction:column; }
.campaign h3{ font-size:1.18rem; margin-bottom:.4em; }
.campaign p{ font-size:.92rem; }
.campaign .btn{ margin-top:auto; align-self:flex-start; }
.campaign.funded{ background:var(--paper-2); }
.badge-funded{ display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:#1F332A; background:#BBD3B4; padding:.35em .7em; border-radius:999px; }
.badge-confirm{ display:inline-block; font-size:.64rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#7A5A12; background:#F3E3C2; padding:.35em .7em; border-radius:999px; margin-bottom:.6em; }
.cost-amt{ display:block; font-family:var(--serif); font-size:2.3rem; line-height:1; color:var(--clay);
  font-weight:600; margin-bottom:.3em; letter-spacing:-.02em; }
.cost-amt small{ font-size:.9rem; font-family:var(--sans); color:var(--ink-3); font-weight:500; letter-spacing:0; }

/* ---------- Events ---------- */
.event{
  background:#fff; border:1px solid var(--sand); border-radius:var(--r-lg); overflow:hidden;
  display:grid; grid-template-columns:1.1fr 1fr; gap:0; margin-bottom:28px;
}
.event.flip .event-media{ order:2; }
.event-media{ position:relative; min-height:280px; }
.event-media .photo{ position:absolute; inset:0; }
.event-body{ padding:clamp(24px,3vw,38px); display:flex; flex-direction:column; justify-content:center; }
.event-body h3{ font-size:clamp(1.4rem,2.2vw,1.85rem); margin-bottom:.35em; }
.event-when{
  display:inline-flex; align-items:center; gap:.55em; font-size:.8rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--clay); margin-bottom:1em;
}
.event-when .dotmark{ width:8px; height:8px; border-radius:50%; background:var(--clay); flex:none; }
.event-when.tbd{ color:var(--ink-3); }
.event-when.tbd .dotmark{ background:var(--ink-3); }
.event-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.event-recap{
  margin-top:22px; padding-top:18px; border-top:1px solid var(--sand);
  font-size:.88rem; color:var(--ink-3);
}
.event-recap b{ color:var(--ink); display:block; margin-bottom:.35em; font-size:.95rem; }
@media (max-width:820px){ .event{ grid-template-columns:1fr; } .event.flip .event-media{ order:0; } .event-media{ min-height:220px; } }

.video-slot{
  position:relative; aspect-ratio:16/9; border-radius:var(--r-md); overflow:hidden;
  background:var(--ink); display:grid; place-items:center; color:#fff; text-align:center;
}
.video-slot .play{
  width:66px; height:66px; border-radius:50%; background:rgba(255,255,255,.16); backdrop-filter:blur(6px);
  border:2px solid rgba(255,255,255,.7); display:grid; place-items:center; margin:0 auto 14px;
}
.video-slot .play::after{
  content:""; border-left:18px solid #fff; border-top:11px solid transparent;
  border-bottom:11px solid transparent; margin-left:5px;
}
.video-slot span{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.8); padding:0 20px; }

.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.gallery .photo{ border-radius:var(--r-sm); }
@media (max-width:620px){ .gallery{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Pillar list ---------- */
.pillar{ border-top:2px solid var(--ink); padding-top:20px; }
.pillar h3{ font-size:1.32rem; margin-bottom:.5em; }
.pillar ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.pillar li{ font-size:.94rem; color:var(--ink-2); padding-left:18px; position:relative; }
.pillar li::before{ content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--ochre); }
.band-dark .pillar{ border-color:rgba(255,255,255,.5); }
.band-dark .pillar li{ color:rgba(255,255,255,.82); }

/* ---------- Timeline ---------- */
.timeline{ position:relative; padding-left:34px; }
.timeline::before{ content:""; position:absolute; left:9px; top:8px; bottom:8px; width:2px; background:var(--sand); }
.tl-item{ position:relative; padding-bottom:34px; }
.tl-item::before{
  content:""; position:absolute; left:-31px; top:7px; width:14px; height:14px; border-radius:50%;
  background:var(--paper); border:3px solid var(--clay);
}
.tl-item b{ font-family:var(--serif); font-size:1.35rem; color:var(--ink); display:block; margin-bottom:.25em; }
.tl-item p{ margin:0; font-size:.95rem; }

/* ---------- Quote ---------- */
.quote{ border-left:3px solid var(--ochre); padding-left:clamp(20px,3vw,34px); }
.quote p{
  font-family:var(--serif); font-size:clamp(1.35rem,2.4vw,1.85rem); line-height:1.4;
  color:var(--ink); font-weight:500; margin-bottom:.7em;
}
.quote cite{ font-style:normal; font-size:.86rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600; }

/* ---------- Team ---------- */
.person{ text-align:left; }
.person .photo{ margin-bottom:14px; border-radius:var(--r-md); }
.person b{ display:block; font-family:var(--serif); font-size:1.15rem; color:var(--ink); font-weight:600; }
.person span{ display:block; font-size:.86rem; color:var(--ink-3); margin-top:2px; }

/* ---------- Table ---------- */
.table{ width:100%; border-collapse:collapse; font-size:.94rem; }
.table th,.table td{ text-align:left; padding:13px 14px; border-bottom:1px solid var(--sand); }
.table th{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); font-weight:700; }
.table td:not(:first-child){ text-align:right; font-variant-numeric:tabular-nums; }
.table th:not(:first-child){ text-align:right; }
.band-dark .table th,.band-dark .table td{ border-color:rgba(255,255,255,.16); color:rgba(255,255,255,.85); }
.band-dark .table th{ color:rgba(255,255,255,.6); }

/* ---------- Accordion ---------- */
details.faq{ border-bottom:1px solid var(--sand); padding:18px 0; }
details.faq summary{
  cursor:pointer; font-weight:650; color:var(--ink); font-size:1.03rem; list-style:none;
  display:flex; justify-content:space-between; gap:16px; align-items:center;
}
details.faq summary::-webkit-details-marker{ display:none; }
details.faq summary::after{ content:"+"; font-size:1.4rem; color:var(--clay); line-height:1; }
details.faq[open] summary::after{ content:"−"; }
details.faq p{ margin:.9em 0 0; font-size:.95rem; }

/* ---------- Product grid ---------- */
.product .photo{ border-radius:var(--r-md); margin-bottom:12px; }
.product b{ display:block; color:var(--ink); font-weight:600; font-size:1rem; }
.product span{ color:var(--ink-3); font-size:.92rem; }

/* ---------- Newsletter ---------- */
.subscribe{ display:flex; gap:10px; flex-wrap:wrap; max-width:480px; }
.subscribe input{
  flex:1 1 220px; border:1.5px solid rgba(255,255,255,.28); background:rgba(255,255,255,.08);
  border-radius:999px; padding:.9em 1.3em; color:#fff; font-family:var(--sans); font-size:.95rem;
}
.subscribe input::placeholder{ color:rgba(255,255,255,.55); }
.subscribe input:focus{ outline:2px solid var(--ochre); outline-offset:1px; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:rgba(255,255,255,.7); padding:clamp(56px,7vw,86px) 0 34px; font-size:.93rem; }
.site-footer h4{ color:#fff; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:1.1em; color:rgba(255,255,255,.55); }
.site-footer a{ color:rgba(255,255,255,.78); text-decoration:none; }
.site-footer a:hover{ color:#fff; text-decoration:underline; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.4fr; gap:44px; padding-bottom:40px; }
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:34px; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-list{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.footer-social{ display:flex; align-items:center; gap:10px; margin:4px 0 1.1em; }
.footer-social a{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06); color:rgba(255,255,255,.85); transition:background .2s, border-color .2s, color .2s; }
.footer-social a:hover, .footer-social a:focus-visible{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.45); color:#fff; text-decoration:none; }
.footer-social span{ margin-left:4px; font-size:.88rem; color:rgba(255,255,255,.6); }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.14); padding-top:24px;
  display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; font-size:.83rem; color:rgba(255,255,255,.5);
}
.footer-logo .logo-type b{ color:#fff; }
.footer-logo{ margin-bottom:16px; }
.site-footer .pill{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.22); color:rgba(255,255,255,.85); }
.site-footer .pill:hover{ background:rgba(255,255,255,.16); color:#fff; text-decoration:none; }

/* ---------- Prototype notice ---------- */
.proto-bar{
  background:var(--acacia-2); color:rgba(255,255,255,.82); font-size:.78rem; text-align:center;
  padding:8px 16px; letter-spacing:.02em;
}
.proto-bar b{ color:#E8B979; }

/* ---------- Misc ---------- */
.hr{ height:1px; background:var(--sand); border:0; margin:0; }
.pill-row{ display:flex; flex-wrap:wrap; gap:10px; }
.pill{ border:1px solid var(--sand); border-radius:999px; padding:.5em 1em; font-size:.85rem; color:var(--ink-2); background:#fff; }
.band-dark .pill{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.2); color:rgba(255,255,255,.85); }
.mb0{ margin-bottom:0; }
.mt2{ margin-top:2rem; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* ---------- Ministry-area colour coding (beadwork palette) ---------- */
[data-area]{ --area:var(--clay); }
[data-area="gospel"]{ --area:var(--area-gospel); }
[data-area="education"]{ --area:var(--area-education); }
[data-area="health"]{ --area:var(--area-health); }
[data-area="shamba"]{ --area:var(--area-shamba); }
[data-area="physical"]{ --area:var(--area-physical); }

.pillar[data-area]{ border-top-color:var(--area); border-top-width:3px; }
.pillar[data-area] li::before{ background:var(--area); }
.pillar[data-area] h3{ color:var(--area); }
.band-dark .pillar[data-area] h3{ color:#fff; }
.band-dark .pillar[data-area]{ border-top-color:var(--area); }

.tag[data-area]{ color:#fff; background:var(--area); }
.eyebrow[data-area]{ color:var(--area); }
.eyebrow[data-area]::before{ background:var(--area); }
.desig[data-area] .dot{ border-color:var(--sand); }
.desig[data-area][aria-pressed="true"]{ border-color:var(--area); background:color-mix(in srgb, var(--area) 6%, #fff); }
.desig[data-area][aria-pressed="true"] .dot{ border-color:var(--area); box-shadow:inset 0 0 0 4px var(--area); }
.area-rule{ height:4px; border-radius:2px; background:var(--area); width:56px; margin-bottom:22px; }
.cost-amt{ color:var(--area, var(--clay)); }

/* The five-colour bar, a small nod to beadwork, used as a section divider */
.bead-bar{ display:flex; height:6px; width:100%; }
.bead-bar i{ flex:1; }
.bead-bar i:nth-child(1){ background:var(--area-gospel); }
.bead-bar i:nth-child(2){ background:var(--area-education); }
.bead-bar i:nth-child(3){ background:var(--area-health); }
.bead-bar i:nth-child(4){ background:var(--area-shamba); }
.bead-bar i:nth-child(5){ background:var(--area-physical); }

.legend{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:26px; }
.legend span{ display:inline-flex; align-items:center; gap:.5em; font-size:.82rem; color:var(--ink-2); }
.legend i{ width:11px; height:11px; border-radius:50%; display:inline-block; }
.band-dark .legend span{ color:rgba(255,255,255,.8); }

.site-footer .logo img{ width:250px; }
.site-footer .logo{ margin-bottom:18px; }

/* Stronger scrim on the hero so headlines stay legible over any photograph */
.hero::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(20,17,13,.30) 0%, rgba(20,17,13,.55) 55%, rgba(20,17,13,.80) 100%);
}
.hero .photo{ z-index:0; }

/* nav pill button must not inherit the plain nav-link padding */
.nav a.btn{ padding:.7em 1.35em; border-bottom:1.5px solid transparent; }
.nav a.btn:hover{ border-color:transparent; }
.logo-tag{ max-width:16ch; letter-spacing:.12em; }
.logo img{ width:208px; }
.header-inner{ height:96px; }
@media (max-width:900px){ .logo img{ width:164px; } }
.logo-tag{ max-width:none; width:150px; }
.hero-content{ max-width:880px; }
.hero p{ max-width:700px; }

/* ---------- Seminary / case-for-support components ---------- */
.spec{ display:grid; grid-template-columns:auto 1fr; gap:0 26px; }
.spec dt{
  font-size:.7rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); padding:16px 0; border-top:1px solid var(--sand); white-space:nowrap;
}
.spec dd{ margin:0; padding:16px 0; border-top:1px solid var(--sand); color:var(--ink-2); font-size:.98rem; }
.band-dark .spec dt{ color:rgba(255,255,255,.55); border-color:rgba(255,255,255,.18); }
.band-dark .spec dd{ color:rgba(255,255,255,.85); border-color:rgba(255,255,255,.18); }
@media (max-width:620px){ .spec{ grid-template-columns:1fr; gap:0; } .spec dd{ border-top:0; padding-top:0; } }

.step-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:3px solid var(--area,var(--clay)); }
.step-row > div{ padding:24px 26px 28px; border-right:1px solid var(--sand); }
.step-row > div:last-child{ border-right:0; }
.step-row b{ display:block; font-family:var(--serif); font-size:1.9rem; color:var(--area,var(--clay)); line-height:1; margin-bottom:.35em; }
.step-row h4{ margin-bottom:.35em; }
.step-row p{ font-size:.9rem; margin:0; color:var(--ink-2); }
@media (max-width:860px){ .step-row{ grid-template-columns:1fr 1fr; } .step-row > div{ border-bottom:1px solid var(--sand); } }
@media (max-width:560px){ .step-row{ grid-template-columns:1fr; } .step-row > div{ border-right:0; } }

.calc{ background:#fff; border:1px solid var(--sand); border-radius:var(--r-lg); padding:clamp(24px,3vw,34px); box-shadow:var(--shadow-md); }
.calc label{ display:block; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.5em; }
.calc .field{ margin-bottom:20px; }
.calc input[type="text"], .calc input[type="number"]{
  width:100%; border:1.5px solid var(--sand); border-radius:var(--r-sm); padding:.8em 1em;
  font-family:var(--sans); font-size:1.05rem; color:var(--ink); background:#fff; font-variant-numeric:tabular-nums;
}
.calc input:focus{ outline:2px solid var(--ochre); outline-offset:1px; border-color:var(--ochre); }
.calc input[type="range"]{ width:100%; accent-color:var(--clay); }
.calc-out{
  background:var(--paper-2); border-left:3px solid var(--area,var(--clay)); border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:18px 20px; margin-top:6px;
}
.calc-out b{ display:block; font-family:var(--serif); font-size:clamp(1.9rem,3.4vw,2.6rem); color:var(--ink); line-height:1.05; }
.calc-out span{ font-size:.9rem; color:var(--ink-2); display:block; margin-top:.4em; }
.calc-note{ font-size:.78rem; color:var(--ink-3); margin-top:14px; }

.outcome-split{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--sand); border-radius:var(--r-md); overflow:hidden; }
.outcome-split > div{ padding:clamp(22px,3vw,32px); }
.outcome-split > div:first-child{ border-right:1px solid var(--sand); }
.outcome-split b{ display:block; font-family:var(--serif); font-size:1.35rem; color:var(--ink); margin-bottom:.4em; }
@media (max-width:700px){ .outcome-split{ grid-template-columns:1fr; } .outcome-split > div:first-child{ border-right:0; border-bottom:1px solid var(--sand); } }

/* anchored sections must clear the sticky header */
section[id], article[id], div[id]:not(.page-view){ scroll-margin-top:118px; }

/* ---------- Real photographs ---------- */
.photo-real{ position:relative; overflow:hidden; background:var(--paper-2); }
.photo-real img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-real figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:26px 16px 12px;
  background:linear-gradient(180deg, rgba(20,17,13,0), rgba(20,17,13,.72));
  color:rgba(255,255,255,.94); font-size:.78rem; line-height:1.4;
}
figure.photo-real{ margin:0; }

/* photo hero for interior pages */
.page-hero.has-photo{ position:relative; overflow:hidden; background:var(--ink); }
.page-hero.has-photo > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.page-hero.has-photo::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(20,17,13,.55), rgba(20,17,13,.72)),
             linear-gradient(90deg, rgba(126,26,25,.70), rgba(126,26,25,.18) 70%);
}
.page-hero.has-photo .wrap{ position:relative; z-index:2; }
/* keep faces true: neutral scrim, weighted to the text side */
.page-hero.has-photo::after{
  background:linear-gradient(90deg, rgba(20,17,13,.86) 0%, rgba(20,17,13,.55) 42%, rgba(20,17,13,.22) 100%),
             linear-gradient(180deg, rgba(20,17,13,.18), rgba(20,17,13,.42));
}
/* hero photo: anchor to the top so faces aren't cropped */
.page-hero.has-photo > img{ object-position:50% 6%; }

/* pills sitting on a dark page hero, the default .pill is white-on-white there */
.page-hero .pill{
  background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.38); color:#fff;
  backdrop-filter:blur(4px); font-weight:600;
}
.page-hero .pill:hover{ background:#fff; color:var(--ink); border-color:#fff; text-decoration:none; }

/* section heading stack: the area name is the headline, the line beneath is subordinate */
.sec-head{ margin-bottom:1.4em; }
.sec-head h2{ margin-bottom:.35em; }
.sec-head .deck{
  font-family:var(--serif); font-size:clamp(1.1rem,1.7vw,1.35rem); line-height:1.4;
  color:var(--area,var(--clay)); font-weight:500; margin:0 0 .9em;
}
.band-dark .sec-head .deck{ color:#E8B979; }

/* ---------- Founder's charge, a set-piece quotation ---------- */
.charge{ position:relative; }
.charge .wrap{ max-width:900px; }
.charge .mark{
  font-family:var(--serif); font-size:5rem; line-height:.7; color:var(--area-gospel);
  display:block; margin-bottom:.15em;
}
.charge blockquote{
  margin:0; font-family:var(--serif); font-weight:500;
  font-size:clamp(1.35rem,2.6vw,2.05rem); line-height:1.45; color:#fff; letter-spacing:-.01em;
}
.charge blockquote p{ margin:0 0 .7em; }
.charge blockquote p:last-child{ margin-bottom:0; }
.charge .attrib{
  margin-top:1.6em; padding-top:1.2em; border-top:1px solid rgba(255,255,255,.2);
  display:flex; flex-wrap:wrap; gap:6px 18px; align-items:baseline;
}
.charge .attrib b{ color:#fff; font-size:1rem; font-weight:650; letter-spacing:.01em; }
.charge .attrib span{ color:rgba(255,255,255,.62); font-size:.88rem; }
.charge-light blockquote{ color:var(--ink); }
.charge-light .attrib{ border-top-color:var(--sand); }
.charge-light .attrib b{ color:var(--ink); }
.charge-light .attrib span{ color:var(--ink-3); }
/* portrait beside the attribution on a charge quotation */
.charge .attrib{ align-items:center; }
.charge .attrib img{
  width:74px; height:74px; border-radius:50%; object-fit:cover; flex:none;
  border:2px solid rgba(255,255,255,.35);
}
.charge-light .attrib img{ border-color:var(--sand); }
.charge .attrib .who{ display:flex; flex-direction:column; gap:2px; }
.hero-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 42%; z-index:0; }
/* hero scrim: weighted to the text side so the photograph stays visible on the right */
.hero::before{
  background:linear-gradient(90deg, rgba(20,17,13,.88) 0%, rgba(20,17,13,.62) 42%, rgba(20,17,13,.20) 100%),
             linear-gradient(180deg, rgba(20,17,13,.22), rgba(20,17,13,.55));
}

/* full-width photograph band with a caption underneath */
.photo-band{ margin:0; }
.photo-band img{ width:100%; height:auto; display:block; border-radius:var(--r-md); }
.photo-band figcaption{
  margin-top:14px; font-size:.9rem; color:var(--ink-3); display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline;
}
.photo-band figcaption b{ color:var(--ink); font-weight:650; }
.band-dark .photo-band figcaption{ color:rgba(255,255,255,.65); }
.band-dark .photo-band figcaption b{ color:#fff; }

/* ---------- Home: the two standing asks, side by side ---------- */
.give-split{ display:grid; grid-template-columns:1fr 1fr; }
@media (max-width:900px){ .give-split{ grid-template-columns:1fr; } }
.give-split > div{
  position:relative; overflow:hidden;
  padding:clamp(40px,5.5vw,74px) clamp(24px,3.6vw,54px);
  display:flex; flex-direction:column; justify-content:center;
}
.give-split h2{ color:#fff; font-size:clamp(1.8rem,3vw,2.5rem); margin-bottom:.4em; }
.give-split .lede{ color:rgba(255,255,255,.90); }
.give-split p{ color:rgba(255,255,255,.80); }
.give-split .eyebrow{ color:#E8B979; }
.give-split .eyebrow::before{ background:#E8B979; }
.give-split .hero-cta{ margin-top:22px; }
.give-split .inner{ position:relative; z-index:2; max-width:34em; }

/* the sponsorship half has a face in it */
.gs-photo{ background:var(--acacia-2); }
.gs-photo > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:56% 62%; filter:brightness(1.12); z-index:0;
}
.gs-photo::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(20,17,13,.90) 0%, rgba(20,17,13,.62) 52%, rgba(20,17,13,.26) 100%),
             linear-gradient(180deg, rgba(20,17,13,.14), rgba(20,17,13,.44));
}
.gs-photo .inner{ max-width:26em; }
.gs-photo h2, .gs-photo .lede{ text-shadow:0 1px 16px rgba(0,0,0,.5); }
/* the general-fund half deliberately has none, that is the point of it */
.gs-plain{ background:var(--ink); }
.gs-plain .kicker{
  font-family:var(--serif); font-size:clamp(1.15rem,1.9vw,1.45rem); color:#E8B979;
  line-height:1.4; margin:0 0 .8em;
}

.evt-band{ padding:22px 0; border-top:1px solid var(--sand); border-bottom:1px solid var(--sand); }
.evt-strip{ display:flex; gap:14px 28px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.evt-strip p{ font-size:.95rem; color:var(--ink-2); }
.evt-label{
  font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--clay); margin-right:.9em; white-space:nowrap;
}
@media (max-width:620px){ .evt-label{ display:block; margin-bottom:.35em; } }

.subnav{ background:var(--paper-2); border-bottom:1px solid var(--sand); }
.subnav .wrap{ display:flex; align-items:stretch; gap:0; overflow-x:auto; scrollbar-width:none; }
.subnav .wrap::-webkit-scrollbar{ display:none; }
.subnav a{ display:inline-flex; align-items:center; white-space:nowrap; padding:13px 14px;
  font-size:.84rem; font-weight:600; color:var(--ink-3); border-bottom:2px solid transparent; }
.subnav a:first-child{ padding-left:0; }
.subnav a:hover{ color:var(--ink); }
.subnav a[aria-current="page"]{ color:var(--area,var(--clay)); border-bottom-color:var(--area,var(--clay)); }
.subnav .up{ color:var(--ink-2); }
.subnav .up::before{ content:"\2190"; margin-right:8px; color:var(--ink-3); }
.subnav .bar{ width:1px; background:var(--sand); margin:11px 14px 11px 6px; flex:0 0 auto; }
@media (max-width:700px){ .subnav a{ padding:12px 11px; font-size:.8rem; } }

.growth{ margin-top:34px; max-width:400px; }
.growth h3{ font-size:1.12rem; margin-bottom:.5em; line-height:1.28; }
.growth svg{ display:block; width:100%; height:auto; overflow:visible; }
.growth .g-note{ font-size:.86rem; color:var(--ink-2); margin:16px 0 0; line-height:1.55; }
.growth .g-note b{ color:var(--ink); font-weight:650; }
.growth .g-photo{ margin-top:26px; }
.gaxis{ stroke:var(--sand); stroke-width:1; }
.gline{ fill:none; stroke:var(--clay); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }
.garea{ fill:var(--clay); opacity:.09; }
.gdot{ fill:var(--clay); stroke:var(--paper); stroke-width:2; }
.gend{ font-family:var(--sans); font-size:11px; font-weight:700; fill:var(--ink); }
.gyear{ font-family:var(--sans); font-size:9.5px; letter-spacing:.09em; text-transform:uppercase;
  font-weight:700; fill:var(--ink-3); }
@media (max-width:900px){ .growth{ max-width:none; margin-bottom:10px; } }

.kid-panel{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  aspect-ratio:4/5; padding:24px 22px 22px; text-decoration:none; color:#fff;
  overflow:hidden;
}
.kid-panel .kface{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  font-size:0; color:transparent;      /* a portrait that fails leaves the color, not alt text */
}
.kid-panel::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.74) 0%,rgba(0,0,0,.34) 40%,rgba(0,0,0,.02) 72%);
}
.kid-panel > *:not(.kface){ position:relative; z-index:2; }
.kid-panel .krule{ width:34px; height:3px; background:rgba(255,255,255,.6); margin-bottom:16px; }
.kid-panel .kwant{
  font-family:var(--sans); font-size:.7rem; letter-spacing:.15em; text-transform:uppercase;
  font-weight:700; color:rgba(255,255,255,.75); margin:0 0 .3em;
}
.kid-panel .kdream{
  font-family:var(--serif); font-weight:600; line-height:1.04;
  font-size:clamp(1.5rem,2.2vw,1.95rem); margin:0; color:#fff;
}
.kid-panel .ksee{
  margin-top:18px; font-family:var(--sans); font-size:.82rem; font-weight:650;
  color:rgba(255,255,255,.92);
}
.kid-panel .ksee .arrow{ display:inline-block; transition:transform .18s ease; }
.card:hover .kid-panel .ksee .arrow{ transform:translateX(5px); }
.card .kid-panel + .card-body .btn{ margin-top:auto; align-self:flex-start; }

.subscribe{ display:grid; grid-template-columns:1fr 1.15fr auto; gap:10px;
  align-items:center; max-width:640px; }
.subscribe input{ flex:none; min-width:0; }
.subscribe button{ white-space:nowrap; }
@media (max-width:760px){ .subscribe{ grid-template-columns:1fr; } }