/* ==========================================================
   TOKENS
   ========================================================== */
:root{
  --ink:#16211C;
  --ink-soft:#22302A;
  --canvas:#FAF8F3;
  --mist:#EEF1EA;
  --forest:#2F6B4F;
  --forest-dark:#234F3B;
  --forest-light:#E4EEE7;
  --gold:#B08D57;
  --gold-light:#F1E7D6;
  --slate:#3C4740;
  --slate-soft:#6B756E;
  --border:#DEDACC;
  --white:#FFFFFF;

  --font-display:'Poppins', sans-serif;
  --font-body:'Noto Sans', sans-serif;

  --radius-sm:10px;
  --radius-md:18px;
  --radius-lg:28px;
  --container:1200px;
  --banner-pad-x:clamp(42px,6vw,112px);

  --ease:cubic-bezier(.22,.68,0,1);
  --reveal-duration:1.1s;
  --reveal-ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

html{scroll-behavior:smooth;}

body{
  font-family:var(--font-body);
  background:var(--canvas);
  color:var(--slate);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font:inherit;cursor:pointer;background:none;border:none;}
input{font:inherit;}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
}

h1,h2,h3{
  font-family:var(--font-display);
  color:var(--ink);
  font-weight:600;
  letter-spacing:-0.01em;
  line-height:1.15;
}

h1{font-size:clamp(2.5rem,4.6vw,3.9rem);font-weight:700;}
h2{font-size:clamp(1.8rem,3vw,2.6rem);}
h3{font-size:1.25rem;}

.eyebrow{
  font-family:var(--font-display);
  font-size:0.8rem;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--forest);
  margin-bottom:14px;
}
.eyebrow-light{color:var(--gold);}

/* ==========================================================
   REVEAL ANIMATION — cross-browser safe (opacity + transform)
   No clip-path / blur (Safari & older browsers break those).
   ========================================================== */
.reveal,
.reveal-left,
.reveal-right,
.reveal-fade,
.reveal-scale,
.text-reveal{
  opacity:0;
  -webkit-transition:opacity .85s var(--reveal-ease), -webkit-transform .85s var(--reveal-ease);
  transition:opacity .85s var(--reveal-ease), transform .85s var(--reveal-ease);
  will-change:opacity, transform;
}
.reveal{
  -webkit-transform:translate3d(0,28px,0);
  transform:translate3d(0,28px,0);
}
.reveal-left{
  -webkit-transform:translate3d(-24px,0,0);
  transform:translate3d(-24px,0,0);
}
.reveal-right{
  -webkit-transform:translate3d(24px,0,0);
  transform:translate3d(24px,0,0);
}
.reveal-fade{
  -webkit-transform:none;
  transform:none;
}
.reveal-scale{
  -webkit-transform:scale3d(.96,.96,1);
  transform:scale3d(.96,.96,1);
}
.text-reveal{
  -webkit-transform:translate3d(0,24px,0);
  transform:translate3d(0,24px,0);
}

.reveal.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-fade.is-visible,
.reveal-scale.is-visible,
.text-reveal.is-visible{
  opacity:1;
  -webkit-transform:none;
  transform:none;
  will-change:auto;
}

.reveal img,
.reveal-left img,
.reveal-right img,
.reveal-scale img{
  -webkit-transform:scale(1.03);
  transform:scale(1.03);
  -webkit-transition:-webkit-transform 1.1s var(--reveal-ease);
  transition:transform 1.1s var(--reveal-ease);
}
.reveal.is-visible img,
.reveal-left.is-visible img,
.reveal-right.is-visible img,
.reveal-scale.is-visible img{
  -webkit-transform:scale(1);
  transform:scale(1);
}

.reveal-delay-1{-webkit-transition-delay:.1s;transition-delay:.1s;}
.reveal-delay-2{-webkit-transition-delay:.2s;transition-delay:.2s;}
.reveal-delay-3{-webkit-transition-delay:.3s;transition-delay:.3s;}
.reveal-delay-4{-webkit-transition-delay:.4s;transition-delay:.4s;}
.reveal-delay-5{-webkit-transition-delay:.5s;transition-delay:.5s;}
.reveal-delay-6{-webkit-transition-delay:.6s;transition-delay:.6s;}

.stagger > .reveal:nth-child(1),
.stagger > .reveal-left:nth-child(1),
.stagger > .reveal-right:nth-child(1),
.stagger > .reveal-fade:nth-child(1),
.stagger > .reveal-scale:nth-child(1),
.stagger > .text-reveal:nth-child(1){-webkit-transition-delay:.05s;transition-delay:.05s;}
.stagger > .reveal:nth-child(2),
.stagger > .reveal-left:nth-child(2),
.stagger > .reveal-right:nth-child(2),
.stagger > .reveal-fade:nth-child(2),
.stagger > .reveal-scale:nth-child(2),
.stagger > .text-reveal:nth-child(2){-webkit-transition-delay:.12s;transition-delay:.12s;}
.stagger > .reveal:nth-child(3),
.stagger > .reveal-left:nth-child(3),
.stagger > .reveal-right:nth-child(3),
.stagger > .reveal-fade:nth-child(3),
.stagger > .reveal-scale:nth-child(3),
.stagger > .text-reveal:nth-child(3){-webkit-transition-delay:.19s;transition-delay:.19s;}
.stagger > .reveal:nth-child(4),
.stagger > .reveal-left:nth-child(4),
.stagger > .reveal-right:nth-child(4),
.stagger > .reveal-fade:nth-child(4),
.stagger > .reveal-scale:nth-child(4),
.stagger > .text-reveal:nth-child(4){-webkit-transition-delay:.26s;transition-delay:.26s;}
.stagger > .reveal:nth-child(5),
.stagger > .reveal-left:nth-child(5),
.stagger > .reveal-right:nth-child(5),
.stagger > .reveal-fade:nth-child(5),
.stagger > .reveal-scale:nth-child(5),
.stagger > .text-reveal:nth-child(5){-webkit-transition-delay:.33s;transition-delay:.33s;}
.stagger > .reveal:nth-child(6),
.stagger > .reveal-left:nth-child(6),
.stagger > .reveal-right:nth-child(6),
.stagger > .reveal-fade:nth-child(6),
.stagger > .reveal-scale:nth-child(6),
.stagger > .text-reveal:nth-child(6){-webkit-transition-delay:.4s;transition-delay:.4s;}

.reveal-group{
  opacity:1;
  -webkit-transform:none;
  transform:none;
}

.section-head .eyebrow,
.section-head h2,
.section-head .section-sub,
.about-copy > .eyebrow,
.about-copy > h2,
.about-copy > p,
.about-copy > .about-stats,
.about-copy > .hero-actions,
.mentor-copy > .quote-mark,
.mentor-copy > blockquote,
.mentor-copy > .mentor-lede,
.mentor-copy > .btn,
.legacy-copy > .eyebrow,
.legacy-copy > h2,
.legacy-copy > p,
.legacy-copy > .legacy-actions,
.cta-copy > .eyebrow,
.cta-copy > h2,
.cta-copy > .cta-sub,
.impact-head .eyebrow,
.impact-head .impact-title{
  opacity:0;
  -webkit-transform:translate3d(0,22px,0);
  transform:translate3d(0,22px,0);
  -webkit-transition:opacity .9s var(--reveal-ease), -webkit-transform .9s var(--reveal-ease);
  transition:opacity .9s var(--reveal-ease), transform .9s var(--reveal-ease);
}

.section-head.is-visible .eyebrow,
.about-copy.is-visible > .eyebrow,
.mentor-copy.is-visible > .quote-mark,
.legacy-banner.is-visible .legacy-copy > .eyebrow,
.cta-copy.is-visible > .eyebrow,
.impact-head.is-visible .eyebrow{
  opacity:1;-webkit-transform:none;transform:none;
  -webkit-transition-delay:.05s;transition-delay:.05s;
}
.section-head.is-visible h2,
.about-copy.is-visible > h2,
.mentor-copy.is-visible > blockquote,
.legacy-banner.is-visible .legacy-copy > h2,
.cta-copy.is-visible > h2,
.impact-head.is-visible .impact-title{
  opacity:1;-webkit-transform:none;transform:none;
  -webkit-transition-delay:.16s;transition-delay:.16s;
}
.section-head.is-visible .section-sub,
.about-copy.is-visible > p:not(.eyebrow),
.mentor-copy.is-visible > .mentor-lede,
.legacy-banner.is-visible .legacy-copy > p,
.cta-copy.is-visible > .cta-sub{
  opacity:1;-webkit-transform:none;transform:none;
  -webkit-transition-delay:.28s;transition-delay:.28s;
}
.about-copy.is-visible > h2 + p + p{
  -webkit-transition-delay:.38s;transition-delay:.38s;
}
.about-copy.is-visible > .about-stats{
  opacity:1;-webkit-transform:none;transform:none;
  -webkit-transition-delay:.46s;transition-delay:.46s;
}
.about-copy.is-visible > .hero-actions,
.mentor-copy.is-visible > .btn,
.legacy-banner.is-visible .legacy-copy > .legacy-actions{
  opacity:1;-webkit-transform:none;transform:none;
  -webkit-transition-delay:.54s;transition-delay:.54s;
}

.hero-content > *{
  opacity:0;
  -webkit-transform:translate3d(0,24px,0);
  transform:translate3d(0,24px,0);
  -webkit-transition:opacity .95s var(--reveal-ease), -webkit-transform .95s var(--reveal-ease);
  transition:opacity .95s var(--reveal-ease), transform .95s var(--reveal-ease);
}
.hero.is-ready .hero-content > *:nth-child(1){
  opacity:1;-webkit-transform:none;transform:none;
  -webkit-transition-delay:.15s;transition-delay:.15s;
}
.hero.is-ready .hero-content > *:nth-child(2){
  opacity:1;-webkit-transform:none;transform:none;
  -webkit-transition-delay:.28s;transition-delay:.28s;
}
.hero.is-ready .hero-content > *:nth-child(3){
  opacity:1;-webkit-transform:none;transform:none;
  -webkit-transition-delay:.4s;transition-delay:.4s;
}
.hero.is-ready .hero-content > *:nth-child(4){
  opacity:1;-webkit-transform:none;transform:none;
  -webkit-transition-delay:.52s;transition-delay:.52s;
}

@media (prefers-reduced-motion:reduce){
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-fade,
  .reveal-scale,
  .text-reveal,
  .site-header,
  .hero-content > *,
  .hero-banner,
  .section-head .eyebrow,
  .section-head h2,
  .section-head .section-sub,
  .about-copy > .eyebrow,
  .about-copy > h2,
  .about-copy > p,
  .about-copy > .about-stats,
  .about-copy > .hero-actions,
  .mentor-copy > .quote-mark,
  .mentor-copy > blockquote,
  .mentor-copy > .mentor-lede,
  .mentor-copy > .btn,
  .legacy-copy > .eyebrow,
  .legacy-copy > h2,
  .legacy-copy > p,
  .legacy-copy > .legacy-actions,
  .cta-copy > .eyebrow,
  .cta-copy > h2,
  .cta-copy > .cta-sub,
  .impact-head .eyebrow,
  .impact-head .impact-title,
  .reveal img,
  .reveal-left img,
  .reveal-right img,
  .reveal-scale img{
    opacity:1 !important;
    -webkit-transform:none !important;
    transform:none !important;
    -webkit-transition:none !important;
    transition:none !important;
  }
  html{scroll-behavior:auto;}
}


/* ==========================================================
   PROGRESS BAR
   ========================================================== */
.progress-bar{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:linear-gradient(90deg,var(--forest),var(--gold));
  z-index:999;
  transition:width .1s linear;
}

/* ==========================================================
   BUTTONS
   ========================================================== */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 26px;
  border-radius:100px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:0.92rem;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  white-space:nowrap;
}
.btn svg{transition:transform .25s var(--ease);}
.btn:hover svg{transform:translate(2px,-2px);}

.btn-primary{
  background:var(--forest);
  color:var(--white);
  box-shadow:0 8px 20px -8px rgba(47,107,79,0.55);
}
.btn-primary:hover{background:var(--forest-dark);transform:translateY(-2px);}

.btn-ghost{
  background:transparent;
  color:var(--ink);
  border:1.5px solid var(--border);
}
.btn-ghost:hover{border-color:var(--forest);color:var(--forest);transform:translateY(-2px);}

.btn-lg{padding:15px 30px;font-size:0.98rem;}

/* ==========================================================
   HEADER — overlaid on the hero; scrolls away with the page
   ========================================================== */
.site-header{
  position:absolute;
  top:18px;left:0;right:0;
  z-index:100;
  padding:0;
  pointer-events:none;
  opacity:0;
  -webkit-transform:translate3d(0,-12px,0);
  transform:translate3d(0,-12px,0);
  -webkit-transition:opacity .75s var(--reveal-ease), -webkit-transform .75s var(--reveal-ease);
  transition:opacity .75s var(--reveal-ease), transform .75s var(--reveal-ease);
}
.site-header.is-ready{
  opacity:1;
  -webkit-transform:none;
  transform:none;
}

.site-header .wrap{pointer-events:auto;}

.header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:rgba(17,22,18,0.22);
  border:none;
  border-radius:22px;
  padding:12px var(--banner-pad-x);
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  filter:none;
}

.site-header .brand-mark,
.site-header .brand-text strong,
.site-header .brand-text em,
.site-header .main-nav a{color:var(--white);}

.site-header .brand-text em{opacity:.72;}
.site-header .main-nav a{opacity:.88;}
.site-header .main-nav a:hover{opacity:1;color:var(--white);}
.site-header .main-nav a::after{background:var(--gold);}
.site-header .btn-primary{
  background:var(--white);
  color:var(--forest-dark);
  box-shadow:none;
}
.site-header .btn-primary:hover{background:var(--canvas);}
.brand{display:flex;align-items:center;gap:10px;}
.brand-mark{color:var(--forest);display:flex;}
.brand-text{display:flex;flex-direction:column;line-height:1.1;}
.brand-text strong{font-family:var(--font-display);font-weight:700;font-size:1.02rem;color:var(--ink);}
.brand-text em{font-style:normal;font-size:0.68rem;color:var(--slate-soft);letter-spacing:0.05em;}

.main-nav{display:flex;gap:30px;}
.main-nav a{
  font-family:var(--font-display);
  font-size:0.9rem;font-weight:500;
  color:var(--slate);
  position:relative;
  padding:4px 0;
}
.main-nav a::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:2px;
  background:var(--forest);transition:width .3s var(--ease);
}
.main-nav a:hover{color:var(--ink);}
.main-nav a:hover::after{width:100%;}

.header-actions{display:flex;align-items:center;gap:16px;}
.btn-pill{padding:11px 22px;}

.nav-toggle{display:none;flex-direction:column;gap:5px;width:26px;}
.nav-toggle span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease), opacity .3s var(--ease);}

/* ==========================================================
   HERO — reference-style integrated banner
   The supplied hero.png is 1600 × 945. Keeping the same aspect
   ratio prevents the portrait from being zoomed/cropped.
   ========================================================== */
.hero{padding:18px 0 90px;position:relative;}

.hero-banner{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  width:100%;
  aspect-ratio:1600 / 945;
  min-height:0;
  display:flex;
  align-items:center;
  background:#17120e;
  margin-top:0;
  padding-top:0;
  isolation:isolate;
  box-shadow:0 30px 70px -30px rgba(22,33,28,0.4);
  opacity:0;
  -webkit-transform:translate3d(0,16px,0) scale(.985);
  transform:translate3d(0,16px,0) scale(.985);
  -webkit-transition:opacity 1s var(--reveal-ease), -webkit-transform 1s var(--reveal-ease);
  transition:opacity 1s var(--reveal-ease), transform 1s var(--reveal-ease);
}
.hero.is-ready .hero-banner{
  opacity:1;
  -webkit-transform:none;
  transform:none;
}

.hero-bg-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  z-index:-2;
}

/* The artwork already has a dark copy area on the left.
   Keep the extra gradient subtle so the face stays bright. */
.hero-overlay{
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,
    rgba(13,27,21,0.56) 0%,
    rgba(13,27,21,0.38) 34%,
    rgba(13,27,21,0.12) 54%,
    rgba(13,27,21,0) 68%);
  pointer-events:none;
}

.hero-content{
  position:relative;
  z-index:2;
  width:min(48%, 570px);
  max-width:570px;
  padding:135px 0 72px 60px;
  color:var(--canvas);
}

.hero-content h1{
  color:var(--white);
  font-size:clamp(2.5rem,4.25vw,3.8rem);
  max-width:10.5ch;
}

.hero-lede{
  font-size:1.02rem;
  line-height:1.7;
  color:rgba(250,248,243,0.82);
  max-width:49ch;
  margin:22px 0 34px;
}

.badge-card{
  position:absolute;z-index:2;
  display:flex;align-items:center;gap:12px;
  background:var(--white);
  border-radius:var(--radius-sm);
  padding:14px 18px;
  box-shadow:0 20px 45px -18px rgba(22,33,28,0.5);
}
.badge-card strong{
  display:block;font-family:var(--font-display);
  font-size:1.05rem;color:var(--ink);font-weight:700;
}
.badge-card span{font-size:0.75rem;color:var(--slate-soft);}
.badge-icon{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.badge-turnover{top:24%;right:6%;}
.badge-turnover .badge-icon{background:var(--forest-light);color:var(--forest);}
.badge-trees{bottom:14%;right:9%;}
.badge-trees .badge-icon{background:var(--gold-light);color:var(--gold);}

/* generic placeholder blocks used elsewhere on the page (about/stories/mentor) */
.photo-placeholder{
  width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;
  color:rgba(250,248,243,0.55);
  padding:32px;
  text-align:center;
  border-radius:var(--radius-lg);
  background:linear-gradient(155deg,var(--ink) 0%, var(--forest-dark) 100%);
}
.photo-placeholder span{font-size:0.8rem;max-width:220px;line-height:1.5;}
.photo-placeholder.square{aspect-ratio:1/1;border-radius:var(--radius-md);}
.photo-placeholder.small{aspect-ratio:16/10;border-radius:var(--radius-sm);}
.photo-placeholder.small span{font-size:0.72rem;}

.ring-motif{
  position:absolute;
  top:-40px;right:-60px;
  width:280px;height:280px;
  color:var(--gold);
  opacity:0.35;
  pointer-events:none;
  z-index:-1;
}

/* ==========================================================
   TRUST STRIP
   ========================================================== */
.trust-strip{padding:36px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.trust-label{
  font-size:0.75rem;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--slate-soft);margin-bottom:20px;text-align:center;
}
.trust-logos{
  display:flex;flex-wrap:wrap;justify-content:center;gap:40px;
}
.trust-logos span{
  font-family:var(--font-display);font-weight:600;font-size:1rem;
  color:var(--slate-soft);opacity:0.65;
  letter-spacing:0.02em;
}

/* ==========================================================
   ABOUT
   ========================================================== */
.about{padding:120px 0;}
.about-grid{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:70px;
  align-items:center;
}
.about-media{position:relative;}
.about-media img{
  width:100%;
  display:block;
  border-radius:var(--radius-md);
  object-fit:cover;
  aspect-ratio:1/1;
}

.about-copy p{margin-bottom:18px;color:var(--slate-soft);font-size:1.02rem;}
.about-stats{
  display:flex;gap:36px;
  margin:8px 0 32px;
  padding-top:24px;
  border-top:1px solid var(--border);
}
.about-stat strong{
  display:block;font-family:var(--font-display);font-size:1.7rem;font-weight:700;color:var(--forest);
}
.about-stat span{font-size:0.8rem;color:var(--slate-soft);}

/* ==========================================================
   PILLARS
   ========================================================== */
.pillars{padding:100px 0;background:var(--mist);}
.section-head{max-width:640px;margin:0 auto 56px;text-align:center;}
.section-head .eyebrow{display:flex;justify-content:center;}
.section-sub{color:var(--slate-soft);margin-top:14px;font-size:1.02rem;}

.pillar-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}
.pillar-card{
  background:var(--white);
  border-radius:var(--radius-md);
  padding:38px 32px;
  border:1px solid var(--border);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.pillar-card:hover{
  transform:translateY(-8px);
  box-shadow:0 30px 50px -30px rgba(22,33,28,0.25);
}
.pillar-icon{
  width:52px;height:52px;border-radius:14px;
  background:var(--forest-light);color:var(--forest);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:22px;
}
.pillar-card:nth-child(2) .pillar-icon{background:var(--gold-light);color:var(--gold);}
.pillar-card:nth-child(3) .pillar-icon{background:var(--forest-light);color:var(--forest-dark);}

.pillar-card h3{margin-bottom:14px;}
.pillar-card ul{margin-bottom:22px;}
.pillar-card li{
  padding:8px 0;
  border-top:1px solid var(--border);
  color:var(--slate-soft);
  font-size:0.95rem;
}
.pillar-card li:first-child{border-top:none;}

.pillar-link{
  font-family:var(--font-display);font-weight:600;font-size:0.88rem;
  color:var(--forest);
  transition:gap .25s var(--ease);
  display:inline-flex;
}
.pillar-link:hover{gap:6px;}

/* ==========================================================
   TALKS / VIDEOS — thumbnail cards (embeds fail on local/Shorts)
   4 across desktop, 2×2 on mobile
   ========================================================== */
.talks{padding:100px 0;background:var(--canvas);}
.talks-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}
.talk-card{
  display:block;
  width:100%;
  padding:0;
  margin:0;
  border:none;
  background:transparent;
  cursor:pointer;
  text-align:left;
  font:inherit;
  color:inherit;
  border-radius:var(--radius-md);
  overflow:hidden;
  -webkit-transition:-webkit-transform .35s var(--ease), box-shadow .35s var(--ease);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.talk-card:hover{
  -webkit-transform:translateY(-4px);
  transform:translateY(-4px);
  box-shadow:0 24px 40px -28px rgba(22,33,28,0.28);
}
.talk-frame{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:9 / 16;
  background:var(--ink);
  overflow:hidden;
  border-radius:var(--radius-md);
}
.talk-frame img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.talk-frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.talk-play{
  position:absolute;
  left:50%;
  top:50%;
  width:58px;
  height:58px;
  margin:-29px 0 0 -29px;
  border-radius:50%;
  background:rgba(255,255,255,0.94);
  box-shadow:0 10px 28px rgba(0,0,0,0.35);
  pointer-events:none;
  -webkit-transition:-webkit-transform .25s var(--ease), background .25s var(--ease);
  transition:transform .25s var(--ease), background .25s var(--ease);
}
.talk-play::before{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  width:0;
  height:0;
  margin:-8px 0 0 -5px;
  border-style:solid;
  border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent var(--ink);
}
.talk-card:hover .talk-play{
  background:var(--white);
  -webkit-transform:scale(1.06);
  transform:scale(1.06);
}
.talk-card.is-playing .talk-play{display:none;}

@media (max-width:1080px){
  .talks-grid{grid-template-columns:repeat(2,1fr);gap:18px;}
}
@media (max-width:560px){
  .talks{padding:72px 0;}
  .talks-grid{gap:14px;}
  .talk-play{width:48px;height:48px;margin:-24px 0 0 -24px;}
}

/* ==========================================================
   IMPACT / STATS BAND
   ========================================================== */
.impact{
  position:relative;
  background:var(--ink);
  color:var(--canvas);
  padding:48px 0;
  overflow:hidden;
  text-align:center;
}
.ring-large{
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:480px;height:480px;
  color:var(--gold);
  opacity:0.1;
}
.impact-head{margin:0 auto 28px;max-width:640px;}
.impact-title{color:var(--canvas);max-width:600px;margin:0 auto;font-size:clamp(1.55rem,2.6vw,2.1rem);}

.stat-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.stat-item strong{
  display:block;font-family:var(--font-display);
  font-size:clamp(2.2rem,4vw,3rem);font-weight:700;
  color:var(--white);margin-bottom:8px;
}
.stat-item span{font-size:0.88rem;color:rgba(250,248,243,0.6);}

/* ==========================================================
   MILESTONES
   ========================================================== */
.milestones{padding:110px 0;background:var(--canvas);}
.milestone-track{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:20px;
  position:relative;
  counter-reset:none;
}
.milestone-track::before{
  content:'';
  position:absolute;
  top:18px;left:4%;right:4%;
  height:2px;
  background:linear-gradient(90deg,var(--forest-light),var(--gold-light),var(--forest-light));
  z-index:0;
}
.milestone-item{
  position:relative;
  z-index:1;
  text-align:center;
  padding-top:8px;
}
.milestone-item::before{
  content:'';
  display:block;
  width:14px;height:14px;
  margin:0 auto 22px;
  border-radius:50%;
  background:var(--forest);
  box-shadow:0 0 0 6px var(--forest-light);
}
.milestone-year{
  display:inline-block;
  font-family:var(--font-display);
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:10px;
}
.milestone-item h3{
  font-size:1.02rem;
  margin-bottom:10px;
  color:var(--ink);
}
.milestone-item p{
  font-size:0.86rem;
  line-height:1.55;
  color:var(--slate-soft);
}

/* ==========================================================
   GREEN LEGACY
   ========================================================== */
.legacy{padding:40px 0 100px;}
.legacy-banner{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:48px;
  align-items:center;
  background:linear-gradient(135deg,var(--ink) 0%,var(--ink-soft) 55%,var(--forest-dark) 100%);
  border-radius:clamp(22px,3vw,36px);
  padding:clamp(36px,4vw,56px);
  overflow:hidden;
  color:var(--canvas);
}
.legacy-copy .eyebrow{margin-bottom:16px;}
.legacy-copy h2{
  color:var(--white);
  font-size:clamp(1.7rem,3vw,2.45rem);
  max-width:16ch;
  margin-bottom:18px;
}
.legacy-copy > p{
  color:rgba(250,248,243,0.72);
  font-size:1.02rem;
  line-height:1.7;
  max-width:48ch;
  margin-bottom:28px;
}
.legacy-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px;
}
.legacy-link{
  font-family:var(--font-display);
  font-weight:600;
  font-size:0.92rem;
  color:var(--gold-light);
  transition:color .25s var(--ease), gap .25s var(--ease);
}
.legacy-link:hover{color:var(--gold);}
.legacy-media{
  border-radius:var(--radius-md);
  overflow:hidden;
  min-height:280px;
}
.legacy-media img{
  width:100%;
  height:100%;
  min-height:280px;
  object-fit:cover;
  display:block;
}

/* ==========================================================
   STORIES
   ========================================================== */
.stories{padding:110px 0;}
.story-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.story-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.story-card:hover{transform:translateY(-6px);box-shadow:0 30px 50px -30px rgba(22,33,28,0.22);}
.story-media{padding:14px 14px 0;}
.story-card h3{padding:0 26px;margin:16px 0 10px;font-size:1.12rem;}
.story-card p{padding:0 26px;color:var(--slate-soft);font-size:0.94rem;margin-bottom:18px;}
.story-tag{
  margin:18px 26px 0;
  display:inline-block;
  font-family:var(--font-display);font-size:0.72rem;font-weight:600;
  letter-spacing:0.05em;text-transform:uppercase;color:var(--gold);
}
.story-card .pillar-link{margin:0 26px 26px;}

/* ==========================================================
   MENTOR
   ========================================================== */
.mentor{padding:110px 0;background:var(--mist);}
.mentor-grid{
  display:grid;
  grid-template-columns:0.8fr 1.2fr;
  gap:70px;
  align-items:center;
}
.mentor-media img{
  width:100%;
  display:block;
  border-radius:var(--radius-md);
  object-fit:cover;
  aspect-ratio:1/1;
}
.quote-mark{
  font-family:var(--font-display);
  font-size:5rem;color:var(--gold);
  line-height:1;display:block;margin-bottom:6px;
}
.mentor-copy blockquote{
  font-family:var(--font-display);
  font-size:clamp(1.5rem,2.6vw,2.1rem);
  font-weight:600;color:var(--ink);
  line-height:1.3;margin-bottom:24px;
}
.mentor-lede{color:var(--slate-soft);margin-bottom:30px;max-width:56ch;}

/* ==========================================================
   CTA / NEWSLETTER
   ========================================================== */
.cta-band{background:var(--ink);color:var(--canvas);padding:90px 0;}
.cta-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:50px;
  align-items:center;
}
.cta-band h2{color:var(--white);margin-top:6px;}
.cta-sub{color:rgba(250,248,243,0.62);margin-top:16px;max-width:48ch;}

.newsletter-form{
  display:flex;gap:10px;
  background:rgba(250,248,243,0.06);
  border:1px solid rgba(250,248,243,0.18);
  border-radius:100px;
  padding:6px;
}
.newsletter-form input{
  flex:1;background:transparent;border:none;outline:none;
  padding:12px 18px;color:var(--white);font-size:0.94rem;
}
.newsletter-form input::placeholder{color:rgba(250,248,243,0.45);}

/* ==========================================================
   FOOTER
   ========================================================== */
.site-footer{background:var(--ink-soft);color:rgba(250,248,243,0.75);padding-top:70px;}
.footer-top{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:40px;
  padding-bottom:50px;
  border-bottom:1px solid rgba(250,248,243,0.12);
}
.footer-brand .brand-text strong{color:var(--white);}
.footer-brand .brand-text em{color:rgba(250,248,243,0.5);}
.footer-brand p{margin-top:18px;font-size:0.9rem;line-height:1.6;max-width:32ch;color:rgba(250,248,243,0.55);}
.footer-brand .brand-mark{color:var(--gold);}

.footer-nav{display:flex;flex-direction:column;gap:12px;}
.footer-nav a{font-size:0.92rem;transition:color .25s var(--ease);}
.footer-nav a:hover{color:var(--gold);}

.footer-contact{display:flex;flex-direction:column;gap:12px;}
.footer-contact a{font-size:0.92rem;transition:color .25s var(--ease);}
.footer-contact a:hover{color:var(--gold);}
.footer-contact span{font-size:0.92rem;color:rgba(250,248,243,0.55);}
.social-row{display:flex;gap:12px;margin-top:6px;}
.social-row a{
  width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(250,248,243,0.2);
  display:flex;align-items:center;justify-content:center;
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.social-row a:hover{background:var(--gold);border-color:var(--gold);color:var(--ink);}

.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding:26px 0;
  font-size:0.82rem;color:rgba(250,248,243,0.45);
  flex-wrap:wrap;gap:12px;
}
.footer-legal{display:flex;gap:22px;}
.footer-legal a{transition:color .25s var(--ease);}
.footer-legal a:hover{color:var(--gold);}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width:1080px){
  .hero-grid,.about-grid,.mentor-grid{grid-template-columns:1fr;}
  .about-media,.mentor-media{max-width:440px;}
  .pillar-grid,.story-grid{grid-template-columns:repeat(2,1fr);}
  .milestone-track{grid-template-columns:repeat(3,1fr);gap:28px 20px;}
  .milestone-track::before{display:none;}
  .legacy-banner{grid-template-columns:1fr;gap:32px;}
  .legacy-copy h2{max-width:none;}
  .footer-top{grid-template-columns:1fr 1fr;}
  .footer-brand{grid-column:1/-1;}
}

@media (max-width:860px){
  :root{--banner-pad-x:40px;}
  .main-nav{
    position:fixed;top:0;right:0;height:100vh;width:min(320px,80vw);
    background:var(--canvas);
    flex-direction:column;
    padding:100px 36px 40px;
    gap:26px;
    box-shadow:-20px 0 50px rgba(22,33,28,0.15);
    transform:translateX(100%);
    transition:transform .4s var(--ease);
    z-index:90;
  }
  .main-nav.open{transform:translateX(0);}
  .nav-toggle{display:flex;}
  .header-actions .btn-primary{display:none;}
  .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle.open span:nth-child(2){opacity:0;}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .about-media,.mentor-media{max-width:440px;}
  .cta-grid{grid-template-columns:1fr;}
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:32px;}
  .milestone-track{grid-template-columns:repeat(2,1fr);gap:32px 24px;}
  .legacy{padding:24px 0 72px;}
  .legacy-banner{padding:32px 28px;}
  .legacy-media,.legacy-media img{min-height:220px;}

  .hero-banner{
    aspect-ratio:4 / 3;
    min-height:620px;
    margin-top:0;
    padding-top:0;
  }
  .hero-bg-img{object-position:64% center;}
  .hero-overlay{
    background:linear-gradient(90deg, rgba(13,27,21,0.86) 0%, rgba(13,27,21,0.64) 48%, rgba(13,27,21,0.18) 76%);
  }
  .hero-content{width:62%;padding:125px 0 145px var(--banner-pad-x);max-width:560px;}
  .badge-card{padding:12px 16px;}
  .badge-turnover{top:auto;bottom:15%;left:40px;right:auto;}
  .badge-trees{bottom:5%;left:40px;right:auto;}
}

@media (max-width:640px){
  .wrap{padding:0 20px;}
  .pillar-grid,.story-grid{grid-template-columns:1fr;}
  .trust-logos{gap:22px;}
  .footer-top{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;align-items:flex-start;}
  h1{font-size:2.3rem;}

  .site-header{top:10px;}
  .header-inner{padding:10px var(--banner-pad-x);border-radius:16px;}
  .brand-text strong{font-size:0.92rem;}
  .site-header .nav-toggle span{background:var(--white);}
  .site-header .main-nav a{color:var(--slate);opacity:1;}

  .hero{padding:10px 0 60px;}
  .hero-banner{
    min-height:680px;
    aspect-ratio:auto;
    border-radius:var(--radius-md);
    margin-top:0;
    padding-top:0;
    display:block;
  }
  .hero-bg-img{object-position:69% center;}
  .hero-overlay{
    background:linear-gradient(180deg,
      rgba(13,27,21,0.15) 0%,
      rgba(13,27,21,0.30) 34%,
      rgba(13,27,21,0.90) 67%,
      rgba(13,27,21,0.98) 100%);
  }
  .hero-content{
    position:absolute;
    left:0;right:0;bottom:0;
    width:100%;max-width:none;
    padding:235px var(--banner-pad-x) 170px;
  }
  .hero-content h1{max-width:11ch;}
  .hero-lede{font-size:0.94rem;line-height:1.6;margin:16px 0 24px;max-width:38ch;}

  .badge-card{
    position:absolute;
    left:24px;
    right:auto;
    margin:0;
    max-width:calc(100% - 48px);
    box-shadow:0 14px 30px -16px rgba(22,33,28,0.3);
  }
  .badge-turnover{top:auto;bottom:86px;}
  .badge-trees{top:auto;bottom:20px;}
}
/* ==========================================================
   DESKTOP HERO WIDTH FIX
   Keep only a small outer gutter instead of the global 1200px .wrap.
   ========================================================== */
@media (min-width: 861px){
  .hero{
    padding:12px 0 72px;
  }

  .hero > .wrap,
  .site-header > .wrap{
    max-width:none;
    width:100%;
    padding-left:12px;
    padding-right:12px;
  }

  .site-header{
    top:12px;
  }

  .hero-banner{
    width:100%;
    height:calc(100svh - 24px);
    min-height:680px;
    aspect-ratio:auto;
  }

  .hero-bg-img{
    object-fit:cover;
    object-position:center center;
  }
}

/* ==========================================================
   FINAL RESPONSIVE POLISH — full-width hero + mobile-first tuning
   ========================================================== */

/* Hero/header use their own near-edge-to-edge gutter.
   The regular .wrap remains constrained for the rest of the site. */
.hero > .wrap,
.site-header > .wrap{
  width:100%;
  max-width:none;
  padding-left:10px;
  padding-right:10px;
}

.site-header{
  top:10px;
}

.header-inner{
  min-height:68px;
  padding:10px var(--banner-pad-x);
  gap:20px;
}

.main-nav{
  gap:clamp(18px,2vw,34px);
}

.main-nav a{
  font-size:clamp(.82rem,.85vw,.92rem);
}

.btn-pill{
  padding:11px 20px;
}

.hero{
  padding:10px 0 72px;
}

.hero-banner{
  width:100%;
  height:calc(100svh - 20px);
  min-height:650px;
  max-height:980px;
  aspect-ratio:auto;
  border-radius:26px;
}

.hero-bg-img{
  object-fit:cover;
  object-position:center center;
}

.hero-overlay{
  background:linear-gradient(90deg,
    rgba(9,24,17,.68) 0%,
    rgba(9,24,17,.56) 31%,
    rgba(9,24,17,.24) 52%,
    rgba(9,24,17,.04) 69%,
    rgba(9,24,17,0) 78%);
}

.hero-content{
  width:min(48vw,720px);
  max-width:720px;
  padding:108px 0 70px var(--banner-pad-x);
}

.hero-content h1{
  max-width:12ch;
  font-size:clamp(3rem,4.5vw,5.25rem);
  line-height:1.03;
  letter-spacing:-.035em;
}

.hero-lede{
  max-width:52ch;
  font-size:clamp(.96rem,1vw,1.08rem);
  line-height:1.68;
  margin:24px 0 34px;
}

.badge-card{
  max-width:min(260px,24vw);
}

.badge-turnover{top:25%;right:5.2%;}
.badge-trees{bottom:14%;right:7.5%;}

/* Large laptop / small desktop */
@media (max-width:1240px){
  :root{--banner-pad-x:54px;}
  .main-nav{gap:20px;}
  .btn-pill{padding:10px 16px;}

  .hero-content{
    width:51vw;
  }
  .hero-content h1{
    font-size:clamp(2.75rem,4.6vw,4rem);
  }
  .badge-card{padding:12px 14px;}
  .badge-turnover{right:3.5%;}
  .badge-trees{right:5%;}
}

/* Tablet / compact header */
@media (max-width:920px){
  :root{--banner-pad-x:38px;}

  .hero > .wrap,
  .site-header > .wrap{
    padding-left:8px;
    padding-right:8px;
  }

  .site-header{top:8px;}

  .header-inner{
    min-height:62px;
    padding:9px var(--banner-pad-x);
    border-radius:18px;
  }

  .brand-mark svg{width:30px;height:30px;}
  .brand-text strong{font-size:.94rem;}
  .brand-text em{font-size:.62rem;}

  .nav-toggle{
    display:flex;
    position:relative;
    z-index:130;
  }

  /* Keep Contact visible on tablet/mobile. */
  .header-actions .btn-primary{
    display:inline-flex;
    padding:9px 14px;
    font-size:.78rem;
    box-shadow:none;
  }

  .main-nav{
    position:fixed;
    top:0;
    right:0;
    width:min(350px,88vw);
    height:100dvh;
    padding:92px 28px 36px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    background:rgba(250,248,243,.985);
    border-left:1px solid rgba(22,33,28,.08);
    box-shadow:-24px 0 60px rgba(22,33,28,.18);
    transform:translateX(105%);
    transition:transform .36s var(--ease);
    z-index:120;
    overflow-y:auto;
  }

  .main-nav.open{transform:translateX(0);}

  .site-header .main-nav a{
    width:100%;
    padding:13px 4px;
    color:var(--ink);
    opacity:1;
    font-size:1rem;
    border-bottom:1px solid rgba(22,33,28,.08);
  }

  .site-header .main-nav a::after{display:none;}

  body.nav-open{overflow:hidden;}

  .hero{padding-top:8px;}
  .hero-banner{
    height:calc(100svh - 16px);
    min-height:720px;
    max-height:none;
    border-radius:22px;
  }

  .hero-bg-img{object-position:63% center;}

  .hero-overlay{
    background:linear-gradient(90deg,
      rgba(9,24,17,.80) 0%,
      rgba(9,24,17,.65) 43%,
      rgba(9,24,17,.26) 66%,
      rgba(9,24,17,.05) 82%);
  }

  .hero-content{
    width:58%;
    max-width:540px;
    padding:98px 0 70px var(--banner-pad-x);
  }

  .hero-content h1{
    font-size:clamp(2.6rem,6vw,3.65rem);
    max-width:11.5ch;
  }

  .hero-lede{
    font-size:.94rem;
    line-height:1.62;
    max-width:44ch;
  }

  .badge-card{
    max-width:220px;
    padding:10px 12px;
    gap:9px;
  }
  .badge-card strong{font-size:.94rem;}
  .badge-card span{font-size:.68rem;}
  .badge-icon{width:32px;height:32px;}
  .badge-turnover{top:24%;right:2.5%;left:auto;bottom:auto;}
  .badge-trees{bottom:12%;right:3%;left:auto;}

  .about,.stories,.mentor,.milestones{padding:88px 0;}
  .pillars{padding:82px 0;}
  .impact{padding:48px 0;}
  .legacy{padding:20px 0 72px;}
  .cta-band{padding:76px 0;}

  .about-grid,.mentor-grid{
    gap:48px;
  }
  .about-media,.mentor-media{
    width:100%;
    max-width:560px;
    margin-inline:auto;
  }
}

/* Mobile portrait */
@media (max-width:700px){
  :root{--banner-pad-x:20px;}
  .wrap{padding-left:20px;padding-right:20px;}

  .hero > .wrap,
  .site-header > .wrap{
    padding-left:6px;
    padding-right:6px;
  }

  .site-header{top:6px;}

  .header-inner{
    min-height:58px;
    padding:8px var(--banner-pad-x);
    gap:10px;
    border-radius:17px;
  }

  .brand{gap:7px;}
  .brand-mark svg{width:28px;height:28px;}
  .brand-text strong{font-size:.88rem;}
  .brand-text em{font-size:.58rem;}

  .header-actions{gap:9px;}
  .header-actions .btn-primary{
    padding:8px 12px;
    font-size:.72rem;
    min-height:38px;
  }
  .header-actions .btn-primary svg{display:none;}

  .nav-toggle{width:24px;gap:5px;}
  .nav-toggle span{height:2px;}
  .site-header .nav-toggle span{background:var(--white);}

  .hero{
    padding:6px 0 52px;
  }

  .hero-banner{
    height:max(780px, calc(100svh - 12px));
    min-height:780px;
    border-radius:20px;
    display:block;
  }

  .hero-bg-img{
    object-position:67% center;
  }

  .hero-overlay{
    background:
      linear-gradient(180deg,
        rgba(8,19,14,.04) 0%,
        rgba(8,19,14,.05) 31%,
        rgba(8,19,14,.42) 51%,
        rgba(8,19,14,.88) 71%,
        rgba(8,19,14,.98) 100%),
      linear-gradient(90deg,
        rgba(8,19,14,.32) 0%,
        rgba(8,19,14,.12) 48%,
        rgba(8,19,14,0) 78%);
  }

  .hero-content{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    max-width:none;
    padding:0 var(--banner-pad-x) 28px;
  }

  .hero-content .eyebrow{
    margin-bottom:10px;
    font-size:.7rem;
  }

  .hero-content h1{
    max-width:12ch;
    font-size:clamp(2.25rem,10vw,3.1rem);
    line-height:1.02;
    letter-spacing:-.035em;
  }

  .hero-lede{
    margin:16px 0 22px;
    max-width:42ch;
    font-size:.88rem;
    line-height:1.58;
    color:rgba(250,248,243,.84);
  }

  .btn-lg{
    padding:12px 20px;
    font-size:.86rem;
  }

  /* Stats stay readable without covering the portrait. */
  .badge-card{
    left:14px;
    right:auto;
    width:auto;
    max-width:205px;
    padding:9px 11px;
    border-radius:10px;
    gap:8px;
    box-shadow:0 12px 28px -16px rgba(0,0,0,.55);
  }
  .badge-icon{width:30px;height:30px;}
  .badge-card strong{font-size:.87rem;line-height:1.2;}
  .badge-card span{font-size:.63rem;line-height:1.3;}
  .badge-turnover{top:78px;bottom:auto;}
  .badge-trees{top:145px;bottom:auto;}

  .about,.stories,.mentor,.milestones{padding:68px 0;}
  .pillars{padding:64px 0;}
  .impact{padding:44px 0;}
  .legacy{padding:12px 0 56px;}
  .cta-band{padding:62px 0;}

  /* Milestones: vertical timeline with room to breathe */
  .milestones .section-head{margin-bottom:32px;}
  .milestone-track{
    grid-template-columns:1fr;
    gap:0;
    padding-left:2px;
  }
  .milestone-track::before{
    display:block;
    top:10px;
    bottom:28px;
    left:7px;
    right:auto;
    width:2px;
    height:auto;
    background:linear-gradient(
      180deg,
      var(--forest-light) 0%,
      var(--border) 18%,
      var(--border) 82%,
      var(--gold-light) 100%
    );
  }
  .milestone-item{
    text-align:left;
    padding:0 0 36px 34px;
  }
  .milestone-item:last-child{padding-bottom:0;}
  .milestone-item::before{
    position:absolute;
    left:0;
    top:5px;
    margin:0;
    width:14px;
    height:14px;
    box-shadow:
      0 0 0 4px var(--canvas),
      0 0 0 6px var(--forest-light);
  }
  .milestone-year{
    display:block;
    font-size:0.72rem;
    letter-spacing:0.1em;
    margin-bottom:6px;
  }
  .milestone-item h3{
    font-size:1.12rem;
    line-height:1.28;
    margin-bottom:8px;
    letter-spacing:-0.015em;
  }
  .milestone-item p{
    font-size:0.92rem;
    line-height:1.68;
    color:var(--slate);
    max-width:36ch;
  }

  .section-head{margin-bottom:38px;}

  .pillar-grid,.story-grid{gap:18px;}
  .pillar-card{padding:28px 22px;}

  .about-stats{
    gap:18px;
    flex-wrap:wrap;
  }
  .about-stat{
    min-width:calc(50% - 12px);
  }

  .stat-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:26px 14px;
  }

  .newsletter-form{
    flex-direction:column;
    border-radius:18px;
    padding:8px;
  }
  .newsletter-form input{
    width:100%;
    min-height:48px;
  }
  .newsletter-form .btn{
    width:100%;
    justify-content:center;
  }

  .footer-top{gap:30px;}
}

/* Small phones */
@media (max-width:460px){
  .wrap{padding-left:16px;padding-right:16px;}

  .brand-text strong{font-size:.82rem;}
  .brand-text em{font-size:.54rem;}
  .header-actions{gap:7px;}
  .header-actions .btn-primary{
    padding:7px 10px;
    font-size:.68rem;
  }

  .hero-banner{
    height:max(750px, calc(100svh - 12px));
    min-height:750px;
  }

  .hero-bg-img{object-position:69% center;}

  .hero-content{padding:0 var(--banner-pad-x) 24px;}
  .hero-content h1{font-size:clamp(2.05rem,10.4vw,2.65rem);}
  .hero-lede{font-size:.82rem;line-height:1.52;margin:14px 0 20px;}

  .badge-card{left:12px;max-width:188px;}
  .badge-turnover{top:72px;}
  .badge-trees{top:135px;}

  h2{font-size:clamp(1.65rem,8vw,2.05rem);}
  .section-sub{font-size:.94rem;}

  .about-stat{min-width:100%;}
  .footer-legal{gap:14px;flex-wrap:wrap;}
}

/* Very narrow phones */
@media (max-width:365px){
  :root{--banner-pad-x:10px;}
  .brand-text em{display:none;}
  .header-actions .btn-primary{padding:7px 9px;}

  .hero-banner{min-height:730px;}
  .hero-content h1{font-size:2rem;}
  .hero-lede{font-size:.79rem;}
  .badge-card{max-width:176px;}
  .badge-card span{font-size:.59rem;}

  .milestone-item{padding:0 0 32px 30px;}
  .milestone-item h3{font-size:1.05rem;}
  .milestone-item p{font-size:0.88rem;max-width:none;}
}

/* Short landscape devices: avoid clipping the hero content. */
@media (max-width:920px) and (orientation:landscape) and (max-height:560px){
  .hero-banner{
    height:640px;
    min-height:640px;
  }
  .hero-bg-img{object-position:70% center;}
  .hero-content{
    width:53%;
    padding:80px 0 42px 34px;
  }
  .hero-content h1{font-size:2.65rem;}
  .hero-lede{font-size:.84rem;margin:14px 0 18px;}
  .badge-turnover{top:22%;right:2%;left:auto;}
  .badge-trees{top:auto;bottom:10%;right:2%;left:auto;}
}