/* ============================================================
   ASPI — token system
   ============================================================ */
:root{
  --bg: #061711;
  --bg-2: #081f16;
  --bg-3: #0b291d;

  --glass: rgba(17, 48, 36, 0.46);
  --glass-strong: rgba(17, 52, 39, 0.62);
  --glass-border: rgba(140, 255, 199, 0.14);
  --glass-border-strong: rgba(140, 255, 199, 0.24);

  --green-300: #86efac;
  --green-400: #4ade80;
  --green-500: #22c55e;
  --green-600: #15974a;
  --emerald-glow: #12b981;
  --amber: #e7b24b;
  --amber-soft: #f4cd7c;

  --text: #eaf6ef;
  --text-muted: #a9c9ba;
  --text-dim: #71988a;

  --radius-l: 26px;
  --radius-m: 18px;
  --radius-s: 12px;

  --shadow-glow: 0 20px 60px -20px rgba(18, 185, 129, 0.35);
  --shadow-soft: 0 10px 40px -18px rgba(0,0,0,0.6);

  --font-display: "Fraunces", "Georgia", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "Space Mono", "Courier New", monospace;

  color-scheme: dark;
}

html[data-theme="light"]{
  --bg: #f2faf5;
  --bg-2: #e7f4ec;
  --bg-3: #dcefe3;

  --glass: rgba(255, 255, 255, 0.55);
  --glass-strong: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(15, 120, 80, 0.16);
  --glass-border-strong: rgba(15, 120, 80, 0.28);

  --green-300: #16a34a;
  --green-400: #0f9d63;
  --green-500: #0c8a54;
  --green-600: #0a6e43;
  --emerald-glow: #0f9d63;
  --amber: #c2872e;
  --amber-soft: #a16c22;

  --text: #0b2318;
  --text-muted: #3e6153;
  --text-dim: #5d7c6e;

  --shadow-glow: 0 20px 60px -24px rgba(15, 157, 99, 0.30);
  --shadow-soft: 0 10px 34px -18px rgba(15, 60, 40, 0.22);

  color-scheme: light;
}

/* ============================================================
   Reset & base
   ============================================================ */
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color .5s ease, color .5s ease;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family: var(--font-display); font-weight: 600; margin: 0 0 .4em; letter-spacing: -0.01em; }
p{ margin: 0 0 1em; }
.wrap{ width: min(1180px, 92%); margin-inline: auto; }
svg{ width:1em; height:1em; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior:auto !important; }
}

/* ============================================================
   Ambient background — signature growth-ring motif
   ============================================================ */
.ambient{
  position: fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
}
.ambient .glow{ position:absolute; border-radius:50%; filter: blur(90px); opacity:.55; }
.glow--1{ width:640px; height:640px; top:-220px; left:-160px; background: radial-gradient(circle, var(--emerald-glow), transparent 70%); }
.glow--2{ width:560px; height:560px; bottom:-200px; right:-140px; background: radial-gradient(circle, var(--amber), transparent 72%); opacity:.22; }
html[data-theme="light"] .glow--1{ opacity:.28; }
html[data-theme="light"] .glow--2{ opacity:.16; }

.rings{ position:absolute; fill:none; stroke: var(--green-400); opacity:.10; }
.rings circle{ stroke:currentColor; fill:none; stroke-width:1; }
.rings--a{ width:900px; height:900px; top:-260px; right:-320px; animation: spin 140s linear infinite; }
.rings--b{ width:620px; height:620px; bottom:-220px; left:-260px; animation: spin 100s linear infinite reverse; opacity:.08; }
@keyframes spin{ to{ transform: rotate(360deg); } }

/* small ring mark used before eyebrow labels */
.ring-mark{ display:inline-flex; width:18px; height:18px; color: var(--green-400); }
.ring-mark svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.4; }

/* ============================================================
   Glass utility
   ============================================================ */
.glass{
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-soft);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  padding: .9em 1.5em;
  border-radius: 999px;
  font-family: var(--font-body); font-weight:600; font-size:.95rem;
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  white-space: nowrap;
}
.btn svg{ width:1.05em; height:1.05em; transition: transform .25s ease; }
.btn:hover svg{ transform: translateX(3px); }
.btn-primary{
  background: linear-gradient(135deg, var(--green-500), var(--green-600));
  color: #06180f;
  box-shadow: 0 14px 34px -12px rgba(34,197,94,.55);
}
html[data-theme="light"] .btn-primary{ color:#f3fff8; }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(34,197,94,.65); }
.btn-ghost{
  background: var(--glass);
  border-color: var(--glass-border-strong);
  color: var(--text);
  backdrop-filter: blur(14px);
}
.btn-ghost:hover{ border-color: var(--green-400); transform: translateY(-2px); }
.btn-donate{
  background: transparent;
  border: 1px solid var(--glass-border-strong);
  color: var(--text);
  padding: .65em 1.3em;
  font-size:.9rem;
}
.btn-donate:hover{ background: var(--glass); border-color: var(--amber); color: var(--amber-soft); }

/* ============================================================
   Header
   ============================================================ */
.site-header{
  position: sticky; top:0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background .4s ease, border-color .4s ease, backdrop-filter .4s ease;
}
.site-header.scrolled{
  background: var(--glass-strong);
  border-color: var(--glass-border);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 0;
  gap: 24px;
}
.brand{ display:flex; align-items:center; gap:.7em; }
.brand-mark{ height: 38px; width: 38px; flex-shrink:0; filter: drop-shadow(0 2px 10px rgba(34,197,94,.35)); transition: transform .3s ease; }
.brand:hover .brand-mark{ transform: rotate(-6deg) scale(1.05); }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-text strong{ font-family: var(--font-display); font-size:1.15rem; letter-spacing:.02em; }
.brand-text em{ font-style:normal; font-size:.68rem; color: var(--text-dim); font-family: var(--font-mono); letter-spacing:.02em; }

.main-nav{ display:flex; gap: 2rem; }
.main-nav a{
  font-size:.94rem; font-weight:500; color: var(--text-muted);
  position:relative; padding: 4px 0;
  transition: color .25s ease;
}
.main-nav a:hover{ color: var(--text); }
.main-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1.5px;
  background: var(--green-400); transition: right .3s ease;
}
.main-nav a:hover::after{ right:0; }

.header-actions{ display:flex; align-items:center; gap: .8rem; }
.theme-toggle{
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  background: var(--glass); border:1px solid var(--glass-border);
  color: var(--text); cursor:pointer;
  transition: border-color .25s ease, transform .25s ease;
}
.theme-toggle:hover{ border-color: var(--green-400); transform: rotate(12deg); }
.theme-toggle .icon{ width:18px; height:18px; }
.theme-toggle .icon-moon{ display:none; }
html[data-theme="light"] .theme-toggle .icon-sun{ display:none; }
html[data-theme="light"] .theme-toggle .icon-moon{ display:block; }

.nav-toggle{
  display:none; width:40px; height:40px; border-radius:50%;
  border:1px solid var(--glass-border); background: var(--glass);
  cursor:pointer; position:relative;
}
.nav-toggle span{
  position:absolute; left:11px; right:11px; height:1.6px; background: var(--text);
  transition: transform .3s ease, opacity .3s ease;
}
.nav-toggle span:nth-child(1){ top:14px; }
.nav-toggle span:nth-child(2){ top:19.5px; }
.nav-toggle span:nth-child(3){ top:25px; }
.nav-toggle.open span:nth-child(1){ transform: translateY(5.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform: translateY(-5.5px) rotate(-45deg); }

/* ============================================================
   Hero
   ============================================================ */
.hero{ position:relative; padding-top: 64px; }
.hero-media{
  position:absolute; inset:0; height: 100%;
  overflow:hidden; background: #0b291d;
}
.hero-slide{
  position:absolute; inset:0;
  background-size: cover; background-position: center 30%; background-repeat:no-repeat;
  opacity:0; will-change: opacity, transform;
  animation: heroSlideshow 25s ease-in-out infinite;
}
@keyframes heroSlideshow{
  0%      { opacity:0; transform: scale(1.04); }
  2%      { opacity:1; }
  17%     { opacity:1; transform: scale(1.12); }
  20%     { opacity:0; transform: scale(1.12); }
  100%    { opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .hero-slide{ animation: none; opacity:0; }
  .hero-slide:first-child{ opacity:1; }
}
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(5,17,12,.55) 0%, rgba(5,17,12,.72) 55%, var(--bg) 100%),
    linear-gradient(100deg, rgba(4,20,13,.55) 10%, rgba(4,20,13,.4) 60%);
}
html[data-theme="light"] .hero-scrim{
  background:
    linear-gradient(180deg, rgba(4,20,13,.6) 0%, rgba(4,20,13,.78) 55%, var(--bg) 100%),
    linear-gradient(100deg, rgba(3,16,10,.6) 10%, rgba(3,16,10,.45) 60%);
}
.hero-inner{
  position:relative; z-index:2;
  padding: 130px 0 70px;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.eyebrow{
  display:flex; align-items:center; justify-content:center; gap:.5em;
  font-family: var(--font-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--green-300); margin-bottom: 1.1em;
}
.eyebrow.center{ justify-content:center; }
.hero-title{
  font-size: clamp(2.3rem, 5.4vw, 3.9rem);
  line-height: 1.06;
  color: #f5fff9;
}
.hero-title span{ color: var(--green-300); font-style: italic; }
html[data-theme="light"] .hero-title span{ color: #6ee7a3; }
.hero-sub{
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: #d3e9dd;
  max-width: 560px;
  margin: 1.2em auto 0;
}
.hero-ctas{ display:flex; flex-wrap:wrap; justify-content:center; gap: 1rem; margin-top: 2.2em; }

.hero .btn-ghost{ color: #f5fff9; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.08); }
.hero .btn-ghost:hover{ border-color: var(--green-300); }
.hero .eyebrow{ color: var(--green-300); }

.hero-quote-wrap{ position:relative; z-index:2; padding-bottom: 90px; display:flex; justify-content:center; }
.hero-quote{
  max-width: 620px; padding: 1.7em 2.2em;
  border-left: none; border-top: 3px solid var(--green-400);
  text-align:center;
}
.hero-quote p{
  font-family: var(--font-display); font-style: italic; font-size: 1.15rem;
  color: var(--text); margin-bottom:.5em; line-height:1.5;
}
.hero-quote cite{ font-style:normal; font-size:.82rem; color: var(--text-dim); font-family: var(--font-mono); }

/* ============================================================
   Photo treatment — unify disparate source photos, smooth motion
   ============================================================ */
.about-frame, .field-card, .gallery-item{ position: relative; isolation: isolate; }
.about-frame::after, .field-card::after, .gallery-item::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background: linear-gradient(160deg, rgba(18,185,129,.20) 0%, rgba(6,20,14,0) 45%, rgba(6,20,14,.12) 100%);
  mix-blend-mode: overlay;
  border-radius: inherit;
}
html[data-theme="light"] .about-frame::after,
html[data-theme="light"] .field-card::after,
html[data-theme="light"] .gallery-item::after{
  background: linear-gradient(160deg, rgba(15,157,99,.14) 0%, rgba(255,255,255,0) 45%, rgba(8,35,22,.08) 100%);
}
.about-frame img, .field-card img, .gallery-item img{
  transition: transform 1.1s cubic-bezier(.16,.7,.24,1), filter .5s ease;
  will-change: transform;
}

/* ============================================================
   Section basics
   ============================================================ */
.section{ padding: 110px 0; position:relative; }
.section-tight{ padding: 70px 0; }
.section-head{ max-width: 640px; margin-bottom: 3.2rem; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{ font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
.section-sub{ color: var(--text-muted); font-size: 1.02rem; max-width: 520px; }
.section-head.center .section-sub{ margin-inline:auto; }
.lead{ font-size: 1.08rem; color: var(--text); }

/* ============================================================
   About
   ============================================================ */
.about-grid{
  display:grid; grid-template-columns: .85fr 1fr; gap: 4.5rem; align-items:center;
}
.about-media{ position:relative; }
.about-frame{ padding: 10px; overflow:hidden; }
.about-frame img{ border-radius: calc(var(--radius-l) - 10px); aspect-ratio: 4/3.1; object-fit:cover; object-position: center 28%; }
.about-media:hover .about-frame img{ transform: scale(1.045); }
.about-badge{
  position:absolute; left: -18px; bottom: -22px;
  display:flex; align-items:center; gap:.6em;
  padding: .8em 1.2em; font-size:.85rem; font-weight:600;
  color: var(--green-300);
}
.about-badge svg{ width:1.3em; height:1.3em; color: var(--green-400); }
.about-copy h2{ font-size: clamp(1.7rem, 3vw, 2.35rem); }
.about-copy .lead{ margin-top: .6em; }
.chip-row{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top: 1.6rem; }
.chip{
  font-family: var(--font-mono); font-size:.75rem; letter-spacing:.02em;
  padding: .55em 1em; border-radius: 999px;
  background: var(--glass); border:1px solid var(--glass-border);
  color: var(--text-muted);
}

/* ============================================================
   Core cards (mission/vision/commitments)
   ============================================================ */
.core-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.core-card{ padding: 2.2rem 2rem; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.core-card:hover{ transform: translateY(-6px); border-color: var(--glass-border-strong); box-shadow: var(--shadow-glow); }
.core-icon{
  width: 52px; height:52px; border-radius: 14px;
  display:grid; place-items:center; margin-bottom: 1.2rem;
  background: linear-gradient(145deg, rgba(34,197,94,.22), rgba(18,185,129,.06));
  color: var(--green-400); font-size: 1.3rem;
  border: 1px solid var(--glass-border);
}
.core-card h3{ font-size: 1.2rem; margin-bottom:.5em; }
.core-card p{ color: var(--text-muted); font-size:.96rem; margin:0; }

/* ============================================================
   Focus / services grid
   ============================================================ */
.focus-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.focus-card{
  padding: 2rem 1.8rem;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.focus-card:hover{ transform: translateY(-6px); border-color: var(--glass-border-strong); box-shadow: var(--shadow-glow); }
.focus-icon{
  width: 46px; height:46px; border-radius: 50%;
  display:grid; place-items:center; margin-bottom: 1.1rem;
  background: var(--glass); border: 1px solid var(--glass-border-strong);
  color: var(--amber-soft); font-size: 1.15rem;
}
.focus-card h3{ font-size: 1.1rem; margin-bottom:.45em; }
.focus-card p{ color: var(--text-muted); font-size: .93rem; margin:0; }

/* ============================================================
   Field strip
   ============================================================ */
.field-grid{ display:grid; grid-template-columns: 1fr 0.72fr 1fr; gap: 1.2rem; align-items:stretch; }
.field-card{ overflow:hidden; padding:8px; }
.field-card img{ width:100%; height:100%; object-fit:cover; border-radius: calc(var(--radius-l) - 8px); aspect-ratio: 1/1; }
.field-card:hover img{ transform: scale(1.05); }
.field-card--tall img{ aspect-ratio: 3/4; }

/* ============================================================
   Gallery
   ============================================================ */
.gallery-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem;
}
.gallery-item{
  position:relative; margin:0; border-radius: var(--radius-m); overflow:hidden;
  border: 1px solid var(--glass-border);
  aspect-ratio: 4/3.2;
}
.gallery-item img{ width:100%; height:100%; object-fit:cover; }
.gallery-item:hover img{ transform: scale(1.08); }
.gallery-item figcaption{
  position:absolute; left:0; right:0; bottom:0; padding: 1.4em 1.1em .9em;
  font-family: var(--font-mono); font-size: .78rem; letter-spacing:.02em;
  color: #eafff2;
  background: linear-gradient(0deg, rgba(3,15,10,.82), transparent);
}

/* ============================================================
   Get involved
   ============================================================ */
.involved-panel{
  position:relative; overflow:hidden;
  padding: 4.2rem 3rem; text-align:center;
}
.involved-panel h2{ font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.involved-panel .hero-ctas{ justify-content:center; }
.involved-panel .section-sub{ margin-inline:auto; }
.involved-rings{
  position:absolute; top:50%; left:50%; width: 620px; height:620px;
  transform: translate(-50%,-50%); opacity:.08; color: var(--green-400);
  pointer-events:none;
}
.involved-rings svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:.6; }

/* ============================================================
   Contact
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items:center; }
.contact-card{ padding: 2.4rem; }
.contact-row{
  display:flex; align-items:flex-start; gap: 1em; margin-bottom: 1.4em;
  color: var(--text-muted); font-size:.96rem;
}
.contact-row svg{ width:1.3em; height:1.3em; flex-shrink:0; color: var(--green-400); margin-top:.1em; }
.contact-row a:hover{ color: var(--green-400); }
.contact-btn{ width:100%; justify-content:center; margin-top: .6rem; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{
  border-top: 1px solid var(--glass-border);
  padding-top: 4.5rem;
  background: linear-gradient(180deg, transparent, rgba(8,25,17,.4));
}
html[data-theme="light"] .site-footer{ background: linear-gradient(180deg, transparent, rgba(15,120,80,.05)); }
.footer-grid{
  display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem;
  padding-bottom: 3rem;
}
.footer-brand .brand-mark{ height:40px; width:40px; margin-bottom: 1em; }
.footer-brand p{ color: var(--text-dim); font-size:.9rem; max-width: 280px; }
.footer-col h4{
  font-family: var(--font-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em;
  color: var(--text-dim); margin-bottom: 1.1em;
}
.footer-col a{ display:block; color: var(--text-muted); font-size:.92rem; margin-bottom:.8em; transition: color .2s ease; }
.footer-col a:hover{ color: var(--green-400); }
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap: .8rem;
  padding: 1.6rem 0; border-top: 1px solid var(--glass-border);
  font-size: .82rem; color: var(--text-dim);
}
.footer-tag{ font-family: var(--font-mono); }

/* ============================================================
   Back to top
   ============================================================ */
.back-to-top{
  position: fixed; right: 26px; bottom: 26px; z-index: 90;
  width: 48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  background: var(--glass-strong); border:1px solid var(--glass-border-strong);
  color: var(--text); cursor:pointer;
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-soft);
  opacity:0; visibility:hidden; transform: translateY(12px);
  transition: opacity .35s ease, transform .35s ease, visibility .35s ease, border-color .25s ease;
}
.back-to-top.visible{ opacity:1; visibility:visible; transform:none; }
.back-to-top:hover{ border-color: var(--green-400); transform: translateY(-4px); }
.back-to-top svg{ width:20px; height:20px; }

/* ============================================================
   Reveal on scroll
   ============================================================ */
.reveal.pending{ opacity:0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.pending.in{ opacity:1; transform:none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px){
  .main-nav{ display:none; }
  .nav-toggle{ display:block; }
  .about-grid, .contact-grid{ grid-template-columns: 1fr; }
  .core-grid, .focus-grid{ grid-template-columns: repeat(2, 1fr); }
  .field-grid{ grid-template-columns: 1fr 1fr; }
  .field-card--tall{ grid-column: span 2; }
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px){
  .header-inner{ padding: 12px 0; }
  .brand-text em{ display:none; }
  .hero-inner{ padding-top: 96px; }
  .hero-quote{ padding: 1.3em 1.4em; }
  .core-grid, .focus-grid, .gallery-grid{ grid-template-columns: 1fr; }
  .field-grid{ grid-template-columns: 1fr; }
  .field-card--tall{ grid-column: auto; }
  .field-card--tall img{ aspect-ratio: 4/3; }
  .involved-panel{ padding: 3rem 1.6rem; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .header-actions .btn-donate{ display:none; }
  .contact-card{ padding: 1.7rem; }

  .main-nav.open{
    display:flex; flex-direction:column; gap: 0;
    position:absolute; top: 100%; left:0; right:0;
    background: var(--glass-strong); backdrop-filter: blur(20px);
    border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border);
    padding: .5rem 6%;
  }
  .main-nav.open a{ padding: 1em 0; border-bottom: 1px solid var(--glass-border); }
}

/* ============================================================
   Mega / dropdown navigation (mirrors raw site's menu structure)
   ============================================================ */
.nav-list{ display:flex; align-items:center; gap: 1.9rem; list-style:none; margin:0; padding:0; }
.nav-item{ position:relative; }
.nav-item > .nav-link{
  font-family: var(--font-body); font-size:.94rem; font-weight:500; color: var(--text-muted);
  background:none; border:none; cursor:pointer; padding: 22px 0; display:inline-flex; align-items:center; gap:.35em;
  position:relative; transition: color .25s ease;
}
.nav-item > a.nav-link{ padding: 22px 0; }
.nav-item > .nav-link:hover, .nav-item.dd-open > .nav-link{ color: var(--text); }
.nav-item > .nav-link::after{
  content:""; position:absolute; left:0; right:100%; bottom:16px; height:1.5px;
  background: var(--green-400); transition: right .3s ease;
}
.nav-item > .nav-link:hover::after{ right:0; }
.nav-chevron{ width:.65em; height:.65em; flex-shrink:0; transition: transform .25s ease; opacity:.75; }
.nav-item.dd-open > .nav-link .nav-chevron{ transform: rotate(180deg); }

.dropdown-panel{
  position:absolute; top:100%; left:50%; transform: translate(-50%, 8px);
  min-width: 260px; padding: .6rem;
  background: var(--glass-strong); border:1px solid var(--glass-border);
  border-radius: var(--radius-m); box-shadow: var(--shadow-soft);
  backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%);
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
  z-index: 120;
}
.nav-item.align-left .dropdown-panel{ left:0; transform: translate(0, 8px); }
.nav-item.dd-open > .dropdown-panel,
.nav-item:hover > .dropdown-panel,
.nav-item:focus-within > .dropdown-panel{
  opacity:1; visibility:visible; pointer-events:auto; transform: translate(-50%, 0);
}
.nav-item.align-left.dd-open > .dropdown-panel,
.nav-item.align-left:hover > .dropdown-panel,
.nav-item.align-left:focus-within > .dropdown-panel{
  transform: translate(0, 0);
}
.dropdown-list{ list-style:none; margin:0; padding:0; }
.dropdown-list li{ position:relative; }
.dropdown-list > li > a, .dropdown-list > li > .dropdown-sub-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:.6em;
  padding: .68em .9em; border-radius: var(--radius-s);
  font-size:.9rem; color: var(--text-muted); white-space:nowrap;
  background:none; border:none; width:100%; text-align:left; cursor:pointer;
  font-family: var(--font-body);
  transition: background .2s ease, color .2s ease;
}
.dropdown-list > li > a:hover, .dropdown-list > li > .dropdown-sub-toggle:hover,
.dropdown-list > li.dd-open > .dropdown-sub-toggle{ background: var(--glass); color: var(--green-300); }
.dropdown-sub{ position:relative; }
.dropdown-sub-toggle .nav-chevron{ transform: rotate(-90deg); }
.dropdown-sub.dd-open > .dropdown-sub-toggle .nav-chevron{ transform: rotate(-90deg) scale(1.1); }
.dropdown-sub-list{
  list-style:none; margin:0; padding:.4rem;
  position:absolute; top:-.4rem; left:100%; margin-left:.4rem;
  min-width: 230px;
  background: var(--glass-strong); border:1px solid var(--glass-border);
  border-radius: var(--radius-s); box-shadow: var(--shadow-soft);
  backdrop-filter: blur(22px) saturate(140%);
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .2s ease, visibility .2s ease;
}
.dropdown-sub:hover > .dropdown-sub-list,
.dropdown-sub.dd-open > .dropdown-sub-list,
.dropdown-sub:focus-within > .dropdown-sub-list{ opacity:1; visibility:visible; pointer-events:auto; }
.dropdown-sub-list a{
  display:block; padding: .6em .8em; border-radius: var(--radius-s);
  font-size:.88rem; color: var(--text-muted); white-space:nowrap;
  transition: background .2s ease, color .2s ease;
}
.dropdown-sub-list a:hover{ background: var(--glass); color: var(--green-300); }

/* Mobile: accordion-style dropdowns inside the slide-down panel */
@media (max-width: 980px){
  .nav-list{ flex-direction:column; align-items:stretch; gap:0; width:100%; }
  .nav-item{ width:100%; border-bottom: 1px solid var(--glass-border); }
  .nav-item > .nav-link{ width:100%; justify-content:space-between; padding: 1em 0; }
  .nav-item > .nav-link::after{ display:none; }
  .dropdown-panel{
    position:static; transform:none !important; min-width:0; width:100%;
    opacity:1; visibility:visible; pointer-events:auto;
    background:none; border:none; box-shadow:none; backdrop-filter:none;
    display:none; padding: 0 0 .6rem .8rem;
  }
  .nav-item.dd-open > .dropdown-panel{ display:block; }
  .dropdown-list > li > a, .dropdown-list > li > .dropdown-sub-toggle{ white-space:normal; }
  .dropdown-sub-list{
    position:static; margin-left:0; opacity:1; visibility:visible; pointer-events:auto;
    display:none; background:none; border:none; box-shadow:none; backdrop-filter:none;
    padding-left:.8rem;
  }
  .dropdown-sub.dd-open > .dropdown-sub-list{ display:block; }
  .dropdown-sub-toggle .nav-chevron{ transform: rotate(90deg); }
  .dropdown-sub.dd-open > .dropdown-sub-toggle .nav-chevron{ transform: rotate(-90deg); }
}

/* ============================================================
   Inner page: breadcrumb hero
   ============================================================ */
.page-hero{
  position:relative; padding: 150px 0 64px;
  border-bottom: 1px solid var(--glass-border);
  overflow:hidden;
}
.page-hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background: radial-gradient(1100px 460px at 15% 0%, rgba(34,197,94,.14), transparent 60%);
}
.crumbs{
  display:flex; align-items:center; gap:.5em; flex-wrap:wrap;
  font-family: var(--font-mono); font-size:.78rem; color: var(--text-dim); margin-bottom:1.1em;
}
.crumbs a{ color: var(--text-dim); transition: color .2s ease; }
.crumbs a:hover{ color: var(--green-400); }
.crumbs svg{ width:.7em; height:.7em; opacity:.7; }
.page-hero h1{ font-size: clamp(2rem, 4.2vw, 3.1rem); max-width: 820px; }
.page-hero .section-sub{ max-width: 640px; margin-top: .6em; font-size: 1.02rem; }

/* ============================================================
   Prose content blocks (about/mission/policy-style pages)
   ============================================================ */
.prose-wrap{ display:grid; grid-template-columns: 1fr .62fr; gap: 3.4rem; align-items:start; }
.prose{ max-width: 720px; }
.prose p{ color: var(--text-muted); font-size: 1.03rem; margin-bottom: 1.2em; }
.prose h2{ font-size: 1.5rem; margin-top: 1.6em; }
.prose h3{ font-size: 1.2rem; margin-top: 1.3em; }
.prose ul{ margin: 0 0 1.4em; padding-left: 1.3em; color: var(--text-muted); }
.prose ul li{ margin-bottom:.6em; padding-left:.2em; }
.prose ul li::marker{ color: var(--green-400); }
.side-card{ padding: 1.8rem; position:sticky; top: 110px; }
.side-card h4{
  font-family: var(--font-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em;
  color: var(--text-dim); margin-bottom: 1em;
}
.side-card ul{ list-style:none; margin:0; padding:0; }
.side-card li{ margin-bottom:.6em; }
.side-card a{
  display:flex; align-items:center; justify-content:space-between; gap:.5em;
  padding:.65em .2em; color: var(--text-muted); font-size:.92rem; border-bottom:1px solid var(--glass-border);
  transition: color .2s ease;
}
.side-card a:hover{ color: var(--green-400); }
.side-card a svg{ width:1em; height:1em; flex-shrink:0; opacity:.6; }
.side-card .btn{ width:100%; justify-content:center; margin-top:1rem; }

/* ============================================================
   Team grid
   ============================================================ */
.team-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.team-card{ padding: 1.1rem; text-align:center; transition: transform .3s ease, border-color .3s ease; }
.team-card:hover{ transform: translateY(-6px); border-color: var(--glass-border-strong); }
.team-photo{
  width:100%; aspect-ratio: 1/1; border-radius: var(--radius-m); overflow:hidden; margin-bottom: 1em;
  background: var(--glass-2, rgba(255,255,255,.05));
}
.team-photo img{ width:100%; height:100%; object-fit:cover; object-position: top center; }
.team-card h3{ font-size: 1rem; margin-bottom:.25em; }
.team-card p{ color: var(--text-dim); font-size:.84rem; margin:0; font-family: var(--font-mono); }

/* ============================================================
   Simple list-card (donors / networks / partners)
   ============================================================ */
.item-list{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.item-list .glass{
  padding: 1.3rem 1.5rem; display:flex; align-items:flex-start; gap: .9em;
  font-size:.96rem; color: var(--text-muted);
}
.item-list svg{ width:1.3em; height:1.3em; flex-shrink:0; color: var(--green-400); margin-top:.15em; }

/* ============================================================
   Stat strip
   ============================================================ */
.stat-strip{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.stat-card{ padding: 1.7rem; text-align:center; }
.stat-card strong{ display:block; font-family: var(--font-display); font-size: 2rem; color: var(--green-300); }
.stat-card span{ font-size:.82rem; color: var(--text-dim); font-family: var(--font-mono); }

/* ============================================================
   Responsive additions for inner pages
   ============================================================ */
@media (max-width: 980px){
  .prose-wrap{ grid-template-columns: 1fr; }
  .side-card{ position:static; }
  .team-grid{ grid-template-columns: repeat(3, 1fr); }
  .item-list{ grid-template-columns: 1fr; }
  .stat-strip{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .page-hero{ padding: 120px 0 44px; }
  .team-grid{ grid-template-columns: repeat(2, 1fr); }
  .stat-strip{ grid-template-columns: 1fr 1fr; }
}