:root{
  --paper:        #FBFAF6;
  --white:        #FFFFFF;
  --ink:          #16211B;
  --ink-soft:     #57645C;

  --green-900:    #0F2E20;
  --green-800:    #14402C;
  --green-700:    #1D6B47;
  --green-600:    #278459;
  --green-500:    #3E9B6C;
  --green-100:    #E6F2EA;
  --green-50:     #F3F9F4;

  --gold:         #C8952E;
  --gold-soft:    #E4B968;

  --line:         rgba(22,33,27,0.12);
  --line-on-dark: rgba(255,255,255,0.16);
  --shadow-card:  0 1px 2px rgba(22,33,27,0.05), 0 10px 26px rgba(22,33,27,0.06);

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
  --radius: 4px;
}


*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scrollbar-gutter:stable; overflow-y:scroll; }
body{ margin:0; font-family:var(--font-body); color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; line-height:1.6; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.1; margin:0 0 .6em; letter-spacing:-.01em; text-align:left; }
p{ margin:0 0 1em; color:var(--ink-soft); text-align:justify; text-align-last:left; hyphens:auto; max-width:68ch; }
p.no-justify{ text-align:left; hyphens:none; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:2px solid var(--green-700); outline-offset:3px; }
.container{ width:100%; max-width:1220px; margin:0 auto; padding:0 clamp(1.25rem,4vw,2.5rem); }

.eyebrow{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--green-700); margin-bottom:1em; }
.eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--gold); display:inline-block; }
.on-dark .eyebrow{ color:var(--gold-soft); }

/* BUTTONS */
.btn{ display:inline-flex; align-items:center; gap:.5em; font-weight:600; font-size:.94rem; padding:.85em 1.6em; border-radius:999px; border:1px solid transparent; transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease; white-space:nowrap; }
.btn:hover{ transform:translateY(-2px); }
.btn-gold{ background:var(--gold); color:var(--green-900); }
.btn-gold:hover{ background:var(--gold-soft); }
.btn-forest{ background:var(--green-700); color:var(--white); }
.btn-forest:hover{ background:var(--green-600); }
.btn-outline-light{ border-color:rgba(255,255,255,0.55); color:var(--white); }
.btn-outline-light:hover{ border-color:var(--gold); color:var(--gold-soft); }
.btn-outline-dark{ border-color:var(--line); color:var(--green-800); }
.btn-outline-dark:hover{ border-color:var(--green-700); background:var(--green-700); color:var(--white); }
.btn-row{ display:flex; flex-wrap:wrap; gap:.9rem; }

/* HEADER — transparent over hero, solid on scroll */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  background:transparent; border-bottom:1px solid transparent;
  transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.site-header.is-scrolled{
  background:var(--white); border-bottom:1px solid var(--line);
  box-shadow:0 4px 20px rgba(15,46,32,0.06);
}
.nav-wrap{ display:flex; align-items:center; justify-content:space-between; gap:1.25rem; height:86px; }
.brand{ display:flex; align-items:center; gap:.65rem; font-family:var(--font-display); font-size:1.02rem; font-weight:600; white-space:nowrap; color:var(--white); transition:color .25s ease; }
.site-header.is-scrolled .brand{ color:var(--green-900); }
.brand-mark{ width:46px; height:46px; flex:none; border-radius:50%; object-fit:cover; }
.brand-name small{ display:block; font-family:var(--font-mono); font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; font-weight:500; margin-top:.2em; color:rgba(255,255,255,0.7); transition:color .25s ease; }
.site-header.is-scrolled .brand-name small{ color:var(--ink-soft); }

.main-nav{ display:flex; align-items:center; gap:1.4rem; }
.main-nav > ul{ display:flex; align-items:center; gap:1.4rem; }
.main-nav > ul > li{ position:relative; }
.nav-item-row{ display:flex; align-items:center; }
.nav-link{ display:flex; align-items:center; gap:.3em; font-size:.88rem; font-weight:600; color:var(--white); padding:.4em 0; white-space:nowrap; transition:color .25s ease; }
.site-header.is-scrolled .nav-link{ color:var(--green-900); }
.nav-link .chev{ width:9px; height:9px; opacity:.7; transition:transform .18s ease; flex:none; }
.main-nav > ul > li:hover .nav-link{ color:var(--gold-soft); }
.site-header.is-scrolled .main-nav > ul > li:hover .nav-link{ color:var(--green-600); }
.main-nav > ul > li:hover .chev{ transform:rotate(180deg); }
.nav-caret{ display:none; }

.mega{ position:absolute; top:100%; left:50%; transform:translateX(-50%); padding-top:18px; opacity:0; visibility:hidden; transition:opacity .16s ease, transform .14s ease, visibility .16s ease; z-index:50; }
.mega-inner{ min-width:280px; background:var(--white); border-radius:var(--radius); box-shadow:0 20px 50px rgba(15,46,32,0.18); border:1px solid var(--line); padding:.6rem; }
.main-nav > ul > li:hover .mega,
.main-nav > ul > li .mega:hover{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.mega a{ display:block; padding:.68rem .9rem; border-radius:3px; font-size:.87rem; color:var(--ink); font-weight:500; }
.mega a:hover{ background:var(--green-50); color:var(--green-700); }
.mega a small{ display:block; font-weight:400; color:var(--ink-soft); font-size:.76rem; margin-top:.15em; }


/* =========== THIRD-LEVEL FLYOUT (Donation & Volunteer submenu) =========== */
.mega-group{ position:relative; }
.mega-group-label{ display:block; font-size:.87rem; padding:.68rem .9rem; border-radius:3px; cursor:default; }
.mega-group-label .label-row{ display:flex; align-items:center; justify-content:space-between; gap:.5em; font-weight:500; color:var(--ink); }
.mega-group-label small{ display:block; font-weight:400; color:var(--ink-soft); font-size:.76rem; margin-top:.15em; }
.mega-group-label .chev-right{ width:7px; height:7px; opacity:.6; flex:none; }
.mega-group:hover .mega-group-label{ background:var(--green-50); }
.mega-group:hover .mega-group-label .label-row{ color:var(--green-700); }
.mega-flyout{ position:absolute; left:100%; top:-.6rem; padding-left:14px; opacity:0; visibility:hidden; transition:opacity .16s ease, visibility .16s ease; z-index:60; }
.mega-group:hover .mega-flyout,
.mega-flyout:hover{ opacity:1; visibility:visible; }
.mega-flyout.flip-left{ left:auto; right:100%; padding-left:0; padding-right:14px; }
.mega-flyout-inner{ min-width:200px; background:var(--white); border-radius:var(--radius); box-shadow:0 20px 50px rgba(15,46,32,0.18); border:1px solid var(--line); padding:.6rem; }
.mega-flyout-inner a{ display:block; padding:.68rem .9rem; border-radius:3px; font-size:.87rem; color:var(--ink); font-weight:500; }
.mega-flyout-inner a:hover{ background:var(--green-50); color:var(--green-700); }
.mega-flyout-inner a small{ display:block; font-weight:400; color:var(--ink-soft); font-size:.76rem; margin-top:.15em; }

.nav-cta .btn-forest{ padding:.7em 1.3em; font-size:.86rem; }
.menu-toggle{ display:none; width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,0.5); background:transparent; color:var(--white); align-items:center; justify-content:center; flex:none; transition:color .25s ease, border-color .25s ease; }
.site-header.is-scrolled .menu-toggle{ color:var(--green-900); border-color:var(--line); }

@media (max-width:1040px){
  .main-nav{ position:fixed; inset:86px 0 0 0; background:var(--white); padding:1.2rem 1.4rem 2.5rem; overflow-y:auto; overflow-x:hidden; transform:translateX(100%); transition:transform .28s ease; border-top:1px solid var(--line); }
  .main-nav.is-open{ transform:translateX(0); }
  .main-nav > ul{ flex-direction:column; align-items:stretch; gap:0; width:100%; }
  .main-nav > ul > li{ border-bottom:1px solid var(--line); width:100%; }
  .nav-item-row{ justify-content:space-between; }
  .nav-link{ padding:1.1rem 0; flex:1; color:var(--green-900) !important; }
  .nav-link .chev{ display:none; }
  .nav-caret{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none; background:none; border:none; color:var(--green-800); }
  .nav-caret svg{ transition:transform .18s ease; }
  li.is-expanded .nav-caret svg{ transform:rotate(180deg); }
  .mega{ position:static; transform:none; opacity:1; visibility:visible; padding-top:0; display:none; margin-bottom:.6rem; width:100%; box-sizing:border-box; }
  .mega-inner{ box-shadow:none; border:none; background:var(--green-50); min-width:0; width:100%; box-sizing:border-box; border-radius:6px; padding:.5rem; }
  .mega a:hover{ background:rgba(29,107,71,0.08); color:var(--green-700); }
  li.is-expanded .mega{ display:block; }
  .mega-flyout{ position:static; padding-left:0; opacity:1; visibility:visible; margin:.2rem 0 .5rem .8rem; width:auto; }
  .mega-flyout-inner{ box-shadow:none; border:none; background:rgba(29,107,71,0.06); padding:.3rem; border-radius:6px; box-sizing:border-box; }
  .mega-group-label .chev-right{ display:none; }
  .nav-cta{ display:none; }
  .menu-toggle{ display:flex; color:var(--green-900) !important; border-color:var(--line) !important; }
}

/* HERO — full-bleed graphic background, dark scrim, centered content */
.hero{
  position:relative;
  min-height:92vh;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(120% 90% at 15% 10%, rgba(200,149,46,0.22), transparent 55%),
    radial-gradient(120% 100% at 85% 90%, rgba(62,155,108,0.28), transparent 55%),
    linear-gradient(160deg, #0F2E20 0%, #14402C 45%, #1D6B47 100%);
  /* Swap in real photography later:
     background-image: linear-gradient(rgba(15,46,32,.62), rgba(15,46,32,.62)), url('assets/hero-photo.jpg');
     background-size: cover; background-position: center; */
  overflow:hidden;
  padding:120px 0 80px;
}
.hero-rings{ position:absolute; inset:0; pointer-events:none; opacity:.5; }
.hero-inner{ position:relative; max-width:760px; margin:0 auto; text-align:center; padding:0 1.5rem; }
.hero .eyebrow{ justify-content:center; color:var(--gold-soft); }
.hero h1{ font-size:clamp(2.3rem,5.6vw,4rem); font-weight:600; color:var(--white); margin-bottom:.5em; text-align:center; }
.hero .lede{ font-size:clamp(1.02rem,1.4vw,1.2rem); color:rgba(255,255,255,0.85); max-width:620px; margin:0 auto 2rem; text-align:center; }
.hero .btn-row{ justify-content:center; }

/* SECTIONS */
section{ padding:clamp(3.2rem,6vw,6rem) 0; }
.on-dark{ background:var(--green-900); color:var(--white); }
.on-dark h2, .on-dark h3{ color:var(--white); }
.on-dark p{ color:rgba(255,255,255,0.72); }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:2.6rem; flex-wrap:wrap; }
.section-head h2{ font-size:clamp(1.7rem,3vw,2.5rem); max-width:620px; margin:0; }
.section-head p{ max-width:420px; margin:0; }

/* GRID + CARDS */
.grid{ display:grid; gap:clamp(1.25rem,2vw,2rem); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:900px){ .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid-4, .grid-2{ grid-template-columns:1fr; } }

.card{ background:var(--white); border-radius:var(--radius); border:1px solid var(--line); padding:1.9rem 1.7rem; box-shadow:var(--shadow-card); transition:transform .2s ease, box-shadow .2s ease; }
.card:hover{ transform:translateY(-4px); box-shadow:0 18px 34px rgba(15,46,32,0.1); }
.card .icon{ width:38px; height:38px; color:var(--green-700); margin-bottom:1.1rem; }
.card h3{ font-size:1.15rem; margin-bottom:.5em; }
.card p{ font-size:.94rem; margin-bottom:.9em; }
.card-link{ font-size:.85rem; font-weight:600; color:var(--green-700); display:inline-flex; gap:.4em; align-items:center; }
.card-link:hover{ color:var(--gold); }

/* PARTNERS */
.partner-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1.1rem; }
@media (max-width:980px){ .partner-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:640px){ .partner-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:460px){ .partner-grid{ grid-template-columns:repeat(2,1fr); } }
.partner-tile{ text-align:center; }
.partner-tile .mark{ aspect-ratio:1; display:flex; align-items:center; justify-content:center; margin-bottom:.6rem; overflow:hidden; padding:.6rem; }
.partner-grid--sm{ grid-template-columns:repeat(8,1fr); gap:.6rem; }
@media (max-width:980px){ .partner-grid--sm{ grid-template-columns:repeat(6,1fr); } }
@media (max-width:640px){ .partner-grid--sm{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:460px){ .partner-grid--sm{ grid-template-columns:repeat(3,1fr); } }
.partner-grid--sm .partner-tile .mark{ padding:.2rem; margin-bottom:.3rem; }
.partner-grid--sm .partner-tile .mark img{ width:90%; height:90%; }
.partner-tile .mark img{ width:100%; height:100%; object-fit:contain; }
.partner-tile .pname{ font-size:.74rem; color:var(--ink-soft); line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em; }

/* QUOTES */
.quote-card{ background:var(--white); border-radius:var(--radius); padding:2.2rem; border-left:3px solid var(--green-700); box-shadow:var(--shadow-card); }
.quote-card p.quote-text{ font-family:var(--font-display); font-size:1.18rem; color:var(--ink); font-weight:500; line-height:1.5; margin-bottom:1.3rem; text-align:left; hyphens:none; }
.quote-attr{ font-size:.86rem; color:var(--ink-soft); }
.quote-attr strong{ display:block; color:var(--ink); font-size:.94rem; }

/* FOOTER — lean 3-column + bottom bar (reference pattern) */
.site-footer{ background:var(--green-900); color:rgba(255,255,255,0.75); padding:4.5rem 0 0; }
.footer-grid{ display:grid; grid-template-columns:1fr 1fr 1.2fr; gap:2.6rem; padding-bottom:2.6rem; }
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h4{ color:var(--white); font-size:1.05rem; margin-bottom:.8rem; }
.footer-grid h6{ color:rgba(255,255,255,0.85); font-weight:600; font-size:.92rem; line-height:1.6; margin-bottom:.6rem; font-family:var(--font-body); }
.footer-grid p{ font-size:.86rem; text-align:left; }
.social-row{ display:flex; gap:.7rem; margin-top:1rem; }
.social-row a{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line-on-dark); display:flex; align-items:center; justify-content:center; }
.social-row a:hover{ border-color:var(--gold); background:rgba(200,149,46,0.12); }
.footer-newsletter{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.8rem; }
.footer-newsletter input{ flex:1; min-width:160px; padding:.8em 1em; border-radius:999px; border:1px solid rgba(255,255,255,0.3); background:rgba(255,255,255,0.08); color:var(--white); font-family:inherit; font-size:.86rem; }
.footer-newsletter input::placeholder{ color:rgba(255,255,255,0.55); }
.footer-newsletter input:focus{ outline:none; background:rgba(255,255,255,0.16); }
.footer-newsletter button{ padding:.8em 1.4em; }
.footer-divider{ height:1px; background:var(--line-on-dark); }
.footer-bottom{ padding:1.5rem 0; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; font-size:.82rem; color:rgba(255,255,255,0.6); }
.footer-bottom-menu{ display:flex; gap:1.6rem; flex-wrap:wrap; }
.footer-bottom-menu a:hover{ color:var(--gold-soft); }

/* =========== SUBPAGES (any page other than the homepage) =========== */
/* Inner pages have no dark full-bleed hero behind the header, so the header
   stays solid from the start instead of transparent-until-scroll. */
body.subpage .site-header{ position:sticky; background:var(--white); border-bottom:1px solid var(--line); box-shadow:none; }
body.subpage .brand{ color:var(--green-900); }
body.subpage .brand-name small{ color:var(--ink-soft); }
body.subpage .nav-link{ color:var(--green-900); }
body.subpage .main-nav > ul > li:hover .nav-link{ color:var(--green-600); }
body.subpage .menu-toggle{ color:var(--green-900); border-color:var(--line); }

.page-hero{ position:relative; background:var(--paper); padding:calc(86px + clamp(2.4rem,5vw,3.6rem)) 0 clamp(2.6rem,5vw,3.6rem); border-bottom:1px solid var(--line); overflow:hidden; }
.page-hero-inner{ position:relative; max-width:760px; }
.page-hero h1{ font-size:clamp(1.9rem,3.6vw,2.7rem); color:var(--green-900); margin-bottom:.4em; }
.page-hero p{ color:var(--ink-soft); font-size:1.05rem; max-width:600px; }
.crumb{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:1.2rem; }
.crumb a:hover{ color:var(--green-700); }

/* =========== TWO-COL LAYOUT + CARD-DARK + DIVIDER =========== */
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
@media (max-width:860px){ .two-col{ grid-template-columns:1fr; } }
.card-dark{ background:var(--green-800); border-radius:var(--radius); padding:1.9rem 1.7rem; border:1px solid rgba(255,255,255,0.08); }
.card-dark h3{ color:var(--white); }
.card-dark p{ color:rgba(255,255,255,0.75); }
.divider{ height:1px; background:var(--line); border:none; margin:2.6rem 0; }

/* =========== SDG GRID (image tiles) =========== */
.sdg-grid{ display:grid; grid-template-columns:repeat(9,1fr); gap:.6rem; }
@media (max-width:900px){ .sdg-grid{ grid-template-columns:repeat(6,1fr); } }
@media (max-width:560px){ .sdg-grid{ grid-template-columns:repeat(4,1fr); } }
.sdg-chip{ aspect-ratio:1; border-radius:8px; overflow:hidden; box-shadow:var(--shadow-card); }
.sdg-chip img{ width:100%; height:100%; object-fit:cover; display:block; }

/* =========== TINTED SECTION =========== */
.on-tint{ background:var(--green-50); }

/* =========== APPROACH STEPS (numbered horizontal sequence) =========== */
.approach-list{ display:flex; gap:1.4rem; }
@media (max-width:860px){ .approach-list{ flex-wrap:wrap; } .approach-list > *{ flex-basis:calc(50% - .7rem); } }
@media (max-width:520px){ .approach-list{ flex-direction:column; } .approach-list > *{ flex-basis:auto; } }
.approach-item{ flex:1; border-top:2px solid var(--green-700); padding-top:.9rem; }
.approach-item .step{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); margin-bottom:.6rem; }
.approach-item h4{ font-size:1rem; margin-bottom:.4em; }
.approach-item p{ font-size:.88rem; margin:0; text-align:left; }

/* =========== SOLUTIONS GRID (asymmetric: accent + span-2 closer) =========== */
.solutions-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media (max-width:760px){ .solutions-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .solutions-grid{ grid-template-columns:1fr; } }
.solutions-grid .span-2{ grid-column:span 2; }
@media (max-width:520px){ .solutions-grid .span-2{ grid-column:span 1; } }

/* =========== TRUSTEE CARDS (portrait photo slot) =========== */
.trustee-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
@media (max-width:860px){ .trustee-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .trustee-grid{ grid-template-columns:1fr; } }
.trustee-photo{ aspect-ratio:3/4; border-radius:var(--radius); background:var(--green-100); display:flex; align-items:center; justify-content:center; margin-bottom:.9rem; overflow:hidden; position:relative; }
.trustee-initials{ display:none; align-items:center; justify-content:center; width:100%; height:100%; background:linear-gradient(145deg, var(--green-600), var(--green-800)); }
.trustee-initials.is-visible{ display:flex; }
.trustee-initials span{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.6rem,4vw,2.2rem); color:var(--gold-soft); }
.trustee-photo img{ width:100%; height:100%; object-fit:cover; }
.trustee-card h4{ font-size:1rem; margin-bottom:.3em; }
.trustee-card .role{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.02em; color:var(--green-700); }

/* =========== STAT CARDS =========== */
.stat{ background:var(--green-800); border-radius:var(--radius); padding:1.3rem 1.2rem; }
.stat .num{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.5rem,3vw,1.9rem); color:var(--gold-soft); display:block; margin-bottom:.35rem; }
.stat .label{ font-size:.78rem; line-height:1.4; color:rgba(255,255,255,0.75); }

/* =========== BADGE PILLS (cohort names, tags) =========== */
.badge-list{ display:flex; flex-wrap:wrap; gap:.6rem; margin:0; padding:0; list-style:none; }
.badge-list li{ font-size:.82rem; border:1px solid var(--line); border-radius:999px; padding:.5em 1em; color:var(--ink-soft); }

/* =========== FORMS (one shared component, used identically everywhere) =========== */
.form-card{ background:var(--white); border-radius:12px; border:0.5px solid var(--line); padding:clamp(1.6rem,3vw,2.4rem); box-shadow:var(--shadow-card); }
.form-card h3{ font-size:1.1rem; margin-bottom:.3em; }
.form-card .form-intro{ font-size:.85rem; color:var(--ink-soft); margin-bottom:1.4rem; }
.field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.2rem; }
@media (max-width:560px){ .field-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field.full{ grid-column:1 / -1; }
.field label{ font-size:.8rem; font-weight:600; color:var(--ink); }
.field label .opt{ font-weight:400; color:var(--ink-soft); }
.field input, .field select, .field textarea{ font-family:var(--font-body); font-size:.92rem; padding:.75em .9em; border:1px solid var(--line); border-radius:6px; background:var(--paper); color:var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--green-700); background:var(--white); }
.field textarea{ resize:vertical; min-height:100px; }
.field-file{ border:1px dashed var(--line); border-radius:6px; padding:1em; font-size:.84rem; color:var(--ink-soft); background:var(--paper); text-align:center; display:block; cursor:pointer; transition:border-color .15s ease, background .15s ease, color .15s ease; }
.field-file:hover{ border-color:var(--green-700); color:var(--green-700); }
.field-file.is-dragover{ border-color:var(--green-700); background:var(--green-50); color:var(--green-700); }
.field-file.has-file{ border-style:solid; border-color:var(--green-700); background:var(--green-50); color:var(--green-800); font-weight:600; }
.form-foot{ margin-top:1.4rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.form-note{ font-size:.78rem; color:var(--ink-soft); }
.form-success{ display:none; text-align:center; padding:2.2rem 1rem; }
.form-success.is-active{ display:block; }
.form-success h3{ margin-bottom:.4rem; }
.form-success p{ text-align:center; }

/* =========== CHECKBOX GRID (Volunteer skills) =========== */
.check-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }
@media (max-width:760px){ .check-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .check-grid{ grid-template-columns:1fr; } }
.check-item{ display:flex; align-items:flex-start; gap:.55em; font-size:.85rem; color:var(--ink-soft); border:1px solid var(--line); border-radius:6px; padding:.6em .75em; background:var(--paper); }
.check-item input{ margin-top:.2em; accent-color:var(--green-700); }

/* =========== ACCOUNT DETAILS PANEL (deliberately distinct from forms) =========== */
.acct-card{ background:var(--green-800); color:var(--white); border-radius:12px; padding:1.8rem; }
.acct-card .row{ display:flex; justify-content:space-between; padding:.7em 0; border-top:1px solid var(--line-on-dark); font-size:.92rem; }
.acct-card .row:first-child{ border-top:none; }
.acct-card .row b{ color:var(--gold-soft); font-family:var(--font-mono); letter-spacing:.02em; }

/* =========== THEMATIC HUB CARDS =========== */
.theme-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
@media (max-width:920px){ .theme-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .theme-grid{ grid-template-columns:1fr; } }
.theme-card{ background:var(--white); border:0.5px solid var(--line); border-radius:10px; overflow:hidden; box-shadow:var(--shadow-card); transition:transform .2s ease, box-shadow .2s ease; display:block; }
.theme-card:hover{ transform:translateY(-3px); box-shadow:0 18px 34px rgba(15,46,32,0.1); }
.theme-card .swatch{ height:64px; }
.theme-card .body{ padding:1.1rem 1.2rem 1.3rem; }
.theme-card h3{ font-size:1.02rem; margin-bottom:.45em; }
.theme-card p{ font-size:.85rem; margin-bottom:.7em; text-align:left; }
.theme-card .read-more{ font-size:.82rem; font-weight:600; color:var(--green-700); }
.theme-card:hover .read-more{ color:var(--gold); }

/* =========== INDIVIDUAL AREA PAGE =========== */
.area-icon{ width:52px; height:52px; border-radius:12px; margin-bottom:1.2rem; }
.browse-pills{ display:flex; flex-wrap:wrap; gap:.6rem; }
.browse-pills a{ font-size:.82rem; border:1px solid var(--line); background:var(--white); border-radius:999px; padding:.55em 1.1em; color:var(--ink-soft); }
.browse-pills a:hover{ border-color:var(--green-700); color:var(--green-700); }
.browse-pills a.is-all{ background:var(--gold); border-color:var(--gold); color:var(--green-900); font-weight:600; }
.browse-pills a.is-all:hover{ background:var(--gold-soft); color:var(--green-900); }

/* =========== MEDIA GALLERY (masonry via CSS columns) =========== */
.media-grid{ column-count:4; column-gap:.75rem; }
@media (max-width:980px){ .media-grid{ column-count:3; } }
@media (max-width:640px){ .media-grid{ column-count:2; } }
@media (max-width:420px){ .media-grid{ column-count:1; } }
.media-grid img{ width:100%; display:block; margin-bottom:.75rem; border-radius:6px; cursor:pointer; break-inside:avoid; transition:opacity .15s ease; }
.media-grid img:hover{ opacity:.85; }

.lightbox{ position:fixed; inset:0; background:rgba(15,46,32,0.92); display:none; align-items:center; justify-content:center; z-index:1000; padding:clamp(1.5rem,5vw,4rem); cursor:zoom-out; }
.lightbox.is-open{ display:flex; }
.lightbox img{ max-width:100%; max-height:100%; border-radius:8px; box-shadow:0 30px 80px rgba(0,0,0,0.5); }
.lightbox-close{ position:fixed; top:1.5rem; right:1.5rem; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.3); color:var(--white); display:flex; align-items:center; justify-content:center; font-size:1.3rem; cursor:pointer; }

/* =========== 404 PAGE =========== */
.error-page{ position:relative; min-height:calc(100vh - 86px); display:flex; align-items:center; justify-content:center; background:var(--paper); overflow:hidden; padding:calc(86px + 3rem) 1.5rem 4rem; text-align:center; }
.error-rings{ position:absolute; inset:0; pointer-events:none; display:flex; align-items:center; justify-content:center; }
.error-rings svg{ width:min(680px, 90vw); height:auto; animation:error-spin 40s linear infinite; }
@keyframes error-spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
.error-inner{ position:relative; max-width:560px; }
.error-code{ font-family:var(--font-display); font-weight:700; font-size:clamp(4rem,14vw,7rem); color:var(--green-800); line-height:1; margin-bottom:.2em; letter-spacing:-.02em; }
.error-code span{ color:var(--gold); }
.error-page h1{ font-size:clamp(1.5rem,3.4vw,2.1rem); color:var(--green-900); margin-bottom:.5em; }
.error-page p{ color:var(--ink-soft); font-size:1.02rem; margin:0 auto 1.8rem; text-align:center; max-width:460px; }
.error-page .btn-row{ justify-content:center; }

/* .mega-flyout {
  display: none !important;
} */