/* ==========================================================================
   TCA — SHARED STYLES (styles.css, formerly global.css)
   Loaded on every page, before that page's own stylesheet.
   Page-specific styles live in their own file (e.g. home.css).

   CONTENTS
     1. Design tokens
     2. Reset & base
     3. Typography
     4. Layout helpers
     5. Buttons
     6. Header / navigation (pure-CSS toggle)
     7. Footer
     8. Scroll reveal utility
     9. Photo treatment (duotone)
    10. Lightbox component (shared by media, tree-kangaroos, shop, special-projects)

    10. Contribute band (shared)
    11. Partners (shared)
    12. Page hero + section sub-nav (shared)
    13. Shared responsive rules
   ========================================================================== */


/* 1. DESIGN TOKENS ========================================================= */
:root{
  --forest:#15281A;
  --forest-2:#1d3322;
  --canopy:#3C6B3A;
  --green:#92CD62;
  --green-deep:#5f9a37;
  --paper:#F5F1E6;
  --card:#FBF9F2;
  --bark:#5E4A38;
  --ink:#23291f;
  --muted:#6f6657;
  --line:#e3dac6;
  --wrap:1120px;
  --nav-break:980px; /* width at which the nav collapses to a hamburger */
  --spinner-track: #e5e5e5;
  --spinner-active: #635bff; /* swap for your accent color */
  --donate-bg: #1d9e75;
  --donate-bg-hover: #157a5c;
  --donate-fg: #ffffff;
}


/* 2. RESET & BASE ========================================================== */
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden;max-width:100%}
html{scroll-behavior:smooth}
body{overflow-wrap:break-word}
body{
  font-family:'Inter',sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.hide { display: none !important; }

/* Sticky footer, no position:fixed — add these two lines. */
body{min-height:100vh;display:flex;flex-direction:column}
body > *{width:100%}
footer{margin-top:auto}


/* 2.1 REUSABLE COMPONENTS ==================================================*/
.spinner {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 4px solid var(--spinner-track);
    border-top-color: var(--spinner-active);
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

.donate-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: var(--donate-bg);
  color: var(--donate-fg);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.donate-cta:hover,
.donate-cta:focus-visible {
  background: var(--donate-bg-hover);
}

.donate-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}


/* 3. TYPOGRAPHY ============================================================ */
h1,h2,h3,h4{font-family:'Lora',serif;font-weight:600;color:var(--forest);line-height:1.14}

/* Feature face — used sparingly, once or twice per page, for emphasis only */
.feature{font-family:'DM Serif Display',serif;font-weight:400}

.eyebrow{
  font-size:12px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--canopy);font-weight:600;
}


/* 4. LAYOUT HELPERS ======================================================== */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}

/* Decorative topographic contour — absolutely pinned behind a section's
   content. Must be global: any page using <svg class="contour"> needs this,
   or the SVG renders full-height in normal flow and creates huge dead space. */
.contour{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.5;z-index:-1}
/* Any section hosting a contour establishes a stacking context so the wavy
   lines always sit behind its content, never on top of it. */
.page-hero,.hero,.doc,.give,.touch,.patrons,.aquote,.story,.mission-sec,.contact-side,.partners{position:relative;isolation:isolate}


/* 5. BUTTONS =============================================================== */
.btn{
  display:inline-block;background:var(--green);color:var(--forest);
  font-weight:600;font-size:14px;padding:13px 24px;border-radius:8px;
  border:none;cursor:pointer;transition:transform .15s ease,background .15s ease;
}
.btn:hover{background:var(--green-deep);transform:translateY(-1px)}
.btn-o{background:transparent;color:var(--forest);border:1.6px solid var(--forest)}
.btn-o:hover{background:var(--forest);color:var(--paper)}


/* 6. HEADER / NAVIGATION =================================================== */
/* Toggle is a pure-CSS checkbox hack — the hidden checkbox precedes <nav>
   so the general-sibling combinator can drive the open state with no JS. */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(245,241,230,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-state{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.nav{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;max-width:var(--wrap);margin:0 auto;
}

.brand{display:flex;align-items:center;gap:12px;line-height:1}
.brand-logo{height:44px;width:auto;display:block;flex:none}
.brand .btext{display:flex;flex-direction:column}
.brand .b1{font-family:'DM Serif Display',serif;font-size:23px;color:var(--forest)}
.brand .b2{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--canopy);margin-top:4px}

.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{font-size:14px;color:#403d2e}
.nav-links a:hover{color:var(--canopy)}

/* Dropdown group — hover/focus on desktop, expanded inline on mobile */
.has-drop{position:relative;display:flex;align-items:center}
.has-drop .drop-head{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.has-drop .caret{font-size:10px;transition:transform .2s ease}
.has-drop:hover .drop-head,.has-drop:focus-within .drop-head{color:var(--canopy)}
.has-drop:hover .caret,.has-drop:focus-within .caret{transform:rotate(180deg)}
.has-drop::after{content:"";position:absolute;top:100%;left:0;right:0;height:10px}
.drop{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:10px;
  min-width:188px;background:var(--paper);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 16px 30px rgba(21,40,26,.12);padding:8px;
  display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease;
}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;pointer-events:auto}
.drop a{padding:9px 12px;border-radius:8px;font-size:14px;white-space:nowrap}
.drop a:hover{background:var(--card);color:var(--canopy)}

/* Hamburger (label) — hidden on desktop */
.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:42px;background:transparent;border:1px solid var(--line);
  border-radius:9px;cursor:pointer;padding:0 11px;
}
.nav-toggle span{
  display:block;height:2px;width:100%;background:var(--forest);border-radius:2px;
  transition:transform .25s ease,opacity .2s ease;
}
/* Focus ring driven by the hidden checkbox */
.nav-state:focus-visible ~ .nav .nav-toggle{outline:2px solid var(--canopy);outline-offset:2px}


/* 7. FOOTER ================================================================ */
footer{background:var(--forest);color:#c9d3c0;padding:64px 0 36px}
.foot-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;
  padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.1);
}
footer .fb{font-family:'DM Serif Display',serif;font-size:26px;color:var(--green);margin-bottom:10px}
footer p{font-size:14px;line-height:1.7}
footer h4{
  color:#fff;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;
  margin-bottom:16px;font-family:'Inter',sans-serif;font-weight:600;
}
footer a:hover{color:var(--green)}
.foot-bottom{
  padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;
  gap:10px;font-size:13px;color:#8a9882;
}


/* 8. SCROLL REVEAL ========================================================= */
/* Robust by default: .reveal elements are VISIBLE unless main.js is running.
   main.js adds .reveal-ready (which hides them) and then adds .in as each
   scrolls into view. Because the same script both hides and reveals, a failure
   to load JS can never leave content stuck invisible — it just shows with no
   animation. Reduced-motion is handled in main.js by leaving everything shown. */
.reveal{opacity:1}
.reveal-ready .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.reveal-ready .reveal.in{opacity:1;transform:none}


/* 9. PHOTO TREATMENT — DUOTONE ============================================ */
/* A subtle green cast that unifies photos with the palette without flattening
   them: the image keeps most of its colour (lightly desaturated) and a soft
   green layer washes over it. Add class="duotone" to any image wrapper, and
   class="reveal-hover" alongside it to clear the cast on hover. */
.duotone{position:relative;overflow:hidden}
.duotone > img{
  filter:saturate(.72) contrast(1.02);
  transition:filter .45s ease,transform .45s ease;
}
.duotone::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:var(--canopy);mix-blend-mode:soft-light;opacity:.42;
  pointer-events:none;transition:opacity .45s ease;
}
/* Reveal the true photo on hover (used on interactive cards) */
.duotone.reveal-hover:hover > img{filter:none}
.duotone.reveal-hover:hover::after{opacity:0}


/* 10. CONTRIBUTE BAND (shared) ============================================ */
.give{background:var(--green);padding:74px 0}
.give-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center}
.give h2{font-family:'DM Serif Display',serif;font-weight:400;font-size:clamp(30px,4vw,46px);color:var(--forest)}
.give p{color:#274218;font-size:16px;line-height:1.65;margin-top:14px;max-width:520px}
.give .give-cta{display:flex;gap:14px;justify-content:flex-end;flex-wrap:wrap}
.give .btn-dark{background:var(--forest);color:var(--green)}
.give .btn-dark:hover{background:var(--forest-2)}


/* 11. PARTNERS (shared) =================================================== */
.partners{padding:70px 0;border-top:1px solid var(--line)}
.partners .ptitle{text-align:center;margin-bottom:36px}
.partners .ptitle .eyebrow{display:block}
.partners h3{font-size:24px;margin-top:8px}
.plogos{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;align-items:center}
.plogos .pl{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:12px;height:84px;display:flex;align-items:center;justify-content:center;padding:14px}
.plogos .pl img{max-height:100%;max-width:100%;object-fit:contain;filter:grayscale(.65) contrast(1.02);transition:filter .4s ease}
/* subtle green duotone cast over each tile, cleared on hover */
.plogos .pl::after{content:"";position:absolute;inset:0;background:var(--canopy);mix-blend-mode:soft-light;opacity:.32;pointer-events:none;transition:opacity .4s ease}
.plogos .pl:hover img{filter:none}
.plogos .pl:hover::after{opacity:0}


/* 12. PAGE HERO + SECTION SUB-NAV (shared) ================================ */
/* Centered intro hero used by interior pages (about, strategy, …). */
.page-hero{position:relative;overflow:hidden;padding:40px 0 36px;border-bottom:1px solid var(--line);text-align:center}
.page-hero .inner{position:relative;max-width:720px;margin:0 auto}
.page-hero h1{font-family:'DM Serif Display',serif;font-weight:400;font-size:clamp(34px,5vw,54px);line-height:1.05;margin:12px 0 16px}
.page-hero p{font-size:17px;line-height:1.6;color:#3a3a30;max-width:600px;margin:0 auto}

/* Sticky in-page jump bar that replaces an old submenu. */
.subnav{position:sticky;top:73px;z-index:40;background:rgba(245,241,230,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.subnav ul{display:flex;justify-content:center;gap:6px;max-width:var(--wrap);margin:0 auto;padding:0 22px;list-style:none;overflow-x:auto;-webkit-overflow-scrolling:touch}
.subnav a{display:block;padding:14px 14px;font-size:13.5px;color:#4a4736;white-space:nowrap;border-bottom:2px solid transparent}
.subnav a:hover{color:var(--canopy);border-bottom-color:var(--green)}


/* 13. SHARED RESPONSIVE ==================================================== */
@media (max-width:980px){
  /* Nav collapses to the hamburger panel */
  .nav-toggle{display:flex}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;z-index:60;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    box-shadow:0 14px 24px rgba(21,40,26,.08);padding:6px 28px 18px;
    max-height:0;overflow:hidden;opacity:0;pointer-events:none;
    transition:max-height .28s ease,opacity .2s ease;
  }
  .nav-links a{padding:14px 2px;border-bottom:1px solid var(--line);font-size:16px}
  .nav-links > a:last-child{border-bottom:none;margin-top:12px;text-align:center}

  /* Dropdown flattens into the drawer: header row + indented children */
  .has-drop{flex-direction:column;align-items:stretch}
  .has-drop::after{display:none}
  .has-drop .drop-head{justify-content:space-between;padding:14px 2px;border-bottom:1px solid var(--line);font-size:16px}
  .drop{position:static;transform:none;margin:0;min-width:0;background:transparent;border:none;box-shadow:none;border-radius:0;padding:0;opacity:1;visibility:visible;pointer-events:auto}
  .drop a{padding:13px 2px 13px 18px;border-bottom:1px solid var(--line);border-radius:0;font-size:15px;color:var(--muted)}

  /* Open state — driven by the checkbox */
  .nav-state:checked ~ .nav .nav-links{max-height:min(82vh,640px);overflow-y:auto;opacity:1;pointer-events:auto}
  .nav-state:checked ~ .nav .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-state:checked ~ .nav .nav-toggle span:nth-child(2){opacity:0}
  .nav-state:checked ~ .nav .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .foot-grid{grid-template-columns:1fr;gap:40px}
  .give-grid{grid-template-columns:1fr;gap:36px}
  .give .give-cta{justify-content:flex-start}
  .plogos{grid-template-columns:repeat(3,1fr)}
  .subnav a{padding:13px 12px}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important;transition:none !important}
  .reveal{opacity:1;transform:none}
}

@media (max-width:980px){
  .brand-logo{height:38px}
  .subnav{top:67px}
}


/* ==========================================================================
   SHARED COMPONENT — Lightbox
   Used on: media.html, tree-kangaroos.html, shop.html + product pages,
   special-projects.html. Identical on every page except each page's own
   .lightbox img max-height, which stays in that page's own stylesheet
   (shop.css uses 82vh; the others use 80vh).
   ========================================================================== */
.lightbox{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:5vh 5vw}
.lightbox:target{display:flex}
.lb-bg{position:absolute;inset:0;background:rgba(8,12,8,.93);cursor:zoom-out}
.lightbox figure{position:relative;z-index:1;margin:0;display:flex;flex-direction:column;align-items:center}
.lightbox figcaption{color:#e8e6dd;font-size:14px;margin-top:14px;text-align:center;max-width:80vw}
.lb-x{position:fixed;top:20px;right:24px;z-index:2;width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:24px;line-height:1}
.lb-x:hover{background:rgba(255,255,255,.22);color:#fff}
.lb-nav{position:fixed;top:50%;transform:translateY(-50%);z-index:2;width:50px;height:50px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:26px;text-decoration:none}
.lb-nav:hover{background:rgba(255,255,255,.2);color:#fff}
.lb-prev{left:18px}
.lb-next{right:18px}
.lightbox img{max-width:90vw;max-height:80vh;object-fit:contain;border-radius:6px;box-shadow:0 24px 70px rgba(0,0,0,.6)}


/* ==========================================================================
   PAGE: HOME (index.php)
   ========================================================================== */
/* ==========================================================================
   TCA — HOME PAGE STYLES
   Loaded after global.css. Only styles unique to the home page live here.

   CONTENTS
     1. Hero
     2. Vision & mission
     3. Strategy & stats
     4. Pillars (seven things worth saving)
     5. Documentary
     6. Projects
     7. Home responsive overrides
   ========================================================================== */

/* 1. HERO ================================================================== */
.hero{position:relative;overflow:hidden}
.hero-grid{
  display:grid;grid-template-columns:1.1fr .95fr;gap:48px;align-items:center;
  padding:84px 0 92px;position:relative;
}
.hero h1{font-size:clamp(40px,6vw,66px);line-height:1.02;letter-spacing:-.5px;color:var(--forest)}
.hero .lede{font-size:18px;line-height:1.6;color:#3a3a30;margin:24px 0 32px;max-width:440px}
.hero .ctas{display:flex;gap:14px;flex-wrap:wrap}

.hero-fig{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/5;background:var(--forest)}
.hero-fig img{width:100%;height:100%;object-fit:cover}
.hero-fig .cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px 20px;
  background:linear-gradient(to top,rgba(21,40,26,.82),transparent);
  color:#eaf3de;font-size:13px;
}
.hero-fig .cap b{color:#fff;font-weight:600}

/* 2. VISION & MISSION ====================================================== */
.vm{padding:88px 0;border-top:1px solid var(--line)}
.vm-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.vm h2{
  font-size:15px;letter-spacing:2.5px;text-transform:uppercase;color:var(--canopy);
  font-family:'Inter',sans-serif;font-weight:600;margin-bottom:24px;
}
.vision-text{font-size:19px;line-height:1.6;color:var(--ink)}
.mission{margin-top:14px}
.mission .label{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.mission .feature{font-size:clamp(28px,3.4vw,42px);line-height:1.2;color:var(--forest)}
.mission .feature em{color:var(--canopy);font-style:italic}

/* 3. STRATEGY & STATS ====================================================== */
.strat{background:var(--forest);color:var(--paper);padding:84px 0}
.strat .intro{max-width:760px;margin-bottom:54px}
.strat .eyebrow{color:var(--green)}
.strat h2{color:var(--paper);font-size:clamp(26px,3.2vw,38px);margin:18px 0}
.strat p{color:#c9d3c0;font-size:16px;line-height:1.7}
.strat p b{color:#fff;font-weight:600}

.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  border-top:1px solid rgba(146,205,98,.25);padding-top:46px;
}
.stat .n{font-family:'DM Serif Display',serif;font-size:clamp(38px,4.4vw,52px);color:var(--green);line-height:1}
.stat .l{font-size:13.5px;color:#b9c7ad;margin-top:10px;line-height:1.45}
.strat .foot-note{margin-top:40px;font-size:15px;color:#c9d3c0}
.strat .foot-note b{color:var(--green);font-weight:600}

/* 4. PILLARS =============================================================== */
.pillars{padding:84px 0}
.pillars .head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:40px;flex-wrap:wrap;gap:16px}
.pillars h2{font-size:clamp(28px,3.4vw,40px)}
.pillar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pillar{position:relative;overflow:hidden;isolation:isolate;border:1px solid var(--line);border-radius:14px;padding:22px;min-height:172px;
  display:flex;flex-direction:column;justify-content:space-between;color:#fff;min-height:210px;
  transition:transform .15s ease,border-color .15s ease}
.pillar .pbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .5s ease}
.pillar::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(165deg,rgba(12,20,12,.28) 0%,rgba(12,20,12,.62) 58%,rgba(10,16,10,.84) 100%)}
.pillar:hover{transform:translateY(-3px);border-color:var(--green)}
.pillar:hover .pbg{transform:scale(1.06)}
.pillar .num{font-family:'Lora',serif;font-size:14px;color:#fff;opacity:.85;margin-bottom:auto}
.pillar h3{font-size:19px;margin-top:30px;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.35)}
.pillar .psum{font-size:13px;line-height:1.5;color:rgba(245,241,230,.92);margin-top:8px;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.pillar .arrow{color:var(--green);font-size:18px;margin-top:10px}
/* Shop CTA tile — solid forest, no photo */
.pillar.shop{background:var(--forest);border-color:var(--forest)}
.pillar.shop::after{display:none}
.pillar.shop .num{color:var(--green);opacity:1}
.pillar.shop h3{color:var(--paper)}

/* 5. DOCUMENTARY =========================================================== */
.doc{background:var(--forest-2);color:#eaf3de;padding:84px 0;position:relative;overflow:hidden}
.doc .contour{opacity:.25}
.doc-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;position:relative}
.doc .eyebrow{color:var(--green)}
.doc h2{
  font-family:'DM Serif Display',serif;font-weight:400;
  font-size:clamp(36px,5vw,60px);color:#fff;margin:16px 0 22px;line-height:1.02;
}
.doc p{color:#c9d3c0;font-size:16px;line-height:1.7;margin-bottom:14px}
.doc .feat{color:#fff}

.doc-vid{
  aspect-ratio:16/10;border-radius:16px;background:#0d1a11;
  border:1px solid rgba(146,205,98,.3);display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.doc-vid .play{width:74px;height:74px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center}
.doc-vid .play::after{content:"";border-left:22px solid var(--forest);border-top:14px solid transparent;border-bottom:14px solid transparent;margin-left:6px}
.doc-vid .vlabel{position:absolute;bottom:16px;left:18px;font-size:13px;color:#9fb592}

/* 6. PROJECTS ============================================================== */
.home-proj{padding:84px 0}
.home-proj .head{margin-bottom:42px}
.home-proj h2{font-size:clamp(28px,3.4vw,40px);margin-top:10px}
.home-proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.pcard .imgwrap{aspect-ratio:3/2;overflow:hidden;background:var(--canopy)}
.pcard .imgwrap img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease,filter .45s ease}
.pcard:hover .imgwrap img{transform:scale(1.05)}
.pcard .pc-body{padding:22px 22px 26px}
.pcard h3{font-size:21px;margin-bottom:8px}
.pcard p{font-size:14px;color:var(--muted);margin-bottom:16px}
.pcard .plink{font-size:14px;font-weight:600;color:var(--green-deep)}

/* 7. HOME RESPONSIVE OVERRIDES ============================================= */
@media (max-width:980px){
  .hero-grid,.vm-grid,.doc-grid{grid-template-columns:1fr;gap:36px}
  .hero-fig{aspect-ratio:4/3;order:-1}
  .stats,.pillar-grid{grid-template-columns:repeat(2,1fr)}
  .home-proj-grid{grid-template-columns:1fr}
}


/* ==========================================================================
   PAGE: ABOUT
   ========================================================================== */
/* ==========================================================================
   TCA — ABOUT PAGE STYLES
   Loaded after global.css. Consolidates the former About submenu
   (About, Staff, Board, Partners, Patrons, Achievements) into one page.

   CONTENTS
     1. Story
     2. Mission cards
     3. Objectives grid
     4. Team (leadership + field roster)
     5. Board
     6. Patrons
     7. Timeline (achievements)
     8. About responsive overrides
   ========================================================================== */


/* 1. STORY ================================================================= */
.story{padding:80px 0}
.story-grid{display:grid;grid-template-columns:1.5fr .9fr;gap:54px;align-items:start}
.story h2{font-size:clamp(28px,3.4vw,40px);margin:10px 0 22px}
.story p{font-size:16px;line-height:1.75;color:var(--ink);margin-bottom:18px}
.story .facts{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 26px 12px;position:sticky;top:120px}
.story .facts .row{padding:0 0 14px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.story .facts .row:last-child{border-bottom:none}
.story .facts .n{font-family:'DM Serif Display',serif;font-size:30px;color:var(--canopy);line-height:1}
.story .facts .l{font-size:13.5px;color:var(--muted);margin-top:6px}


/* 2. MISSION CARDS ========================================================= */
.mission-sec{background:var(--forest);color:var(--paper);padding:80px 0}
.mission-sec .eyebrow{color:var(--green)}
.mission-sec .feature{font-family:'DM Serif Display',serif;font-weight:400;font-size:clamp(26px,3.4vw,40px);color:#fff;margin:14px 0 48px;max-width:760px;line-height:1.18}
.mcards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mcard{border:1px solid rgba(146,205,98,.28);border-radius:16px;padding:28px 24px}
.mcard .ic{width:44px;height:44px;border-radius:11px;background:rgba(146,205,98,.16);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.mcard .ic svg{width:22px;height:22px;stroke:var(--green);fill:none;stroke-width:1.7}
.mcard h3{color:#fff;font-size:19px;margin-bottom:10px}
.mcard p{color:#c9d3c0;font-size:14.5px;line-height:1.6}


/* 3. OBJECTIVES GRID ======================================================= */
.objectives{padding:80px 0}
.objectives .head{margin-bottom:42px;max-width:680px}
.objectives h2{font-size:clamp(28px,3.4vw,40px);margin-top:10px}
.obj-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.obj{position:relative;overflow:hidden;isolation:isolate;border:1px solid var(--line);border-radius:14px;padding:22px;min-height:210px;
  display:flex;flex-direction:column;color:#fff;transition:transform .15s ease,border-color .15s ease}
.obj .pbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .5s ease}
.obj::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(165deg,rgba(12,20,12,.26) 0%,rgba(12,20,12,.60) 46%,rgba(10,16,10,.86) 100%)}
.obj:hover{transform:translateY(-3px);border-color:var(--green)}
.obj:hover .pbg{transform:scale(1.06)}
.obj .num{font-family:'Lora',serif;font-size:14px;color:#fff;opacity:.85;margin-bottom:auto}
.obj h3{font-size:19px;margin-top:30px;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.35)}
.obj .psum{font-size:13px;line-height:1.5;color:rgba(245,241,230,.92);margin-top:8px;
  text-shadow:0 1px 8px rgba(0,0,0,.4)}
.obj .arrow{color:var(--green);font-size:18px;margin-top:12px}


/* 4. TEAM ================================================================== */
.team{padding:80px 0;background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.team .head{margin-bottom:42px;max-width:680px}
.team h2{font-size:clamp(28px,3.4vw,40px);margin-top:10px}

.leaders{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:56px}
.leader{background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.leader .portrait{aspect-ratio:1/1;overflow:hidden;background:var(--canopy)}
.leader .portrait img{width:100%;height:100%;object-fit:cover}
.leader .body{padding:22px 22px 26px}
.leader h3{font-size:21px;margin-bottom:2px}
.leader .role{font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--canopy);font-weight:600;margin-bottom:12px}
.leader p{font-size:13.5px;line-height:1.6;color:var(--muted)}

.roster{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.roster h4{font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--forest);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.roster ul{list-style:none}
.roster li{font-size:14px;color:var(--ink);padding:5px 0;display:flex;justify-content:space-between;gap:12px}
.roster li span{color:var(--muted);font-size:12.5px;text-align:right}
.roster .note{grid-column:1/-1;font-size:14px;color:var(--muted);margin-top:8px;line-height:1.6}


/* 5. BOARD ================================================================= */
.board{padding:80px 0 64px}
.board .head{margin-bottom:42px;max-width:680px}
.board h2{font-size:clamp(28px,3.4vw,40px);margin-top:10px}
.board-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:start}
.bcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px}
.bcard .top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.bcard .avatar{width:54px;height:54px;border-radius:50%;flex:none;overflow:hidden;background:var(--canopy);display:flex;align-items:center;justify-content:center}
.bcard .avatar img{width:100%;height:100%;object-fit:cover}
.bcard .avatar span{font-family:'DM Serif Display',serif;color:#fff;font-size:20px}
.bcard h3{font-size:17px;line-height:1.2}
.bcard .role{font-size:12.5px;color:var(--canopy);font-weight:600;margin-top:3px}
.bcard p{font-size:13.5px;line-height:1.6;color:var(--muted)}
.directors{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px}
.directors .chip{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:7px 16px 7px 8px;font-size:14px;font-weight:500;color:var(--ink)}
.directors .chip .av{width:30px;height:30px;border-radius:50%;background:var(--canopy);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'DM Serif Display',serif;font-size:13px}
.directors .chip .r{color:var(--muted);font-weight:400;font-size:12.5px}
.board .advisory{margin-top:28px;background:var(--forest);color:#c9d3c0;border-radius:16px;padding:30px 32px}
.board .advisory h3{font-family:'Lora',serif;color:#fff;font-size:20px;margin-bottom:10px}
.board .advisory p{font-size:15px;line-height:1.65}


/* 6. PATRONS =============================================================== */
.patrons{padding:64px 0 80px;background:var(--forest-2);color:var(--paper);position:relative;overflow:hidden}
.patrons .contour{opacity:.2}
.patrons .head{position:relative;margin-bottom:40px;max-width:680px}
.patrons .eyebrow{color:var(--green)}
.patrons h2{color:#fff;font-size:clamp(28px,3.4vw,40px);margin-top:10px}
.patron-grid{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.patron{border:1px solid rgba(146,205,98,.28);border-radius:18px;padding:32px 30px}
.patron .name{font-family:'DM Serif Display',serif;font-size:26px;color:#fff;line-height:1.1}
.patron .title{font-size:13px;letter-spacing:.5px;color:var(--green);margin:8px 0 16px}
.patron p{font-size:14.5px;line-height:1.65;color:#c4cebb}


/* 7. TIMELINE ============================================================== */
.timeline{padding:80px 0}
.timeline .head{margin-bottom:48px;max-width:680px}
.timeline h2{font-size:clamp(28px,3.4vw,40px);margin-top:10px}
.tl{position:relative;max-width:780px;margin-left:8px;padding-left:34px}
.tl::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl-item{position:relative;padding-bottom:40px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-34px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--green);border:3px solid var(--paper);box-shadow:0 0 0 1px var(--line)}
.tl-item .year{font-family:'DM Serif Display',serif;font-size:20px;color:var(--canopy);margin-bottom:6px}
.tl-item p{font-size:15px;line-height:1.7;color:var(--ink)}


/* 8. ABOUT RESPONSIVE OVERRIDES =========================================== */
@media (max-width:980px){
  .story-grid{grid-template-columns:1fr;gap:34px}
  .story .facts{position:static}
  .mcards,.obj-grid,.leaders{grid-template-columns:repeat(2,1fr)}
  .board-grid{grid-template-columns:repeat(2,1fr)}
  .roster{grid-template-columns:repeat(2,1fr)}
  .patron-grid{grid-template-columns:1fr}
}
@media (max-width:620px){
  .mcards,.obj-grid,.leaders,.board-grid,.roster{grid-template-columns:1fr}
}


/* ==========================================================================
   PAGE: ALLIANCE
   ========================================================================== */
/* ==========================================================================
   TCA — THE ALLIANCE PAGE STYLES
   Loaded after global.css. Hero and sub-nav come from global.css
   (.page-hero, .subnav).

   CONTENTS
     1. How it works (overview)
     2. Quote band
     3. Village sections + chip grids
     4. Communities map
     5. Alliance responsive overrides
   ========================================================================== */


/* 1. HOW IT WORKS ========================================================== */
.how{padding:78px 0}
.how-grid{display:grid;grid-template-columns:1.5fr .9fr;gap:54px;align-items:start}
.how h2{font-size:clamp(28px,3.4vw,40px);margin:10px 0 22px}
.how p{font-size:16px;line-height:1.75;color:var(--ink);margin-bottom:18px}
.how .stats{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 26px 12px;position:sticky;top:120px}
.how .stats .row{padding:0 0 14px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.how .stats .row:last-child{border-bottom:none;padding-bottom:14px}
.how .stats .n{font-family:'DM Serif Display',serif;font-size:30px;color:var(--canopy);line-height:1}
.how .stats .l{font-size:13.5px;color:var(--muted);margin-top:6px}


/* 2. QUOTE BAND ============================================================ */
.aquote{background:var(--forest);color:var(--paper);padding:76px 0;position:relative;overflow:hidden;text-align:center}
.aquote .contour{opacity:.18}
.aquote blockquote{position:relative;max-width:860px;margin:0 auto;font-family:'DM Serif Display',serif;font-weight:400;font-size:clamp(22px,3vw,33px);line-height:1.3;color:#fff}
.aquote .cite{position:relative;margin-top:24px;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--green)}


/* 3. VILLAGE SECTIONS ====================================================== */
.villages{padding:72px 0;border-top:1px solid var(--line)}
.villages.alt{background:var(--card)}
.villages .head{max-width:780px}
.villages h2{font-size:clamp(26px,3vw,36px);margin-top:10px}
.villages p{font-size:16px;line-height:1.7;color:var(--ink);margin-top:14px}
.vfacts{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 30px}
.vfacts .f{background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:7px 15px;font-size:13px;font-weight:500;color:var(--ink)}
.villages.alt .vfacts .f{background:#fff}
.vchips{display:flex;flex-wrap:wrap;gap:9px}
.vchip{background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:9px 14px;font-size:14px;color:var(--ink);transition:border-color .15s ease,color .15s ease}
.villages.alt .vchip{background:#fff}
.vchip:hover{border-color:var(--green);color:var(--canopy)}


/* 4. COMMUNITIES MAP ======================================================= */
.amap{padding:64px 0 86px}
.amap figure{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--card)}
.amap img{width:100%;display:block}
.amap figcaption{font-size:13.5px;color:var(--muted);padding:15px 18px;text-align:center}


/* 5. ALLIANCE RESPONSIVE OVERRIDES ========================================= */
@media (max-width:980px){
  .how-grid{grid-template-columns:1fr;gap:34px}
  .how .stats{position:static}
}


/* ==========================================================================
   PAGE: CONTACT
   ========================================================================== */
/* ==========================================================================
   TCA — CONTACT PAGE STYLES
   Loaded after global.css. Hero comes from global.css (.page-hero).

   CONTENTS
     1. Intro
     2. Entity cards
     3. Get-in-touch band
     4. Responsive
   ========================================================================== */


/* 1. INTRO ================================================================= */
.contact-intro{padding:62px 0 10px}
.contact-intro .wrap{max-width:820px}
.contact-intro .lead{font-family:'DM Serif Display',serif;font-size:clamp(20px,2.4vw,26px);line-height:1.4;color:var(--forest);margin-bottom:18px}
.contact-intro p{font-size:16px;line-height:1.75;color:var(--ink)}


/* 2. ENTITY CARDS ========================================================= */
.entities{padding:36px 0 64px}
.ent-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ent{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px 30px 26px;position:relative;overflow:hidden}
.ent .flag{font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--canopy);margin-bottom:10px}
.ent h2{font-size:21px;line-height:1.2;margin:0 0 18px}
.ent .addr{font-size:15px;line-height:1.7;color:var(--ink);margin:0 0 18px}
.ent .addr .pin{display:block;margin-bottom:12px;padding-left:24px;position:relative}
.ent .addr .pin::before{content:"";position:absolute;left:0;top:2px;width:15px;height:15px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233C6B3A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E")}
.ent .ent-email{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--green-deep);margin-bottom:20px}
.ent .ent-email:hover{color:var(--canopy)}
.ent .reg{list-style:none;margin:0;padding:16px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 22px}
.ent .reg li{font-size:12.5px;color:var(--muted)}
.ent .reg li b{color:var(--ink);font-weight:600}


/* 3. GET-IN-TOUCH BAND ==================================================== */
.touch{background:var(--forest);color:var(--paper);padding:72px 0;position:relative;overflow:hidden;text-align:center}
.touch .contour{opacity:.18}
.touch .inner{position:relative;max-width:640px;margin:0 auto}
.touch .eyebrow{color:var(--green)}
.touch h2{font-family:'DM Serif Display',serif;font-weight:400;font-size:clamp(26px,3.4vw,40px);color:#fff;margin:10px 0 14px}
.touch p{font-size:16px;line-height:1.7;color:rgba(245,241,230,.85);margin:0 0 28px}
.touch .mail-btn{display:inline-flex;align-items:center;gap:10px;background:var(--green);color:var(--forest);
  font-weight:600;font-size:15px;padding:14px 26px;border-radius:999px}
.touch .mail-btn:hover{background:#a6db78;color:var(--forest)}
.touch .mail-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.touch .socials{display:flex;justify-content:center;gap:14px;margin-top:30px}
.touch .socials a{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  border:1px solid rgba(245,241,230,.3);color:var(--paper);transition:background .2s ease,border-color .2s ease}
.touch .socials a:hover{background:rgba(146,205,98,.18);border-color:var(--green);color:#fff}
.touch .socials svg{width:18px;height:18px;fill:currentColor}


/* 4. RESPONSIVE =========================================================== */
@media (max-width:760px){
  .ent-grid{grid-template-columns:1fr}
}


/* 5. CONTACT FORM ========================================================= */
.contact-main{padding:48px 0 72px}
.cm-grid{display:grid;grid-template-columns:1.45fr .8fr;gap:40px;align-items:start}

.form-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px 32px 34px}
.form-card h2{font-size:22px;margin:0 0 4px}
.form-card .sub{font-size:14px;color:var(--muted);margin:0 0 24px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;margin-bottom:18px}
.field label{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:7px}
.field label .req{color:#a3201d;margin-left:2px}
.field label .opt{color:var(--muted);font-weight:400;margin-left:4px}
.field input,.field select,.field textarea{
  font-family:'Inter',sans-serif;font-size:15px;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;width:100%;
  transition:border-color .18s ease,box-shadow .18s ease}
.field textarea{min-height:140px;resize:vertical}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2378746a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:18px;padding-right:40px;cursor:pointer}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--canopy);box-shadow:0 0 0 3px rgba(60,107,58,.12)}
.field input:invalid:not(:placeholder-shown){border-color:#d3a09e}
.form-actions{display:flex;align-items:center;gap:16px;margin-top:6px;flex-wrap:wrap}
.form-actions .btn{border:none;cursor:pointer;font-family:'Inter',sans-serif}
.form-note{font-size:12.5px;color:var(--muted)}

/* Aside — direct contact details */
.contact-side{background:var(--forest);color:var(--paper);border-radius:18px;padding:28px 28px 30px;position:relative;overflow:hidden}
.contact-side .contour{opacity:.16}
.contact-side .contour{position:absolute;left:0;right:0;bottom:0;top:auto;width:100%;height:200px;opacity:.18}
.contact-side > *:not(.contour){position:relative}
.contact-side h3{font-family:'DM Serif Display',serif;font-weight:400;font-size:22px;color:#fff;margin:0 0 18px}
.contact-side .blk{padding:0 0 16px;margin-bottom:16px;border-bottom:1px solid rgba(245,241,230,.18)}
.contact-side .blk:last-of-type{border-bottom:none;margin-bottom:20px}
.contact-side .lbl{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--green);font-weight:600;margin-bottom:6px}
.contact-side a.email{color:#fff;font-weight:600;font-size:15px}
.contact-side a.email:hover{color:var(--green)}
.contact-side p{font-size:13.5px;line-height:1.6;color:rgba(245,241,230,.85);margin:0}
.contact-side .side-socials{display:flex;gap:12px}
.contact-side .side-socials a{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid rgba(245,241,230,.3);color:var(--paper)}
.contact-side .side-socials a:hover{background:rgba(146,205,98,.18);border-color:var(--green);color:#fff}
.contact-side .side-socials svg{width:17px;height:17px;fill:currentColor}

@media (max-width:860px){
  .cm-grid{grid-template-columns:1fr;gap:26px}
}
@media (max-width:560px){
  .form-row{grid-template-columns:1fr}
}


/* 6. ASIDE PHOTO + PHONE FIELD ADDITIONS ================================== */
.contact-side .side-photo{display:block;width:100%;border-radius:12px;margin-bottom:22px;
  border:1px solid rgba(245,241,230,.25);object-fit:cover;aspect-ratio:16/9}

/* Phone: country selector + number input */
.phone-group{display:flex;gap:8px}
.phone-group select{flex:0 0 auto;width:96px;padding:12px 26px 12px 12px;
  background-position:right 8px center;background-size:16px}
.phone-group input{flex:1 1 auto}


/* ==========================================================================
   PAGE: MEDIA
   ========================================================================== */
/* ==========================================================================
   TCA — MEDIA PAGE STYLES
   Loaded after global.css. Hero and sub-nav come from global.css.
   Consolidates Photos, Videos and Podcasts. Each media type keeps a
   consistent size within its group; groups differ (photos portrait,
   videos 16:9, podcasts wide cards).

   CONTENTS
     1. Section wrapper
     2. Photos (grid + overlaid captions)
     3. Lightbox (pure-CSS :target)
     4. Videos (16:9 grid)
     5. Podcasts (card grid)
     6. Responsive
   ========================================================================== */

/* 1. SECTION WRAPPER ======================================================= */
.media-sec{padding:62px 0;border-top:1px solid var(--line)}
.media-sec .head{margin-bottom:30px;max-width:760px}
.media-sec h2{font-size:clamp(26px,3vw,38px);margin-top:10px}
.media-sec .head p{font-size:16px;line-height:1.7;color:var(--muted);margin-top:12px}

/* 2. PHOTOS — uniform portrait tiles, caption overlaid on top ============= */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:14px}
.photo{position:relative;display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/5;cursor:zoom-in;background:var(--card)}
.photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.photo:hover img{transform:scale(1.06)}
.photo .cap{position:absolute;top:0;left:0;right:0;z-index:2;padding:10px 12px 24px;font-size:12.5px;line-height:1.35;color:#fff;
  background:linear-gradient(to bottom,rgba(11,18,11,.82),rgba(11,18,11,.45) 55%,rgba(11,18,11,0));pointer-events:none}

/* 3. LIGHTBOX — opens full image in place, pure CSS (:target) ============= */
/* 4. VIDEOS — uniform 16:9 grid =========================================== */
.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.video figure{margin:0}
.video .frame{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#000}
.video .frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video figcaption{font-size:13.5px;color:var(--muted);margin-top:11px}

/* 5. PODCASTS — card grid ================================================= */
.pod-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:20px;align-items:stretch}
.pod{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px 24px 22px;display:flex;flex-direction:column}
.pod .pmeta{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.pod .picon{width:40px;height:40px;border-radius:11px;background:rgba(146,205,98,.16);display:flex;align-items:center;justify-content:center;flex:none}
.pod .picon svg{width:20px;height:20px;stroke:var(--canopy);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pod .date{font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);font-weight:600}
.pod h3{font-size:18px;margin:0 0 16px;line-height:1.3}
.pod .acast{margin-top:auto;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.pod .acast iframe{width:100%;height:150px;border:0;display:block}
.pod .listen{margin-top:auto;display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--green-deep);align-self:flex-start}
.pod .listen:hover{color:var(--canopy)}
.pod .listen svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}

/* 6. RESPONSIVE ============================================================ */
@media (max-width:620px){
  .photo-grid{grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:10px}
  .pod-grid{grid-template-columns:1fr}
}


/* ==========================================================================
   PAGE: STRATEGY
   ========================================================================== */
/* ==========================================================================
   TCA — STRATEGY PAGE STYLES
   Loaded after global.css. Consolidates the former Strategy submenu
   (Our Strategy + the seven "Saving …" pages) into one page.
   Hero and sub-nav come from global.css (.page-hero, .subnav).

   CONTENTS
     1. Overview intro
     2. Pillar rows (alternating)
     3. Strategy responsive overrides
   ========================================================================== */


/* 1. OVERVIEW INTRO ======================================================== */
.strat-intro{padding:70px 0 24px;text-align:center}
.strat-intro .feature{font-family:'DM Serif Display',serif;font-weight:400;font-size:clamp(24px,3.2vw,38px);color:var(--forest);line-height:1.22;max-width:780px;margin:0 auto}
.strat-intro .rule{width:40px;height:3px;background:var(--green);border-radius:2px;margin:0 auto 24px}
.strat-banner{margin-top:36px;border-radius:18px;overflow:hidden;max-height:380px}
.strat-banner img{width:100%;height:100%;max-height:380px;object-fit:cover;display:block}


/* 2. PILLAR ROWS =========================================================== */
.pillar-rows{padding:10px 0 80px}
.prow{display:grid;grid-template-columns:1fr 1fr;column-gap:54px;row-gap:24px;align-items:center;padding:54px 0;border-top:1px solid var(--line)}
.prow:nth-of-type(even) .prow-visual{order:-1}
.prow > .detail{grid-column:1/-1}

.prow-content .badge{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.prow-content .num{font-family:'DM Serif Display',serif;font-size:30px;color:var(--green-deep);line-height:1}
.prow-content .ic{width:50px;height:50px;border-radius:50%;background:rgba(146,205,98,.16);display:flex;align-items:center;justify-content:center}
.prow-content .ic img{width:30px;height:30px;object-fit:contain}
.prow-content h2{font-size:clamp(24px,2.8vw,32px);}
.prow-content p{font-size:15.5px;line-height:1.7;color:var(--ink)}
.prow-content p em{color:var(--canopy);font-style:italic}

.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.facts .f{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:7px 15px;font-size:13px;font-weight:500;color:var(--ink)}

.prow-visual img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px}
.prow-visual.iconpanel{aspect-ratio:4/3;border-radius:18px;display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,var(--canopy),var(--forest));position:relative;overflow:hidden}
.prow-visual.iconpanel img{width:auto;height:auto;aspect-ratio:auto;max-width:128px;max-height:128px;filter:brightness(0) invert(1);opacity:.92;border-radius:0}

/* expandable full detail (native <details>), spans full page width */
.detail{margin-top:0;border-top:1px solid var(--line)}
.detail summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:9px;padding:16px 0 4px;font-size:13.5px;font-weight:600;letter-spacing:.2px;color:var(--green-deep)}
.detail summary::-webkit-details-marker{display:none}
.detail summary .chev{width:16px;height:16px;flex:none;transition:transform .25s ease}
.detail[open] summary .chev{transform:rotate(90deg)}
.detail summary .more{display:inline}
.detail[open] summary .more{display:none}
.detail summary .less{display:none}
.detail[open] summary .less{display:inline}
.detail-body{padding:10px 0 6px;animation:detailfade .3s ease}
/* .detail-figs and .detail-text are two separate grids stacked one above the other
   (photos row, then text row). They must use the SAME minmax breakpoint and the
   SAME column-gap so their column tracks land in identical positions at every
   viewport width — otherwise an image can end up above the wrong text column
   whenever the two grids wrap to a different number of columns. */
.detail-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));column-gap:48px;row-gap:16px;margin:6px 0 24px}
.detail-figs .figure{margin:0}
.detail-figs img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;display:block;margin:0}
.detail-text{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));column-gap:48px;row-gap:0}
.dgroup{break-inside:avoid}
.detail-body h4{font-family:'Lora',serif;font-size:15.5px;color:var(--forest);margin:20px 0 8px}
.detail-body p{font-size:14px;line-height:1.7;color:var(--ink);margin-bottom:14px}
.detail-body ul{margin:0 0 14px;padding-left:18px}
.detail-body li{font-size:14px;line-height:1.6;color:var(--ink);margin-bottom:5px}
@keyframes detailfade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}


/* 3. STRATEGY RESPONSIVE OVERRIDES ========================================= */
@media (max-width:860px){
  .prow{grid-template-columns:1fr;gap:28px;padding:44px 0}
  .prow:nth-of-type(even) .prow-visual{order:-1}
  .prow-visual{order:-1}
  .prow-visual img,.prow-visual.iconpanel{aspect-ratio:16/9}
}


/* ==========================================================================
   PAGE: TREE KANGAROOS
   ========================================================================== */
/* ==========================================================================
   TCA — TREE KANGAROOS PAGE STYLES
   Loaded after global.css. Hero and sub-nav come from global.css.
   Consolidates the Tree Kangaroos section + all 14 species info sheets.

   CONTENTS
     1. Intro / overview
     2. IUCN status badges (shared)
     3. Featured Torricelli species
     4. Species expandable detail
     5. Species library grid (the wider family)
     6. Responsive
   ========================================================================== */

/* 1. INTRO ================================================================= */
.tk-intro{padding:70px 0 10px}
.tk-intro .wrap{max-width:880px}
.tk-intro p{font-size:17px;line-height:1.75;color:var(--ink);margin-bottom:18px}
.tk-intro .lead{font-family:'DM Serif Display',serif;font-size:clamp(20px,2.4vw,26px);line-height:1.4;color:var(--forest)}
.tk-stats{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.tk-stats .s{flex:1;min-width:150px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.tk-stats .n{font-family:'DM Serif Display',serif;font-size:30px;color:var(--canopy);line-height:1}
.tk-stats .l{font-size:13px;color:var(--muted);margin-top:7px}

/* 2. IUCN STATUS BADGES ==================================================== */
.status{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  padding:4px 11px;border-radius:999px;white-space:nowrap}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.form-actions .status { width: 100%; }
.s-cr{color:#a3201d;background:#f7e3e1}
.s-en{color:#c0531a;background:#f8e7d8}
.s-vu{color:#9a7714;background:#f6eed2}
.s-nt{color:#5d7d2b;background:#eaf1d9}
.s-lc{color:#2f7d4f;background:#def0e4}

/* 3. FEATURED TORRICELLI SPECIES ========================================== */
.tk-feature{padding:54px 0;border-top:1px solid var(--line)}
.tk-feature .wrap{max-width:var(--wrap)}
.feat-head{display:flex;align-items:flex-start;gap:18px;margin-bottom:26px}
.feat-head .num{font-family:'DM Serif Display',serif;font-size:30px;color:var(--green);line-height:1;flex:none;width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;border:1.5px solid var(--green);border-radius:12px}
.feat-head h2{font-size:clamp(26px,3vw,38px);line-height:1.05;margin:0}
.feat-head .sci{font-family:'Lora',serif;font-style:italic;font-weight:400;font-size:.5em;color:var(--muted);display:block;margin-top:4px}
.feat-head .status{margin-top:12px}

.feat-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:34px;align-items:start}
.feat-photos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.feat-photos a{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;cursor:zoom-in}
.feat-photos a:first-child{grid-column:1 / -1;aspect-ratio:16/10}
.feat-photos img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.feat-photos a:hover img{transform:scale(1.05)}

.feat-info .chars{font-size:16px;line-height:1.7;color:var(--ink);margin:0 0 18px}
.kv{list-style:none;margin:0 0 16px;padding:0;border-top:1px solid var(--line)}
.kv li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.kv li .k{color:var(--muted)}
.kv li .v{color:var(--ink);font-weight:500;text-align:right}
.feat-info .local{font-size:13.5px;color:var(--muted);line-height:1.6}
.feat-info .local b{color:var(--ink);font-weight:600}

.feat-blurb{font-size:16px;line-height:1.75;color:var(--ink);max-width:880px;margin:24px 0 0}

/* 4. SPECIES EXPANDABLE DETAIL ============================================ */
.tk-detail{margin-top:22px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.tk-detail summary{list-style:none;cursor:pointer;padding:15px 22px;display:flex;align-items:center;gap:10px;
  font-weight:600;font-size:14.5px;color:var(--forest);background:var(--card)}
.tk-detail summary::-webkit-details-marker{display:none}
.tk-detail .chev{width:18px;height:18px;transition:transform .25s ease;flex:none}
.tk-detail[open] .chev{transform:rotate(90deg)}
.tk-detail summary .less{display:none}
.tk-detail[open] summary .more{display:none}
.tk-detail[open] summary .less{display:inline}
.tk-detail-body{padding:22px}
.tk-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:18px}
.tk-figs figure{margin:0}
.tk-figs img{width:100%;border-radius:12px;border:1px solid var(--line);background:#fff;display:block}
.tk-figs figcaption{font-size:12px;color:var(--muted);margin-top:7px;text-align:center;font-style:italic}
.tk-detail-body p{font-size:15px;line-height:1.75;color:var(--ink);margin:0 0 14px;max-width:820px}
.tk-detail-body p:last-child{margin-bottom:0}

/* 5. SPECIES LIBRARY GRID ================================================= */
.tk-library{padding:64px 0;border-top:1px solid var(--line)}
.tk-library .head{max-width:760px;margin-bottom:34px}
.tk-library h2{font-size:clamp(26px,3vw,38px);margin-top:10px}
.tk-library .head p{font-size:16px;line-height:1.7;color:var(--muted);margin-top:12px}

.tk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.tk-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.tk-card .tk-img{aspect-ratio:4/3;overflow:hidden;border-bottom:1px solid var(--line);background:var(--paper)}
.tk-card .tk-img.photo img{width:100%;height:100%;object-fit:cover;display:block}
.tk-card .tk-img.illus{display:flex;align-items:center;justify-content:center;padding:14px;background:radial-gradient(circle at 50% 40%,#fbf7ec,#efe7d2)}
.tk-card .tk-img.illus img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.tk-card .tk-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.tk-card .status{align-self:flex-start;margin-bottom:12px}
.tk-card h3{font-size:19px;line-height:1.15;margin:0 0 12px}
.tk-card h3 .sci{display:block;font-family:'Lora',serif;font-style:italic;font-weight:400;font-size:13.5px;color:var(--muted);margin-top:3px}
.tk-card .chars{font-size:13.5px;line-height:1.6;color:var(--ink);margin:0 0 14px}
.tk-card .kv{margin:0 0 14px}
.tk-card .kv li{padding:7px 0;font-size:13px}
.tk-card .blurb{font-size:13px;line-height:1.6;color:var(--muted);margin:auto 0 0}

/* 6. RESPONSIVE =========================================================== */
@media (max-width:860px){
  .feat-grid{grid-template-columns:1fr;gap:24px}
}
@media (max-width:600px){
  .tk-grid{grid-template-columns:1fr}
  .tk-stats .s{min-width:120px}
}

/* 7. LIGHTBOX (pure-CSS :target) — featured species photos =============== */


/* ==========================================================================
   PAGE: SHOP (shop.php + product pages)
   ========================================================================== */
/* ==========================================================================
   TCA — SHOP PAGE STYLES
   Loaded after global.css. Hero comes from global.css (.page-hero).

   Every product uses the SAME card structure (image, category, name, maker,
   blurb, price, buy) so the future admin backend can render them uniformly.
   Base prices live in data-aud="" on each .product; the currency switcher
   converts them on the client. Charged currency is always AUD.

   CONTENTS
     1. Intro + currency switcher
     2. Product grid + card
     3. Bilum colour thumbnails
     4. Buy button + price
     5. Reassurance band
     6. Responsive
   ========================================================================== */

/* 1. INTRO + CURRENCY SWITCHER ============================================ */
.shop-intro{padding:54px 0 22px;text-align:center}
.shop-intro .wrap{max-width:760px}
.shop-intro .lead{font-family:'DM Serif Display',serif;font-size:clamp(20px,2.4vw,26px);line-height:1.4;color:var(--forest);margin-bottom:14px}
.shop-intro p{font-size:16px;line-height:1.7;color:var(--ink)}

.curbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin-top:26px}
.curbar .label{font-size:12.5px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:600}
.cur-group{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px;gap:2px;flex-wrap:wrap;justify-content:center}
.cur-group button{font-family:'Inter',sans-serif;font-size:13px;font-weight:600;color:var(--ink);background:transparent;border:none;
  border-radius:999px;padding:7px 14px;cursor:pointer;transition:background .15s ease,color .15s ease}
.cur-group button:hover{color:var(--canopy)}
.cur-group button[aria-pressed="true"]{background:var(--forest);color:#fff}
.cur-note{font-size:12px;color:var(--muted);margin-top:10px;text-align:center}

/* 2. PRODUCT GRID + CARD ================================================== */
.shop{padding:14px 0 64px}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:24px}
.product{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.product:hover{transform:translateY(-4px);border-color:var(--green);box-shadow:0 14px 34px rgba(21,40,26,.10)}
.prod-media{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:#fff}
.prod-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.product:hover .prod-media img{transform:scale(1.05)}
.prod-media .cat{position:absolute;top:12px;left:12px;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:var(--forest);background:rgba(245,241,230,.92);backdrop-filter:blur(4px);padding:5px 11px;border-radius:999px}

.prod-body{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px}
.prod-body h3{font-size:19px;line-height:1.2;margin:0 0 4px}
.prod-body .maker{font-size:12.5px;color:var(--canopy);font-weight:600;margin:0 0 12px}
.prod-body .blurb{font-size:13.5px;line-height:1.6;color:var(--muted);margin:0 0 18px}

/* 3. BILUM COLOUR THUMBNAILS ============================================= */
.prod-thumbs{display:flex;gap:8px;margin:0 0 18px;flex-wrap:wrap}
.prod-thumbs button{width:38px;height:38px;border-radius:8px;overflow:hidden;border:1px solid var(--line);padding:0;cursor:pointer;background:#fff}
.prod-thumbs button[aria-pressed="true"]{border-color:var(--canopy);box-shadow:0 0 0 2px rgba(60,107,58,.18)}
.prod-thumbs img{width:100%;height:100%;object-fit:cover;display:block}

/* 4. BUY BUTTON + PRICE =================================================== */
.prod-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:6px}
.price{font-family:'DM Serif Display',serif;font-size:24px;color:var(--forest);line-height:1;white-space:nowrap}
.price .approx{display:block;font-family:'Inter',sans-serif;font-size:11px;color:var(--muted);font-weight:400;margin-top:3px}
.buy{font-size:14px;padding:11px 20px;border:none;cursor:pointer;white-space:nowrap}
.ship{font-size:12px;color:var(--muted);margin:14px 0 0;display:flex;align-items:center;gap:7px}
.ship svg{width:14px;height:14px;stroke:var(--canopy);fill:none;stroke-width:2;flex:none}

/* 5. REASSURANCE BAND ==================================================== */
.shop-why{background:var(--forest);color:var(--paper);padding:60px 0;position:relative;overflow:hidden}
.shop-why .contour{opacity:.16}
.shop-why .wrap{position:relative}
.shop-why .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.shop-why .why h3{font-family:'DM Serif Display',serif;font-weight:400;font-size:21px;color:#fff;margin:0 0 8px}
.shop-why .why p{font-size:14px;line-height:1.65;color:rgba(245,241,230,.84);margin:0}
.shop-why .why .ic{width:30px;height:30px;stroke:var(--green);fill:none;stroke-width:1.8;margin-bottom:14px}

/* 6. RESPONSIVE ========================================================== */
@media (max-width:760px){
  .shop-why .why-grid{grid-template-columns:1fr;gap:24px;text-align:center}
  .shop-why .why .ic{margin-left:auto;margin-right:auto}
}
@media (max-width:480px){
  .product-grid{grid-template-columns:1fr}
}

/* 7. PRODUCT DETAIL PAGE (PDP) =========================================== */
.pdp{padding:32px 0 64px}
.crumbs{font-size:13px;color:var(--muted);margin-bottom:24px}
.crumbs a{color:var(--canopy)}
.crumbs a:hover{color:var(--forest)}
.crumbs span{color:var(--ink)}
.pdp-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.pdp-main{display:block;border:1px solid var(--line);border-radius:18px;overflow:hidden;aspect-ratio:1/1;background:#fff;cursor:zoom-in}
.pdp-main img{width:100%;height:100%;object-fit:cover;display:block}
.pdp-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.pdp-thumbs button{width:62px;height:62px;border-radius:10px;overflow:hidden;border:1px solid var(--line);padding:0;cursor:pointer;background:#fff}
.pdp-thumbs button[aria-pressed="true"]{border-color:var(--canopy);box-shadow:0 0 0 2px rgba(60,107,58,.18)}
.pdp-thumbs img{width:100%;height:100%;object-fit:cover;display:block}

.pdp-info .cat{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--canopy);background:rgba(146,205,98,.16);padding:5px 12px;border-radius:999px;margin-bottom:14px}
.pdp-info h1{font-family:'DM Serif Display',serif;font-weight:400;font-size:clamp(28px,4vw,40px);line-height:1.1;margin:0 0 6px}
.pdp-info .maker{font-size:14px;color:var(--canopy);font-weight:600;margin:0 0 20px}
.pdp-price{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.pdp-info .price{font-size:32px}
.pdp .cur-group{padding:3px}
.pdp .cur-group button{padding:6px 11px;font-size:12px}
.pdp-info .buy{display:inline-block;font-size:15px;padding:14px 30px}
.pdp-info .ship{margin:16px 0 0}
.pdp-desc{margin:26px 0 0;border-top:1px solid var(--line);padding-top:24px}
.pdp-desc p{font-size:15px;line-height:1.75;color:var(--ink);margin:0 0 14px}
.pdp-desc p:last-child{margin-bottom:0}
.pdp-specs{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--line)}
.pdp-specs li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.pdp-specs li .k{color:var(--muted)}
.pdp-specs li .v{color:var(--ink);font-weight:500;text-align:right}
.pdp-related{margin-top:64px;border-top:1px solid var(--line);padding-top:40px}
.pdp-related h2{font-size:24px;margin:0 0 24px}

@media (max-width:820px){
  .pdp-grid{grid-template-columns:1fr;gap:28px}
}

/* 8. LIGHTBOX (pure-CSS :target) ========================================= */
/* 9. CATEGORY SECTIONS =================================================== */
.cat-section{padding:46px 0}
.cat-section + .cat-section{border-top:1px solid var(--line)}
.cat-head{margin-bottom:26px}
.cat-head h2{font-size:clamp(24px,3vw,32px);margin:0}
.cat-head p{font-size:15px;line-height:1.6;color:var(--muted);margin:8px 0 0;max-width:680px}
.cat-head .count{font-size:12.5px;color:var(--canopy);font-weight:600;text-transform:uppercase;letter-spacing:.6px}

/* Product-page lightbox needs a taller image than the site default (styles.css: 80vh). */
.shop-lightbox img{max-width:90vw;max-height:82vh;object-fit:contain;border-radius:6px;box-shadow:0 24px 70px rgba(0,0,0,.6)}


/* ==========================================================================
   PAGE: SPECIAL PROJECTS
   ========================================================================== */
/* ==========================================================================
   TCA — SPECIAL PROJECTS PAGE STYLES
   Loaded after global.css. Hero and sub-nav come from global.css.

   CONTENTS
     1. Intro
     2. Project block
     3. Objectives list
     4. Project stats
     5. Image gallery + map/logo
     6. Expandable detail
     7. Responsive
   ========================================================================== */

/* 1. INTRO ================================================================= */
.sp-intro{padding:54px 0;background:rgba(146,205,98,.12);border-bottom:1px solid var(--line);text-align:center}
.sp-intro .wrap{max-width:760px}
.sp-intro .lead{font-family:'DM Serif Display',serif;font-size:clamp(20px,2.4vw,26px);line-height:1.4;color:var(--forest);margin-bottom:18px}
.sp-intro p{font-size:16px;line-height:1.75;color:var(--ink)}

/* 2. PROJECT BLOCK ======================================================== */
.sp-proj{padding:56px 0;border-top:1px solid var(--line)}
.proj-head{display:flex;align-items:flex-start;gap:18px;margin-bottom:8px}
.proj-head .num{flex:none;width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  font-family:'DM Serif Display',serif;font-size:24px;color:var(--green);border:1.5px solid var(--green);border-radius:12px;line-height:1}
.proj-head h2{font-size:clamp(24px,2.8vw,34px);line-height:1.1;margin:2px 0 0}
.proj-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.proj-tags .tag{font-size:12px;font-weight:600;letter-spacing:.3px;color:var(--canopy);background:rgba(146,205,98,.16);
  border-radius:999px;padding:5px 12px}
.proj-tags .tag.alt{color:var(--muted);background:var(--card);border:1px solid var(--line)}

.sp-proj-grid{display:grid;grid-template-columns:1.55fr .85fr;gap:40px;align-items:start;margin-top:22px}
.proj-summary{font-size:16px;line-height:1.75;color:var(--ink);margin:0 0 22px}
.proj-aside{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;position:sticky;top:120px}
.proj-aside .logo-wrap{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px;display:flex;align-items:center;justify-content:center;min-height:90px}
.proj-aside .logo-wrap img{max-width:100%;max-height:70px;object-fit:contain}
.proj-aside .aside-label{font-size:11.5px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:600;margin-bottom:12px}

/* 3. OBJECTIVES =========================================================== */
.obj-title{font-size:12.5px;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);font-weight:700;margin:0 0 14px}
.obj-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.obj-list li{position:relative;padding-left:30px;font-size:14.5px;line-height:1.6;color:var(--ink)}
.obj-list li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:6px;
  background:rgba(146,205,98,.2);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233C6B3A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:12px}

/* 4. PROJECT STATS ======================================================== */
.proj-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:24px 0 0}
.proj-stats .s{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 16px;text-align:center}
.proj-stats .n{font-family:'DM Serif Display',serif;font-size:28px;color:var(--canopy);line-height:1}
.proj-stats .l{font-size:12.5px;color:var(--muted);margin-top:7px;line-height:1.35}

/* 5. GALLERY + MAP ======================================================== */
.proj-figs{margin-top:24px}
.proj-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.proj-gallery a{display:block;border-radius:10px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;cursor:zoom-in}
.proj-gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.proj-gallery a:hover img{transform:scale(1.06)}
.proj-map{margin-top:24px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card)}
.proj-map img{width:100%;display:block}
.proj-map figcaption{font-size:13px;color:var(--muted);padding:13px 18px;text-align:center}

/* 6. EXPANDABLE DETAIL ==================================================== */
.proj-detail{margin-top:22px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.proj-detail summary{list-style:none;cursor:pointer;padding:15px 22px;display:flex;align-items:center;gap:10px;
  font-weight:600;font-size:14.5px;color:var(--forest);background:var(--card)}
.proj-detail summary::-webkit-details-marker{display:none}
.proj-detail .chev{width:18px;height:18px;transition:transform .25s ease;flex:none}
.proj-detail[open] .chev{transform:rotate(90deg)}
.proj-detail summary .less{display:none}
.proj-detail[open] summary .more{display:none}
.proj-detail[open] summary .less{display:inline}
.proj-detail-body{padding:20px 22px}
.proj-detail-body p{font-size:15px;line-height:1.75;color:var(--ink);margin:0;max-width:820px}

/* 7. RESPONSIVE =========================================================== */
@media (max-width:860px){
  .sp-proj-grid{grid-template-columns:1fr;gap:26px}
  .proj-aside{position:static}
  .proj-stats{grid-template-columns:repeat(2,1fr)}
}

/* 8. LIGHTBOX (pure-CSS :target) — shared by project galleries ============ */


/* ==========================================================================
   PAGE: DONATE
   ========================================================================== */
.donate-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:start;padding:56px 0 84px}
@media (max-width:860px){.donate-wrap{grid-template-columns:1fr}}

.freq-toggle{display:inline-flex;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:4px;margin-bottom:22px}
.freq-toggle button{border:none;background:transparent;font:600 14px 'Inter',sans-serif;color:var(--muted);padding:9px 22px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s}
.freq-toggle button.active{background:var(--forest);color:var(--paper)}

.amt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
@media (max-width:480px){.amt-grid{grid-template-columns:repeat(2,1fr)}}
.amt-btn{border:1.6px solid var(--line);background:var(--card);border-radius:12px;padding:14px 8px;font:600 16px 'Inter',sans-serif;color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s}
.amt-btn:hover{border-color:var(--canopy)}
.amt-btn.active{border-color:var(--canopy);background:var(--forest);color:var(--paper)}

.amt-custom{position:relative;margin-bottom:20px}
.amt-custom span{position:absolute;left:14px;top:50%;transform:translateY(-50%);font:600 15px 'Inter',sans-serif;color:var(--muted)}
.amt-custom input{width:100%;padding:13px 14px 13px 30px;border:1.6px solid var(--line);border-radius:10px;font:600 16px 'Inter',sans-serif;color:var(--ink)}
.amt-custom input:focus{outline:none;border-color:var(--canopy);box-shadow:0 0 0 3px rgba(60,107,58,.12)}

.addon{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;background:var(--paper);border-radius:12px;margin-bottom:22px;cursor:pointer}
.addon input{margin-top:3px;flex:none}
.addon .addon-label{font-size:14px;color:var(--ink);line-height:1.5}
.addon .addon-label b{color:var(--forest)}

.donate-total{display:flex;align-items:baseline;justify-content:space-between;padding:16px 18px;background:var(--forest);color:var(--paper);border-radius:12px;margin-bottom:18px}
.donate-total .label{font-size:14px;opacity:.85}
.donate-total .amt{font:600 26px 'Lora',serif}
.donate-total .cadence{font-size:13px;opacity:.75;margin-left:4px}

.donate-note{font-size:13px;color:var(--muted);margin-top:12px;line-height:1.5}
.donate-note.status{color:var(--canopy);font-weight:600}

.ways-aside h2{font-size:22px;margin:0 0 6px}
.ways-aside > p{font-size:14px;color:var(--muted);margin:0 0 22px;line-height:1.6}
.way-card{border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:14px;background:var(--card)}
.way-card h3{font-size:15.5px;font-family:'Lora',serif;color:var(--forest);margin:0 0 6px}
.way-card p{font-size:13.5px;color:var(--ink);line-height:1.6;margin:0 0 8px}
.way-card a{font-size:13px;font-weight:600;color:var(--canopy)}

.cur-select{position:relative;margin-bottom:20px}
.cur-select select{
  width:100%;appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding:13px 40px 13px 14px;border:1.6px solid var(--line);border-radius:10px;
  background:var(--card);font:600 15px 'Inter',sans-serif;color:var(--ink);cursor:pointer
}
.cur-select select:focus{outline:none;border-color:var(--canopy);box-shadow:0 0 0 3px rgba(60,107,58,.12)}
.cur-select::after{
  content:'';position:absolute;right:16px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:translateY(-65%) rotate(45deg);pointer-events:none
}


/* ==========================================================================
   ACCOUNT MENU (nav) — icon-only on desktop to save nav space; the label
   appears once the nav collapses into the mobile stacked menu, where space
   isn't tight and an icon alone would be less clear.
   ========================================================================== */
.account-drop .drop-head{padding:4px;color:var(--ink)}
.account-drop .drop-head:hover,.account-drop:focus-within .drop-head{color:var(--canopy)}
.account-drop .acct-label{display:none}
.account-drop .drop{right:0;left:auto;transform:none}
.account-drop::after{left:auto;right:0;width:200px}
@media (max-width:980px){
  .account-drop .drop-head{padding:14px 2px;border-bottom:1px solid var(--line);justify-content:flex-start;gap:10px}
  .account-drop .acct-label{display:inline}
}




/* ==========================================================================
   REGISTRATION — flash messages + "(optional)" field tags
   ========================================================================== */
.flash{padding:12px 16px;border-radius:10px;margin:0 0 18px;font-size:14px}
.flash-error{background:#fbeae9;color:#a3201d;border:1px solid #f0c4c1}
.flash-success{background:#eaf3e6;color:var(--forest);border:1px solid #cfe3c6}
.opt-tag{font-weight:400;color:var(--muted);font-size:12.5px}


/* ==========================================================================
   TRANSACTIONS TABLE
   ========================================================================== */
.tx-table{width:100%;border-collapse:collapse}
.tx-table th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:0 12px 10px;border-bottom:1px solid var(--line)}
.tx-table td{padding:14px 12px;border-bottom:1px solid var(--line);font-size:14px}
.tx-table tr:last-child td{border-bottom:none}

.tx-status{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600}
.tx-status-paid,.tx-status-delivered{background:#eaf3e6;color:var(--forest)}
.tx-status-pending_shipment,.tx-status-shipped{background:#fdf3e0;color:#8a6d00}
.tx-status-refunded{background:#eef0f4;color:var(--muted)}

/* Disabled pagination buttons need to visibly look inactive, not just
   silently reject clicks -- .btn-o had no :disabled state at all before. */
.btn-o:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.btn-o:disabled:hover{background:transparent;color:var(--forest)}

/* Small button variant -- for inline row actions (subscriptions.php) where
   the full-size .btn padding is too large for buttons packed into a table
   row/cell. */
.btn.sm{padding:6px 12px;font-size:12.5px;border-radius:6px}

/* Subscription-specific statuses -- active/paused don't appear on the
   transactions.php list, only here, and had no styling at all. */
.tx-status-active,.tx-status-trialing{background:#eaf3e6;color:var(--forest)}
.tx-status-paused{background:#fdf3e0;color:#8a6d00}
.tx-status-past_due{background:#fbeae9;color:#a3201d}
.tx-status-canceled,.tx-status-incomplete_expired,.tx-status-unpaid{background:#eef0f4;color:var(--muted)}


/* Order statuses admin needs to show that donor-facing transactions.php
   never displayed (it only ever showed genuinely successful orders) --
   note "cancelled" (double L) here is the orders.Status spelling,
   distinct from gatewaysubscriptions.Status's "canceled" (single L,
   matching Stripe's own spelling) already styled above. */
.tx-status-pending{background:#fdf3e0;color:#8a6d00}
.tx-status-failed{background:#fbeae9;color:#a3201d}
.tx-status-cancelled{background:#eef0f4;color:var(--muted)}