@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@400;500;600;700&family=Noto+Sans+Devanagari:wght@400;500;600;700&family=Noto+Serif+Devanagari:wght@400;600;700&display=swap');

/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root{
  /* color */
  --orange:#F36F0B;
  --orange-dark:#C84E05;
  --orange-burnt:#A94308;
  --ink:#171717;
  --charcoal:#242424;
  --warm-gray:#6B6761;
  --warm-white:#F3F1ED;
  --white:#FFFFFF;
  --border:#E7E3DB;

  /* asset placeholder */
  --asset-bg:#F3F3F1;
  --asset-border:#E8E7E3;
  --asset-text:#C7C5C0;
  --asset-shimmer:rgba(255,255,255,.7);
  --asset-dark-bg:#202020;
  --asset-dark-border:#303030;
  --asset-dark-text:#555555;
  --asset-dark-shimmer:rgba(255,255,255,.04);

  /* type */
  --font-display:'DM Serif Display',Georgia,serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --font-hi:'Noto Sans Devanagari','Inter',sans-serif;

  /* radius */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;

  /* layout */
  --container-width:1240px;
  --section-spacing:120px;
  --section-spacing-mobile:72px;
}

/* =========================================================
   RESET
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
body{margin:0;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;background:none;border:none;}
ul{margin:0;padding:0;list-style:none;}
address{font-style:normal;}

body{
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:400;
  line-height:1.05;
  margin:0;
  text-wrap:balance;
}

:focus-visible{outline:3px solid var(--orange);outline-offset:2px;}
.skip-link{
  position:absolute;left:16px;top:-60px;z-index:200;
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:var(--radius-sm);
  transition:top .2s ease;font-size:14px;font-weight:600;
}
.skip-link:focus{top:16px;}

.hi{font-family:var(--font-hi);}

/* Devanagari pages (html[lang="hi"], exact match) get a Devanagari serif for
   display headings — DM Serif Display has no Devanagari glyph coverage, so
   without this every h1/h2/h3 on the Hindi page would silently fall back to
   a generic system serif. This must be an EXACT attribute match, not
   :lang(hi) — CSS :lang() matching is prefix-based on hyphenated subtags, so
   :lang(hi) also matches "hi-Latn" (Hinglish) and would wrongly force
   Devanagari fonts onto that page's Latin-script text. */
html[lang="hi"] h1,html[lang="hi"] h2,html[lang="hi"] h3{
  font-family:'Noto Serif Devanagari',var(--font-hi),serif;
  font-weight:600;
}
html[lang="hi"] body{font-family:var(--font-hi),var(--font-body);}
/* Devanagari glyphs carry the shirorekha and upper matras above the em box,
   so the tight 1.05 line-height tuned for the Latin serif makes the first
   line collide with whatever sits above it (the eyebrow). Give Hindi
   headings room and a real gap under the eyebrow. */
html[lang="hi"] h1,html[lang="hi"] h2,html[lang="hi"] h3{line-height:1.3;}
html[lang="hi"] .eyebrow{margin-bottom:14px;}
html[lang="hi"] .hero-copy h1{letter-spacing:0;}

.eyebrow{
  font-family:var(--font-body);
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--orange);
  display:block;
}

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

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

/* =========================================================
   REVEAL / MOTION
   ========================================================= */
/* Story choreography. Each section is a "chapter": the container fades in,
   then its content is narrated in reading order — eyebrow, heading, body,
   action — with a short cascade, and photographs settle from a slight zoom.
   One easing curve everywhere so the whole page feels like one hand cut it.
   All of it collapses to a plain static page under prefers-reduced-motion. */
:root{
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-cine:cubic-bezier(.16,1,.3,1);
}

@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transition:opacity .6s var(--ease-out);}
  .reveal.in{opacity:1;}

  /* narrated children */
  .reveal .eyebrow,
  .reveal h1,.reveal h2,.reveal h3,
  .reveal p,.reveal address,
  .reveal .pull-quote,.reveal .sequence,
  .reveal .hero-cta,.reveal .contact-actions,.reveal > .contribute-inner > .btn,
  .reveal .pub-row,.reveal .impact-num,.reveal .impact-label{
    opacity:0;transform:translateY(26px);
    transition:opacity .9s var(--ease-out),transform .9s var(--ease-cine);
  }
  .reveal.in .eyebrow{opacity:1;transform:none;transition-delay:.05s;}
  .reveal.in h1,.reveal.in h2,.reveal.in h3{opacity:1;transform:none;transition-delay:.15s;}
  .reveal.in p,.reveal.in address,.reveal.in .pub-row{opacity:1;transform:none;transition-delay:.28s;}
  .reveal.in .pull-quote,.reveal.in .sequence{opacity:1;transform:none;transition-delay:.4s;}
  .reveal.in .hero-cta,.reveal.in .contact-actions,.reveal.in > .contribute-inner > .btn{opacity:1;transform:none;transition-delay:.5s;}
  .reveal.in .impact-num,.reveal.in .impact-label{opacity:1;transform:none;}

  /* card grids cascade left→right */
  .reveal .m-card,.reveal .book,.reveal .way,.reveal .v-card{
    opacity:0;transform:translateY(34px);
    transition:opacity .9s var(--ease-out),transform 1s var(--ease-cine);
  }
  .reveal.in .m-card,.reveal.in .book,.reveal.in .way,.reveal.in .v-card{opacity:1;transform:none;}
  .reveal.in :is(.m-card,.book,.way,.v-card):nth-child(1){transition-delay:.15s}
  .reveal.in :is(.m-card,.book,.way,.v-card):nth-child(2){transition-delay:.27s}
  .reveal.in :is(.m-card,.book,.way,.v-card):nth-child(3){transition-delay:.39s}
  .reveal.in :is(.m-card,.book,.way,.v-card):nth-child(4){transition-delay:.51s}
  .reveal.in :is(.m-card,.book,.way,.v-card):nth-child(5){transition-delay:.63s}
  .reveal.in :is(.m-card,.book,.way,.v-card):nth-child(6){transition-delay:.75s}

  /* headings inside cards inherit the card's motion, not their own */
  .reveal .m-card h3,.reveal .m-card p,.reveal .way h3,.reveal .way p,.reveal .v-card h3,.reveal .v-card p{
    opacity:1;transform:none;transition:none;
  }

  /* photographs settle from a slight zoom — the "cinematic settle" */
  .reveal .asset img{transform:scale(1.08);transition:transform 1.6s var(--ease-cine);}
  .reveal.in .asset img{transform:scale(1);}
  .m-card .asset img,.v-card .asset img{transition-duration:1.8s;}

  /* the hero photograph wipes up from the bottom as the page opens */
  .hero-media .asset{clip-path:inset(100% 0 0 0 round var(--radius-lg));transition:clip-path 1.2s var(--ease-cine) .2s;}
  .hero-media.in .asset{clip-path:inset(0 0 0 0 round var(--radius-lg));}
  .hero-media .asset-frame{opacity:0;transform:translate(-10px,-10px);transition:opacity .8s var(--ease-out) .9s,transform .8s var(--ease-cine) .9s;}
  .hero-media.in .asset-frame{opacity:1;transform:none;}
  .hero-caption{opacity:0;transition:opacity .6s var(--ease-out) 1.1s;}
  .hero-media.in .hero-caption{opacity:1;}

  /* Full-bleed feature images are oversized so the parallax never shows an
     edge. The drift itself is a CSS view-timeline — driving it from JS would
     mean writing element.style, which this site's CSP blocks. Browsers
     without scroll-timeline support just get the still, oversized image. */
  .vf .asset img,.final-cta .asset img{transform:scale(1.18);will-change:transform;}
  .vf.in .asset img,.final-cta.in .asset img{transform:scale(1.18);}
  @supports (animation-timeline: view()){
    .vf .asset img,.final-cta .asset img{
      animation-name:parallax-drift;
      animation-duration:auto;
      animation-timing-function:linear;
      animation-fill-mode:both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
    @keyframes parallax-drift{
      from{transform:translateY(5%) scale(1.18);}
      to{transform:translateY(-5%) scale(1.18);}
    }
  }

  /* pull-quote's orange rule draws itself */
  .pull-quote{border-left-color:transparent;}
  .pull-quote::before{
    content:"";position:absolute;left:-2px;top:0;width:2px;height:0;background:var(--orange);
    transition:height .8s var(--ease-cine) .55s;
  }
  .reveal.in .pull-quote::before{height:100%;}

  /* subtle lift on hover for interactive cards */
  .m-card,.book,.v-card{transition:transform .5s var(--ease-cine),box-shadow .5s var(--ease-out),opacity .9s var(--ease-out);}
  .m-card:hover,.book:hover,.v-card:hover{transform:translateY(-6px);}
  .book:hover .asset,.v-card:hover .asset{box-shadow:0 22px 40px -24px rgba(23,23,23,.35);}
}

@media (prefers-reduced-motion:reduce){
  .reveal,.reveal *{opacity:1 !important;transform:none !important;transition:none !important;clip-path:none !important;}
}

/* ---------- story chrome (injected by js/main.js) ---------- */
.story-progress{
  position:fixed;top:0;left:0;height:3px;width:100%;z-index:60;pointer-events:none;
  transform-origin:0 50%;transform:scaleX(0);background:var(--orange);
}
/* Driven by the document's own scroll progress — no JS style writes, so it
   survives the CSP. Hidden entirely where scroll timelines aren't supported,
   rather than sitting there as a dead zero-width bar. */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion:no-preference){
    .story-progress{
      /* longhands on purpose: the `animation` shorthand resets
         animation-duration to 0s, which stalls a scroll-driven timeline */
      animation-name:story-progress-grow;
      animation-duration:auto;
      animation-timing-function:linear;
      animation-fill-mode:both;
      animation-timeline:scroll(root block);
    }
    @keyframes story-progress-grow{ from{transform:scaleX(0);} to{transform:scaleX(1);} }
  }
}
.story-nav{
  position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:55;
  display:flex;flex-direction:column;gap:14px;
}
.story-nav a{
  display:block;width:8px;height:8px;border-radius:50%;
  background:var(--border);transition:background .3s var(--ease-out),transform .3s var(--ease-cine);
  position:relative;
}
.story-nav a::after{
  content:attr(data-label);position:absolute;right:20px;top:50%;transform:translateY(-50%) translateX(6px);
  white-space:nowrap;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--warm-gray);opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease-out),transform .25s var(--ease-cine);
}
.story-nav a:hover::after,.story-nav a[aria-current="true"]::after{opacity:1;transform:translateY(-50%) translateX(0);}
.story-nav a:hover,.story-nav a[aria-current="true"]{background:var(--orange);transform:scale(1.4);}
.story-nav.on-dark a{background:rgba(255,255,255,.28);}
.story-nav.on-dark a::after{color:rgba(255,255,255,.7);}
.story-nav.on-dark a:hover,.story-nav.on-dark a[aria-current="true"]{background:var(--orange);}
@media (max-width:980px){ .story-nav{display:none;} }

/* =========================================================
   IMAGE PLACEHOLDER — "Waiting for Assets"
   Structural component: swap the inner markup for a real <img>
   with the same class + aspect-ratio when an asset is approved.
   ========================================================= */
.asset{
  position:relative;
  background:var(--asset-bg);
  border:1px solid var(--asset-border);
  border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;
  /* clip, not hidden: `overflow:hidden` makes an element a scroll container,
     which stops the CSS view() timeline used for the parallax from binding to
     the page scroller. `clip` clips identically (border-radius included)
     without creating one. */
  overflow:clip;
  isolation:isolate;
  width:100%;
}
.asset.radius-lg{border-radius:var(--radius-lg);}
.asset-label{
  font-family:var(--font-body);
  font-size:13px;
  font-weight:500;
  color:var(--asset-text);
  letter-spacing:.01em;
  position:relative;z-index:1;
  user-select:none;
}
@media (prefers-reduced-motion:no-preference){
  .asset::before{
    content:"";
    position:absolute;inset:0;
    background:linear-gradient(100deg, transparent 0%, var(--asset-shimmer) 50%, transparent 100%);
    background-size:200% 100%;
    animation:shimmer 2.3s linear infinite;
    opacity:.55;
  }
}
@keyframes shimmer{
  0%{background-position:150% 0;}
  100%{background-position:-50% 0;}
}
.asset.dark{background:var(--asset-dark-bg);border-color:var(--asset-dark-border);}
.asset.dark .asset-label{color:var(--asset-dark-text);}
.asset.dark::before{background:linear-gradient(100deg, transparent 0%, var(--asset-dark-shimmer) 50%, transparent 100%);background-size:200% 100%;}

/* A real photograph has landed in this slot — same container (aspect-ratio,
   radius, position in the layout) as the placeholder it replaced, so nothing
   else about the section needed to change per the asset-replacement principle. */
.asset.has-photo{background:none;border-color:transparent;}
.asset.has-photo::before{content:none;}
.asset img{width:100%;height:100%;object-fit:cover;display:block;}

/* Crop positions for the temporary reused photographs. These live here, not
   in a style="" attribute — the site's CSP omits 'unsafe-inline' for
   style-src, so inline styles are silently dropped in production (they work
   on a local server, which sends no CSP headers). Remove these along with
   the stand-in photos when real images arrive via the CMS. */
.crop-env-card{object-position:14% 45%;}
.crop-env-wide{object-position:20% 60%;}
.crop-env-detail{object-position:85% 45%;}
.crop-media{object-position:50% 30%;}
.crop-contact{object-position:50% 0%;}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  height:48px;padding:0 22px;border-radius:var(--radius-sm);
  font-size:14px;font-weight:600;letter-spacing:.02em;
  border:1px solid transparent;cursor:pointer;
  transition:transform .18s ease, background .2s ease, border-color .2s ease, color .2s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--orange);color:#fff;}
.btn-primary:hover{background:var(--orange-dark);}
.btn-outline-dark{background:transparent;border-color:var(--ink);color:var(--ink);}
.btn-outline-dark:hover{border-color:var(--orange);color:var(--orange-dark);}
.btn-outline-light{background:transparent;border-color:rgba(255,255,255,.55);color:#fff;}
.btn-outline-light:hover{border-color:#fff;}
.btn-dark{background:var(--ink);color:#fff;}
.btn-dark:hover{background:var(--charcoal);}
.arrow{transition:transform .2s ease;display:inline-block;}
.btn:hover .arrow, a:hover .arrow{transform:translateX(3px);}

/* =========================================================
   NAV
   ========================================================= */
.site-nav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.site-nav.scrolled{border-bottom-color:var(--border);box-shadow:0 1px 24px rgba(0,0,0,.04);}
.nav-inner{
  max-width:var(--container-width);margin:0 auto;padding:18px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.logo{display:flex;align-items:center;gap:10px;}
.logo-mark{
  width:34px;height:34px;border-radius:50%;flex:none;
  background:conic-gradient(from 210deg, var(--orange), var(--orange-dark), var(--orange));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:var(--font-display);font-size:17px;
}
.logo-text{display:flex;flex-direction:column;line-height:1.15;}
.logo-text .hi{font-size:16px;font-weight:600;}
.logo-text .en{font-size:10px;letter-spacing:.16em;color:var(--warm-gray);font-weight:600;}

.nav-links{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:500;}
.nav-links a{position:relative;color:var(--ink);padding:4px 0;white-space:nowrap;}
/* keep the single-line nav from crowding between the 980px breakpoint and
   full desktop width, now that items can no longer wrap */
@media (max-width:1320px){ .nav-links{gap:18px;font-size:13.5px;} .nav-right{gap:12px;} }
.nav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--orange);
  transition:right .25s ease;
}
.nav-links a:hover::after,.nav-links a[aria-current="true"]::after{right:0;}
.nav-links a[aria-current="true"]{color:var(--orange-dark);}
.nav-right{display:flex;align-items:center;gap:16px;}

.lang-switch{display:flex;align-items:center;gap:2px;font-size:13px;font-weight:600;}
.lang-switch a{padding:6px 9px;border-radius:6px;color:var(--warm-gray);}
.lang-switch a[aria-current="true"]{color:var(--ink);background:var(--warm-white);}
.lang-switch a:hover{color:var(--orange-dark);}
.lang-switch span{color:var(--border);}

.nav-toggle{display:none;padding:6px;cursor:pointer;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;transition:transform .2s ease, opacity .2s ease;}

.nav-drawer{
  position:fixed;inset:0;z-index:100;
  visibility:hidden;
}
.nav-drawer[data-open="true"]{visibility:visible;}
/* background scroll lock while the drawer is open — a class, because CSP
   blocks style attributes set from script */
body.nav-open{overflow:hidden;}
.nav-drawer-scrim{
  position:absolute;inset:0;background:rgba(23,23,23,.5);
  opacity:0;transition:opacity .25s ease;
}
.nav-drawer[data-open="true"] .nav-drawer-scrim{opacity:1;}
.nav-drawer-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(320px,84vw);
  background:var(--white);padding:24px;
  transform:translateX(100%);transition:transform .28s ease;
  display:flex;flex-direction:column;gap:28px;
}
.nav-drawer[data-open="true"] .nav-drawer-panel{transform:translateX(0);}
.nav-drawer-head{display:flex;align-items:center;justify-content:space-between;}
.nav-drawer-close{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;}
.nav-drawer-close:hover{background:var(--warm-white);}
.nav-drawer-links{display:flex;flex-direction:column;gap:2px;}
.nav-drawer-links a{display:block;padding:14px 4px;font-size:17px;font-weight:500;border-bottom:1px solid var(--border);}

@media (prefers-reduced-motion:reduce){
  .nav-drawer-panel,.nav-drawer-scrim{transition:none;}
}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;background:var(--white);padding-bottom:0;}
.hero-grid{
  max-width:var(--container-width);margin:0 auto;padding:88px 32px 0;
  display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center;
}
.hero-copy h1{font-size:clamp(38px,5.2vw,72px);letter-spacing:-.01em;max-width:640px;}
/* The orange emphasis always starts its own line — per the design system's
   headline treatment. Without this the colour break lands mid-line
   ("...dedicated to serving") and the hero reads ragged. */
.hero-copy h1 .accent{display:block;}
.hero-copy h1 .accent{color:var(--orange);}
.hero-copy p{margin:26px 0 0;font-size:18px;line-height:1.65;color:var(--warm-gray);max-width:480px;}
.hero-hi{font-size:13px;color:var(--warm-gray);margin-top:10px;line-height:1.7;max-width:480px;}
.hero-cta{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap;}
.hero-media{position:relative;}
.hero-media .asset{aspect-ratio:16/9;}
.hero-media .asset-frame{
  position:absolute;inset:18px -18px -18px 18px;
  border:1.5px solid var(--orange);border-radius:var(--radius-lg);z-index:-1;
}
.hero-caption{margin-top:14px;font-size:12px;color:var(--warm-gray);text-align:right;}

/* =========================================================
   IMPACT STRIP
   ========================================================= */
.impact{border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-top:80px;}
.impact-inner{max-width:var(--container-width);margin:0 auto;padding:44px 32px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.impact-num{font-family:var(--font-display);font-size:clamp(28px,3.4vw,42px);color:var(--ink);font-variant-numeric:tabular-nums;}
.impact-label{font-size:13px;color:var(--warm-gray);margin-top:4px;}
.impact-note{max-width:var(--container-width);margin:0 auto;padding:0 32px 28px;font-size:12px;color:var(--warm-gray);}

/* =========================================================
   SECTION SCAFFOLDING
   ========================================================= */
.section{padding:var(--section-spacing) 0;}
.section-alt{background:var(--warm-white);}
.section-dark{background:var(--ink);color:#fff;}
.section-dark .eyebrow{color:var(--orange);}
.section-head{max-width:640px;margin-bottom:52px;}
.section-head h2{font-size:clamp(30px,3.6vw,46px);margin-top:14px;}

/* =========================================================
   STORY
   ========================================================= */
.story-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:center;}
.story-media .asset{aspect-ratio:4/5;}
.story-copy h2{font-size:clamp(30px,3.6vw,46px);margin-top:14px;max-width:520px;}
.story-copy p{font-size:17px;line-height:1.7;color:var(--warm-gray);margin-top:20px;max-width:640px;}
.pull-quote{
  margin:32px 0 0;padding-left:26px;border-left:2px solid var(--orange);position:relative;
  font-family:var(--font-display);font-size:23px;line-height:1.42;color:var(--ink);max-width:600px;
}
.pull-quote .qmark{color:var(--orange);font-size:40px;line-height:0;position:relative;top:12px;margin-right:2px;}
.pull-quote cite{display:block;font-family:var(--font-body);font-size:13px;font-style:normal;color:var(--warm-gray);margin-top:14px;font-weight:500;}

/* =========================================================
   MISSION
   ========================================================= */
.mission-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.m-card{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:flex-end;border:1px solid var(--border);}
.m-card .asset{position:absolute;inset:0;border-radius:0;}
.m-card::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(0deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.4) 48%, rgba(0,0,0,.08) 78%);}
.m-card-body{position:relative;z-index:1;padding:26px;color:#fff;}
.m-icon{width:36px;height:36px;border-radius:50%;background:rgba(243,111,11,.18);border:1px solid var(--orange);display:flex;align-items:center;justify-content:center;margin-bottom:14px;font-size:16px;}
.m-card-body h3{font-size:22px;color:#fff;}
.m-card-body p{font-size:14px;color:rgba(255,255,255,.75);margin:10px 0 0;line-height:1.6;}

/* =========================================================
   VANARBHOJ FEATURE
   ========================================================= */
.vf{position:relative;background:var(--charcoal);color:#fff;overflow:clip;padding:0;}
.vf .asset{position:absolute;inset:0;border-radius:0;}
.vf-scrim{position:absolute;inset:0;z-index:0;background:linear-gradient(100deg, rgba(23,23,23,.94) 0%, rgba(23,23,23,.8) 42%, rgba(23,23,23,.4) 100%);}
.vf-inner{position:relative;z-index:1;max-width:var(--container-width);margin:0 auto;padding:140px 32px;}
.vf-content{max-width:560px;}
.vf-content h2{font-size:clamp(32px,4vw,52px);margin-top:16px;color:#fff;}
.vf-content p{font-size:17px;line-height:1.7;color:rgba(255,255,255,.7);margin-top:20px;max-width:480px;}
.vf-content .btn{margin-top:30px;}

/* =========================================================
   RESCUE (every life matters)
   ========================================================= */
.rescue-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;}
.rescue-media .asset{aspect-ratio:4/5;}
.rescue-copy h2{font-size:clamp(30px,3.6vw,46px);margin-top:14px;max-width:520px;}
.rescue-copy p{font-size:17px;line-height:1.7;color:var(--warm-gray);margin-top:20px;max-width:520px;}
.sequence{display:flex;align-items:center;gap:10px;margin-top:32px;flex-wrap:wrap;}
.sequence-step{
  font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:10px 18px;border:1px solid var(--border);border-radius:999px;color:var(--ink);
}
.sequence-arrow{color:var(--orange);font-size:16px;}

/* =========================================================
   ENVIRONMENT
   ========================================================= */
.env-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:72px;align-items:center;}
.env-media{display:flex;flex-direction:column;gap:20px;}
.env-media .asset:first-child{aspect-ratio:16/10;}
.env-media .asset:last-child{aspect-ratio:1/1;max-width:60%;align-self:flex-end;}
.env-copy h2{font-size:clamp(30px,3.6vw,46px);margin-top:14px;}
.env-copy p{font-size:17px;line-height:1.7;color:var(--warm-gray);margin-top:20px;max-width:480px;}

/* =========================================================
   MEDIA
   ========================================================= */
.media-heading{font-size:clamp(30px,3.4vw,44px);max-width:640px;margin-top:14px;}
.media-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:center;}
.media-media .asset{aspect-ratio:4/5;}
.pub-row{display:flex;flex-wrap:wrap;gap:14px 40px;align-items:center;margin-top:44px;padding-top:30px;border-top:1px solid var(--border);}
.pub-row a{font-family:var(--font-display);font-size:21px;color:var(--warm-gray);transition:color .2s ease;}
.pub-row a:hover{color:var(--orange-dark);}

/* =========================================================
   VIDEO ARCHIVE
   ========================================================= */
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.v-card{cursor:pointer;display:block;}
.v-thumb{position:relative;aspect-ratio:16/9;}
.v-thumb .asset{position:absolute;inset:0;border-radius:10px;}
.v-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1;}
.v-play span{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;color:var(--ink);transition:transform .2s ease, background .2s ease;font-size:15px;}
.v-card:hover .v-play span{transform:scale(1.08);background:#fff;}
.v-dur{position:absolute;right:10px;bottom:10px;z-index:1;background:rgba(0,0,0,.65);color:#fff;font-size:11px;padding:3px 7px;border-radius:4px;font-variant-numeric:tabular-nums;}
.v-meta{padding-top:14px;}
.v-meta h3{font-family:var(--font-body);font-size:15.5px;font-weight:600;margin:0;line-height:1.4;}
.v-meta .views{font-size:13px;color:var(--warm-gray);margin-top:6px;}
.video-fallback{
  aspect-ratio:16/9;border-radius:10px;border:1px solid var(--border);background:var(--warm-white);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--orange-dark);
}

/* =========================================================
   BOOKS
   ========================================================= */
.books-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:24px;}
.book{text-align:left;}
.book .asset{aspect-ratio:2/3;}
.book .asset img{object-fit:contain;background:var(--warm-white);} /* real covers are full-bleed art, not crop-safe photography */
.book-title{margin-top:12px;font-size:14px;font-weight:600;line-height:1.4;font-family:var(--font-body);}
.book-meta{font-size:12px;color:var(--warm-gray);margin-top:3px;}
@media (max-width:980px){ .books-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:560px){ .books-grid{grid-template-columns:repeat(2,1fr);} }

/* =========================================================
   WAYS TO SERVE
   ========================================================= */
.ways{background:var(--orange);color:#fff;}
.ways .section-head h2{color:#fff;font-size:clamp(28px,3.4vw,42px);}
.ways .eyebrow{color:rgba(255,255,255,.85);}
.ways-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px;}
.way{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);border-radius:var(--radius-md);padding:30px 26px;}
.way-num{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.85;}
.way h3{font-family:var(--font-display);font-weight:400;font-size:23px;margin-top:14px;color:#fff;}
.way p{font-size:14.5px;color:rgba(255,255,255,.85);margin-top:10px;line-height:1.6;}

/* =========================================================
   CONTRIBUTE
   ========================================================= */
.contribute{background:var(--warm-white);text-align:center;}
.contribute-inner{max-width:640px;margin:0 auto;padding:0 32px;}
.contribute h2{font-size:clamp(30px,3.8vw,46px);}
.contribute p{margin-top:18px;font-size:16.5px;line-height:1.7;color:var(--warm-gray);}
.contribute .btn{margin-top:30px;}

/* =========================================================
   CONTACT
   ========================================================= */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.contact-media .asset{aspect-ratio:4/3;}
.contact-copy h2{font-size:clamp(30px,3.4vw,42px);margin-top:14px;}
.contact-copy address{font-size:17px;line-height:1.8;color:var(--warm-gray);margin-top:22px;}
.contact-actions{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap;}

/* =========================================================
   FINAL CTA
   ========================================================= */
.final-cta{position:relative;text-align:center;background:var(--ink);color:#fff;overflow:clip;}
.final-cta .asset{position:absolute;inset:0;border-radius:0;}
.final-cta-scrim{position:absolute;inset:0;z-index:0;background:linear-gradient(0deg, rgba(23,23,23,.96) 0%, rgba(23,23,23,.88) 100%);}
.final-cta .wrap{position:relative;z-index:1;}
.final-cta h2{color:#fff;font-size:clamp(28px,3.6vw,44px);max-width:680px;margin:0 auto;}
.final-cta p{color:rgba(255,255,255,.6);margin-top:14px;font-size:15px;}
.final-cta .btn{margin-top:30px;}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{background:var(--ink);color:rgba(255,255,255,.7);padding:72px 0 32px;}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;}
.footer-col h4{font-family:var(--font-body);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);font-weight:600;margin:0 0 16px;}
.footer-col a{display:block;font-size:14.5px;color:rgba(255,255,255,.78);margin-bottom:11px;}
.footer-col a:hover{color:var(--orange);}
.footer-brand p{font-size:14px;color:rgba(255,255,255,.55);line-height:1.7;margin-top:16px;max-width:280px;}
.footer-bottom{max-width:var(--container-width);margin:56px auto 0;padding:24px 32px 0;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;font-size:12.5px;color:rgba(255,255,255,.4);flex-wrap:wrap;gap:12px;}
.footer-logo-hi{color:#fff;}
.text-note{font-size:12px;color:var(--warm-gray);margin-top:20px;}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:980px){
  .nav-links{display:none;}
  .nav-right>.lang-switch{display:none;} /* shown inside the drawer instead — no room next to Contribute + hamburger */
  .nav-toggle{display:block;}
  .hero-grid{grid-template-columns:1fr;gap:36px;padding-top:48px;}
  .impact-inner{grid-template-columns:repeat(2,1fr);}
  .section{padding:var(--section-spacing-mobile) 0;}
  .story-grid,.rescue-grid,.env-grid,.contact-grid,.media-grid{grid-template-columns:1fr;gap:32px;}
  .env-media .asset:last-child{max-width:50%;}
  .rescue-media,.env-media{order:-1;}
  .mission-grid,.ways-grid{grid-template-columns:1fr;}
  .video-grid{grid-template-columns:1fr;}
  .vf-inner{padding:96px 28px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .wrap,.hero-grid,.impact-inner,.impact-note{padding-left:20px;padding-right:20px;}
  .footer-grid{grid-template-columns:1fr;}
  .sequence{gap:8px;}
}