/* ==========================================================================
   Nityasevanexgenz Foundation — premium editorial layer
   Loads AFTER style.css and re-skins the shared shell across all 23 pages.
   Built by Imperial Tech Innovations
   --------------------------------------------------------------------------
   Type strategy: Cormorant Garamond carries the Latin display headlines and
   Inter the UI chrome. Neither font ships Devanagari, so every Marathi glyph
   falls through the stack to Martel / Mukta automatically — which is exactly
   why the EN / मराठी toggle keeps rendering at full weight.
   ========================================================================== */

:root{
  /* forest */
  --forest-900:#0B3D2E;
  --forest-800:#123F32;
  --forest-700:#174C3B;
  --forest-600:#1E5D48;
  --forest-500:#2A7357;

  /* earth */
  --earth-900:#283A29;
  --earth-700:#46513B;

  /* accent */
  --accent:#F47B20;
  --accent-deep:#D1620E;
  --accent-soft:#FDF1E5;

  /* surface + text */
  --bone:#F4F1E8;
  --bone-2:#EBE7DA;
  --bone-3:#DFDACA;
  --on-dark:#F7F5ED;
  --on-dark-2:#D9E2D8;
  --on-dark-3:#9FB6A8;

  /* type roles */
  --display:"Cormorant Garamond","Mukta",Georgia,"Times New Roman",serif;
  --ui:"Inter","Mukta","Segoe UI",system-ui,-apple-system,sans-serif;

  /* spacing */
  --band:clamp(4.5rem,9vw,8rem);

  /* radius — subtle, never bubbly */
  --r-xs:3px; --r-sm:6px; --r:12px; --r-lg:20px; --r-xl:30px;

  /* elevation */
  --sh-1:0 1px 2px rgba(11,61,46,.05),0 2px 8px rgba(11,61,46,.05);
  --sh-2:0 2px 4px rgba(11,61,46,.05),0 12px 28px rgba(11,61,46,.09);
  --sh-3:0 4px 8px rgba(11,61,46,.06),0 24px 56px rgba(11,61,46,.14);
  --sh-glass:0 8px 20px rgba(0,0,0,.18),0 32px 64px rgba(0,0,0,.26);

  /* rewire the original tokens so every page inherits the new palette */
  --paper:#F4F1E8;
  --forest:#0B3D2E;
  --forest-deep:#08301F;
  --leaf:#1E5D48;
  --leaf-soft:#DFE9E1;
  --marigold:#F47B20;
  --marigold-deep:#D1620E;
  --marigold-soft:#FDF1E5;
  --sage:#ECEEE4;
  --sage-deep:#DEE3D6;
  --rule:#DCD9CB;
  --rule-soft:#E8E5D9;
  --ink:#1F2C24;
  --ash:#5F6E64;

  --wrap:1280px;
  --head-h:78px;
  --gap:var(--band);
}

/* ------------------------------------------------------------------ base */
body{
  background:var(--bone);
  font-family:var(--ui);
  font-size:1.0625rem;
  line-height:1.68;
  letter-spacing:-.002em;
  /* Safety net against a stray wide child. `clip` rather than `hidden` so it
     does not become a scroll container and break the sticky header. */
  overflow-x:clip;
}
.wrap{width:min(100% - 3rem,var(--wrap))}

/* warm ambient wash — depth without a visible pattern */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 50% at 12% -5%,rgba(30,93,72,.055),transparent 60%),
    radial-gradient(ellipse 60% 45% at 95% 8%,rgba(244,123,32,.045),transparent 60%);
}

/* ------------------------------------------------------------ typography */
h1,h2,h3,h4{font-family:var(--display);color:var(--forest-900);letter-spacing:-.015em;font-weight:600}
h1{font-size:clamp(2.6rem,6.2vw,4.75rem);line-height:1.03;letter-spacing:-.028em;font-weight:500}
h2{font-size:clamp(2rem,4.2vw,3.25rem);line-height:1.08;letter-spacing:-.022em;font-weight:500}
h3{font-size:clamp(1.3rem,2.1vw,1.62rem);line-height:1.2;letter-spacing:-.014em;font-weight:600}
h4{font-family:var(--ui);font-size:.95rem;font-weight:600;letter-spacing:-.005em}

p{max-width:68ch}
.lede{font-size:clamp(1.1rem,1.55vw,1.28rem);line-height:1.6;color:#3A4A41;max-width:56ch;font-weight:400}

/* the eyebrow — small-caps label that opens a section */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--ui);font-size:.73rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-deep);margin:0 0 1.1rem;max-width:none;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent);flex:0 0 26px}
.band-forest .eyebrow,.px-dark .eyebrow,.cta-band .eyebrow,.hero .eyebrow{color:var(--accent)}

.accent-rule{width:52px;height:2px;background:var(--accent);border:0;margin:1.4rem 0 1.6rem}

a{text-decoration-thickness:1px;text-underline-offset:4px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-xs)}

/* --------------------------------- skip link (previously unreachable) */
.skip{
  position:fixed!important;left:50%!important;top:.75rem;
  transform:translate(-50%,-180%);
  z-index:200;background:var(--forest-900);color:var(--on-dark);
  padding:.7rem 1.4rem;border-radius:999px;text-decoration:none;
  font-family:var(--ui);font-size:.9rem;font-weight:600;
  box-shadow:var(--sh-3);transition:transform .2s ease;
}
.skip:focus,.skip:focus-visible{transform:translate(-50%,0);color:var(--on-dark)}

.sr-only{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px;
}

/* --------------------------------------------------------------- buttons */
.btn{
  font-family:var(--ui);font-size:.95rem;font-weight:600;letter-spacing:-.005em;
  padding:.92rem 1.7rem;border-radius:999px;border-width:1px;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),background-color .22s ease,
             border-color .22s ease,color .22s ease,box-shadow .22s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn-give{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 6px 18px rgba(244,123,32,.28)}
.btn-give:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff;box-shadow:0 10px 26px rgba(244,123,32,.38)}

.btn-solid{background:var(--forest-900);border-color:var(--forest-900);color:#fff;box-shadow:var(--sh-2)}
.btn-solid:hover{background:var(--forest-700);border-color:var(--forest-700);color:#fff;box-shadow:var(--sh-3)}

.btn-line{background:transparent;border-color:rgba(11,61,46,.28);color:var(--forest-900)}
.btn-line:hover{background:var(--forest-900);border-color:var(--forest-900);color:#fff}

.btn-line-light{background:rgba(255,255,255,.06);border-color:rgba(247,245,237,.32);color:var(--on-dark);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.btn-line-light:hover{background:var(--on-dark);border-color:var(--on-dark);color:var(--forest-900)}

/* the quiet text CTA with a travelling arrow */
.btn-ghost{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--ui);font-size:.95rem;font-weight:600;
  color:var(--on-dark);text-decoration:none;padding:.9rem .2rem;
  border-bottom:1px solid rgba(247,245,237,.3);
}
.btn-ghost .arw{transition:transform .25s cubic-bezier(.2,.7,.3,1);display:inline-block}
.btn-ghost:hover{color:#fff;border-bottom-color:var(--accent)}
.btn-ghost:hover .arw{transform:translateX(5px)}
.btn-ghost--dark{color:var(--forest-900);border-bottom-color:rgba(11,61,46,.25)}
.btn-ghost--dark:hover{color:var(--accent-deep);border-bottom-color:var(--accent)}

.btn-row{gap:1rem;margin-top:2rem;align-items:center}

/* --------------------------------------------------------- announcement */
.announce{
  background:var(--forest-900);color:var(--on-dark-2);
  font-family:var(--ui);font-size:.82rem;
  padding:.6rem 0;border-bottom:1px solid rgba(247,245,237,.09);
}
.announce p{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;justify-content:center}
.announce p::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);
  flex:0 0 6px;box-shadow:0 0 0 3px rgba(244,123,32,.22);
}
.announce strong{color:#fff;font-weight:600}

/* ==========================================================================
   HEADER — transparent over the opening band, blurred glass once scrolled.
   Every page opens on a dark section (.hero or .page-head), so a single dark
   header treatment works site-wide.
   ========================================================================== */
.site-head{
  position:sticky;top:0;z-index:80;
  background:transparent;border-bottom:1px solid transparent;
  transition:background-color .35s ease,backdrop-filter .35s ease,
             border-color .35s ease,box-shadow .35s ease;
}
.site-head.is-stuck{
  background:rgba(11,61,46,.72);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  backdrop-filter:blur(20px) saturate(1.4);
  border-bottom-color:rgba(247,245,237,.11);
  box-shadow:0 8px 30px rgba(8,48,31,.28);
}
.head-inner{min-height:var(--head-h);gap:1.15rem}

/* pull the opening band up so it runs beneath the transparent header */
main > .hero:first-child,
main > .page-head:first-child{margin-top:calc(-1 * var(--head-h))}
main > .page-head:first-child{padding-top:calc(var(--head-h) + clamp(3rem,6vw,5rem))}

/* The full-colour lockup sits on a white plate. Its wordmark is navy, which
   would disappear against the dark forest header on its own — the plate is
   what lets the logo stay in its real brand colours up there. */
.brand{
  background:#fff;
  border:1px solid rgba(247,245,237,.32);
  border-radius:14px;
  padding:.45rem .85rem;
  box-shadow:0 4px 16px rgba(0,0,0,.22);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease;
}
.brand:hover{transform:translateY(-1px);box-shadow:0 7px 24px rgba(0,0,0,.3)}
.brand-logo{height:34px;width:auto;display:block}

/* The tagline is set as live text, not baked into the logo image. In the
   artwork it is roughly a tenth of the lockup's height, so at header size it
   renders about 3px tall and turns to mush — as type it stays crisp, and it
   can be translated with the rest of the page. */
.brand{flex-direction:column;align-items:flex-start;gap:.32rem;padding:.5rem .85rem .55rem}
.brand-tag{
  font-family:var(--ui);font-size:.475rem;font-weight:600;
  letter-spacing:.055em;text-transform:uppercase;
  color:#003084;white-space:nowrap;line-height:1;
}
.brand-tag i{font-style:normal;color:#186C24;margin:0 .42em;font-weight:700}

/* nav labels must never break across two lines */
.nav a{white-space:nowrap}

@media (max-width:1340px){
  .brand-tag{display:none}
  .brand{flex-direction:row;align-items:center;padding:.45rem .85rem}
}
@media (max-width:1080px){.brand-logo{height:32px}}
@media (max-width:620px){
  .brand{padding:.34rem .6rem;border-radius:11px}
  .brand-logo{height:26px}
}
@media (max-width:400px){.brand-logo{height:23px}}
.brand-name{font-family:var(--display);font-size:1.12rem;font-weight:600;color:var(--on-dark);letter-spacing:-.018em}
.brand-name span{font-family:var(--ui);font-size:.68rem;color:var(--on-dark-3);letter-spacing:.07em;text-transform:uppercase;margin-top:.1rem}

.nav{gap:.1rem}
.nav a{
  font-family:var(--ui);font-size:.88rem;font-weight:500;
  color:var(--on-dark-2);padding:.5rem .66rem;border-radius:999px;
  transition:color .2s ease,background-color .2s ease;
}
.nav > li > a{position:relative}
.nav > li > a::after{
  content:"";position:absolute;left:.66rem;right:.66rem;bottom:.18rem;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.nav > li:hover > a::after,.nav > li > a[aria-current=page]::after{transform:scaleX(1)}
.nav a:hover,.nav a[aria-current=page]{color:#fff;background:transparent}

.nav ul{
  min-width:296px;padding:.5rem;border-radius:var(--r);
  background:rgba(11,61,46,.94);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  border:1px solid rgba(247,245,237,.13);
  box-shadow:0 20px 50px rgba(8,48,31,.4);
  transform:translateY(8px);
}
.nav ul a{font-size:.86rem;padding:.55rem .8rem;border-radius:var(--r-sm);color:var(--on-dark-2)}
.nav ul a:hover{background:rgba(247,245,237,.09);color:#fff}
.nav ul a::after{display:none}

.lang{border:1px solid rgba(247,245,237,.22);border-radius:999px;background:rgba(247,245,237,.05)}
.lang button{background:transparent;color:var(--on-dark-2);font-family:var(--ui);font-size:.76rem;padding:.36rem .72rem;border-radius:999px;transition:.2s ease}
.lang button:hover{color:#fff}
.lang button[aria-pressed=true]{background:var(--on-dark);color:var(--forest-900)}

.head-give{padding:.62rem 1.3rem;font-size:.88rem}

.burger{border:1px solid rgba(247,245,237,.24);border-radius:999px;width:46px;height:44px;background:rgba(247,245,237,.05)}
.burger span,.burger span::before,.burger span::after{background:var(--on-dark);transition:.25s ease}
.burger[aria-expanded=true] span{background:transparent}
.burger[aria-expanded=true] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded=true] span::after{top:0;transform:rotate(-45deg)}

@media (max-width:1080px){
  .nav{
    inset:var(--head-h) 0 auto;
    background:rgba(11,61,46,.97);
    -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
    border-bottom:1px solid rgba(247,245,237,.12);
    padding:.75rem 1.5rem 2rem;
    box-shadow:0 24px 48px rgba(8,48,31,.35);
  }
  .nav a{padding:.8rem .25rem;border-bottom:1px solid rgba(247,245,237,.08);border-radius:0}
  .nav > li > a::after{display:none}
  .nav ul{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;
    border:0;border-left:1px solid rgba(244,123,32,.45);padding:0 0 .5rem 1rem;margin:.25rem 0 .6rem}
}
@media (max-width:620px){
  :root{--head-h:66px}
  .nav{inset-block-start:var(--head-h)}
  .wrap{width:min(100% - 2.25rem,var(--wrap))}

  /* The desktop gap and brand size added up to more than a phone is wide,
     which pushed the burger off-screen and gave the whole document a
     horizontal scroll — every section below was clipped as a result. */
  .head-inner{gap:.6rem}
  .brand{min-width:0;flex:1 1 auto}
  .brand-mark{width:34px;height:34px;flex-basis:34px}
  .brand-mark svg{width:19px;height:19px}
  .brand-name{font-size:.92rem;line-height:1.2;min-width:0}
  .head-actions{gap:.45rem;flex-shrink:0}
  .lang button{padding:.32rem .5rem;font-size:.72rem}
  .burger{width:42px;height:40px}
}
@media (max-width:400px){
  .brand-name{font-size:.8rem}
  .head-inner{gap:.45rem}
}

/* ==========================================================================
   HERO — full-bleed, cinematic, layered
   ========================================================================== */
.hero{
  position:relative;isolation:isolate;
  min-height:min(100svh,940px);
  display:flex;align-items:center;
  padding-block:calc(var(--head-h) + clamp(2.5rem,5vw,4rem)) clamp(6.5rem,12vw,10rem);
  background:var(--forest-900);
  overflow:clip;
}
.hero::after{content:none}

.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}

/* full-bleed photograph slot — set --photo on .hero to switch it on */
/* Cross-fading hero backgrounds. Every frame is stacked in the same box; only
   the one carrying .is-on is visible, and it drifts slowly from 1.06 to 1 while
   it is on screen. Transitions rather than keyframes, so a frame fading out
   eases back instead of snapping when the class is removed. */
.hero-photos{position:absolute;inset:0;overflow:hidden}
.hero-photo{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:center 38%;
  opacity:0;transform:scale(1.06);
  transition:opacity 1.3s ease,transform 7s ease-out;
  will-change:opacity;
}
.hero-photo.is-on{opacity:var(--photo-opacity,.34);transform:scale(1)}

@media (prefers-reduced-motion:reduce){
  /* no cross-fade, no drift — the first frame simply stays put */
  .hero-photo{transition:none;transform:none}
  .hero-photo.is-on{transform:none}
}

/* Layered forest veil. Eased back so the photograph reads through: it stays
   heaviest on the left, under the headline and body copy, and thins out to the
   right where there is nothing to keep legible. */
.hero-veil{
  position:absolute;inset:0;
  background:
    linear-gradient(102deg,rgba(11,61,46,.9) 0%,rgba(11,61,46,.76) 38%,rgba(18,63,50,.46) 68%,rgba(23,76,59,.28) 100%),
    radial-gradient(ellipse 55% 60% at 82% 26%,rgba(42,115,87,.3),transparent 62%),
    radial-gradient(ellipse 45% 50% at 8% 88%,rgba(244,123,32,.14),transparent 62%),
    radial-gradient(ellipse 90% 60% at 50% 118%,rgba(8,48,31,.8),transparent 70%);
}
/* fine weave — stops the large dark areas reading as flat */
.hero-grain{
  position:absolute;inset:0;opacity:.4;mix-blend-mode:soft-light;
  background-image:
    repeating-linear-gradient(0deg,rgba(255,255,255,.055) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px);
}

/* organic leaf shapes, barely there */
.leaf{position:absolute;opacity:.09;color:#8FC9A8}
.leaf svg{width:100%;height:100%;display:block}
.leaf--1{width:190px;height:190px;top:11%;left:-48px;animation:float1 19s ease-in-out infinite}
.leaf--2{width:120px;height:120px;top:66%;left:13%;opacity:.07;animation:float2 24s ease-in-out infinite}
.leaf--3{width:250px;height:250px;bottom:-60px;right:5%;opacity:.06;color:var(--accent);animation:float1 28s ease-in-out infinite reverse}
@keyframes float1{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-24px) rotate(7deg)}}
@keyframes float2{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(18px) rotate(-9deg)}}

.hero-inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(2.5rem,5.5vw,5rem);align-items:center;
}

/* ------------------------------------------------------------ hero copy */
.hero h1{
  color:var(--on-dark);
  font-size:clamp(2.6rem,5.5vw,4.5rem);
  line-height:1.03;letter-spacing:-.03em;font-weight:500;
  margin-bottom:.42em;max-width:15ch;text-wrap:balance;
}
.hero h1 em{font-style:italic;color:#A8D8BC;font-weight:400}
.hero-mr{
  font-family:var(--display);font-size:clamp(1.15rem,2.1vw,1.5rem);
  color:#8FC9A8;font-weight:600;margin:0 0 1.2rem;font-style:italic;
}
.hero p{color:var(--on-dark-2);font-size:clamp(1.02rem,1.35vw,1.15rem);line-height:1.68;max-width:50ch}

/* ------------------------------------------------- hero headline reveal
   The slide's parts arrive in sequence rather than as one block: headline,
   then the Marathi line, then the paragraph, then the buttons. Each rises
   and resolves out of a slight blur, which reads as focus pulling in.
   Deliberately CSS-only — splitting the headline into word spans would
   fragment the text nodes the translator matches on, and break Marathi. */
.slide.is-on{display:block}
.slide.is-on > *{animation:heroRise .9s cubic-bezier(.16,1,.3,1) both}
.slide.is-on > h1{animation-duration:1.05s}
.slide.is-on > .hero-mr{animation-delay:.12s}
.slide.is-on > p{animation-delay:.18s}
.slide.is-on > .btn-row{animation-delay:.3s}

@keyframes heroRise{
  from{opacity:0;transform:translateY(26px);filter:blur(7px)}
  to{opacity:1;transform:none;filter:blur(0)}
}

/* the emphasised phrase gets an accent rule that draws itself once the
   headline has settled */
.hero h1 em{position:relative;display:inline-block}
/* sits clear of the descenders — Cormorant's italic g and p reach well below
   the baseline, and at bottom:.02em the rule cut straight through them */
.hero h1 em::after{
  content:"";position:absolute;left:.02em;right:.06em;bottom:-.1em;height:2px;
  background:linear-gradient(90deg,var(--accent),rgba(244,123,32,0));
  transform:scaleX(0);transform-origin:left center;
  animation:emRule .9s .8s cubic-bezier(.16,1,.3,1) both;
}
@keyframes emRule{to{transform:scaleX(1)}}

/* The backgrounds now rotate, so one frame may be brighter than the next.
   A soft shadow keeps the headline legible over any of them. */
.hero h1{text-shadow:0 2px 28px rgba(8,48,31,.5),0 1px 3px rgba(8,48,31,.3)}
.hero p,.hero-mr{text-shadow:0 1px 14px rgba(8,48,31,.45)}

@media (prefers-reduced-motion:reduce){
  .slide.is-on > *{animation:none}
  .hero h1 em::after{animation:none;transform:scaleX(1)}
}

.slide-dots{margin-top:2.4rem;gap:.6rem}
.slide-dots button{
  width:40px;height:3px;border-radius:999px;
  background:rgba(247,245,237,.24);transition:background-color .3s ease,width .3s ease;
}
.slide-dots button:hover{background:rgba(247,245,237,.45)}
.slide-dots button[aria-selected=true]{background:var(--accent);width:56px}

.hero-trust{
  display:flex;flex-wrap:wrap;align-items:center;gap:.55rem .9rem;
  margin:2.2rem 0 0;padding-top:1.6rem;
  border-top:1px solid rgba(247,245,237,.13);
  font-family:var(--ui);font-size:.76rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--on-dark-3);max-width:none;
}
.hero-trust span{display:inline-flex;align-items:center;gap:.55rem}
/* every item carries its own leading dot, including the first — as a
   separator only, the first item was left without one and looked unfinished */
.hero-trust span::before{
  content:"";width:4px;height:4px;border-radius:50%;
  background:var(--accent);opacity:.75;flex:0 0 4px;
}

/* ------------------------------------------------- hero visual + badge */
.hero-aside{position:relative;display:flex;flex-direction:column}

.hero-visual{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  aspect-ratio:4/3.35;min-height:300px;
  box-shadow:var(--sh-glass);
  border:1px solid rgba(247,245,237,.14);
}
.hero-visual .ph-fill{border-radius:0}

/* Credential badge, anchored INSIDE the image frame. It used to be positioned
   against .hero-aside, which meant it drifted down over the credential card
   instead of sitting on the photograph. */
.float-badge{
  display:flex;align-items:center;gap:.8rem;
  text-align:left;  /* the frame centres its caption; the badge must not inherit that */
  padding:.8rem 1.15rem;border-radius:999px;
  background:rgba(11,61,46,.6);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(247,245,237,.2);
  box-shadow:var(--sh-glass);
  color:var(--on-dark);
}
.float-badge .fb-mark{
  width:34px;height:34px;flex:0 0 34px;border-radius:50%;display:grid;place-items:center;
  background:rgba(244,123,32,.16);border:1px solid rgba(244,123,32,.4);color:var(--accent);
}
.float-badge .fb-mark svg{width:17px;height:17px}
.float-badge b{display:block;font-family:var(--display);font-size:1.12rem;font-weight:600;line-height:1.1;color:#fff}
.float-badge small{display:block;font-family:var(--ui);font-size:.66rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-3);margin-top:.1rem}

/* -------------------------------------------- glass trust & transparency */
/* Image frame above, credential card below, edges flush and a clear gap
   between them. Overlapping and offsetting the two made the pair read as a
   layout fault rather than as depth. */
.plate{
  position:relative;z-index:5;
  margin-top:1rem;margin-left:0;margin-right:0;
  padding:1.35rem 1.45rem 1.3rem;
  border-radius:var(--r-lg);
  background:rgba(11,61,46,.52);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);
  border:1px solid rgba(247,245,237,.18);
  box-shadow:var(--sh-glass);
}
.plate-badge{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--ui);font-size:.66rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:#A8D8BC;
  background:rgba(42,115,87,.28);border:1px solid rgba(168,216,188,.32);
  padding:.32rem .7rem;border-radius:999px;margin-bottom:1rem;
}
.plate-badge svg{width:13px;height:13px}
.plate-badge{margin-bottom:.8rem}
.plate h2{
  font-family:var(--display);font-size:1.22rem;font-weight:600;color:#fff;
  letter-spacing:-.018em;margin:0 0 .8rem;text-transform:none;
}
/* Label left, value right, one row per registration. Stacking each pair on
   its own line made the card tall enough to swallow the photograph behind
   it; this stays just as scannable at roughly half the height. */
.plate dl{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:baseline;gap:.1rem .9rem;margin:0;
  font-family:var(--ui);
  border-top:1px solid rgba(247,245,237,.12);padding-top:.9rem;
}
.plate dt{
  color:var(--on-dark-3);font-size:.65rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  padding-block:.5rem;
}
.plate dd{
  margin:0;color:#fff;font-weight:500;text-align:right;
  font-size:.82rem;letter-spacing:-.005em;
  font-variant-numeric:tabular-nums;word-break:break-word;
  padding-block:.5rem;
}
.plate dt:not(:first-of-type),.plate dd:not(:first-of-type){
  border-top:1px solid rgba(247,245,237,.08);
}
.plate-foot{
  margin:1.1rem 0 0;padding-top:1rem;border-top:1px solid rgba(247,245,237,.14);
  font-family:var(--ui);font-size:.79rem;line-height:1.6;color:var(--on-dark-3);
}
.plate-foot a{color:var(--accent);font-weight:500}
.plate-foot a:hover{color:#fff}

/* organic bone-coloured arc closing the hero */
.hero-curve{
  position:absolute;left:-6%;right:-6%;bottom:-2px;z-index:3;
  height:clamp(56px,7.5vw,120px);
  background:var(--bone);
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  pointer-events:none;
}

@media (max-width:980px){
  .hero{min-height:0;padding-block:calc(var(--head-h) + 2.75rem) 6.5rem}
  .hero-inner{grid-template-columns:1fr;gap:2.75rem}
  .hero h1{max-width:18ch}
}
@media (max-width:620px){
  .hero{padding-block:calc(var(--head-h) + 1.75rem) 5rem}
  .hero h1{font-size:clamp(2.1rem,8.6vw,2.8rem);max-width:none}
  .hero p{font-size:1rem}
  .plate{padding:1.25rem 1.2rem 1.2rem}
  .plate dt{font-size:.6rem;white-space:normal}
  .plate dd{font-size:.78rem}
  .hero-trust{font-size:.66rem;letter-spacing:.07em;gap:.4rem .7rem}
  .slide-dots button{width:30px}
  .slide-dots button[aria-selected=true]{width:42px}
}

/* ==========================================================================
   PHOTOGRAPH SLOTS
   Every slot is a finished editorial frame, not an empty box. Drop a real
   photograph in by setting --photo on the element:
     style="--photo:url('assets/img/programmes/environment/drive-01.jpg')"
   ========================================================================== */
.imgslot,.ph{
  position:relative;overflow:hidden;isolation:isolate;
  border:1px solid rgba(11,61,46,.14);border-radius:var(--r-lg);
  background:
    linear-gradient(150deg,var(--forest-700) 0%,var(--forest-900) 55%,var(--earth-900) 100%);
  display:grid;place-items:center;text-align:center;
  padding:2.5rem 1.75rem;min-height:230px;color:var(--on-dark-2);
}
/* The photograph is a real <img>, not a background. A relative url() inside a
   CSS custom property resolves against THIS stylesheet rather than the page,
   so `assets/img/...` silently became `assets/css/assets/img/...`. An <img>
   resolves against the document, and carries alt text and lazy loading too. */
.imgslot > .slot-img,.ph > .slot-img{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.2,.7,.3,1);
}
/* organic contour lines — reads as landscape, never as a broken image */
.imgslot::after,.ph::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 55% at 50% 118%,rgba(42,115,87,.5),transparent 62%),
    radial-gradient(ellipse 50% 40% at 18% 12%,rgba(244,123,32,.14),transparent 60%),
    repeating-linear-gradient(115deg,rgba(247,245,237,.035) 0 1px,transparent 1px 16px);
}
.imgslot > *,.ph > *{position:relative;z-index:2}
/* Scoped to the DIRECT caption span only. As `.imgslot span` these rules also
   captured every span nested inside the frame — the credential badge's icon
   and label included — and quietly broke them.
   Column flex so the pill sits on its own row with the caption beneath it. */
.imgslot > span,.ph > span{
  display:flex;flex-direction:column;align-items:center;gap:.9rem;
  font-family:var(--ui);font-size:.82rem;line-height:1.6;
  max-width:34ch;color:var(--on-dark-3);text-wrap:pretty;
}
.imgslot > span b,.ph > span b{
  align-self:center;
  font-family:var(--ui);font-size:.63rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);
  background:rgba(244,123,32,.12);border:1px solid rgba(244,123,32,.32);
  padding:.32rem .7rem;border-radius:999px;margin-bottom:0;white-space:nowrap;
}
/* Where a slot carries an aspect-ratio, its height must be derived from its
   width — never the reverse. A min-height taller than the ratio allows makes
   the ratio inflate the WIDTH instead, which bursts the box out of its grid
   column and over the neighbouring text. */
.imgslot--portrait,.imgslot--wide{min-height:0;width:100%}
.imgslot--portrait{aspect-ratio:4/5}
.imgslot--wide{aspect-ratio:16/10}
.hero .imgslot{border-color:rgba(247,245,237,.14);background:linear-gradient(150deg,var(--forest-600),var(--forest-900) 60%,var(--earth-900))}
/* the hero frame wins over the generic slot metrics */
.hero .hero-visual{border-radius:var(--r-xl);aspect-ratio:16/10;min-height:250px;padding:2rem 1.75rem}

/* The badge is anchored inside the frame. Its own styling lives with the hero
   rules above — the caption rules can no longer reach into it now that they
   are scoped to `.imgslot > span`. */
.hero-visual .float-badge{
  position:absolute;z-index:4;top:1.1rem;left:1.1rem;right:auto;bottom:auto;
  max-width:calc(100% - 2.2rem);
}
/* the icon disc centres its glyph — keep it a grid, never a block */
.float-badge .fb-mark{display:grid;place-items:center;line-height:0}
.float-badge .fb-mark svg{display:block;width:17px;height:17px}

@media (max-width:980px){.hero .hero-visual{aspect-ratio:16/9;min-height:0}}
@media (max-width:620px){
  .hero .hero-visual{aspect-ratio:4/3;border-radius:var(--r-lg);padding:1.5rem 1.25rem}
  .hero-visual .float-badge{top:.85rem;left:.85rem;padding:.6rem .85rem;gap:.6rem}
  .hero-visual .float-badge b{font-size:.98rem}
}

/* zoom on hover, only where the slot sits inside a link or card */
.work-card:hover .slot-img{transform:scale(1.06)}

/* ---------------------------------------- a slot carrying a real photograph
   `.has-photo` swaps the placeholder treatment for the picture: the caption
   goes, the dashed brief-note border becomes a hairline, and the heavy green
   contour overlay drops to a light scrim that only protects overlaid text. */
.imgslot.has-photo{
  background:var(--forest-900);
  border-style:solid;border-color:rgba(11,61,46,.14);
}
.imgslot.has-photo > span{display:none}
/* A photograph carries no scrim by default — it only gets one where text or a
   badge is laid over it, which is the work cards and the hero frame below. */
.imgslot.has-photo::after{background:none}
.work-media.has-photo::after{
  background:linear-gradient(180deg,transparent 45%,rgba(8,48,31,.55) 100%);
}
.hero .hero-visual.has-photo{border-color:rgba(247,245,237,.16)}
.hero .hero-visual.has-photo::after{
  background:linear-gradient(180deg,
    rgba(8,48,31,.42) 0%,rgba(11,61,46,.06) 42%,rgba(8,48,31,.38) 100%);
}

/* the plain focus-area cards get a photographic header band */
.prog.has-photo::before{display:none}
.prog > .prog-img{
  display:block;width:100%;height:172px;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.prog.has-photo{overflow:hidden}
.prog.has-photo:hover > .prog-img{transform:scale(1.05)}
.prog.has-photo > h3{margin-top:1.35rem}

/* ==========================================================================
   SECTION FURNITURE
   ========================================================================== */
section{padding-block:var(--band)}
.sec-title{max-width:62ch;margin-bottom:clamp(2.5rem,4.5vw,3.75rem)}
.sec-title h2{margin-bottom:.35em}
.sec-title p{color:var(--ash);font-size:clamp(1.02rem,1.4vw,1.15rem);max-width:58ch}
.sec-title--center{margin-inline:auto;text-align:center}
.sec-title--center .eyebrow{justify-content:center}
.sec-title--center p{margin-inline:auto}

.band-sage{background:var(--bone-2);border-block:1px solid var(--bone-3)}
.band-forest{background:var(--forest-900);color:var(--on-dark-2)}
.band-forest h2,.band-forest h3{color:#fff}
.band-forest p{color:var(--on-dark-2)}
.band-forest a{color:var(--accent)}
.band-forest a.btn-give,.band-forest a.btn-give:hover,.band-forest a.btn-solid,.band-forest a.btn-solid:hover{color:#fff}
.band-forest a.btn-line-light{color:#fff}
.band-forest a.btn-line-light:hover{color:var(--forest-900)}

/* organic arcs used to join bands without a hard rectangle edge */
.arc-b{border-end-start-radius:clamp(40px,6vw,110px);border-end-end-radius:clamp(40px,6vw,110px)}
.arc-t{border-start-start-radius:clamp(40px,6vw,110px);border-start-end-radius:clamp(40px,6vw,110px)}

/* ==========================================================================
   IMPACT — oversized figures
   ========================================================================== */
.impact{position:relative;padding-block:clamp(3.5rem,7vw,6rem)}
.stats{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--bone-3);
  border-block:1px solid var(--bone-3);
}
.stats li{background:var(--bone);padding:clamp(1.75rem,3.2vw,2.75rem) clamp(1rem,2vw,1.75rem)}
.stat-num{
  display:block;font-family:var(--display);
  font-size:clamp(3.1rem,6.4vw,5.6rem);line-height:.92;
  font-weight:500;letter-spacing:-.04em;color:var(--forest-900);
  font-variant-numeric:tabular-nums;
}
.stat-num .u{color:var(--accent);font-size:.52em;vertical-align:.32em;margin-left:.04em;letter-spacing:-.02em}
.stat-lab{
  display:block;margin-top:.9rem;font-family:var(--ui);
  font-size:.82rem;font-weight:500;line-height:1.5;color:var(--ash);max-width:22ch;
}
.stat-lab b{display:block;color:var(--forest-900);font-weight:600;font-size:.88rem;margin-bottom:.15rem}
@media (max-width:860px){.stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.stats{grid-template-columns:1fr}}

/* ==========================================================================
   SPLIT — editorial two-column with an overlapping frame
   ========================================================================== */
.split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2.5rem,6vw,5.5rem);align-items:center;
}
.split > *{min-width:0}
.split--flip .split-media{order:2}
.split-media{position:relative;min-width:0}
.split-media .imgslot{width:100%;min-height:0;aspect-ratio:16/11}
/* An offset outline peeking out behind the frame. A filled block here read as
   a stray beige rectangle rather than as depth. */
.split-media::before{
  content:"";position:absolute;z-index:-1;
  inset:2rem -1.6rem -1.6rem 2rem;
  border:1px solid rgba(11,61,46,.18);
  border-radius:var(--r-lg);
  background:transparent;
}
@media (max-width:900px){.split-media::before{display:none}}
.split-copy h2{margin-bottom:.3em}
@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:2.5rem}
  .split--flip .split-media{order:0}
  .split-media .imgslot{min-height:0;aspect-ratio:16/11}
}

/* ==========================================================================
   WORK / PROGRAMME CARDS
   ========================================================================== */
.prog-grid,.work-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:clamp(1.25rem,2.4vw,2rem);
}
.prog,.work-card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--bone-3);border-top:0;
  border-radius:var(--r-lg);overflow:hidden;
  padding:0;text-decoration:none;color:inherit;
  box-shadow:var(--sh-1);
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s ease,border-color .35s ease;
}
.prog:hover,.work-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--sh-3);
  border-color:rgba(11,61,46,.2);
}
.work-media{
  position:relative;overflow:hidden;aspect-ratio:16/10;
  border-radius:0;border:0;min-height:0;padding:0;
}
.work-media .tag{
  position:absolute;left:1rem;bottom:1rem;z-index:3;
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--ui);font-size:.66rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--on-dark);
  background:rgba(11,61,46,.55);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(247,245,237,.2);
  padding:.35rem .7rem;border-radius:999px;
}
.work-body{padding:1.6rem 1.65rem 1.75rem;display:flex;flex-direction:column;flex:1}
.prog h3,.work-body h3{color:var(--forest-900);margin-bottom:.15em;font-size:1.4rem}
.prog .prog-sub,.work-body .prog-sub{
  font-family:var(--ui);font-size:.74rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-deep);margin:0 0 .9rem;
}
.prog p,.work-body p{color:#48584E;font-size:.97rem;line-height:1.62;margin:0}
.prog .prog-go,.work-body .prog-go{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:auto;padding-top:1.4rem;
  font-family:var(--ui);font-size:.87rem;font-weight:600;color:var(--forest-900);
}
.prog .prog-go .arw,.work-body .prog-go .arw{transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.prog:hover .prog-go,.work-card:hover .prog-go{color:var(--accent-deep)}
.prog:hover .prog-go .arw,.work-card:hover .prog-go .arw{transform:translateX(5px)}
/* keep the accent identity from the original cards as a top hairline */
.prog{border-top:3px solid var(--accent,var(--forest-600))}
.band-sage .prog,.band-sage .work-card{background:#fff}

/* ------- the plain .prog cards (focus-areas.html) carry no media element,
   so they get a soft wash in their own programme hue instead, plus the same
   travelling arrow the homepage cards use. */
.prog{position:relative}
.prog::before{
  content:"";position:absolute;inset:0 0 auto;height:120px;pointer-events:none;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--accent,#1E5D48) 11%,transparent),transparent);
}
.prog > *{position:relative}
.prog > h3{margin-top:1.7rem}
.prog > h3,.prog > .prog-sub,.prog > p,.prog > .prog-go{padding-inline:1.65rem}
.prog > .prog-go{padding-bottom:1.75rem}
.prog > .prog-go::after{
  content:"\2192";display:inline-block;margin-left:.45rem;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.prog:hover > .prog-go::after{transform:translateX(5px)}

/* a section opening straight after the page header — or after the trust strip
   that sometimes sits between them — needs less air above it */
.page-head + section,
.trust + section{padding-top:clamp(3rem,5.5vw,4.5rem)}

/* ==========================================================================
   TRUST STRIP
   ========================================================================== */
/* The strip is pulled up into the hero's curve. .hero is positioned, so
   without its own stacking context this static block paints underneath it
   and the cards get their tops clipped by the dark band. */
.trust{
  position:relative;z-index:10;
  background:transparent;border:0;
  padding-block:0;margin-top:calc(-1 * clamp(1.5rem,3vw,3rem));
}
.trust ul{
  grid-template-columns:repeat(5,1fr);gap:1px;background:var(--bone-3);
  border:1px solid var(--bone-3);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-1);
}
.trust li{background:#fff;padding:1.35rem 1rem;transition:background-color .25s ease}
.trust li:hover{background:var(--accent-soft)}
.trust b{font-family:var(--display);font-size:1.15rem;font-weight:600;color:var(--forest-900)}
.trust small{font-family:var(--ui);font-size:.74rem;color:var(--ash);margin-top:.3rem}
@media (max-width:860px){.trust ul{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.trust ul{grid-template-columns:1fr}.trust li:last-child{grid-column:auto}}

/* ==========================================================================
   REASONS
   ========================================================================== */
.reasons{gap:clamp(1.75rem,3vw,2.75rem)}
.reasons li{border-top:0;padding-top:0;position:relative;padding-left:0}
.reasons li::before{
  content:"";display:block;width:34px;height:2px;background:var(--accent);margin-bottom:1.1rem;
}
.reasons h3{font-size:1.22rem;margin-bottom:.4em;color:var(--forest-900)}
.reasons p{font-size:.98rem;color:#48584E;margin:0}

/* ==========================================================================
   COMMITMENTS — targets, not claims
   ========================================================================== */
.commit{gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.commit li{
  border:1px solid rgba(247,245,237,.16);border-radius:var(--r-lg);
  background:rgba(247,245,237,.04);
  padding:1.75rem 1.4rem;text-align:left;
  transition:background-color .3s ease,border-color .3s ease;
}
.commit li:hover{background:rgba(247,245,237,.07);border-color:rgba(244,123,32,.35)}
.commit li{padding:0;overflow:hidden;display:flex;flex-direction:column}
.commit-media{display:block;position:relative;aspect-ratio:16/10;overflow:hidden}
/* Full-strength photograph, no tint. The caption sits below the image rather
   than on it, so nothing here needs a scrim to stay legible. */
.commit-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.commit li:hover .commit-media img{transform:scale(1.06)}
.commit .fig{
  font-family:var(--display);font-size:3.2rem;color:var(--accent);
  font-weight:500;letter-spacing:-.03em;
  padding:1.3rem 1.35rem 0;
}
.commit li > span:last-child{padding:0 1.35rem 1.5rem}
.commit span:last-child{font-family:var(--ui);font-size:.88rem;color:var(--on-dark-2);margin-top:.6rem;line-height:1.55}

/* ==========================================================================
   TRANSPARENCY — dark, document-led, progressive disclosure
   ========================================================================== */
.px-dark{
  position:relative;background:var(--forest-900);color:var(--on-dark-2);
  overflow:hidden;isolation:isolate;
}
.px-dark::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 50% 45% at 88% 8%,rgba(42,115,87,.4),transparent 62%),
    radial-gradient(ellipse 45% 45% at 4% 96%,rgba(244,123,32,.14),transparent 62%);
}
.px-dark > .wrap{position:relative;z-index:1}
.px-dark h2,.px-dark h3{color:#fff}
.px-dark .sec-title p{color:var(--on-dark-2)}

.doc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}
.doc{
  display:flex;flex-direction:column;gap:.55rem;
  padding:1.35rem 1.4rem;border-radius:var(--r);
  background:rgba(247,245,237,.05);
  border:1px solid rgba(247,245,237,.13);
  transition:background-color .3s ease,border-color .3s ease,transform .3s cubic-bezier(.2,.7,.3,1);
}
.doc:hover{background:rgba(247,245,237,.08);border-color:rgba(168,216,188,.35);transform:translateY(-3px)}
.doc-head{display:flex;align-items:center;gap:.5rem}
.verified{
  display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--ui);font-size:.62rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:#A8D8BC;
  background:rgba(42,115,87,.3);border:1px solid rgba(168,216,188,.3);
  padding:.24rem .55rem;border-radius:999px;flex-shrink:0;
}
.verified svg{width:11px;height:11px}
.doc dt,.doc-lab{
  font-family:var(--ui);font-size:.68rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--on-dark-3);
}
.doc-val{
  font-family:var(--ui);font-size:1rem;font-weight:500;color:#fff;
  letter-spacing:-.005em;word-break:break-word;font-variant-numeric:tabular-nums;
}
.doc-note{font-family:var(--ui);font-size:.8rem;color:var(--on-dark-3);margin:0}

/* progressive disclosure on a dark band */
.px-dark .disclose{
  background:rgba(247,245,237,.04);border:1px solid rgba(247,245,237,.13);
  border-radius:var(--r);margin:1.5rem 0 0;overflow:hidden;
}
.px-dark .disclose summary{
  color:#fff;font-family:var(--ui);font-size:.95rem;font-weight:600;padding:1.15rem 1.4rem;
  transition:background-color .25s ease;
}
.px-dark .disclose summary:hover{background:rgba(247,245,237,.05)}
.px-dark .disclose summary::after{color:var(--accent);right:1.4rem}
.px-dark .disclose > div{border-top:1px solid rgba(247,245,237,.11);padding:0 1.4rem 1.4rem}
.px-dark .disclose p{color:var(--on-dark-2)}
.px-dark .disclose a{color:var(--accent)}

/* ==========================================================================
   FOUNDER
   ========================================================================== */
.founder{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.pullquote{
  font-family:var(--display);font-size:clamp(1.45rem,2.6vw,2rem);line-height:1.32;
  color:var(--forest-900);border-left:2px solid var(--accent);
  padding-left:1.6rem;margin:2rem 0;font-weight:500;font-style:italic;letter-spacing:-.018em;
}
.pullquote .mr{font-family:var(--serif);font-size:.72em;color:var(--forest-600);font-style:normal;margin-top:.7rem}
.sign{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--bone-3)}
.sign b{font-family:var(--display);font-size:1.2rem;font-weight:600;color:var(--forest-900)}
.sign span{font-family:var(--ui);font-size:.86rem;color:var(--ash)}
@media (max-width:900px){.founder{grid-template-columns:1fr}}

/* ==========================================================================
   HELP CARDS
   ========================================================================== */
.help-grid{gap:clamp(1.25rem,2.4vw,1.75rem)}
.help{
  background:#fff;border:1px solid var(--bone-3);border-radius:var(--r-lg);
  padding:0;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--sh-1);
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s ease;
}
.help:hover{transform:translateY(-5px);box-shadow:var(--sh-3)}

/* photographic header, with the icon lifted to straddle its lower edge */
.help-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--forest-900)}
.help-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.help:hover .help-media img{transform:scale(1.05)}
.help-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 52%,rgba(11,61,46,.34) 100%);
}
.help-body{padding:0 1.85rem 2.05rem;display:flex;flex-direction:column;flex:1}
.help-ico{
  width:54px;height:54px;border-radius:var(--r);display:grid;place-items:center;
  background:#fff;border:1px solid var(--bone-3);color:var(--accent-deep);
  box-shadow:var(--sh-2);
  position:relative;z-index:2;margin:-27px 0 1.15rem;
}
.help-ico svg{width:22px;height:22px}
.help h3{margin-bottom:.4em;font-size:1.35rem}
.help p{font-size:.97rem;color:#48584E;flex:1}
.help .btn{align-self:flex-start;margin-top:1.4rem}

/* ==========================================================================
   EMOTIONAL CTA BAND
   ========================================================================== */
.cta-band{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--forest-900);color:var(--on-dark);
  padding-block:clamp(5rem,10vw,8.5rem);
  text-align:center;
}
.cta-band .cta-photo{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
  opacity:var(--photo-opacity,.3);
}
.cta-band::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(11,61,46,.94),rgba(8,48,31,.9)),
    radial-gradient(ellipse 60% 60% at 50% 0%,rgba(42,115,87,.5),transparent 65%),
    radial-gradient(ellipse 45% 50% at 88% 100%,rgba(244,123,32,.2),transparent 62%),
    repeating-linear-gradient(118deg,rgba(247,245,237,.03) 0 1px,transparent 1px 18px);
}
.cta-band > .wrap{position:relative;z-index:2}
.cta-band h2{
  color:#fff;font-size:clamp(2.2rem,5.2vw,4rem);max-width:17ch;
  margin-inline:auto;margin-bottom:.4em;text-wrap:balance;
}
.cta-band p{color:var(--on-dark-2);max-width:52ch;margin-inline:auto;font-size:1.1rem}
.cta-band .btn-row{justify-content:center;margin-top:2.5rem}
.cta-band .eyebrow{justify-content:center}

/* ==========================================================================
   DONATE STRIP
   ========================================================================== */
.give-strip{
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-deep) 100%);
  color:#fff;padding-block:clamp(3.25rem,6vw,4.75rem);
  position:relative;overflow:hidden;
}
.give-strip::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 55% 70% at 92% 10%,rgba(255,255,255,.16),transparent 60%);
}
.give-strip > .wrap{position:relative;z-index:1}
.give-strip h2{color:#fff;margin-bottom:.3em}
.give-strip p{color:rgba(255,255,255,.9)}
.amounts{gap:.6rem;margin:1.9rem 0}
.amt{
  font-family:var(--ui);font-size:.95rem;font-weight:600;
  border-radius:999px;padding:.62rem 1.25rem;border-width:1px;
  transition:transform .2s cubic-bezier(.2,.7,.3,1),background-color .2s ease,color .2s ease,border-color .2s ease;
}
.amt:hover{transform:translateY(-2px)}
.give-strip .amt{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.42);color:#fff}
.give-strip .amt:hover,.give-strip .amt[aria-pressed=true]{background:#fff;color:var(--accent-deep);border-color:#fff}
.give-strip .btn-solid{background:var(--forest-900);border-color:var(--forest-900);box-shadow:0 8px 24px rgba(8,48,31,.3)}

/* ==========================================================================
   NOTE + PENDING BOXES
   ========================================================================== */
.note{
  border-left:2px solid var(--forest-600);background:var(--bone-2);
  border-radius:0 var(--r) var(--r) 0;padding:1.3rem 1.5rem;
}
.pending{
  border:1px dashed rgba(244,123,32,.55);background:var(--accent-soft);
  border-radius:var(--r);padding:1.3rem 1.5rem;
}
.pending h4{
  font-family:var(--ui);font-size:.68rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--accent-deep);
}
.band-forest .pending,.px-dark .pending{background:var(--accent-soft)}

/* ==========================================================================
   PAGE HEAD (the other 22 pages)
   ========================================================================== */
.page-head{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--forest-900);color:var(--on-dark);
  padding-block:clamp(3.5rem,7vw,5.5rem) clamp(4rem,7vw,6rem);
}
/* optional photograph behind a page header */
.page-head .head-photo{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:center 42%;
  opacity:var(--photo-opacity,.3);
}
/* The readability veil takes the page's own hue, so the six programme pages
   keep their colour identity instead of all flattening to forest green.
   --head-tint is an "R,G,B" triple; it defaults to the forest ground. */
.page-head::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(96deg,
      rgba(var(--head-tint,11,61,46),.93) 0%,
      rgba(var(--head-tint,11,61,46),.83) 46%,
      rgba(var(--head-tint,11,61,46),.6) 100%),
    radial-gradient(ellipse 45% 50% at 5% 95%,rgba(244,123,32,.16),transparent 62%),
    repeating-linear-gradient(118deg,rgba(247,245,237,.03) 0 1px,transparent 1px 18px);
}
/* with no photograph the flat forest ground already shows through, so the
   heavy readability veil above is unnecessary */
.page-head:not(:has(.head-photo))::before{
  background:
    radial-gradient(ellipse 55% 60% at 85% 15%,rgba(42,115,87,.45),transparent 62%),
    radial-gradient(ellipse 45% 50% at 5% 95%,rgba(244,123,32,.16),transparent 62%),
    repeating-linear-gradient(118deg,rgba(247,245,237,.03) 0 1px,transparent 1px 18px);
}
.page-head > .wrap{position:relative;z-index:2}
.page-head h1{color:#fff;max-width:20ch;text-wrap:balance}
.page-head p{color:var(--on-dark-2);font-size:clamp(1.05rem,1.5vw,1.2rem);max-width:56ch}
.crumb{font-family:var(--ui);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-3)}
.crumb a{color:var(--on-dark-2);text-decoration:none}
.crumb a:hover{color:var(--accent)}

/* ==========================================================================
   FAQ / DISCLOSURE / FORMS / TABLES
   ========================================================================== */
.faq{border-top:1px solid var(--bone-3)}
.faq details{border-bottom:1px solid var(--bone-3)}
.faq summary{font-family:var(--display);font-size:clamp(1.12rem,1.7vw,1.32rem);font-weight:600;padding:1.35rem 3rem 1.35rem 0;transition:color .2s ease}
.faq summary:hover{color:var(--accent-deep)}
.faq summary::after{color:var(--accent);font-family:var(--ui);font-weight:300}

.disclose{border:1px solid var(--bone-3);border-radius:var(--r);background:#fff;overflow:hidden}
.disclose summary{font-family:var(--ui);padding:1.15rem 1.4rem}
.disclose summary::after{right:1.4rem;color:var(--accent)}

/* --------------------------------------------------------------- forms
   Treated as a considered object rather than a stack of boxes: an accent rule
   across the top of the card, micro-labels that respond to focus, custom
   select and checkbox controls, and a soft focus ring. */
.form{
  position:relative;overflow:hidden;
  background:#fff;border:1px solid var(--bone-3);border-radius:var(--r-lg);
  box-shadow:var(--sh-2);padding:clamp(1.75rem,3.2vw,2.75rem);
}
.form::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--forest-600) 65%,var(--forest-900));
}
.form h2{margin-bottom:1.6rem}

.field{position:relative;margin-bottom:1.35rem}
.field label{
  display:block;font-family:var(--ui);font-size:.7rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ash);
  margin-bottom:.5rem;transition:color .25s ease;
}
.field:focus-within label{color:var(--accent-deep)}

.field input,.field select,.field textarea{
  width:100%;font-family:var(--ui);font-size:1rem;color:var(--ink);
  border:1px solid var(--rule);border-radius:var(--r-sm);
  padding:.85rem 1rem;background:#FCFBF7;
  transition:border-color .25s ease,box-shadow .25s ease,background-color .25s ease;
}
.field input::placeholder,.field textarea::placeholder{color:#98A79D}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#BFC7B9}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--forest-600);outline:none;background:#fff;
  box-shadow:0 0 0 3px rgba(30,93,72,.14);
}
.field textarea{min-height:150px;resize:vertical;line-height:1.65}

/* custom select chevron — the native control looks cheap next to the rest */
.field select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:2.75rem;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%235F6E64%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m6 9 6 6 6-6%27/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  background-size:18px 18px;
}

/* custom checkbox with a tick that draws in */
.check{gap:.8rem;align-items:flex-start;font-size:.94rem;color:#3A4A41;margin-bottom:1.35rem}
.check input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  width:20px;height:20px;flex:0 0 20px;margin-top:.18rem;
  border:1.5px solid var(--rule);border-radius:5px;background:#FCFBF7;
  cursor:pointer;position:relative;
  transition:background-color .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.check input[type=checkbox]::after{
  content:"";position:absolute;left:6px;top:2px;
  width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0);transform-origin:center;
  transition:transform .22s cubic-bezier(.2,.7,.3,1);
}
.check input[type=checkbox]:hover{border-color:var(--forest-600)}
.check input[type=checkbox]:focus-visible{box-shadow:0 0 0 3px rgba(244,123,32,.28);outline:none}
.check input[type=checkbox]:checked{background:var(--forest-700);border-color:var(--forest-700)}
.check input[type=checkbox]:checked::after{transform:rotate(45deg) scale(1)}

.hint{font-family:var(--ui);font-size:.82rem;color:var(--ash);margin:.5rem 0 0;line-height:1.6}
.form .btn{margin-top:.4rem}

@media (prefers-reduced-motion:reduce){
  .check input[type=checkbox]::after{transition:none}
}
.form-msg{
  margin-top:1.1rem;border-left:2px solid var(--accent);background:var(--accent-soft);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:.9rem 1.1rem;font-size:.92rem;
}

/* ------------------------------------------------------------------ tables
   Key/value tables carry the contact and registration detail, so they are
   treated as a card rather than a spreadsheet: hairline rules, a micro-label
   in the header column, and no zebra striping. */
.tbl-wrap{
  background:#fff;border:1px solid var(--bone-3);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);overflow:hidden;margin-bottom:1.6rem;
}
/* the table's own bottom margin was being framed by the wrapper as an empty band */
.tbl-wrap > .tbl{margin:0}
.tbl{width:100%;border-collapse:collapse;background:#fff;font-family:var(--ui);font-size:.95rem}
.tbl caption{
  font-family:var(--display);font-size:clamp(1.2rem,1.9vw,1.45rem);font-weight:600;
  color:var(--forest-900);text-align:left;padding:1.35rem 1.5rem .35rem;
}
.tbl th,.tbl td{padding:1.05rem 1.5rem;border-bottom:1px solid var(--bone-2);vertical-align:top;text-align:left}
.tbl tbody tr:last-child > *{border-bottom:0}
.tbl tbody tr{transition:background-color .2s ease}
.tbl tbody tr:hover{background:var(--bone)}
.tbl tbody th{
  font-family:var(--ui);font-size:.7rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ash);
  width:32%;padding-top:1.2rem;
}
/* striping off — the hairlines carry the rhythm on their own */
.tbl tbody tr:nth-child(odd) td,.tbl tbody tr:nth-child(odd) th{background:transparent}
.tbl td{color:var(--ink);line-height:1.7}
.tbl td a{
  color:var(--forest-700);text-decoration:none;font-weight:500;
  border-bottom:1px solid rgba(30,93,72,.28);
  transition:color .2s ease,border-color .2s ease;
}
.tbl td a:hover{color:var(--accent-deep);border-bottom-color:var(--accent)}
.tbl thead th{
  background:var(--forest-900);color:#fff;font-family:var(--ui);
  font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;font-weight:600;
  border-bottom:0;padding-block:.9rem;
}

/* On a phone a two-column key/value table is unreadable, so stack it. Scoped
   with :has() so genuine multi-column data tables keep their columns. */
@supports selector(:has(*)){
  @media (max-width:620px){
    .tbl:not(:has(thead)),
    .tbl:not(:has(thead)) tbody,
    .tbl:not(:has(thead)) tr,
    .tbl:not(:has(thead)) th,
    .tbl:not(:has(thead)) td{display:block;width:auto}
    .tbl:not(:has(thead)) tbody tr{border-bottom:1px solid var(--bone-2);padding-block:.35rem}
    .tbl:not(:has(thead)) tbody tr:last-child{border-bottom:0}
    .tbl:not(:has(thead)) tbody th{padding:1rem 1.25rem .15rem;border-bottom:0;width:auto}
    .tbl:not(:has(thead)) tbody td{padding:0 1.25rem 1.05rem;border-bottom:0}
  }
}

.role{background:var(--accent-soft);border:1px solid rgba(244,123,32,.26);color:var(--accent-deep);
  font-family:var(--ui);font-size:.7rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  padding:.32rem .75rem;border-radius:999px}
.bio-mr{background:var(--bone-2);border-left:2px solid var(--forest-600);border-radius:0 var(--r) var(--r) 0;padding:1.2rem 1.4rem}
.post{border:1px solid var(--bone-3);border-radius:var(--r-lg);background:#fff;padding:1.75rem;box-shadow:var(--sh-1);transition:transform .3s ease,box-shadow .3s ease}
.post:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.ticks li::before{background:var(--accent);width:7px;height:7px;top:.68em}
.thread::before{background:var(--bone-3)}
.thread li::before{background:var(--forest-600);font-family:var(--ui)}
.spine{border-left:2px solid var(--bone-3)}
.profile{border-bottom:1px solid var(--bone-3)}
.gal-grid{gap:1.25rem}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-foot{
  position:relative;background:var(--forest-deep);color:var(--on-dark-3);
  font-family:var(--ui);font-size:.92rem;
  padding-block:clamp(4rem,7vw,5.5rem) 0;
  border-start-start-radius:clamp(30px,4vw,64px);
  border-start-end-radius:clamp(30px,4vw,64px);
  margin-top:calc(-1 * clamp(30px,4vw,64px));
  overflow:hidden;isolation:isolate;
}
.site-foot::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 55% 45% at 8% 0%,rgba(42,115,87,.24),transparent 62%),
             radial-gradient(ellipse 45% 40% at 95% 12%,rgba(244,123,32,.1),transparent 62%);
}
.site-foot > .wrap{position:relative;z-index:1}
.foot-grid{grid-template-columns:1.6fr 1fr 1.25fr 1.15fr;gap:clamp(2rem,4vw,3.25rem)}
.site-foot h3{
  font-family:var(--ui);font-size:.72rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--on-dark-3);margin-bottom:1.2rem;
}
.site-foot p{color:var(--on-dark-3);line-height:1.65}
.site-foot a{color:var(--on-dark-2);transition:color .2s ease}
.site-foot a:hover{color:var(--accent);text-decoration:none}
.site-foot li{margin-bottom:.6rem}
.foot-tag{font-family:var(--display);font-style:italic;color:#A8D8BC;font-size:1.12rem;line-height:1.4}
.foot-mr{font-family:var(--serif);font-style:normal;font-size:.9rem;color:var(--on-dark-3)}
/* Real brand glyphs, muted at rest so the row reads as one set, each picking
   up its own platform colour on hover. --brand is set per link in the markup. */
.social{gap:.55rem}
.social a{
  width:40px;height:40px;
  border:1px solid rgba(247,245,237,.2);
  background:rgba(247,245,237,.05);
  color:var(--on-dark-2);
  transition:transform .25s cubic-bezier(.2,.7,.3,1),background-color .25s ease,
             color .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.social a svg{width:17px;height:17px;display:block;fill:currentColor}
.social a:hover,.social a:focus-visible{
  background:var(--brand,var(--accent));
  border-color:var(--brand,var(--accent));
  color:#fff;transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(0,0,0,.3);
}
/* Instagram is a gradient mark, not a flat colour */
.social a[aria-label="Instagram"]:hover,
.social a[aria-label="Instagram"]:focus-visible{
  background:linear-gradient(45deg,#F58529,#DD2A7B 45%,#8134AF 75%,#515BD4);
  border-color:#DD2A7B;
}
.foot-sub input{border:1px solid rgba(247,245,237,.2);background:rgba(247,245,237,.06);border-radius:999px;padding:.7rem 1.1rem;font-family:var(--ui);color:#fff}
.foot-sub input:focus{outline:none;border-color:rgba(244,123,32,.6);box-shadow:0 0 0 3px rgba(244,123,32,.16)}
.foot-sub button{border-radius:999px;padding:.7rem 1.35rem;background:var(--accent);font-family:var(--ui);transition:background-color .2s ease,transform .2s ease}
.foot-sub button:hover{background:var(--accent-deep);transform:translateY(-2px)}
.foot-legal{
  border-top:1px solid rgba(247,245,237,.1);margin-top:clamp(2.5rem,5vw,3.75rem);
  padding-block:1.9rem;font-size:.78rem;color:#7C9488;
}
.foot-legal p{color:#7C9488}
.foot-legal .regs{gap:.35rem .9rem;font-variant-numeric:tabular-nums}
.foot-legal .regs span{
  background:rgba(247,245,237,.05);border:1px solid rgba(247,245,237,.09);
  padding:.22rem .6rem;border-radius:999px;font-size:.72rem;
  /* these chips were nowrap, and "Registration No. 479688, ROC Mumbai II" is
     wider than a phone — it forced a horizontal scroll on the whole document */
  white-space:normal;overflow-wrap:anywhere;
}

/* registration numbers are long unbroken strings; let them break rather than
   push a container wider than the screen */
.doc-val,.plate dd,.trust small,.tbl td{overflow-wrap:anywhere}
.foot-policies{gap:.4rem 1.25rem;margin-top:.9rem}
/* the white lockup carries the footer's first column */
.foot-logo{
  display:block;width:min(255px,74%);height:auto;
  margin:0 0 1.35rem;
}
@media (max-width:620px){.foot-logo{width:min(215px,66%)}}

.built{margin-top:1.2rem;color:#8FA294;letter-spacing:.01em;text-align:right}
@media (max-width:620px){.built{text-align:left}}
/* The generic .site-foot a:hover strips underlines, so the credit link states
   are set explicitly here to keep the red rule through hover and focus. */
.built .imp{
  color:#fff;font-weight:600;
  text-decoration:underline;
  text-decoration-color:#E23B2E;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  transition:color .2s ease,text-decoration-color .2s ease;
}
.built a.imp:hover,.built a.imp:focus-visible{
  color:#fff;
  text-decoration:underline;
  text-decoration-color:#FF5C4A;
  text-decoration-thickness:2px;
}

/* ------------------------------------------------------------- whatsapp */
.wa{
  width:54px;height:54px;right:22px;bottom:22px;
  background:#1F9D55;box-shadow:0 10px 28px rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.18);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),background-color .3s ease;
}
.wa:hover{transform:translateY(-4px) scale(1.05);background:#17864A}

/* The floating WhatsApp button is only offered between the opening band and
   the footer — both of those already carry the contact details, so over them
   it is redundant. The hidden state is applied only once JS confirms it can
   manage the toggle, so with no JS the button simply stays put. */
.wa-auto .wa{
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(14px) scale(.86);
  transition:opacity .3s ease,transform .35s cubic-bezier(.2,.7,.3,1),visibility .3s;
}
.wa-auto .wa.is-on{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateY(0) scale(1);
}
.wa-auto .wa.is-on:hover{transform:translateY(-4px) scale(1.05)}
@media (prefers-reduced-motion:reduce){
  .wa-auto .wa{transition:opacity .2s ease,visibility .2s;transform:none}
  .wa-auto .wa.is-on{transform:none}
}

/* ==========================================================================
   BUTTON MOTION
   Restrained by design: a lift, a directional wipe on outline buttons and a
   single slow sheen across filled ones. Everything is transform/opacity only,
   so it stays on the compositor and never janks.
   The layers sit on ::before / ::after at z-index:-1 — negative-index children
   paint above the element's own background but below its text, so the label
   never needs a wrapper element.
   ========================================================================== */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn:active{transform:translateY(0) scale(.985)}

/* --- outline buttons: the fill wipes in from the left, out to the right --- */
.btn-line::before,.btn-line-light::before{
  content:"";position:absolute;inset:0;z-index:-1;
  transform:scaleX(0);transform-origin:right center;
  transition:transform .45s cubic-bezier(.65,0,.35,1);
}
.btn-line::before{background:var(--forest-900)}
.btn-line-light::before{background:var(--on-dark)}
.btn-line:hover::before,.btn-line-light:hover::before,
.btn-line:focus-visible::before,.btn-line-light:focus-visible::before{
  transform:scaleX(1);transform-origin:left center;
}
/* the wipe now supplies the fill, so the base colour must stay put */
.btn-line:hover,.btn-line:focus-visible{background:transparent;border-color:var(--forest-900);color:#fff}
.btn-line-light:hover,.btn-line-light:focus-visible{background:rgba(255,255,255,.06);border-color:var(--on-dark);color:var(--forest-900)}

/* --- filled buttons: one slow pass of light --- */
.btn-give::after,.btn-solid::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent 22%,rgba(255,255,255,.26) 50%,transparent 78%);
  transform:translateX(-115%);
  transition:transform .75s cubic-bezier(.3,.7,.3,1);
}
.btn-give:hover::after,.btn-solid:hover::after,
.btn-give:focus-visible::after,.btn-solid:focus-visible::after{transform:translateX(115%)}

/* --- arrows travel on any button that carries one --- */
.btn .arw{display:inline-block;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.btn:hover .arw{transform:translateX(4px)}

/* --- donation amounts: press feedback, and a pop when one is chosen --- */
.amt{position:relative;overflow:hidden;isolation:isolate}
.amt:active{transform:translateY(0) scale(.96)}
.amt[aria-pressed=true]{animation:amtPop .34s cubic-bezier(.2,.7,.3,1)}
@keyframes amtPop{0%{transform:scale(.94)}58%{transform:scale(1.045)}100%{transform:scale(1)}}

/* --- the subscribe button matches the system --- */
.foot-sub button{position:relative;overflow:hidden;isolation:isolate}
.foot-sub button:active{transform:translateY(0) scale(.97)}

/* --- programme / work cards lift their whole surface, arrow included --- */
.work-card:active,.prog:active,.help:active{transform:translateY(-2px)}

@media (prefers-reduced-motion:reduce){
  .btn::before,.btn::after,.amt::before{display:none}
  .btn:active,.amt:active,.foot-sub button:active,
  .work-card:active,.prog:active,.help:active{transform:none}
  .amt[aria-pressed=true]{animation:none}
  .btn-line:hover,.btn-line:focus-visible{background:var(--forest-900)}
  .btn-line-light:hover,.btn-line-light:focus-visible{background:var(--on-dark)}
}

/* ==========================================================================
   GRID OVERFLOW SAFETY
   `1fr` is shorthand for `minmax(auto,1fr)`, and that `auto` minimum resolves
   to min-content — so a track holding anything wide grows past its container
   rather than wrapping, and takes the whole document with it. Pinning the
   minimum to 0 is what actually keeps these layouts inside the screen.
   The auto-fit grids get `min(Xpx,100%)` for the same reason: a fixed 320px
   floor is wider than the content column on a small phone.
   ========================================================================== */
@media (max-width:980px){
  .hero-inner{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .two-col,.founder,.profile,.split{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .field-row{grid-template-columns:minmax(0,1fr)}
  .foot-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1000px){
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.prog-grid,.work-grid{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.help-grid{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.doc-grid{grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.reasons{grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr))}
.commit{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.gal-grid{grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
@media (max-width:860px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.stats{grid-template-columns:minmax(0,1fr)}}

/* ==========================================================================
   SCROLL REVEAL
   The hidden state only applies once JS confirms it can reveal, so the page
   is fully readable if the script never runs.
   ========================================================================== */
.reveal-on [data-reveal]{
  opacity:0;transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1);
  transition-delay:var(--d,0ms);
}
.reveal-on [data-reveal].is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .reveal-on [data-reveal]{opacity:1;transform:none;transition:none}
  .leaf,.hero-photo{animation:none!important}
  .btn:hover,.prog:hover,.work-card:hover,.help:hover,.post:hover,
  .social a:hover,.wa:hover,.doc:hover{transform:none}
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print{
  body::before,.hero-bg,.leaf,.hero-curve{display:none}
  .hero,.page-head,.px-dark,.cta-band,.site-foot{background:#fff!important;color:#000!important}
  .hero h1,.page-head h1,.px-dark h2,.cta-band h2{color:#000!important}
}