/* Screen Africa International — shared stylesheet */

:root{
  --teal-900:#0B3A42;
  --teal-700:#105965;
  --teal-500:#128F8A;
  --teal-300:#1EBBAF;
  --ink:#16262B;
  --ink-soft:#4A5B5D;
  --paper:#FFFFFF;
  --mist:#EEF5F4;
  --line:rgba(11,58,66,0.14);
  --line-soft:rgba(11,58,66,0.08);
  --ring:rgba(30,187,175,0.32);

  --display:'Fraunces', serif;
  --sans:'Inter', -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --label:'Outfit', 'Inter', -apple-system, sans-serif;

  --ease:cubic-bezier(.22,.85,.32,1);
}

*{box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased; scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.68;
  font-size:17.5px;
  animation:bodyFadeIn .45s var(--ease) forwards;
}
@keyframes bodyFadeIn{ from{opacity:0;} to{opacity:1;} }
body.page-exit{opacity:0 !important; transition:opacity .22s ease;}
@media (prefers-reduced-motion: reduce){ body{animation:none; opacity:1;} }
img,svg{max-width:100%;display:block;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1220px; margin:0 auto; padding:0 36px;}
@media (max-width:600px){ .wrap{padding:0 22px;} }

h1,h2,h3,h4{margin:0; font-family:var(--display); font-weight:600; letter-spacing:-0.01em; color:var(--teal-900);}
em{font-style:italic; font-weight:500; color:var(--teal-500);}

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

a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2.5px solid var(--teal-300); outline-offset:3px; border-radius:4px;
}

/* ---------------- Scroll progress bar ---------------- */
.progress-bar{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg, var(--teal-300), var(--teal-500));
  z-index:100; transition:width .1s linear;
}

/* ---------------- Placeholder image blocks ---------------- */
.imgblock{
  border:1.5px dashed rgba(11,58,66,0.32);
  border-radius:18px;
  background:
    repeating-linear-gradient(135deg, rgba(11,58,66,0.045) 0 9px, transparent 9px 18px),
    #fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; color:var(--teal-700); text-align:center; padding:20px; min-height:220px;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.imgblock:hover{border-color:rgba(30,187,175,0.55);}
.imgblock .plus{
  width:42px; height:42px; border:1.5px solid var(--teal-500); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:20px; color:var(--teal-500);
  transition:transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.imgblock:hover .plus{transform:rotate(90deg) scale(1.12); background:var(--teal-500); color:#fff;}
.imgblock .label{
  font-family:var(--label); font-size:12.5px; letter-spacing:0.05em; text-transform:uppercase;
  font-weight:600; opacity:0.8;
}
.imgblock .hint{font-size:13px; opacity:0.55; max-width:240px; font-family:var(--sans);}
.imgblock.short{min-height:140px;}
.imgblock.tall{min-height:380px;}
.imgblock.avatar{min-height:150px; width:150px; aspect-ratio:1/1; border-radius:50%; margin:0 auto;}

/* ---------------- Utility bar + header ---------------- */
.utilitybar{
  background:var(--teal-900); color:rgba(255,255,255,0.85);
  font-size:13.5px; padding:9px 0; font-family:var(--sans);
}
.utilitybar .wrap{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.utilitybar a{transition:color .2s;}
.utilitybar a:hover{color:#fff;}

header{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s var(--ease);
}
header.scrolled{box-shadow:0 8px 24px -16px rgba(11,58,66,0.35);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0;}
.brand{display:flex; align-items:center; transition:transform .25s var(--ease);}
.brand:hover{transform:scale(1.03);}
.brand .logomark{height:62px; width:auto;}
@media (max-width:560px){ .brand .logomark{height:50px;} }

.navlinks{display:flex; align-items:center; gap:34px;}
.navlinks > a{
  position:relative;
  font-family:var(--sans); font-size:16px; font-weight:600; color:var(--ink); opacity:0.75;
  padding:8px 0; transition:opacity .2s, color .2s;
}
.navlinks > a::after{
  content:''; position:absolute; left:0; right:0; bottom:2px; height:2px;
  background:var(--teal-500); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.navlinks > a:hover, .navlinks > a.active{opacity:1; color:var(--teal-700);}
.navlinks > a:hover::after, .navlinks > a.active::after{transform:scaleX(1);}
.navcta{
  background:var(--teal-700); color:#fff !important; opacity:1 !important;
  padding:13px 26px !important; border-radius:100px; font-size:15px !important;
  transition:background .25s var(--ease), transform .2s var(--ease), box-shadow .25s var(--ease);
  box-shadow:0 6px 18px -8px rgba(16,89,101,0.5);
}
.navcta::after{display:none !important;}
.navcta:hover{background:var(--teal-900); transform:translateY(-2px) scale(1.03); box-shadow:0 10px 22px -8px rgba(16,89,101,0.6);}
.navcta:active{transform:translateY(0) scale(0.98);}

/* ---------------- Click-to-toggle dropdown nav ---------------- */
.navitem{position:relative; display:flex; align-items:center;}
.navtrigger{
  position:relative; display:inline-flex; align-items:center; gap:7px;
  background:none; border:none; cursor:pointer; padding:8px 0; margin:0;
  font-family:var(--sans); font-size:16px; font-weight:600; color:var(--ink); opacity:0.75;
  transition:opacity .2s, color .2s;
}
.navtrigger::after{
  content:''; position:absolute; left:0; right:0; bottom:2px; height:2px;
  background:var(--teal-500); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.navtrigger:hover{opacity:1; color:var(--teal-700);}
.navtrigger:hover::after{transform:scaleX(1);}
.navtrigger.active{opacity:1; color:var(--teal-700);}
.navtrigger.active::after{transform:scaleX(1);}
.navitem.open .navtrigger{opacity:1; color:var(--teal-700);}
.navitem.open .navtrigger::after{transform:scaleX(1);}
.navitem .caret{width:11px; height:11px; transition:transform .3s var(--ease); flex-shrink:0;}
.navitem.open .caret{transform:rotate(180deg);}

.nav-overlay{display:none;}
@media (min-width:901px){
  .nav-overlay{
    display:block; position:fixed; inset:0; z-index:55;
    background:rgba(11,58,66,0.32);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .3s var(--ease), visibility .3s;
  }
  .nav-overlay.show{opacity:1; visibility:visible; pointer-events:auto;}
}

.dropdown{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  padding-top:16px; width:min(600px,92vw);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s var(--ease), visibility .22s;
  z-index:75;
}
.navitem.align-right .dropdown{left:auto; right:0; transform:translateX(0);}
.navitem.open .dropdown{opacity:1; visibility:visible; pointer-events:auto;}

.dd-grid{
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:0; border-radius:18px; overflow:hidden;
  background:#fff; border:1px solid var(--line);
  box-shadow:0 28px 56px -22px rgba(11,58,66,0.34);
  transform:translateY(-10px); transition:transform .3s var(--ease);
}
.navitem.open .dd-grid{transform:translateY(0);}
.dd-intro{background:var(--mist); padding:26px 24px; display:flex; flex-direction:column; justify-content:center;}
.dd-intro .dd-eyebrow{font-family:var(--label); font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--teal-500); font-weight:600; margin:0 0 10px;}
.dd-intro h4{font-family:var(--display); font-size:19px; font-weight:600; color:var(--teal-900); margin:0 0 10px; line-height:1.25;}
.dd-intro .dd-desc{font-family:var(--sans); font-size:13.5px; color:var(--ink-soft); line-height:1.55; margin:0 0 16px;}
.dd-intro .dd-cta{font-family:var(--sans); font-size:13.5px; font-weight:700; color:var(--teal-700); display:inline-flex; align-items:center; gap:5px; transition:gap .25s var(--ease);}
.dd-intro .dd-cta:hover{gap:9px;}

.dd-links{padding:14px; display:flex; flex-direction:column; gap:2px;}
.dd-links a{
  display:flex; flex-direction:column; gap:3px; padding:12px 14px; border-radius:10px;
  transition:background .2s var(--ease), padding-left .2s var(--ease);
}
.dd-links a:hover{background:var(--mist); padding-left:18px;}
.dd-links .dd-title{font-family:var(--sans); font-size:14.5px; font-weight:700; color:var(--teal-900);}
.dd-links .dd-sub{font-family:var(--sans); font-size:12.5px; color:var(--ink-soft); opacity:0.8;}

.navtoggle{
  display:none; background:none; border:none; cursor:pointer; padding:8px;
  width:44px; height:44px; position:relative;
}
.navtoggle span{
  position:absolute; left:8px; right:8px; height:2.5px; background:var(--teal-900); border-radius:2px;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.navtoggle span:nth-child(1){top:14px;}
.navtoggle span:nth-child(2){top:22px;}
.navtoggle span:nth-child(3){top:30px;}
.navtoggle.open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.navtoggle.open span:nth-child(2){opacity:0;}
.navtoggle.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

@media (max-width:900px){
  .navlinks{
    position:absolute; top:100%; left:0; right:0; background:var(--paper);
    flex-direction:column; align-items:flex-start; gap:0; padding:0 36px;
    border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; opacity:0;
    transition:max-height .4s var(--ease), opacity .3s var(--ease), padding .4s var(--ease);
  }
  .navlinks.open{max-height:80vh; opacity:1; padding:10px 36px 26px; overflow-y:auto;}
  .navlinks > a{width:100%; padding:14px 0; border-bottom:1px solid var(--line-soft);}
  .navlinks > a::after{display:none;}
  .navcta{margin-top:12px; text-align:center; display:block;}
  .navtoggle{display:block;}

  .navitem{flex-direction:column; align-items:flex-start; width:100%; border-bottom:1px solid var(--line-soft);}
  .navtrigger{width:100%; justify-content:space-between; padding:14px 0;}
  .navtrigger::after{display:none;}
  .navitem .caret{display:block;}

  .dropdown{
    position:static; opacity:1; visibility:hidden; pointer-events:none; transform:none;
    padding-top:0; width:100%;
    max-height:0; overflow:hidden;
    transition:max-height .35s var(--ease), visibility 0s .35s;
  }
  .navitem.open .dropdown{
    max-height:600px; visibility:visible; pointer-events:auto;
    transition:max-height .35s var(--ease), visibility 0s;
  }
  .dd-grid{grid-template-columns:1fr; border-radius:0; transform:none; box-shadow:none; border:none;}
  .dd-intro{display:none;}
  .dd-links{padding:0 0 10px 14px; gap:0;}
  .dd-links a{padding:10px 0;}
  .dd-links .dd-sub{opacity:0.65;}
}


/* ---------------- Eyebrow + pill tag ---------------- */
.eyebrow{
  font-family:var(--label); font-size:13.5px; letter-spacing:0.09em; text-transform:uppercase;
  color:var(--teal-500); margin:0 0 18px; font-weight:600;
  display:inline-flex; align-items:center; gap:9px;
}
.eyebrow::before{
  content:''; width:8px; height:8px; border-radius:50%; background:var(--teal-300);
  box-shadow:0 0 0 4px rgba(30,187,175,0.18); flex-shrink:0;
}
.eyebrow-pill{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sans); font-size:14.5px; font-weight:600; color:var(--teal-900);
  background:var(--mist); border:1px solid rgba(30,187,175,0.3);
  padding:10px 20px 10px 14px; border-radius:100px;
  box-shadow:0 4px 14px -6px rgba(11,61,46,0.22);
  transition:box-shadow .3s var(--ease), transform .3s var(--ease);
}
.eyebrow-pill:hover{transform:translateY(-2px); box-shadow:0 8px 20px -8px rgba(11,61,46,0.3);}
.eyebrow-pill .pdot{position:relative; width:8px; height:8px; border-radius:50%; background:var(--teal-300); flex-shrink:0;}
.eyebrow-pill .pdot::after{
  content:''; position:absolute; inset:-4px; border-radius:50%;
  border:1.5px solid var(--teal-300); animation:tagPulse 2.2s ease-out infinite;
}
@keyframes tagPulse{ 0%{transform:scale(.4); opacity:.9;} 100%{transform:scale(1.8); opacity:0;} }
@media (prefers-reduced-motion: reduce){ .eyebrow-pill .pdot::after{animation:none; opacity:0;} }

section[id], .statement[id]{scroll-margin-top:104px;}

/* ---------------- Page header (editorial) ---------------- */
.pagehead{position:relative; padding:76px 0 60px; border-bottom:1px solid var(--line); overflow:hidden;}
.pagehead h1{font-size:clamp(34px,4.6vw,52px); line-height:1.1; max-width:860px; font-weight:600;}
.pagehead .lede{font-family:var(--sans); font-size:19px; max-width:700px; margin-top:22px; color:var(--ink-soft);}

/* decorative rings */
.rings{
  position:absolute; z-index:0; pointer-events:none;
  top:50%; left:82%; width:min(760px, 100vw); height:min(760px, 100vw);
  transform:translate(-50%,-50%);
}
.rings circle{fill:none; stroke:var(--ring);}
.rings .static{stroke:rgba(11,58,66,0.07); stroke-width:1; animation:breathe 6s ease-in-out infinite;}
.rings .static.d2{animation-delay:.6s;}
.rings .static.d3{animation-delay:1.2s;}
.rings .pulse{stroke-width:1.4; animation:pulse 4.6s cubic-bezier(.2,.6,.35,1) infinite;}
.rings .pulse.d2{animation-delay:1.5s;}
.rings .pulse.d3{animation-delay:3s;}
@keyframes pulse{ 0%{r:50; opacity:.9;} 100%{r:340; opacity:0;} }
@keyframes breathe{ 0%,100%{opacity:.45;} 50%{opacity:1;} }
@media (prefers-reduced-motion: reduce){ .rings .pulse{animation:none; opacity:.35;} .rings .static{animation:none; opacity:.6;} }

/* ---------------- Editorial statement blocks (Vision/Mission) ---------------- */
.statement{
  display:grid; grid-template-columns:220px 1fr; gap:44px;
  padding:50px 0; border-bottom:1px solid var(--line);
  transition:background .3s var(--ease);
  border-radius:12px;
}
.statement:hover{background:rgba(30,187,175,0.04);}
@media (max-width:760px){ .statement{grid-template-columns:1fr; gap:16px;} }
.statement .label{
  font-family:var(--label); font-size:13px; letter-spacing:0.07em; text-transform:uppercase;
  color:var(--teal-500); font-weight:600; padding-top:6px;
}
.statement h2{font-size:clamp(24px,2.8vw,32px); margin-bottom:14px; font-weight:600;}
.statement p{font-family:var(--sans); font-size:17px; color:var(--ink-soft); max-width:640px; margin:0;}

/* ---------------- Values list (editorial rows + icon chip) ---------------- */
.value-row{
  display:grid; grid-template-columns:64px 240px 1fr; gap:32px;
  padding:34px 16px; border-bottom:1px solid var(--line); align-items:flex-start;
  border-radius:14px; transition:background .3s var(--ease), transform .3s var(--ease);
}
.value-row:hover{background:rgba(30,187,175,0.05); transform:translateX(4px);}
@media (max-width:860px){ .value-row{grid-template-columns:56px 1fr; grid-template-rows:auto auto; padding:28px 10px;} .value-row .vtitle-wrap{grid-column:2;} .value-row .vbody{grid-column:1/-1; margin-top:10px;} }
.value-row .icon-chip{
  width:56px; height:56px; border-radius:50%; background:var(--mist);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:background .3s var(--ease), transform .4s var(--ease);
}
.value-row:hover .icon-chip{background:var(--teal-500); transform:rotate(-8deg) scale(1.08);}
.value-row .vicon{width:26px; height:26px; color:var(--teal-700); transition:color .3s var(--ease);}
.value-row:hover .vicon{color:#fff;}
.value-row .vtitle{font-family:var(--display); font-size:21px; font-weight:600; color:var(--teal-900);}
.value-row .vtag{font-family:var(--sans); font-size:15px; font-weight:600; color:var(--teal-700); margin-top:5px;}
.value-row .vbody p{font-family:var(--sans); margin:0; font-size:16px; color:var(--ink-soft); max-width:640px;}

/* ---------------- Cards grid ---------------- */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px;}
@media (max-width:900px){ .card-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .card-grid{grid-template-columns:1fr;} }
.card{
  border:1px solid var(--line); border-radius:20px; overflow:hidden; background:#fff;
  transition:box-shadow .35s var(--ease), transform .35s var(--ease), border-color .35s var(--ease);
}
.card:hover{box-shadow:0 22px 40px -20px rgba(11,61,46,0.3); transform:translateY(-6px); border-color:rgba(30,187,175,0.4);}
.card .imgblock{border-radius:0; border-width:0 0 1.5px 0;}
.card .cbody{padding:24px 26px 28px;}
.card .ckicker{font-family:var(--label); font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--teal-500); font-weight:600;}
.card h3{font-size:20px; margin:10px 0 10px; font-weight:600;}
.card p{font-family:var(--sans); font-size:15px; margin:0; color:var(--ink-soft);}
.card .clink{
  display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-family:var(--sans);
  font-size:14.5px; font-weight:700; color:var(--teal-700); transition:gap .25s var(--ease);
}
.card:hover .clink{gap:10px;}

/* ---------------- Sections ---------------- */
section{padding:76px 0;}

/* ---------------- Problem Statement ---------------- */
.problem-statement{position:relative; background:var(--mist); border-bottom:1px solid var(--line); padding:68px 0 60px; overflow:hidden;}
.problem-statement .rings{top:20%; left:94%; width:min(560px,90vw); height:min(560px,90vw); opacity:.7;}

.problem-lede{max-width:880px; margin-bottom:48px;}
.problem-lede p{font-family:var(--sans); font-size:19px; line-height:1.8; color:var(--ink); margin:0;}

.hl{color:var(--teal-700); font-weight:700;}
.stat-hl{
  color:var(--ink); font-weight:700; white-space:nowrap;
  text-decoration:underline; text-decoration-style:wavy; text-decoration-color:transparent;
  text-decoration-thickness:2px; text-underline-offset:5px;
  transition:color .5s var(--ease), text-decoration-color .5s var(--ease);
  transition-delay:.15s;
}
.reveal.in .stat-hl{color:var(--teal-700); text-decoration-color:var(--teal-300);}
.cite{
  font-size:11px; color:var(--teal-500); font-weight:700; text-decoration:none;
  margin-left:1px; vertical-align:super; line-height:0;
}
.cite:hover{text-decoration:underline;}

.problem-stats-row{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:56px;}
@media (max-width:860px){ .problem-stats-row{grid-template-columns:1fr; gap:18px;} }

.big-stat{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:28px 26px 26px; box-shadow:0 14px 32px -22px rgba(11,58,66,0.24);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.big-stat:hover{transform:translateY(-5px); box-shadow:0 22px 42px -20px rgba(11,58,66,0.3); border-color:rgba(30,187,175,0.4);}
.big-stat .stat-icon{
  width:42px; height:42px; border-radius:50%; background:var(--mist);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.big-stat .stat-icon svg{width:19px; height:19px; color:var(--teal-500);}
.big-stat .num{font-family:var(--display); font-size:38px; font-weight:700; color:var(--teal-700); display:block; line-height:1;}
.big-stat .lbl{font-family:var(--sans); font-size:14px; color:var(--ink-soft); margin-top:10px; display:block; line-height:1.5;}

/* staggered entrance for the three stat cards */
.problem-stats-row .big-stat:nth-child(1){transition-delay:0s;}
.problem-stats-row .big-stat:nth-child(2){transition-delay:.12s;}
.problem-stats-row .big-stat:nth-child(3){transition-delay:.24s;}

.references{border-top:1px solid var(--line); padding-top:38px; position:relative; z-index:1;}
.ref-heading{font-family:var(--label); font-size:12.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--teal-700); font-weight:600; margin:0 0 20px; display:flex; align-items:center; gap:9px;}
.ref-heading::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--teal-300); box-shadow:0 0 0 4px rgba(30,187,175,0.18);}

.ref-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
@media (max-width:760px){ .ref-grid{grid-template-columns:1fr;} }
.ref-card{
  display:block; background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:22px 24px 20px; scroll-margin-top:110px;
  transition:box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.ref-card:hover{transform:translateY(-4px); box-shadow:0 18px 36px -20px rgba(11,61,46,0.26); border-color:rgba(30,187,175,0.4);}
.ref-card:nth-child(1){transition-delay:0s;}
.ref-card:nth-child(2){transition-delay:.1s;}
.ref-top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px;}
.ref-num{font-family:var(--label); font-size:11px; color:var(--teal-300); font-weight:700; letter-spacing:0.04em;}
.ref-badge{
  font-family:var(--label); font-size:10.5px; font-weight:600; letter-spacing:0.03em;
  background:var(--mist); color:var(--teal-700); padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.ref-card h4{font-family:var(--display); font-size:16.5px; font-weight:600; color:var(--teal-900); margin:0 0 10px; line-height:1.4;}
.ref-card .ref-meta{font-family:var(--sans); font-size:13px; color:var(--ink-soft); margin:0 0 16px; line-height:1.5;}
.ref-card .ref-link{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--sans); font-size:13.5px; font-weight:700; color:var(--teal-700);
  transition:gap .25s var(--ease);
}
.ref-card:hover .ref-link{gap:10px;}
.ref-card .ref-link svg{width:13px; height:13px; flex-shrink:0;}


.band-mist{background:var(--mist);}
.section-title{display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:40px; flex-wrap:wrap;}
.section-title h2{font-size:clamp(24px,3vw,34px); font-weight:600;}
.section-title .eyebrow{margin-bottom:0;}

/* ---------------- Numbered objective list ---------------- */
.obj-row{
  display:grid; grid-template-columns:80px 1fr; gap:24px;
  padding:30px 16px; border-bottom:1px solid var(--line);
  border-radius:14px; transition:background .3s var(--ease), transform .3s var(--ease);
}
.obj-row:hover{background:rgba(30,187,175,0.05); transform:translateX(4px);}
.obj-row .onum{font-family:var(--label); font-size:17px; color:var(--teal-500); font-weight:600;}
.obj-row p{font-family:var(--sans); margin:0; font-size:17px; color:var(--ink-soft); padding-top:1px;}

/* ---------------- Impact checklist ---------------- */
.impact-grid{display:grid; grid-template-columns:1fr 1fr; gap:6px 44px;}
@media (max-width:760px){ .impact-grid{grid-template-columns:1fr;} }
.impact-item{
  display:flex; gap:16px; padding:18px 14px; border-bottom:1px solid var(--line-soft);
  border-radius:12px; transition:background .3s var(--ease), transform .3s var(--ease);
}
.impact-item:hover{background:rgba(30,187,175,0.06); transform:translateX(4px);}
.impact-item .dot{flex:none; width:9px; height:9px; border-radius:50%; background:var(--teal-500); margin-top:8px; transition:transform .3s var(--ease);}
.impact-item:hover .dot{transform:scale(1.4);}
.impact-item p{font-family:var(--sans); margin:0; font-size:16px; color:var(--ink-soft);}

/* ---------------- Stat row ---------------- */
.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:28px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:44px 0;}
@media (max-width:760px){ .stat-row{grid-template-columns:repeat(2,1fr);} }
.stat-row .stat .num{font-family:var(--display); font-size:42px; font-weight:600; color:var(--teal-700); display:block;}
.stat-row .stat .lbl{font-family:var(--label); font-size:12.5px; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-soft); opacity:0.85; font-weight:500;}

/* ---------------- Hero (home) ---------------- */
.hero{position:relative; padding:64px 0 0; overflow:hidden;}
.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; padding-bottom:64px;}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr;} }
.hero h1{font-size:clamp(38px,5.2vw,64px); line-height:1.06; font-weight:600;}
.hero .lede{font-family:var(--sans); font-size:19px; color:var(--ink-soft); max-width:540px; margin-top:22px;}

.hero-enter{opacity:0; transform:translateY(22px); animation:heroUp .8s var(--ease) forwards;}
.hero-enter.d1{animation-delay:.05s;}
.hero-enter.d2{animation-delay:.18s;}
.hero-enter.d3{animation-delay:.32s;}
.hero-enter.d4{animation-delay:.46s;}
.hero-enter.d5{animation-delay:.6s;}
@keyframes heroUp{ to{opacity:1; transform:none;} }
@media (prefers-reduced-motion: reduce){ .hero-enter{opacity:1; transform:none; animation:none;} }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:16px 32px; border-radius:100px; font-family:var(--sans); font-size:15.5px; font-weight:700;
  border:1.5px solid transparent; cursor:pointer; min-height:54px;
  transition:background .25s var(--ease), transform .2s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0) scale(0.97);}
.btn-primary{background:var(--teal-700); color:#fff; box-shadow:0 8px 20px -10px rgba(16,89,101,0.55);}
.btn-primary:hover{background:var(--teal-900); box-shadow:0 12px 26px -10px rgba(16,89,101,0.6);}
.btn-outline{border-color:var(--teal-700); color:var(--teal-700);}
.btn-outline:hover{background:var(--teal-700); color:#fff;}
.cta-row{display:flex; gap:16px; flex-wrap:wrap; margin-top:32px;}

/* ---------------- Gallery ---------------- */
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:860px){ .gallery-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .gallery-grid{grid-template-columns:1fr;} }
.partners-row{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media (max-width:760px){ .partners-row{grid-template-columns:repeat(2,1fr);} }
.team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:28px; text-align:center;}
@media (max-width:760px){ .team-grid{grid-template-columns:repeat(2,1fr);} }
.team-card{transition:transform .3s var(--ease);}
.team-card:hover{transform:translateY(-4px);}
.team-card .name{font-family:var(--display); font-weight:600; color:var(--teal-900); margin-top:16px; font-size:16px;}
.team-card .role{font-family:var(--label); font-size:12px; letter-spacing:0.04em; text-transform:uppercase; color:var(--teal-500); font-weight:500;}

/* ---------------- Community Programs ---------------- */
.program-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
@media (max-width:900px){ .program-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .program-grid{grid-template-columns:1fr;} }
.program-card{
  background:#fff; border:1px solid var(--line); border-radius:20px; padding:30px 28px;
  transition:box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.program-card:hover{transform:translateY(-5px); box-shadow:0 20px 40px -20px rgba(11,61,46,0.28); border-color:rgba(30,187,175,0.4);}
.program-card .icon-chip{width:52px; height:52px; margin-bottom:20px;}
.program-card .picon{width:24px; height:24px; color:var(--teal-700);}
.program-card h3{font-family:var(--display); font-size:19px; margin:0 0 14px; font-weight:600; color:var(--teal-900); line-height:1.3;}
.program-card ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
.program-card li{
  font-family:var(--sans); font-size:14.5px; color:var(--ink-soft); padding-left:18px; position:relative; line-height:1.55;
}
.program-card li::before{content:''; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%; background:var(--teal-500);}

.tag-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px;}
.tag{
  font-family:var(--label); font-size:12px; font-weight:600; letter-spacing:0.02em;
  background:var(--mist); color:var(--teal-700); padding:8px 16px; border-radius:100px;
  border:1px solid rgba(30,187,175,0.28);
}

/* ---------------- Contact ---------------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; min-width:0;}
.contact-grid > *{min-width:0;}
@media (max-width:860px){ .contact-grid{grid-template-columns:1fr;} }
.info-row{display:grid; grid-template-columns:130px 1fr; gap:16px; padding:20px 14px; border-bottom:1px solid var(--line-soft); border-radius:12px; transition:background .3s var(--ease);}
.info-row:hover{background:rgba(30,187,175,0.05);}
.info-row .k{font-family:var(--label); font-size:12.5px; letter-spacing:0.04em; text-transform:uppercase; color:var(--teal-500); font-weight:600; padding-top:2px;}
.info-row .v{font-family:var(--sans); font-size:16px; overflow-wrap:break-word; word-break:break-word; min-width:0;}
@media (max-width:480px){
  .info-row{grid-template-columns:1fr; gap:4px;}
}

/* ---------------- CTA band ---------------- */
.cta-band{
  background:linear-gradient(155deg, var(--teal-700) 0%, var(--teal-500) 100%);
  color:#fff; text-align:center; padding:80px 0; position:relative; overflow:hidden;
}
.cta-band::before{
  content:''; position:absolute; top:-40%; right:-10%; width:60%; padding-top:60%;
  border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,0.14), transparent 70%);
  pointer-events:none;
}
.cta-band h2{color:#fff; font-size:clamp(26px,3.2vw,36px); font-weight:600; position:relative; z-index:1;}
.cta-band p{font-family:var(--sans); max-width:560px; margin:16px auto 30px; opacity:0.9; font-size:17px; position:relative; z-index:1;}
.cta-band .cta-row{position:relative; z-index:1;}
.cta-band .btn-outline{border-color:rgba(255,255,255,0.55); color:#fff;}
.cta-band .btn-outline:hover{background:rgba(255,255,255,0.14); color:#fff;}

/* ---------------- Footer ---------------- */
footer{background:var(--teal-900); color:rgba(255,255,255,0.72); padding-top:64px; font-size:15px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.12);}
@media (max-width:860px){ .foot-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .foot-grid{grid-template-columns:1fr;} }
.foot-brand{display:flex; gap:12px; align-items:center; margin-bottom:16px;}
.foot-brand .logo-chip{
  background:#fff; border-radius:12px; padding:9px 14px; display:inline-flex; align-items:center;
  transition:transform .3s var(--ease);
}
.foot-brand .logo-chip:hover{transform:scale(1.05);}
.foot-brand .logo-chip .logomark{height:38px; width:auto;}
footer h5{font-family:var(--label); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--teal-300); margin:0 0 16px; font-weight:600;}
footer ul{list-style:none; margin:0; padding:0; display:grid; gap:11px; font-family:var(--sans);}
footer a{transition:color .2s;}
footer a:hover{color:#fff;}
.social-row{display:flex; gap:12px; margin-top:18px;}
.social-dot{
  width:40px; height:40px; border-radius:50%; border:1.5px solid rgba(255,255,255,0.28);
  display:flex; align-items:center; justify-content:center; transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.social-dot:hover{background:var(--teal-500); border-color:var(--teal-300); transform:translateY(-3px) rotate(8deg);}
.social-dot svg{width:17px; height:17px;}
.foot-bottom{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:22px 0 28px; font-size:13px; opacity:0.55; font-family:var(--sans);}

/* ---------------- Back to top ---------------- */
.to-top{
  position:fixed; right:26px; bottom:26px; z-index:80;
  width:52px; height:52px; border-radius:50%; border:none; cursor:pointer;
  background:var(--teal-700); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 28px -10px rgba(11,58,66,0.5);
  opacity:0; visibility:hidden; transform:translateY(12px) scale(.9);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background .25s var(--ease);
}
.to-top.show{opacity:1; visibility:visible; transform:none;}
.to-top:hover{background:var(--teal-900); transform:translateY(-3px);}
.to-top:active{transform:translateY(0) scale(.94);}
.to-top svg{width:22px; height:22px;}
@media (max-width:600px){ .to-top{right:16px; bottom:16px; width:46px; height:46px;} .to-top svg{width:19px; height:19px;} }

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

/* staggered children */
.card-grid .card:nth-child(1){transition-delay:0s;}
.card-grid .card:nth-child(2){transition-delay:.1s;}
.card-grid .card:nth-child(3){transition-delay:.2s;}
.gallery-grid .imgblock:nth-child(1){transition-delay:0s;}
.gallery-grid .imgblock:nth-child(2){transition-delay:.08s;}
.gallery-grid .imgblock:nth-child(3){transition-delay:.16s;}
.gallery-grid .imgblock:nth-child(4){transition-delay:.24s;}
.gallery-grid .imgblock:nth-child(5){transition-delay:.32s;}
.gallery-grid .imgblock:nth-child(6){transition-delay:.4s;}
.team-grid .team-card:nth-child(1){transition-delay:0s;}
.team-grid .team-card:nth-child(2){transition-delay:.1s;}
.team-grid .team-card:nth-child(3){transition-delay:.2s;}
.team-grid .team-card:nth-child(4){transition-delay:.3s;}
.partners-row .imgblock:nth-child(1){transition-delay:0s;}
.partners-row .imgblock:nth-child(2){transition-delay:.1s;}
.partners-row .imgblock:nth-child(3){transition-delay:.2s;}
.partners-row .imgblock:nth-child(4){transition-delay:.3s;}
.value-row:nth-child(1){transition-delay:0s;}
.value-row:nth-child(2){transition-delay:.06s;}
.value-row:nth-child(3){transition-delay:.12s;}
.value-row:nth-child(4){transition-delay:.18s;}
.value-row:nth-child(5){transition-delay:.24s;}
.value-row:nth-child(6){transition-delay:.3s;}
.obj-row:nth-child(1){transition-delay:0s;}
.obj-row:nth-child(2){transition-delay:.05s;}
.obj-row:nth-child(3){transition-delay:.1s;}
.obj-row:nth-child(4){transition-delay:.15s;}
.obj-row:nth-child(5){transition-delay:.2s;}
.obj-row:nth-child(6){transition-delay:.25s;}
.obj-row:nth-child(7){transition-delay:.3s;}
.obj-row:nth-child(8){transition-delay:.35s;}
.impact-item:nth-child(1){transition-delay:0s;}
.impact-item:nth-child(2){transition-delay:.06s;}
.impact-item:nth-child(3){transition-delay:.12s;}
.impact-item:nth-child(4){transition-delay:.18s;}
.impact-item:nth-child(5){transition-delay:.24s;}
.impact-item:nth-child(6){transition-delay:.3s;}
.impact-item:nth-child(7){transition-delay:.36s;}
.impact-item:nth-child(8){transition-delay:.42s;}
.stat-row .stat:nth-child(1){transition-delay:0s;}
.stat-row .stat:nth-child(2){transition-delay:.1s;}
.stat-row .stat:nth-child(3){transition-delay:.2s;}
.stat-row .stat:nth-child(4){transition-delay:.3s;}