/* ============================================================================
   DESIGN TOKENS
   Concept: "The Living Register" — a forest field-ledger made warm.
   Palette anchored in deep pine + parchment, with a marigold/turmeric accent
   (Indian, optimistic — deliberately NOT the terracotta/clay AI default).
   Signature motif: growth rings (a tree that lived long enough to have rings).
   ========================================================================== */
:root{
  --forest:   #152A1E;   /* deep pine ink — dark sections & primary text        */
  --forest-2: #1E3A29;   /* raised forest — panels on dark                       */
  --moss:     #5F7A55;   /* muted sage — secondary / supporting                  */
  --parch:    #FFFFFF;   /* white — clean modern page base                      */
  --parch-2:  #F2F7F0;   /* pale green — alternating section bg                 */
  --bone:     #F4FAF1;   /* near-white green — lightest surface / text on dark   */
  --marigold: #E0A32E;   /* accent — marigold / turmeric gold                    */
  --amber-ink:#8A5A0F;   /* accessible accent text on light                      */
  --soil:     #241E15;   /* near-black warm ink — body text                      */
  --line:     #C5D8BE;   /* greenish hairline on light                           */
  --line-dark:#2E4737;   /* hairline on dark                                     */

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:  "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 72px);
  --radius: 6px;                /* restrained — no card-heavy rounding           */
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------- reset ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--parch); color:var(--soil);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font-family:inherit}
h1,h2,h3,h4{margin:0; font-weight:400; letter-spacing:-.01em}

/* ---------- accessibility ---------- */
:focus-visible{outline:3px solid var(--marigold); outline-offset:3px; border-radius:2px}
.skip{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--forest); color:var(--bone); padding:12px 18px; border-radius:var(--radius);
}
.skip:focus{left:12px; top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- shared layout ---------- */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.eyebrow{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--amber-ink); display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--marigold)}
.eyebrow--onDark{color:var(--marigold)}
.eyebrow--onDark::before{background:var(--marigold)}

.display{font-family:var(--serif); line-height:1.1; letter-spacing:-.01em}
.lede{font-size:clamp(16px,1.8vw,19px); line-height:1.65; color:#4a4335; max-width:56ch}
.lede--onDark{color:#cdd6c8}

.section{padding-block:clamp(72px,10vw,132px)}
.rule{height:1px; background:var(--line); border:0; margin:0}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--forest); --fg:var(--bone); --bd:var(--forest);
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  padding:13px 22px; border:1px solid var(--bd); background:var(--bg); color:var(--fg);
  border-radius:var(--radius); font-size:15px; font-weight:500; letter-spacing:.01em;
  transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn .arw{transition:transform .3s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn--ghost{--bg:transparent; --fg:var(--forest); --bd:var(--line)}
.btn--ghost:hover{--bd:var(--forest)}
.btn--gold{--bg:var(--marigold); --fg:#2a1c02; --bd:var(--marigold)}
.btn--onDark{--bg:var(--bone); --fg:var(--forest); --bd:var(--bone)}
.btn--onDark.btn--ghost{--bg:transparent; --fg:var(--bone); --bd:var(--line-dark)}

/* ===========================================================================
   NAVIGATION
   ========================================================================== */
.nav{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--parch) 88%, transparent);
  backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid var(--line);
}
.nav__in{display:flex; align-items:center; justify-content:space-between; height:70px}
.brand{display:flex; align-items:center; gap:12px; font-family:var(--serif); font-size:20px; letter-spacing:-.01em}
.brand b{font-weight:500}
.mark{width:40px;height:40px;flex:0 0 auto;object-fit:contain;border-radius:4px}
.nav__links{display:flex; align-items:center; gap:30px}
.nav__links a{font-size:15px; color:#463f31; position:relative; padding-block:4px}
.nav__links a::after{content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1.5px; background:var(--marigold); transition:right .3s var(--ease)}
.nav__links a:hover::after, .nav__links a:focus-visible::after{right:0}
.nav__cta{display:flex; align-items:center; gap:14px}
.nav__toggle{display:none; background:none; border:1px solid var(--line); border-radius:var(--radius); width:44px; height:40px; align-items:center; justify-content:center; cursor:pointer}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after{content:""; display:block; width:18px; height:2px; background:var(--forest); position:relative; transition:.25s var(--ease)}
.nav__toggle span::before{position:absolute; top:-6px}
.nav__toggle span::after{position:absolute; top:6px}
.nav[data-open="true"] .nav__toggle span{background:transparent}
.nav[data-open="true"] .nav__toggle span::before{transform:translateY(6px) rotate(45deg)}
.nav[data-open="true"] .nav__toggle span::after{transform:translateY(-6px) rotate(-45deg)}

.mobile{display:none}
@media (max-width:900px){
  .nav__links, .nav__cta .btn{display:none}
  .nav__toggle{display:flex}
  .mobile{
    display:block; position:fixed; inset:70px 0 auto 0; z-index:99;
    background:var(--parch); border-bottom:1px solid var(--line);
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:.28s var(--ease);
  }
  .nav[data-open="true"] + .mobile{transform:none; opacity:1; pointer-events:auto}
  .mobile a{display:block; padding:18px var(--gutter); border-top:1px solid var(--line); font-size:19px; font-family:var(--serif)}
  .mobile .btn{margin:18px var(--gutter) 26px; justify-content:center}
}

/* ===========================================================================
   HERO — split two-column layout
   ========================================================================== */
.hero--split{padding-block:clamp(52px,8vw,100px); background:var(--parch)}
.hero__split{
  display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center;
}
.hero__h1{
  font-size:clamp(32px,5vw,62px); margin-top:24px; color:var(--forest); line-height:1.08;
}
.hero__h1 em{font-style:italic; color:var(--amber-ink)}
.hero__lede{margin-top:24px}
.hero__cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}
.hero__trust{display:flex; flex-wrap:wrap; gap:8px; margin-top:28px}
.trust-badge{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  border:1px solid var(--line); border-radius:100px;
  padding:5px 12px; color:#5a5341; background:var(--parch-2);
}
.hero__visual{position:relative}
.hero__photo-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  border-radius:12px; overflow:hidden;
}
.hero__photo-grid img{
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  transition:transform .5s var(--ease);
}
.hero__photo-grid img:hover{transform:scale(1.04)}
.hero__badge{
  position:absolute; bottom:-18px; right:20px;
  background:var(--forest); color:var(--bone);
  border-radius:10px; padding:14px 20px;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  box-shadow:0 8px 32px rgba(21,42,30,.22);
}
.hero__badge-n{
  font-family:var(--serif); font-size:30px; line-height:1; color:var(--marigold);
}
.hero__badge-l{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:#a9b6a2;
}
@media(max-width:900px){
  .hero__split{grid-template-columns:1fr}
  .hero__visual{display:none}
}

/* ===========================================================================
   STATS BAR — compact dark strip of 4 headline numbers
   ========================================================================== */
.stats-bar{background:var(--forest); padding-block:38px}
.stats-bar__inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
}
.sbar-stat{flex:1 1 160px; text-align:center; padding:10px 20px}
.sbar-n{
  font-family:var(--serif); font-size:clamp(30px,3.8vw,50px); line-height:1; color:var(--bone);
}
.sbar-n span{font-size:.48em; color:var(--marigold); vertical-align:.52em; font-family:var(--mono)}
.sbar-l{
  font-family:var(--mono); font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:#8fa088; margin-top:9px;
}
.sbar-div{width:1px; height:48px; background:var(--line-dark); flex-shrink:0}
@media(max-width:600px){
  .sbar-div{display:none}
  .sbar-stat{flex:1 1 50%}
}

/* ===========================================================================
   THE SITE REGISTER — real 9 sites, filterable, doubles as case-study index
   ========================================================================== */
.reg__head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px}
.reg__head h2{font-family:var(--serif); font-size:clamp(30px,4.2vw,50px); color:var(--forest); margin-top:20px; max-width:20ch}
.filters{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px}
.filters button{
  cursor:pointer; background:transparent; border:1px solid var(--line); color:#463f31;
  border-radius:100px; padding:9px 16px; font-size:13.5px; font-family:var(--mono); letter-spacing:.03em;
  transition:.22s var(--ease);
}
.filters button:hover{border-color:var(--forest)}
.filters button[aria-pressed="true"]{background:var(--forest); color:var(--bone); border-color:var(--forest)}

.register{margin-top:44px; border-top:1px solid var(--line)}
.site{
  width:100%; text-align:left; cursor:pointer; background:transparent; border:0;
  border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:64px 1.6fr 1fr auto; gap:20px; align-items:center;
  padding:22px 8px; transition:background .25s var(--ease), padding .25s var(--ease);
}
.site:hover{background:var(--parch-2); padding-left:16px}
.site__no{font-family:var(--mono); font-size:15px; color:var(--moss)}
.site__name{font-family:var(--serif); font-size:clamp(19px,2.2vw,25px); color:var(--forest); line-height:1.14}
.site__loc{font-family:var(--mono); font-size:12.5px; letter-spacing:.05em; color:#6a6250; margin-top:6px; text-transform:uppercase}
.site__tag{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--amber-ink); display:inline-flex; align-items:center; gap:7px}
.site__tag::before{content:""; width:8px;height:8px;border-radius:50%; background:var(--marigold)}
.site__tag[data-cat="park"]::before{background:var(--moss)}
.site__tag[data-cat="urban"]::before{background:var(--forest)}
.site__data{font-family:var(--mono); font-size:13px; color:#463f31; display:flex; gap:22px; justify-content:flex-end; align-items:baseline}
.site__data b{color:var(--forest); font-weight:600; font-size:16px}
.site__data .surv{color:var(--amber-ink)}
.site__open{font-family:var(--mono); font-size:12px; color:var(--moss); white-space:nowrap; display:inline-flex; align-items:center; gap:7px}
.reg__foot{margin-top:20px; font-family:var(--mono); font-size:12px; color:#7a7260}

@media (max-width:820px){
  .site{grid-template-columns:44px 1fr; gap:6px 16px; padding:20px 6px}
  .site__mid{grid-column:2}
  .site__data{grid-column:2; justify-content:flex-start; margin-top:12px}
  .site__open{display:none}
  .site__tag{margin-top:10px; display:inline-flex}
}

/* ===========================================================================
   APPROACH — four real forestry steps
   ========================================================================== */
.approach h2{font-family:var(--serif); font-size:clamp(30px,4.2vw,50px); color:var(--forest); margin-top:20px; max-width:22ch}
.steps{margin-top:56px; display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line)}
.step{padding:34px 26px 30px 0; border-bottom:1px solid var(--line)}
.step + .step{border-left:1px solid var(--line); padding-left:26px}
.step__ic{width:40px;height:40px;color:var(--forest)}
.step__no{font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--marigold); margin-top:20px}
.step h3{font-family:var(--serif); font-size:24px; color:var(--forest); margin-top:6px}
.step p{margin-top:12px; font-size:15.5px; color:#4a4335; line-height:1.55}
@media (max-width:900px){ .steps{grid-template-columns:repeat(2,1fr)} .step:nth-child(odd){border-left:0;padding-left:0} .step:nth-child(even){padding-left:26px} }
@media (max-width:520px){ .steps{grid-template-columns:1fr} .step{border-left:0 !important;padding-left:0 !important} }

/* ===========================================================================
   CAPABILITIES — grouped from real categories
   ========================================================================== */
.caps{background:var(--parch-2)}
.caps__grid{margin-top:48px; display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.cap{background:var(--bone); border:1px solid var(--line); border-radius:var(--radius); padding:30px; transition:.3s var(--ease)}
.cap:hover{transform:translateY(-4px); border-color:var(--moss)}
.cap__ring{width:34px;height:34px;color:var(--marigold)}
.cap h3{font-family:var(--serif); font-size:23px; color:var(--forest); margin-top:20px}
.cap p{font-size:15px; color:#4a4335; margin-top:10px; line-height:1.55}
.cap__data{margin-top:22px; padding-top:18px; border-top:1px solid var(--line); display:flex; gap:26px; font-family:var(--mono); font-size:12px; color:#6a6250}
.cap__data b{display:block; font-size:19px; color:var(--forest); font-weight:600; margin-bottom:2px}
@media (max-width:820px){ .caps__grid{grid-template-columns:1fr} }

/* ===========================================================================
   GALLERY
   ========================================================================== */
.gallery__carousel{
  position:relative;
  margin-top:44px;
}
.gallery__track{
  display:flex;
  gap:16px;
  overflow-x:hidden;
  scroll-behavior:smooth;
}
.gallery__item{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  flex:0 0 calc(33.333% - 11px);
  aspect-ratio:4/3;
  background:var(--parch-2);
}
.gallery__item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s var(--ease);
}
.gallery__item:hover img{transform:scale(1.04)}
.gallery__caption{
  position:absolute;
  bottom:0; left:0; right:0;
  padding:14px 16px;
  background:linear-gradient(to top, rgba(21,42,30,.75), transparent);
  color:var(--bone);
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.04em;
  opacity:0;
  transition:opacity .3s var(--ease);
}
.gallery__item:hover .gallery__caption{opacity:1}
.gallery__empty{font-family:var(--mono);font-size:13px;color:#7a7260;margin-top:32px}
.gallery__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--bone);
  color:var(--forest);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  line-height:1;
  box-shadow:0 2px 16px rgba(21,42,30,.14);
  transition:.22s var(--ease);
}
.gallery__arrow--prev{left:-28px}
.gallery__arrow--next{right:-28px}
.gallery__arrow:hover{background:var(--forest);color:var(--bone);border-color:var(--forest)}
.gallery__arrow:disabled{opacity:.3;pointer-events:none}
@media (max-width:900px){
  .gallery__item{flex:0 0 calc(50% - 8px)}
  .gallery__arrow--prev{left:8px}
  .gallery__arrow--next{right:8px}
}
@media (max-width:520px){
  .gallery__item{flex:0 0 100%}
}

/* ===========================================================================
   FOUNDERS — two balanced profile cards
   ========================================================================== */
.founders{background:var(--parch-2)}
.founders__grid{
  margin-top:52px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}
.founder{
  background:var(--bone);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:36px 30px;
}
.founder__avatar{
  width:80px;
  height:80px;
  border-radius:50%;
  background:var(--forest);
  color:var(--bone);
  font-family:var(--serif);
  font-size:26px;
  letter-spacing:.04em;
  display:flex;
  align-items:center;
  justify-content:center;
}
.founder__meta{margin-top:24px}
.founder__role{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--amber-ink);
}
.founder__name{
  font-family:var(--serif);
  font-size:clamp(22px,2.4vw,28px);
  color:var(--forest);
  line-height:1.08;
  margin-top:6px;
}
.founder p{
  font-size:15.5px;
  color:#4a4335;
  line-height:1.6;
  margin-top:16px;
}
@media (max-width:820px){
  .founders__grid{grid-template-columns:1fr}
}

/* ===========================================================================
   SHARED SECTION HEADER (.sec-head)
   ========================================================================== */
.sec-head{
  display:flex; flex-wrap:wrap; align-items:flex-end;
  justify-content:space-between; gap:24px; margin-bottom:52px;
}
.sec-head__h2{
  font-family:var(--serif); font-size:clamp(28px,3.6vw,44px);
  color:var(--forest); margin-top:14px; max-width:24ch; line-height:1.1;
}

/* ===========================================================================
   PROGRAMS — three category cards
   ========================================================================== */
.programs{background:var(--parch)}
.prog__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.prog-card{
  display:block; border:1px solid var(--line); border-radius:10px;
  overflow:hidden; background:var(--parch); color:inherit; text-decoration:none;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.prog-card:hover{transform:translateY(-5px); box-shadow:0 12px 48px rgba(21,42,30,.10)}
.prog-card__img{position:relative; overflow:hidden; aspect-ratio:16/10}
.prog-card__img img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .4s var(--ease);
}
.prog-card:hover .prog-card__img img{transform:scale(1.05)}
.prog-card__tag{
  position:absolute; top:14px; left:14px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  background:var(--marigold); color:#2a1c02;
  border-radius:4px; padding:5px 10px; font-weight:700;
}
.prog-card__tag--park{background:var(--moss); color:var(--bone)}
.prog-card__tag--urban{background:var(--forest); color:var(--bone)}
.prog-card__body{padding:22px 20px 26px}
.prog-card__body h3{
  font-family:var(--serif); font-size:clamp(18px,1.8vw,21px);
  color:var(--forest); line-height:1.18; margin-top:0;
}
.prog-card__body p{margin-top:10px; font-size:14.5px; color:#4a4335; line-height:1.55}
.prog-card__data{
  margin-top:16px; padding-top:13px; border-top:1px solid var(--line);
  display:flex; gap:16px; flex-wrap:wrap;
  font-family:var(--mono); font-size:12px; color:#6a6250;
}
.prog-card__data b{color:var(--forest); font-size:15px; font-weight:700}
@media(max-width:820px){.prog__grid{grid-template-columns:1fr}}

/* ===========================================================================
   MISSION STRIP — dark two-column message
   ========================================================================== */
.mission-strip{background:var(--forest); padding-block:clamp(56px,8vw,108px)}
.mission-strip__in{
  display:grid; grid-template-columns:1fr 1.1fr;
  gap:clamp(30px,5vw,70px); align-items:center;
}
.mission-strip__left h2{
  font-family:var(--serif); font-size:clamp(28px,4.6vw,56px);
  color:var(--bone); line-height:1.1;
}
.mission-strip__left h2 em{color:var(--marigold); font-style:italic}
.mission-strip__right p{
  font-size:clamp(15px,1.4vw,17px); color:#b8c5b2; line-height:1.7;
}
@media(max-width:820px){.mission-strip__in{grid-template-columns:1fr}}

/* ===========================================================================
   HOW IT WORKS — four-step teaser
   ========================================================================== */
.how-it-works{background:var(--parch-2)}
.how__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:0; border-top:1px solid var(--line); margin-top:0;
}
.how-step{padding:30px 22px 26px 0; border-bottom:1px solid var(--line)}
.how-step + .how-step{border-left:1px solid var(--line); padding-left:22px}
.how-step__no{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--marigold);
}
.how-step__icon{width:36px; height:36px; color:var(--forest); margin-top:14px}
.how-step h3{
  font-family:var(--serif); font-size:20px; color:var(--forest); margin-top:10px;
}
.how-step p{margin-top:10px; font-size:14.5px; color:#4a4335; line-height:1.55}
@media(max-width:900px){
  .how__grid{grid-template-columns:repeat(2,1fr)}
  .how-step:nth-child(odd){border-left:0;padding-left:0}
  .how-step:nth-child(even){padding-left:22px}
}
@media(max-width:520px){
  .how__grid{grid-template-columns:1fr}
  .how-step{border-left:0 !important; padding-left:0 !important}
}

/* ===========================================================================
   VALUES — four belief cards
   ========================================================================== */
.values{background:var(--parch)}
.val__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:0;
}
.val-card{
  background:var(--parch-2); border:1px solid var(--line); border-radius:10px;
  padding:26px 22px 28px;
  transition:transform .3s var(--ease), border-color .3s var(--ease);
}
.val-card:hover{transform:translateY(-4px); border-color:var(--moss)}
.val-card__icon{font-size:30px; line-height:1}
.val-card h3{
  font-family:var(--serif); font-size:19px; color:var(--forest); margin-top:14px;
}
.val-card p{font-size:14.5px; color:#4a4335; line-height:1.55; margin-top:9px}
@media(max-width:820px){.val__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.val__grid{grid-template-columns:1fr}}

/* ===========================================================================
   CSR PROOF — light two-column redesign
   ========================================================================== */
.csr-proof{background:var(--parch-2)}
.csr-proof__in{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(30px,5vw,70px); align-items:start;
}
.csr-proof__text h2{
  font-family:var(--serif); font-size:clamp(26px,3.2vw,40px);
  color:var(--forest); margin-top:14px;
}
.csr-proof__logos-label{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:#7a7260; margin-bottom:14px;
}
.logos{margin-top:0; display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.logo{
  border:1px dashed var(--line); border-radius:var(--radius); height:90px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; padding:10px;
  color:#9a9078; background:var(--bone);
}
.csr-proof__note{
  margin-top:14px; font-family:var(--mono); font-size:11.5px; color:#9a9078;
}
@media(max-width:820px){
  .csr-proof__in{grid-template-columns:1fr}
  .logos{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:540px){.logos{grid-template-columns:repeat(2,1fr)}}

/* ===========================================================================
   CTA BLOCK — light section with three engagement tiles
   ========================================================================== */
.cta-block{
  background:var(--parch);
  padding-block:clamp(70px,10vw,128px);
}
.cta-block .eyebrow--onDark{color:var(--amber-ink)}
.cta-block .eyebrow--onDark::before{background:var(--marigold)}
.cta-tiles{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:18px; margin-top:48px;
}
.cta-tile{
  display:block; background:var(--parch-2);
  border:1px solid var(--line); border-radius:10px;
  padding:28px 24px 30px; color:var(--forest); text-decoration:none;
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.cta-tile:hover{transform:translateY(-4px); border-color:var(--moss); box-shadow:0 8px 32px rgba(21,42,30,.08)}
.cta-tile--gold{background:var(--marigold); border-color:var(--marigold); color:#2a1c02}
.cta-tile--gold:hover{border-color:#c8921a; box-shadow:0 8px 32px rgba(224,163,46,.28)}
.cta-tile__icon{font-size:26px; line-height:1}
.cta-tile h3{
  font-family:var(--serif); font-size:21px; margin-top:14px; color:inherit;
}
.cta-tile p{
  font-size:14.5px; line-height:1.55; margin-top:9px; color:#4a4335;
}
.cta-tile--gold p{color:#4a2e06}
.cta-tile__link{
  display:inline-block; margin-top:18px;
  font-family:var(--mono); font-size:12px; letter-spacing:.04em;
  color:var(--moss); transition:color .2s;
}
.cta-tile--gold .cta-tile__link{color:#4a2e06}
.cta-tile:hover .cta-tile__link{color:var(--forest)}
.cta-tile--gold:hover .cta-tile__link{color:#2a1c02}
@media(max-width:820px){.cta-tiles{grid-template-columns:1fr}}

/* ===========================================================================
   CONTACT
   ========================================================================== */
.contact{background:var(--parch-2)}
.contact__grid{display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(30px,6vw,80px); align-items:start}
.contact h2{font-family:var(--serif); font-size:clamp(30px,4.4vw,52px); color:var(--forest); margin-top:20px; line-height:1.05}
.contact__lede{margin-top:22px}
.contact__list{margin-top:34px; display:grid; gap:2px; font-family:var(--mono); font-size:13.5px}
.contact__list div{display:flex; gap:14px; padding:14px 0; border-top:1px solid var(--line); color:#463f31}
.contact__list span{color:var(--amber-ink); min-width:92px}

.form{background:var(--bone); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(24px,4vw,40px)}
.field{margin-bottom:20px}
.field label{display:block; font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#5a5341; margin-bottom:8px}
.field .req{color:var(--marigold)}
.field input, .field select, .field textarea{
  width:100%; font-family:var(--sans); font-size:16px; color:var(--soil);
  background:var(--parch); border:1px solid var(--line); border-radius:var(--radius);
  padding:13px 14px; transition:border-color .2s var(--ease);
}
.field textarea{min-height:120px; resize:vertical}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--moss)}
.field[data-err="true"] input, .field[data-err="true"] select, .field[data-err="true"] textarea{border-color:#B4472B}
.err{color:#9A3316; font-size:13px; margin-top:7px; display:none; font-family:var(--sans)}
.field[data-err="true"] .err{display:block}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.check{display:flex; gap:12px; align-items:flex-start; font-size:14px; color:#4a4335}
.check input{width:20px;height:20px;margin-top:2px;flex:0 0 auto; accent-color:var(--forest)}
.form__note{font-family:var(--mono); font-size:11.5px; color:#7a7260; margin-top:18px; line-height:1.5}
.form__ok{display:none; background:#EAF0E4; border:1px solid var(--moss); border-radius:var(--radius); padding:22px; color:var(--forest)}
.form__ok b{font-family:var(--serif); font-size:20px; display:block; margin-bottom:6px}
.form.is-sent .form__body{display:none}
.form.is-sent .form__ok{display:block}
.btn.is-loading{pointer-events:none; opacity:.75}
@media (max-width:860px){ .contact__grid{grid-template-columns:1fr} .row2{grid-template-columns:1fr} }

/* ===========================================================================
   FOOTER
   ========================================================================== */
.foot{background:var(--forest); color:#c8d2c2; padding-block:64px 40px}
.foot__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px}
.foot .brand{color:var(--bone)}
.foot__mission{margin-top:20px; max-width:38ch; font-size:15px; line-height:1.55; color:#a9b6a2}
.foot h4{font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--marigold); margin-bottom:16px}
.foot a{display:block; padding:6px 0; font-size:15px; color:#c8d2c2; transition:color .2s var(--ease)}
.foot a:hover{color:var(--bone)}
.foot__bar{margin-top:52px; padding-top:24px; border-top:1px solid var(--line-dark); display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between; font-family:var(--mono); font-size:12px; color:#8fa088}
@media (max-width:760px){ .foot__grid{grid-template-columns:1fr 1fr} .foot__grid > div:first-child{grid-column:1 / -1} }

/* ===========================================================================
   CASE-STUDY MODAL (project detail template)
   ========================================================================== */
.modal{position:fixed; inset:0; z-index:150; display:none}
.modal[data-open="true"]{display:block}
.modal__scrim{position:absolute; inset:0; background:rgba(15,26,20,.55); backdrop-filter:blur(2px); opacity:0; transition:opacity .3s var(--ease)}
.modal[data-open="true"] .modal__scrim{opacity:1}
.modal__panel{
  position:absolute; right:0; top:0; height:100%; width:min(620px,100%);
  background:var(--parch); overflow-y:auto; transform:translateX(24px); opacity:0;
  transition:.34s var(--ease); box-shadow:-30px 0 80px rgba(15,26,20,.25);
}
.modal[data-open="true"] .modal__panel{transform:none; opacity:1}
.modal__x{position:absolute; top:20px; right:20px; z-index:2; width:44px;height:44px; border-radius:50%; border:1px solid var(--line); background:var(--bone); cursor:pointer; font-size:20px; color:var(--forest); display:flex; align-items:center; justify-content:center}
.modal__x:hover{border-color:var(--forest)}
.md{padding:clamp(28px,5vw,52px)}
.md__cat{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--amber-ink)}
.md__title{font-family:var(--serif); font-size:clamp(26px,4vw,38px); color:var(--forest); margin-top:14px; line-height:1.08}
.md__result{font-size:17px; color:#4a4335; margin-top:14px; line-height:1.55}
.md__meta{margin-top:28px; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.md__meta div{background:var(--parch); padding:14px 16px}
.md__meta dt{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:#7a7260}
.md__meta dd{margin:5px 0 0; font-family:var(--mono); font-size:15px; color:var(--forest); font-weight:700}
.md__gallery{margin-top:28px; display:grid; grid-template-columns:1fr 1fr; gap:12px}
.md__ph{aspect-ratio:4/3; border:1px dashed var(--line); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:11px; color:#9a9078; background:var(--parch-2); text-align:center; padding:10px}
.md section{margin-top:30px}
.md h4{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--amber-ink); margin-bottom:12px}
.md p{font-size:15.5px; color:#3f3928; line-height:1.6}
.md ul{margin:0; padding-left:18px}
.md li{font-size:15.5px; color:#3f3928; line-height:1.55; margin-bottom:8px}
.md__cta{margin-top:36px; padding-top:26px; border-top:1px solid var(--line)}

/* ===========================================================================
   NEWS TICKER
   ========================================================================== */
.ticker{
  position:sticky; top:70px; z-index:98;
  background:var(--forest); color:var(--bone);
  height:34px; overflow:hidden; display:flex; align-items:center;
}
.ticker__label{
  flex-shrink:0; background:var(--marigold); color:var(--forest);
  font-family:var(--mono); font-size:10px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  padding:0 14px; height:100%; display:flex; align-items:center; white-space:nowrap;
}
.ticker__wrap{flex:1; overflow:hidden; position:relative}
.ticker__track{
  display:inline-flex; align-items:center; white-space:nowrap;
  animation:tickerScroll 60s linear infinite; will-change:transform;
}
.ticker__track:hover{animation-play-state:paused}
.ticker__item{
  font-family:var(--mono); font-size:11px; color:var(--bone); opacity:.88;
  text-decoration:none; padding-inline:2px; transition:opacity .2s, color .2s;
}
.ticker__item:hover{opacity:1; color:var(--marigold)}
.ticker__sep{padding-inline:20px; color:var(--marigold); opacity:.5; font-size:10px}
@keyframes tickerScroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* ===========================================================================
   CONTACT PAGE — trust badges + updated section bg
   ========================================================================== */
.contact{background:var(--parch)}
.contact__trust{margin-top:32px; display:grid; gap:10px}
.contact__trust-item{
  display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:12.5px; color:#4a4335; letter-spacing:.02em;
}
.contact__trust-icon{font-size:18px; flex-shrink:0}

/* ===========================================================================
   PAGE BANNER — dark header strip for all inner pages
   ========================================================================== */
.page-banner{background:var(--forest); padding-block:clamp(38px,5.5vw,72px)}
.page-banner__h1{
  font-family:var(--serif); font-size:clamp(28px,4.8vw,56px);
  color:var(--bone); margin-top:16px; max-width:22ch; line-height:1.08;
}
.page-banner__stats{
  display:flex; flex-wrap:wrap; gap:0;
  margin-top:40px; border-top:1px solid var(--line-dark);
}
.pb-stat{
  padding:18px 32px 16px 0; border-bottom:1px solid var(--line-dark);
}
.pb-stat + .pb-stat{padding-left:32px; border-left:1px solid var(--line-dark)}
.pb-stat__n{
  font-family:var(--serif); font-size:clamp(28px,3.4vw,42px); line-height:1; color:var(--bone);
  display:block;
}
.pb-stat__l{
  font-family:var(--mono); font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:#8fa088; display:block; margin-top:6px;
}
@media(max-width:640px){
  .page-banner__stats{flex-direction:column}
  .pb-stat + .pb-stat{border-left:0; padding-left:0}
}

/* ===========================================================================
   PAGE CTA — white closing CTA for inner pages
   ========================================================================== */
.page-cta{
  background:var(--parch); padding-block:clamp(44px,6vw,76px); text-align:center;
  border-top:1px solid var(--line);
}
.page-cta h2{
  font-family:var(--serif); font-size:clamp(22px,3.2vw,38px);
  color:var(--forest); max-width:26ch; margin-inline:auto; line-height:1.1; margin-top:0;
}
.page-cta p{
  margin:14px auto 0; max-width:46ch; color:#4a4335; font-size:15.5px; line-height:1.6;
}
.page-cta .hero__cta{justify-content:center; margin-top:26px}
/* remap btn--onDark buttons inside page-cta to forest-on-white */
.page-cta .btn--onDark{--bg:var(--forest);--fg:var(--bone);--bd:var(--forest)}
.page-cta .btn--onDark.btn--ghost{--bg:transparent;--fg:var(--forest);--bd:var(--line)}

/* ===========================================================================
   APPROACH PAGE — result strip
   ========================================================================== */
.result-strip{background:var(--forest-2); padding-block:clamp(44px,6vw,76px)}
.result-strip__in{
  display:grid; grid-template-columns:auto 1fr;
  gap:clamp(30px,5vw,72px); align-items:center;
}
.result-strip__n{
  font-family:var(--serif); font-size:clamp(52px,7vw,90px); line-height:1; color:var(--marigold);
}
.result-strip__n span{font-size:.5em; vertical-align:.42em; font-family:var(--mono)}
.result-strip__l{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:#8fa088; margin-top:8px;
}
@media(max-width:640px){.result-strip__in{grid-template-columns:1fr}}

/* ===========================================================================
   ABOUT PAGE — notice block and registration grid
   ========================================================================== */
.about-notice{
  margin-top:32px; background:var(--forest); border-radius:var(--radius);
  padding:20px 24px; display:flex; align-items:flex-start; gap:16px;
}
.about-notice__icon{font-size:22px; flex-shrink:0}
.about-notice__label{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--marigold);
}
.about-notice__text{margin:6px 0 0; font-size:15px; color:var(--bone); line-height:1.5}
.about-grid{
  margin-top:22px; display:grid; grid-template-columns:repeat(2,1fr);
  gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
}
.about-cell{background:var(--parch-2); padding:20px 22px}
.about-cell__label{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:#7a7260;
}
.about-cell__value{
  font-family:var(--serif); font-size:18px; color:var(--forest); margin-top:7px;
}
.about-cell__value--mono{
  font-family:var(--mono); font-size:14px; letter-spacing:.04em;
}
@media(max-width:580px){.about-grid{grid-template-columns:1fr}}

/* ===========================================================================
   GALLERY PAGE — caption note
   ========================================================================== */
.gallery__note{
  margin-top:22px; font-family:var(--mono); font-size:12px; color:#8a8272;
  letter-spacing:.02em;
}

/* ===========================================================================
   FOUNDERS — white section bg (was parch-2)
   ========================================================================== */
.founders{background:var(--parch)}

/* ===========================================================================
   SCROLL REVEAL (respects reduced motion below)
   ========================================================================== */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.is-visible{opacity:1; transform:none}

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