/* BAPS Hindu Maha-Mandir, site styles (iteration 1) */
:root{
  --nav-h:75px; --strip-h:44px;
  --paper:#FFFFFF; --surface:#FFFFFF;
  --band-soft:#F3F7EE; --band-warm:#FBF8F1;
  --forest:#2C6242; --forest-deep:#24543A; --forest-2:#357550;
  --ink:#1C2A21; --ink15:#2C3A2E; --ink2:#3C4C40; --ink3:#4C5C50; --muted:#5D6D61;
  --gold:#B8893C; --gold-lt:#DCB775; --gold-ink:#8A6420; --gold-pale:#EBCD95; --cream:#F6F3EA; --figure:#24543A; --link:#2C6242;
  --line:rgba(28,42,33,.12); --line2:rgba(28,42,33,.18); --line3:rgba(28,42,33,.30);
  --shadow:0 10px 30px -22px rgba(28,42,33,.45);
  --shadow-lg:0 22px 44px -28px rgba(28,42,33,.55);
  --logo-filter:none;
  --on-forest:#F6F3EA; --on-forest-2:#DFE9DA; --on-forest-3:#C8DAC5;
  --t1:#EDF3E6; --t2:var(--surface); --t3:#EDF3E6; --t4:var(--surface);
  --serif:"Marcellus",Georgia,"Times New Roman",serif;
  --sans:"Mulish",Calibri,"Helvetica Neue",Arial,sans-serif;
}
[data-theme="dark"]{
  --paper:#132519; --surface:#1C3425; --band-soft:#182C1F; --band-warm:#1A2E20;
  --forest:#2C6242; --forest-deep:#1A3C28; --forest-2:#357550;
  --ink:#F2EFE4; --ink15:#DFE7D9; --ink2:#CBD7C4; --ink3:#B6C4B0; --muted:#93A489;
  --gold:#DCB775; --figure:#E4C68A; --link:#A8CBAF; --gold-ink:#DCB775; --gold-pale:#EBCD95;
  --line:rgba(246,243,234,.14); --line2:rgba(246,243,234,.22); --line3:rgba(246,243,234,.34);
  --logo-filter:brightness(0) invert(1); --btn-ghost:#A8CBAF;
  --t1:#1E3826; --t2:var(--surface); --t3:#1E3826; --t4:var(--surface);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--gold)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;margin:0;color:var(--ink);text-wrap:pretty;letter-spacing:-.005em}
p{margin:0;text-wrap:pretty}
button{font-family:var(--sans)}
.wrap{max-width:1400px;margin:0 auto;padding:0 clamp(20px,4vw,44px)}
.section{padding:clamp(56px,7vw,104px) 0}
.section--tight{padding:clamp(40px,5vw,72px) 0}
.section--soft{background:var(--band-soft)}
.section--warm{background:var(--band-warm)}
.section--forest{background:var(--forest)}
.eyebrow{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-ink);font-weight:700}
.eyebrow--pale{color:var(--gold-pale)}
.h1{font-size:clamp(36px,5.2vw,64px);line-height:1.06;max-width:19ch}
.h2{font-size:clamp(30px,3.9vw,50px);line-height:1.12}
.h3{font-size:clamp(21px,2.3vw,27px);line-height:1.28}
.rule{width:54px;height:2px;background:var(--gold);margin-top:18px}
.lead{font-size:clamp(17px,1.8vw,20px);line-height:1.72;color:var(--ink15);max-width:66ch}
.body{font-size:17px;line-height:1.8;color:var(--ink2)}
.body + .body{margin-top:18px}
.small{font-size:15.5px;line-height:1.72;color:var(--ink3)}
.note{font-size:12.5px;line-height:1.7;color:var(--muted)}
.measure{max-width:62ch}
.mt-s{margin-top:14px}.mt-m{margin-top:22px}.mt-l{margin-top:clamp(28px,3.4vw,42px)}
/* nav */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.93);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
[data-theme="dark"] .nav{background:rgba(19,37,25,.94)}
.nav__inner{max-width:1400px;margin:0 auto;padding:12px clamp(20px,4vw,44px);display:flex;align-items:center;gap:clamp(14px,1.4vw,22px)}
.nav__brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.nav__chip{width:40px;height:40px;border-radius:8px;background:var(--band-warm);display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto}

[data-theme="dark"] .nav__chip{background:var(--cream)}
.nav__chip img{width:26px;height:32px;object-fit:contain;display:block}
.nav__name{font-family:var(--serif);font-size:17px;line-height:1.15;color:var(--ink);white-space:nowrap}
.nav__name small{display:block;font-family:var(--sans);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.nav__spacer{flex:1 1 auto}
.nav__links{display:flex;align-items:center;gap:clamp(14px,1.8vw,24px)}
.nav__link{position:relative;font-size:13.5px;font-weight:600;letter-spacing:.02em;color:var(--ink);padding:5px 0;white-space:nowrap}
.nav__link:hover{color:var(--gold)}
.nav__link.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold)}
.nav__tools{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:6px}
.icon-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--line2);color:var(--ink3);background:none;cursor:pointer;padding:0}
.icon-btn:hover{color:var(--gold);border-color:var(--gold)}
.burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:36px;height:36px;border-radius:6px;border:1px solid var(--line2);background:none;cursor:pointer;padding:0}
.burger span{width:16px;height:1.5px;background:var(--ink);display:block}
.burger:hover{border-color:var(--gold)}
/* menu drawer, fixed panel sliding in from the right, never in the page flow */
.menu{position:fixed;top:0;right:0;bottom:0;width:min(340px,calc(100vw - 56px));z-index:120;background:var(--surface);
  border-left:1px solid var(--line);box-shadow:-26px 0 60px -30px rgba(12,24,16,.5);
  display:flex;flex-direction:column;padding:22px 26px calc(26px + env(safe-area-inset-bottom));
  overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(100%);visibility:hidden;transition:transform .42s cubic-bezier(.4,.05,.2,1),visibility .42s}
.menu.is-open{transform:translateX(0);visibility:visible}
.menu__head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.menu__label{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);font-weight:700}
.menu__close{width:44px;height:44px;flex:0 0 44px;border-radius:50%;border:1px solid var(--line2);background:none;
  cursor:pointer;color:var(--ink);display:flex;align-items:center;justify-content:center;padding:0}
.menu__close:hover{border-color:var(--gold);color:var(--gold-ink)}
.menu__close svg{width:17px;height:17px}
.menu a:not(.btn){font-size:17px;font-weight:600;color:var(--ink);padding:17px 0;border-bottom:1px solid var(--line);display:block}
.menu a:not(.btn):hover{color:var(--gold-ink)}
.menu a:not(.btn):last-of-type{border-bottom:0}
.menu .btn{margin-top:22px;text-align:center;font-size:12.5px;padding:16px 24px}
.scrim{position:fixed;inset:0;z-index:110;background:rgba(12,24,16,.5);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:opacity .42s ease,visibility .42s;border:0;padding:0;cursor:pointer}
.scrim.is-open{opacity:1;visibility:visible}
body.menu-open{overflow:hidden}
/* burger becomes a cross while the drawer is open */
.burger span{transition:transform .3s ease,opacity .2s ease}
.burger.is-open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
@media (min-width:1024px){.menu,.scrim{display:none}}
/* buttons */
.btn{display:inline-block;white-space:nowrap;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:14px 24px;border-radius:4px;border:1px solid transparent;cursor:pointer;font-family:var(--sans)}
.btn--primary{background:var(--forest);border-color:var(--forest);color:var(--cream)}
.btn--primary:hover{background:var(--forest-2);border-color:var(--forest-2);color:var(--cream)}
.btn--ghost{color:var(--btn-ghost,#2C6242);border-color:var(--line3);background:transparent}
.btn--ghost:hover{color:var(--gold);border-color:var(--gold)}
.btn--gold{background:var(--gold-lt);border-color:var(--gold-lt);color:#1C2A21}
.btn--gold:hover{background:var(--cream);border-color:var(--cream);color:#1C2A21}
/* moving status strip */
.strip{background:var(--cream);overflow:hidden;position:relative;border-bottom:1px solid var(--line)}
[data-theme="dark"] .strip{background:var(--band-soft)}
.strip__track{display:flex;width:max-content;animation:slide 34s linear infinite}
.strip:hover .strip__track{animation-play-state:paused}
.strip__group{display:flex;align-items:center;gap:0;flex:0 0 auto}
.strip__item{display:flex;align-items:center;gap:14px;padding:10px 28px;font-size:12.5px;color:var(--ink2);letter-spacing:.02em;white-space:nowrap}
.strip__item b{color:var(--gold-ink);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:10.5px}
.strip__item i{width:5px;height:5px;background:var(--gold-ink);transform:rotate(45deg);display:block;font-style:normal}
.strip a{color:var(--figure);font-weight:600;border-bottom:1px solid var(--line3)}
.strip a:hover{color:var(--gold-ink);border-color:var(--gold-ink)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* hero carousel */
.hero{--fold:calc(100svh - var(--chrome,116px));display:flex;flex-wrap:wrap;align-items:stretch;background:var(--paper);min-height:var(--fold)}
.hero__copy{flex:1 1 52%;min-width:430px;display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,3.4vw,52px) clamp(26px,3.4vw,60px) clamp(28px,3.4vw,52px) max(clamp(20px,4vw,44px),calc((100vw - 1240px)/2))}
.hero__title{font-size:clamp(32px,3.6vw,52px);line-height:1.07;max-width:14ch;margin-top:16px}
.hero__sub{font-size:clamp(15px,1.15vw,16.5px);line-height:1.7;color:var(--ink2);margin-top:20px;max-width:42ch}
.hero__actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:28px}
.hero__media{flex:1 1 48%;min-width:340px;position:relative;background:var(--cream);overflow:hidden;align-self:stretch}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease;background-size:cover;background-repeat:no-repeat;background-position:50% 52%}
.hero__slide.is-on{opacity:1}
.hero__dots{position:absolute;left:0;right:0;bottom:22px;display:flex;justify-content:center;gap:10px;z-index:2}
.hero__dot{width:9px;height:9px;border-radius:50%;border:1px solid rgba(255,255,255,.9);background:rgba(10,24,15,.28);cursor:pointer;padding:0;box-shadow:0 1px 6px rgba(10,24,15,.35)}
.hero__dot.is-on{background-color:var(--gold-lt);border-color:var(--gold-lt)}
/* page header */
.phead{display:flex;gap:clamp(26px,5vw,72px);flex-wrap:wrap;align-items:flex-end;padding:clamp(46px,6vw,88px) 0 0}
.phead__main{flex:1 1 460px}
.phead__side{flex:1 1 300px;max-width:420px}
.phead__side p{font-size:16px;line-height:1.75;color:var(--ink3)}
.banner{display:block;width:100%;height:auto;object-fit:contain;margin-top:clamp(30px,4vw,48px);background:var(--cream);will-change:clip-path}
.figcap{font-size:12.5px;color:var(--muted);font-style:italic;margin-top:12px}
/* quote band */
.qband{display:flex;gap:clamp(20px,4vw,48px);flex-wrap:wrap;padding-block:clamp(44px,5vw,70px)}
.qband__mark{font-family:var(--serif);font-size:68px;line-height:.7;color:var(--gold-pale);flex:0 0 auto}
.qband__body{flex:1 1 0;min-width:0}
.qband__quote{font-family:var(--serif);font-size:clamp(21px,2.6vw,32px);line-height:1.4;color:#FFFFFF}
.qband__by{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-top:26px}
.qband__rule{width:26px;height:1px;background:var(--gold-lt);display:inline-block;transform:translateY(-4px)}
.qband__name{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:#DCE8D8;font-weight:700}
.flag{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-pale);border:1px dashed rgba(235,205,149,.65);padding:4px 9px}
/* two-up */
.twoup{display:flex;gap:clamp(24px,4vw,60px);flex-wrap:wrap;align-items:flex-start;margin-top:clamp(22px,2.6vw,32px)}
.twoup > h2{flex:0 1 auto;min-width:0;max-width:6em;text-wrap:normal}
.twoup__body{flex:1 1 340px;min-width:280px;max-width:56ch}
/* colour tiles */
.cards{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));margin-top:clamp(28px,3.4vw,42px);align-items:stretch}
.card{border-radius:14px;padding:28px 26px;border:1px solid transparent;position:relative;overflow:hidden;display:flex;flex-direction:column}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gold)}
.card--t1{background:var(--t1)}.card--t2{background:var(--t2)}.card--t3{background:var(--t3)}.card--t4{background:var(--t4)}
.card--t1::before{background:var(--forest)}.card--t2::before{background:var(--gold)}
.card--t3::before{background:var(--forest)}.card--t4::before{background:var(--gold)}
.card p{font-size:15.5px;line-height:1.72;color:var(--ink2);margin-top:12px}
.card h3{font-size:22px;line-height:1.3}
.card b{font-weight:800;color:var(--ink)}
/* stat tiles */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:clamp(28px,3.4vw,40px)}
.stat{border-radius:12px;padding:30px 26px;border:1px solid transparent}
.stat--t1{background:var(--t1)}.stat--t2{background:var(--t2)}.stat--t3{background:var(--t3)}.stat--t4{background:var(--t4)}
.stat__num{font-family:var(--serif);font-size:clamp(36px,4.2vw,52px);line-height:1;color:var(--figure)}
.stat__num .u{font-size:.46em;letter-spacing:.01em}
.stat__label{font-size:13.5px;line-height:1.6;color:var(--ink2);margin-top:14px}
.stats-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
/* big number band (about) */
.bignums{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:0;margin-top:clamp(28px,3.4vw,40px);border-top:2px solid var(--gold)}
.bignum{padding:34px 26px 30px;border-right:1px solid var(--line)}
.bignum:last-child{border-right:0}
.bignum__n{font-family:var(--serif);font-size:clamp(46px,6vw,78px);line-height:.94;color:var(--figure)}
.bignum__n .u{font-size:.38em}
.bignum__l{font-size:14px;line-height:1.6;color:var(--ink2);margin-top:14px;max-width:24ch}
/* checklist */
.panel{background:var(--band-soft);border-radius:14px;padding:clamp(30px,4vw,48px)}
.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(max(300px,45%),1fr));gap:18px clamp(24px,4vw,52px);margin-top:26px}
.check{display:flex;gap:14px;align-items:flex-start}
.check i{flex:0 0 auto;width:7px;height:7px;background:var(--gold);transform:rotate(45deg);margin-top:8px;display:block}
.check span{font-size:15.5px;line-height:1.65;color:var(--ink15)}
/* flip tiles */
.flips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:clamp(28px,3.4vw,40px)}
.flip{perspective:1200px;background:none;border:0;padding:0;cursor:pointer;min-height:210px;font-family:var(--sans);text-align:left}
.flip__in{display:block;position:relative;width:100%;height:100%;min-height:210px;transition:transform .65s cubic-bezier(.4,.1,.2,1);transform-style:preserve-3d}
.flip.is-flipped .flip__in{transform:rotateY(180deg)}
.flip__f,.flip__b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:12px;padding:26px 24px;display:flex;flex-direction:column;justify-content:space-between}
.flip__f{background:var(--t1)}
.flip--t2 .flip__f{background:var(--t2)}.flip--t3 .flip__f{background:var(--t3)}.flip--t4 .flip__f{background:var(--t4)}
.flip__b{transform:rotateY(180deg);background:var(--forest);color:#FFFFFF}
.flip__n{font-family:var(--serif);font-size:clamp(32px,3.6vw,44px);line-height:1;color:var(--figure)}
.flip__n .u{font-size:.46em}
.flip__l{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);font-weight:700;margin-top:auto;padding-top:16px}
.flip__b p{font-size:14.5px;line-height:1.66;color:#EAF1E6}
.flip__hint{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:7px}
.flip__b .flip__hint{color:var(--gold-pale)}
/* horizontal timeline */
.tline{margin-top:clamp(30px,3.6vw,44px)}
.tline__rail{position:relative;overflow-x:auto;padding:38px 0 8px;-webkit-overflow-scrolling:touch}
.tline__track{display:flex;gap:0;min-width:max-content;position:relative;padding:0 6px}
.tline__track::before{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:var(--line2)}
.tline__node{position:relative;flex:0 0 auto;width:clamp(140px,15vw,190px);background:none;border:0;padding:26px 10px 0;cursor:pointer;text-align:left;font-family:var(--sans)}
.tline__node::before{content:"";position:absolute;left:10px;top:1px;width:14px;height:14px;border-radius:50%;background:var(--paper);border:2px solid var(--line3);transition:all .3s ease}
.tline__node:hover::before{border-color:var(--gold)}
.tline__node.is-done::before{background:var(--forest);border-color:var(--forest)}
.tline__node.is-now::before{background:var(--gold);border-color:var(--gold);animation:pulse 1.9s ease-out infinite}
.tline__node.is-active::before{box-shadow:0 0 0 5px rgba(184,137,60,.22)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(184,137,60,.55)}70%{box-shadow:0 0 0 12px rgba(184,137,60,0)}100%{box-shadow:0 0 0 0 rgba(184,137,60,0)}}
.tline__when{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;line-height:1.45;padding-right:14px}
.tline__node.is-active .tline__when,.tline__node.is-now .tline__when{color:var(--gold-ink)}
.tline__panel{background:var(--band-soft);border-radius:14px;border-left:4px solid var(--gold);padding:clamp(24px,3vw,36px);margin-top:20px;min-height:132px}
.tline__tag{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);font-weight:700}
.tline__title{font-family:var(--serif);font-size:clamp(20px,2.2vw,26px);line-height:1.3;color:var(--ink);margin-top:10px}
.tline__text{font-size:16.5px;line-height:1.72;color:var(--ink2);margin-top:12px;max-width:74ch}
@media (prefers-reduced-motion:reduce){
  .tline__node.is-now::before{animation:none}
  .strip__track{animation:none}
  .hero__slide{transition:none}
}
/* reveal cards */
.reveals{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,265px),1fr));gap:16px;margin-top:clamp(28px,3.4vw,42px)}
.reveal{border-radius:12px;border:1px solid var(--line);background:var(--surface);overflow:hidden;box-shadow:var(--shadow)}
.reveal__btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:26px 24px;background:none;border:0;cursor:pointer;text-align:left}
.reveal__btn h3{font-size:20px;line-height:1.3;color:var(--figure)}
.reveal__sign{flex:0 0 26px;height:26px;border-radius:50%;border:1px solid var(--line2);color:var(--gold-ink);display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1;transition:transform .35s ease}
.reveal.is-open .reveal__sign{transform:rotate(45deg);border-color:var(--gold)}
.reveal__body{display:none;padding:0 24px 26px}
.reveal.is-open .reveal__body{display:block;animation:fade .35s ease both}
.reveal__body p{font-size:15px;line-height:1.7;color:var(--ink3)}
.reveal.is-open{background:var(--band-warm)}
/* green wedge outcome tiles */
.gw{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:clamp(28px,3.4vw,40px);align-items:stretch}
.gw__tile{position:relative;border-radius:14px;padding:30px 26px 28px;overflow:hidden;background:var(--surface);border:1px solid var(--line);transition:transform .3s ease,box-shadow .3s ease}
.gw__tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}

.gw__tile--a{background:var(--t1);border-color:transparent;color:#2C6242}
.gw__tile--b{background:var(--t2);border-color:transparent;color:#B8893C}
.gw__tile--c{background:var(--t3);border-color:transparent;color:#2C6242}
.gw__tile--d{background:var(--t4);border-color:transparent;color:#8A6420}
.gw__fig{font-family:var(--serif);font-size:clamp(28px,3vw,38px);line-height:1;color:var(--figure)}
.gw__fig .u{font-size:.45em;letter-spacing:.01em}
.gw__txt{font-size:14px;line-height:1.6;color:var(--ink2);margin-top:12px}
[data-theme="dark"] .gw__tile--a{color:#7FB394}
[data-theme="dark"] .gw__tile--b{color:#DCB775}
[data-theme="dark"] .gw__tile--c{color:#7FB394}
[data-theme="dark"] .gw__tile--d{color:#DCB775}
/* forest data panel */
.glance{background:var(--forest);border-radius:14px;padding:clamp(30px,4vw,50px)}
.glance__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,5vw,64px)}
.glance__col > .grow:last-child{border-bottom:0}
.grow{display:flex;gap:18px;padding:16px 0;border-bottom:1px solid rgba(246,243,234,.20)}
.grow dt{flex:0 0 118px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-forest-3);padding-top:3px;margin:0}
.grow dd{flex:1 1 auto;font-size:15.5px;line-height:1.6;color:#FFFFFF;margin:0}
/* pull quote + side */
.pull{background:var(--band-soft);border-radius:14px;padding:clamp(36px,5vw,68px) clamp(24px,4vw,56px);text-align:center;margin-top:clamp(40px,5vw,68px)}
.pull__mark{font-family:var(--serif);font-size:46px;line-height:.6;color:var(--gold-ink)}
.pull__text{font-family:var(--serif);font-size:clamp(26px,3.6vw,44px);line-height:1.32;color:var(--figure);margin:18px auto 0;max-width:22ch}
.pull__by{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:22px}
.tri{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,265px),1fr));gap:18px;margin-top:clamp(26px,3vw,36px)}
.tri__item{border-radius:12px;padding:28px 24px;background:var(--surface)}
.tri__item:nth-child(1){border:1px solid var(--line2);border-top:4px solid var(--forest)}
.tri__item:nth-child(2){border:1px dashed var(--line3);border-top:4px solid var(--gold)}
.tri__item:nth-child(3){border:1px solid var(--line2);border-top:4px solid var(--forest)}
.tri__item span{font-size:16px;line-height:1.7;color:var(--ink15)}
.side{flex:1 1 280px;max-width:360px;background:var(--t2);border-radius:14px;border-top:4px solid var(--gold);padding:30px 28px}
.side p{font-size:15.5px;line-height:1.75;color:var(--ink2);margin-top:16px}
.emblem{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;flex:1 1 240px;min-width:200px;padding:clamp(10px,2vw,26px) 0}
.emblem__crop{width:132px;height:190px;overflow:hidden;display:flex;align-items:center;justify-content:flex-start;flex:0 0 auto}
.emblem__crop img{width:1450px;max-width:none;height:183px;flex:0 0 auto;filter:var(--logo-filter)}
.emblem__name{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);text-align:center;line-height:1.6}
/* partners */
.group{display:flex;gap:16px;align-items:center;margin:clamp(34px,4vw,50px) 0 22px}
.group:first-of-type{margin-top:clamp(30px,4vw,44px)}
.group b{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);font-weight:700;flex:0 0 auto}
.group i{height:1px;background:var(--line2);flex:1 1 auto}
.wall{display:grid;grid-template-columns:repeat(auto-fit,minmax(max(190px,22%),1fr));gap:14px}
.logo{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:26px 18px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;transition:box-shadow .3s ease,transform .3s ease}
.logo:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.logo__img{height:46px;display:flex;align-items:center;justify-content:center;width:100%}
.logo__img img{max-height:46px;object-fit:contain}
.logo__role{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink3);line-height:1.5}
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,265px),1fr));gap:18px}
.quote-card{background:var(--band-warm);border-radius:12px;border:1px dashed var(--line3);padding:28px 26px}
.quote-card p{font-family:var(--serif);font-size:18px;line-height:1.5;color:var(--ink3);font-style:italic}
.quote-card b{display:block;font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--figure);margin-top:20px}
.quote-card i{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink);margin-top:8px;font-style:normal}
/* faq */
.faq{max-width:940px}
.faq__item{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:2px 24px;margin-bottom:12px}
.faq__item.is-open{background:var(--band-soft);border-color:var(--line2)}
.faq__q{display:flex;gap:20px;align-items:baseline;padding:24px 0;cursor:pointer;width:100%;background:none;border:0;text-align:left;font-family:var(--serif);font-size:clamp(18px,2.1vw,22px);line-height:1.4;color:var(--ink)}
.faq__sign{font-size:22px;line-height:1;color:var(--gold-ink);flex:0 0 16px;text-align:center;font-family:var(--sans)}
.faq__a{font-size:16.5px;line-height:1.8;color:var(--ink2);padding:0 40px 26px 0;max-width:740px;display:none}
.faq__item.is-open .faq__a{display:block;animation:fade .35s ease both}
@keyframes fade{from{opacity:0}to{opacity:1}}
/* explore more */
.index{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,265px),1fr));gap:18px;margin-top:clamp(28px,3.4vw,40px)}
.index a{display:flex;flex-direction:column;gap:0;align-items:flex-start;border-radius:14px;padding:28px 26px 24px;border:1px solid var(--line2);box-shadow:var(--shadow);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.index a:nth-child(1){background:var(--t1)}
.index a:nth-child(2){background:var(--t2)}
.index a:nth-child(3){background:var(--t3)}
.index a:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--gold)}
.index strong{font-family:var(--serif);font-size:clamp(21px,2.4vw,26px);font-weight:400;color:var(--ink);margin-top:20px}
.index span{font-size:14.5px;line-height:1.65;color:var(--ink2);margin-top:10px}
.index em{display:inline-flex;align-items:center;gap:9px;margin-top:auto;padding-top:20px;font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.index em svg{width:17px;height:17px;transition:transform .3s ease}
.index a:hover em svg{transform:translateX(5px)}
/* connect + footer */
.connect{display:flex;gap:clamp(30px,5vw,72px);flex-wrap:wrap;padding-block:clamp(46px,6vw,84px)}
.connect__col{flex:1 1 420px;min-width:0}
.connect__col p{font-size:16.5px;line-height:1.75;color:var(--on-forest-2);margin-top:18px;max-width:520px}
.connect__col h2{color:#FFFFFF;margin-top:16px}
.sanskrit{font-family:var(--serif);font-size:16px;line-height:1.7;color:var(--gold-lt)}
.footer{background:var(--forest);border-top:3px solid var(--gold)}
.footer__grid{max-width:1400px;margin:0 auto;padding:clamp(46px,5vw,70px) clamp(20px,4vw,44px) 34px;display:grid;grid-template-columns:repeat(auto-fit,minmax(max(185px,22%),1fr));gap:34px clamp(24px,3vw,40px);align-items:start}
.footer h4{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-pale);font-weight:700;margin:0;font-family:var(--sans)}
.footer__brand{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.footer__chip{width:66px;height:66px;border-radius:10px;background:var(--cream);display:flex;align-items:center;justify-content:center;overflow:hidden}

.footer__chip img{width:40px;height:50px;object-fit:contain;display:block}
.footer__name{font-family:var(--serif);font-size:21px;line-height:1.3;color:#FFFFFF}
.footer__where{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-pale);margin-top:16px}
.footer p{font-size:14.5px;line-height:1.75;color:#C9D9C4;margin-top:22px;max-width:340px}
.footer__contact{margin-top:16px;padding-top:16px;border-top:1px solid rgba(246,243,234,.18);display:flex;flex-direction:column;gap:7px}
.footer__contact div,.footer__contact a{font-size:14px;line-height:1.65;color:#EAF1E6}
.footer__contact a:hover{color:var(--gold-lt)}
.footer__contact i{font-size:11.5px;line-height:1.5;color:#B9CCB4}
.footer__links{display:flex;flex-direction:column;gap:11px;margin-top:18px}
.footer__links a{font-size:14px;color:#EAF1E6}
.footer__links a:hover{color:var(--gold-lt)}
.footer__ack{font-size:14px;line-height:1.7;color:#C9D9C4;margin-top:18px}
.footer__sanskrit{font-family:var(--serif);font-size:15px;line-height:1.7;color:var(--gold-lt);margin-top:16px}
.footer__always{font-size:11.5px;letter-spacing:.1em;line-height:1.6;text-transform:uppercase;color:#B9CCB4;margin-top:10px}
.footer__bar{max-width:1400px;margin:0 auto;padding:22px clamp(20px,4vw,44px) 40px;border-top:1px solid rgba(246,243,234,.18);display:flex;gap:14px 32px;flex-wrap:wrap;align-items:baseline}
.footer__bar span{font-size:12.5px;color:#B9CCB4}
.footer__bar span:last-child{flex:1 1 260px;text-align:right}
@media (max-width:1040px){
  .nav__links{display:none}
  .burger{display:flex}
  .nav__name small{display:none}
}
@media (max-width:640px){
  .glance__grid{grid-template-columns:1fr}
  .checks,.cards,.cards--3,.tri,.reveals,.wall,.quotes,.index,.bignums{grid-template-columns:1fr}
  .bignum{border-right:0;border-bottom:1px solid var(--line);padding:26px 0 22px}
  .bignum:last-child{border-bottom:0}
  .footer__bar span:last-child{text-align:left}
  .grow{flex-wrap:wrap}
  .grow dt{flex:1 1 100%}
  .nav__name{font-size:15px}
}
@media print{.nav,.strip,.menu{display:none}body{background:#fff}}

/* ============ motion layer + richer treatment ============ */
.w{display:inline-block;overflow:hidden;vertical-align:top}
.w__i{display:inline-block;will-change:transform}
h1 .w,h2 .w,.pull__text .w,.qband__quote .w{padding-bottom:.06em;margin-bottom:-.06em}
.progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:80;background:transparent;pointer-events:none}
.progress__fill{display:block;height:100%;background:linear-gradient(90deg,var(--gold) 0%,var(--forest-2) 100%);transform:scaleX(0);transform-origin:0 50%}
.num-line{display:block;height:2px;width:44px;background:var(--gold);transform-origin:0 50%;margin-top:16px;opacity:.85}
.gw__tile .num-line{margin-top:14px;width:34px}
html.motion-off .w__i{transform:none!important;opacity:1!important}
/* richer surfaces */
.section--warm{background:linear-gradient(180deg,var(--band-warm) 0%,var(--paper) 100%)}
.section--soft{background:linear-gradient(180deg,var(--band-soft) 0%,rgba(243,247,238,.35) 100%)}
[data-theme="dark"] .section--soft{background:linear-gradient(180deg,var(--band-soft) 0%,rgba(24,44,31,.4) 100%)}
.section--forest{position:relative;overflow:hidden}
.section--forest::after{content:"";position:absolute;right:-12%;top:-40%;width:58%;height:180%;background:radial-gradient(closest-side,rgba(220,183,117,.13),rgba(220,183,117,0));pointer-events:none}

.hero__slide{will-change:opacity}
.banner{will-change:transform}
.card,.stat,.gw__tile,.logo,.faq__item,.reveal,.index a{will-change:transform}
/* site plan */
.plan-wrap{margin-top:clamp(30px,3.6vw,46px);background:var(--band-soft);border-radius:16px;padding:clamp(22px,3vw,40px)}
[data-theme="dark"] .plan-wrap{background:var(--band-soft)}
.plan{display:block;width:100%;height:auto;overflow:visible}
.plan [data-draw]{fill:none;stroke-linecap:round;stroke-linejoin:round}
.plan [data-fade]{opacity:0}
html.motion-off .plan [data-fade]{opacity:1}
html.motion-off .plan [data-draw]{stroke-dashoffset:0!important}
.plan__key{display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:22px}
.plan__key span{display:flex;align-items:center;gap:9px;font-size:12.5px;letter-spacing:.04em;color:var(--ink2)}
.plan__key i{width:14px;height:14px;border-radius:3px;display:block;flex:0 0 auto}
/* pinned timeline */
.tline__rail.is-pinned{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
.tline__rail.is-pinned .tline__track{will-change:transform}
.tline__node{transition:opacity .4s ease}
.tline__rail.is-pinned .tline__node{opacity:.45}
.tline__rail.is-pinned .tline__node.is-active,.tline__rail.is-pinned .tline__node.is-now{opacity:1}
@media (prefers-reduced-motion:reduce){
  .w__i{transform:none!important;opacity:1!important}
  .plan [data-fade]{opacity:1}
}

/* ============ real drawings ============ */
.planshot{position:relative;margin-top:clamp(26px,3vw,40px);border-radius:16px;overflow:hidden;background:#FFFFFF;border:1px solid var(--line);box-shadow:var(--shadow)}
.planshot img{display:block;width:100%;height:auto;transform-origin:50% 45%}
.planshot__glow{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 90px rgba(28,42,33,.10)}
.planshot__tag{position:absolute;left:18px;bottom:16px;z-index:2;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:6px;padding:9px 14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);font-weight:700}
[data-theme="dark"] .planshot{background:#F4F2EA}
[data-theme="dark"] .planshot__tag{background:rgba(255,255,255,.92);color:#2C3A2E}
.keyrow{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:22px}
.keyrow span{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;letter-spacing:.03em;color:var(--ink2);background:var(--band-warm);border:1px solid var(--line);border-radius:999px;padding:8px 15px}
.keyrow b{font-family:var(--serif);font-weight:400;font-size:15px;color:var(--figure)}
/* drawing gallery */
.dwgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:18px;margin-top:clamp(26px,3vw,38px);align-items:stretch}
.dwg{display:flex;flex-direction:column;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:zoom-in;padding:0;box-shadow:var(--shadow);transition:transform .3s ease,box-shadow .3s ease}
.dwg:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.dwg__img{display:block;width:100%;height:270px;object-fit:contain;object-position:50% 50%;background:#FFFFFF;padding:14px;flex:0 0 auto}
.dwg__meta{padding:20px 22px 22px;border-top:1px solid var(--line);flex:1 1 auto;display:flex;flex-direction:column}
.dwg__meta b{display:block;font-family:var(--serif);font-weight:400;font-size:18px;color:var(--ink);line-height:1.3}
.dwg__meta span{display:block;font-size:13.5px;line-height:1.6;color:var(--ink3);margin-top:8px}
.dwg__meta i{margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:7px;font-style:normal;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);font-weight:700;margin-top:14px}
/* lightbox */
.lb{position:fixed;inset:0;z-index:200;background:rgba(12,24,16,.93);display:none;align-items:center;justify-content:center;padding:clamp(16px,3vw,48px)}
.lb.is-open{display:flex}
.lb img{max-width:100%;max-height:86vh;object-fit:contain;border-radius:8px;background:#fff}
.lb__cap{position:absolute;left:0;right:0;bottom:18px;text-align:center;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:#DCE8D8}
.lb__x{position:absolute;top:18px;right:20px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:none;color:#fff;font-size:22px;line-height:1;cursor:pointer}
.lb__x:hover{border-color:var(--gold-pale);color:var(--gold-pale)}
@media (max-width:640px){.dwgs{grid-template-columns:1fr}}

@keyframes dashflow{to{stroke-dashoffset:-60}}
@keyframes pinpulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* ============ back to top ============ */
.totop{position:fixed;right:clamp(16px,2.4vw,32px);bottom:clamp(16px,2.4vw,32px);z-index:90;
  width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--forest);color:var(--cream);border:1px solid var(--forest);cursor:pointer;padding:0;
  box-shadow:0 14px 30px -14px rgba(28,42,33,.6);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .35s ease,transform .35s ease,visibility .35s,background .25s ease,border-color .25s ease}
.totop.is-on{opacity:1;visibility:visible;transform:translateY(0)}
.totop:hover{background:var(--gold-ink);border-color:var(--gold-ink)}
.totop svg{display:block;width:19px;height:19px}
.totop__ring{position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--gold);opacity:.45;pointer-events:none}
@media (max-width:640px){.totop{width:46px;height:46px}}
@media print{.totop{display:none}}

/* ============ cream quote band (home) ============ */
.section--cream{background:var(--cream);position:relative}
[data-theme="dark"] .section--cream{background:var(--band-soft)}
.section--cream .qband__quote{color:var(--ink)}
.section--cream .qband__mark{color:var(--gold-ink)}
.section--cream .qband__name{color:var(--muted)}
.section--cream .qband__rule{background:var(--gold-ink)}
.section--cream .flag{color:var(--gold-ink);border-color:var(--line3)}

/* hero fold: copy column keeps a comfortable measure, media bleeds right */
.hero__copy > .eyebrow{order:-1}
@media (max-width:1024px){
  .hero{min-height:0;flex-direction:column}
  .hero__copy{flex:1 1 auto;min-width:0;padding:clamp(30px,6vw,44px) clamp(20px,5vw,32px)}
  .hero__copy > *{width:100%;max-width:760px;margin-left:auto;margin-right:auto}
  .hero__title{font-size:clamp(32px,5.4vw,50px);max-width:760px}
  .hero__sub{max-width:760px}
  .hero__media{flex:1 1 auto;width:100%;aspect-ratio:1.5/1;align-self:auto;min-width:0}
}
@media (min-width:1025px) and (max-height:700px){
  .hero__copy{padding-top:clamp(18px,2vw,28px);padding-bottom:clamp(18px,2vw,28px)}
  .hero__title{font-size:clamp(28px,3vw,42px);margin-top:12px}
  .hero__sub{margin-top:14px;font-size:15px}
  .hero__actions{margin-top:20px}
}

/* even-column grids: 4 across on wide, 2 on mid, 1 on narrow */
@media (min-width:1100px){.gw,.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:560px){.gw,.stats{grid-template-columns:1fr}}

@media (max-width:760px){.twoup > h2{max-width:100%}}

/* 8-up flip tiles: 4 across wide, 2 mid, 1 narrow */
@media (min-width:1100px){.flips{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:560px){.flips{grid-template-columns:1fr}}
/* 3-up variant of the card grid (Planning) */
.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.cards--3{grid-template-columns:1fr}}

/* ============ at-a-glance: ten separate cards ============ */
.gcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:clamp(28px,3.4vw,40px)}
.gcard{background:var(--band-soft);border-radius:12px;padding:24px 22px;display:flex;flex-direction:column;
  border:1px solid rgba(44,98,66,.18);transition:transform .3s ease,box-shadow .3s ease}
.gcard:hover{transform:translateY(-3px);box-shadow:0 16px 32px -24px rgba(28,42,33,.5);border-color:var(--gold)}
.gcard--w{grid-column:span 2}
.gcard dt{margin:0;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);font-weight:700}
.gcard dd{margin:14px 0 0;font-size:16px;line-height:1.55;color:var(--ink15)}
@media (max-width:1100px){
  .gcards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gcard--w{grid-column:span 2}
}
@media (max-width:620px){
  .gcards{grid-template-columns:1fr}
  .gcard--w{grid-column:span 1}
}

/* ============ preview-shell only ============
   The design-page wrapper caps its host to one viewport, which releases the
   sticky header after the first screen. Real site pages are unaffected -
   these selectors only match inside the preview shell. */
.sc-host{height:auto!important;min-height:100%}
body:has(.sc-host) > div{height:auto!important;min-height:100%}

/* centred page header (Community) */
.phead--center{justify-content:center;text-align:center}
.phead--center .phead__main{flex:1 1 auto;display:flex;flex-direction:column;align-items:center}
.phead--center .h1{max-width:24ch;margin-left:auto;margin-right:auto}

/* connect band on cream */
.section--cream .connect__col h2{color:var(--ink)}
.section--cream .connect__col p{color:var(--ink2)}
.section--cream .eyebrow--pale{color:var(--gold-ink)}
.section--cream .btn--gold{background:var(--forest);border-color:var(--forest);color:var(--cream)}
.section--cream .btn--gold:hover{background:var(--gold-ink);border-color:var(--gold-ink);color:#FFFFFF}

/* ============ type consistency pass ============
   Small-caps labels had drifted across six sizes (10.5–13px) for what is one
   role. Normalised to two steps: 11.5px section labels, 10.5px micro labels. */
.eyebrow,.footer h4,.footer__where,.footer__always,.pull__by,.qband__name,
.tline__tag,.quote-card b,.index em,.group b{font-size:11.5px;letter-spacing:.18em}
.eyebrow{letter-spacing:.22em}
.strip__item b,.gcard dt,.grow dt,.logo__role,.quote-card i,.tline__when,
.logo__role,.emblem__name{letter-spacing:.12em}
.grow dt,.gcard dt{letter-spacing:.18em}

/* design system page */
.ds__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:clamp(28px,3.4vw,40px)}
.ds__grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ds__sw,.ds__card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px 22px;box-shadow:var(--shadow)}
.ds__chip{display:block;height:74px;border-radius:8px;border:1px solid rgba(28,42,33,.14);margin-bottom:18px}
.ds__sw b,.ds__card b{display:block;font-family:var(--serif);font-weight:400;font-size:20px;color:var(--ink)}
.ds__sw code,.ds__card code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--gold-ink);letter-spacing:.04em}
.ds__sw code{display:block;margin-top:6px}
.ds__role{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:12px}
.ds__sw p,.ds__card p{font-size:14.5px;line-height:1.65;color:var(--ink2);margin-top:12px}
.ds__two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:clamp(28px,3.4vw,40px)}
.ds__spec{color:var(--figure);margin-bottom:18px}
.ds__scale{margin-top:clamp(22px,2.6vw,32px);border-top:1px solid var(--line)}
.ds__row{display:grid;grid-template-columns:150px 1fr 220px;gap:20px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line)}
.ds__lab{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700}
.ds__ex{color:var(--ink);line-height:1.3}
.ds__row code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--gold-ink);text-align:right}
@media (max-width:900px){
  .ds__grid,.ds__grid--3,.ds__two{grid-template-columns:1fr}
  .ds__row{grid-template-columns:1fr;gap:8px}
  .ds__row code{text-align:left}
}

/* footer brand name on one line */
.footer__name{white-space:nowrap;font-size:clamp(16px,1.3vw,19px)}
@media (max-width:420px){.footer__name{font-size:16px}}

/* typeface specimen cards, set entirely in the face they describe */
.ds__card--serif,.ds__card--serif b,.ds__card--serif p,.ds__card--serif .ds__spec{font-family:var(--serif)}
.ds__card--serif b{font-size:21px;letter-spacing:.01em}
.ds__card--serif p{font-size:16px;line-height:1.7}
.ds__card--serif p.note{font-size:14.5px}
.ds__card--sans,.ds__card--sans b,.ds__card--sans p,.ds__card--sans .ds__spec{font-family:var(--sans)}
.ds__card--sans b{font-size:17px;font-weight:700;letter-spacing:.01em}
.ds__card--sans p{font-size:15.5px;line-height:1.7}
.ds__card--sans p.note{font-size:14px}
.ds__card--specimen{padding:28px 26px}

/* swatch grid: 4-up on wide, 2-up mid, 1-up narrow, 12 swatches divide by all three */
@media (min-width:1100px){.ds__grid:not(.ds__grid--3){grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ============ consistency pass 2 ============
   The class-only label block was being outranked by type-descendant rules
   (.footer p, .nav__name small). These compound selectors win, and one card
   radius token replaces the 12 / 14 / 22px spread. */
:root{--r-card:14px}
.footer p.footer__always{font-size:11.5px;letter-spacing:.18em}
.nav .nav__name small{font-size:10.5px;letter-spacing:.14em}
.card,.gcard,.reveal,.dwg,.quote-card,.stepcard,.stepcard__inner,.ds__card,.ds__sw,.glance{border-radius:var(--r-card)}

/* ============ responsive pass ============
   1. Nav no longer overflows at 360px: brand may shrink, name truncates, subtitle hides under 420px.
   2. 44px tap targets for the theme toggle, burger and hero dots on touch widths.
   3. Auto-fit grids replaced with fixed column counts so 3- and 4-item rows never leave an orphan. */
.nav__brand{flex:0 1 auto;min-width:0}
.nav__name{overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (max-width:420px){
  .nav__inner{gap:12px;padding-left:16px;padding-right:16px}
  .nav__name{font-size:14.5px}
  .nav .nav__name small{display:none}
}
@media (max-width:1023px){
  .icon-btn,.burger{width:44px;height:44px}
  .hero__dots{gap:0}
  .hero__dot{width:9px;height:9px;padding:18px;box-sizing:content-box;background-clip:content-box;border:0;box-shadow:none;position:relative}
  .hero__dot::after{content:"";position:absolute;inset:18px;border-radius:50%;border:1px solid rgba(255,255,255,.9);box-shadow:0 1px 6px rgba(10,24,15,.35)}
  .hero__dot.is-on::after{border-color:var(--gold-lt)}
}
/* 4-item grids: 4 → 2 → 1 */
.footer__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.cards,.dwgs{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1023px){.footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.footer__grid,.cards,.dwgs{grid-template-columns:1fr}}
/* 3-item grids: 3 → 1 (never 2 + 1) */
.tri,.quotes,.index,.bignums{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){
  .tri,.quotes,.index,.bignums{grid-template-columns:1fr}
  .bignum{border-right:0;border-bottom:1px solid var(--line);padding:26px 0 22px}
  .bignum:last-child{border-bottom:0}
}

/* logo walls: column count follows the group size so no group leaves a stray row */
.wall{grid-template-columns:repeat(4,minmax(0,1fr))}
.wall:has(> :nth-child(3):last-child),.wall:has(> :nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){
  .wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wall:has(> :nth-child(3):last-child),.wall:has(> :nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){.wall,.wall:has(> :nth-child(3):last-child),.wall:has(> :nth-child(6):last-child){grid-template-columns:1fr}}

/* 3-card variant must not inherit the 2-up rule above */
.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.cards--3{grid-template-columns:1fr}}

/* quote band on narrow screens: the 460px flex basis stranded the quote mark
   on its own row with the full flex gap beneath it. Stack it tight instead. */
@media (max-width:620px){
  .qband{display:block;padding-block:clamp(34px,7vw,44px)}
  .qband__mark{font-size:42px;line-height:1;display:block;margin-bottom:6px}
  .qband__body{flex:1 1 auto;min-width:0}
  .qband__quote{font-size:20px;line-height:1.5}
  .qband__by{margin-top:20px;gap:10px}
  .qband__rule{display:none}
}

/* keep the quote to a readable measure now that the body grows freely */
.qband__quote{max-width:34ch}

/* ============ hero intro: CSS-driven ============
   The first fold must never depend on JS. This was a GSAP tween that could
   stall (and did, in some shells), leaving the headline permanently at
   opacity 0. CSS keyframes cannot stall or be overwritten. */
@keyframes heroRise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes heroFade{from{opacity:0}to{opacity:1}}
.has-js .hero__media{animation:heroFade 1.3s cubic-bezier(.22,.61,.36,1) both}
.has-js .hero__copy > *{animation:heroRise 1.1s cubic-bezier(.22,.61,.36,1) both}
.has-js .hero__copy > :nth-child(1){animation-delay:.15s}
.has-js .hero__copy > :nth-child(2){animation-delay:.26s}
.has-js .hero__copy > :nth-child(3){animation-delay:.37s}
.has-js .hero__copy > :nth-child(4){animation-delay:.48s}
@media (prefers-reduced-motion:reduce){
  .has-js .hero__media,.has-js .hero__copy > *{animation:none}
}
/* brand line: the overflow:hidden added for the 360px nav fix clipped descenders */
.nav__name{line-height:1.25;padding-block:1px}
.hero__slide.no-tx{transition:none}

/* ============ iteration 2 (client change request, 11/09/2026) ============ */

/* white tiles need a hairline to read as cards at all */
.card--t2,.card--t4,.stat--t2,.stat--t4,.gw__tile--b,.gw__tile--d{border-color:var(--line2)}

/* hero: image on top, moving banner beneath it, copy underneath */
.hero{flex-direction:column;min-height:0}
.hero__media{order:0;flex:0 0 auto;width:100%;min-width:0;align-self:auto;
  height:calc(100svh - var(--nav-h) - var(--strip-h));min-height:340px}
.hero > .strip{flex:0 0 auto;width:100%;order:0}
.hero__copy{flex:0 0 auto;width:100%;min-width:0;max-width:1400px;margin:0 auto;
  padding:clamp(32px,3.8vw,56px) clamp(20px,4vw,44px) clamp(36px,4.2vw,64px)}
.hero__title{max-width:24ch;margin-top:0}
.hero__sub{max-width:64ch}


/* project at a glance: white cards, values set bold */
.gcard{background:var(--surface);border:1px solid var(--line2)}
.gcard dd{font-weight:700;color:var(--ink)}
.gcard--full{grid-column:span 4}
@media (max-width:1100px){.gcard--full{grid-column:span 2}}
@media (max-width:620px){.gcard--full{grid-column:span 1}}

/* two-up and pull quote were leaving a third of their container empty:
   the heading was capped at 6em and the body at 56ch, so neither grew. */
.twoup{gap:clamp(24px,4vw,72px)}
.twoup > h2{flex:0 0 clamp(240px,29%,360px);max-width:none}
.twoup__body{flex:1 1 0;min-width:0;max-width:none}
.twoup__body .body{max-width:none}
.qband__quote{max-width:46ch}
@media (max-width:820px){
  .twoup > h2{flex:1 1 100%}
  .twoup__body{flex:1 1 100%}
}

/* video embeds (About BAPS) */
.vid{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--forest);
  border:1px solid var(--line2);box-shadow:var(--shadow)}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.vid--lead{margin-top:clamp(26px,3vw,38px);max-width:none}
.vids{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:1000px){.vids{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.vids{grid-template-columns:1fr}}

/* multi-paragraph and bulleted FAQ answers */
.faq__a > p + p,.faq__a > ul + p{margin-top:15px}
.faq__a ul{margin:14px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:9px}
.faq__a li{line-height:1.7}
.faq .group{margin:clamp(30px,3.6vw,44px) 0 16px}
.faq .group:first-child{margin-top:0}

/* .card rows: text sits top-aligned, so equalise the rhythm rather than
   letting short cards float in empty space */
.cards .card{gap:0}
.cards .card > p{margin-top:12px}

/* the FAQ list was capped at 940px inside an 1180px container, and each answer
   again at 740px, both left the band a fifth short. Fill the container; keep
   the answer to a readable measure. */
.faq{max-width:none}
.faq__a{max-width:none;padding-right:0}
@media (max-width:700px){.faq__a{padding-right:0}}

/* glance cards on a white section: lift them off the ground with the site's
   own card shadow, since a white card on white needs more than a hairline */
.gcard{box-shadow:var(--shadow);border-color:var(--line2)}
.gcard:hover{box-shadow:var(--shadow-lg);border-color:var(--gold)}

/* .section--white was a no-op class relying on the body colour, make the
   intent explicit so it survives any change to the page ground */
.section--white{background:var(--paper)}

/* anchor jumps clear the sticky header (replaces the JS scroll library's offset) */
html{scroll-padding-top:96px}
@media (max-width:1023px){html{scroll-padding-top:76px}}

@media (max-width:1023px){:root{--nav-h:61px; --strip-h:42px}}
@media (max-width:620px){:root{--strip-h:56px}}

/* ============ question form (Community → Submit a question) ============ */
.qform{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-card);
  padding:clamp(24px,2.6vw,34px);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:20px}
.qform__row{display:flex;flex-direction:column;gap:9px}
.qform__label{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);font-weight:700}
.qform__input{font-family:var(--sans);font-size:16px;line-height:1.5;color:var(--ink);
  background:var(--paper);border:1px solid var(--line2);border-radius:8px;padding:13px 15px;width:100%;
  min-height:48px;transition:border-color .2s ease,box-shadow .2s ease}
.qform__input:hover{border-color:var(--gold)}
.qform__input:focus{outline:0;border-color:var(--forest);box-shadow:0 0 0 3px rgba(44,98,66,.16)}
.qform__area{min-height:132px;resize:vertical}
.qform__foot{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:20px}
.qform__note{font-size:12.5px;line-height:1.6;color:var(--muted);margin:0;flex:1 1 240px;min-width:0}
.qform__submit{flex:0 0 auto;min-height:48px}
.qform__err{font-size:12.5px;color:#9B2C1E;font-weight:600;display:none}
.qform__row.is-bad .qform__input{border-color:#9B2C1E;box-shadow:0 0 0 3px rgba(155,44,30,.12)}
.qform__row.is-bad .qform__err{display:block}
.qform__done{margin:0;font-size:15px;line-height:1.7;color:var(--ink15);background:var(--band-soft);
  border:1px solid rgba(44,98,66,.2);border-left:3px solid var(--forest);border-radius:8px;padding:16px 18px}
[data-theme="dark"] .qform__err{color:#F0A091}
[data-theme="dark"] .qform__row.is-bad .qform__input{border-color:#F0A091}

/* ============ footer on light sage (#EDF3E6) ============
   The ground flips light, so every colour in the footer flips with it -
   light-on-green ink would be invisible. Dark theme keeps a dark footer. */
:root{--footer-bg:#EDF3E6}
[data-theme="dark"]{--footer-bg:#132519}
.footer{background:var(--footer-bg)}

:root .footer h4,
:root .footer__where,
:root .footer p.footer__sanskrit{color:var(--gold-ink)}
:root .footer__name{color:var(--ink)}
:root .footer p,
:root .footer__ack{color:var(--ink2)}
:root .footer p.footer__always,
:root .footer__bar span,
:root .footer__contact i{color:var(--muted)}
:root .footer__links a,
:root .footer__contact div,
:root .footer__contact a{color:var(--ink15)}
:root .footer__links a:hover,
:root .footer__contact a:hover{color:var(--gold-ink)}
:root .footer__contact,
:root .footer__bar{border-top-color:rgba(28,42,33,.16)}
:root .footer__chip{background:var(--paper);border:1px solid rgba(28,42,33,.14)}

/* dark theme: restore the light-on-dark set the base rules assume */
[data-theme="dark"] .footer h4,
[data-theme="dark"] .footer__where,
[data-theme="dark"] .footer p.footer__sanskrit{color:var(--gold-pale)}
[data-theme="dark"] .footer__name{color:#FFFFFF}
[data-theme="dark"] .footer p,
[data-theme="dark"] .footer__ack{color:#C9D9C4}
[data-theme="dark"] .footer p.footer__always,
[data-theme="dark"] .footer__bar span,
[data-theme="dark"] .footer__contact i{color:#B9CCB4}
[data-theme="dark"] .footer__links a,
[data-theme="dark"] .footer__contact div,
[data-theme="dark"] .footer__contact a{color:#EAF1E6}
[data-theme="dark"] .footer__contact,
[data-theme="dark"] .footer__bar{border-top-color:rgba(246,243,234,.18)}
[data-theme="dark"] .footer__chip{background:var(--cream);border:0}

/* Green Wedge outcomes: 9 tiles, 3 across divides exactly (3/3/3), so no
   orphan row at any width. Tree figures occupy the first five in source
   order, keeping them adjacent. */
.gw{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){.gw{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.gw{grid-template-columns:1fr}}

/* numbers band now carries 8 tiles, 4 across divides exactly (4/4) */
.stats{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.stats{grid-template-columns:1fr}}

/* ============ before / after comparison slider ============
   Both drawings sit at the same scale in one frame; the handle wipes between
   them. object-fit:contain so neither plan is ever cropped. */
.cmp{margin-top:clamp(26px,3vw,38px)}
.cmp__frame{position:relative;aspect-ratio:1404/986;border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--line2);background:var(--paper);box-shadow:var(--shadow);--p:50%}
.cmp__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.cmp__after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--p))}
.cmp__tag{position:absolute;top:16px;z-index:3;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--cream);background:rgba(20,38,25,.86);padding:8px 14px;border-radius:4px}
.cmp__tag--l{left:16px}
.cmp__tag--r{right:16px;background:var(--forest)}
.cmp__line{position:absolute;top:0;bottom:0;left:var(--p);width:2px;background:var(--cream);z-index:4;
  transform:translateX(-1px);box-shadow:0 0 0 1px rgba(20,38,25,.25)}
.cmp__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;
  border-radius:50%;background:var(--cream);border:1px solid rgba(20,38,25,.2);color:var(--forest);
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px -12px rgba(20,38,25,.6)}
.cmp__grip svg{width:22px;height:22px}
.cmp__range{position:absolute;inset:0;z-index:5;width:100%;height:100%;margin:0;padding:0;
  background:none;border:0;appearance:none;-webkit-appearance:none;cursor:ew-resize;touch-action:pan-y}
.cmp__range:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:var(--r-card)}
.cmp__range::-webkit-slider-thumb{-webkit-appearance:none;width:56px;height:100%;background:none;cursor:ew-resize}
.cmp__range::-moz-range-thumb{width:56px;height:100vh;background:none;border:0;cursor:ew-resize}
.cmp__range::-moz-range-track{background:none;border:0}
@media (max-width:560px){
  .cmp__tag{font-size:9.5px;letter-spacing:.14em;padding:7px 11px;top:12px}
  .cmp__tag--l{left:12px}.cmp__tag--r{right:12px}
  .cmp__grip{width:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){.cmp__after,.cmp__line{transition:none}}

/* "Ask a question" CTA on the light sage ground, with a defining border.
   The question form's Submit shares this treatment so the two primary
   actions on the site read as one button style. */
.nav .btn--primary,
.menu .btn--primary,
.qform .btn--primary{background:var(--footer-bg);color:var(--forest);border:1px solid var(--forest)}
.nav .btn--primary:hover,
.menu .btn--primary:hover,
.qform .btn--primary:hover{background:var(--forest);color:var(--cream);border-color:var(--forest)}
[data-theme="dark"] .nav .btn--primary,
[data-theme="dark"] .menu .btn--primary,
[data-theme="dark"] .qform .btn--primary{background:var(--footer-bg);color:var(--gold-pale);border-color:var(--gold-pale)}
[data-theme="dark"] .nav .btn--primary:hover,
[data-theme="dark"] .menu .btn--primary:hover,
[data-theme="dark"] .qform .btn--primary:hover{background:var(--gold-pale);color:#132519;border-color:var(--gold-pale)}

/* full-container prose (About BAPS, the closing two paragraphs) */
.prose{margin-top:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;gap:18px}
.prose .body{max-width:none}

/* lead paragraphs fill their container, the 66ch cap left a third of the
   band empty. Applied site-wide so every section reads the same. */
.lead{max-width:none}

/* ============ quote slider (Our Partners → In their words) ============
   One quote at a time on a sliding track; arrows, dots, swipe and arrow keys. */
.qslide{position:relative}
.qslide__view{position:relative;overflow:hidden;transition:height .5s cubic-bezier(.4,.05,.2,1)}
.qslide__track{display:flex;align-items:flex-start;transition:transform .55s cubic-bezier(.4,.05,.2,1);will-change:transform}
.qslide__item{flex:0 0 100%;min-width:0;background:var(--surface);border:1px solid var(--line2);
  border-radius:var(--r-card);padding:clamp(28px,3.4vw,44px);
  display:flex;gap:clamp(26px,4vw,56px);align-items:flex-start}
.qslide__logo{flex:0 0 clamp(150px,17%,210px);min-width:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;padding:20px;background:var(--paper);border:1px solid var(--line);border-radius:10px}
.qslide__role{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  font-weight:700;text-align:center;line-height:1.5}
.qslide__logo img{max-width:100%;max-height:74px;width:auto;height:auto;display:block;object-fit:contain}
.qslide__body{flex:1 1 0;min-width:0}
/* real quotes run several sentences, so the measure matters more than display size */
.qslide__item p{font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.6vw,21px);
  line-height:1.65;color:var(--ink);margin:0;max-width:none}
.qslide__item p + p{margin-top:15px}
.qslide__item b{display:block;margin-top:26px;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--forest);font-weight:700}
.qslide__item i{display:block;margin-top:8px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-ink);font-style:normal;font-weight:700}
@media (max-width:760px){
  .qslide__item{flex-direction:column;gap:22px}
  .qslide__logo{flex:0 0 auto;align-self:flex-start;min-width:160px}
}
/* controls ride the group label row, so they are visible before the card */
.qslide__nav{display:flex;align-items:center;gap:10px;margin:0;flex:0 0 auto}
.qslide__arrow{width:38px;height:38px;flex:0 0 38px;border-radius:50%;border:1px solid var(--line2);
  background:var(--surface);color:var(--forest);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;
  transition:border-color .25s ease,background .25s ease,color .25s ease}
.qslide__arrow:hover{border-color:var(--forest);background:var(--forest);color:var(--cream)}
.qslide__arrow svg{width:16px;height:16px}
.qslide__count{font-family:var(--serif);font-size:15px;letter-spacing:.06em;min-width:44px;text-align:center;
  color:var(--muted);font-variant-numeric:tabular-nums}
@media (max-width:1023px){
  .qslide__arrow{width:44px;height:44px;flex:0 0 44px}
}

/* leading phrase of each figure label and Green Wedge tile: bold, no underline */
.stat__label b,.gw__txt b{font-weight:700;color:var(--ink);text-decoration:none}

/* ============ headings in sandstone gold ============
   All section and page headings take the "Current status" label colour.
   Headings on forest grounds use the pale gold so they stay legible. */
.h1,.h2,.h3,.hero__title,.ds__card b,.ds__sw b,.card .h3,.reveal__title,.stepcard__title{color:var(--gold-ink)}
.section--forest .h1,.section--forest .h2,.section--forest .h3,
.connect__col h2,.qband__quote,.flip__b .h3{color:var(--gold-pale)}
[data-theme="dark"] .h1,[data-theme="dark"] .h2,[data-theme="dark"] .h3,
[data-theme="dark"] .hero__title,[data-theme="dark"] .ds__card b,[data-theme="dark"] .ds__sw b,
[data-theme="dark"] .card .h3,[data-theme="dark"] .reveal__title{color:var(--gold-pale)}

/* sub-heading-scale text that the heading pass missed: FAQ questions, the
   quote slider attribution, and the Connect band heading on cream */
.faq__q,.section--cream .connect__col h2,.qslide__item b{color:var(--gold-ink)}
[data-theme="dark"] .faq__q,[data-theme="dark"] .qslide__item b{color:var(--gold-pale)}
[data-theme="dark"] .section--cream .connect__col h2{color:var(--gold-pale)}

/* The at-a-glance band holds white cards top to bottom, so it uses a flat
   sage ground rather than the section gradient, which fades to near-white
   and would leave the lower cards with nothing to sit against. */
.section--soft:has(> .wrap > .gcards){background:var(--band-soft)}
[data-theme="dark"] .section--soft:has(> .wrap > .gcards){background:var(--band-soft)}

/* ============ timeline, numbered circles on a single rail ============
   Replaces the zig-zag pinned cards: one column, numbered circles joined by
   a straight rail. Completed steps solid, the current step gold-ringed,
   future steps dashed. */
.tl{list-style:none;margin:clamp(30px,3.6vw,44px) 0 0;padding:0;position:relative}
.tl::before{content:"";position:absolute;left:23px;top:24px;bottom:24px;width:1px;background:var(--line2)}
.tl__step{position:relative;display:flex;gap:clamp(18px,2.4vw,30px);padding-bottom:clamp(26px,3vw,38px)}
.tl__step:last-child{padding-bottom:0}
.tl__mark{position:relative;z-index:1;flex:0 0 46px;width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--t3);color:var(--forest);
  border:1px solid rgba(44,98,66,.22);
  font-family:var(--serif);font-size:16px;letter-spacing:.02em}
.tl__step.is-now .tl__mark{background:var(--surface);color:var(--gold-ink);
  border:2px solid var(--gold);box-shadow:0 0 0 5px rgba(184,137,60,.16)}
.tl__step.is-future .tl__mark{background:var(--surface);color:var(--muted);border:1px dashed var(--line2)}
.tl__body{flex:1 1 0;min-width:0;padding-top:4px}
.tl__when{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-ink);font-weight:700}
.tl__title{font-family:var(--serif);font-size:clamp(19px,1.9vw,23px);line-height:1.3;
  color:var(--gold-ink);margin:8px 0 0}
.tl__text{font-size:15.5px;line-height:1.72;color:var(--ink2);margin:10px 0 0;max-width:72ch}
.tl__flag{display:inline-block;margin-top:14px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--gold-ink);background:var(--band-soft);border:1px solid rgba(184,137,60,.4);
  border-radius:999px;padding:7px 14px}
[data-theme="dark"] .tl__when,[data-theme="dark"] .tl__title,[data-theme="dark"] .tl__flag{color:var(--gold-pale)}
@media (max-width:560px){
  .tl::before{left:18px}
  .tl__mark{flex:0 0 36px;width:36px;height:36px;font-size:14px}
}

/* ============ BAPS in Australia figures as tiles ============
   Each figure sits in its own card, alternating light green / white like
   every other tile grid on the site. Labels set bold. */
.bignums{gap:16px;border-top:0;grid-template-columns:repeat(3,minmax(0,1fr))}
.bignum{border-right:0;border-radius:var(--r-card);border:1px solid var(--line2);
  padding:clamp(26px,3vw,36px) clamp(22px,2.4vw,28px)}
.bignum:nth-child(odd){background:var(--t1)}
.bignum:nth-child(even){background:var(--surface)}
.bignum__l{font-weight:700;color:var(--ink);max-width:26ch}
@media (max-width:900px){.bignums{grid-template-columns:1fr}}

/* Service in action tiles: alternate light green / white, matching every
   other tile grid. The mixed solid/dashed borders are dropped for one
   consistent hairline. */
.tri__item{border-radius:var(--r-card)}
.tri__item:nth-child(odd){background:var(--t1)}
.tri__item:nth-child(even){background:var(--surface)}
.tri__item:nth-child(1),.tri__item:nth-child(2),.tri__item:nth-child(3){
  border:1px solid var(--line2);border-top:4px solid var(--forest)}
.tri__item:nth-child(even){border-top-color:var(--gold)}

/* ============ social handles (About BAPS) ============ */
.socials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px}
.social{display:flex;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--line2);
  border-radius:var(--r-card);padding:20px 22px;text-decoration:none;
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.social:nth-child(even){background:var(--t1)}
.social:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:var(--shadow)}
.social__ico{flex:0 0 44px;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:var(--forest);color:var(--cream)}
.social__ico svg{width:21px;height:21px}
.social__meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.social__kind{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);font-weight:700}
.social__name{font-family:var(--serif);font-size:17px;line-height:1.3;color:var(--ink)}
.social__handle{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:900px){.socials{grid-template-columns:1fr}}

/* ============ community gallery marquee (About BAPS) ============
   Two rows drifting in opposite directions. Each track holds its images
   twice so the loop is seamless; translating by -50% lands exactly on the
   duplicate. Pauses on hover and for reduced-motion. */
.mq{display:flex;flex-direction:column;gap:12px;overflow:hidden;padding:clamp(24px,3vw,36px) 0}
.mq__row{overflow:hidden}
.mq__track{display:flex;gap:12px;width:max-content;will-change:transform}
.mq__row--a .mq__track{animation:mqA 64s linear infinite}
.mq__row--b .mq__track{animation:mqB 58s linear infinite}
@keyframes mqA{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mqB{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.mq:hover .mq__track{animation-play-state:paused}
.mq__item{flex:0 0 auto;width:clamp(200px,20vw,280px);aspect-ratio:4/3;padding:0;overflow:hidden;
  border:1px solid var(--line2);border-radius:12px;background:var(--surface);cursor:zoom-in;display:block;
  transition:border-color .25s ease,box-shadow .25s ease}
.mq__item:hover{border-color:var(--gold);box-shadow:var(--shadow)}
.mq__item img{width:100%;height:100%;object-fit:cover;display:block}
@media (prefers-reduced-motion:reduce){.mq__track{animation:none}.mq__row{overflow-x:auto}}

/* The numbers band holds 7 tiles. 7 divides by nothing, so the last tile spans
   two cells and the final row fills exactly. Tint cannot come from list order:
   sequential alternation only checkerboards when the column count is odd, and
   at 4-up it read as vertical stripes. Each breakpoint sets its own parity. */
.stats{grid-template-columns:repeat(12,minmax(0,1fr))}
.stats > .stat{grid-column:span 3}
.stats > .stat:nth-child(n+5){grid-column:span 4}
@media (min-width:1101px){
  /* rows: 1 2 3 4 / 5 6 7(span) -> G W G W / W G W */
  .stats > .stat:nth-child(1),.stats > .stat:nth-child(3),
  .stats > .stat:nth-child(6){background:var(--t1);border-color:transparent}
  .stats > .stat:nth-child(2),.stats > .stat:nth-child(4),
  .stats > .stat:nth-child(5),.stats > .stat:nth-child(7){background:var(--t2);border-color:var(--line2)}
}
@media (max-width:1100px) and (min-width:621px){
  .stats > .stat,.stats > .stat:nth-child(n+5){grid-column:span 6}
  .stats > .stat:last-child{grid-column:span 12}
  /* rows: 1 2 / 3 4 / 5 6 / 7(span) -> G W / W G / G W / W */
  .stats > .stat:nth-child(1),.stats > .stat:nth-child(4),
  .stats > .stat:nth-child(5){background:var(--t1);border-color:transparent}
  .stats > .stat:nth-child(2),.stats > .stat:nth-child(3),
  .stats > .stat:nth-child(6),.stats > .stat:nth-child(7){background:var(--t2);border-color:var(--line2)}
}
@media (max-width:620px){
  .stats > .stat,.stats > .stat:nth-child(n+5),
  .stats > .stat:last-child{grid-column:span 12}
  .stats > .stat:nth-child(odd){background:var(--t1);border-color:transparent}
  .stats > .stat:nth-child(even){background:var(--t2);border-color:var(--line2)}
}

/* ============ partner group: quote panel above its logo wall ============ */
.qgroup{margin-top:clamp(34px,4vw,52px)}
.qgroup:first-child{margin-top:0}
.qgroup .group{margin:0 0 16px}
.qgroup + .wall{margin-top:14px}
.wall + .group,.wall + .qgroup{margin-top:clamp(34px,4vw,52px)}
@media (max-width:620px){
  .qgroup .group{flex-wrap:wrap}
  .qgroup .group > i{order:3;flex-basis:100%}
  .qslide__nav{margin-left:auto}
}

/* image placeholders read warm cream, not forest, while loading */
.vid,.mq__item{background:var(--cream)}
[data-theme="dark"] .hero__media,[data-theme="dark"] .banner,
[data-theme="dark"] .vid,[data-theme="dark"] .mq__item{background:#1E3826}

/* menu drawer footer: the drawer was two-thirds empty below the CTA */
.menu__foot{margin-top:auto;padding-top:26px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:14px}
.menu__label{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);font-weight:700}
.menu__socials{display:flex;flex-direction:column;gap:8px}
.menu .menu__socials a{display:flex;align-items:center;gap:13px;padding:9px 0;border-bottom:0;
  font-size:14.5px;font-weight:600;color:var(--ink15);min-height:44px}
.menu .menu__socials a:hover{color:var(--gold-ink)}
.menu__socials a > span{display:flex;flex-direction:column;gap:2px;min-width:0}
.menu__socials small{font-size:11.5px;font-weight:400;color:var(--muted);letter-spacing:.02em}
.menu__ico{flex:0 0 34px;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:var(--forest);color:var(--cream)}
.menu__ico svg{width:17px;height:17px}

/* The word-reveal splitter wraps each whitespace-separated word in .w, but a
   hyphenated compound could still break inside its own box, putting
   "landscape-" and "led" on separate lines. Keep each word unit whole. */
.w__i{white-space:nowrap}

/* at-a-glance grid: 12 columns, so rows divide by 2, 3 and 1 alike. Spans are
   assigned per fact length — one-liners share a 3-up row, longer facts take a
   half, and the longest runs full width. Nothing wraps to three lines. */
.gcards{grid-template-columns:repeat(12,minmax(0,1fr))}
.gcard--4{grid-column:span 4}
.gcard--6{grid-column:span 6}
.gcard--12{grid-column:span 12}
@media (max-width:1100px){
  .gcard--4,.gcard--6{grid-column:span 6}
  .gcard--12{grid-column:span 12}
}
@media (max-width:620px){
  .gcard--4,.gcard--6,.gcard--12{grid-column:span 12}
}

/* single-quote groups: the slider chrome is gone, so the one slide simply sits
   in flow rather than being positioned inside a measured viewport */
.qgroup:not([data-qslide]) .qslide__view{height:auto!important;overflow:visible}
.qgroup:not([data-qslide]) .qslide__track{display:block}
.qgroup:not([data-qslide]) .qslide__item{position:static;opacity:1;transform:none}

/* Home quote slider carries no section label, so the rule collapses and the
   nav sits alone above the card */
.group--bare > i{display:none}
.group--bare{justify-content:flex-end;margin-bottom:14px}

/* ============ bare quote slider (Home) ============
   The same slider mechanics as Partners, but set as a pull quote on the cream
   band rather than in a card: no box, upright serif, hanging quote mark. */
.qgroup--bare{padding-block:clamp(40px,5vw,68px)}
.qgroup--bare .qslide__item{background:none;border:0;border-radius:0;padding:0;display:block}
.qgroup--bare .qslide__body{position:relative;padding-left:clamp(52px,6vw,96px)}
.qgroup--bare .qslide__body::before{content:"\201C";position:absolute;left:0;top:-2px;
  font-family:var(--serif);font-size:clamp(52px,5vw,76px);line-height:1;color:var(--gold)}
.qgroup--bare .qslide__item p{font-family:var(--serif);font-style:normal;
  font-size:clamp(19px,1.95vw,26px);line-height:1.55;color:var(--ink);max-width:none}
.qgroup--bare .qslide__item p + p{margin-top:18px}
.qgroup--bare .qslide__item b{display:inline;margin-top:0;color:var(--muted);letter-spacing:.16em}
.qgroup--bare .qslide__item b::before{content:"";display:inline-block;width:28px;height:1px;
  background:var(--ink);opacity:.5;vertical-align:middle;margin-right:14px}
.qgroup--bare .qslide__item i{display:inline;margin:0}
.qgroup--bare .qslide__item i::before{content:"\00B7";color:var(--muted);margin:0 9px;font-weight:700}
.qgroup--bare .qslide__attrib{margin-top:clamp(22px,2.4vw,30px);line-height:1.9}
@media (max-width:620px){
  .qgroup--bare .qslide__body{padding-left:0;padding-top:56px}
  .qgroup--bare .qslide__body::before{top:0}
  .qgroup--bare .qslide__item b::before{display:none}
}

/* Carded partner quotes: the two Peddle Thorp statements differ by ~200px in
   height, and a JS-measured sliding viewport left the shorter one sitting in
   a taller box. Fade in place at natural height instead — no measurement, no
   transform. The bare Home slider keeps its slide behaviour. */
.qgroup:not(.qgroup--bare) .qslide__view{height:auto!important;overflow:visible}
.qgroup:not(.qgroup--bare) .qslide__track{display:block;transform:none!important}
.qgroup:not(.qgroup--bare) .qslide__item{display:none}
.qgroup:not(.qgroup--bare) .qslide__item.is-on{display:flex;animation:qFade .45s ease both}
@keyframes qFade{from{opacity:0}to{opacity:1}}
@media (max-width:760px){
  .qgroup:not(.qgroup--bare) .qslide__item.is-on{flex-direction:column}
}

/* Between the burger breakpoint and ~1220px the five links, the CTA and the two
   icon buttons leave the brand ~10px short, so it truncated to an ellipsis.
   Free the space from the link gap and CTA padding and let the brand hold its
   full width; the flexible spacer takes up any slack. */
@media (min-width:1024px){
  .nav__brand{flex:0 0 auto}
  .nav__name{overflow:visible;text-overflow:clip}
}
@media (min-width:1024px) and (max-width:1220px){
  .nav__links{gap:14px}
  .nav__links .btn{padding-left:14px;padding-right:14px}
  .nav__link{font-size:13px}
}

/* Footer columns: four equal tracks left the two short link lists with far more
   room than they need and squeezed the Acknowledgement of Country into a narrow
   measure. Give the links only what they use and hand the rest to the
   Acknowledgement, which carries the most text. */
@media (min-width:1024px){
  .footer__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.62fr) minmax(0,.62fr) minmax(0,1.6fr)}
}
@media (min-width:640px) and (max-width:1023px){
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* .footer p capped every footer paragraph at 340px, so the Acknowledgement
   stayed narrow no matter how wide its column grew. Let it fill the column. */
.footer .footer__ack,
.footer p.footer__sanskrit,
.footer p.footer__always{max-width:none}

/* At 360px the chip, the two 44px tool buttons and the gaps leave ~162px for a
   172px brand. Step the type down once more and tighten the chip and gaps
   rather than truncating; the 44px tap targets are left alone. */
@media (max-width:380px){
  .nav__inner{gap:10px;padding-left:14px;padding-right:14px}
  .nav__name{font-size:13.5px}
  .nav__chip{width:34px;height:34px}
  .nav__chip img{width:22px;height:27px}
  .nav__brand{gap:9px}
  .nav__tools{gap:4px;margin-left:0}
}

/* Below ~340px no type size keeps the full name on one line beside a 44px
   burger. Let it wrap to two lines rather than truncate — the brand reads in
   full, and script.js measures the taller header so the hero still ends on
   the fold. */
@media (max-width:340px){
  .nav__name{white-space:normal;font-size:13px;line-height:1.2;overflow:visible;text-overflow:clip}
}

/* Hero copy centred under the image: the title on one line, the sub in two.
   Both caps were set against the old container, so the title wrapped at 24ch
   and the sub broke to three lines. */
.hero__copy{text-align:center;align-items:center}
.hero__title{max-width:none;margin-left:auto;margin-right:auto}
.hero__sub{max-width:78ch;margin-left:auto;margin-right:auto}
.hero__actions{justify-content:center}
@media (max-width:900px){
  .hero__title{font-size:clamp(26px,4.4vw,40px)}
  .hero__sub{max-width:52ch}
}