: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;
  overflow-x:hidden;
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  overflow-x:hidden;
}

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 */

.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);
}


/* DESKTOP NAV */

.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;
}


/* DROPDOWNS */

.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 DROPDOWN */

.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);
}


/* MOBILE NAVIGATION FIXES */

@media (max-width:1040px){

  .main-nav{
    position:fixed;
    top:86px;
    right:0;
    bottom:0;
    left:0;

    width:100%;
    max-width:100vw;

    background:var(--white);
    padding:1.2rem 1.4rem 2.5rem;

    overflow-y:auto;
    overflow-x:hidden;

    transform:translate3d(100%,0,0);
    transition:transform .28s ease;

    border-top:1px solid var(--line);

    overscroll-behavior:contain;
  }

  .main-nav.is-open{
    transform:translate3d(0,0,0);
  }

  .main-nav > ul{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    width:100%;
    max-width:100%;
  }

  .main-nav > ul > li{
    border-bottom:1px solid var(--line);
    width:100%;
    max-width:100%;
  }

  .nav-item-row{
    justify-content:space-between;
    width:100%;
  }

  .nav-link{
    padding:1.1rem 0;
    flex:1;
    color:var(--green-900) !important;
    min-width:0;
  }

  .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);
  }


  /*
    IMPORTANT FIX:
    On mobile the desktop :hover transform was overriding
    transform:none and pushing the dropdown half off-screen.
  */

  .main-nav > ul > li .mega,
  .main-nav > ul > li:hover .mega,
  .main-nav > ul > li .mega:hover{

    position:static;

    left:auto;
    top:auto;

    transform:none !important;

    opacity:1;
    visibility:visible;

    padding-top:0;

    display:none;

    margin:0 0 .6rem;

    width:100%;
    max-width:100%;

    box-sizing:border-box;
  }

  .main-nav > ul > li.is-expanded .mega{
    display:block;
  }

  .mega-inner{
    box-shadow:none;
    border:none;

    background:var(--green-50);

    min-width:0;

    width:100%;
    max-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);
  }


  /*
    Prevent third-level dropdowns from hanging outside
    the viewport on mobile.
  */

  .mega-flyout,
  .mega-flyout.flip-left{

    position:static;

    left:auto;
    right:auto;
    top:auto;

    padding-left:0;
    padding-right:0;

    opacity:1;
    visibility:visible;

    transform:none !important;

    margin:.2rem 0 .5rem .8rem;

    width:auto;
    max-width:calc(100% - .8rem);
  }

  .mega-flyout-inner{
    min-width:0;

    width:100%;
    max-width:100%;

    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;
  }


  /*
    IMPORTANT FIX:
    Homepage header starts transparent over the green hero,
    so hamburger must initially be WHITE.
  */

  body:not(.subpage)
  .site-header:not(.is-scrolled)
  .menu-toggle{
    display:flex;
    color:var(--white);
    border-color:rgba(255,255,255,.55);
  }


  /*
    Once header becomes white, or we're on a subpage,
    hamburger switches back to dark green.
  */

  body.subpage .menu-toggle,
  .site-header.is-scrolled .menu-toggle{
    display:flex;
    color:var(--green-900);
    border-color:var(--line);
  }
}


/* HERO */

.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%
    );

  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 */

.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 */

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 */

.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 */

.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 */

.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 */

.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 */

.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);
}


/* BADGES */

.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 */

.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 */

.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 */

.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 */

.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 */

.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;
}

/* =========================================================
   MICRO-INTERACTIONS & SCROLL ANIMATION
   Appended block — does not touch any rule above.
   ========================================================= */

/* ---- Scroll reveal ---- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ---- Hero entrance (runs once on load, no scroll trigger needed) ---- */
.page-hero-inner > *{
  opacity:0;
  animation:heroRise .8s cubic-bezier(.22,.61,.36,1) forwards;
}
.page-hero-inner > .crumb{ animation-delay:.05s; }
.page-hero-inner > .eyebrow{ animation-delay:.12s; }
.page-hero-inner > h1{ animation-delay:.18s; }
.page-hero-inner > p{ animation-delay:.3s; }
.page-hero-inner > .area-icon{ animation-delay:.05s; }
@keyframes heroRise{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ---- Card / theme-card lift refinement ---- */
.card, .card-dark, .theme-card{
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s cubic-bezier(.22,.61,.36,1), border-color .35s ease;
}
.card-dark:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px rgba(15,46,32,0.28);
}
.theme-card .swatch{
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.theme-card:hover .swatch{
  transform:scale(1.08);
}
.theme-card{
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s cubic-bezier(.22,.61,.36,1);
}
.theme-card .read-more{
  transition:color .25s ease, gap .25s ease;
  display:inline-flex;
  align-items:center;
  gap:.3em;
}
.theme-card:hover .read-more{
  gap:.55em;
}

/* ---- Stat block hover + counter readiness ---- */
.stat{
  transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
.stat:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(15,46,32,0.18);
}

/* ---- Button shine sweep ---- */
.btn-gold, .btn-forest{
  position:relative;
  overflow:hidden;
}
.btn-gold::after, .btn-forest::after{
  content:"";
  position:absolute;
  top:0; left:-60%;
  width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform:skewX(-20deg);
  transition:left .55s ease;
  pointer-events:none;
}
.btn-gold:hover::after, .btn-forest:hover::after{
  left:130%;
}
.btn{
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), background .18s ease, color .18s ease, border-color .18s ease, box-shadow .25s ease;
}
.btn:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 22px rgba(15,46,32,0.16);
}

/* ---- Nav link underline ---- */
.nav-link{
  position:relative;
}
.nav-link::after{
  content:"";
  position:absolute;
  left:0; bottom:-2px;
  width:0; height:1.5px;
  background:currentColor;
  transition:width .3s cubic-bezier(.22,.61,.36,1);
}
.main-nav > ul > li:hover .nav-link::after{
  width:100%;
}

/* ---- Mega menu smoother open ---- */
.mega{
  transition:opacity .28s cubic-bezier(.22,.61,.36,1), transform .28s cubic-bezier(.22,.61,.36,1), visibility .28s;
  transform:translateX(-50%) translateY(6px);
}

/* ---- Logo / brand subtle hover ---- */
.brand-mark{
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.brand:hover .brand-mark{
  transform:rotate(-6deg) scale(1.06);
}

/* ---- Social icons hover ---- */
.social-row a{
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), color .2s ease;
  display:inline-flex;
}
.social-row a:hover{
  transform:translateY(-3px);
  color:var(--gold);
}

/* ---- Reduced motion: respect it fully ---- */
@media (prefers-reduced-motion: reduce){
  .reveal{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .page-hero-inner > *{
    animation:none !important;
    opacity:1 !important;
  }
  .btn-gold::after, .btn-forest::after{
    display:none;
  }
  *{
    scroll-behavior:auto !important;
  }
}