/* =========================================================
   Our Lady's Nursery & Primary School — stylesheet
   Palette taken from the school logo: royal blue ring,
   sky-blue field, red diya and a golden flame.
   ========================================================= */

/* ---------- Design tokens ---------- */
:root{
  /* the logo's royal-blue ring and sky-blue field stay the spine of the site */
  --navy:#062a4d;        /* deepest blue, used for contrast blocks */
  --blue-900:#0b4b8c;
  --blue-700:#1565d8;
  --blue:#2f86f0;        /* primary blue */
  --sky:#5ec8f7;
  --sky-soft:#a8dffb;
  --ice:#eaf5ff;

  /* full accent set — the logo's golden flame and red diya bring the warm
     half back, so every section can carry its own colour instead of the
     whole page reading as one flat blue */
  --gold:#ffb703;
  --gold-2:#ffd45e;
  --gold-3:#fff0b8;

  --teal:#0fb5a5;
  --green:#1fc17b;
  --amber:#ff9e1b;
  --orange:#fb6b25;
  --coral:#ff4d6d;
  --violet:#7c3aed;
  --pink:#f45cc0;

  --grad-gold:linear-gradient(135deg,var(--gold) 0%,var(--gold-2) 45%,var(--gold-3) 100%);

  --ink:#0a1f3c;         /* deep navy headings */
  --body:#3d5570;
  --muted:#6b8299;
  --line:#e2ecf7;
  --bg:#ffffff;
  --bg-soft:#f5faff;
  --bg-tint:#e7f2ff;

  /* vivid enough to read as a headline gradient on white, saturated enough
     to carry a solid button with white type */
  --grad-main:linear-gradient(120deg,var(--blue-700) 0%,var(--violet) 55%,#d6249f 100%);
  --grad-warm:linear-gradient(135deg,var(--orange) 0%,var(--amber) 55%,var(--gold-2) 100%);
  --grad-fun:linear-gradient(135deg,var(--violet) 0%,var(--pink) 50%,var(--coral) 100%);
  --grad-cool:linear-gradient(135deg,var(--blue-700) 0%,var(--blue) 45%,var(--teal) 100%);

  --r-sm:12px; --r:18px; --r-lg:26px; --r-xl:34px;
  --sh-sm:0 4px 16px rgba(12,32,64,.08);
  --sh:0 16px 44px rgba(12,32,64,.13);
  --sh-lg:0 30px 80px rgba(12,32,64,.20);
  --ring:0 0 0 4px rgba(47,134,240,.22);

  --nav-h:78px;
  --ease:cubic-bezier(.22,.9,.28,1);
  --container:1280px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 14px);-webkit-text-size-adjust:100%}
body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--body); background:var(--bg); line-height:1.7; font-size:16px;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
::selection{background:var(--blue);color:#fff}
[hidden]{display:none!important}

/* off the home page the first block sits directly under the navbar,
   so it needs far less breathing room above it */
body:not([data-page="home"]) .section:first-of-type{padding-top:38px}
body:not([data-page="home"]) .section{padding-top:56px}
body:not([data-page="home"]) .head{margin-bottom:32px}
body:not([data-page="home"]) .head.center .eyebrow{margin-bottom:10px}

h1,h2,h3,h4{font-family:'Baloo 2',system-ui,sans-serif;color:var(--ink);line-height:1.18;font-weight:700}

.container{width:min(100% - 40px,var(--container));margin-inline:auto}
.section{padding:96px 0;position:relative}
.grad-text{background:var(--grad-main);-webkit-background-clip:text;background-clip:text;color:transparent}
.gold-text{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.hide-sm{display:inline-flex}
.muted{color:var(--muted)}

/* ---------- Section heads ---------- */
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:52px}
.head.center{flex-direction:column;align-items:center;text-align:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-700);
  /* tinted fill with a gradient hairline — small detail, lifts every section */
  background:linear-gradient(#fff,var(--bg-tint)) padding-box,
    var(--grad-main) border-box;
  border:1.5px solid transparent;
  padding:8px 18px;border-radius:999px;margin-bottom:16px;
  box-shadow:0 6px 20px rgba(47,134,240,.16);
}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--grad-warm);
  box-shadow:0 0 0 3px rgba(255,158,27,.22)}
.h2{font-size:clamp(2rem,3.9vw,3.3rem);letter-spacing:-.018em;font-weight:800}
.head__sub{max-width:620px;margin-top:14px;color:var(--muted);font-size:1.02rem}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 26px;border-radius:999px;font-weight:700;font-size:.95rem;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,color .3s;
  white-space:nowrap;position:relative;overflow:hidden;
}
.btn span{transition:transform .3s var(--ease)}
.btn:hover span{transform:translateX(4px)}
.btn--sm{padding:9px 18px;font-size:.86rem}
.btn--lg{padding:16px 32px;font-size:1rem}
.btn--full{width:100%}
/* solid buttons carry a wider gradient than they show, so hover slides the
   colour across rather than just changing shade */
.btn--grad{background:var(--grad-main);background-size:180% 100%;color:#fff;
  box-shadow:0 12px 30px rgba(101,50,220,.34),inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-position .55s var(--ease)}
.btn--grad:hover{transform:translateY(-3px);background-position:100% 50%;
  box-shadow:0 20px 46px rgba(101,50,220,.46),inset 0 1px 0 rgba(255,255,255,.34)}
.btn--ghost{border:2px solid rgba(255,255,255,.5);color:#fff;backdrop-filter:blur(6px)}
.btn--ghost:hover{background:#fff;color:var(--blue-900);border-color:#fff;transform:translateY(-3px)}
.section .btn--ghost{border-color:var(--line);color:var(--ink)}
.section .btn--ghost:hover{background:var(--grad-main);color:#fff;border-color:transparent;
  box-shadow:0 16px 38px rgba(101,50,220,.34)}
.btn--white{background:#fff;color:var(--blue-700);box-shadow:var(--sh)}
.btn--white:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
.btn--gold{background:var(--grad-warm);background-size:180% 100%;color:#3a1a00;
  box-shadow:0 12px 32px rgba(251,107,37,.42),inset 0 1px 0 rgba(255,255,255,.42)}
.btn--gold:hover{transform:translateY(-3px);background-position:100% 50%;
  box-shadow:0 20px 48px rgba(251,107,37,.55)}

/* ---------- Preloader ---------- */
.preloader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--blue-900),var(--blue) 55%,var(--sky));transition:opacity .6s ease,visibility .6s}
.preloader.is-done{opacity:0;visibility:hidden}
.preloader__inner{text-align:center;color:#fff}
.preloader__inner img{width:104px;height:104px;border-radius:50%;object-fit:cover;
  border:4px solid rgba(255,255,255,.6);margin:0 auto 22px;animation:pop .9s var(--ease)}
.preloader__bar{display:block;width:200px;height:5px;border-radius:99px;background:rgba(255,255,255,.25);overflow:hidden;margin:0 auto}
.preloader__bar i{display:block;height:100%;width:40%;border-radius:99px;background:linear-gradient(90deg,var(--amber),#fff);animation:slide 1.1s infinite var(--ease)}
.preloader__inner p{margin-top:16px;font-family:'Baloo 2',sans-serif;letter-spacing:.16em;text-transform:uppercase;font-size:.78rem;opacity:.9}
@keyframes slide{0%{transform:translateX(-110%)}100%{transform:translateX(360%)}}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}

/* ---------- Scroll progress ---------- */
.scroll-progress{position:fixed;top:0;left:0;height:4px;width:0;z-index:1000;background:var(--grad-fun);transition:width .1s linear}

/* ---------- Top bar ---------- */
.topbar{background:linear-gradient(100deg,#0a1738 0%,var(--navy) 32%,var(--blue-900) 66%,#5b2bc4 100%);
  color:#fff;font-size:.83rem;position:relative}
/* rainbow hairline that ties the header into the banner below it */
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--gold),var(--coral) 30%,var(--violet) 60%,var(--blue) 85%,var(--teal))}
.topbar__inner{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:46px;flex-wrap:wrap}

/* left — admissions pill */
.topbar__left{display:flex;align-items:center;gap:16px;min-width:0}
.topbar__pill{background:var(--grad-warm);color:#3a1a00;font-weight:800;font-size:.74rem;
  padding:5px 15px;border-radius:999px;letter-spacing:.05em;white-space:nowrap;
  animation:glow 2.6s infinite;transition:transform .3s var(--ease)}
.topbar__pill:hover{transform:translateY(-1px)}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(255,158,27,.6)}50%{box-shadow:0 0 0 10px rgba(255,158,27,0)}}
.topbar__addr{opacity:.82;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* right — phone, email, social */
.topbar__right{display:flex;align-items:center;gap:20px;min-width:0}
.topbar__contact{display:flex;gap:20px;flex-wrap:wrap}
.topbar__contact li{display:flex;align-items:center;gap:7px;opacity:.94;white-space:nowrap}
.topbar__contact a{transition:color .3s}
.topbar__contact a:hover{color:var(--gold-2)}
.topbar__social{display:flex;gap:7px}
.topbar__social a{width:27px;height:27px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.14);font-size:.8rem;transition:.3s var(--ease)}
.topbar__social a:hover{background:var(--grad-warm);color:#3a1a00;transform:translateY(-2px)}

/* ---------- Navbar ---------- */
.nav{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.9);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);transition:box-shadow .3s,padding .3s}
.nav.is-stuck{box-shadow:var(--sh)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:var(--nav-h)}

.brand{display:flex;align-items:center;gap:12px;min-width:0}
/* display:block is required — without it the span stays inline wherever
   .brand is not a flex container, and the width/height below are ignored. */
.brand__logo{display:block;width:46px;height:46px;border-radius:50%;overflow:hidden;flex:none;
  box-shadow:0 0 0 3px #fff,0 0 0 5px rgba(47,159,216,.45);transition:transform .5s var(--ease)}
.brand:hover .brand__logo{transform:rotate(-8deg) scale(1.06)}
.brand__logo img{width:100%;height:100%;object-fit:cover}
.brand__text{display:flex;flex-direction:column;line-height:1.2;min-width:0}
/* full school name kept on ONE line, sized to fit the navbar */
.brand__text strong{
  font-family:'Baloo 2',sans-serif;
  font-size:clamp(.86rem,1.15vw,1.1rem);
  color:var(--blue-900);
  white-space:nowrap;letter-spacing:-.005em;
}
.brand__text small{
  font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);font-weight:800;white-space:nowrap;
}

.nav__menu{display:flex;align-items:center;gap:1px}
.nav__menu>a{padding:9px 10px;border-radius:99px;font-size:.845rem;font-weight:600;color:var(--body);
  position:relative;transition:color .25s,background .25s;white-space:nowrap}
.nav__menu>a::after{content:"";position:absolute;left:50%;bottom:4px;width:0;height:3px;border-radius:9px;
  background:var(--grad-gold);transform:translateX(-50%);transition:width .3s var(--ease)}
.nav__menu>a:hover{color:var(--blue-700);background:var(--bg-tint)}
.nav__menu>a.active{color:var(--blue-700)}
.nav__menu>a.active::after{width:20px}
/* ---- About dropdown ---- */
.nav__item{position:relative}
.nav__link--drop{display:inline-flex;align-items:center;gap:5px;padding:9px 10px;border-radius:99px;
  font-size:.845rem;font-weight:600;color:var(--body);white-space:nowrap;
  transition:color .25s,background .25s;position:relative}
.nav__link--drop .caret{font-style:normal;font-size:.62rem;transition:transform .3s var(--ease)}
.nav__link--drop:hover{color:var(--blue-700);background:var(--bg-tint)}
.nav__item:hover .caret,.nav__item.is-open .caret{transform:rotate(180deg)}
.nav__item.is-active .nav__link--drop{color:var(--blue-700)}

.nav__drop{position:absolute;top:calc(100% + 12px);left:0;min-width:238px;z-index:30;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
  padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s}
/* invisible bridge so the menu survives the gap on the way down */
.nav__drop::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.nav__item:hover .nav__drop,.nav__item.is-open .nav__drop{opacity:1;visibility:visible;transform:none}
.nav__drop a{display:block;padding:10px 14px;border-radius:10px;font-size:.86rem;
  font-weight:600;color:var(--body);white-space:nowrap;transition:.25s var(--ease)}
.nav__drop a:hover{background:var(--bg-tint);color:var(--blue-700);transform:translateX(3px)}
.nav__drop a.active{background:var(--bg-tint);color:var(--blue-700)}

.nav__cta-mobile{display:none}
.nav__actions{display:flex;align-items:center;gap:12px}
.nav__toggle{display:none;width:44px;height:44px;border-radius:14px;background:var(--bg-tint);
  flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav__toggle span{width:20px;height:2px;background:var(--blue-900);border-radius:9px;transition:.35s var(--ease)}
.nav__toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__toggle.is-open span:nth-child(2){opacity:0}
.nav__toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Decorative blobs ---------- */
.blob{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0}
.blob--1{width:420px;height:420px;background:rgba(34,184,240,.5);top:-90px;right:-80px;animation:float 13s ease-in-out infinite}
.blob--2{width:340px;height:340px;background:rgba(255,122,26,.45);bottom:-100px;left:-70px;animation:float 16s ease-in-out infinite reverse}
.blob--3{width:260px;height:260px;background:rgba(124,58,237,.42);top:40%;left:45%;animation:float 19s ease-in-out infinite}
.blob--soft1{width:340px;height:340px;background:rgba(37,99,235,.14);top:-60px;left:-90px;filter:blur(80px)}
.blob--soft2{width:300px;height:300px;background:rgba(236,72,153,.14);bottom:-70px;right:-70px;filter:blur(80px)}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(28px,-26px) scale(1.07)}66%{transform:translate(-22px,20px) scale(.95)}}

/* =========================================================
   HERO SLIDER — cinematic wipe transition, animated type,
   thumbnail rail + autoplay progress.
   ========================================================= */
.hero{position:relative;min-height:clamp(660px,94vh,980px);overflow:hidden;color:#fff;isolation:isolate;
  /* fallback accent set — every slide overrides these via [data-accent] */
  --a-deep:#3a0b52; --a1:#ff8a00; --a2:#ff2d78; --a3:#8b5cf6; --a-lite:#ffd166}

/* ---- per-slide colour identities (driven by data-accent in the markup).
   The :has() half lifts the active slide's palette up to .hero itself so the
   glow blobs and the slider chrome recolour in step with the copy. ---- */
.hslide[data-accent="gold"],
.hero:has(.hslide[data-accent="gold"].is-active)
  {--a-deep:#3a0b52;--a1:#ff8a00;--a2:#ff2d78;--a3:#8b5cf6;--a-lite:#ffd166}
.hslide[data-accent="sky"],
.hero:has(.hslide[data-accent="sky"].is-active)
  {--a-deep:#071a45;--a1:#00c2ff;--a2:#3b5bfd;--a3:#9b5cf6;--a-lite:#7ff0ff}
.hslide[data-accent="green"],
.hero:has(.hslide[data-accent="green"].is-active)
  {--a-deep:#04302a;--a1:#00e6a8;--a2:#0ea5b7;--a3:#a3e635;--a-lite:#8affd6}
.hslide[data-accent="violet"],
.hero:has(.hslide[data-accent="violet"].is-active)
  {--a-deep:#2c0942;--a1:#d926c9;--a2:#f43f5e;--a3:#6366f1;--a-lite:#ffa8f0}

.hero__slides{position:absolute;inset:0}

/* fine film grain — the touch that keeps big colour looking premium rather
   than poster-flat. Sits above the slides, below the slider controls. */
.hero::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.16;mix-blend-mode:overlay}

.hslide{
  position:absolute;inset:0;display:flex;align-items:center;
  opacity:0;visibility:hidden;
  clip-path:inset(0 0 0 100%);
  transition:clip-path 1.05s var(--ease),opacity .7s var(--ease),visibility 1.05s;
}
.hslide.is-active{opacity:1;visibility:visible;clip-path:inset(0 0 0 0);z-index:2}
/* outgoing slide sits underneath, fully visible, while the new one wipes across */
.hslide.is-leaving{opacity:1;visibility:visible;clip-path:inset(0 0 0 0);z-index:1;transition:none}

.hslide__bg{position:absolute;inset:0;background-position:center;background-size:cover;
  background-repeat:no-repeat;transform:scale(1.12)}
.hslide.is-active .hslide__bg{animation:kenburns 9s ease-out forwards}
@keyframes kenburns{from{transform:scale(1.12) translate(1%,1%)}to{transform:scale(1.02) translate(0,0)}}

/* vivid duotone wash — each slide gets its own colour story. The left third
   stays deep and saturated so white headline type keeps full contrast, while
   the right side opens up into bright accent light over the photograph. */
.hslide__veil{position:absolute;inset:0;
  background:
    radial-gradient(118% 96% at 4% 52%,color-mix(in srgb,var(--a-deep) 96%,#000) 0%,
      color-mix(in srgb,var(--a-deep) 82%,transparent) 34%,transparent 76%),
    linear-gradient(102deg,
      color-mix(in srgb,var(--a-deep) 88%,transparent) 0%,
      color-mix(in srgb,var(--a2) 40%,transparent) 40%,
      color-mix(in srgb,var(--a1) 24%,transparent) 68%,
      color-mix(in srgb,var(--a-lite) 10%,transparent) 100%);
}

/* drifting aurora light-field so the colour breathes instead of sitting flat */
.hslide__veil::before{content:"";position:absolute;inset:-14%;
  background:
    radial-gradient(38% 46% at 76% 16%,color-mix(in srgb,var(--a1) 78%,transparent) 0%,transparent 66%),
    radial-gradient(34% 44% at 94% 74%,color-mix(in srgb,var(--a2) 70%,transparent) 0%,transparent 64%),
    radial-gradient(48% 40% at 44% 106%,color-mix(in srgb,var(--a3) 62%,transparent) 0%,transparent 68%);
  mix-blend-mode:screen;opacity:.4;filter:blur(30px);
  animation:aurora 22s ease-in-out infinite}
@keyframes aurora{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(-3%,2.6%,0) scale(1.09)}
  66%{transform:translate3d(2.6%,-2%,0) scale(1.04)}
}

/* grounded base so the slider rail never floats over a busy photo, plus a
   cinematic vignette that pushes attention to the headline */
.hslide__veil::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(124% 82% at 46% 44%,transparent 50%,rgba(0,0,0,.42) 100%),
    linear-gradient(0deg,color-mix(in srgb,var(--a-deep) 88%,#000) 0%,
      color-mix(in srgb,var(--a-deep) 40%,transparent) 18%,transparent 40%)}

/* a slow light sweep across the incoming slide — the premium "reveal" beat.
   Lives on the slide itself so it rides above the colour veil, under the copy. */
.hslide.is-active::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(104deg,transparent 34%,rgba(255,255,255,.18) 50%,transparent 66%);
  animation:sheen 2s var(--ease) .3s both}
@keyframes sheen{
  from{transform:translateX(-72%);opacity:0}
  22%{opacity:1}
  to{transform:translateX(88%);opacity:0}
}

/* corner light bloom. Sits above the slides (z-3) so it actually reads, but
   kept to the right half — the left is reserved for headline contrast. */
.hero .blob{z-index:3;opacity:.3;filter:blur(110px);mix-blend-mode:screen}
.hero .blob--1{width:540px;height:540px;top:-140px;right:-90px;
  background:color-mix(in srgb,var(--a1) 62%,transparent)}
.hero .blob--2{width:440px;height:440px;left:auto;right:16%;bottom:-170px;
  background:color-mix(in srgb,var(--a2) 58%,transparent)}

/* same gutters as .container so hero copy lines up with every other section */
.hslide__inner{position:relative;z-index:5;width:min(100% - 40px,var(--container));margin-inline:auto;
  padding-bottom:110px}
.hslide__content{max-width:760px}

/* --- animated type --- */
.hslide__eyebrow{display:inline-flex;align-items:center;gap:11px;font-size:.78rem;font-weight:800;
  letter-spacing:.22em;text-transform:uppercase;color:#fff;
  /* gradient hairline border in the slide's own accent */
  background:linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.05)) padding-box,
    linear-gradient(100deg,var(--a-lite),var(--a2)) border-box;
  border:1.5px solid transparent;
  padding:10px 22px;border-radius:999px;backdrop-filter:blur(10px);margin-bottom:26px;
  box-shadow:0 8px 30px color-mix(in srgb,var(--a2) 34%,transparent);
  opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease) .15s,transform .8s var(--ease) .15s}
.hslide.is-active .hslide__eyebrow{opacity:1;transform:none}
.hslide__eyebrow .dot{width:9px;height:9px;border-radius:50%;background:var(--a-lite);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--a-lite) 34%,transparent);animation:pulse 2s infinite}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 4px color-mix(in srgb,var(--a-lite) 34%,transparent)}
  50%{box-shadow:0 0 0 12px transparent}
}

.hslide__title{font-size:clamp(2.6rem,6.4vw,5.6rem);color:#fff;letter-spacing:-.028em;font-weight:800;
  line-height:1.02;margin-bottom:24px;
  text-shadow:0 10px 44px color-mix(in srgb,var(--a-deep) 80%,transparent)}
.hslide__title .ln{display:block;overflow:hidden;padding-bottom:.08em}
.hslide__title .ln i{display:block;font-style:normal;transform:translateY(115%);
  transition:transform 1.05s var(--ease)}
.hslide__title .ln:nth-child(1) i{transition-delay:.28s}
.hslide__title .ln:nth-child(2) i{transition-delay:.4s}
.hslide.is-active .hslide__title .ln i{transform:none}
/* the highlighted words carry a live, drifting accent gradient.
   No filter/drop-shadow here — combining one with background-clip:text makes
   Chrome paint the element's whole box, which showed as a dark slab. */
.hslide__title em{font-style:normal;text-shadow:none;
  background:linear-gradient(96deg,#fff 0%,var(--a-lite) 34%,var(--a1) 62%,var(--a2) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:hueShift 7s ease-in-out infinite}
@keyframes hueShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.hslide__text{font-size:clamp(1.02rem,1.45vw,1.24rem);max-width:600px;color:rgba(255,255,255,.94);
  margin-bottom:38px;text-shadow:0 2px 18px rgba(0,0,0,.35);
  opacity:0;transform:translateY(24px);transition:opacity .85s var(--ease) .52s,transform .85s var(--ease) .52s}
.hslide.is-active .hslide__text{opacity:1;transform:none}

.hslide__cta{display:flex;gap:16px;flex-wrap:wrap;
  opacity:0;transform:translateY(24px);transition:opacity .85s var(--ease) .64s,transform .85s var(--ease) .64s}
.hslide.is-active .hslide__cta{opacity:1;transform:none}

/* hero CTAs pick up the slide accent, with a soft outer glow for lift */
.hero .btn--gold{background:linear-gradient(118deg,var(--a1) 0%,var(--a2) 62%,var(--a3) 100%);
  background-size:180% 100%;color:#fff;font-weight:800;
  box-shadow:0 14px 40px color-mix(in srgb,var(--a2) 46%,transparent),
    inset 0 1px 0 rgba(255,255,255,.34);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-position .6s var(--ease)}
.hero .btn--gold:hover{background-position:100% 50%;transform:translateY(-4px);
  box-shadow:0 22px 56px color-mix(in srgb,var(--a2) 62%,transparent),
    inset 0 1px 0 rgba(255,255,255,.4)}
.hero .btn--ghost{border-color:rgba(255,255,255,.62);background:rgba(255,255,255,.08)}
.hero .btn--ghost:hover{background:#fff;color:var(--a-deep);border-color:#fff}

/* --- slider UI --- */
.hero__ui{position:absolute;left:0;right:0;bottom:24px;z-index:6}
/* centre-aligned so the counter, arrows and thumbnails share one baseline */
.hero__ui-inner{display:flex;justify-content:space-between;align-items:center;gap:24px}
.hero__left{display:flex;align-items:center;gap:20px}

.hero__count{display:flex;align-items:center;gap:12px;font-family:'Baloo 2',sans-serif;line-height:1}
.hero__count b{font-size:1.25rem;color:#fff;line-height:1}
.hero__count small{font-size:.82rem;color:rgba(255,255,255,.55);line-height:1}
.hero__bar{display:block;width:clamp(60px,10vw,120px);height:3px;border-radius:9px;
  background:rgba(255,255,255,.25);overflow:hidden}
.hero__bar i{display:block;height:100%;width:0;border-radius:9px;
  background:linear-gradient(90deg,var(--a-lite),var(--a1),var(--a2));
  box-shadow:0 0 14px color-mix(in srgb,var(--a1) 70%,transparent)}

.hero__arrows{display:flex;gap:9px}
.hero__arrows button{width:44px;height:44px;border-radius:50%;font-size:1.5rem;line-height:1;
  display:grid;place-items:center;padding-bottom:3px;
  color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(8px);transition:.35s var(--ease)}
.hero__arrows button:hover{background:linear-gradient(120deg,var(--a1),var(--a2));color:#fff;
  border-color:transparent;transform:translateY(-3px);
  box-shadow:0 12px 30px color-mix(in srgb,var(--a2) 52%,transparent)}

.hero__rail{display:flex;gap:11px;align-items:center}
.hthumb{position:relative;width:86px;height:58px;border-radius:14px;overflow:hidden;
  border:2px solid rgba(255,255,255,.3);opacity:.6;transition:.45s var(--ease);flex:none}
.hthumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.hthumb b{position:absolute;left:0;right:0;bottom:0;padding:12px 4px 4px;font-size:.58rem;
  font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#fff;
  background:linear-gradient(0deg,rgba(8,10,32,.92),transparent)}
.hthumb:hover{opacity:1;transform:translateY(-3px)}
.hthumb:hover img{transform:scale(1.09)}
.hthumb.is-active{opacity:1;border-color:transparent;transform:translateY(-5px) scale(1.04);
  box-shadow:0 0 0 2px var(--a-lite),0 14px 34px color-mix(in srgb,var(--a2) 55%,transparent)}
/* accent underline on the live thumbnail */
.hthumb.is-active::after{content:"";position:absolute;left:8px;right:8px;bottom:5px;height:3px;
  border-radius:9px;background:linear-gradient(90deg,var(--a-lite),var(--a1));z-index:2}

/* ---------- Ticker ---------- */
/* carries the banner's energy one strip further down the page */
.ticker{display:flex;align-items:stretch;
  background:linear-gradient(90deg,#12123a 0%,#1b2a6b 42%,#0f5f8f 72%,#10897f 100%);
  color:#fff;overflow:hidden}
.ticker__label{background:linear-gradient(120deg,#ff8a00,#ff2d78 62%,#8b5cf6);color:#fff;
  font-weight:800;font-size:.82rem;letter-spacing:.02em;
  padding:13px 22px;white-space:nowrap;display:flex;align-items:center;gap:7px;flex:none;z-index:2;
  box-shadow:0 0 34px rgba(255,45,120,.5)}
.ticker__track{display:flex;overflow:hidden;flex:1}
.ticker__move{display:flex;align-items:center;gap:26px;padding:13px 26px;white-space:nowrap;
  animation:marquee 34s linear infinite;font-size:.88rem}
.ticker:hover .ticker__move{animation-play-state:paused}
.ticker__move i{color:#ffd166;font-style:normal;font-size:.6rem}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* ---------- Stats ---------- */
.stats{padding:0;position:relative;z-index:5;margin-top:-46px}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
  background:#fff;border-radius:var(--r-xl);padding:38px 30px;box-shadow:var(--sh-lg);border:1px solid var(--line)}
.stat{text-align:center;position:relative}
.stat b{display:block;font-family:'Baloo 2',sans-serif;font-size:clamp(2rem,3.6vw,2.9rem);
  color:var(--ink);line-height:1}
.stat span{display:block;font-size:.88rem;color:var(--muted);font-weight:600;margin-top:6px}
.stat__bar{display:block;width:44px;height:4px;border-radius:9px;margin:14px auto 0}
.s1{background:var(--grad-main)} .s2{background:var(--grad-warm)}
.s3{background:linear-gradient(135deg,var(--violet),var(--pink))} .s4{background:linear-gradient(135deg,var(--green),var(--teal))}

/* ---------- About ---------- */
.about{background:linear-gradient(180deg,#fff 0%,var(--bg-soft) 100%)}
.about__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:center}
.about__media{position:relative}
.about__collage{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:210px 160px;gap:16px}
.about__collage img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-lg);box-shadow:var(--sh)}
.about__collage .c1{grid-column:1/-1}
.about__collage .c2,.about__collage .c3{transition:transform .5s var(--ease)}
.about__collage img:hover{transform:translateY(-6px) scale(1.02)}
.about__badge{position:absolute;right:-14px;bottom:-24px;background:var(--grad-fun);color:#fff;
  border-radius:var(--r-lg);padding:20px 24px;box-shadow:var(--sh-lg);text-align:center;
  border:5px solid #fff;animation:bobA 6s ease-in-out infinite}
.about__badge b{font-family:'Baloo 2',sans-serif;font-size:1.15rem;line-height:1.2;display:block}
.about__badge small{font-size:.72rem;opacity:.9}

.lead{font-size:1.06rem;color:var(--ink);font-weight:500;margin-bottom:14px}
.about__body p{margin-bottom:14px}
.about__points{display:grid;gap:16px;margin:28px 0}
.point{display:flex;gap:14px;align-items:flex-start}
.point__ico{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;font-size:1.2rem;flex:none;box-shadow:var(--sh-sm)}
.point strong{display:block;color:var(--ink);font-family:'Baloo 2',sans-serif;font-size:1.06rem}
.point p{font-size:.92rem;margin:0}
.i-blue{background:rgba(30,79,216,.12)}  .i-green{background:rgba(18,134,106,.15)}
.i-amber{background:rgba(47,159,216,.18)} .i-violet{background:rgba(69,58,145,.13)}
.i-coral{background:rgba(207,84,104,.13)} .i-teal{background:rgba(13,143,134,.14)}

.about__vm{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
.vm{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;
  box-shadow:var(--sh-sm);transition:.4s var(--ease)}
.vm:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:transparent}
.vm h4{display:flex;align-items:center;gap:9px;font-size:1.08rem;margin-bottom:7px}
.vm p{font-size:.9rem;margin:0}

/* ---------- Principal ---------- */
.principal,.correspondent{background:var(--bg-tint);overflow:hidden}
/* alternate the two message sections so they don't read as one long block */
.correspondent{background:#fff}
.principal__card--flip{grid-template-columns:1fr 340px}
.principal__card--flip .principal__photo{order:2}
.principal__card--flip .principal__text{order:1}
.principal__card{position:relative;z-index:2;display:grid;grid-template-columns:440px 1fr;gap:44px;
  align-items:start;background:#fff;border-radius:var(--r-xl);padding:40px;box-shadow:var(--sh-lg);border:1px solid var(--line)}
.principal__photo{position:relative;position:sticky;top:110px}
/* 4:3 keeps the desk and office context that a square crop cut away */
.principal__photo img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg);box-shadow:var(--sh)}
.principal__ring{position:absolute;inset:-14px;border-radius:calc(var(--r-xl) + 14px);
  border:3px dashed rgba(47,159,216,.38);animation:spin 26s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.principal__text{position:relative}
.quote-mark{position:absolute;top:-46px;left:-10px;font-family:'Baloo 2',sans-serif;font-size:7rem;
  line-height:1;color:rgba(42,159,216,.12)}
.principal__quote{position:relative;font-family:'Baloo 2',sans-serif;font-size:1.42rem;color:var(--ink);
  line-height:1.42;margin-bottom:20px;padding-left:18px;border-left:5px solid var(--blue);border-radius:2px}
.principal__text p{margin-bottom:15px;font-size:1.01rem;line-height:1.82;max-width:62ch}
.principal__text strong{color:var(--blue-700)}
.principal__sign{margin-top:22px;padding-top:18px;border-top:2px dashed var(--line)}
.principal__sign-pre{display:block;margin-bottom:2px;font-style:italic;color:var(--muted)}
.principal__sign b{display:block;font-family:'Baloo 2',sans-serif;font-size:1.15rem;color:var(--blue-700)}
.principal__sign small{color:var(--muted)}

/* ---------- Vision & Mission ---------- */
.vision{background:var(--bg-soft);overflow:hidden}
.mission{background:#fff;overflow:hidden}
.vm-grid{position:relative;z-index:2;display:grid;grid-template-columns:.95fr 1.05fr;gap:52px;align-items:center}
.vm-grid--flip .vm-media{order:2}
.vm-grid--flip .vm-body{order:1}
.vm-media{margin:0}
.vm-media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-xl);
  box-shadow:var(--sh);transition:transform .5s var(--ease)}
.vm-media img:hover{transform:translateY(-6px)}

/* group photograph — give it more of the row and never crop it,
   otherwise the printed header and the back rows get cut off */
.vm-grid--wide{grid-template-columns:1.4fr .9fr;gap:44px;align-items:center}
.vm-media--wide img{aspect-ratio:auto;object-fit:contain;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg)}
.vm-media--wide figcaption{margin-top:12px;text-align:center;font-size:.86rem;
  font-weight:600;color:var(--muted);letter-spacing:.02em}

.vm-statement{font-family:'Baloo 2',sans-serif;font-size:clamp(1.25rem,2.1vw,1.7rem);
  color:var(--ink);line-height:1.42;margin-bottom:18px;
  padding-left:20px;border-left:5px solid var(--blue);border-radius:2px}
.vm-body>p{font-size:1.01rem;line-height:1.82;max-width:60ch}

.vm-list{display:grid;gap:12px;margin-top:22px}
.vm-list li{display:flex;gap:12px;align-items:flex-start;font-size:.96rem}
.vm-list li::before{content:"✓";width:23px;height:23px;border-radius:50%;background:var(--grad-main);
  color:#fff;display:grid;place-items:center;font-size:.7rem;flex:none;margin-top:3px}
.vm-list b{color:var(--ink)}

.vm-steps{display:grid;gap:14px;margin-top:22px;counter-reset:vm}
.vm-steps li{position:relative;padding-left:48px;font-size:.96rem;counter-increment:vm}
.vm-steps li::before{content:counter(vm,decimal-leading-zero);position:absolute;left:0;top:-2px;
  width:34px;height:34px;border-radius:11px;background:var(--bg-tint);color:var(--blue-700);
  display:grid;place-items:center;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:.9rem}
.vm-steps b{color:var(--ink)}

/* ---------- Facilities ---------- */
.fac__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.fac{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-sm);transition:.45s var(--ease);position:relative}
.fac::before{content:"";position:absolute;inset:0;border-radius:var(--r-lg);padding:2px;
  background:var(--grad-main);opacity:0;transition:opacity .4s;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.fac:hover{transform:translateY(-10px);box-shadow:var(--sh-lg)}
.fac:hover::before{opacity:1}
.fac__img{height:210px;overflow:hidden;position:relative}
.fac__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(11,74,114,.32))}
.fac__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.fac:hover .fac__img img{transform:scale(1.09)}
.fac__body{padding:26px;position:relative}
.fac__ico{position:absolute;top:-28px;right:24px;width:56px;height:56px;border-radius:18px;
  display:grid;place-items:center;font-size:1.4rem;background:#fff;box-shadow:var(--sh);
  transition:.45s var(--ease)}
.fac:hover .fac__ico{transform:rotate(-10deg) scale(1.08)}
.fac h3{font-size:1.24rem;margin-bottom:8px}
.fac p{font-size:.93rem;margin:0}

/* ---------- Academics ---------- */
.academics{background:linear-gradient(180deg,var(--bg-soft),#fff)}
.acad__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.acad{background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm);
  border:1px solid var(--line);transition:.45s var(--ease);display:flex;flex-direction:column}
.acad:hover{transform:translateY(-10px);box-shadow:var(--sh-lg)}
.acad__img{position:relative;height:180px;overflow:hidden}
.acad__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.acad:hover .acad__img img{transform:scale(1.08)}
.acad__tag{position:absolute;left:14px;bottom:14px;background:#fff;color:var(--ink);
  font-size:.74rem;font-weight:800;padding:6px 13px;border-radius:999px;box-shadow:var(--sh-sm)}
.acad__body{padding:24px;flex:1;display:flex;flex-direction:column}
.acad__body h3{font-size:1.3rem;margin-bottom:7px}
.acad__body>p{font-size:.92rem;margin-bottom:14px}
.acad__body ul{margin-top:auto;display:grid;gap:7px}
.acad__body li{font-size:.86rem;font-weight:600;color:var(--body);display:flex;align-items:center;gap:8px}
.acad__body li::before{content:"✓";width:19px;height:19px;border-radius:50%;display:grid;place-items:center;
  font-size:.66rem;color:#fff;flex:none}
.acad--pink .acad__body li::before{background:var(--pink)}
.acad--blue .acad__body li::before{background:var(--blue)}
.acad--amber .acad__body li::before{background:var(--orange)}
.acad--green .acad__body li::before{background:var(--green)}
.acad--pink{border-top:5px solid var(--pink)} .acad--blue{border-top:5px solid var(--blue)}
.acad--amber{border-top:5px solid var(--amber)} .acad--green{border-top:5px solid var(--green)}

.day{margin-top:74px;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:42px;box-shadow:var(--sh-sm)}
.day__title{text-align:center;font-size:1.6rem;margin-bottom:34px}
.day__line{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;position:relative}
.day__line::before{content:"";position:absolute;top:13px;left:9%;right:9%;height:3px;
  background:linear-gradient(90deg,var(--blue),var(--sky),var(--green),var(--amber),var(--coral));border-radius:9px;opacity:.35}
.day__item{text-align:center;position:relative;padding-top:40px}
.day__dot{position:absolute;top:0;left:50%;transform:translateX(-50%);width:28px;height:28px;
  border-radius:50%;border:4px solid #fff;box-shadow:var(--sh-sm)}
.d1{background:var(--blue)} .d2{background:var(--sky)} .d3{background:var(--green)}
.d4{background:var(--amber)} .d5{background:var(--coral)}
.day__item b{display:block;font-family:'Baloo 2',sans-serif;color:var(--ink);font-size:1.02rem}
.day__item small{font-size:.82rem;color:var(--muted)}

/* =========================================================
   GLIMPSES — dual-row infinite photo marquee
   ========================================================= */
.glimpse{position:relative;padding:52px 0 58px;overflow:hidden;
  background:linear-gradient(135deg,var(--ice) 0%,#dcf0fb 48%,#cfe9f8 100%)}
.glimpse::before{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 60% at 50% 0%,rgba(47,159,216,.14),transparent 70%)}
.glimpse__head{position:relative;z-index:3;text-align:center;margin-bottom:30px;padding-inline:20px}
.glimpse__head .h2{font-size:clamp(1.6rem,2.8vw,2.3rem)}
/* keep the gradient hairline — a flat `background` here would reset the
   padding-box/border-box pair and leave the transparent border invisible */
.eyebrow--light{background:linear-gradient(#fff,#fff) padding-box,var(--grad-main) border-box}
.glimpse__head .h2{color:var(--ink)}
/* on a light background the pale end of --grad-gold disappears */
.glimpse__head .gold-text{background:linear-gradient(120deg,var(--blue-700),var(--blue));
  -webkit-background-clip:text;background-clip:text;color:transparent}

.glimpse__rows{position:relative;z-index:2;display:grid;gap:14px;transform:rotate(-1.2deg) scale(1.05)}
.glimpse__row{display:flex;gap:14px;width:max-content;animation:slideRow 46s linear infinite}
.glimpse__row--rev{animation-duration:58s;animation-direction:reverse}
.glimpse:hover .glimpse__row{animation-play-state:paused}
@keyframes slideRow{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.gtile{position:relative;width:196px;height:128px;border-radius:var(--r);overflow:hidden;flex:none;
  border:1px solid #fff;box-shadow:0 12px 32px rgba(13,43,69,.16);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.gtile img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.gtile::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(11,74,114,.35));transition:opacity .4s}
.gtile:hover{transform:translateY(-8px) scale(1.03);box-shadow:0 22px 56px rgba(47,159,216,.3);
  border-color:rgba(47,159,216,.6)}
.gtile:hover img{transform:scale(1.08)}

.glimpse__fade{position:absolute;top:0;bottom:0;width:14%;z-index:4;pointer-events:none}
.glimpse__fade--l{left:0;background:linear-gradient(90deg,var(--ice),transparent)}
.glimpse__fade--r{right:0;background:linear-gradient(270deg,#cfe9f8,transparent)}

/* ---------- Gallery ---------- */
.gal__filters{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:38px}
.chip{padding:10px 22px;border-radius:999px;font-size:.88rem;font-weight:700;color:var(--body);
  background:var(--bg-soft);border:1px solid var(--line);transition:.3s var(--ease)}
.chip:hover{transform:translateY(-2px);color:var(--blue-700)}
.chip.is-active{background:var(--grad-main);color:#fff;border-color:transparent;box-shadow:0 8px 22px rgba(42,159,216,.32)}

/* one titled block per event folder */
.galgroup{margin-bottom:54px}
.galgroup:last-child{margin-bottom:0}
.galgroup__head{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;
  margin-bottom:20px;padding-bottom:14px;border-bottom:2px solid var(--line);position:relative}
.galgroup__head::after{content:"";position:absolute;left:0;bottom:-2px;width:86px;height:2px;
  background:var(--grad-main);border-radius:9px}
.galgroup__title h3{font-size:clamp(1.3rem,2.2vw,1.75rem);margin-bottom:3px}
.galgroup__title p{font-size:.92rem;color:var(--muted);max-width:640px;margin:0}
.galgroup__meta{text-align:right;flex:none;line-height:1.3}
.galgroup__meta b{display:block;font-family:'Baloo 2',sans-serif;color:var(--blue-700);font-size:1rem}
.galgroup__meta small{font-size:.78rem;color:var(--muted);font-weight:600}

.galgroup__more{display:block;margin:22px auto 0;padding:11px 26px;border-radius:999px;
  font-size:.88rem;font-weight:700;color:var(--blue-700);background:var(--bg-tint);
  border:1px solid var(--line);transition:.35s var(--ease)}
.galgroup__more:hover{background:var(--grad-main);color:#fff;border-color:transparent;
  transform:translateY(-2px);box-shadow:0 10px 24px rgba(42,159,216,.32)}

.gal-item.is-more{display:none}

.gal__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gal-item{position:relative;border-radius:var(--r);overflow:hidden;cursor:pointer;aspect-ratio:4/3;
  box-shadow:var(--sh-sm);transition:transform .45s var(--ease),box-shadow .45s var(--ease),opacity .4s}
.gal-item:nth-child(7n+1){aspect-ratio:4/5}
.gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.gal-item:hover{transform:translateY(-6px);box-shadow:var(--sh-lg)}
.gal-item:hover img{transform:scale(1.1)}
.gal-item__ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:16px;color:#fff;opacity:0;transition:.4s var(--ease);
  background:linear-gradient(180deg,transparent 35%,rgba(11,74,114,.85))}
.gal-item:hover .gal-item__ov{opacity:1}
.gal-item__ov b{font-family:'Baloo 2',sans-serif;font-size:1rem}
.gal-item__ov span{font-size:.76rem;opacity:.85}
.gal-item__zoom{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--blue-700);display:grid;place-items:center;font-size:.95rem;
  opacity:0;transform:scale(.6);transition:.4s var(--ease)}
.gal-item:hover .gal-item__zoom{opacity:1;transform:scale(1)}
.gal-item.is-hidden{display:none}

/* ---------- Achievements ---------- */
/* deep, saturated band — the page's one dark section, so the achievement
   cards read as a highlight reel rather than more pale-blue filler */
.achievements{position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(70% 90% at 12% 0%,rgba(124,58,237,.55),transparent 62%),
    radial-gradient(60% 80% at 92% 100%,rgba(15,181,165,.5),transparent 60%),
    linear-gradient(125deg,#0a1738 0%,#12275e 45%,#1b1e6b 100%)}
.achievements .eyebrow{color:#fff;
  background:linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.06)) padding-box,
    linear-gradient(100deg,var(--gold-2),var(--pink)) border-box}
.achievements .h2{color:#fff}
.achievements .h2 .grad-text{background:linear-gradient(110deg,var(--gold-2),var(--pink) 55%,var(--sky));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.achievements .head__sub{color:rgba(255,255,255,.82)}
.ach__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
/* frosted glass over the dark band */
.ach{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-lg);backdrop-filter:blur(14px);
  padding:30px 26px;color:rgba(255,255,255,.86);box-shadow:0 18px 50px rgba(3,10,30,.4);
  transition:.45s var(--ease);position:relative;overflow:hidden}
.ach:hover{transform:translateY(-9px);background:rgba(255,255,255,.15);
  border-color:rgba(255,255,255,.34);box-shadow:0 30px 70px rgba(3,10,30,.55)}
.ach__medal{width:62px;height:62px;border-radius:20px;display:grid;place-items:center;font-size:1.7rem;
  margin-bottom:18px;box-shadow:0 10px 26px rgba(13,43,69,.18);color:#fff;transition:.45s var(--ease)}
.ach:hover .ach__medal{transform:rotate(-9deg) scale(1.07)}
.m-gold{background:var(--grad-warm)} .m-blue{background:linear-gradient(135deg,var(--sky),var(--blue))}
.m-green{background:linear-gradient(135deg,var(--green),var(--teal))} .m-violet{background:linear-gradient(135deg,var(--violet),var(--pink))}
.ach h3{color:#fff;font-size:1.18rem;margin-bottom:9px}
.ach p{font-size:.9rem;color:rgba(255,255,255,.8);margin-bottom:16px}
.ach__tag{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(255,255,255,.16);color:#fff;padding:5px 13px;border-radius:999px;
  border:1px solid rgba(255,255,255,.24)}

/* ---------- News ---------- */
.news__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.news__grid--4{grid-template-columns:repeat(4,1fr);gap:22px}
.news__grid--4 .news-card__img{height:180px}
.news-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-sm);transition:.45s var(--ease);display:flex;flex-direction:column}
.news-card:hover{transform:translateY(-9px);box-shadow:var(--sh-lg)}
.news-card__img{position:relative;height:210px;overflow:hidden}
.news-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.news-card:hover .news-card__img img{transform:scale(1.09)}
.news-card__date{position:absolute;top:16px;left:16px;background:#fff;border-radius:14px;
  padding:9px 14px;text-align:center;box-shadow:var(--sh);line-height:1.1}
.news-card__date b{display:block;font-family:'Baloo 2',sans-serif;font-size:1.35rem;color:var(--blue-700)}
.news-card__date small{font-size:.66rem;font-weight:800;letter-spacing:.1em;color:var(--muted)}
.news-card__body{padding:24px;flex:1;display:flex;flex-direction:column}
.news-card__cat{display:inline-block;align-self:flex-start;font-size:.7rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:999px;margin-bottom:12px}
.c-blue{background:rgba(30,79,216,.12);color:var(--blue-700)}
.c-green{background:rgba(18,134,106,.15);color:#0d6653}
.c-amber{background:rgba(47,159,216,.2);color:#0e5b8a}
.news-card h3{font-size:1.16rem;margin-bottom:9px}
.news-card p{font-size:.91rem;margin-bottom:16px}
.link-arrow{margin-top:auto;font-weight:700;font-size:.9rem;color:var(--blue-700);display:inline-flex;align-items:center;gap:7px}
.link-arrow span{transition:transform .3s var(--ease)}
.link-arrow:hover span{transform:translateX(5px)}

/* ---------- Admissions ---------- */
.admissions{background:linear-gradient(180deg,#fff,var(--bg-soft))}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:54px}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 26px;
  box-shadow:var(--sh-sm);position:relative;transition:.45s var(--ease);overflow:hidden}
.step:hover{transform:translateY(-8px);box-shadow:var(--sh)}
/* the gradient must be declared before background-clip — the `background`
   shorthand in .n1–.n4 resets clip back to border-box, which is why these
   numerals used to render as solid colour bars */
.step__n{font-family:'Baloo 2',sans-serif;font-size:3rem;font-weight:800;line-height:1;
  display:block;margin-bottom:10px}
.n1{background:var(--grad-cool)} .n2{background:linear-gradient(135deg,var(--violet),var(--pink))}
.n3{background:var(--grad-warm)} .n4{background:linear-gradient(135deg,var(--green),var(--teal))}
.n1,.n2,.n3,.n4{-webkit-background-clip:text;background-clip:text;color:transparent}
.step h3{font-size:1.16rem;margin-bottom:7px}
.step p{font-size:.9rem;margin:0}

.adm__panels{display:grid;grid-template-columns:1.05fr .95fr;gap:26px}
.adm-panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:38px;box-shadow:var(--sh-sm)}
.adm-panel h3{font-size:1.4rem;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.ticks{display:grid;gap:11px;margin-bottom:16px}
.ticks li{display:flex;gap:11px;align-items:flex-start;font-size:.94rem}
.ticks li::before{content:"✓";width:22px;height:22px;border-radius:50%;background:var(--grad-main);
  color:#fff;display:grid;place-items:center;font-size:.7rem;flex:none;margin-top:3px}
.note{font-size:.85rem;color:var(--muted);background:var(--bg-tint);padding:12px 16px;border-radius:var(--r-sm)}

.adm-panel--cta{background:linear-gradient(140deg,var(--navy),var(--blue-700) 60%,var(--blue));
  color:#fff;border-color:transparent;display:flex;flex-direction:column}
.adm-panel--cta h3{color:#fff}
.adm-panel--cta>p{color:rgba(255,255,255,.82);margin-bottom:22px}
.adm-panel__contact{display:grid;gap:13px;margin-bottom:26px}
.adm-line{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);border-radius:var(--r);padding:14px 18px;transition:.35s var(--ease)}
.adm-line:hover{background:rgba(255,255,255,.2);transform:translateX(5px)}
.adm-line span{font-size:1.25rem}
.adm-line small{display:block;font-size:.74rem;opacity:.75}
.adm-line b{font-size:1rem}
.adm-panel--cta .btn{margin-top:auto}

/* ---------- Contact ---------- */
.contact__cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-bottom:44px}
.cc{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 24px;
  box-shadow:var(--sh-sm);transition:.45s var(--ease);text-align:center}
.cc:hover{transform:translateY(-8px);box-shadow:var(--sh)}
.cc__ico{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;font-size:1.35rem;margin:0 auto 14px}
.cc h4{font-size:1.1rem;margin-bottom:7px}
.cc p{font-size:.9rem;margin:0}
.cc a:hover{color:var(--blue-700)}

.contact__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:26px}
.contact__form-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:38px;box-shadow:var(--sh)}
.contact__form-wrap h3{font-size:1.5rem}
.contact__form-wrap>.muted{margin-bottom:24px;font-size:.92rem}
.form{display:grid;gap:18px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:.86rem;font-weight:700;color:var(--ink)}
.field label i{color:var(--coral);font-style:normal}
.field input,.field select,.field textarea{
  padding:13px 16px;border:2px solid var(--line);border-radius:var(--r-sm);background:var(--bg-soft);
  font-size:.94rem;transition:.3s var(--ease);resize:vertical;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--blue);background:#fff;box-shadow:var(--ring)}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--coral);background:#fff5f7}
.err{font-size:.78rem;color:var(--coral);font-weight:600;min-height:0;opacity:0;transition:.25s}
.field.has-error .err{opacity:1;min-height:16px}
.form__note{font-size:.8rem;color:var(--muted);text-align:center;margin:0}

.contact__map{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh);
  border:1px solid var(--line);min-height:460px}
.contact__map iframe{width:100%;height:100%;min-height:460px;border:0;display:block;filter:saturate(1.1)}
.contact__dir{position:absolute;left:20px;bottom:20px;z-index:2}

/* ---------- Footer ---------- */
/* light blue footer to match the rest of the page */
.footer{background:linear-gradient(165deg,var(--ice) 0%,#dcf0fb 55%,#cfe9f8 100%);
  color:var(--body);position:relative;overflow:hidden}
.footer::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--blue),var(--sky),var(--green),var(--gold),var(--coral),var(--violet))}
.footer__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:32px;padding:46px 0 32px}
.brand--light .brand__text strong{color:var(--ink)}
.brand--light .brand__text small{color:var(--blue-700)}
.footer__brand p{margin:12px 0;font-size:.86rem;max-width:320px;line-height:1.6}
.footer__social{display:flex;gap:8px}
.footer__social a{width:33px;height:33px;border-radius:10px;display:grid;place-items:center;
  font-size:.85rem;background:#fff;box-shadow:var(--sh-sm);transition:.35s var(--ease);color:var(--blue-700)}
.footer__social a:hover{background:var(--grad-gold);color:#06334d;transform:translateY(-3px)}
.footer__col h4{color:var(--ink);font-size:1rem;margin-bottom:12px;position:relative;padding-bottom:8px}
.footer__col h4::after{content:"";position:absolute;left:0;bottom:0;width:28px;height:3px;border-radius:9px;background:var(--grad-gold)}
.footer__col ul{display:grid;gap:8px}
/* scoped to the link lists so it can't override the .brand layout */
.footer__col ul a{font-size:.86rem;transition:.3s var(--ease);display:inline-block}
.footer__col ul a:hover{color:var(--blue-700);transform:translateX(4px)}
.footer__brand .brand__logo{width:42px;height:42px}
/* narrower column than the navbar — let the name wrap instead of overflowing */
.footer__brand .brand__text strong{white-space:normal;font-size:.95rem;line-height:1.25}
.footer__brand .brand__text small{font-size:.6rem;letter-spacing:.2em}
.footer__contact li{display:flex;gap:9px;font-size:.86rem;align-items:flex-start;line-height:1.55}
.footer__bar{border-top:1px solid var(--line)}
.footer__bar-inner{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:15px 0;font-size:.81rem;flex-wrap:wrap}
.footer__motto{font-family:'Baloo 2',sans-serif;color:var(--blue-700)}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:1200;background:rgba(8,52,82,.94);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;gap:18px;padding:28px;
  opacity:0;visibility:hidden;transition:.35s var(--ease)}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox__stage{max-width:min(1100px,90vw);text-align:center}
.lightbox__stage img{max-height:78vh;width:auto;border-radius:var(--r-lg);box-shadow:var(--sh-lg);
  animation:zoomIn .4s var(--ease)}
@keyframes zoomIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.lightbox figcaption{color:#fff;margin-top:16px;font-family:'Baloo 2',sans-serif;font-size:1.05rem}
.lightbox__close{position:absolute;top:22px;right:26px;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:1.1rem;transition:.3s var(--ease)}
.lightbox__close:hover{background:var(--coral);transform:rotate(90deg)}
.lightbox__nav{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;
  font-size:1.9rem;line-height:1;flex:none;transition:.3s var(--ease)}
.lightbox__nav:hover{background:var(--grad-main)}

/* ---------- Toast + to-top ---------- */
.toast{position:fixed;right:24px;bottom:96px;z-index:1300;display:flex;align-items:center;gap:14px;
  background:#fff;border:1px solid var(--line);border-left:5px solid var(--green);
  border-radius:var(--r);padding:16px 22px;box-shadow:var(--sh-lg);
  transform:translateX(140%);transition:transform .5s var(--ease)}
.toast.is-show{transform:translateX(0)}
.toast__ico{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--teal));
  color:#fff;display:grid;place-items:center;font-weight:800}
.toast b{display:block;color:var(--ink);font-family:'Baloo 2',sans-serif}
.toast small{color:var(--muted);font-size:.83rem}

.to-top{position:fixed;right:24px;bottom:26px;z-index:800;width:50px;height:50px;border-radius:50%;
  background:var(--grad-main);color:#fff;font-size:1.2rem;box-shadow:0 10px 26px rgba(37,99,235,.4);
  opacity:0;visibility:hidden;transform:translateY(16px);transition:.4s var(--ease)}
.to-top.is-show{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{transform:translateY(-4px)}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* the 10 links + the full school name only fit above ~1280px */
@media (min-width:1281px) and (max-width:1420px){
  .nav__actions .hide-sm{display:none}   /* drop the nav CTA before links start colliding */
}

@media (max-width:1280px){
  .nav__toggle{display:flex}
  .nav__cta-mobile{display:inline-flex;margin-top:10px}
  .nav__actions .hide-sm{display:none}
  /* anchored to the navbar itself, so it stays aligned whether or not
     the top bar is visible or has wrapped to two lines */
  .nav__menu{
    position:absolute;top:100%;left:0;right:0;
    max-height:calc(100vh - var(--nav-h));
    background:#fff;flex-direction:column;align-items:stretch;gap:2px;
    padding:18px 24px 34px;overflow-y:auto;
    transform:translateX(100%);transition:transform .42s var(--ease);
    box-shadow:var(--sh-lg);border-top:1px solid var(--line);
  }
  .nav__menu.is-open{transform:translateX(0)}
  .nav__menu>a{padding:14px 16px;border-radius:var(--r-sm);font-size:1rem;border-bottom:1px solid var(--line)}
  .nav__menu>a::after{display:none}
  .nav__menu>a.active{background:var(--bg-tint)}
  body.menu-open{overflow:hidden}
  .brand__text strong{font-size:1.05rem}

  /* dropdown becomes a plain indented sub-list on mobile */
  .nav__item{width:100%}
  .nav__link--drop{width:100%;justify-content:space-between;padding:14px 16px;
    border-radius:var(--r-sm);font-size:1rem;border-bottom:1px solid var(--line)}
  .nav__drop{position:static;opacity:1;visibility:visible;transform:none;
    min-width:0;padding:0 0 0 16px;border:0;box-shadow:none;background:transparent}
  .nav__drop::before{display:none}
  .nav__drop a{border-radius:0;font-size:.94rem;padding:12px 10px;
    border-bottom:1px solid var(--line);color:var(--muted)}
}

@media (max-width:1100px){
  .fac__grid,.news__grid{grid-template-columns:repeat(2,1fr)}
  .acad__grid,.steps,.contact__cards,.ach__grid{grid-template-columns:repeat(2,1fr)}
  .gal__grid{grid-template-columns:repeat(3,1fr)}
  .about__grid{grid-template-columns:1fr;gap:70px}
  .about__badge{right:20px}
  .principal__card{grid-template-columns:330px 1fr;gap:32px;padding:32px}
  .principal__card--flip{grid-template-columns:1fr 330px}
  .vm-grid,.vm-grid--wide{grid-template-columns:1fr;gap:34px}
  .vm-grid--flip .vm-media{order:1}
  .vm-grid--flip .vm-body{order:2}
  .adm__panels,.contact__grid{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr 1fr;gap:36px}
  .day__line{grid-template-columns:repeat(3,1fr);gap:26px}
  .day__line::before{display:none}
}

@media (max-width:900px){
  .section{padding:74px 0}
  .hero{min-height:clamp(600px,86vh,820px)}
  .hslide__inner{padding-bottom:160px}
  .hslide__content{max-width:640px}
  .stats__grid{grid-template-columns:repeat(2,1fr);padding:30px 22px;gap:26px}
  .hide-md{display:none}

  /* slider UI stacks: thumbs above, counter + arrows below */
  .hero__ui{bottom:20px}
  .hero__ui-inner{flex-direction:column-reverse;align-items:stretch;gap:14px}
  .hero__left{justify-content:space-between}
  .hero__rail{overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
  .hero__rail::-webkit-scrollbar{display:none}
  .hthumb{width:70px;height:48px}

  .gtile{width:168px;height:110px}
  .glimpse{padding:44px 0 48px}
}

@media (max-width:760px){
  .topbar__inner{justify-content:center;gap:8px;padding-block:8px}
  .topbar__contact li:nth-child(2){display:none}
  .hslide__title{font-size:clamp(2.35rem,8.6vw,3.4rem);letter-spacing:-.024em}
  /* photos are shot wide — bias the crop left so faces survive a narrow screen,
     and deepen the wash since the copy now sits over the full frame */
  .hslide__veil{background:
    radial-gradient(150% 100% at 8% 46%,color-mix(in srgb,var(--a-deep) 94%,#000) 0%,
      color-mix(in srgb,var(--a-deep) 78%,transparent) 46%,transparent 92%),
    linear-gradient(168deg,color-mix(in srgb,var(--a-deep) 80%,transparent) 0%,
      color-mix(in srgb,var(--a2) 52%,transparent) 55%,
      color-mix(in srgb,var(--a1) 40%,transparent) 100%)}
  .principal__card,.principal__card--flip{grid-template-columns:1fr;text-align:left}
  .principal__photo{position:static;max-width:100%;margin:0}
  .principal__text p{max-width:none}
  .vm-body>p{max-width:none}
  /* photo first on mobile for both message cards */
  .principal__card--flip .principal__photo{order:1}
  .principal__card--flip .principal__text{order:2}
  .quote-mark{display:none}
  .fac__grid,.news__grid,.acad__grid,.steps,.contact__cards,.ach__grid{grid-template-columns:1fr}
  .gal__grid{grid-template-columns:repeat(2,1fr)}
  .gal-item:nth-child(7n+1){aspect-ratio:4/3}
  .galgroup__head{flex-direction:column;align-items:flex-start;gap:8px}
  .galgroup__meta{text-align:left}
  .galgroup{margin-bottom:40px}
  .about__vm,.form__row{grid-template-columns:1fr}
  .about__collage{grid-template-rows:180px 130px}
  .head{flex-direction:column;align-items:flex-start}
  .day__line{grid-template-columns:1fr 1fr}
  .footer__top{grid-template-columns:1fr;gap:24px;padding:36px 0 26px}
  .footer__bar-inner{flex-direction:column;text-align:center;gap:6px}
  .contact__form-wrap,.adm-panel{padding:26px}
  .lightbox__nav{width:42px;height:42px;font-size:1.5rem}
  .lightbox{padding:16px;gap:8px}
}

@media (max-width:520px){
  .container{width:min(100% - 28px,var(--container))}
  .brand__text strong{font-size:.9rem;white-space:normal;line-height:1.15}
  .brand__logo{width:44px;height:44px}
  /* match the 28px container gutter used by every other section */
  .hslide__inner{width:min(100% - 28px,var(--container));padding-bottom:140px}
  .hslide__cta{flex-direction:column;align-items:stretch}
  .hslide__cta .btn{width:100%}
  .hero__count b{font-size:1.1rem}
  .hthumb{width:60px;height:42px}
  .hthumb b{display:none}
  .gtile{width:140px;height:92px}
  .stats__grid{grid-template-columns:1fr;gap:22px}
  .gal__grid{grid-template-columns:1fr}
  .day__line{grid-template-columns:1fr}
  .toast{right:14px;left:14px;bottom:88px}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;
    transition-duration:.01s!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}