:root{
  --green-deep:#0E3B23;
  --green:#155D34;
  --green-soft:#1E7A46;
  /* brand accent — placeholder brown, sampled to sit with the greens above.
     Swap for the exact logo hex once EWA sends it (still outstanding per Grace Simbule's correction). */
  --gold:#8A5A2B;
  --gold-soft:#C9A06B;
  --cream:#FAF6EC;
  --cream-dim:#F1EAD6;
  --ink:#1B1B1B;
  --line: rgba(138,90,43,0.35);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Source Sans 3', sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  overflow-wrap:break-word; word-wrap:break-word;
}
h1,h2,h3,h4{
  font-family:'Cormorant Garamond', serif;
  font-weight:600;
  letter-spacing:0.01em;
}
img{max-width:100%; display:block;}
a{color:inherit;}
.wrap{max-width:1080px; margin:0 auto; padding:0 28px;}

/* header / nav */
header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgba(14,59,35,0.96);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 28px; max-width:1080px; margin:0 auto;
}
.brand{
  color:var(--cream); font-family:'Cormorant Garamond',serif;
  font-size:1.15rem; font-weight:700; letter-spacing:0.02em;
  display:flex; align-items:center; gap:10px; text-decoration:none;
}
.brand img{width:36px; height:36px; border-radius:50%; object-fit:cover; flex-shrink:0; background:#fff;}
nav.links{display:flex; gap:20px; flex-wrap:wrap;}
nav.links a{
  color:var(--cream-dim); text-decoration:none; font-size:0.86rem;
  border-bottom:1px solid transparent; padding-bottom:2px;
  transition:border-color .2s, color .2s;
  white-space:nowrap;
}
nav.links a:hover, nav.links a.active{border-color:var(--gold); color:#fff;}
.nav-toggle{display:none; background:none; border:none; color:var(--cream); font-size:1.7rem; cursor:pointer; line-height:1;}

@media (max-width:960px){
  nav.links{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--green-deep); flex-direction:column; gap:0;
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  nav.links.open{display:flex;}
  nav.links a{padding:14px 28px; border-bottom:1px solid rgba(255,255,255,0.06);}
  .nav-toggle{display:block;}
}

/* page banner */
.page-banner{
  position:relative;
  padding:150px 24px 70px;
  text-align:center;
  background:
    radial-gradient(ellipse at top, rgba(138,90,43,0.16), transparent 60%),
    linear-gradient(180deg, var(--green-deep) 0%, var(--green) 100%);
  color:var(--cream);
}
.page-banner-inner{position:relative; max-width:720px; margin:0 auto;}
.page-banner h1{font-size:clamp(2rem,4.6vw,3rem); color:#fff; margin-bottom:14px;}
.page-banner p{color:var(--cream-dim); font-size:1.05rem; max-width:560px; margin:0 auto;}

/* photo-backed banner variant — used on flagship programme pages (GrowHer, Little Explorers) to differ from the plain-colour banner on administrative pages */
.page-banner-photo{
  position:relative;
  padding:170px 24px 90px;
  background:
    linear-gradient(100deg, rgba(14,59,35,0.94) 0%, rgba(14,59,35,0.62) 55%, rgba(14,59,35,0.3) 100%),
    var(--banner-img) center/cover no-repeat;
  color:var(--cream);
}
.page-banner-photo .page-banner-inner{max-width:560px; margin:0; text-align:left;}
.page-banner-photo h1{font-size:clamp(2rem,4.6vw,3rem); color:#fff; margin-bottom:14px;}
.page-banner-photo p{color:var(--cream-dim); font-size:1.05rem; max-width:480px; margin:0;}
@media (max-width:820px){
  .page-banner-photo{padding:150px 20px 70px;}
  .page-banner-photo .page-banner-inner{max-width:100%;}
}

/* hero (home only) */
.hero{
  position:relative; min-height:100vh;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:
    radial-gradient(ellipse at top, rgba(138,90,43,0.2), transparent 60%),
    linear-gradient(180deg, rgba(14,59,35,0.75) 0%, rgba(21,93,52,0.6) 45%, rgba(14,59,35,0.85) 100%),
    url('/images/hero.jpg') center 30%/cover no-repeat;
  color:var(--cream); padding:140px 24px 100px; overflow:hidden;
}
.hero-inner{position:relative; max-width:740px;}
.hero-logo{width:100px; height:100px; margin:0 auto 22px; border-radius:50%; background:#fff; padding:4px; object-fit:cover;}
.eyebrow-tag{
  font-style:italic; color:var(--gold-soft);
  font-family:'Cormorant Garamond',serif; font-size:1.15rem;
  max-width:560px; margin:0 auto 22px;
}
.hero h1{font-size:clamp(2.3rem, 5.4vw, 3.6rem); line-height:1.12; color:#fff; margin-bottom:18px;}
.hero h1 em{color:var(--gold-soft); font-style:normal;}
.hero p.tagline{font-size:1.1rem; color:var(--cream-dim); max-width:520px; margin:0 auto 36px;}
.hero-cta{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}

.btn{
  display:inline-block; padding:13px 30px; font-size:0.95rem;
  text-decoration:none; border-radius:2px; font-weight:600;
  letter-spacing:0.02em; transition:transform .18s, box-shadow .18s;
}
.btn:hover{transform:translateY(-1px);}
.btn-gold{background:var(--gold); color:var(--green-deep);}
.btn-gold:hover{box-shadow:0 8px 22px rgba(138,90,43,0.35);}
.btn-outline{border:1px solid var(--gold-soft); color:var(--cream);}
.btn-outline:hover{background:rgba(255,255,255,0.06);}
.btn-green{background:var(--green-deep); color:#fff;}

section{padding:88px 0;}
.section-cream{background:var(--cream);}
.section-green{background:var(--green-deep); color:var(--cream);}
.kicker-rule{width:56px; height:2px; background:var(--gold); margin-bottom:20px;}
.section-green .kicker-rule{background:var(--gold-soft);}
h2.section-title{font-size:clamp(1.9rem,3.4vw,2.5rem); margin-bottom:22px; max-width:640px;}
.lede{font-size:1.05rem; max-width:640px; color:#3a3a3a;}
.section-green .lede{color:var(--cream-dim);}

/* focus areas grid — numbered editorial layout, deliberately distinct from the bordered link-card grid below */
.focus-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  margin-top:36px; background:var(--line); border:1px solid var(--line);
}
.focus-card{
  background:var(--green-deep); border:none;
  padding:30px 26px; color:var(--cream);
  display:flex; gap:18px; align-items:flex-start;
}
.focus-card .num{
  font-family:'Cormorant Garamond',serif; font-size:2.1rem; font-weight:700;
  color:var(--gold-soft); line-height:1; flex-shrink:0; opacity:0.75;
}
.focus-card h3{color:#fff; font-size:1.05rem; margin-bottom:6px;}
.focus-card p{color:var(--cream-dim); font-size:0.88rem;}

/* link cards */
.link-card-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:36px;}
.link-card{
  background:var(--green); border:1px solid var(--line); border-top:2px solid var(--gold);
  padding:26px 22px; text-decoration:none; color:var(--cream); transition:transform .18s;
}
.link-card:hover{transform:translateY(-3px);}
.link-card h3{color:#fff; font-size:1.15rem; margin-bottom:8px;}
.link-card p{color:var(--cream-dim); font-size:0.9rem;}

/* about / photo grid — .reverse breaks the repeated text-left/image-right pattern on alternating pages */
.about-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:center;}
.about-grid.reverse > *:first-child{order:2;}
.about-grid.reverse > *:last-child{order:1;}
.figure-frame{border:1px solid var(--line); overflow:hidden; background:var(--green);}
.figure-frame img{width:100%; height:100%; object-fit:cover;}

/* leadership */
.leader-grid{display:grid; grid-template-columns:1fr 1fr; gap:44px; margin-top:40px;}
.leader-card{background:var(--green); border:1px solid var(--line); border-top:2px solid var(--gold);}
.leader-photo{aspect-ratio:4/5; overflow:hidden;}
.leader-photo img{width:100%; height:100%; object-fit:cover; object-position:top;}
.leader-body{padding:26px 24px;}
.leader-body h3{color:#fff; font-size:1.4rem; margin-bottom:4px;}
.leader-role{color:var(--gold-soft); font-size:0.88rem; letter-spacing:0.03em; text-transform:uppercase; margin-bottom:14px;}
.leader-body p{color:var(--cream-dim); font-size:0.96rem; margin-bottom:10px;}

/* photo strip — default is a 2-up pairing; .strip-3 gives an asymmetric lead-photo layout instead of three identical crops */
.photo-strip{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:36px;}
.photo-strip .figure-frame{aspect-ratio:4/3;}
.photo-strip.strip-3{grid-template-columns:1.4fr 1fr; grid-template-rows:1fr 1fr;}
.photo-strip.strip-3 .figure-frame:first-child{grid-row:1/3; aspect-ratio:auto;}

/* coming soon badge */
.coming-soon-badge{
  display:inline-block; background:var(--gold); color:var(--green-deep);
  font-weight:700; font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase;
  padding:6px 16px; border-radius:20px; margin-bottom:18px;
}

/* checklist */
.check-list{list-style:none; margin-top:24px; display:grid; gap:14px;}
.check-list li{display:flex; gap:12px; align-items:flex-start;}
.check-list li svg{flex-shrink:0; margin-top:3px;}
.check-list .label{font-weight:600; color:#fff;}
.check-list .desc{color:var(--cream-dim); font-size:0.92rem;}

.floating-whatsapp{
  position:fixed; bottom:22px; right:22px; z-index:60;
  background:#1E7A46; color:#fff; width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,0.25); text-decoration:none;
}
.floating-whatsapp svg{width:28px; height:28px;}

.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:50px;}
.contact-item{margin-bottom:22px;}
.contact-item .label{font-size:0.78rem; letter-spacing:0.04em; color:var(--gold-soft); text-transform:uppercase; margin-bottom:4px;}
.contact-item a{color:var(--cream); text-decoration:underline; text-decoration-color:var(--gold-soft);}
.social-row{display:flex; gap:16px; margin-top:20px; flex-wrap:wrap;}
.social-row a{
  height:40px; padding:0 16px; border:1px solid var(--gold-soft); border-radius:20px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  color:var(--gold-soft); text-decoration:none; font-size:0.85rem;
}
.social-row a:hover{background:rgba(255,255,255,0.06);}
.meet-box{
  background:var(--green); border:1px solid var(--line);
  position:relative; overflow:hidden; padding:32px 24px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
}
.meet-box img{border-radius:8px; margin-bottom:16px;}

footer{
  background:var(--green-deep); color:rgba(255,255,255,0.55);
  text-align:center; padding:26px 20px; font-size:0.82rem; border-top:1px solid var(--line);
}
footer a{color:var(--gold-soft); text-decoration:none;}

/* CTA band */
.cta-band{background:var(--gold-soft); padding:70px 0; text-align:center;}
.cta-band h2{color:var(--green-deep); max-width:600px; margin:0 auto 14px;}
.cta-band p{max-width:480px; margin:0 auto 28px; color:#4a3f22;}

@media (max-width:820px){
  .about-grid, .contact-grid, .leader-grid{grid-template-columns:1fr; gap:36px;}
  .about-grid.reverse > *{order:initial;}
  .link-card-grid{grid-template-columns:repeat(2,1fr);}
  .photo-strip{grid-template-columns:1fr 1fr;}
  .photo-strip.strip-3{grid-template-columns:1fr 1fr; grid-template-rows:auto;}
  .photo-strip.strip-3 .figure-frame:first-child{grid-row:auto; aspect-ratio:4/3;}
}

@media (max-width:560px){
  .wrap{padding:0 20px;}
  .nav{padding:10px 20px;}
  nav.links a{padding:14px 20px;}
  section{padding:60px 0;}
  .page-banner{padding:130px 20px 54px;}
  .hero{padding:130px 20px 80px;}
  .hero-cta{flex-direction:column; align-items:stretch;}
  .hero-cta .btn{text-align:center;}
  footer{padding-bottom:90px;}
  .social-row a{flex:1 1 auto;}
  .link-card-grid, .focus-grid{grid-template-columns:1fr;}
  .photo-strip, .photo-strip.strip-3{grid-template-columns:1fr;}
  .photo-strip.strip-3 .figure-frame:first-child{grid-row:auto;}
}