/* ========================================================
   Home page — bespoke layout, illustration & motion.
   Scoped under body.home so it never touches other pages.
   Motion runs through GSAP (home.js); the CSS transitions
   here are the no-JS / reduced-motion fallback path, which
   html.gsap neutralises so the two never fight.
   ======================================================== */

body.home main{max-width:var(--container);padding:0 32px 0}
@media(max-width:680px){body.home main{padding:0 22px}}
body.home section{border-bottom:none}

/* ---------- hero ---------- */
body.home{overflow-x:hidden}
.hero{
  position:relative;overflow:hidden;
  padding:84px 0 110px;
  min-height:min(88vh,800px);
  display:flex;align-items:center;
}
.hero-stage{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-content{position:relative;z-index:2;width:100%}
.hero-content > .container{width:100%}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.glass-rail,.stage-grain{display:none}

/* ---------- 3D hero mode (html.fx3d) ----------
   A dark-navy stage, pinned by GSAP (home.js) for one scroll
   length. As you scroll, the orange Sumeru sphere arcs around
   the limb of the big navy body, glass louvers refract it, the
   text lifts away, and the next (cream) section rises over it —
   dark-to-light gives a clean section break with no blank gap. */
html.fx3d .hero{
  min-height:100vh;height:auto;padding:84px 0 110px;overflow:visible;
  background:transparent;
}
html.fx3d .hero-stage{
  position:fixed;inset:0;z-index:-2;overflow:hidden;
  background:radial-gradient(120% 92% at 74% 8%,#fbf5ec 0%,#f4ecdc 45%,#eee2cf 100%);
}
html.fx3d .hero-stage::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(46% 60% at 78% 40%,rgba(252,105,0,.14),rgba(252,105,0,0) 70%);
}
html.fx3d .hero-bg{display:none}
html.fx3d .hero-content{
  position:relative;z-index:4;
  display:flex;align-items:center;
}
.hero-3d{
  position:absolute;inset:0;z-index:1;
  -webkit-mask-image:linear-gradient(90deg,transparent 2%,#000 30%);
  mask-image:linear-gradient(90deg,transparent 2%,#000 30%);
}
/* film grain over the 3D scene → matte, filmic finish */
html.fx3d .stage-grain{
  display:block;position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.14;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  background-size:180px 180px;
}
html.fx3d .glass-rail{
  display:flex;position:absolute;top:0;bottom:0;right:0;
  width:min(50vw,800px);z-index:3;pointer-events:none;
}
.glass-rail .slat{
  flex:1 1 0;min-width:0;
  transform-origin:top center;
  border-radius:0; /* Full height vertical tiles with no rounded bottoms */
  border-left:1px solid rgba(255,255,255,.35);
  border-right:1px solid rgba(120,70,30,.10);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.3), 3px 0 10px rgba(120,70,30,.06);
  background:linear-gradient(90deg,rgba(255,255,255,.22),rgba(255,255,255,.07) 60%,rgba(255,255,255,.0));
  will-change:transform;
}
.glass-rail .slat:first-child{border-left:none}
/* light-hero text treatment */
html.fx3d .hero-content h1,
html.fx3d .hero-content .hero-title .accent{color:var(--ink)}
html.fx3d .hero-content .hero-title .accent{color:var(--accent)}
html.fx3d .hero-content .sub{color:var(--ink-soft)}
html.fx3d .badge{
  border-color:var(--line);
  background:var(--paper);
  color:var(--ink-soft);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
html.fx3d .badge .pending{color:var(--ink-faint)}
html.fx3d .hero-cta .btn{border-color:var(--navy-900);color:var(--ink)}
html.fx3d .hero-cta .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
html.fx3d .hero-cta .btn.primary:hover{background:var(--accent-bright);border-color:var(--accent-bright);box-shadow:0 12px 30px -12px rgba(252,105,0,.6)}
html.fx3d .hero-cta .btn:not(.primary):hover{border-color:var(--accent);color:var(--accent-deep);background:rgba(210,80,0,.05)}
/* the snapshot rises over the pinned dark hero as a whitewashed glass panel
   (backdrop-filter frosts the dark 3D scene through it, like the reference) */
html.fx3d .snapshot{
  z-index:1;
  border-radius:0;margin-top:0;
  padding-top:96px;
  padding-bottom:96px;
  box-shadow:none;
  background:transparent;
}
/* nav overlays the dark hero (so the navy sits behind it) */
html.fx3d .nav{position:fixed;left:0;right:0;top:0}
/* nav floats over the light hero — keep dark ink text */
html.fx3d .nav.nav--on-dark{background:transparent;border-color:transparent}
html.fx3d .nav.nav--on-dark .logo,
html.fx3d .nav.nav--on-dark a:not(.cta){color:var(--ink)}
html.fx3d .nav.nav--on-dark a:not(.cta):not(.logo){color:var(--ink-soft)}
html.fx3d .nav.nav--on-dark a:not(.cta):not(.logo):hover{color:var(--ink)}
html.fx3d .nav.nav--on-dark .cta{background:var(--navy-900);border-color:var(--navy-900);color:var(--on-dark)}
html.fx3d .nav.nav--on-dark .cta:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.hero-bg svg{
  position:absolute;right:0;bottom:-2px;
  width:min(54vw,900px);height:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%);
  mask-image:linear-gradient(90deg,transparent 0,#000 24%);
}
.hero-bg .sun,.hero-bg .ridge{will-change:transform}

/* no-JS / reduced-motion fallback draw for the ascent trail */
.ascent-line{stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 1.9s var(--ease) .5s}
.hero-bg.is-drawn .ascent-line{stroke-dashoffset:0}
.summit{opacity:0;transition:opacity .6s var(--ease) 2.1s}
.hero-bg.is-drawn .summit{opacity:1}
.summit .halo{transform-origin:center;transform-box:fill-box;animation:halo 3.4s ease-out infinite}
@keyframes halo{0%{transform:scale(.45);opacity:.7}70%{transform:scale(1.5);opacity:0}100%{transform:scale(1.5);opacity:0}}
html.gsap .ascent-line,html.gsap .summit{transition:none}

.hero-inner{position:relative;z-index:1;max-width:620px}
.badge{
  display:inline-flex;align-items:baseline;gap:10px;
  border:1px solid var(--line);background:var(--paper);
  padding:9px 18px 9px 15px;border-radius:999px;
  font-size:.78rem;line-height:1.5;color:var(--ink-soft);
  margin-bottom:30px;max-width:100%;
}
.badge-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;align-self:center;box-shadow:0 0 0 3px rgba(210,80,0,.14)}
.hero-title{margin-bottom:22px}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero-title .line span{display:block}
.hero-title .accent{color:var(--accent)}
.hero-sub{margin-bottom:10px}
.hero-cta{margin-top:8px}

@media(max-width:980px){
  .hero{min-height:auto;padding:56px 0 200px}
  .hero-bg svg{
    right:50%;bottom:-2px;transform:translateX(50%);
    width:min(140%,760px);opacity:.5;
    -webkit-mask-image:none;mask-image:none;
  }
  .hero-inner{max-width:100%}
}

/* =========================================================
   Hybrid glass / flat section system
   A continuous grainy backdrop runs behind the whole page.
   Glass bands are frosted + translucent (the backdrop shows
   through); flat bands are opaque solids. Together they read
   as one scroll with alternating tone.
   ========================================================= */
body.home{background:#f1e9db}
body.home::before{           /* backdrop: warm gradient + soft glows */
  content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(44% 38% at 85% 14%, rgba(255,138,66,.16), transparent 62%),
    radial-gradient(52% 44% at 6% 58%, rgba(216,195,164,.28), transparent 64%),
    radial-gradient(58% 48% at 74% 96%, rgba(255,154,92,.12), transparent 66%),
    linear-gradient(180deg,#f7f1e7 0%,#efe6d6 55%,#f3ecde 100%);
}
body.home::after{            /* fine film grain across the page */
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.42;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  background-size:190px 190px;mix-blend-mode:soft-light;
}
body.home main{background:transparent;position:relative;z-index:1}

/* full-bleed helper so bands span the viewport but keep container-aligned content */
.sec-glass,.sec-flat{
  width:100vw;margin-left:calc(50% - 50vw);
  padding-left:max(32px,calc(50vw - 558px));
  padding-right:max(32px,calc(50vw - 558px));
  position:relative;
}
@media(max-width:680px){
  .sec-glass,.sec-flat{padding-left:22px;padding-right:22px}
}

/* --- glass bands: frosted whitewashed, backdrop shows through --- */
.sec-glass{
  background:linear-gradient(180deg,rgba(255,253,250,.58),rgba(255,251,246,.44));
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  backdrop-filter:blur(18px) saturate(1.2);
  border-top:1px solid rgba(255,255,255,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
.sec-glass + .sec-glass{border-top:1px solid rgba(255,255,255,.4)}

/* --- flat bands: opaque solid, no depth --- */
.sec-flat{background:var(--cream-deep)}

/* ---------- fund snapshot (glass) ---------- */
.snapshot{padding-top:96px;padding-bottom:96px}
.snapshot .stats{margin-top:8px;gap:16px}
.snapshot .stat{
  padding:24px 22px;min-height:126px;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.28));
  border:1px solid rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:border-color var(--dur-s) var(--ease),box-shadow var(--dur-s) var(--ease),transform var(--dur-s) var(--ease),background var(--dur-s) var(--ease);
}
.snapshot .stat:hover{
  border-color:rgba(210,80,0,.4);
  box-shadow:0 18px 36px -20px rgba(60,48,36,.4);
  transform:translateY(-4px) scale(1.015);
  background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(255,255,255,.4));
}
.snapshot .count{font-variant-numeric:lining-nums tabular-nums}
.snapshot .stat:nth-child(1) b,
.snapshot .stat:nth-child(2) b{color:var(--accent)}

/* ---------- why now / why india / why us (glass) ---------- */
.why{padding-top:96px;padding-bottom:96px}
.why h2 .accent{color:var(--accent)}
html.fx3d .why h2 .accent{color:var(--accent-bright)}
.why .cols3{margin-top:40px}
.why .cols3 > div{transition:transform var(--dur-s) var(--ease)}
.why .cols3 > div:hover h3{color:var(--accent-deep)}
.why .cols3 h3{transition:color var(--dur-s) var(--ease)}
.why .cols3 > div{position:relative;padding-right:24px}
.why .cols3 > div h3{margin-top:0}
@media(min-width:681px){
  .why .cols3 > div + div{padding-left:28px}
  .why .cols3 > div + div::before{
    content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;border-radius:2px;
    background:linear-gradient(180deg, var(--accent), var(--accent-tint));
    transform:scaleY(0);transform-origin:top;
    transition:transform 1s var(--ease) .25s;
    box-shadow: 0 0 8px rgba(210,80,0,.22);
  }
  .why.is-in .cols3 > div + div::before{transform:scaleY(1)}
  html.gsap .why .cols3 > div + div::before{transition:none}
}

/* ---------- philosophy (condensed) — FLAT solid band ---------- */
.philosophy{padding-top:96px;padding-bottom:96px}
.philosophy-intro{max-width:60ch}
.principles{position:relative;padding-left:46px;margin:38px 0 24px;list-style:none}
.principles::before{
  content:"";position:absolute;left:5px;top:10px;bottom:14px;width:2px;border-radius:2px;
  background:linear-gradient(var(--accent),var(--accent-tint));
  transform-origin:top;transform:scaleY(var(--p,0));
  transition:transform 1.3s var(--ease);
}
.principles.is-visible{--p:1}
html.gsap .principles::before{transition:none}
.principle{position:relative;margin-bottom:24px;padding:0;max-width:60ch;color:var(--ink-soft);list-style:none;transition:transform var(--dur-s) var(--ease)}
.principle:last-child{margin-bottom:0}
.principle::before{
  content:"";position:absolute;left:-45.5px;top:6px;width:11px;height:11px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 4px var(--cream-deep),0 0 0 5px rgba(210,80,0,.25);
  transition:transform var(--dur-s) var(--ease),box-shadow var(--dur-s) var(--ease);
}
.principle:hover{transform:translateX(4px)}
.principle:hover::before{transform:scale(1.25);box-shadow:0 0 0 4px var(--cream-deep),0 0 0 6px rgba(210,80,0,.4)}
.principle strong{color:var(--ink);font-weight:600}

/* ---------- people teaser (glass) ---------- */
.people{padding-top:96px;padding-bottom:96px}
.people-rule{width:44px;height:2px;background:var(--accent);margin:0 0 22px;border-radius:2px}

/* ---------- closing cta ---------- */
.cta-band{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--navy-900),var(--navy-950) 62%);
  color:var(--on-dark-soft);
  padding:92px 0;margin:0 calc(50% - 50vw);
  border-radius:26px 26px 0 0;
}
.cta-band .container{position:relative;z-index:1}
.cta-band h2{color:var(--on-dark)}
.cta-band p{color:var(--on-dark-soft)}
.cta-band .btn{border-color:var(--line-dark);color:var(--on-dark)}
.cta-band .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.cta-band .btn.primary:hover{background:var(--accent-bright);border-color:var(--accent-bright);color:#fff;box-shadow:0 12px 28px -12px rgba(252,105,0,.55)}
.cta-band .btn:not(.primary):hover{border-color:var(--accent-soft);color:var(--on-dark)}
.band-art{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.cta-logo {
  position: absolute;
  right: -100px;
  bottom: -190px;
  width: 620px;
  height: auto;
  pointer-events: none;
  z-index: 0;
  opacity: 0.08; /* faded whitewash opacity */
}
@media (max-width: 768px) {
  .cta-logo {
    width: 380px;
    right: -60px;
    bottom: -120px;
  }
}

/* footer sits flush under the rounded cta band on the home page */
body.home footer{margin-top:0}

/* ---------- fallback reveal (no-JS path via script.js) ---------- */
/* When GSAP owns motion, neutralise the CSS fallback so nothing
   double-animates: elements start visible and GSAP animates them. */
html.gsap .reveal{opacity:1;transform:none;transition:none}

/* ---------- glassmorphism card components ---------- */
.glass-card {
  padding: 56px 48px;
  background: rgba(255, 255, 255, 0.6); /* fallback light-glass */
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 24px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 20px 40px -15px rgba(60, 48, 36, 0.08);
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
}

@media(max-width:680px){
  .glass-card {
    padding: 36px 24px;
    border-radius: 18px;
  }
}

html.fx3d .glass-card {
  background: rgba(255, 255, 255, 0.55); /* light-glass panel on cream stage */
  border: 1px solid rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  box-shadow: 0 24px 50px -22px rgba(60, 48, 36, 0.16);
}

html.fx3d .sec-glass {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: none;
  box-shadow: none;
}

html.fx3d .snapshot .stat {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px -18px rgba(60, 48, 36, 0.14);
}
html.fx3d .snapshot .stat:hover {
  background: rgba(255, 255, 255, 0.66);
  border-color: rgba(210, 80, 0, 0.4);
  box-shadow: 0 22px 44px -16px rgba(60, 48, 36, 0.22);
  transform: translateY(-4px) scale(1.015);
}

/* --- Dark mode typography inside glass elements --- */
html.fx3d .glass-card h2,
html.fx3d .glass-card h3,
html.fx3d .glass-card strong,
html.fx3d .glass-card .tlink {
  color: var(--ink);
}
html.fx3d .glass-card p {
  color: var(--ink-soft);
}
html.fx3d .glass-card .eyebrow {
  color: var(--accent-deep);
}
html.fx3d .glass-card .tlink {
  color: var(--ink);
  border-color: var(--accent);
}
html.fx3d .glass-card .tlink:hover {
  color: var(--accent-deep);
  border-color: var(--accent-deep);
}

html.fx3d .snapshot .stat b {
  color: var(--ink);
}
html.fx3d .snapshot .stat:nth-child(1) b,
html.fx3d .snapshot .stat:nth-child(2) b {
  color: var(--accent);
}
html.fx3d .snapshot .stat span {
  color: var(--ink-soft);
}
html.fx3d .snapshot .eyebrow {
  color: var(--accent-deep);
}

/* Ensure flat sections stack on top of fixed background */
.sec-flat {
  position: relative;
  z-index: 5;
}
.cta-band {
  position: relative;
  z-index: 5;
}
footer {
  position: relative;
  z-index: 5;
}

/* ---------- Mountains Parallax Background ---------- */
#philosophy {
  position: relative;
  overflow: hidden;
}
#philosophy > * {
  position: relative;
  z-index: 3;
}
.mountains-parallax {
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 55%;
  z-index: 1;
  pointer-events: none;
}
.mountains-parallax svg {
  width: 100%;
  height: 100%;
  display: block;
}
.mount-layer {
  transform-origin: bottom center;
}
.mount-layer-1 {
  fill: #e8dfcf;
  opacity: 0.28;
}
.mount-layer-2 {
  fill: #e3d9c7;
  opacity: 0.52;
}
.mount-layer-3 {
  fill: #ded3bf;
  opacity: 0.72;
}
.mount-layer-4 {
  fill: #d8cbb6;
  opacity: 0.92;
}

/* ---------- Philosophy mountain (right side, parallax zoom) ---------- */
#philosophy .philosophy-mountain {
  position: absolute;
  right: 0;
  bottom: 0;                       /* seats on the section's bottom edge; #philosophy clips the overflow */
  width: min(60%, 880px);
  height: auto;
  aspect-ratio: 975.34 / 576.16;   /* reserve height before the SVG loads so scroll positions are correct */
  z-index: 1;                      /* behind the text (z-index:3), above the band */
  pointer-events: none;
  user-select: none;
  transform-origin: 68% 100%;
  will-change: transform;
  /* dissolve to nothing on the left so it never runs under the copy */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 16%, #000 52%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 16%, #000 52%);
}
@media (max-width: 980px) {
  #philosophy .philosophy-mountain {
    width: 86%;
    opacity: 0.45;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 6%, #000 40%);
    mask-image: linear-gradient(90deg, transparent 0%, transparent 6%, #000 40%);
  }
}