:root{
  --yan-green:#1f8a3b;
  --yan-orange:#f2a71b;
  --yan-dark:#14231a;
  --yan-bg:#f5f7f4;
  --yan-card:#ffffff;
  --yan-border:#e4e8e1;
  --yan-text:#1c231d;
  --yan-muted:#6b7568;
}
body{
  background:var(--yan-bg);
  font-family:'Poppins',system-ui,-apple-system,sans-serif;
  color:var(--yan-text);
}
.avatar{
  width:34px;height:34px;border-radius:50%;background:var(--yan-orange);
  color:#231a05;display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.85rem;flex-shrink:0;
}

/* ===== Sidebar shell layout ===== */
.app-shell{display:flex;min-height:100vh;}

.sidebar{
  width:250px;flex-shrink:0;
  background:linear-gradient(180deg,var(--yan-dark) 0%,#1a2b1e 100%);
  border-right:4px solid var(--yan-orange);
  display:flex;flex-direction:column;
  position:fixed;top:0;left:0;bottom:0;z-index:1040;
  transform:translateX(0);
  transition:transform .25s ease;
}
.sidebar-brand{
  display:flex;align-items:center;gap:.6rem;padding:1.2rem 1.1rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar-logo{width:42px;height:42px;border-radius:9px;object-fit:cover;flex-shrink:0;}
.sidebar-brand-text{display:flex;flex-direction:column;line-height:1.15;color:#fff;}
.sidebar-brand-text strong{font-size:.85rem;letter-spacing:.03em;}
.sidebar-brand-text small{color:#c9d6c9;font-size:.68rem;}

.sidebar-nav{display:flex;flex-direction:column;padding:1rem .7rem;gap:.2rem;flex:1;overflow-y:auto;}
.sidebar-nav a{
  display:flex;align-items:center;gap:.65rem;padding:.65rem .8rem;border-radius:9px;
  color:#dbe4d9;text-decoration:none;font-weight:500;font-size:.9rem;
  transition:background .15s ease,color .15s ease;
}
.sidebar-nav a .nav-icon{font-size:1rem;width:20px;text-align:center;}
.sidebar-nav a:hover{background:rgba(255,255,255,.07);color:#fff;}
.sidebar-nav a.active{background:var(--yan-green);color:#fff;box-shadow:0 2px 6px rgba(31,138,59,.4);}

.sidebar-footer{padding:1rem;border-top:1px solid rgba(255,255,255,.08);}
.sidebar-user{display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem;}
.sidebar-user-text{display:flex;flex-direction:column;line-height:1.15;color:#fff;overflow:hidden;}
.sidebar-user-text strong{font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sidebar-user-text small{color:#b9c6b7;font-size:.7rem;text-transform:capitalize;}
.sidebar-logout{
  display:block;text-align:center;padding:.5rem;border-radius:8px;
  background:rgba(255,255,255,.06);color:#f2c98a;text-decoration:none;
  font-weight:600;font-size:.82rem;transition:background .15s ease;
}
.sidebar-logout:hover{background:var(--yan-orange);color:#231a05;}
.sidebar-logout:last-child{margin-bottom:0;}

.sidebar-backdrop{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1035;
}
.sidebar-backdrop.show{display:block;}

.main-wrap{flex:1;display:flex;flex-direction:column;margin-left:250px;min-width:0;}

.topbar{
  display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;
  background:var(--yan-dark);border-bottom:4px solid var(--yan-orange);
  position:sticky;top:0;z-index:1020;
}
.sidebar-toggle{
  background:transparent;border:none;color:#fff;font-size:1.3rem;line-height:1;padding:.2rem .4rem;
}
.topbar-logo{width:30px;height:30px;border-radius:7px;object-fit:cover;}
.topbar-title{color:#fff;font-weight:700;font-size:.85rem;letter-spacing:.03em;}

.page-content{flex:1;padding:1.5rem;}

@media (max-width: 991.98px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0);}
  .main-wrap{margin-left:0;}
  .page-content{padding:1rem;}
}

.page-title{font-weight:700;color:var(--yan-dark);margin-bottom:.25rem;}
.page-sub{color:var(--yan-muted);margin-bottom:1.5rem;}

.card{
  border:1px solid var(--yan-border);
  border-radius:14px;
  background:var(--yan-card);
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.card-header{
  background:transparent;
  border-bottom:1px solid var(--yan-border);
  font-weight:600;
  border-radius:14px 14px 0 0 !important;
}

.stat-card{
  border-radius:14px;border:1px solid var(--yan-border);background:#fff;
  padding:1.25rem 1.4rem;display:flex;flex-direction:column;gap:.3rem;
  box-shadow:0 1px 3px rgba(0,0,0,.04);height:100%;
}
.stat-card .stat-value{font-size:1.9rem;font-weight:700;color:var(--yan-dark);}
.stat-card .stat-label{color:var(--yan-muted);font-size:.85rem;font-weight:500;}
.stat-card .stat-icon{
  width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;margin-bottom:.4rem;
}
.icon-green{background:rgba(31,138,59,.12);color:var(--yan-green);}
.icon-orange{background:rgba(242,167,27,.16);color:#a56a05;}
.icon-dark{background:rgba(20,35,26,.08);color:var(--yan-dark);}

.btn-yan{
  background:var(--yan-green);border-color:var(--yan-green);color:#fff;font-weight:600;
}
.btn-yan:hover{background:#176c2e;border-color:#176c2e;color:#fff;}
.btn-outline-yan{border-color:var(--yan-green);color:var(--yan-green);font-weight:600;}
.btn-outline-yan:hover{background:var(--yan-green);color:#fff;}

.form-label{font-weight:600;font-size:.87rem;color:var(--yan-dark);}
.section-heading{
  font-weight:700;color:var(--yan-dark);text-transform:uppercase;font-size:.85rem;
  letter-spacing:.05em;border-left:4px solid var(--yan-orange);padding-left:.6rem;margin:1.6rem 0 1rem;
}
.section-heading:first-child{margin-top:0;}

.passport-box{
  width:120px;height:140px;border:2px dashed var(--yan-border);border-radius:10px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fafbfa;
  font-size:.75rem;color:var(--yan-muted);text-align:center;
}
.passport-box img{width:100%;height:100%;object-fit:cover;}

.table thead th{
  background:#f0f4ee;color:var(--yan-dark);font-size:.78rem;text-transform:uppercase;
  letter-spacing:.04em;border-bottom:none;
}
.table td, .table th{vertical-align:middle;}
.badge-gender-Male{background:#e6f0fb;color:#1a5fa8;}
.badge-gender-Female{background:#fde8ef;color:#b8265c;}

.login-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at top left, #1f331f, var(--yan-dark) 60%);
  padding:1rem;
}
.login-card{
  background:#fff;border-radius:16px;max-width:420px;width:100%;padding:2.2rem 2rem;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.login-brand{display:flex;flex-direction:column;align-items:center;margin-bottom:1.4rem;}
.login-logo{width:70px;height:70px;border-radius:16px;object-fit:cover;margin-bottom:.7rem;box-shadow:0 4px 14px rgba(0,0,0,.25);}
.login-brand h1{font-size:1.15rem;font-weight:700;color:var(--yan-dark);margin:0;text-align:center;}
.login-brand p{color:var(--yan-muted);font-size:.82rem;margin:0;}

.chart-card canvas{max-height:320px;}

/* ===== Public site (landing + registration) ===== */
.public-body{background:#fff;}
.public-navbar{
  background:linear-gradient(90deg,var(--yan-dark) 0%,#1f331f 100%);
  border-bottom:4px solid var(--yan-orange);
}
.public-nav-logo{width:38px;height:38px;border-radius:9px;object-fit:cover;}
.public-brand-text{display:flex;flex-direction:column;line-height:1.1;color:#fff;}
.public-brand-text strong{font-size:.9rem;letter-spacing:.03em;}
.public-brand-text small{color:#c9d6c9;font-size:.68rem;}
.public-navbar .nav-link{color:#e7ede6 !important;font-weight:500;}
.public-navbar .nav-link.active,.public-navbar .nav-link:hover{color:var(--yan-orange) !important;}

.hero{
  background:radial-gradient(circle at top right, #234a2b, var(--yan-dark) 65%);
  color:#fff;padding:5rem 0 6rem;position:relative;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;right:-80px;bottom:-80px;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle, rgba(242,167,27,.25), transparent 70%);
}
.hero h1{font-weight:700;font-size:2.4rem;line-height:1.2;}
.hero .eyebrow{
  display:inline-flex;align-items:center;gap:.4rem;background:rgba(242,167,27,.15);color:var(--yan-orange);
  padding:.35rem .9rem;border-radius:999px;font-size:.78rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;margin-bottom:1rem;
}
.hero p.lead{color:#d8e2d6;font-size:1.05rem;max-width:560px;}
.hero-logo-wrap{
  width:230px;height:230px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 20px 50px rgba(0,0,0,.35);margin:0 auto;padding:1.2rem;
}
.hero-logo-wrap img{width:100%;height:100%;object-fit:contain;}

.section-pad{padding:4.5rem 0;}
.section-eyebrow{
  color:var(--yan-green);font-weight:700;text-transform:uppercase;font-size:.8rem;letter-spacing:.06em;
}
.section-title{font-weight:700;color:var(--yan-dark);font-size:1.9rem;margin-bottom:1rem;}

.value-card{
  border:1px solid var(--yan-border);border-radius:14px;padding:1.6rem;height:100%;background:#fbfcfa;
  transition:transform .15s ease, box-shadow .15s ease;
}
.value-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.06);}
.value-icon{
  width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;background:rgba(31,138,59,.12);color:var(--yan-green);margin-bottom:.9rem;
}

.cta-band{
  background:linear-gradient(90deg,var(--yan-green),#176c2e);color:#fff;border-radius:18px;
  padding:2.8rem 2.4rem;
}
.cta-band h3{font-weight:700;}

.public-footer{background:var(--yan-dark);}

/* Public registration form (uses same public navbar/footer, plain container) */
.register-wrap{max-width:900px;margin:0 auto;}
.thankyou-box{
  max-width:560px;margin:4rem auto;text-align:center;padding:2.5rem 2rem;border:1px solid var(--yan-border);
  border-radius:16px;background:#fbfcfa;
}
.thankyou-box .check-circle{
  width:64px;height:64px;border-radius:50%;background:rgba(31,138,59,.12);color:var(--yan-green);
  display:flex;align-items:center;justify-content:center;font-size:2rem;margin:0 auto 1rem;
}

.badge-source-self{background:#e7f3ff;color:#0b5fae;}
.badge-source-admin{background:#f0f4ee;color:#3f5a45;}

@media (max-width: 767.98px){
  .hero{padding:3rem 0 3.5rem;text-align:center;}
  .hero p.lead{margin:0 auto;}
  .hero-logo-wrap{width:170px;height:170px;margin-top:2rem;}
  .section-pad{padding:3rem 0;}
}

/* ── About-section pillar cards (Community / Youth-Led / Growth / Impact) ──
   Fluid text that scales with screen width so nothing overflows on phones. */
.pillar-card{
  height:100%;
  display:flex;flex-direction:column;justify-content:center;
  padding:1.1rem .75rem;
  min-height:110px;
}
.pillar-title{
  font-weight:700;color:var(--yan-green);line-height:1.15;
  /* scales between 1.05rem (small phones) and 1.7rem (desktop) */
  font-size:clamp(1.05rem, 2.2vw + .55rem, 1.7rem);
  overflow-wrap:break-word;
}
.pillar-sub{
  color:#6b7568;margin-top:.35rem;line-height:1.35;
  font-size:clamp(.72rem, 1vw + .5rem, .85rem);
}
@media (max-width: 360px){
  /* very narrow phones: give the cards a bit more breathing room */
  .pillar-card{min-height:96px;padding:.9rem .5rem;}
}

/* ── Pagination (members list) ── */
.pagination .page-link{
  color:var(--yan-green);border-color:#dfe5dc;font-weight:600;font-size:.85rem;
}
.pagination .page-link:hover{background:#eef6ef;color:var(--yan-green);}
.pagination .page-item.active .page-link{
  background:var(--yan-green);border-color:var(--yan-green);color:#fff;
}
.pagination .page-item.disabled .page-link{color:#aab3a6;}

/* ── Landing page: live registration stats band ── */
.stats-band{
  background:linear-gradient(135deg, var(--yan-dark) 0%, #1c2e20 100%);
  padding:2.25rem 0;
}
.stat-box-num{
  font-weight:800;color:#fff;line-height:1.1;
  font-size:clamp(1.6rem, 3.2vw + .6rem, 2.6rem);
  font-variant-numeric:tabular-nums;
}
.stat-box-label{
  color:rgba(255,255,255,.72);margin-top:.35rem;
  font-size:clamp(.72rem, 1vw + .4rem, .85rem);
  text-transform:uppercase;letter-spacing:.04em;
}

/* ── Landing page: leading chapters leaderboard ── */
.leaderboard-card{
  background:#fff;border:1px solid #e8ede6;border-radius:16px;
  padding:1.5rem 1.5rem 1rem;box-shadow:0 4px 18px rgba(20,35,26,.06);
}
.leaderboard-row{
  display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;
}
.leaderboard-name{
  width:110px;flex-shrink:0;font-weight:600;font-size:.85rem;color:var(--yan-dark);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.leaderboard-bar-wrap{
  flex:1;background:#eef3ec;border-radius:6px;height:10px;overflow:hidden;
}
.leaderboard-bar{
  height:100%;background:linear-gradient(90deg, var(--yan-green), #2fae52);
  border-radius:6px;transition:width .6s ease;
}
.leaderboard-count{
  width:44px;flex-shrink:0;text-align:right;font-weight:700;font-size:.85rem;color:var(--yan-green);
}
@media (max-width: 480px){
  .leaderboard-name{width:80px;font-size:.78rem;}
}

/* ── Hero: separator dots in headline ── */
.hero-dot{ color: var(--yan-orange); margin: 0 .35rem; font-weight:400; }

/* ── Live Grassroots Coverage Tracker (dark dashboard) ── */
.coverage-tracker{
  background:linear-gradient(135deg, var(--yan-dark) 0%, #142118 100%);
  padding:3rem 0 2.5rem;
}
.tracker-eyebrow{
  color:var(--yan-orange);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;font-size:.8rem;
}
.tracker-sub{ color:rgba(255,255,255,.65); font-size:.88rem; max-width:520px; margin:.5rem auto 0; }
.tracker-box{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:1.25rem .75rem;height:100%;
}
.tracker-box-alt{ background:rgba(31,138,59,.12); border-color:rgba(31,138,59,.3); }
.tracker-num{
  font-weight:800;color:#fff;line-height:1.1;font-variant-numeric:tabular-nums;
  font-size:clamp(1.5rem, 3vw + .5rem, 2.4rem);
}
.tracker-label{
  color:rgba(255,255,255,.68);margin-top:.4rem;text-transform:uppercase;
  letter-spacing:.04em;font-size:clamp(.68rem, .9vw + .4rem, .8rem);
}

/* ── Core Program Pillar cards ── */
.pillar-program-card{
  background:#fff;border:1px solid #e8ede6;border-radius:16px;
  padding:1.75rem 1.5rem;height:100%;transition:transform .15s ease, box-shadow .15s ease;
}
.pillar-program-card:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(20,35,26,.08); }

/* ── Nav dropdown tuning for the dark public navbar ── */
.public-navbar .dropdown-menu{
  border:none;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.18);
  padding:.4rem;margin-top:.5rem;
}
.public-navbar .dropdown-item{ border-radius:6px;font-size:.9rem;padding:.5rem .75rem; }
.public-navbar .dropdown-item:hover{ background:#eef6ef;color:var(--yan-green); }

/* ══════════════════════════════════════════════════════════════
   Interactivity & motion layer
   ══════════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; }

/* ── Sticky navbar: shrinks + gains shadow after scrolling ── */
.public-navbar{
  transition: padding .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.public-navbar.navbar-scrolled{
  padding-top:.35rem;padding-bottom:.35rem;
  box-shadow:0 6px 24px rgba(0,0,0,.18);
  background-color:rgba(20,35,26,.97) !important;
}

/* ── Hero: floating gradient blobs (pure CSS, no JS/image cost) ── */
.hero{ position:relative; overflow:hidden; }
.hero-blob{
  position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;
  pointer-events:none;z-index:0;
}
.hero-blob-1{
  width:420px;height:420px;background:var(--yan-green);
  top:-120px;right:-100px;animation:blobFloat 9s ease-in-out infinite;
}
.hero-blob-2{
  width:320px;height:320px;background:var(--yan-orange);
  bottom:-100px;left:-80px;animation:blobFloat 11s ease-in-out infinite reverse;
}
@keyframes blobFloat{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(30px,-20px) scale(1.08); }
}
.hero .container{ position:relative; z-index:1; }

/* ── Button pulse (draws the eye to the primary CTA) ── */
.btn-pulse{ animation:btnPulse 2.4s ease-in-out infinite; }
@keyframes btnPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(31,138,59,.45); }
  50%{ box-shadow:0 0 0 10px rgba(31,138,59,0); }
}
.btn-pulse:hover{ animation:none; }

/* ── Interactive state chips (chapters section) ── */
.state-chip{
  transition:transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
  cursor:default;
}
.state-chip:hover{
  transform:translateY(-3px) scale(1.06);
  background-color:var(--yan-green) !important;
  color:#fff !important;border-color:var(--yan-green) !important;
}

/* ── Testimonial slider cards ── */
.voice-card{
  background:#fff;border:1px solid #e8ede6;border-radius:16px;
  padding:1.75rem 1.5rem;height:100%;min-height:210px;
  display:flex;flex-direction:column;
  box-shadow:0 4px 16px rgba(20,35,26,.05);
}
.voice-avatar{
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg, var(--yan-green), #2fae52);
  color:#fff;font-weight:700;font-size:1.1rem;
  display:flex;align-items:center;justify-content:center;margin-bottom:1rem;
}
.voice-quote{ color:#3d4a3d;font-size:.92rem;line-height:1.55;flex:1; }
.voice-name{ font-weight:700;color:var(--yan-green);font-size:.85rem;margin-top:.75rem; }
.voices-swiper{ padding-bottom:2.75rem; }
.voices-swiper .swiper-pagination-bullet-active{ background:var(--yan-green); }

/* ── Generic reveal fallback if AOS hasn't loaded yet ── */
[data-aos]{ }

/* ── Tracker/pillar cards: subtle lift on hover for interactivity ── */
.tracker-box{ transition:transform .2s ease, border-color .2s ease; }
.tracker-box:hover{ transform:translateY(-4px); border-color:rgba(255,255,255,.2); }

/* ── Respect users who prefer reduced motion ── */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .hero-blob, .btn-pulse{ animation:none; }
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* ══════════════════════════════════════════════════════════════
   Stylish multi-column footer with quick links
   ══════════════════════════════════════════════════════════════ */
.site-footer{
  background:linear-gradient(180deg, var(--yan-dark) 0%, #0e1811 100%);
}
.footer-brand-text{ display:flex;flex-direction:column;line-height:1.25; }
.footer-brand-text strong{ color:#fff;font-size:1.05rem;letter-spacing:.02em; }
.footer-brand-text small{ color:var(--yan-orange);font-size:.72rem;font-weight:600;letter-spacing:.04em; }
.footer-about{
  color:rgba(255,255,255,.6);font-size:.85rem;line-height:1.6;max-width:340px;
}
.footer-heading{
  color:#fff;font-weight:700;font-size:.85rem;text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:1rem;position:relative;padding-bottom:.6rem;
}
.footer-heading::after{
  content:'';position:absolute;left:0;bottom:0;width:32px;height:3px;
  background:var(--yan-orange);border-radius:2px;
}
.footer-links{ list-style:none;padding:0;margin:0; }
.footer-links li{ margin-bottom:.65rem; }
.footer-links a{
  color:rgba(255,255,255,.65);text-decoration:none;font-size:.88rem;
  transition:color .15s ease,padding-left .15s ease;position:relative;
}
.footer-links a:hover{ color:var(--yan-orange);padding-left:4px; }
.footer-contact li{ color:rgba(255,255,255,.65);font-size:.85rem; }
.footer-contact a{ color:rgba(255,255,255,.65); }
.footer-contact a:hover{ color:var(--yan-orange); }

/* Social icon circles */
.footer-social-icon{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.08);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.85rem;text-decoration:none;
  transition:background-color .2s ease, transform .2s ease;
}
.footer-social-icon:hover{
  background:var(--yan-green);transform:translateY(-3px);color:#fff;
}

/* Bottom strip */
.footer-bottom{
  background:rgba(0,0,0,.25);border-top:1px solid rgba(255,255,255,.08);
}
.footer-bottom-link{ color:rgba(255,255,255,.65);text-decoration:none; }
.footer-bottom-link:hover{ color:var(--yan-orange); }

/* Back-to-top floating button */
.back-to-top{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:1050;
  width:46px;height:46px;border-radius:50%;border:none;
  background:var(--yan-green);color:#fff;font-size:1.2rem;font-weight:700;
  box-shadow:0 6px 20px rgba(20,35,26,.3);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, background-color .2s ease;
}
.back-to-top.visible{ opacity:1;visibility:visible;transform:translateY(0); }
.back-to-top:hover{ background:var(--yan-orange); }

/* ══════════════════════════════════════════════════════════════
   Original illustration placements (code-drawn, see /assets/images)
   ══════════════════════════════════════════════════════════════ */

/* Hero: illustration glows behind the logo circle */
.hero-art-stack{ position:relative;display:flex;align-items:center;justify-content:center; }
.hero-art-backdrop{
  position:absolute;width:115%;max-width:440px;opacity:.9;
  border-radius:50%;pointer-events:none;user-select:none;
  animation:artSpin 60s linear infinite;
}
@keyframes artSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
.hero-logo-wrap{ position:relative;z-index:1; }

/* Coverage tracker: same emblem, very faint, as a watermark */
.coverage-tracker-art{ position:relative;overflow:hidden; }
.coverage-tracker-art::before{
  content:'';position:absolute;top:50%;left:50%;
  width:900px;height:900px;transform:translate(-50%,-50%);
  background:url('images/hero_illustration.webp') center/cover no-repeat;
  opacity:.06;pointer-events:none;
}
.coverage-tracker-art .container{ position:relative;z-index:1; }

@media (prefers-reduced-motion: reduce){
  .hero-art-backdrop{ animation:none; }
}

/* ── "Community in Action" photo slots ── */
.photo-slot{
  height:260px;border-radius:16px;background-size:cover;background-position:center;
  position:relative;overflow:hidden;box-shadow:0 6px 20px rgba(20,35,26,.08);
  transition:transform .2s ease;
}
.photo-slot:hover{ transform:translateY(-4px); }
.photo-slot-empty{
  background:linear-gradient(135deg, #eaf3ea 0%, #fdf1d8 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
}
.photo-slot-icon{ font-size:2rem;opacity:.4; }
.photo-slot-caption{
  position:absolute;left:0;right:0;bottom:0;padding:.9rem 1rem;
  color:#fff;font-weight:700;font-size:.9rem;
  background:linear-gradient(0deg, rgba(20,35,26,.75) 0%, rgba(20,35,26,0) 100%);
}
.photo-slot-empty .photo-slot-caption{
  color:var(--yan-dark);background:none;position:static;padding:0;text-align:center;
  font-weight:600;opacity:.65;
}

/* ══════════════════════════════════════════════════════════════
   Real photo placements (user-generated imagery, see conversation)
   ══════════════════════════════════════════════════════════════ */

/* Hero: real photo card layered over the illustration glow */
.hero-photo-card{
  position:relative;z-index:1;border-radius:20px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.35);max-width:440px;
}
.hero-photo-card img{ width:100%;display:block; }
.hero-logo-badge{
  position:absolute;bottom:14px;left:14px;width:52px;height:52px;border-radius:50%;
  background:#fff;padding:6px;box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.hero-logo-badge img{ width:100%;height:100%;object-fit:contain;border-radius:50%; }

/* Chapters section: map presentation photo */
.chapters-photo-frame{
  max-width:640px;border-radius:18px;overflow:hidden;
  box-shadow:0 12px 34px rgba(20,35,26,.14);
}
.chapters-photo-frame img{ width:100%;display:block; }

/* CTA band: photo background with dark-to-green overlay for readable text */
.cta-band-photo{
  background:
    linear-gradient(100deg, rgba(20,35,26,.88) 10%, rgba(31,138,59,.82) 100%),
    url('images/join_movement.jpg') center/cover no-repeat;
  position:relative;
}
.cta-band-content{ position:relative;z-index:1; }

/* ══════════════════════════════════════════════════════════════
   Sliding hero carousel (cbmnigeria.org-style layout)
   ══════════════════════════════════════════════════════════════ */

.hero-swiper{ padding:4.5rem 0 5rem; }
.hero-swiper .swiper-slide{ height:auto; }

.hero-badge{
  display:inline-flex;align-items:center;gap:.4rem;
  border:1px solid rgba(47,174,82,.5);color:#7bd398;
  padding:.35rem 1rem;border-radius:999px;font-size:.75rem;font-weight:700;
  letter-spacing:.06em;margin-bottom:1.2rem;
}

.hero-heading{
  font-weight:800;line-height:1.15;color:#fff;
  font-size:clamp(2rem, 3.2vw + 1rem, 3rem);margin-bottom:.9rem;
}
.hl-gold{ color:var(--yan-orange); }
.hl-box{
  background:rgba(31,138,59,.35);border-radius:8px;
  padding:.05em .3em;display:inline-block;
}

.hero-kicker{
  color:#a9b8a5;font-weight:700;letter-spacing:.08em;font-size:.85rem;
  text-transform:uppercase;margin-bottom:.9rem;
}
.hero-swiper p.lead{ color:#c3cfc0;font-size:1rem;max-width:520px; }

/* Buttons: gold primary / green outline, matching the screenshot */
.btn-hero-primary{
  background:var(--yan-orange);border:none;color:#1a1405;font-weight:700;
  border-radius:999px;transition:transform .15s ease, box-shadow .15s ease;
}
.btn-hero-primary:hover{ transform:translateY(-2px);box-shadow:0 10px 24px rgba(242,167,27,.3);color:#1a1405; }
.btn-hero-outline{
  background:transparent;border:1.5px solid #2fae52;color:#7bd398;font-weight:700;
  border-radius:999px;transition:background-color .15s ease, transform .15s ease;
}
.btn-hero-outline:hover{ background:rgba(47,174,82,.15);color:#a8e8bc;transform:translateY(-2px); }
.btn-hero-primary span, .btn-hero-outline span{ margin-left:.35rem; }

/* Photo frame with caption card + floating action button */
.hero-photo-frame{
  position:relative;border-radius:20px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.4);
}
.hero-photo-frame img{ width:100%;display:block;aspect-ratio:4/3;object-fit:cover; }
.hero-photo-caption{
  position:absolute;left:16px;bottom:16px;right:80px;
  background:rgba(10,18,12,.82);backdrop-filter:blur(2px);
  border-radius:12px;padding:.75rem .9rem;
  display:flex;align-items:center;gap:.6rem;color:#fff;
}
.hero-photo-caption-icon{ font-size:1.3rem;flex-shrink:0; }
.hero-photo-caption strong{ font-size:.88rem;display:block; }
.hero-photo-caption div div{ font-size:.75rem;color:#c3cfc0; }
.hero-photo-fab{
  position:absolute;right:16px;bottom:16px;width:46px;height:46px;border-radius:50%;
  background:var(--yan-green);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;text-decoration:none;box-shadow:0 8px 20px rgba(0,0,0,.35);
  transition:transform .15s ease, background-color .15s ease;
}
.hero-photo-fab:hover{ background:var(--yan-orange);color:#1a1405;transform:scale(1.08); }

/* Slider nav arrows */
.hero-swiper-prev, .hero-swiper-next{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;cursor:pointer;transition:background-color .15s ease;
  line-height:1;
}
.hero-swiper-prev:hover, .hero-swiper-next:hover{ background:rgba(47,174,82,.35); }
.hero-swiper-prev{ left:12px; }
.hero-swiper-next{ right:12px; }
@media (min-width: 992px){
  .hero-swiper-prev{ left:2.5rem; }
  .hero-swiper-next{ right:2.5rem; }
}

.hero-swiper-pagination{
  position:relative !important;margin-top:2rem;display:flex;justify-content:center;
}
.hero-swiper .swiper-pagination-bullet{
  background:rgba(255,255,255,.35);opacity:1;width:8px;height:8px;
}
.hero-swiper .swiper-pagination-bullet-active{ background:var(--yan-green);width:22px;border-radius:4px; }

@media (max-width: 767px){
  .hero-photo-caption{ right:16px;bottom:64px; }
  .hero-photo-fab{ bottom:16px; }
}

/* ══════════════════════════════════════════════════════════════
   Defensive fallback: if Swiper's JS fails to run for any reason
   (blocked script, JS error elsewhere on the page, etc.), keep the
   hero readable instead of showing overlapping/crushed slides.
   Swiper adds .swiper-initialized to the container once JS runs;
   before that (or if it never happens) this rule keeps only the
   first slide visible and normally laid out.
   ══════════════════════════════════════════════════════════════ */
.hero-swiper:not(.swiper-initialized) .swiper-wrapper{
  display:block;
}
.hero-swiper:not(.swiper-initialized) .swiper-slide{
  display:none;
}
.hero-swiper:not(.swiper-initialized) .swiper-slide:first-child{
  display:block;
}
.hero-swiper:not(.swiper-initialized) .hero-swiper-prev,
.hero-swiper:not(.swiper-initialized) .hero-swiper-next,
.hero-swiper:not(.swiper-initialized) .hero-swiper-pagination{
  display:none;
}