/* BUILD MARKER: STYLE-V9 · POPPINS throughout · two-tone CAPITAL headings
   ==========================================================================
   Siddhartha Global School, Malihabad — homepage stylesheet
   Palette: navy wordmark, globe green, gold figures (taken from the logo)

   TYPE SYSTEM  —  two families, one job each
     --display : headings, statistics, pull quotes
     --text    : body copy, buttons, labels, forms, tables

   TO SWITCH FONT DIRECTION, change the two --display lines below AND the
   Google Fonts <link> in index.php. Nothing else needs to change.

     NOW IN USE: Poppins for both headings and body copy.
     To go back:  --display:"Fraunces",Georgia,serif;  --text:"Inter",sans-serif;
                  and restore the old Google Fonts link in index.php.
   ========================================================================== */

:root{
  --ov:.38;
  --grad-brand:linear-gradient(135deg,#0B1E3C 0%,#123058 34%,#155F38 72%,#1F8A3B 100%);
  --grad-soft:linear-gradient(135deg,#123058 0%,#17703A 100%);
  --ink:#0B1E3C;
  --navy:#123058;
  --navy-soft:#1B4478;
  --green:#17703A;
  --leaf:#1F8A3B;
  --gold:#F2C230;
  --gold-hi:#FFD452;
  --brass:#8A6410;
  --ivory:#F8F6EF;
  --sand:#ECE6D7;
  --body:#2B3542;                /* body copy — darkened from #48525F so it
                                    reads solid black-ish on cream, the way it
                                    does on the reference site */
  --muted:#5A6472;               /* captions and small print only */
  --line:rgba(11,30,60,.13);
  --shadow-sm:0 6px 18px -12px rgba(11,30,60,.42);
  --shadow:0 18px 44px -28px rgba(11,30,60,.4);
  --display:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display-ls:-.005em;
  --text:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font:var(--text);            /* legacy alias, older rules still use it */
  --ease:cubic-bezier(.2,.8,.2,1);
  --r-lg:18px;                   /* cards and panels   */
  --r-md:12px;                   /* images and inputs  */
  --r-sm:8px;                    /* buttons and chips  */
}

/* ---- FAINT SCHOOL-DOODLE BACKGROUND ----
   The cream sections carry a very light line-art pattern of books, pencils,
   globes and so on, the way the reference site does. It is texture, not
   decoration: at 5% it should be barely noticeable and must never fight the
   text sitting on top of it.

     stronger / fainter -> change the opacity below (.05)
     bigger / smaller   -> change background-size (620px)
     remove completely  -> delete this whole rule
   It is deliberately NOT applied to the dark navy or green bands. */
.sec-doodle{position:relative;isolation:isolate}
.sec-doodle::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url("../img/doodle-bg.svg");
  background-size:620px 620px;background-repeat:repeat;
  opacity:.035}
@media(max-width:767px){.sec-doodle::before{background-size:420px 420px;opacity:.03}}

*{scroll-behavior:smooth}
html{overflow-x:hidden;max-width:100%}
section[id],header[id]{scroll-margin-top:110px}
body{
  font-family:var(--text);color:var(--body);background:var(--ivory);font-weight:400;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-size:17px;line-height:1.72;
}
@media(max-width:575.98px){body{font-size:16px;line-height:1.68}}
h1,h2,h3,h4,h5,h6{font-family:var(--display);color:var(--ink);font-weight:600;
  letter-spacing:var(--display-ls);line-height:1.16;font-variant-numeric:lining-nums}
/* Section headings sit in sentence case at a moderate weight. All-caps at
   weight 800 shouts on a 3rem heading and is the commonest template tell.
   The gold rule underneath does the work the capitals were doing. */
/* ---- SECTION HEADINGS -------------------------------------------------
   One single treatment used by EVERY section, so no two sections disagree
   about how big a heading should be:

       ABOUT US                      <- eyebrow, small, letterspaced, muted
       A LEGACY OF EXCELLENCE        <- h2, capitals, two colours, gold rule

   The capitals are switched on by the .caps-headings class on <body>, which
   comes from the admin panel (Settings -> Appearance). Turn it off there and
   every heading falls back to sentence case with no other change. */
.sec h2,.cta h2{text-transform:none;font-weight:700;letter-spacing:var(--display-ls);line-height:1.22;
  position:relative;padding-bottom:1rem;max-width:26ch}
.caps-headings .sec h2,.caps-headings .cta h2,
.caps-headings .enquiry-card h3,.caps-headings .notice-head{
  text-transform:uppercase;letter-spacing:.012em;line-height:1.24;font-weight:700}
.sec .text-center h2,.text-center > h2{max-width:none}
.sec h2::after,.cta h2::after{content:"";position:absolute;left:0;bottom:0;width:88px;height:4px;
  background:var(--gold);border-radius:3px}
.text-center h2::after,.sec .text-center h2::after{left:50%;transform:translateX(-50%)}
.accent-gold{
  /* The second colour in a two-tone heading. Wrap words in *asterisks* in the
     admin panel and they come out gold:
         One CBSE curriculum, *three stages of childhood*

     NOTE FOR LATER: this is deliberately a FLAT colour, not gradient text.
     Gradient text needs background-clip:text, and the heading word-reveal
     animation wraps every word in its own <span> — the two together painted
     solid gold BLOCKS over the words instead of colouring them. A flat colour
     also matches the reference design, so nothing is lost. */
  color:var(--gold);
  -webkit-text-fill-color:currentColor;
  padding-right:.04em}
/* on the dark navy and green bands the gold is lifted so it still reads */
.leaders .accent-gold,.facilities .accent-gold,.board-sec .accent-gold,
.dayline .accent-gold,.cta .accent-gold{color:var(--gold-hi)}
.facilities h2::after,.leaders h2::after{background:var(--gold)}
/* The Chairman's quotation. It follows the same CAPITALS switch as every other
   heading now — it was originally left in sentence case on the grounds that a
   quotation in capitals reads as shouting, but it looked like an oversight
   sitting among fifteen capitalised headings, so consistency wins.
   To put just this one back into sentence case, add:
       .pull-quote{text-transform:none!important}   */
.pull-quote{max-width:30ch;font-weight:600;line-height:1.34}
.pull-quote::after{display:none}
/* body copy stays sentence case and lighter, so the contrast reads */
p,li{font-weight:400}
.lead-txt{font-weight:400}
b,strong{font-weight:600;color:var(--ink)}
h1{font-size:clamp(2.2rem,4.6vw,4rem);line-height:1.12;font-weight:600}
h2{font-size:clamp(1.6rem,2.7vw,2.3rem)}
/* Every section heading is the SAME size. Previously h2 ran to 2.8rem while
   the sub-headings inside cards sat at 1.15rem, so some sections read as one
   small heading and one very big one. The gap is now deliberate and equal
   across the page. */
.sec h2,.cta h2{font-size:clamp(1.6rem,2.7vw,2.3rem)}
h3{font-size:clamp(1.2rem,1.7vw,1.45rem)}
h4{font-size:1.12rem;font-weight:600}
h5{font-size:1rem;font-weight:600}
h4,h5{letter-spacing:0}
a{text-decoration:none}
img{max-width:100%}
::selection{background:var(--gold);color:var(--ink)}

.eyebrow{font-family:var(--text);font-weight:600;font-size:.76rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);display:inline-block;margin-bottom:.15rem}
.eyebrow.on-dark{color:var(--gold)}
.sec{padding:clamp(66px,9vw,132px) 0}
.lead-txt{font-size:1.06rem;line-height:1.75;max-width:66ch}
.sec p,.sec li{max-width:70ch}
.sec .text-center p{margin-left:auto;margin-right:auto}
.rule{width:56px;height:3px;background:var(--gold);border-radius:2px;display:block}

/* ---------------- buttons ---------------- */
.btn-gold{font-family:var(--text);background:var(--gold);color:#221900;border:0;border-radius:var(--r-sm);padding:.85rem 1.8rem;font-weight:600;font-size:.97rem;letter-spacing:0;transition:.3s var(--ease);box-shadow:0 8px 20px -14px rgba(242,194,48,.85)}
.btn-gold:hover{background:var(--gold-hi);color:#221900;transform:translateY(-2px);box-shadow:0 14px 26px -16px rgba(242,194,48,.9)}
.btn-ghost{font-family:var(--text);border:1px solid rgba(255,255,255,.55);color:#fff;border-radius:var(--r-sm);padding:.85rem 1.8rem;font-weight:600;font-size:.97rem;transition:.3s var(--ease);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:#fff;color:var(--ink)}
.btn-outline-ink{font-family:var(--text);border:1px solid var(--ink);color:var(--ink);border-radius:var(--r-sm);padding:.78rem 1.6rem;font-weight:600;font-size:.95rem;transition:.3s var(--ease)}
.btn-outline-ink:hover{background:var(--ink);color:var(--ivory)}
.btn-read{font-family:var(--text);display:inline-flex;align-items:center;gap:.45rem;font-weight:600;font-size:.92rem;letter-spacing:0;text-transform:none;color:var(--navy);border-bottom:2px solid var(--gold);padding-bottom:.22rem;transition:.3s var(--ease)}
.btn-read:hover{color:var(--green);gap:.85rem}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ---------------- overlay header ---------------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:1035;padding:1.1rem 0;transition:.45s var(--ease);background:transparent}
.site-header .container{gap:1rem}
.site-header.solid{background:rgba(248,246,239,.94);backdrop-filter:blur(16px) saturate(1.4);padding:.6rem 0;box-shadow:0 14px 34px -26px rgba(11,30,60,.75)}
.brand{display:flex;align-items:center;gap:.9rem;flex:0 0 auto;min-width:0}
.brand .brand-text{order:1;text-align:right}
.brand .mark{order:2}
.brand .mark{width:84px;height:84px;flex:0 0 84px;background:transparent;object-fit:contain;transition:.4s var(--ease);
  filter:drop-shadow(0 0 14px rgba(255,255,255,.28)) drop-shadow(0 4px 12px rgba(0,0,0,.45)) saturate(1.12) contrast(1.06)}
.site-header.solid .brand .mark{width:64px;height:64px;flex-basis:64px;filter:saturate(1.08) contrast(1.04)}
.brand b{font-family:var(--display);font-size:.97rem;color:#fff;display:block;line-height:1.2;font-weight:600;letter-spacing:.005em;text-transform:none;white-space:nowrap;text-shadow:0 2px 12px rgba(0,0,0,.55)}

.site-header.solid .brand b{color:var(--ink);text-shadow:none}

.head-call{align-items:center;gap:.5rem;color:#fff;font-weight:700;font-size:.9rem;border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:.55rem 1.2rem;transition:.35s var(--ease)}
.head-call:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.site-header.solid .head-call{color:var(--ink);border-color:var(--line)}

.menu-btn{width:58px;height:58px;border-radius:50%;border:0;background:var(--gold);display:grid;place-content:center;gap:5px;transition:.35s var(--ease);box-shadow:0 12px 28px -14px rgba(0,0,0,.6)}
.menu-btn span{display:block;width:22px;height:2.5px;background:var(--ink);border-radius:2px;transition:.3s}
.menu-btn:hover{background:#fff;transform:rotate(90deg)}
.site-header.solid .menu-btn{width:50px;height:50px;background:var(--ink)}
.site-header.solid .menu-btn span{background:#fff}
.site-header.solid .menu-btn:hover{background:var(--gold)}
.site-header.solid .menu-btn:hover span{background:var(--ink)}

/* desktop menu, reference layout */
.head-nav{display:flex;align-items:center;flex-wrap:nowrap;gap:1.05rem;margin-left:auto;margin-right:1.1rem;white-space:nowrap;flex:0 1 auto}
.head-nav a+a{margin-left:1.25rem}
@supports (gap:1rem){.head-nav a+a{margin-left:0}}
.head-nav a{font-family:var(--text);color:#fff;font-size:.92rem;font-weight:500;letter-spacing:0;text-transform:none;position:relative;padding:.4rem 0;text-shadow:0 2px 10px rgba(0,0,0,.45);transition:.3s var(--ease)}
.head-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:.35s var(--ease)}
.head-nav a:hover{color:var(--gold)}
.head-nav a:hover::after{transform:scaleX(1)}
.site-header.solid .head-nav a{color:var(--ink);text-shadow:none}
.site-header.solid .head-nav a:hover{color:var(--green)}
.btn-apply{font-family:var(--text);align-items:center;white-space:nowrap;background:var(--gold);color:#221900;border-radius:var(--r-sm);padding:.66rem 1.35rem;font-size:.92rem;font-weight:600;letter-spacing:0;text-transform:none;transition:.3s var(--ease);box-shadow:0 10px 22px -16px rgba(0,0,0,.55)}
.btn-apply:hover{background:#fff;color:var(--ink);transform:translateY(-2px)}

/* slide-out menu */
.menu-panel{width:min(430px,88vw);background:linear-gradient(160deg,#123058,#0B1E3C);color:#C6D6EC;border:0}
.menu-panel .offcanvas-header{padding:1.6rem 2rem 1rem;display:flex;align-items:center;justify-content:space-between}
.menu-close{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;transition:.3s var(--ease)}
.menu-close:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.menu-panel .offcanvas-body{padding:1rem 2rem 2.4rem}
.menu-links a{display:block;color:#fff;font-size:1.32rem;font-weight:700;letter-spacing:-.02em;padding:.62rem 0;border-bottom:1px solid rgba(255,255,255,.09);transition:.3s var(--ease)}
.menu-links a:hover{color:var(--gold);padding-left:.6rem}
.menu-contact{margin-top:2.2rem;font-size:.93rem;line-height:1.75}
.menu-contact h6{font-family:var(--text);font-size:.84rem;letter-spacing:.01em;text-transform:none;color:var(--gold);font-weight:600;margin-bottom:.9rem}
.menu-contact a{color:#C6D6EC}
.menu-contact a:hover{color:#fff}

/* ---------------- hero with live video ---------------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:#08182F;padding-top:96px}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-media img.poster{width:100%;height:100%;object-fit:cover;opacity:1}
#heroVideo{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-height:100vh;min-width:177.78vh;transform:translate(-50%,-50%);border:0;pointer-events:none;opacity:0;transition:opacity 1.4s ease}
#heroVideo.ready{opacity:1}
.hero-veil{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(8,24,47,calc(var(--ov) * 1.15)) 0%,rgba(8,24,47,calc(var(--ov) * .45)) 26%,
                          rgba(8,24,47,calc(var(--ov) * .55)) 62%,rgba(8,24,47,calc(var(--ov) * 1.25)) 100%)}
.grain{position:absolute;inset:0;opacity:.05;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,#fff 1px,transparent 0);background-size:4px 4px}
.hero .container{position:relative;z-index:3;text-align:center}
.hero .hero-copy{margin:0 auto}
.hero .hero-actions{justify-content:center}
.hero h1{color:#fff;font-weight:700;letter-spacing:-.025em;text-transform:none}
.hero h1 .accent{color:var(--gold)}
.hero p{color:#E2EAF5;max-width:56ch;margin-left:auto;margin-right:auto;font-size:1.1rem;line-height:1.8;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.hero h1{text-shadow:0 4px 26px rgba(0,0,0,.55)}
.hero-kicker{font-family:var(--text);display:inline-flex;justify-content:center;align-items:center;gap:.7rem;color:#fff;font-size:.95rem;font-weight:500;letter-spacing:.01em;text-transform:none;margin-bottom:1.3rem}
.hero-kicker::before{content:"";width:38px;height:2px;background:var(--gold)}
.sound-btn{position:absolute;right:24px;bottom:110px;z-index:5;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(8,24,47,.5);color:#fff;backdrop-filter:blur(8px);transition:.3s var(--ease)}
.sound-btn:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.scroll-cue{font-family:var(--text);position:absolute;bottom:96px;left:50%;transform:translateX(-50%);z-index:4;color:#fff;font-size:.8rem;letter-spacing:.02em;text-transform:none;opacity:.72;font-weight:500}
.scroll-cue i{display:block;text-align:center;font-size:1.05rem;animation:bob 1.9s infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

/* ---------------- three highlight cards under the hero ---------------- */
.highlights{position:relative;z-index:20;margin-top:-74px;padding-bottom:clamp(16px,3.2vw,32px)}
.hl-card{position:relative;overflow:hidden;border-radius:88px 12px 12px 12px;padding:2.55rem 1.6rem 2.25rem;min-height:344px;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;
  box-shadow:0 34px 70px -34px rgba(11,30,60,.65);transition:.5s var(--ease)}
.hl-card:hover{transform:translateY(-9px);box-shadow:0 44px 84px -34px rgba(11,30,60,.75)}
.hl-navy{background:linear-gradient(158deg,#1B4478,#0B1E3C)}
.hl-green{background:linear-gradient(158deg,#1F8A3B,#0F5628)}
.hl-photo{background:#0B1E3C}
.hl-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:1.2s var(--ease)}
.hl-photo:hover>img{transform:scale(1.07)}
.hl-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,30,60,.62),rgba(8,24,47,.9));z-index:1}
.hl-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.hl-icon{width:62px;height:62px;border-radius:50%;border:1.5px solid rgba(242,194,48,.75);display:grid;place-items:center;
  color:var(--gold);font-size:1.6rem;margin-bottom:1.2rem;transition:.45s var(--ease)}
.hl-card:hover .hl-icon{background:var(--gold);color:var(--ink);transform:rotate(-6deg) scale(1.06)}
.hl-icon{animation:floaty 4.5s ease-in-out infinite}
.hl-card:nth-child(2) .hl-icon{animation-delay:.6s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.hl-card h3{color:#fff;font-size:1.14rem;margin:0 0 .72rem}
.hl-card p{color:#CBD8EA;font-size:.86rem;line-height:1.7;margin:0 0 1.45rem;max-width:34ch}
.btn-hl{font-family:var(--text);display:inline-flex;align-items:center;gap:.5rem;background:var(--gold);color:#221900;border-radius:var(--r-sm);
  padding:.56rem 1.2rem;font-size:.82rem;font-weight:600;letter-spacing:0;text-transform:none;transition:.3s var(--ease)}
.btn-hl:hover{background:#fff;color:var(--ink);gap:1rem}

/* ---------------- organic image frame ---------------- */
.frame-organic{position:relative;overflow:hidden;border-radius:130px 0 130px 0;background:var(--navy);box-shadow:var(--shadow)}
.frame-organic img{width:100%;height:100%;object-fit:cover;display:block;transition:1.1s var(--ease)}
.frame-organic:hover img{transform:scale(1.05)}
.principal-photo{max-width:330px;aspect-ratio:4/5;margin:0 auto}
.eyebrow .dash{display:inline-block;width:34px;height:2px;background:var(--gold);vertical-align:middle;margin-right:.7rem}

/* ---------------- events ---------------- */
.events{background:var(--sand)}
.event-card{background:#fff;border-radius:12px;overflow:hidden;height:100%;display:flex;flex-direction:column;border:1px solid var(--line);transition:.45s var(--ease)}
.event-card:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.event-img{border-radius:100px 0 100px 0;margin:16px 16px 0;aspect-ratio:16/10;box-shadow:none}
.event-date{font-family:var(--text);position:absolute;right:16px;top:16px;z-index:3;background:var(--gold);color:var(--ink);border-radius:var(--r-sm);padding:.5rem .75rem;text-align:center;font-size:.78rem;font-weight:600;letter-spacing:0;text-transform:none;line-height:1.2;box-shadow:0 8px 18px -12px rgba(0,0,0,.55)}
.event-date b{display:block;font-size:1.35rem;letter-spacing:-.02em}
.event-body{padding:1.4rem 1.5rem 1.7rem;flex:1;display:flex;flex-direction:column;align-items:flex-start}
.event-tag{font-family:var(--text);font-size:.8rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--green);background:rgba(31,138,59,.1);border-radius:var(--r-sm);padding:.26rem .7rem;margin-bottom:.85rem}
.event-body h4{font-size:1.17rem;margin:0 0 .5rem}
.event-body p{font-size:.92rem;line-height:1.7;margin:0 0 1.2rem;color:var(--body)}

/* ---------------- photo frames ---------------- */
.photo{position:relative;overflow:hidden;border-radius:14px;background:linear-gradient(140deg,#17532C,#0B1E3C)}
.photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ease)}
.photo:hover img{transform:scale(1.05)}
.photo .cap{font-family:var(--text);position:absolute;left:14px;bottom:11px;font-size:.8rem;letter-spacing:0;text-transform:none;color:rgba(248,246,239,.88);z-index:2;font-weight:500;text-shadow:0 1px 6px rgba(0,0,0,.65)}
.tint::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,30,60,.1),rgba(11,30,60,.72));z-index:1}

/* ---------------- video tiles ---------------- */
.vtile{position:relative;border-radius:var(--r-lg);overflow:hidden;cursor:pointer;background:#0B1E3C;aspect-ratio:16/9;display:block}
.vtile img{width:100%;height:100%;object-fit:cover;transition:.9s var(--ease);opacity:.66}
.vtile:hover img{transform:scale(1.06);opacity:.52}
.vtile .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,30,60,.12),rgba(11,30,60,.92))}
.vtile .meta{position:absolute;left:0;right:0;bottom:0;padding:1.6rem 1.7rem;z-index:2}
.vtile .meta h4{color:#fff;font-size:1.28rem;margin:0 0 .25rem}
.vtile .meta p{color:#C2D0E4;font-size:.86rem;margin:0}
.play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:78px;height:78px;border-radius:50%;border:1.5px solid var(--gold);display:grid;place-items:center;color:var(--gold);font-size:1.6rem;z-index:2;transition:.4s var(--ease);background:rgba(11,30,60,.35)}
.vtile:hover .play{background:var(--gold);color:#0B1E3C;transform:translate(-50%,-50%) scale(1.09)}

/* ---------------- message from the school ---------------- */
.message-sec{background:var(--ivory)}
.msg-photo{margin:0 auto;max-width:340px;aspect-ratio:4/5}
.msg-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------------- welcome ---------------- */
.sig{font-size:1.6rem;font-weight:700;font-style:italic;color:var(--green)}
.quote-mark{font-size:5rem;line-height:.55;color:var(--gold);font-weight:800}

/* ---------------- about us ---------------- */
.about-us{background:#fff;position:relative;overflow:hidden}
.about-us .container{position:relative;z-index:1}
.blob-c{width:460px;height:460px;background:rgba(31,138,59,.18);top:-160px;right:-140px;
  animation:drift 30s ease-in-out infinite}
.about-photo{margin:0;aspect-ratio:4/4.6;max-height:620px}
.about-photo img{width:100%;height:100%;object-fit:cover;display:block}
/* the photo wipes into view rather than just fading.
   Default state is VISIBLE. JS adds .armed to hide it, then .revealed to wipe it
   in — so no JavaScript means no animation, never an invisible image. */
.about-photo{transition:clip-path 1.2s var(--ease)}
.about-photo.armed{clip-path:inset(0 0 100% 0)}
.about-photo.armed.revealed{clip-path:inset(0 0 0 0)}
.about-us h2{line-height:1.14}

/* ---------------- statistics boxes ---------------- */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.85rem}
.stat-box{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.15rem .9rem;text-align:center;
  transition:.4s var(--ease)}
.stat-box:hover{border-color:var(--gold);transform:translateY(-5px);box-shadow:var(--shadow-sm)}
.stat-box b{display:block;font-size:clamp(1.5rem,2.4vw,2.05rem);font-weight:800;color:var(--gold);
  line-height:1;letter-spacing:-.03em;margin-bottom:.35rem}
.stat-box span{font-size:.76rem;color:var(--body);font-weight:600;line-height:1.35;display:block}

/* ---------------- leadership carousel ---------------- */
.leaders{background:var(--grad-brand);position:relative;overflow:hidden}
.leaders h2,.leaders .eyebrow{color:#fff}
.leaders .eyebrow{color:var(--gold)}
.leaders > .container > .row p{color:#C8D8EA}
.leaders .sw-prev,.leaders .sw-next{border-color:rgba(255,255,255,.5);color:#fff}
.leaders .sw-prev:hover,.leaders .sw-next:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.leaders .swiper-pagination-bullet{background:#fff;opacity:.35}
.leaders .swiper-pagination-bullet-active{background:var(--gold);opacity:1}

/* slow drifting shapes behind the cards */
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.4;pointer-events:none;z-index:0}
.blob-a{width:420px;height:420px;background:rgba(31,138,59,.4);top:-120px;left:-100px;animation:drift 22s ease-in-out infinite}
.blob-b{width:360px;height:360px;background:rgba(242,194,48,.38);bottom:-140px;right:-80px;animation:drift 27s ease-in-out infinite reverse}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(60px,40px) scale(1.12)}66%{transform:translate(-40px,60px) scale(.94)}}
.leaders .container{position:relative;z-index:1}

/* leader card: one white rounded container, everything on the same left edge */
.leader-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;height:100%;
  display:flex;flex-direction:column;padding:10px 10px 0;
  box-shadow:0 26px 52px -30px rgba(0,0,0,.55);transition:.5s var(--ease)}
.leader-card:hover{transform:translateY(-10px);box-shadow:0 42px 74px -30px rgba(0,0,0,.65)}

.leader-frame{position:relative;padding:0}
.leader-photo{position:relative;aspect-ratio:1/1;max-height:none;overflow:hidden;
  background:var(--navy);border-radius:var(--r-md)}
.leader-photo img{width:100% !important;height:100% !important;display:block;
  object-fit:cover !important;object-position:center 15%;background:var(--navy);
  filter:saturate(.95) contrast(1.05) brightness(1.02);transition:1s var(--ease)}
.leader-card:hover .leader-photo img{transform:scale(1.06);filter:saturate(1.03) contrast(1.02) brightness(1.05)}

/* text block: same padding both sides, so it lines up with the photo */
.leader-body{background:transparent;margin:0;padding:1.15rem .55rem 1.35rem;flex:1;
  display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.leader-body .role{display:inline-block;font-size:.58rem;font-weight:800;letter-spacing:.16em;
  text-transform:none;letter-spacing:0;font-size:.82rem;font-weight:600;font-family:var(--text);
  color:var(--brass);background:rgba(242,194,48,.22);
  border-radius:var(--r-sm);padding:.26rem .68rem;margin-bottom:.6rem}
.leader-body h4{font-size:1.02rem;margin:0 0 .4rem;letter-spacing:-.02em;line-height:1.3}
.leader-body .sub{font-size:.78rem;line-height:1.6;color:var(--body);margin-bottom:.9rem;min-height:3.8em}
.leader-body .btn-read{font-size:.7rem;margin-top:auto;border-bottom-width:2px}

/* reusable white mount, used on the hostel photos and the message portrait */
.framed-white{background:#fff;border-radius:var(--r-lg);padding:9px;
  box-shadow:0 22px 46px -26px rgba(11,30,60,.45)}
.framed-white img{border-radius:var(--r-md)}
.board-sec .framed-white{background:rgba(255,255,255,.96)}

/* swiper shared */
.swiper{padding-bottom:4.4rem!important}
.leaders-swiper .swiper-slide{height:auto}
.leaders-swiper .swiper-slide > .leader-card{height:100%}
.swiper-pagination-bullet{background:var(--navy);opacity:.25;width:9px;height:9px}
.swiper-pagination-bullet-active{background:var(--gold);opacity:1;width:26px;border-radius:6px}
.nav-btns{display:flex;gap:.6rem}
.sw-prev,.sw-next{width:48px;height:48px;border-radius:50%;border:1px solid var(--ink);background:transparent;color:var(--ink);display:grid;place-items:center;transition:.3s var(--ease)}
.sw-prev:hover,.sw-next:hover{background:var(--ink);color:var(--ivory)}
.sw-prev.on-dark,.sw-next.on-dark{border-color:rgba(255,255,255,.45);color:#fff}
.sw-prev.on-dark:hover,.sw-next.on-dark:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}

/* ---------------- facilities carousel ---------------- */
.facilities{background:var(--grad-brand);color:#BCCDE4;position:relative;overflow:hidden}
.facilities h2{color:#fff}
.facilities .sw-prev,.facilities .sw-next{border-color:rgba(255,255,255,.5);color:#fff}
.facilities .sw-prev:hover,.facilities .sw-next:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.facilities .swiper-pagination-bullet{background:#fff;opacity:.35}
.facilities .swiper-pagination-bullet-active{background:var(--gold);opacity:1}

.fac-card{background:#fff;border-radius:var(--r-lg);height:100%;display:flex;flex-direction:column;
  border:0;transition:.5s var(--ease);box-shadow:0 24px 48px -30px rgba(0,0,0,.6)}
.fac-card:hover{transform:translateY(-10px);box-shadow:0 40px 70px -30px rgba(0,0,0,.7)}
.fac-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--navy);
  border-radius:var(--r-lg) var(--r-lg) 0 0}
.fac-img img{width:100%;height:100%;object-fit:cover;display:block;transition:1.1s var(--ease)}
.fac-card:hover .fac-img img{transform:scale(1.08)}
.fac-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(11,30,60,.55));opacity:.75;transition:.5s}
.fac-card:hover .fac-img::after{opacity:.35}

/* icon badge straddles the image edge */
.fac-body{padding:2.4rem 1.4rem 1.7rem;flex:1;position:relative}
.fac-body i{position:absolute;top:-30px;left:1.4rem;display:grid;place-items:center;
  width:60px;height:60px;border-radius:50%;background:var(--gold);color:var(--ink);
  font-size:1.4rem;border:4px solid #fff;box-shadow:0 12px 24px -12px rgba(0,0,0,.5);
  transition:.45s var(--ease)}
.fac-card:hover .fac-body i{transform:rotate(-8deg) scale(1.08);background:var(--leaf);color:#fff}
.fac-body h4{font-size:1.15rem;margin:0 0 .5rem;color:var(--ink);position:relative;padding-bottom:.6rem}
.fac-body h4::after{content:"";position:absolute;left:0;bottom:0;width:28px;height:3px;
  background:var(--gold);border-radius:2px;transition:.45s var(--ease)}
.fac-card:hover .fac-body h4::after{width:56px}
.fac-body p{font-size:.9rem;line-height:1.7;margin:0;color:var(--body)}

/* medium-width video block under the hero */
.video-mid{max-width:1020px}

/* Soft white-to-ivory band behind the two video tiles, so the section reads as
   its own block instead of running into the one above it. Change the two
   colours here to restyle it, or delete the rule for a plain white section. */
.video-band{
  position:relative;
  background:linear-gradient(180deg,#FFFFFF 0%,var(--ivory) 46%,var(--sand) 100%);
  padding-top:clamp(46px,6vw,76px)!important}
.video-band::before{
  content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:min(1180px,92%);height:1px;
  background:linear-gradient(90deg,transparent,rgba(242,194,48,.55),transparent)}
.video-band .container{position:relative;z-index:1}

/* ---------------- cards / stages ---------------- */
.pill-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:2.2rem 1.8rem;height:100%;transition:.45s var(--ease)}
.pill-card:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:rgba(242,194,48,.65)}
.pill-card i{font-size:1.7rem;color:var(--gold)}
.pill-card h4{font-size:1.18rem;margin:1rem 0 .55rem}
.pill-card p{font-size:.94rem;line-height:1.75;margin:0}
.stage-card{position:relative;border-radius:8px;overflow:hidden;min-height:360px;display:flex;align-items:flex-end;padding:2rem;color:#fff}
.stage-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:1.1s var(--ease)}
.stage-card:hover img{transform:scale(1.07)}
.stage-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 32%,rgba(8,24,47,.93));z-index:1}
.stage-card .st{position:relative;z-index:2}
.stage-card h4{color:#fff;font-size:1.35rem;margin:0}
.stage-card small{font-family:var(--text);font-size:.84rem;letter-spacing:0;text-transform:none;color:var(--gold);display:block;margin-bottom:.35rem;font-weight:600}

/* ---------------- boarding ---------------- */
.board-sec{background:var(--navy);color:#C3D2E4}
.board-sec h2{color:#fff}
.board-list{list-style:none;padding:0;margin:1.7rem 0 0}
.board-list li{padding:.9rem 0;border-bottom:1px solid rgba(255,255,255,.12);display:flex;gap:.9rem;align-items:flex-start;font-size:.96rem}
.board-list i{color:var(--gold);margin-top:.25rem}
.board-list b{color:#fff}

/* ---------------- toppers ---------------- */
.topper{background:#fff;border:1px solid var(--line);border-radius:8px;padding:2rem 1.4rem;text-align:center;height:100%;transition:.4s var(--ease)}
.topper:hover{border-color:var(--gold);transform:translateY(-7px);box-shadow:var(--shadow-sm)}
.ring{width:122px;height:122px;margin:0 auto 1.1rem;position:relative}
.ring svg{transform:rotate(-90deg)}
.ring .bg{stroke:var(--sand)}
.ring .fg{stroke:var(--gold);stroke-linecap:round;transition:stroke-dashoffset 1.7s var(--ease)}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:1.34rem;font-weight:800;color:var(--ink)}
.topper h5{font-size:1.07rem;margin:0 0 .2rem;color:var(--ink);font-weight:800}
.topper small{font-family:var(--text);font-size:.85rem;letter-spacing:0;text-transform:none;color:var(--brass);font-weight:600}

/* ---------------- marquee ---------------- */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--sand);padding:1.05rem 0}
.marquee-track{display:flex;gap:3rem;width:max-content;animation:slide 36s linear infinite}
.marquee span{font-family:var(--text);font-size:.9rem;letter-spacing:.01em;text-transform:none;color:var(--navy);white-space:nowrap;font-weight:500}
.marquee span::before{content:"◆";color:var(--gold);margin-right:.9rem;font-size:.6rem}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------------- gallery ---------------- */
@media(min-width:992px) and (max-width:1399px){.stat-grid{grid-template-columns:repeat(3,1fr)}}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gal .photo{min-height:200px}
.gal .photo:nth-child(1){grid-column:span 2;grid-row:span 2;min-height:414px}
.gal .photo:nth-child(6){grid-column:span 2}


/* ---------------- notice board (boxed, auto-scrolling) ---------------- */
.notices{background:var(--ivory)}
.notice-box{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm)}
.notice-head{background:var(--ink);color:#fff;padding:.95rem 1.3rem;display:flex;align-items:center;justify-content:space-between;
  font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.notice-head i{color:var(--gold);margin-right:.5rem}
.notice-head .live{color:var(--gold);font-size:.66rem;display:inline-flex;align-items:center;gap:.45rem}
.notice-head .live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);animation:blip 1.6s infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}
.notice-scroll{position:relative;height:404px;overflow:hidden;padding:0 1.1rem}
.notice-scroll::before,.notice-scroll::after{content:"";position:absolute;left:0;right:0;height:56px;z-index:2;pointer-events:none}
.notice-scroll::before{top:0;background:linear-gradient(#fff,rgba(255,255,255,0));height:34px}
.notice-scroll::after{bottom:0;background:linear-gradient(rgba(255,255,255,0),#fff);height:44px}
.notice-track{display:flex;flex-direction:column;animation:noticeUp 26s linear infinite}
.notice-scroll:hover .notice-track{animation-play-state:paused}
@keyframes noticeUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.notice{padding:1.1rem 1.1rem;margin:.9rem 0;background:var(--ivory);border-left:3px solid var(--gold);border-radius:0 8px 8px 0;transition:.3s var(--ease)}
.notice:hover{background:#fff;box-shadow:var(--shadow-sm);transform:translateX(4px)}
.notice .n-date{font-family:var(--text);display:inline-block;font-size:.82rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--brass);background:rgba(242,194,48,.16);border-radius:var(--r-sm);padding:.24rem .65rem;margin-bottom:.55rem}
.notice h5{font-size:1.03rem;margin:0 0 .3rem;color:var(--ink);font-weight:800;line-height:1.35}
.notice p{font-size:.89rem;line-height:1.65;margin:0}

/* ---------------- campus gallery carousel ---------------- */
.gal-swiper{padding-bottom:3.4rem!important;border-radius:130px 0 130px 0;overflow:hidden}
.gal-slide{margin:0;position:relative}
.gal-slide img{width:100%;aspect-ratio:16/11;object-fit:cover;display:block}
.gal-slide figcaption{position:absolute;left:0;bottom:0;right:0;padding:2.6rem 1.6rem 1.3rem;color:#fff;font-weight:700;font-size:.95rem;
  background:linear-gradient(transparent,rgba(8,24,47,.88))}
.gal-prev,.gal-next{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:46px;height:46px;border-radius:50%;border:0;
  background:rgba(255,255,255,.9);color:var(--ink);display:grid;place-items:center;transition:.3s var(--ease)}
.gal-prev{left:14px}.gal-next{right:14px}
.gal-prev:hover,.gal-next:hover{background:var(--gold)}
.gal-pag{bottom:0!important}

/* ---------------- admission enquiry form ---------------- *//* ---------------- admission enquiry form ---------------- */
.enquiry-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:2.2rem 2rem 2.4rem;box-shadow:var(--shadow-sm)}
.enquiry-card h3{font-size:1.5rem}
.enquiry-card .form-label{font-family:var(--text);font-size:.88rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink);margin-bottom:.35rem}
.enquiry-card .form-control,.enquiry-card .form-select{border:1px solid var(--line);border-radius:8px;padding:.75rem .9rem;font-size:.95rem;color:var(--ink);background-color:var(--ivory)}
.enquiry-card .form-control:focus,.enquiry-card .form-select:focus{border-color:var(--gold);box-shadow:0 0 0 .2rem rgba(242,194,48,.25);background-color:#fff}
.enquiry-card .form-control.is-bad,.enquiry-card .form-select.is-bad{border-color:#C0392B;background-color:#fff6f5}
.form-note{font-size:.78rem;color:var(--muted);text-align:center}
.form-done{margin-top:1rem;background:rgba(31,138,59,.1);color:var(--green);border-radius:8px;padding:.9rem 1rem;font-size:.9rem;font-weight:700}
.form-done i{margin-right:.4rem}

/* ---------------- cta ---------------- */
.cta{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--green),var(--ink));color:#fff;border-radius:10px;padding:clamp(2.7rem,5vw,4.4rem)}
.cta h2{color:#fff}
.cta::before{content:"";position:absolute;right:-60px;top:-60px;width:290px;height:290px;border:1px solid rgba(242,194,48,.32);border-radius:50%}
.cta::after{content:"";position:absolute;right:20px;bottom:-95px;width:210px;height:210px;border:1px solid rgba(242,194,48,.22);border-radius:50%}

/* ---------------- admissions ticker ---------------- */
.ticker-bar{display:flex;align-items:stretch;background:var(--gold);overflow:hidden}
.ticker-label{flex:0 0 auto;background:var(--ink);color:#fff;font-weight:700;font-size:.86rem;
  letter-spacing:.06em;padding:.85rem 1.4rem;display:flex;align-items:center;white-space:nowrap}
.ticker-window{flex:1;overflow:hidden;display:flex;align-items:center}
.ticker-track{display:flex;gap:3rem;width:max-content;animation:tick 30s linear infinite}
.ticker-bar:hover .ticker-track{animation-play-state:paused}
.ticker-track span{white-space:nowrap;color:#221900;font-weight:600;font-size:.88rem;letter-spacing:.02em}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------------- back to top ---------------- */
.to-top{position:fixed;right:22px;bottom:104px;z-index:1039;width:46px;height:46px;border-radius:12px;
  border:0;background:var(--ink);color:#fff;font-size:1.1rem;opacity:0;pointer-events:none;
  transform:translateY(12px);transition:.4s var(--ease);box-shadow:0 14px 30px -14px rgba(0,0,0,.6)}
.to-top.show{opacity:1;pointer-events:auto;transform:none}
.to-top:hover{background:var(--gold);color:var(--ink)}

/* ---------------- footer ---------------- */
footer{background:var(--grad-brand);color:#C3D3E6;padding-top:80px}
footer h6{font-family:var(--text);font-size:.95rem;letter-spacing:0;text-transform:none;color:var(--gold);margin-bottom:1.1rem;font-weight:600}
footer a{color:#C3D3E6;font-size:.93rem;display:block;padding:.32rem 0}
footer a:hover{color:#fff}
/* ---- FOOTER IDENTITY ----
   The logo used to be 210px wide, which dwarfed the address next to it. It is
   now 118px — the normal size for a footer mark — with the school name set
   underneath it in capitals and the CBSE line below that.
   Resize the mark here and nothing else needs touching. */
.foot-brand{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem}
.foot-logo{width:118px;max-width:42%;height:auto;display:block}
.foot-name{
  font-family:var(--display);font-weight:700;font-size:1.06rem;line-height:1.3;
  letter-spacing:.05em;text-transform:uppercase;color:#fff;max-width:16ch}
.foot-sub{
  font-family:var(--text);font-weight:500;font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold)}
@media(max-width:991px){
  .foot-brand{align-items:center;text-align:center}
  .foot-logo{max-width:130px}
  .foot-name{max-width:none}
}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:58px;padding:1.5rem 0;font-size:.83rem}
.mapbox{border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.15);filter:grayscale(1) contrast(.92);transition:.5s}
.mapbox:hover{filter:none}

/* ---------------- social rail ---------------- */
.social-rail{position:fixed !important;right:0;top:50%;transform:translateY(-50%);z-index:1032;display:flex;flex-direction:column;
  width:46px;border-radius:6px 0 0 6px;overflow:hidden;box-shadow:0 18px 40px -22px rgba(0,0,0,.6)}
.social-rail a{width:46px;height:46px;display:grid;place-items:center;color:#fff;font-size:1.15rem;transition:.3s var(--ease)}
.social-rail a:hover{width:56px}
.s-fb{background:#1877F2}
.s-ig{background:linear-gradient(45deg,#F09433,#DC2743 45%,#BC1888)}
.s-yt{background:#FF0000}
.s-wa{background:#25D366}


/* ---------------- enquiry modal ---------------- */
.enquiry-modal{border:0;border-radius:16px;overflow:hidden;position:relative;background:#fff}
.enquiry-modal .enquiry-card{border-radius:0}
.btn-close-round{position:absolute;right:12px;top:12px;z-index:5;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--ink);transition:.3s var(--ease)}
.btn-close-round:hover{background:var(--ink);color:#fff}

/* ---------------- Sia, admission chatbot ---------------- */
/* The launcher and its greeting label sit in one fixed dock, so the label is
   always pinned to the left of the circle no matter how long the wording is. */
.chat-dock{position:fixed;right:22px;bottom:26px;z-index:1041;display:flex;align-items:center;gap:10px}
.chat-dock.hushed .chat-hello,.chat-dock.hushed .chat-hello-x{display:none}

.chat-hello{
  order:1;                       /* label first, so it sits to the LEFT */
  display:flex;align-items:center;gap:.55rem;
  max-width:250px;
  background:#fff;color:var(--ink);border:1px solid var(--line);
  border-radius:26px;padding:.6rem 1rem;
  font-family:var(--text);font-size:.84rem;font-weight:600;line-height:1.35;text-align:left;
  box-shadow:0 16px 34px -18px rgba(11,30,60,.55);
  animation:helloIn .5s var(--ease) both .9s;transition:.3s var(--ease)}
.chat-hello i{color:var(--green);font-size:1.05rem;flex:0 0 auto}
.chat-hello:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:0 20px 40px -18px rgba(11,30,60,.6)}
@keyframes helloIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

.chat-hello-x{
  order:2;width:22px;height:22px;flex:0 0 22px;align-self:flex-start;margin-top:-2px;
  border:0;border-radius:50%;background:var(--ink);color:#fff;
  font-size:.7rem;display:grid;place-items:center;
  animation:helloIn .5s var(--ease) both 1s;transition:.25s var(--ease)}
.chat-hello-x:hover{background:#E4322B}

.chat-launcher{order:3;position:relative;right:auto;bottom:auto;z-index:1041;width:66px;height:66px;border-radius:50%;border:0;flex:0 0 66px;
  background:linear-gradient(145deg,#FFD452,#E0A81C);color:#1B1400;font-size:1.6rem;display:grid;place-items:center;
  box-shadow:0 18px 40px -14px rgba(224,168,28,.75),0 0 0 6px rgba(242,194,48,.18);transition:.35s var(--ease)}
.chat-launcher:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 24px 50px -14px rgba(224,168,28,.9),0 0 0 10px rgba(242,194,48,.16)}
.chat-launcher .pulse{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(242,194,48,.75);animation:chatPulse 2.4s ease-out infinite}
@keyframes chatPulse{0%{transform:scale(1);opacity:.85}70%{transform:scale(1.55);opacity:0}100%{opacity:0}}
.chat-launcher .badge-dot{position:absolute;top:-2px;right:-2px;min-width:22px;height:22px;border-radius:11px;background:#E4322B;color:#fff;
  font-size:.7rem;font-weight:800;display:grid;place-items:center;border:2px solid #fff}
.chat-launcher.open .badge-dot,.chat-launcher.open .pulse{display:none}

.chat-panel{position:fixed;right:22px;bottom:104px;z-index:1042;width:376px;max-width:calc(100vw - 32px);height:min(560px,72vh);
  background:#fff;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 40px 90px -30px rgba(11,30,60,.65);transform-origin:bottom right;animation:chatIn .32s var(--ease)}
@keyframes chatIn{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
.chat-head{display:flex;align-items:center;gap:.85rem;padding:1rem 1.1rem;background:linear-gradient(130deg,#1B4478,#0B1E3C);color:#fff}
.chat-avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:1.3rem;color:#1B1400;
  background:linear-gradient(145deg,#FFD452,#E0A81C);box-shadow:0 0 0 3px rgba(242,194,48,.25)}
.chat-id b{display:block;font-size:1.02rem;line-height:1.2;color:#fff}
.chat-id span{font-size:.72rem;color:#BFD3EC;display:flex;align-items:center;gap:.35rem}
.chat-id span i{font-size:.44rem;color:#3BD671}
.chat-close{margin-left:auto;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;transition:.3s}
.chat-close:hover{background:rgba(255,255,255,.16)}

.chat-log{flex:1;overflow-y:auto;padding:1.1rem;background:var(--ivory);display:flex;flex-direction:column;gap:.65rem}
.msg{max-width:82%;padding:.72rem .95rem;border-radius:14px;font-size:.9rem;line-height:1.55;animation:msgIn .3s var(--ease)}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.msg.bot{background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px;color:var(--ink);align-self:flex-start}
.msg.me{background:var(--ink);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.msg.ok{background:rgba(31,138,59,.12);border:1px solid rgba(31,138,59,.3);color:var(--green);font-weight:700;align-self:flex-start}
.typing{display:flex;gap:4px;align-self:flex-start;background:#fff;border:1px solid var(--line);padding:.75rem .9rem;border-radius:14px}
.typing i{width:7px;height:7px;border-radius:50%;background:#9FB2CC;animation:dot 1.2s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes dot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

.chat-chips{display:flex;flex-wrap:wrap;gap:.45rem;padding:0 1.1rem;background:var(--ivory)}
.chat-chips:empty{display:none}
.chat-chips button{border:1px solid var(--gold);background:rgba(242,194,48,.14);color:var(--ink);border-radius:999px;
  padding:.42rem .9rem;font-size:.8rem;font-weight:700;transition:.25s var(--ease)}
.chat-chips button:hover{background:var(--gold)}

.chat-input{display:flex;gap:.5rem;padding:.85rem 1.1rem 1rem;background:var(--ivory);border-top:1px solid var(--line)}
.chat-input input{flex:1;border:1px solid var(--line);border-radius:999px;padding:.68rem 1rem;font-size:.9rem;background:#fff;color:var(--ink)}
.chat-input input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 .2rem rgba(242,194,48,.22)}
.chat-input button{width:46px;height:46px;flex:0 0 46px;border-radius:50%;border:0;background:var(--gold);color:#221900;transition:.3s var(--ease)}
.chat-input button:hover{background:var(--ink);color:#fff}

/* ---------------- mobile bar ---------------- */
.mobile-bar{position:fixed;bottom:0;left:0;right:0;z-index:1040;display:none;background:var(--ink);border-top:1px solid rgba(242,194,48,.4)}
.mobile-bar a{flex:1;display:flex;align-items:center;justify-content:center;gap:.4rem;text-align:center;padding:.95rem 0;
  color:#fff;font-size:.8rem;font-weight:800;letter-spacing:.02em}
.mobile-bar .mb-call{background:var(--ink)}
.mobile-bar .mb-wa{background:#25D366;color:#06331A}
.mobile-bar .mb-enq{background:var(--gold);color:#221900}

/* ---------------- scroll progress ---------------- */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:1050;
  background:linear-gradient(90deg,var(--green),var(--gold));transition:width .12s linear}

/* ---------------- heading word reveal ---------------- */
.split-word{display:inline-block;overflow:hidden;vertical-align:bottom}
.split-word > span{display:inline-block;transform:translateY(105%);transition:transform .8s var(--ease)}
.rv-head.in .split-word > span,.rv.in .split-word > span{transform:none}
.split-word:nth-child(1) > span{transition-delay:0ms}
.split-word:nth-child(2) > span{transition-delay:55ms}
.split-word:nth-child(3) > span{transition-delay:110ms}
.split-word:nth-child(4) > span{transition-delay:165ms}
.split-word:nth-child(5) > span{transition-delay:220ms}
.split-word:nth-child(6) > span{transition-delay:275ms}
.split-word:nth-child(7) > span{transition-delay:330ms}
.split-word:nth-child(8) > span{transition-delay:385ms}
.split-word:nth-child(9) > span{transition-delay:440ms}
.split-word:nth-child(10) > span{transition-delay:495ms}
.split-word:nth-child(11) > span{transition-delay:550ms}
.split-word:nth-child(12) > span{transition-delay:605ms}

img{color:transparent}          /* hides alt text sprawl if a file 404s */

/* ---------------- image fill guarantee ----------------
   Uploaded photos are never all the same shape. These rules force every
   framed image to crop to fill instead of letterboxing with white bars. */
.leader-photo img,.fac-img img,.about-photo img,.photo img,
.stage-card img,.event-img img,.gal-slide img,.hl-photo>img{
  width:100%;height:100%;object-fit:cover;display:block}

/* stylesheet build marker — check this is present if the site looks wrong:
   open assets/css/style.css in the browser and search for BUILD-2026-08-30-E */
.css-build-2026-08-30-E{display:none}

/* ---------------- reveal ---------------- */
/* reveal animations only apply when JS is running (html gets the .js class).
   Without it every element is visible, so a script error can never blank the page. */
.rv,.rv-l,.rv-r{opacity:1;transform:none}
html.js .rv{opacity:0;transform:translateY(32px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
html.js .rv-l{opacity:0;transform:translateX(-56px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
html.js .rv-r{opacity:0;transform:translateX(56px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
html.js .rv-l.in,html.js .rv-r.in{opacity:1;transform:none}
html.js .rv.in{opacity:1;transform:none}

@media(max-width:991px){
  .mobile-bar{display:flex}
  body{padding-bottom:56px}
  .highlights{margin-top:-40px}
  .hl-card{border-radius:64px 10px 10px 10px;min-height:296px;padding:2.1rem 1.3rem 1.9rem}
  .gal{grid-template-columns:repeat(2,1fr)}
  .gal .photo:nth-child(1){grid-column:span 2;grid-row:auto;min-height:230px}
  .sound-btn{bottom:132px;right:16px}
  .scroll-cue{display:none}
  #heroVideo{min-height:118vh}
  .site-header{padding:.75rem 0}
  .brand .mark{width:50px;height:50px;flex-basis:50px}
  .brand span{font-size:.56rem}
  .menu-btn{width:50px;height:50px}
  .frame-organic{border-radius:90px 0 90px 0}
  .blob{display:none}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .about-photo{aspect-ratio:4/3.4}
  .leader-card{border-radius:var(--r-lg)}
  .rv-l,.rv-r{transform:translateY(28px)}
  .event-img{border-radius:56px 0 56px 0}
  .principal-photo{max-width:280px}
  .enquiry-card{padding:1.8rem 1.4rem 2rem}
  .notice-scroll{height:360px}
  .gal-swiper{border-radius:80px 0 80px 0}
  .event-img{border-radius:70px 0 70px 0}
  .brand .mark{width:56px;height:56px;flex-basis:56px}
  .brand b{font-size:.86rem;letter-spacing:.04em}
  .brand .mark{width:52px;height:52px;flex-basis:52px}
  .chat-dock{right:14px;bottom:70px;gap:8px}
  .chat-launcher{width:56px;height:56px;font-size:1.35rem;flex-basis:56px}
  /* the label wraps to two short lines on a phone rather than pushing the
     circle off the edge of the screen */
  .chat-hello{max-width:min(56vw,208px);font-size:.76rem;padding:.5rem .8rem}
  .chat-hello i{font-size:.95rem}
  .chat-panel{right:0;left:0;bottom:0;width:100%;max-width:100%;height:82vh;border-radius:18px 18px 0 0}
  /* keep the rail fully on screen: fixed width, box-sizing enforced, and the
     page cannot scroll sideways underneath it */
  /* the phone position for the rail now lives in the clean-up rules at the
     bottom of this file, so it is all in one place */
  .to-top{right:14px;bottom:126px;width:40px;height:40px}
  .ticker-label{font-size:.76rem;padding:.7rem .9rem}
  .ticker-track span{font-size:.8rem}
  .hero-kicker{font-size:.66rem;letter-spacing:.18em}
  .hero-kicker::before{width:26px}
}
@media(prefers-reduced-motion:reduce){
  html.js .rv,html.js .rv-l,html.js .rv-r{opacity:1;transform:none;transition:none}
  .blob,.hl-icon{animation:none}
  .about-photo.armed{clip-path:none;transition:none}
  .split-word > span{transform:none;transition:none}
  .marquee-track,.scroll-cue i{animation:none}
  *{scroll-behavior:auto}
}

/* ==========================================================================
   V8 ADDITIONS
   Six new sections plus the clean-up rules. Everything below this line is new;
   nothing above it was removed, only retuned, so existing markup still works.
   ========================================================================== */

/* ---------- 1. admission process ----------
   Four steps that genuinely happen in order, so the numbering earns its place. */
.process{background:var(--sand)}
.proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:3rem;
  border-top:2px solid rgba(11,30,60,.14);list-style:none;padding-left:0}
.proc-step{list-style:none}
.proc-step{position:relative;padding:2.2rem 1.6rem 0 0}
.proc-step + .proc-step{padding-left:1.6rem;border-left:1px solid rgba(11,30,60,.14)}
.proc-step::before{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;
  border-radius:50%;background:var(--gold);border:3px solid var(--sand)}
.proc-step + .proc-step::before{left:1.6rem;transform:translateX(-6px)}
.proc-step .n{font-family:var(--display);font-size:.98rem;font-weight:600;color:var(--brass);display:block;margin-bottom:.5rem}
.proc-step h4{font-size:1.15rem;margin-bottom:.5rem;color:var(--ink)}
.proc-step p{font-size:.95rem;line-height:1.65;margin:0;max-width:32ch}
.proc-step .when{display:inline-block;margin-top:.7rem;font-size:.86rem;font-weight:600;color:var(--green)}
@media(max-width:991.98px){
  .proc-grid{grid-template-columns:1fr 1fr}
  .proc-step:nth-child(3){border-left:0}
  .proc-step:nth-child(n+3){margin-top:2rem;padding-top:2.2rem;border-top:2px solid rgba(11,30,60,.14)}
}
@media(max-width:575.98px){
  .proc-grid{grid-template-columns:1fr}
  .proc-step,.proc-step + .proc-step{border-left:0;padding-left:0;padding-right:0}
  .proc-step + .proc-step{margin-top:2rem;padding-top:2.2rem;border-top:2px solid rgba(11,30,60,.14)}
  .proc-step::before,.proc-step + .proc-step::before{left:0;transform:none}
}

/* ---------- 2. a day at the school ----------
   The signature block. A boarding school sells its day, so the day is the one
   place the design is allowed to be loud: dark band, oversized serif clock. */
.dayline{background:var(--grad-brand);color:#DCE6F2;position:relative;overflow:hidden}
/* This band is dark, so the eyebrow above the heading needs to be gold
   rather than the muted grey used on the cream sections. */
.dayline .eyebrow{color:var(--gold)}
.dayline::after{content:"";position:absolute;inset:0;
  background:radial-gradient(1100px 520px at 82% 8%,rgba(242,194,48,.16),transparent 62%);pointer-events:none}
.dayline .container{position:relative;z-index:2}
.dayline h2,.dayline h4{color:#fff}
.dayline h2::after{background:var(--gold)}
.day-rail{margin-top:3.2rem;border-left:1px solid rgba(255,255,255,.2);padding-left:0;max-width:1020px}
.day-row{display:grid;grid-template-columns:170px minmax(0,1fr);gap:1.8rem;position:relative;
  align-items:start;padding:1.7rem 0 1.7rem 2.4rem}
.day-row + .day-row{border-top:1px solid rgba(255,255,255,.13)}
.day-row::before{content:"";position:absolute;left:-5px;top:2rem;width:9px;height:9px;
  border-radius:50%;background:var(--gold)}
.day-row time{font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2.05rem);font-weight:600;
  color:var(--gold-hi);line-height:1.1;letter-spacing:-.01em;font-variant-numeric:lining-nums;
  display:block;padding-top:.12rem}
.day-row h4{font-size:1.24rem;margin-bottom:.45rem;line-height:1.3}
.day-row p{font-size:.98rem;line-height:1.68;color:#B9CADF;margin:0;max-width:56ch}
@media(max-width:767.98px){
  .day-row{grid-template-columns:1fr;gap:.5rem;padding-left:1.6rem}
  .day-row time{font-size:1.35rem}
}

/* ---------- 3. what parents say ----------
   No stock portraits, no star ratings. A quote, a name, a town. */
.voices{background:var(--ivory)}
.voice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:3rem}
.voice{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:2.1rem 1.9rem;display:flex;flex-direction:column}
.voice .qm{font-family:var(--display);font-size:3.2rem;line-height:.6;color:var(--gold);
  display:block;margin-bottom:1rem;height:1.4rem}
.voice blockquote{font-family:var(--display);font-size:1.14rem;line-height:1.55;color:var(--ink);
  font-weight:400;margin:0 0 1.5rem;flex:1}
.voice .who{font-family:var(--text);font-size:.94rem;font-weight:600;color:var(--ink);display:block}
.voice .who-sub{font-family:var(--text);font-size:.88rem;color:var(--body)}
@media(max-width:991.98px){.voice-grid{grid-template-columns:1fr 1fr}}
@media(max-width:575.98px){.voice-grid{grid-template-columns:1fr}}

/* ---------- 4. transport routes ----------
   A route is a chain of stops, so it is drawn as a chain, not as a card grid. */
.routes{background:#fff}
.route-list{margin-top:2.8rem;display:grid;gap:1.1rem}
.route{border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem 1.7rem;
  display:grid;grid-template-columns:auto 1fr auto;gap:1.4rem;align-items:center;background:var(--ivory)}
.route .rno{font-family:var(--display);font-size:1.35rem;font-weight:600;color:#fff;
  background:var(--navy);width:52px;height:52px;border-radius:var(--r-md);
  display:grid;place-items:center;flex:0 0 52px}
.route .stops{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .1rem;font-family:var(--text);font-size:.96rem}
.route .stops span{color:var(--ink);font-weight:500}
.route .stops i{color:var(--gold);font-size:.85rem;margin:0 .5rem;font-style:normal}
.route .rtime{font-family:var(--text);font-size:.9rem;color:var(--body);white-space:nowrap;text-align:right}
.route .rtime b{display:block;font-size:1rem;color:var(--green);font-weight:600}
@media(max-width:767.98px){
  .route{grid-template-columns:auto 1fr;gap:1rem;align-items:start}
  .route .rtime{grid-column:1/-1;text-align:left;padding-top:.6rem;border-top:1px solid var(--line)}
  .route .rtime b{display:inline;margin-right:.35rem}
}

/* ---------- 5. mandatory public disclosure ----------
   CBSE asks for a table, so it is a table: readable, printable, screen-reader safe. */
.mpd{background:var(--sand)}
.mpd-table{width:100%;border-collapse:collapse;background:#fff;margin-top:2.4rem;
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;font-family:var(--text)}
.mpd-table th,.mpd-table td{padding:.9rem 1.1rem;border-bottom:1px solid var(--line);
  font-size:.96rem;vertical-align:top;text-align:left}
.mpd-table th{width:38%;font-weight:600;color:var(--ink);background:rgba(236,230,215,.5)}
.mpd-table td{color:var(--body)}
.mpd-table tr:last-child th,.mpd-table tr:last-child td{border-bottom:0}
.mpd-docs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.9rem;margin-top:1.6rem}
.mpd-doc{display:flex;align-items:center;gap:.8rem;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);padding:.95rem 1.1rem;font-family:var(--text);font-size:.94rem;
  font-weight:500;color:var(--ink);transition:.25s var(--ease)}
.mpd-doc i{color:var(--green);font-size:1.25rem}
.mpd-doc:hover{border-color:var(--green);color:var(--green);transform:translateY(-2px)}
.mpd-doc.is-missing{opacity:.55;pointer-events:none}
.mpd-note{font-family:var(--text);font-size:.9rem;color:var(--body);margin-top:1.2rem}
@media(max-width:575.98px){
  .mpd-table th{width:auto;display:block;border-bottom:0;padding-bottom:.2rem}
  .mpd-table td{display:block;padding-top:0}
}

/* ---------- 6. frequently asked questions ----------
   Hairline rules rather than boxes: an FAQ is a list, not twelve cards. */
.faq{background:var(--ivory)}
.faq-list{margin-top:2.6rem;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;background:none;border:0;text-align:left;cursor:pointer;
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.4rem;
  padding:1.35rem 0;font-family:var(--display);font-size:1.12rem;font-weight:600;
  color:var(--ink);line-height:1.4;transition:color .25s var(--ease)}
.faq-q:hover{color:var(--green)}
.faq-q .chev{flex:0 0 auto;color:var(--gold);font-size:1.05rem;margin-top:.2rem;
  transition:transform .3s var(--ease)}
.faq-item.open .faq-q .chev{transform:rotate(180deg)}
.faq-a{overflow:hidden;max-height:0;transition:max-height .35s var(--ease)}
.faq-a p{font-family:var(--text);font-size:.99rem;line-height:1.7;color:var(--body);
  margin:0;padding:0 3rem 1.5rem 0;max-width:74ch}
@media(prefers-reduced-motion:reduce){.faq-a{transition:none}}

/* ---------- clean-up rules ---------- */
/* The chat launcher no longer wears a fake unread count. */
.chat-launcher .badge-dot{display:none !important}
/* SOCIAL ICONS ON PHONES.
   The rail used to be hidden below 768px, so Facebook, Instagram, YouTube and
   WhatsApp were desktop-only. They are back — moved to the LEFT edge, because
   the right edge already carries the chat launcher and the back-to-top button
   and they would have sat on top of each other.
   Sized down to 34px and lifted clear of the Call / WhatsApp / Enquire bar. */
@media(max-width:767.98px){
  .social-rail{
    left:0;right:auto;
    top:auto;bottom:96px;
    transform:none;
    width:34px;
    border-radius:0 8px 8px 0;
    box-shadow:0 10px 26px -14px rgba(0,0,0,.55)}
  .social-rail a{width:34px;height:34px;font-size:.86rem}
  .social-rail a:hover{width:34px}
}
/* Very small phones: shrink again so four icons still clear the bottom bar. */
@media(max-width:400px){
  .social-rail{bottom:92px;width:30px}
  .social-rail a{width:30px;height:30px;font-size:.78rem}
  .social-rail a:hover{width:30px}
}
/* Footer links that go nowhere are set as plain text by PHP, not as links. */
footer .foot-plain{color:#8FA5C0;display:block;margin-bottom:.55rem;font-size:.94rem}