/* BSS Gurugram — global layout and ten homepage sections. */
/* styles.css — homepage and shared rules */


:root{--ivory:#f7f2e8;--paper:#fffdf7;--ink:#261b16;--muted:#756a61;--maroon:#6c271f;--saffron:#c97924;--gold:#d9aa52;--sage:#66755a;--sand:#ddc5a8;--nav-h:72px;--radius:28px;--shadow:0 -22px 70px rgba(42,27,18,.16);font-family:"Montserrat","Segoe UI",Arial,sans-serif;color:var(--ink);background:#1f1714;color-scheme:light}


*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#211714;overflow-x:hidden}
body.modal-open{overflow:hidden}
button,input,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-100px;left:1rem;z-index:9999;background:#fff;color:#111;padding:.8rem 1rem}
.skip-link:focus{top:1rem}
.staging-ribbon{position:fixed;left:50%;bottom:12px;z-index:900;transform:translateX(-50%);padding:.5rem .85rem;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(31,23,20,.78);backdrop-filter:blur(12px);color:#fff;font-size:11px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}


.site-nav{position:fixed;inset:0 0 auto;z-index:800;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,3.5vw,64px);background:rgba(255,253,247,.92);border-bottom:1px solid rgba(86,55,38,.12);backdrop-filter:blur(18px);transform:translateY(-110%);transition:transform .45s ease}
.site-nav.is-visible{transform:none}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--ink);min-width:180px}
.brand-mark{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;color:#fff;background:var(--maroon);font-size:18px}
.brand b,.brand small{display:block}
.brand b{font-family:Georgia,serif;font-size:16px}
.brand small{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.primary-menu{display:flex;align-items:center;gap:clamp(10px,1.35vw,25px);margin:0;padding:0;list-style:none}
.primary-menu>li{position:relative}
.primary-menu a,.primary-menu button{border:0;background:none;color:var(--ink);text-decoration:none;font-size:12px;font-weight:650;white-space:nowrap;padding:26px 0;cursor:pointer}
.primary-menu>li>button:after{content:"⌄";margin-left:5px;color:var(--saffron)}
.primary-menu ul{position:absolute;top:58px;left:-18px;min-width:230px;margin:0;padding:10px 18px;list-style:none;background:#fff;border:1px solid #eee2d3;border-radius:0 0 16px 16px;box-shadow:0 18px 40px rgba(45,27,16,.14);opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s}
.primary-menu li:hover ul,.primary-menu .menu-open ul,.primary-menu li:focus-within ul{opacity:1;visibility:visible;transform:none}
.primary-menu ul a{display:block;padding:9px 2px;color:#4e423a}
.nav-toggle{display:none;border:0;background:none;padding:10px}
.nav-toggle span:not(.sr-only){display:block;width:24px;height:2px;margin:4px;background:var(--ink)}


.eyebrow{margin:0 0 12px;color:var(--saffron);font-size:11px;line-height:1.2;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.text-link{display:inline-flex;gap:10px;align-items:center;color:inherit;text-decoration:none;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding-bottom:7px;border-bottom:1px solid currentColor}
.text-link span{transition:transform .2s}
.text-link:hover span{transform:translate(3px,-3px)}
.text-link.dark{color:var(--maroon)}




.cards{position:relative;z-index:20;margin-top:-100svh}
.story-card{position:sticky;top:var(--nav-h);min-height:calc(100svh - var(--nav-h));overflow:hidden;border-radius:var(--radius) var(--radius) 0 0;box-shadow:var(--shadow);background:var(--paper)}
.story-card:first-child{top:0;min-height:100svh}
.section-shell{width:min(1440px,100%);min-height:inherit;margin:auto;padding:clamp(54px,6.5vh,92px) clamp(28px,6vw,92px);position:relative}
.section-number{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid rgba(108,39,31,.28);border-radius:50%;font-size:11px;color:var(--maroon);margin-bottom:20px}
.section-number.light{color:#fff;border-color:rgba(255,255,255,.35)}
.section-shell h2{font:400 clamp(38px,4.7vw,72px)/.98 Georgia,serif;letter-spacing:-.04em;margin:0 0 18px}
.section-shell h3{font:400 clamp(22px,2vw,34px)/1.05 Georgia,serif;margin:0 0 12px}
.placeholder{color:#6f655e}
.button-link{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;background:var(--maroon);color:#fff;text-decoration:none;padding:13px 20px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.button-link.light{background:#f0c270;color:#3a2118}
.button-link.outline{background:transparent;color:var(--maroon);border:1px solid var(--maroon)}
blockquote{margin:22px 0;padding:15px 18px;border-left:2px solid var(--gold);background:rgba(255,255,255,.4);font:italic 13px/1.5 Georgia,serif;color:#776a61}


.section-guru{background:linear-gradient(135deg,#fffaf0,#eee0c9)}
.guru-layout{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:clamp(24px,4vw,70px);align-items:center}
.guru-copy{max-width:360px}
.guru-copy p:not(.eyebrow){font-size:14px;line-height:1.75}
.guru-copy-right{justify-self:end}
.guru-portrait{position:relative;align-self:end;text-align:center;min-height:72vh;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.guru-portrait h2{position:absolute;z-index:3;top:1%;font-size:clamp(25px,2.6vw,40px);line-height:1.1;width:130%}
.guru-portrait img{position:relative;z-index:2;max-height:62vh;max-width:100%;object-fit:contain;filter:drop-shadow(0 20px 24px rgba(74,42,18,.24))}
.halo{position:absolute;z-index:1;top:26%;width:min(27vw,370px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#ffdf8c 0,#e49a38 30%,rgba(200,110,27,.18) 67%,transparent 70%);box-shadow:0 0 80px rgba(212,149,60,.35)}



.section-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.6)}


















.botanical-mark{position:absolute;right:-3vw;top:-8vw;font:300 34vw Georgia,serif;color:rgba(100,119,85,.035)}
























.section-mandir{background:#4b271d;color:#fff}
.mandir-layout{display:grid;grid-template-columns:55fr 45fr;gap:clamp(38px,6vw,96px);align-items:center}
.mandir-poster{position:relative;aspect-ratio:16/10;border-radius:24px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.28)}
.mandir-poster:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(30,16,10,.7),transparent 55%)}
.mandir-poster>img{width:100%;height:100%;object-fit:cover}
.mandir-poster>em{position:absolute;z-index:2;bottom:18px;left:20px;font-size:9px;color:rgba(255,255,255,.75)}
.play-button{position:absolute;z-index:3;left:50%;top:50%;display:grid;place-items:center;transform:translate(-50%,-50%);width:220px;padding:0;border:0;background:none;color:#fff;cursor:pointer;text-align:center}
.play-button>span{display:grid;place-items:center;width:72px;height:72px;margin-bottom:12px;border-radius:50%;background:#fff;color:var(--maroon);font-size:22px;box-shadow:0 10px 40px rgba(0,0,0,.3)}
.play-button b,.play-button small{display:block}
.play-button small{font-size:8px;color:rgba(255,255,255,.7);margin-top:5px}
.mandir-copy .eyebrow{color:#f3bd65}
.mandir-copy p{line-height:1.7;color:rgba(255,255,255,.72)}
.status-note{padding:12px;border:1px solid rgba(255,255,255,.18);font-size:10px!important}


.section-school{background:#f7eddd}
.school-shell{padding-block:clamp(34px,4.8vh,70px)}
.school-upper{display:grid;grid-template-columns:40fr 60fr;gap:clamp(30px,5vw,72px);align-items:center}
.school-copy h2{font-size:clamp(34px,4vw,58px)}
.school-copy>p{font-size:12px;line-height:1.5}
.school-copy ul{display:grid;grid-template-columns:1fr 1fr;gap:7px 20px;padding:0;list-style:none;font-size:11px;margin:18px 0}
.school-copy li:before{content:"✦";color:var(--saffron);margin-right:7px}
.school-main{position:relative;height:42vh;min-height:290px;border-radius:22px;overflow:hidden;background:#d9cbb9}
.school-main>img{width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.gallery-counter{position:absolute;left:15px;bottom:15px;padding:8px 10px;border-radius:999px;background:rgba(26,17,13,.72);color:#fff;font-size:9px}
.gallery-prev,.gallery-next{position:absolute;right:16px;bottom:15px;width:36px;height:36px;border:0;border-radius:50%;background:#fff;color:var(--ink);cursor:pointer}
.gallery-prev{right:58px}
.thumbnail-track{display:flex;gap:8px;overflow:auto;padding:9px 2px 3px;scrollbar-width:thin}
.thumbnail-track button{flex:0 0 74px;height:48px;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;background:#ddd;cursor:pointer}
.thumbnail-track button.is-active{border-color:var(--maroon)}
.thumbnail-track img{width:100%;height:100%;object-fit:cover}
.school-facts{display:grid;grid-template-columns:repeat(6,1fr);margin-top:19px;border:1px solid #ddcdb8;border-radius:14px;overflow:hidden}
.school-facts article{padding:13px 12px;border-right:1px solid #ddcdb8}
.school-facts article:last-child{border:0}
.school-facts strong,.school-facts span{display:block}
.school-facts strong{font:400 15px Georgia,serif;color:var(--maroon)}
.school-facts span{font-size:8px;text-transform:uppercase;color:var(--muted);margin-top:4px}


.section-activities{background:#f9f6ef}
.activities-shell{padding-block:clamp(38px,5vh,72px)}
.section-heading-row{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:23px}
.section-heading-row h2{font-size:clamp(36px,4.2vw,62px);margin-bottom:8px}
.section-heading-row p{font-size:12px}
.activity-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.activity-grid article{display:grid;grid-template-columns:42% 58%;min-height:180px;background:#fff;border:1px solid #ebe4da;border-radius:15px;overflow:hidden;box-shadow:0 10px 28px rgba(55,35,23,.06)}
.activity-grid img,.pending-image{width:100%;height:100%;object-fit:cover}
.activity-grid article>div:last-child{padding:20px}
.activity-grid article>div>span{font-size:9px;color:var(--saffron)}
.activity-grid h3{font-size:21px;margin-top:7px}
.activity-grid p{font-size:10px;line-height:1.5;color:var(--muted)}
.pending-image{display:grid;place-content:center;text-align:center;background:repeating-linear-gradient(45deg,#f1ede4,#f1ede4 10px,#e9e3d7 10px,#e9e3d7 20px);color:#887c70}
.pending-image span,.pending-image b{display:block;font-size:8px}
.pending-image b{font-size:11px;margin-top:5px}


.section-explore{background:#293028;color:#fff}
.explore-shell{padding-block:clamp(32px,4vh,60px)}
.explore-head{display:flex;gap:22px;align-items:center}
.explore-head .section-number{margin:0;color:#fff;border-color:rgba(255,255,255,.3)}
.explore-head h2{font-size:clamp(34px,4vw,58px);margin:0}
.explore-head .eyebrow{color:#d6b96c}
.explore-layout{display:grid;grid-template-columns:70fr 30fr;gap:24px;margin-top:24px}
.mosaic{height:62vh;min-height:470px;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(4,1fr);gap:7px}
.mosaic-tile{position:relative;border:0;padding:0;overflow:hidden;border-radius:8px;background:#4f554d;color:#fff;cursor:pointer;min-width:0}
.mosaic-tile img{width:100%;height:100%;object-fit:cover;filter:saturate(.84);transition:transform .35s,filter .35s}
.mosaic-tile:hover img,.mosaic-tile:focus img,.mosaic-tile.is-active img{transform:scale(1.05);filter:saturate(1)}
.mosaic-tile.is-active{outline:3px solid #e7bd65;outline-offset:-3px}
.mosaic-tile span{position:absolute;inset:auto 0 0;padding:24px 9px 8px;background:linear-gradient(transparent,rgba(15,15,12,.8));font-size:9px;text-align:left}
.mosaic-tile.pending{display:grid;place-content:center;background:repeating-linear-gradient(45deg,#3e453d,#3e453d 12px,#485047 12px,#485047 24px)}
.mosaic-tile.pending b{font-size:10px}
.story-panel{display:flex;flex-direction:column;justify-content:center;padding:clamp(26px,3vw,48px);border:1px solid rgba(255,255,255,.14);border-radius:18px;background:rgba(255,255,255,.05)}
.story-index{font-size:10px;color:#d6b96c;margin-bottom:28px}
.story-panel .eyebrow{color:#d6b96c}
.story-panel h3{font-size:clamp(27px,2.5vw,38px)}
.story-panel>p:not(.eyebrow){font:400 14px/1.75 Georgia,serif;color:rgba(255,255,255,.72)}
.story-panel small{display:block;margin-top:18px;color:rgba(255,255,255,.42);font-size:9px}
.story-actions{display:flex;gap:14px;align-items:center;margin-top:10px}
.story-actions .button-link{background:#d7a64f;color:#2b2017}
.story-actions .text-link{color:#fff}


.section-news{background:#fff}
.news-shell{display:flex;flex-direction:column;justify-content:center}
.news-empty{display:grid;place-items:center;text-align:center;min-height:360px;margin-top:20px;padding:44px;border:1px dashed #cfc7bd;border-radius:24px;background:#faf8f4}
.feed-icon{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:#f0e5d5;color:var(--saffron);font-size:32px}
.news-empty h3{margin-top:18px}
.news-empty p{max-width:680px;color:var(--muted);line-height:1.6}
.news-empty code{padding:9px 13px;border-radius:8px;background:#eee7dd;color:#6b5a4e;font-size:11px}


.section-involved{background:#eee8de}
.involved-shell{display:flex;flex-direction:column;justify-content:center}
.involved-intro{max-width:560px}
.involved-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.involved-grid article{min-height:360px;padding:clamp(26px,3vw,48px);border-radius:22px;display:flex;flex-direction:column;justify-content:flex-end}
.involved-grid .csr{background:#dfe8da}
.involved-grid .volunteer{background:#f0dfc7}
.involved-grid .donate{background:#ead8d3}
.line-icon{display:grid;place-items:center;width:52px;height:52px;border:1px solid currentColor;border-radius:50%;font-size:26px;margin-bottom:auto}
.involved-grid small{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#70655c}
.involved-grid h3{font-size:clamp(28px,2.5vw,40px);margin-top:12px}
.involved-grid p{font-size:12px;color:#6b6159}
.involved-grid a{color:var(--ink);font-size:11px;font-weight:800;text-decoration:none;border-top:1px solid rgba(0,0,0,.15);padding-top:13px}


.section-visit{background:#f8f0e2}
.visit-layout{display:grid;grid-template-columns:43fr 57fr;gap:clamp(34px,6vw,90px);align-items:center}
.visit-copy p{line-height:1.7}
.visit-actions{display:flex;gap:10px;flex-wrap:wrap}
.map-placeholder{position:relative;min-height:60vh;padding:clamp(28px,4vw,58px);border-radius:24px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;background:#e7dcc7}
.map-placeholder h3{font-size:clamp(26px,2.4vw,38px);max-width:360px}
.map-placeholder p,.map-placeholder small{color:#7e7165}
.map-expand{position:absolute;top:20px;right:20px;border:0;border-radius:999px;background:#fff;padding:12px 16px;font-size:10px;font-weight:800;cursor:pointer}
.map-art{position:absolute;inset:0;overflow:hidden;background:linear-gradient(25deg,#ded6c4,#e9e3d5)}
.map-art i{position:absolute;width:130%;height:22%;left:-15%;border:2px solid rgba(255,255,255,.75);border-radius:50%;transform:rotate(-18deg)}
.map-art i:nth-child(1){top:12%}
.map-art i:nth-child(2){top:48%;transform:rotate(24deg)}
.map-art i:nth-child(3){top:74%;transform:rotate(-6deg)}
.map-art span{position:absolute;left:55%;top:42%;font-size:62px;color:var(--maroon)}
.map-placeholder>div:not(.map-art){position:relative;z-index:2}
.footer-card{min-height:70vh;top:var(--nav-h);display:grid;place-items:center;text-align:center;background:#251814;color:#fff}
.footer-card div{padding:50px}
.footer-card h2{font:400 clamp(34px,4vw,58px) Georgia,serif;margin:10px}
.footer-card p{color:rgba(255,255,255,.6)}
.footer-card a{color:#efc378}


.modal{width:100%;max-width:none;height:100%;max-height:none;margin:0;border:0;padding:clamp(16px,3vw,42px);background:rgba(20,13,10,.77);backdrop-filter:blur(10px)}
.modal::backdrop{background:rgba(20,13,10,.77)}
.modal[open]{display:grid;place-items:center}
.modal-card{position:relative;width:min(1100px,96vw);max-height:90vh;overflow:auto;border-radius:24px;background:#fff;color:var(--ink);box-shadow:0 30px 100px rgba(0,0,0,.4)}
.modal-close{position:absolute;z-index:5;right:15px;top:15px;width:40px;height:40px;border:0;border-radius:50%;background:#fff;color:#211714;font-size:26px;box-shadow:0 4px 20px rgba(0,0,0,.18);cursor:pointer}
.image-modal-card{height:min(82vh,820px);background:#17110f;overflow:hidden}
.image-modal-card figure{margin:0;height:100%;display:flex;flex-direction:column}
.image-modal-card img{width:100%;height:calc(100% - 52px);object-fit:contain}
.image-modal-card figcaption{padding:16px;color:#fff;text-align:center;font-size:12px}
.modal-prev,.modal-next{position:absolute;z-index:4;top:50%;width:48px;height:48px;border:0;border-radius:50%;background:rgba(255,255,255,.88);cursor:pointer}
.modal-prev{left:16px}
.modal-next{right:16px}
.video-modal-card{aspect-ratio:16/9;background:#2d1c17;color:#fff;display:grid;place-items:center}
.video-pending{text-align:center;max-width:560px;padding:50px}
.video-pending>span{display:grid;place-items:center;margin:auto;width:70px;height:70px;border:1px solid #f0c270;border-radius:50%;color:#f0c270}
.video-pending h2{font:400 40px Georgia,serif}
.video-pending p{color:rgba(255,255,255,.65);line-height:1.7}
.map-modal-card{min-height:70vh;display:grid;grid-template-columns:60% 40%;align-items:center}
.map-modal-card .map-art{position:relative;height:100%}
.map-modal-card>div:last-child{padding:45px}
.contact-card{display:grid;grid-template-columns:43% 57%;overflow:hidden}
.contact-portrait{min-height:640px;display:flex;align-items:flex-end;justify-content:center;background:radial-gradient(circle at 50% 35%,#ffd988,#d8973f 27%,#6b2c22 67%)}
.contact-portrait img{max-width:90%;max-height:600px;filter:drop-shadow(0 20px 20px rgba(0,0,0,.28))}
.contact-form{padding:clamp(34px,5vw,68px)}
.contact-form h2{font:400 clamp(34px,4vw,52px) Georgia,serif;margin:0 0 5px}
.form-note{font-size:10px;color:var(--muted);margin-bottom:22px}
.contact-form label{display:grid;gap:6px;margin:12px 0;font-size:11px;font-weight:750}
.contact-form label span{font-weight:400;color:#887a70}
.contact-form input,.contact-form textarea{width:100%;padding:11px 12px;border:1px solid #d8cec4;border-radius:8px;background:#fff}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid #d5a954;border-color:transparent}
.contact-form .invalid{border-color:#a52b24}
.form-status{min-height:22px;color:#8b241d;font-size:11px;margin:6px 0}


@media (max-width:1100px) {.primary-menu{gap:11px}
.primary-menu a,.primary-menu button{font-size:10px}
.guru-layout{gap:25px}


.activity-grid article{grid-template-columns:38% 62%}
.story-panel{padding:25px}
.story-actions{flex-direction:column;align-items:flex-start}}


@media (max-width:850px) {:root{--nav-h:64px}
.staging-ribbon{font-size:8px}
.site-nav{padding:0 18px}
.nav-toggle{display:block}
.site-nav nav{position:absolute;inset:64px 0 auto;background:#fff}
.primary-menu{display:none;max-height:calc(100vh - 64px);overflow:auto;padding:12px 22px;align-items:stretch}
.primary-menu.is-open{display:block}
.primary-menu a,.primary-menu button{display:block;width:100%;padding:11px 0;text-align:left;font-size:12px}
.primary-menu ul{position:static;display:none;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-left:1px solid #e1d7c9;border-radius:0;margin-left:10px;padding:3px 15px}
.primary-menu .menu-open ul{display:block}
.cards{margin-top:-100svh}
.story-card{position:relative;top:auto!important;min-height:auto!important;border-radius:22px 22px 0 0}
.section-shell{min-height:auto;padding:68px 28px}
.guru-layout,.mandir-layout,.school-upper,.visit-layout{grid-template-columns:1fr}
.guru-copy{max-width:none}
.guru-copy-right{justify-self:stretch}
.guru-portrait{order:-1;min-height:580px}
.guru-portrait h2{top:0;width:100%}
.guru-portrait img{max-height:520px}
.halo{width:340px}











.school-copy ul{grid-template-columns:1fr}
.school-main{height:46vh}
.school-facts{grid-template-columns:repeat(3,1fr)}
.activity-grid{grid-template-columns:1fr 1fr}
.activity-grid article{grid-template-columns:1fr;min-height:300px}
.activity-grid img,.pending-image{height:150px}
.explore-layout{grid-template-columns:1fr}
.mosaic{height:70vh}
.story-panel{min-height:360px}
.involved-grid{grid-template-columns:1fr}
.involved-grid article{min-height:280px}
.map-placeholder{min-height:520px}
.footer-card{min-height:60vh}
.map-modal-card,.contact-card{grid-template-columns:1fr}
.map-modal-card .map-art{height:45vh}
.contact-portrait{min-height:300px}
.contact-portrait img{max-height:290px}
.contact-form{padding-top:30px}}


@media (max-width:560px) {.brand{min-width:0}
.brand small{display:none}
.section-shell{padding:58px 20px}
.section-shell h2{font-size:38px}
.guru-portrait{min-height:480px}
.guru-portrait h2{font-size:24px}
.guru-portrait img{max-height:420px}
.halo{width:280px}







.school-main{min-height:250px;height:36vh}
.school-facts{grid-template-columns:1fr 1fr}
.activity-grid{grid-template-columns:1fr}
.activity-grid article{grid-template-columns:38% 62%;min-height:170px}
.activity-grid img,.pending-image{height:100%}
.explore-head{align-items:flex-start}
.explore-head .section-number{display:none}
.mosaic{height:68vh;min-height:560px;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(6,1fr)}
.story-actions{align-items:stretch}
.involved-grid article{min-height:260px}
.visit-actions{display:grid}
.map-placeholder{min-height:420px;padding:24px}
.modal{padding:8px}
.modal-card{width:98vw;max-height:96vh;border-radius:16px}
.image-modal-card{height:75vh}
.modal-prev,.modal-next{width:38px;height:38px}
.contact-portrait{min-height:210px}
.contact-portrait img{max-height:210px}
.contact-form{padding:27px 20px}
.staging-ribbon{bottom:5px}}


@media (prefers-reduced-motion:reduce) {html{scroll-behavior:auto}
*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
.cards{margin-top:0}
.story-card{position:relative;top:auto;min-height:auto}
.school-gallery [data-autoplay]{display:none}}




/* BSS Typography R04 — approved Font System.
   Forum: institutional identity / major editorial headings.
   Montserrat 400: content; Montserrat 500: navigation, smaller headings and actions.
   Existing V9 motion and layout rules are intentionally unchanged. */


:root{
  --bss-font-display: "Forum", Georgia, "Times New Roman", serif;
  --bss-font-content: "Montserrat", "Segoe UI", Arial, sans-serif;
  font-family: var(--bss-font-content);
  font-weight: 400;
}


body,p,li,label,input,textarea,select{
  font-family: var(--bss-font-content);
  font-weight: 400;
}


/* The locked hero and homepage titles retain their previous sizing/layout. */


.section-shell h2,.footer-card h2,.video-pending h2,.contact-form h2{
  font-family: var(--bss-font-display);
  font-weight: 400;
}


/* Secondary titles stay readable and less decorative. */


.section-shell h3,.news-empty h3,.activity-grid h3,.involved-grid h3,.map-placeholder h3{
  font-family: var(--bss-font-content);
  font-weight: 500;
}


button,.button-link,.text-link,.play-button,.gallery-prev,.gallery-next,.modal-close,.modal-prev,.modal-next,.map-expand{
  font-family: var(--bss-font-content);
  font-weight: 500;
}




/* R06: approved hero editorial cleanup and responsive photographic framing.
   Keep V9 slide lengths and the card stacking engine untouched. */




/* Never crop the Guru Maharaj head beneath the brand line. The same authentic
   image softly fills the area behind the offset photo (no replacement artwork). */


































/* Keep the approved pill/tab navigation, but no antiquated 01 / 02 numbering. */





















/* Post-hero section system: square, viewport-aligned editorial panels. */


:root{--bss-content-menu-height:var(--bss-header-compact-height,84px)}


.cards{margin-top:-100svh!important;}


.cards>.story-card:not(.footer-card){
  position:sticky;
  top:var(--bss-content-menu-height);
  min-height:calc(100svh - var(--bss-content-menu-height));
  height:auto;
  border-radius:0!important;
  box-shadow:0 -8px 26px rgba(48,35,23,.10);
  overflow:clip;
  --bss-ornament:rgba(166,118,59,.36);
}


.cards>.story-card:first-child{
  top:var(--bss-content-menu-height)!important;
  min-height:calc(100svh - var(--bss-content-menu-height))!important;
}


/* Light bracket corners are accents, not rounded frame containers. */


.cards>.story-card:not(.footer-card)::after{
 content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
 background-image:
 linear-gradient(var(--bss-ornament),var(--bss-ornament)),linear-gradient(var(--bss-ornament),var(--bss-ornament)),
 linear-gradient(var(--bss-ornament),var(--bss-ornament)),linear-gradient(var(--bss-ornament),var(--bss-ornament)),
 linear-gradient(var(--bss-ornament),var(--bss-ornament)),linear-gradient(var(--bss-ornament),var(--bss-ornament)),
 linear-gradient(var(--bss-ornament),var(--bss-ornament)),linear-gradient(var(--bss-ornament),var(--bss-ornament));
 background-repeat:no-repeat;
 background-position:22px 22px,22px 22px,calc(100% - 22px) 22px,calc(100% - 22px) 22px,
 22px calc(100% - 22px),22px calc(100% - 22px),calc(100% - 22px) calc(100% - 22px),calc(100% - 22px) calc(100% - 22px);
 background-size:48px 1px,1px 48px,48px 1px,1px 48px,48px 1px,1px 48px,48px 1px,1px 48px;
 opacity:.60;
}


.cards>.section-guru{background:radial-gradient(ellipse at 49% 51%,rgba(244,209,142,.25),transparent 48%),linear-gradient(135deg,#fffaf2,#f2e7d7 57%,#eadcc8);}


.cards>.section-guru::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
 background:radial-gradient(circle at 11% 84%,rgba(178,127,61,.06) 0 1px,transparent 2px) 0 0/30px 30px,radial-gradient(ellipse at 80% 10%,rgba(217,162,81,.09),transparent 45%);}








.cards>.section-mandir{--bss-ornament:rgba(174,114,54,.37)}


.cards>.section-school{--bss-ornament:rgba(102,133,111,.34)}


.cards>.section-activities{--bss-ornament:rgba(161,119,77,.38)}


.cards>.section-explore{--bss-ornament:rgba(232,190,117,.35)}


.cards>.section-news{--bss-ornament:rgba(175,137,87,.32)}


.cards>.section-involved{--bss-ornament:rgba(129,126,104,.32)}


.cards>.section-visit{--bss-ornament:rgba(187,137,89,.38)}


.cards>.story-card .section-number{display:none!important;}


.cards>.story-card>.section-shell{
 min-height:calc(100svh - var(--bss-content-menu-height));
 padding-top:clamp(12px,2svh,20px);
 padding-bottom:clamp(12px,2svh,20px);
}


.cards>.section-guru .guru-layout{align-items:start!important;gap:clamp(18px,3.4vw,54px)}


.cards>.section-guru .guru-copy{position:relative;z-index:2;padding-top:clamp(12px,1.8svh,20px)}


.cards>.section-guru .guru-copy p:not(.eyebrow){font-size:clamp(13px,1.05vw,15px);line-height:1.69;color:#594837}


.cards>.section-guru .guru-copy h3{font-family:"Forum",Georgia,serif;font-size:clamp(27px,2.6vw,38px)}


.cards>.section-guru .guru-portrait{min-height:calc(100svh - var(--bss-content-menu-height) - 34px)}


.cards>.section-guru .guru-portrait h2{font-family:"Forum",Georgia,serif;top:2%;font-size:clamp(24px,2.3vw,35px);line-height:1.12}


.cards>.section-guru .guru-portrait img{max-height:min(60svh,580px)}


.cards>.section-guru .guru-copy-right .button-link{display:inline-flex;margin-top:18px;max-width:100%;white-space:normal;text-align:center;line-height:1.4;letter-spacing:.015em;font-size:11px;border-radius:0;padding:13px 17px;text-transform:none;background:#8b3f29;box-shadow:0 7px 19px rgba(81,45,23,.17)}


/* Keep content fully accessible on smaller and shorter screens. */


@media (max-width:900px),(max-height:670px) {
 
.cards>.story-card:not(.footer-card){height:auto;min-height:calc(100svh - var(--bss-content-menu-height));overflow:visible}

 
.cards>.story-card>.section-shell{height:auto;min-height:calc(100svh - var(--bss-content-menu-height));padding:clamp(22px,4svh,40px) clamp(20px,4vw,38px)}

 
.cards>.section-guru .guru-layout{grid-template-columns:1fr;gap:24px;align-items:start}

 
.cards>.section-guru .guru-portrait{order:0;min-height:unset}

 
.cards>.section-guru .guru-portrait h2{position:relative;top:auto;width:100%}

 
.cards>.section-guru .guru-portrait img{max-height:52svh}

}


@media (max-width:850px) {
 
.cards>.story-card:not(.footer-card){position:relative!important;top:auto!important}

 
.cards>.story-card:first-child{top:auto!important}

 
.cards>.story-card:not(.footer-card)::after{background-size:26px 1px,1px 26px,26px 1px,1px 26px,26px 1px,1px 26px,26px 1px,1px 26px}

}


/* Reserve a full viewport in document flow for each card, even though
   its visible content starts below the sticky navigation. This prevents
   the following card from appearing along the bottom of the current one. */


.cards>.story-card:not(.footer-card),.cards>.story-card:first-child{
  min-height:100svh!important;
}


@media (max-width:850px) {
  
.cards>.story-card:not(.footer-card){min-height:calc(100svh - var(--bss-content-menu-height))!important;}

}


@media (max-width:850px) {
 
/* Mobile sections are taller as needed, but never start underneath the fixed menu. */

 
.cards>.story-card:not(.footer-card)>.section-shell{
   padding-top:calc(var(--bss-content-menu-height) + 16px)!important;
 }

}




/* Guru Maharaj editorial section — restore three columns even on short desktop viewports.
   Previous <=670px height media query stacked content vertically, hiding the portrait and right text. */


@media  (min-width:901px)  {
  
.cards > .section-guru > .section-shell.guru-layout{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1.08fr) minmax(0,1fr)!important;
    align-items:start!important;
    column-gap:clamp(18px,3.15vw,48px)!important;
    width:100%;
    height:calc(100svh - var(--bss-content-menu-height));
    min-height:calc(100svh - var(--bss-content-menu-height));
    padding:clamp(12px,2svh,18px) clamp(24px,2.8vw,48px) 10px!important;
    overflow:hidden;
  }

  
.cards > .section-guru .guru-copy{
    align-self:start!important;
    justify-self:start;
    padding-top:3px!important;
    max-width:100%;
    min-width:0;
  }

  
.cards > .section-guru .guru-copy-right{justify-self:end;}

  
.cards > .section-guru .guru-copy .eyebrow{font-size:10px;letter-spacing:.15em;margin-bottom:12px;}

  
.cards > .section-guru .guru-copy h3{
    font-family:"Forum",Georgia,serif;
    font-size:clamp(30px,2.7vw,41px);
    line-height:1.07;
    margin:0 0 17px;
  }

  
.cards > .section-guru .guru-copy p:not(.eyebrow){
    font-size:clamp(12px,1.06vw,15px);
    line-height:1.64;
    margin:0 0 13px;
    color:#514638;
    letter-spacing:0;
  }

  
.cards > .section-guru .guru-portrait{
    display:flex!important;
    flex-direction:column;
    justify-content:flex-start!important;
    align-items:center;
    align-self:start!important;
    height:calc(100svh - var(--bss-content-menu-height) - 28px);
    min-height:0!important;
    width:100%;
    padding:0;
    overflow:visible;
  }

  
.cards > .section-guru .guru-portrait h2{
    position:relative!important;
    z-index:3;
    inset:auto!important;
    width:100%!important;
    font-family:"Forum",Georgia,serif;
    font-size:clamp(24px,2.25vw,34px);
    font-weight:400;
    line-height:1.08;
    letter-spacing:-.012em;
    margin:0 0 10px;
    flex:0 0 auto;
  }

  
.cards > .section-guru .guru-portrait img{
    display:block;
    position:relative;
    z-index:2;
    flex:0 1 auto;
    width:auto;
    height:auto;
    max-width:100%!important;
    max-height:calc(100svh - var(--bss-content-menu-height) - 125px)!important;
    object-fit:contain;
    object-position:center top;
    margin:0 auto;
  }

  
.cards > .section-guru .halo{
    top:25%;left:50%;transform:translateX(-50%);
    width:min(28vw,340px);
    opacity:.72;
  }

  
.cards > .section-guru .guru-copy-right .button-link{
    display:inline-flex;
    margin-top:10px;
    padding:12px 15px;
    font-size:11.2px;
    font-weight:600;
    line-height:1.45;
    letter-spacing:0;
    text-align:left;
    text-transform:none;
    border-radius:0;
    max-width:100%;
  }

}


/* Stack cleanly only on genuinely narrow screens, not wide low-height laptop windows. */


@media  (max-width:900px)  {
  
.cards > .section-guru > .section-shell.guru-layout{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:22px!important;
    height:auto!important;
    min-height:calc(100svh - var(--bss-content-menu-height));
    padding:18px 22px 36px!important;
  }

  
.cards > .section-guru .guru-copy{
    max-width:680px;
    padding:0!important;
    justify-self:start;
  }

  
.cards > .section-guru .guru-portrait{
    order:0;
    height:auto!important;
    min-height:0!important;
    align-self:center!important;
    justify-content:center!important;
    padding:0;
  }

  
.cards > .section-guru .guru-portrait h2{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    margin:0 auto 12px;
    font-size:clamp(24px,5vw,34px);
  }

  
.cards > .section-guru .guru-portrait img{
    width:auto;
    height:auto;
    max-height:min(52svh,440px)!important;
    max-width:min(90vw,440px)!important;
    object-fit:contain;
  }

  
.cards > .section-guru .halo{top:20%;left:50%;transform:translateX(-50%);width:min(76vw,340px)}

  
.cards > .section-guru .guru-copy-right{justify-self:start;}

  
.cards > .section-guru .guru-copy-right .button-link{margin-top:12px;}

}





/* responsive-fixes.css — homepage and shared rules */


/* Targeted post-QA refinements; kept separate from the locked V9 foundation. */


@media  (max-width: 560px)  {
  
.mosaic{
    display: flex;
    gap: 10px;
    height: 320px;
    min-height: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: thin;
    padding-bottom: 6px;
  }


  
.mosaic-tile{
    flex: 0 0 78%;
    min-height: 300px;
    scroll-snap-align: center;
  }


  
.mosaic-tile:first-child{
    flex-basis: 88%;
  }


  
.story-panel{
    min-height: 0;
  }

}





/* header.css — homepage and shared rules */


/* BSS Gurugram — header visual refinement R05.
   Header-only changes: institutional name, legibility, navigation separation,
   Donate emphasis. Hero/menu reveal and all ten homepage sections are retained. */


:root{
  --bss-header-saffron: #dfa65e;
  --bss-header-ink: #432619;
  --bss-header-hero-height: 111px;
  --bss-header-compact-height: 84px;
}


.site-nav{
  height: var(--bss-header-hero-height);
  transform: none;
  padding: 0 clamp(18px, 2.6vw, 44px);
  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  pointer-events: none;
  transition: height .3s ease, background .3s ease, box-shadow .3s ease, border-color .3s ease;
}


.site-nav .brand{
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  flex: 0 0 auto;
  color: #fffdf4;
  white-space: nowrap;
  pointer-events: auto;
}


.site-nav .brand-mark{
  display: block;
  width: 78px;
  height: 78px;
  flex: 0 0 78px;
  border: 0;
  background: transparent;
  overflow: visible;
  border-radius: 50%;
}


.site-nav .brand-mark img{display: block; width: 100%; height: 100%; object-fit: contain;}


.site-nav .brand-identity{display: flex; flex-direction: column; justify-content: center; min-width: 0;}


.site-nav .brand b{
  display: block;
  font-family: "Forum", Georgia, serif;
  font-size: clamp(32px, 2.75vw, 41px);
  font-weight: 400;
  line-height: 1.07;
  letter-spacing: .003em;
  text-transform: none;
  -webkit-text-stroke: .18px currentColor;
  /* Crisp text, with its shadow falling BEHIND the lettering. */
  text-shadow: 0 2px 3px rgba(17,9,6,.8),0 5px 17px rgba(17,8,6,.55);
}


.site-nav .brand small{
  display: block;
  margin-top: 5px;
  font-family: "Montserrat","Segoe UI",Arial,sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .055em;
  text-transform: none;
  color: #fff5df;
  text-shadow: 0 2px 3px rgba(17,9,6,.9),0 4px 12px rgba(17,8,6,.6);
}


/* A soft dark tonal lift, not a solid bar over the sacred photographs. */


.site-nav:not(.is-visible) .brand:before{
  content: "";
  position: absolute;
  z-index: -1;
  inset: -8px -35px -8px -14px;
  background: linear-gradient(90deg,rgba(26,12,11,.33),rgba(26,12,11,.19) 75%,transparent);
  border-radius: 20px;
  filter: blur(13px);
  pointer-events: none;
}


/* V9 rule: the entire navigation stays absent through slides 1–7. */


.site-nav:not(.is-visible) nav,.site-nav:not(.is-visible) .nav-toggle{display: none!important;}


.site-nav.is-visible{
  height: var(--bss-header-compact-height);
  background: rgba(223,166,94,.985);
  border-color: rgba(89,51,23,.22);
  box-shadow: 0 7px 22px rgba(51,28,12,.16);
  pointer-events: auto;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}


.site-nav.is-visible .brand{gap: 9px; color: var(--bss-header-ink);}


.site-nav.is-visible .brand-mark{width: 60px; height: 60px; flex-basis: 60px;}


.site-nav.is-visible .brand b{
  font-size: 31px;
  line-height: 1.04;
  color: #47271b;
  text-shadow: 0 1px 0 rgba(255,244,215,.32);
}


.site-nav.is-visible .brand small{
  margin-top: 3px;
  font-size: 14px;
  line-height: 1.15;
  letter-spacing: .035em;
  color: #603a22;
  text-shadow: none;
}


.site-nav.is-visible nav{display: block; min-width:0;}


.site-nav.is-visible .primary-menu{gap: 5px; align-items:center;}


.site-nav .primary-menu>li>button:after{content: none!important;display:none!important;}


.site-nav.is-visible .primary-menu>li{position: relative;}


/* Individual, quiet navigation tabs — no dropdown arrows. */


.site-nav.is-visible .primary-menu>li:not(.nav-donate)>a,.site-nav.is-visible .primary-menu>li:not(.nav-donate)>button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 41px;
  padding: 10px clamp(8px,.7vw,11px);
  border: 1px solid rgba(111,67,32,.23);
  border-radius: 7px;
  background: rgba(255,249,228,.18);
  box-shadow: inset 0 1px 0 rgba(255,251,235,.35);
  color: #47291e;
  font-family: "Montserrat","Segoe UI",Arial,sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.025em;
  white-space: nowrap;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}


.site-nav.is-visible .primary-menu>li:not(.nav-donate):hover>a,.site-nav.is-visible .primary-menu>li:not(.nav-donate):hover>button,.site-nav.is-visible .primary-menu>li.menu-open>button,.site-nav.is-visible .primary-menu>li:not(.nav-donate)>a:focus-visible,.site-nav.is-visible .primary-menu>li:not(.nav-donate)>button:focus-visible{
  background: rgba(255,250,229,.72);
  color: #8b3125;
  border-color: rgba(144,72,32,.49);
  box-shadow: 0 2px 5px rgba(87,48,23,.1);
}


.site-nav.is-visible .primary-menu a:focus-visible,.site-nav.is-visible .primary-menu button:focus-visible{outline: 2px solid #883b26;outline-offset: 2px;}


/* Existing dropdown content/hover logic stays unchanged. */


.site-nav.is-visible .primary-menu ul{
  top: calc(100% - 2px);
  left: 0;
  min-width: 230px;
  background: #fff8ea;
  border: 1px solid #d5a76c;
  border-radius: 0 0 9px 9px;
  box-shadow: 0 15px 29px rgba(51,29,13,.2);
  z-index: 5;
}


.site-nav.is-visible .primary-menu ul a{
  display:block;
  padding: 10px 2px;
  color: #482b20;
  font-family:"Montserrat","Segoe UI",Arial,sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
}


.site-nav.is-visible .primary-menu ul li:hover>a{color: #a63c2c;}


.site-nav.is-visible .primary-menu>li.nav-donate{margin-left: 5px;display:flex;align-items:center;}


.site-nav.is-visible .primary-menu>li.nav-donate>a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: 43px;
  padding: 11px 18px;
  border: 1px solid #a53223;
  border-radius: 7px;
  background: linear-gradient(180deg,#c84a33,#a93425);
  color: #fffdf8;
  font-family:"Montserrat","Segoe UI",Arial,sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  box-shadow: 0 4px 11px rgba(118,45,29,.24),inset 0 1px 0 rgba(255,239,219,.21);
  text-decoration:none;
  transition: background .2s ease,box-shadow .2s ease,transform .2s ease;
}


.site-nav.is-visible .primary-menu>li.nav-donate>a:hover,.site-nav.is-visible .primary-menu>li.nav-donate>a:focus-visible{
  background: linear-gradient(180deg,#ae3626,#92261c);
  color:#fff;
  box-shadow:0 5px 14px rgba(114,37,24,.35);
  transform:translateY(-1px);
}


.site-nav.is-visible .nav-toggle span:not(.sr-only){background:#4b281b;}


/* Below this width, an accessible expandable menu keeps the bigger branding intact. */


@media (max-width:1280px)  {
  
.site-nav.is-visible .nav-toggle{display:block; flex:0 0 auto;}

  
.site-nav.is-visible nav{
    position:absolute;
    top:100%; left:0; right:0;
    background:#e6b579;
    border-bottom:1px solid #b98849;
    box-shadow:0 12px 28px rgba(45,27,16,.15);
    max-height:calc(100svh - var(--bss-header-compact-height));
    overflow:auto;
  }

  
.site-nav.is-visible .primary-menu{
    display:none;
    padding:12px clamp(16px,3vw,32px) 19px;
    max-height:inherit;
    overflow:visible;
  }

  
.site-nav.is-visible .primary-menu.is-open{display:block;}

  
.site-nav.is-visible .primary-menu>li{margin:4px 0;}

  
.site-nav.is-visible .primary-menu>li:not(.nav-donate)>a,.site-nav.is-visible .primary-menu>li:not(.nav-donate)>button{
    display:flex;
    width:100%;
    justify-content:flex-start;
    text-align:left;
    font-size:13px;
    padding:12px 15px;
    min-height:45px;
  }

  
.site-nav.is-visible .primary-menu ul,.site-nav.is-visible .primary-menu .menu-open ul{
    position:static;
    opacity:1;
    visibility:visible;
    transform:none;
    box-shadow:none;
    border:0;
    border-left:2px solid #b66e37;
    border-radius:0;
    margin:2px 0 10px 14px;
    padding:3px 12px;
    background:rgba(255,248,230,.25);
  }

  
.site-nav.is-visible .primary-menu ul{display:none;}

  
.site-nav.is-visible .primary-menu .menu-open ul{display:block;}

  
.site-nav.is-visible .primary-menu ul a{font-size:12px; padding:10px 6px;}

  
.site-nav.is-visible .primary-menu>li.nav-donate{display:block;margin:15px 0 4px;}

  
.site-nav.is-visible .primary-menu>li.nav-donate>a{min-width:133px;padding:13px 24px;}

}


@media (max-width:850px)  {
  
.site-nav{height:96px;padding:0 16px;}

  
.site-nav .brand-mark{width:67px;height:67px;flex-basis:67px;}

  
.site-nav .brand b{font-size:clamp(24px,4vw,32px);}

  
.site-nav .brand small{font-size:12px;}

  
.site-nav.is-visible{height:76px;}

  
.site-nav.is-visible .brand-mark{width:54px;height:54px;flex-basis:54px;}

  
.site-nav.is-visible .brand b{font-size:clamp(22px,3vw,27px);}

  
.site-nav.is-visible .brand small{font-size:12px;}

  
.site-nav.is-visible nav{max-height:calc(100svh - 76px);}

}


@media (max-width:480px)  {
  
.site-nav{height:83px;padding:0 12px;}

  
.site-nav .brand{gap:9px;}

  
.site-nav .brand-mark{width:59px;height:59px;flex-basis:59px;}

  
.site-nav .brand b{font-size:clamp(19px,5.5vw,24px);}

  
.site-nav .brand small{font-size:11px;margin-top:3px;}

  
.site-nav.is-visible{height:71px;}

  
.site-nav.is-visible .brand-mark{width:45px;height:45px;flex-basis:45px;}

  
.site-nav.is-visible .brand b{font-size:clamp(18px,4.8vw,22px);}

  
.site-nav.is-visible .brand small{font-size:10px;}

  
.site-nav.is-visible nav{max-height:calc(100svh - 71px);}

}


@media (max-width:355px)  {
  
.site-nav .brand b{font-size:18px;}

  
.site-nav.is-visible .brand b{font-size:17px;}

  
.site-nav .brand-mark{width:51px;height:51px;flex-basis:51px;}

  
.site-nav.is-visible .brand-mark{width:41px;height:41px;flex-basis:41px;}

}


@media (prefers-reduced-motion:reduce)  {.site-nav,.site-nav *{transition:none!important;}}





/* hero.css — homepage and shared rules */


/* BSS hero correction: restore V9 full-screen imagery. NO framed photographs. */


.site-nav:not(.is-visible) .brand b{font-size:clamp(31px,2.9vw,44px);-webkit-text-stroke:.25px currentColor;text-shadow:0 2px 8px #170900a8}


.site-nav:not(.is-visible) .brand small{font-size:clamp(15px,1.35vw,19px);font-weight:600;color:#fff6e5}
















/* Overlays touch ONLY the text zones, leaving the full photo in view. */
































/* Slide 1: portrait is full-screen, NOT a box. Text left; verified quotation right. */






























@keyframes bss-incense{0%{opacity:0;transform:translate(-8px,38px) scale(.7) rotate(-8deg)}30%{opacity:.75}75%{opacity:.3}100%{opacity:0;transform:translate(30px,-155px) scale(1.55) rotate(10deg)}}


/* Preserve individual composition, full-bleed image on all six photographic slides. */


















@keyframes bss-mandir-light{from{opacity:.42;transform:scale(.95)}to{opacity:.74;transform:scale(1.05)}}


/* Slide 3: aerial Explorer fills the hero. Its photo cards are controls, not a frame around a hero photograph. */




























































@media (max-width:560px) {
 
.site-nav:not(.is-visible) .brand b{font-size:clamp(22px,5.8vw,27px)}

 
.site-nav:not(.is-visible) .brand small{font-size:12px}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

}








/* Final hero amendments: retain approved V9 full-screen photography. */


.site-nav:not(.is-visible) .brand{color:#f5a957}


.site-nav:not(.is-visible) .brand b{color:#f5a957;-webkit-text-stroke:.62px #fff4dc;text-shadow:0 1px 0 #fff7e6,0 3px 6px #1d0c08,0 5px 19px #100903}


.site-nav:not(.is-visible) .brand small{font-size:clamp(18px,1.4vw,21px);font-weight:600;color:#f7bc76;text-shadow:0 1px 0 #fff2db,0 3px 8px #150903}


/* Keep photographs unboxed; individually control their focal points. */














/* Soft saffron parchment, not a dark quote box. Rolled scroll edges. */














@keyframes hero-scroll-breathe{0%{transform:rotate(2.4deg) translateY(0)}100%{transform:rotate(3.2deg) translateY(-4px)}}


/* Grade opacity only at content; preserve source image full-bleed */






/* Floor-level devotional dhup stays strictly within slide 1. */






















@keyframes floor-mist{from{transform:translate(-3%,0) scale(1);opacity:.65}to{transform:translate(3%,-25px) scale(1.08);opacity:.88}}


/* Explorer: one video plane only; restore tracked saffron perimeter and stable markers. */


























/* Other hero quote scrolls live on the right, avoiding the main text area. */
















@media (max-width:560px) {
 
.site-nav:not(.is-visible) .brand b{font-size:clamp(22px,5.6vw,27px);-webkit-text-stroke:.3px #fff1ce}

 
.site-nav:not(.is-visible) .brand small{font-size:clamp(14px,3.9vw,17px)}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

}




@media (prefers-reduced-motion:reduce) {
 
/* Hero quote entrance controlled by active slide classes. */

 

}


/* Keep attribution away from the hero timeline and landmark cards. */










/* APPROVED V9 HERO: corrections only. Full-bleed photography and page sections unchanged. */


/* Crisp saffron institutional header, without doubled white border or halo. */


.site-nav:not(.is-visible) .brand b{
 color:#f8c48a!important; -webkit-text-stroke:0!important;
 text-shadow:0 2px 8px rgba(20,9,4,.9),0 0 16px rgba(11,8,5,.47)!important;
}


.site-nav:not(.is-visible) .brand small{
 font-size:clamp(19px,1.6vw,23px)!important; font-weight:400!important; letter-spacing:.025em!important;
 color:#f9d4a2!important; -webkit-text-stroke:0!important;
 text-shadow:0 2px 9px rgba(17,8,6,.87)!important;
}


.site-nav.is-visible .brand small{font-size:15px!important;font-weight:400!important}


/* Discrete scroll-activated wipe: neither photo nor wording is semi-transparent. */








/* The slate is deliberately plain: straight translucent panels, no parchment/tilt/movement. */










/* Full-viewport smoke drawing prevents seams at a rectangular effect boundary. */






/* The aerial recording and all its overlay coordinates move together. */




/* Keep the full Explorer, reduce photograph thumbnails by ~30%, and free space for the quote. */












/* A small sound control: part of hero only, does not move or change the site menu. */












@media (max-width:560px) {
 
.site-nav:not(.is-visible) .brand small{font-size:clamp(16px,4.3vw,19px)!important}

 

 

 

 

 

 
/* The Explorer photo strip scrolls horizontally on narrow displays instead of squeezing 11 images. */

 

 

 

 

 

 

}







/* Hero typography and alignment: approved editorial revision (01 Nov 2026).
   All backgrounds remain the original full-bleed photographs. */






/* Soft irregular paint swash rather than an opaque shloka box. */








/* Accurate, short clearance: align quotes directly above the hero progress line. */






/* The original land outline stays unchanged. Match the map dots to the emblem's deep saffron. */








/* Eleven image controls and the right quotation share a common bottom edge. */






/* Bring back full seven descriptive labels without interfering with the approved timeline. */








/* A longer description in Slide 2 must stay away from the background figure. */










/* Final optical alignment: a 3–4px breathing space above the timeline. */









/* FINAL editorial + optical hero corrections, 01 Nov 2026.
   V9 full-screen imagery, original seven slides and all ten homepage sections preserved. */


:root{ --hero-align-left: clamp(27px, 2.8vw, 43px); --hero-align-right: clamp(25px, 3.1vw, 49px); }


/* Align introductory blocks to the emblem's left edge, without altering the brand. */




/* All supporting taglines match the exact approved founder subtitle treatment. */






/* Bottom navigation is editorial wayfinding, not seven small buttons. */
















/* Rectangular quotation, lighter translucent gradient; aligned exactly within the timeline's horizontal extent.
   bottom clearance places it 4px above the thin progress line. */






/* Ashram thumbnail strip and quotation share the same bottom baseline. */




/* At intermediate viewports allow sufficient space for long approved supporting lines. */




@media (max-width:560px) {
 
:root{--hero-align-left:5%;--hero-align-right:5%}

 

 

 

 

 

 

 

 

 

}



/* 01 NOV: final targeted hero corrections. No other sections modified. */


/* Restore transparent navigation: preserve the hairline and individual labels, remove the opaque full-width strip. */














/* The first title has deliberate three-line editorial layout on desktop. */








/* Keep quotation aligned with the top of the original progress line, without broad panel underneath. */






/* A two-line landmark detail panel: image + site name + concise purpose statement. */
















/* The two top-right icon controls have independent vertical slots; no overlap with landmark panel. */































/* Fixed navigation legibility without reinstating the full-width strip. */








/* Keep the photo detail below the top-right control stack on narrow screens. */






/* Narrow-screen landmark detail: place beneath introduction and above quote.
   Keep soundtrack/play controls in their dedicated top-right stack. */




/* Readable tab navigation on tablet, without squeezing seven full labels. */





/* NOV 01 FINAL APPROVED HERO TUNING - only the 7-slide hero. */


/* Transparent organic saffron stroke generated from the owner's approved visual direction. */






/* User-approved square-corner, very light saffron call-to-action buttons. */








/* School: show ALL of the existing photograph, smaller, no boxed presentation. 
   The original full-bleed picture is blurred into the margins as a continuous background. */








/* Title in precisely two intentional lines on the Gurugram Explorer slide. */








/* Matching compact circular A–K icons, including the letter I. */




/* Play icon immediately to the LEFT of the sound icon, only on slide 3. */










/* In other slides only the global speaker is present; video play exists only in the Explorer. */




/* Keep the compulsory attribution beside the Earth footage but out of the action controls. */




/* Animate text only after slide wipe finishes. No cross-faded images or mixed slides. */














/* Gentle small irregular float of the action link, never a sharp shake. */




@keyframes bss-cta-rest {
 0%,100%{translate:0 0} 25%{translate:1px -2px} 56%{translate:-1px 1px} 78%{translate:1px -1px}
}









/* FINAL LANDMARK PHOTO REFINEMENT: +18px height and sky/top preserved. */






/* Final editorial polish: keep the real saffron stroke visible while unobtrusive. */




/* The school photograph remains completely within the frame, feathering the image edges into its own full-screen backdrop, never a hard-edged box. */





/* Explorer interaction correction: markers must remain usable while a detail card is open.
   The card is informational; only its close button needs to receive pointer events.
   Keep the existing geographic marker positions and responsive layout unchanged. */











/* Keep A–K hit targets above the photo popup and all hero copy without moving pins.
   The portal is transparent; only individual circular markers receive clicks. */









/* Correct selected-landmark layering, without moving the geographical pins.
   The detail card is promoted to the slide stacking context in explorer.js. */






/* The image asset ships separately in images.zip: images/hero/shloka-brush.webp.
   Ensure the generated saffron paint stroke is visible behind all seven shlokas. */





/* School slide framing correction — show the full school building at a human scale.
   Intentionally limited to Slide 5; the six other hero slides are untouched. */














/* Slide 5 ONLY — restore true edge-to-edge school photograph.
   Original file is untouched. This sizes its full height to the hero viewport,
   rather than displaying a smaller contained rectangle. */









/* V9 handoff correction: seven uninterrupted viewport slides, then card rise.
   Section one starts after slide 7 has been presented in its entirety. */





/* Seven complete full-screen hero slides, plus a protected viewing interval
   for Slide 7 before the first homepage card rises. No visual redesign. */







/* guru.css — homepage and shared rules */


/* Guru Maharaj section — full single-line central heading, four-sided ornament frame. */


.cards > .section-guru{
  isolation:isolate;
  background:radial-gradient(ellipse at 50% 67%,rgba(239,193,119,.32),transparent 56%),
    linear-gradient(135deg,#fffaf0 0%,#f5ead9 50%,#efdfc8 100%);
}


.cards > .section-guru::before{
  background-image: radial-gradient(circle at 10px 10px,rgba(165,113,59,.045) 1px,transparent 1.8px),
    radial-gradient(ellipse at 50% 90%,rgba(230,180,93,.19),transparent 52%);
  background-size:36px 36px,auto;
}


.cards > .section-guru::after{display:none!important;}


.cards > .section-guru .guru-ornamental-frame{
  position:absolute;z-index:1;inset:12px 17px 13px;pointer-events:none;
  border:1px solid rgba(165,102,42,.56);
  outline:1px solid rgba(165,102,42,.18);
  outline-offset:-7px;
  box-shadow:inset 0 0 0 1px rgba(255,248,228,.65);
}


.cards > .section-guru .guru-corner{
  position:absolute; width:77px;height:77px;
  background-repeat:no-repeat;background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23b37b3e' stroke-width='1.4' opacity='.82'%3E%3Cpath d='M3 61V5H61 M10 52V12H52'/%3E%3Cpath d='M7 34Q8 8 34 8M10 27Q16 9 27 11M12 44Q39 40 43 12 M19 43Q42 39 40 20'/%3E%3Cpath d='M11 11Q24 12 24 26Q12 24 11 11Z M34 12Q44 15 37 27Q32 22 34 12Z M12 35Q23 29 28 40Q16 46 12 35Z'/%3E%3C/g%3E%3Cpath d='M4 4h9V2H2v11h2z' fill='%23b37b3e' opacity='.75'/%3E%3C/svg%3E");
}


.cards > .section-guru .guru-corner-tl{top:-3px;left:-3px;}


.cards > .section-guru .guru-corner-tr{top:-3px;right:-3px;transform:scaleX(-1);}


.cards > .section-guru .guru-corner-bl{bottom:-3px;left:-3px;transform:scaleY(-1);}


.cards > .section-guru .guru-corner-br{bottom:-3px;right:-3px;transform:scale(-1,-1);}


.cards > .section-guru .guru-frame-flourish{
  position:absolute;font-family:Georgia,serif;font-size:20px;
  color:rgba(169,107,48,.64);line-height:1;
}


.cards > .section-guru .guru-frame-top{top:-11px;left:50%;transform:translateX(-50%);background:#f7ecda;padding:0 13px;}


.cards > .section-guru .guru-frame-bottom{bottom:-11px;left:50%;transform:translateX(-50%);background:#efdfc8;padding:0 13px;}


.cards > .section-guru .guru-frame-left{top:50%;left:-6px;transform:translateY(-50%);font-size:11px;background:#f6ead9;padding:8px 0;}


.cards > .section-guru .guru-frame-right{top:50%;right:-6px;transform:translateY(-50%);font-size:11px;background:#f0e0cb;padding:8px 0;}


/* Entire section is a stable 3-column composition with a full-width title row. */


@media (min-width:901px) {
  
.cards > .section-guru > .section-shell.guru-layout{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1.08fr) minmax(0,1fr)!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    grid-template-areas:"title title title" "left portrait right";
    column-gap:clamp(24px,3vw,44px)!important;
    row-gap:clamp(10px,1.4svh,15px)!important;
    width:100%!important;
    max-width:1500px;
    height:calc(100svh - var(--bss-content-menu-height))!important;
    min-height:calc(100svh - var(--bss-content-menu-height))!important;
    padding:clamp(16px,2.6svh,23px) clamp(33px,3.3vw,64px) 18px!important;
    align-items:start!important;
    overflow:hidden;
    z-index:2;
  }

  
.cards > .section-guru .guru-main-title{
    grid-area:title;white-space:nowrap;text-align:center;
    font:400 clamp(32px,3vw,44px)/1.08 "Forum",Georgia,serif;
    letter-spacing:-.025em;color:#3d281b;
    margin:0!important;max-width:100%;
  }

  
.cards > .section-guru .guru-copy-left{grid-area:left;}

  
.cards > .section-guru .guru-copy-right{grid-area:right;}

  
.cards > .section-guru .guru-copy{
    padding:clamp(8px,1.5svh,16px) 0 0!important;
    align-self:start!important;max-width:100%;width:100%;
  }

  
.cards > .section-guru .guru-copy h3{
    font:400 clamp(28px,2.25vw,34px)/1.05 "Forum",Georgia,serif;
    margin:0 0 12px!important;
  }

  
.cards > .section-guru .guru-copy p:not(.eyebrow){
    font-size:clamp(13px,1.12vw,15px);line-height:1.65;
    margin:0 0 11px;
    color:#57473a;
  }

  
.cards > .section-guru .guru-copy .guru-subtitle{
    font-size:clamp(12px,.98vw,13.5px)!important;
    line-height:1.48!important;font-weight:600;color:#92602e!important;
    margin-bottom:17px!important;
  }

  
.cards > .section-guru .guru-portrait{
    grid-area:portrait;display:flex!important;
    flex-direction:column;justify-content:flex-end!important;
    align-items:center;align-self:stretch!important;
    height:100%!important;min-height:0!important;overflow:hidden;
    padding-top:2px;position:relative;
  }

  
.cards > .section-guru .guru-portrait img{
    position:relative;z-index:2;display:block;flex:0 1 auto;
    width:auto;height:auto;max-width:100%!important;
    max-height:min(67svh,535px)!important;min-height:0;
    object-fit:contain;object-position:center bottom;
    margin:auto auto 9px;
  }

  
.cards > .section-guru .halo{
    top:18%;left:50%;transform:translateX(-50%);
    width:min(27vw,360px);opacity:.73;
  }

  
.cards > .section-guru .guru-bio-link{margin:0 auto 2px;}

}


.cards > .section-guru .guru-copy .eyebrow{display:none!important;}


.cards > .section-guru .guru-manuscript-end{
  display:flex;align-items:center;justify-content:center;
  width:100%;margin-top:clamp(16px,2.5vh,26px);
  color:#aa7c47;font:24px/1 Georgia,serif;
}


.cards > .section-guru .guru-manuscript-end::before,.cards > .section-guru .guru-manuscript-end::after{
  content:"";display:block;height:1px;flex:1;
  max-width:120px;background:linear-gradient(90deg,transparent,#b58d5c);
}


.cards > .section-guru .guru-manuscript-end::after{transform:rotate(180deg)}


.cards > .section-guru .guru-manuscript-end span{margin:0 14px;transform:rotate(-13deg)}


.cards > .section-guru .guru-bio-link{
  position:relative;z-index:4;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:7px 5px;color:#723f21;text-decoration:none;
  font:600 clamp(11.5px,1vw,14px)/1.4 "Montserrat",Arial,sans-serif;
  text-shadow:0 2px 9px rgba(73,45,25,.16);border:0;background:transparent;
  white-space:nowrap;
}


.cards > .section-guru .guru-bio-link span:first-child{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;}


.cards > .section-guru .guru-bio-link:hover{color:#a2602f;transform:translateY(-1px)}


.cards > .section-guru .guru-link-arrow{font-size:20px;font-weight:400;line-height:.8}


@media  (min-width:901px) and (max-height:720px) {
  
.cards > .section-guru > .section-shell.guru-layout{padding-top:13px!important;padding-bottom:10px!important;row-gap:8px!important;}

  
.cards > .section-guru .guru-main-title{font-size:clamp(30px,2.65vw,38px)!important;}

  
.cards > .section-guru .guru-copy h3{font-size:clamp(27px,2.2vw,32px)!important;margin-bottom:8px!important;}

  
.cards > .section-guru .guru-copy p:not(.eyebrow){font-size:clamp(12.4px,.96vw,13.8px);line-height:1.55;margin-bottom:9px;}

  
.cards > .section-guru .guru-copy .guru-subtitle{margin-bottom:10px!important;}

  
.cards > .section-guru .guru-portrait img{max-height:min(60svh,440px)!important;}

  
.cards > .section-guru .guru-manuscript-end{margin-top:8px;}

  
.cards > .section-guru .guru-bio-link{font-size:11.5px;}

}


/* On narrow devices, allow a readable vertical flow without horizontal overflow. */


@media (max-width:900px) {
  
.cards > .section-guru .guru-main-title{
    grid-row:1;order:-2;white-space:normal;max-width:100%;
    margin:0 0 9px!important;text-align:center;
    font:400 clamp(25px,5vw,35px)/1.14 "Forum",Georgia,serif;
  }

  
.cards > .section-guru .guru-copy-left{order:-1;}

  
.cards > .section-guru .guru-copy-right{order:2;}

  
.cards > .section-guru .guru-portrait{order:0!important;}

  
.cards > .section-guru .guru-portrait img{max-height:min(44svh,370px)!important;}

  
.cards > .section-guru .guru-copy{padding:0!important;}

  
.cards > .section-guru .guru-copy h3{font-size:clamp(29px,6.8vw,38px);margin:0 0 12px;}

  
.cards > .section-guru .guru-copy p:not(.eyebrow){font-size:13.5px;line-height:1.62;}

  
.cards > .section-guru .guru-copy .guru-subtitle{color:#92602e;font-weight:600;margin-bottom:13px;}

  
.cards > .section-guru .guru-bio-link{white-space:normal;text-align:center;margin:0 auto;}

  
.cards > .section-guru .guru-ornamental-frame{inset:9px 9px 10px;}

  
.cards > .section-guru .guru-corner{width:48px;height:48px;}

}



/* Viewport-fit correction: keep ALL four ornaments inside the area below the
   sticky 84px menu; move the name and both columns clear of the upper frame.
   This is intentionally scoped to the Guru Maharaj card only. */


@media  (min-width:901px)  {
  
.cards > #guru-maharaj.story-card{
    box-sizing:border-box!important;
    height:calc(100svh - var(--bss-content-menu-height))!important;
    min-height:calc(100svh - var(--bss-content-menu-height))!important;
    max-height:calc(100svh - var(--bss-content-menu-height))!important;
    overflow:hidden!important;
    border-radius:0!important;
  }

  
.cards > #guru-maharaj .guru-ornamental-frame{
    inset:clamp(11px,1.8svh,17px) clamp(12px,1.2vw,19px) clamp(12px,1.9svh,18px)!important;
  }

  
.cards > #guru-maharaj > .section-shell.guru-layout{
    box-sizing:border-box!important;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    grid-template-rows:min-content minmax(0,1fr)!important;
    row-gap:clamp(10px,1.8svh,16px)!important;
    padding:clamp(27px,4svh,39px) clamp(37px,3.5vw,64px) clamp(18px,3svh,28px)!important;
    overflow:hidden!important;
  }

  
.cards > #guru-maharaj .guru-main-title{
    line-height:1.12!important;
    margin:0!important;
  }

  
.cards > #guru-maharaj .guru-copy{
    box-sizing:border-box;
    padding-top:clamp(13px,2.5svh,23px)!important;
  }

  
.cards > #guru-maharaj .guru-portrait{
    height:100%!important;
    min-height:0!important;
    overflow:hidden;
    justify-content:flex-end!important;
    padding-top:0;
  }

  
.cards > #guru-maharaj .guru-portrait img{
    max-height:min(61svh,calc(100svh - var(--bss-content-menu-height) - 164px))!important;
    width:auto;
    margin:auto auto 8px;
  }

  
.cards > #guru-maharaj .guru-bio-link{ flex:0 0 auto; margin:0 auto 0!important; }

}


@media  (min-width:901px) and (max-height:720px)  {
  
.cards > #guru-maharaj > .section-shell.guru-layout{
    padding-top:clamp(25px,4svh,31px)!important;
    padding-bottom:clamp(15px,2.6svh,20px)!important;
    row-gap:9px!important;
  }

  
.cards > #guru-maharaj .guru-copy{ padding-top:clamp(11px,2.25svh,16px)!important; }

  
.cards > #guru-maharaj .guru-copy h3{ margin-bottom:8px!important; }

  
.cards > #guru-maharaj .guru-copy p:not(.eyebrow){line-height:1.5; margin-bottom:8px;}

  
.cards > #guru-maharaj .guru-copy .guru-subtitle{ margin-bottom:10px!important; }

  
.cards > #guru-maharaj .guru-manuscript-end{ margin-top:9px; }

  
.cards > #guru-maharaj .guru-portrait img{
    max-height:min(59svh,calc(100svh - var(--bss-content-menu-height) - 153px))!important;
  }

}


/* On very short desktop windows, keep frame visible and allow reading of the
   long editorial paragraphs by scrolling *inside* the columns if necessary. */


@media  (min-width:901px) and (max-height:570px)  {
  
.cards > #guru-maharaj .guru-copy{overflow-y:auto;max-height:100%;scrollbar-width:thin;padding-right:3px;}

  
.cards > #guru-maharaj .guru-main-title{font-size:clamp(27px,2.5vw,34px)!important;}

  
.cards > #guru-maharaj .guru-portrait img{max-height:calc(100svh - var(--bss-content-menu-height) - 155px)!important;}

}


/* Mobile layouts remain vertically readable instead of cutting content off. */


@media  (max-width:900px)  {
  
.cards > #guru-maharaj.story-card{height:auto!important;max-height:none!important;min-height:calc(100svh - var(--bss-content-menu-height))!important;overflow:visible!important;}

  
.cards > #guru-maharaj > .section-shell.guru-layout{height:auto!important;min-height:0!important;max-height:none!important;padding-bottom:35px!important;}

  
.cards > #guru-maharaj .guru-ornamental-frame{inset:10px 10px 11px!important;}

}





/* sangha.css — homepage and shared rules */


/* Section 2 only: light decorative mission cards and verified impact figures */










































































/* sections23.css — homepage and shared rules */


/* Sections 2 and 3: verified service content and integrated Ashram tabs */



















































































































/* FINAL COMPOSITION: full-colour stadium, warm dark veil and readable portrait cards */















































/* Gurugram: introduction, tabs and CTA share the left column; wired panel sits to their right */









































/* true photographic overlap, varied visible portions; no tile grid */

































































/* ashram.css — homepage and shared rules */


/* Section 3 only: approved quiet ivory layout and portrait photograph deck */







































































































































/* Expanded card close affordance: clicking the image or this corner closes it. */






/* Approved wireframe proportions with heritage aesthetic */





























/* Temple-inspired low-opacity flourish and leaves, confined behind content */















































/* Ornamental leaf silhouettes at the top right, without images/network requests */











/* sangha-final.css — homepage and shared rules */


/* Section 2 — final: retained full-colour photo, understated heritage design */


















































/* Statistics are a separate continuous band—not five associated card footers. */






























/* Refined institutional composition — overlay is BEHIND cards and lettering */
























































/* polish.css — homepage and shared rules */


/* BSS Sections 2 & 3: final restrained composition; no changes to hero */


/* Section 2: photo retains its original colour; controlled depth and parallax */


















































/* Section 3: no panel rails, a fading colour field and engraved campus silhouette */























/* Temple/tree ornamental scenery is illustrative, deliberately light and behind text */























/* Section 3 final alignment: attached selected tab, quiet photographic deck. */
















/* 2026-11-03 revival pass: restore Section 2 warmth/readability and enrich Section 3 atmosphere */




























































































/* 2026-11-03 feedback pass 2: spacing, readability and stronger parallax */








































/* 2026-11-03 school section refinements */
.section-school{position:relative;overflow:hidden;background:linear-gradient(180deg,#f6eddc 0%,#f4e9d8 100%)}
.section-school::before{content:"";position:absolute;left:26px;top:94px;width:min(31vw,340px);height:min(38vw,420px);background:url("../images/saraswati-reference.png") left top/contain no-repeat;opacity:.12;filter:saturate(.92);pointer-events:none;z-index:0}
.school-shell,.school-upper,.school-facts{position:relative;z-index:1}
.school-shell{padding-block:clamp(40px,5.2vh,78px)}
.school-upper{grid-template-columns:38fr 62fr;gap:clamp(36px,5vw,76px);align-items:start}
.school-copy{padding-top:6px}
.school-copy .eyebrow{display:none}
.school-copy h2{font-size:clamp(48px,4.9vw,68px);line-height:.96;letter-spacing:-.02em;margin-bottom:18px;max-width:6.2ch}
.school-copy>p{max-width:33ch;color:#5f584f}
.school-copy .school-lead{font-size:18px;line-height:1.62;font-weight:500;margin-bottom:12px}
.school-copy .school-body{font-size:14px;line-height:1.75;margin-bottom:18px}
.school-copy ul{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;padding:0;list-style:none;font-size:12px;line-height:1.6;margin:22px 0 24px;max-width:37rem}
.school-copy li{display:flex;align-items:flex-start;color:#5a534c}
.school-copy li:before{content:"✦";color:var(--saffron);margin-right:8px;line-height:1.2;flex:0 0 auto}
.school-gallery{padding-top:8px}
.school-main{position:relative;height:52vh;min-height:380px;border-radius:0;overflow:hidden;background:#d9cbb9}
.school-main>img{width:100%;height:100%;object-fit:cover;object-position:center center;transition:opacity .3s}
.gallery-counter{left:14px;bottom:14px;padding:8px 12px;border-radius:999px;background:rgba(26,17,13,.72);color:#fff;font-size:9px}
.gallery-prev,.gallery-next{bottom:14px}
.thumbnail-track{display:flex;gap:10px;overflow:auto;padding:18px 0 0;scrollbar-width:thin}
.thumbnail-track button{flex:0 0 82px;height:52px;padding:0;border:1px solid #ccb79a;border-radius:0;overflow:hidden;background:#ddd;cursor:pointer}
.thumbnail-track button.is-active{border-color:var(--maroon)}
.thumbnail-track img{width:100%;height:100%;object-fit:cover}
.school-facts{display:grid;grid-template-columns:repeat(6,1fr);margin-top:34px;border:1px solid #ddcdb8;border-radius:0;overflow:hidden;background:rgba(255,255,255,.18)}
.school-facts article{padding:15px 14px 13px;border-right:1px solid #ddcdb8;min-height:70px}
.school-facts article:last-child{border:0}
.school-facts strong,.school-facts span{display:block}
.school-facts strong{font:400 19px Georgia,serif;color:var(--maroon);line-height:1.1}
.school-facts span{font-size:9px;text-transform:uppercase;letter-spacing:.11em;color:var(--muted);margin-top:6px}
@media  (max-width:1050px) {
  .section-school::before{left:18px;top:94px;width:250px;height:300px;opacity:.10}
  .school-upper{grid-template-columns:1fr;gap:28px}
  .school-copy h2{max-width:none;font-size:clamp(42px,8vw,62px)}
  .school-copy>p{max-width:40rem}
  .school-main{height:46vh;min-height:320px}
  .school-facts{grid-template-columns:repeat(3,1fr)}
}
@media  (max-width:760px) {
  .section-school::before{display:none}
  .school-copy ul{grid-template-columns:1fr}
  .thumbnail-track button{flex-basis:72px;height:46px}
  .school-facts{grid-template-columns:1fr 1fr}
}

/* Approved Section 2 and Section 3 — restored from the locked reference. */
/* ========================================================================
   SECTION 02 — ABOUT BHARAT SEVASHRAM SANGHA
   One definitive layout. Account for the visible space beneath sticky header.
   ======================================================================== */
.cards > #sangha.story-card {
  min-height:calc(100svh - var(--bss-content-menu-height))!important;
  /* Keep the whole section visible before the next sticky card rises. */
  margin-bottom:clamp(240px,48svh,430px);
  background:#323235;
  isolation:isolate;
  overflow:hidden;
}
.section-sangha {
  --sangha-side:clamp(34px,4.3vw,62px);
  position:relative;
  color:#fff8ee;
}
.section-sangha > .section-bg {
  position:absolute;
  z-index:0;
  inset:-76px 0 auto 0;
  width:100%;
  height:calc(100% + 152px);
  object-fit:cover;
  object-position:center 53%;
  filter:saturate(1.04) contrast(1.02);
  transform:translate3d(0,var(--bss-photo-shift,0px),0) scale(1.02);
  will-change:transform;
}
.section-sangha::after {
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(40,42,45,.60) 0%,rgba(40,42,45,.52) 54%,rgba(34,36,39,.58) 100%);
}
.cards > #sangha.story-card > .section-shell.sangha-content {
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  width:100%;
  max-width:1530px;
  box-sizing:border-box;
  height:calc(100svh - var(--bss-content-menu-height));
  min-height:0;
  margin:auto;
  padding:clamp(15px,2.8vh,25px) var(--sangha-side) 0;
}
.section-sangha .section-number,
.section-sangha .eyebrow {display:none}
.section-sangha #sangha-title {
  margin:0 auto clamp(4px,.8vh,8px);
  color:#fff5e8;
  font:400 clamp(43px,4.15vw,64px)/1.05 "Forum",Georgia,serif;
  letter-spacing:-.012em;
  text-align:center;
  text-shadow:0 3px 14px rgba(0,0,0,.68);
}
.section-sangha .section-intro {
  display:block;
  width:min(1100px,100%);
  margin:0 auto clamp(12px,2vh,20px);
  padding:0;
  background:none;
  border:0;
  color:#fffaf3;
  font-family:"Montserrat","Segoe UI",Arial,sans-serif;
  font-size:clamp(17px,1.36vw,20px);
  font-weight:600;
  line-height:1.45;
  letter-spacing:0;
  text-align:center;
  text-shadow:0 2px 9px rgba(0,0,0,.85);
}
.section-sangha .pillar-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  align-items:stretch;
  gap:clamp(23px,2.1vw,32px);
  margin:0;
  padding:0;
  border:0;
}
.section-sangha .pillar-grid article {
  position:relative;
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  grid-template-rows:min-content 1fr;
  column-gap:8px;
  row-gap:14px;
  height:clamp(258px,calc(100svh - var(--bss-content-menu-height) - 239px),340px);
  min-height:0;
  padding:20px 15px 23px;
  background:linear-gradient(155deg,#fffbf4 0%,#fbefd9 58%,#f4dfbf 100%);
  border:1px solid rgba(213,171,118,.95);
  border-radius:0;
  box-shadow:0 10px 22px rgba(12,9,7,.28),2px 5px 0 rgba(102,67,42,.15);
  text-align:left;
  transition:transform .22s ease,box-shadow .22s ease;
}
.section-sangha .pillar-grid article::before,
.section-sangha .pillar-grid article::after {
  content:"";
  position:absolute;
  width:19px;
  height:19px;
  opacity:.65;
  pointer-events:none;
}
.section-sangha .pillar-grid article::before {top:7px;left:7px;border-top:1px solid #bc905b;border-left:1px solid #bc905b}
.section-sangha .pillar-grid article::after {bottom:7px;right:7px;border-bottom:1px solid #bc905b;border-right:1px solid #bc905b}
.section-sangha .pillar-grid article:hover {
  transform:translateY(-3px);
  box-shadow:0 14px 26px rgba(12,9,7,.32),3px 7px 0 rgba(102,67,42,.17);
}
.section-sangha .pillar-grid .mission-icon {
  display:block;
  grid-column:1;
  grid-row:1;
  width:27px;
  height:27px;
  margin:2px 0 0;
  padding:0;
  object-fit:contain;
}
.section-sangha .pillar-grid h3 {
  grid-column:2;
  grid-row:1;
  align-self:center;
  margin:0;
  padding:0;
  color:#4c2c1b;
  font:400 clamp(23px,1.76vw,28px)/1.07 "Forum",Georgia,serif;
  letter-spacing:-.01em;
  white-space:nowrap;
}
.section-sangha .pillar-grid p {
  grid-column:1/-1;
  grid-row:2;
  align-self:start;
  margin:0;
  padding:0;
  color:#49372a;
  font:500 clamp(13.2px,1vw,14.7px)/1.52 "Montserrat","Segoe UI",Arial,sans-serif;
  text-wrap:pretty;
}
.section-sangha .fact-band {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  flex:0 0 auto;
  gap:0;
  align-items:center;
  box-sizing:border-box;
  width:calc(100% + 2 * var(--sangha-side));
  min-height:82px;
  margin:auto 0 0 calc(-1 * var(--sangha-side));
  padding:10px var(--sangha-side) 12px;
  background:rgba(31,35,39,.78);
  border:0;
  border-top:1px solid rgba(255,244,229,.28);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
.section-sangha .fact-band > div {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:0;
  padding:0 8px;
  border:0;
  border-right:1px solid rgba(255,237,215,.34);
  background:none;
  text-align:center;
}
.section-sangha .fact-band > div:last-child {border-right:0}
.section-sangha .fact-band strong {
  display:block;
  color:#ffe7bc;
  font:400 clamp(43px,3.58vw,53px)/1 "Forum",Georgia,serif;
  white-space:nowrap;
  text-shadow:0 2px 9px rgba(0,0,0,.58);
}
.section-sangha .fact-band span {
  display:block;
  margin:3px 0 0;
  color:#ffffff;
  font:600 clamp(12.5px,1vw,14px)/1.23 "Montserrat","Segoe UI",Arial,sans-serif;
  letter-spacing:0;
  text-shadow:0 1px 6px rgba(0,0,0,.54);
}
@media (min-width:1151px) and (max-height:690px) {
  .cards > #sangha.story-card > .section-shell.sangha-content {padding-top:16px}
  .section-sangha #sangha-title {font-size:clamp(42px,3.65vw,51px)}
  .section-sangha .section-intro {font-size:17px;line-height:1.42;margin-bottom:11px}
  .section-sangha .pillar-grid article {height:clamp(248px,calc(100svh - var(--bss-content-menu-height) - 239px),322px);padding:17px 13px 20px;row-gap:12px}
  .section-sangha .pillar-grid p {font-size:13.35px;line-height:1.49}
  .section-sangha .fact-band {min-height:76px;padding-top:8px;padding-bottom:9px}
  .section-sangha .fact-band strong {font-size:45px}
  .section-sangha .fact-band span {font-size:12.5px}
}
@media (min-width:851px) and (max-width:1150px) {
  /* Portrait/tablet layout needs natural scrolling to reach all five stats. */
  .cards > #sangha.story-card {position:relative!important;top:auto!important;min-height:calc(100svh - var(--bss-content-menu-height))!important;margin-bottom:0;overflow:visible}
  .cards > #sangha.story-card > .section-shell.sangha-content {height:auto;min-height:calc(100svh - var(--bss-content-menu-height));padding-bottom:0}
  .section-sangha .pillar-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
  .section-sangha .pillar-grid article {height:auto;min-height:250px}
  .section-sangha .pillar-grid h3 {white-space:normal}
  .section-sangha .fact-band {margin-top:25px}
}
@media (max-width:850px) {
  .cards > #sangha.story-card {height:auto;min-height:0!important;margin-bottom:0}
  .cards > #sangha.story-card > .section-shell.sangha-content {height:auto;min-height:0;padding:30px 22px 0;--sangha-side:22px}
  .section-sangha #sangha-title {font-size:clamp(37px,6vw,53px)}
  .section-sangha .section-intro {font-size:clamp(15px,2.4vw,17px);margin-bottom:20px}
  .section-sangha .pillar-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .section-sangha .pillar-grid article {height:auto;min-height:248px;padding:18px 16px 22px}
  .section-sangha .pillar-grid h3 {white-space:normal}
  .section-sangha .pillar-grid p {font-size:14px}
  .section-sangha .fact-band {margin-top:26px;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px;min-height:0;padding:22px 18px}
  .section-sangha .fact-band > div:nth-child(even){border-right:0}
  .section-sangha .fact-band > div:last-child{grid-column:1/-1}
}
@media (max-width:530px) {
  .section-sangha .pillar-grid {grid-template-columns:1fr}
  .section-sangha .pillar-grid article {min-height:0}
  .section-sangha .fact-band strong {font-size:39px}
}
@media (prefers-reduced-motion:reduce) {
  .section-sangha > .section-bg {transform:none;will-change:auto}
  .section-sangha .pillar-grid article {transition:none}
}

/* ========================================================================
   SECTION 03 — SUBTLE DECORATIVE PARALLAX
   Preserve approved tab/photo layout and gently animate only background art.
   ======================================================================== */




/* Ashram campus-line engraving: a deliberately faint decorative illustration. */



/* Panel copy: readable, substantive text without disturbing the approved tabs. */




/* 2026-11-03 section 03 beautification pass */


















/* 2026-11-03 section 03 refinement pass 2 */




/* Position 4: a faint vertical tree rising through the left side. */


/* Position 3: top-right vine/creeper replacing the flourish. */


/* Move the mandir/campus engraving lower. */



/* Position 5: grass and a faint peacock at bottom-right. */







/* 2026-11-03 section 03 visible tree fix */


/* Keep the small decorative leaf spray, but add a proper visible tree behind the left column. */





/* 2026-11-03 section 03 outer-placement fix */


/* LEFT OUTER AREA: proper tree in the margin zone user marked. */


/* Keep this lighter leaf spray subtle. */


/* TOP-RIGHT OUTER AREA: hanging vine/creeper. */


/* BOTTOM-RIGHT CORNER: grass + faint peacock. */


/* LOWER THE MANDIR/CAMPUS LINE ART FURTHER DOWN. */







/* 2026-11-03 section 03 reference-style reconstruction */
/* Reset earlier decorative experiments and rebuild Section 3 in the approved visual direction. */





























/* Hide surplus cards for the cleaner reference look */














/* 2026-11-03 explicit svg decorative assets */
/* ============================================================================
   SECTION 03 — BSS GURUGRAM · APPROVED DESIGN (LOCKED)
   Single definitive treatment. No extra box/border styles, no decorative SVGs.
   The three-column layout, typography and upright portrait-card stack are retained.
   ============================================================================ */
.section-ashram {
  position:sticky;
  isolation:isolate;
  overflow:hidden;
  color:#2e231e;
  background:linear-gradient(170deg,#fffdf8 0%,#fdf7ed 68%,#f9eee1 100%);
}
.section-ashram::before,
.section-ashram::after,
.section-ashram .ashram-layout::before,
.section-ashram .ashram-layout::after,
.section-ashram .ashram-intro::before,
.section-ashram .ashram-intro::after,
.section-ashram .ashram-workspace::before,
.section-ashram .ashram-workspace::after,
.section-ashram .ashram-panel::before,
.section-ashram .ashram-panel::after,
.section-ashram .ashram-visual::before,
.section-ashram .ashram-visual::after {content:none;display:none}
.section-ashram .ashram-layout {
  width:min(1650px,100%);
  margin:auto;
  min-height:calc(100svh - var(--nav-h));
  padding:clamp(35px,4.5vh,64px) clamp(34px,3.85vw,64px) clamp(38px,5vh,60px);
  display:grid;
  grid-template-columns:minmax(0,28fr) minmax(0,44fr) minmax(0,28fr);
  column-gap:0;
  align-items:center;
  box-sizing:border-box;
  position:relative;
}
.section-ashram .ashram-intro {
  position:relative;
  min-width:0;
  align-self:start;
  padding-right:clamp(18px,2vw,36px);
  z-index:2;
}
.section-ashram .ashram-intro h2 {
  color:#331b17;
  font:400 clamp(44px,4.15vw,72px)/1.07 'Forum',Georgia,serif;
  letter-spacing:-.018em;
  margin:0 0 24px;
  white-space:nowrap;
}
.section-ashram .ashram-rule {
  width:clamp(120px,11vw,168px);
  height:22px;
  display:flex;
  align-items:center;
  gap:7px;
  color:#b7793e;
  margin:0 auto clamp(19px,2.2vh,30px);
  font:20px/1 'Forum',Georgia,serif;
}
.section-ashram .ashram-rule::before,
.section-ashram .ashram-rule::after {
  content:"";
  height:1px;
  flex:1;
  background:linear-gradient(90deg,transparent,#b9814d);
}
.section-ashram .ashram-rule::after {transform:rotate(180deg)}
/* Intro receives H4-style prominence instead of small body copy. */
.section-ashram .ashram-intro>p {
  max-width:420px;
  margin:0 0 clamp(26px,3.7vh,42px);
  color:#27231f;
  font:500 clamp(16.5px,1.18vw,20px)/1.56 'Montserrat','Segoe UI',Arial,sans-serif;
  letter-spacing:-.005em;
}
.section-ashram .ashram-intro .vertical-tabs {
  width:100%;min-width:0;
  background:transparent;
  border:0;
  display:flex;
  flex-direction:column;
  gap:7px;
  margin:0 0 clamp(26px,3.6vh,42px);
  padding:0;
  overflow:visible;
}
.section-ashram .ashram-intro .vertical-tabs button {
  display:block;
  width:100%;
  min-height:clamp(48px,6.15vh,62px);
  padding:clamp(11px,1.35vh,16px) clamp(17px,2vw,35px);
  border:0;
  border-left:6px solid transparent;
  border-radius:0;
  box-shadow:none;
  background:linear-gradient(90deg,rgba(247,226,197,.72),rgba(253,242,224,.53));
  color:#231e19;
  text-align:left;
  cursor:pointer;
  font:600 clamp(16px,1.12vw,20px)/1.25 'Montserrat','Segoe UI',Arial,sans-serif;
  transition:background .2s;
}
.section-ashram .ashram-intro .vertical-tabs button:hover {background:#fae4c9}
.section-ashram .ashram-intro .vertical-tabs button.is-active {
  color:#211b16;
  border-left-color:#d67824;
  background:linear-gradient(90deg,#f6d7ae,#f8e5cb 80%,rgba(251,239,225,.56));
}
.section-ashram .ashram-intro .vertical-tabs button::before,
.section-ashram .ashram-intro .vertical-tabs button::after {content:none;display:none}
.section-ashram .ashram-intro .vertical-tabs button:focus-visible {outline:2px solid #b75d1e;outline-offset:2px}
.section-ashram .ashram-visit-link {
  display:inline-flex;align-items:center;gap:18px;
  border:0;border-bottom:2px solid #a74b1e;
  border-radius:0;padding:0 0 7px;
  color:#9e4318;text-decoration:none;
  letter-spacing:0;text-transform:none;
  font:600 clamp(17px,1.2vw,22px)/1.2 'Forum',Georgia,serif;
}
.section-ashram .ashram-visit-link span {font-size:1.45em;line-height:.7}
.section-ashram .ashram-workspace {
  display:block;
  position:relative;
  min-width:0;
  height:auto;
  min-height:clamp(550px,66vh,655px);
  align-self:center;
  top:0;
  background:linear-gradient(125deg,rgba(255,250,243,.98),rgba(250,238,221,.90));
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
  z-index:1;
}
.section-ashram .ashram-panel {
  height:auto;
  min-height:inherit;
  overflow:visible;
  position:relative;
  background:transparent;
  padding:clamp(28px,3vw,46px) clamp(25px,2.6vw,46px) clamp(40px,5vh,65px);
  border:0;
  border-radius:0;
  box-shadow:none;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
}
.section-ashram .ashram-panel h3 {
  margin:0 0 clamp(18px,2.25vh,26px);
  color:#311a15;
  font:400 clamp(46px,3.65vw,66px)/1.06 'Forum',Georgia,serif;
}
.section-ashram .tab-placeholder {width:100%;max-width:640px;padding:0;color:#292520}
/* Subtitle visually matches H3/H4 scale. */
.section-ashram .tab-placeholder p:first-child {
  margin:0 0 clamp(17px,2.4vh,29px);
  color:#a24617;
  font:600 clamp(20px,1.64vw,28px)/1.24 'Forum',Georgia,serif;
}
/* The original approved block used generous body size and 1.5+ line height. */
.section-ashram .tab-placeholder p:nth-child(2) {
  margin:0;
  color:#2a2724;
  font:400 clamp(17px,1.17vw,20px)/1.58 'Montserrat','Segoe UI',Arial,sans-serif;
  letter-spacing:-.006em;
}
.section-ashram .inline-facts {
  width:100%;
  position:relative;
  z-index:2;
  margin:clamp(30px,4vh,44px) 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.section-ashram .inline-facts i {
  background:rgba(255,252,247,.54);
  padding:clamp(8px,1vh,12px) clamp(10px,1.05vw,17px);
  color:#744629;
  border:1px solid #e9cda9;
  border-radius:0;
  font:500 clamp(12px,.9vw,16px)/1.3 'Montserrat','Segoe UI',Arial,sans-serif;
  font-style:normal;
}
.section-ashram .ashram-silhouette {display:none}
.section-ashram .ashram-visual {
  position:relative;
  align-self:center;
  min-width:0;
  height:clamp(580px,72vh,715px);
  padding:0;
  transform:translateY(-45px);
  overflow:visible;
  z-index:3;
}
.section-ashram .photo-deck {
  width:100%;
  max-width:430px;
  height:100%;
  min-height:0;
  position:relative;
  display:block;
  overflow:visible;
  margin:auto;
}
/* All photo CARDS have one upright 2:3 aspect ratio, with zero tilt. */
.section-ashram .deck-card {
  display:block;
  position:absolute;
  width:clamp(160px,62%,265px);
  height:auto;
  aspect-ratio:2 / 3;
  padding:7px;
  border:0;
  border-radius:0;
  overflow:hidden;
  background:#fffaf5;
  box-shadow:0 12px 29px rgba(64,43,29,.18);
  transform:none;
  cursor:zoom-in;
  transition:top .22s ease,left .22s ease,box-shadow .22s ease;
  z-index:1;
}
.section-ashram .deck-card img {
  display:block;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
}
.section-ashram .deck-card:nth-child(1){left:28%;top:19%;z-index:5}
.section-ashram .deck-card:nth-child(2){left:22%;top:7%;z-index:3}
.section-ashram .deck-card:nth-child(3){left:10%;top:33%;z-index:7}
.section-ashram .deck-card:nth-child(4){left:44%;top:10%;z-index:2}
.section-ashram .deck-card:nth-child(5){left:39%;top:25%;z-index:6}
.section-ashram .deck-card:nth-child(6){left:16%;top:0%;z-index:1}
.section-ashram .deck-card:nth-child(7){left:36%;top:5%;z-index:4}
.section-ashram .deck-card:nth-child(8){left:15%;top:40%;z-index:8}
.section-ashram .deck-card:nth-child(9){left:5%;top:45%;z-index:9}
.section-ashram .deck-card:nth-child(10){left:16%;top:33%;width:72%;z-index:10}
.section-ashram .deck-card:hover {z-index:30;box-shadow:0 18px 40px rgba(40,25,15,.27)}
.section-ashram .deck-card.is-expanded,
.section-ashram .deck-card.is-expanded:nth-child(n){
  top:9%;left:4%;width:86%;height:82%;aspect-ratio:auto;
  z-index:1000;
  transform:none;
  box-shadow:0 22px 52px rgba(36,24,13,.34);
}
.section-ashram .deck-card.is-expanded::after {
  content:'×';position:absolute;right:8px;top:8px;
  background:rgba(37,25,17,.86);color:white;
  font:24px/1 Arial;padding:2px 8px;pointer-events:none;
}
.section-ashram .deck-card:focus-visible{outline:3px solid #bd741e;outline-offset:2px}
.section-ashram .deck-hint{display:none}
@media(min-width:851px) and (max-height:730px){
  /* Short desktop screens keep the approved composition readable and visible. */
  .section-ashram .ashram-layout{min-height:calc(100svh - var(--nav-h));padding-top:16px;padding-bottom:12px}
  .section-ashram .ashram-intro h2{font-size:clamp(40px,3.45vw,48px);margin-bottom:10px}
  .section-ashram .ashram-rule{height:15px;margin-bottom:10px}
  .section-ashram .ashram-intro>p{font-size:15.2px;line-height:1.44;margin-bottom:15px}
  .section-ashram .ashram-intro .vertical-tabs{gap:4px;margin-bottom:13px}
  .section-ashram .ashram-intro .vertical-tabs button{min-height:37px;padding:8px 14px;font-size:14px}
  .section-ashram .ashram-visit-link{font-size:16px}
  .section-ashram .ashram-workspace{min-height:475px;top:0}
  .section-ashram .ashram-panel{padding:25px 24px 28px}
  .section-ashram .ashram-panel h3{font-size:clamp(39px,3.1vw,45px);margin-bottom:12px}
  .section-ashram .tab-placeholder p:first-child{font-size:20px;margin-bottom:12px}
  .section-ashram .tab-placeholder p:nth-child(2){font-size:16.2px;line-height:1.43}
  .section-ashram .inline-facts{margin-top:17px;gap:7px}
  .section-ashram .inline-facts i{font-size:11.5px;padding:6px 9px}
  .section-ashram .ashram-visual{height:480px;transform:translateY(-8px)}
  .section-ashram .deck-card{width:clamp(145px,57%,230px);padding:6px}
  .section-ashram .deck-card:nth-child(10){width:66%;top:24%}
}

@media(min-width:851px) and (max-width:1150px){
  .section-ashram .ashram-layout{grid-template-columns:minmax(0,29fr) minmax(0,43fr) minmax(0,28fr);padding-left:26px;padding-right:26px}
  .section-ashram .ashram-intro{padding-right:16px}
  .section-ashram .ashram-intro>p{font-size:15px}
  .section-ashram .tab-placeholder p:nth-child(2){font-size:16px}
  .section-ashram .deck-card{width:66%}
}
@media(max-width:850px){
  .section-ashram{overflow:visible}
  .section-ashram .ashram-layout{grid-template-columns:1fr;gap:22px;min-height:0;padding:30px 24px 46px}
  .section-ashram .ashram-intro{align-self:start;padding-right:0}
  .section-ashram .ashram-intro h2{font-size:clamp(40px,8vw,57px)}
  .section-ashram .ashram-intro>p{max-width:640px;font-size:16px}
  .section-ashram .ashram-workspace{top:0;height:auto;min-height:0}
  .section-ashram .ashram-panel{min-height:0;padding:28px 26px 34px}
  .section-ashram .ashram-panel h3{font-size:clamp(43px,7vw,55px)}
  .section-ashram .tab-placeholder p:first-child{font-size:21px}
  .section-ashram .tab-placeholder p:nth-child(2){font-size:16px;line-height:1.58}
  .section-ashram .ashram-visual{height:560px;width:min(100%,430px);justify-self:center;transform:none}
  .section-ashram .deck-card{width:60%}
}
@media(prefers-reduced-motion:reduce){.section-ashram .deck-card{transition:none}}