/* ═══════════════════════════════════════════════════════════════════
   BDPHS 2026 — Premium Design System
   Blooming Dale Public High School, Nanak Nagar, Jammu
   Version: 3.0 | World-Class UI/UX Upgrade
═══════════════════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  /* Brand palette */
  --red:       #C8102E;
  --red2:      #a00d24;
  --red3:      #e01535;
  --red-glow:  rgba(200,16,46,.35);
  --gold:      #D4AF37;
  --gold2:     #b8962e;
  --gold-glow: rgba(212,175,55,.3);
  --navy:      #0A1628;
  --navy2:     #0d1e35;
  --navy3:     #162840;
  --navy4:     #1e3654;

  /* Semantic surface */
  --bg:      #f7f8fc;
  --bg2:     #ffffff;
  --bg3:     #eef1f8;
  --bg4:     #e4e9f2;

  /* Typography */
  --ink:     #0c1220;
  --ink2:    #1e293b;
  --ink3:    #475569;
  --ink4:    #94a3b8;
  --ink5:    #cbd5e1;

  /* Borders */
  --border:  #e0e7f0;
  --border2: #c8d3e6;

  /* Shadows */
  --sh0: 0 1px 2px rgba(0,0,0,.04);
  --sh1: 0 1px 4px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.07);
  --sh2: 0 8px 32px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
  --sh3: 0 20px 60px rgba(0,0,0,.13), 0 4px 16px rgba(0,0,0,.07);
  --sh4: 0 32px 80px rgba(0,0,0,.16);

  /* Radii */
  --r:   10px;
  --r2:  14px;
  --r3:  20px;
  --r4:  28px;

  /* Typography */
  --fd:  'Playfair Display', Georgia, serif;
  --fb:  'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Easing */
  --ease:  cubic-bezier(.16,1,.3,1);
  --ease2: cubic-bezier(.4,0,.2,1);
  --ease3: cubic-bezier(.25,.46,.45,.94);
}

/* Dark mode */
[data-theme="dark"] {
  --bg:     #0a0e18;
  --bg2:    #111827;
  --bg3:    #1a2235;
  --bg4:    #1f2a42;
  --ink:    #f0f4fc;
  --ink2:   #cbd5e1;
  --ink3:   #8b99b5;
  --ink4:   #546277;
  --ink5:   #374260;
  --border: #1f2d44;
  --border2:#253351;
  --sh1:    0 1px 4px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.3);
  --sh2:    0 8px 32px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
  --sh3:    0 20px 60px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.3);
}

/* ── 2. RESET & BASE ──────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--fb);
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video, iframe { display:block; max-width:100%; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
button { border:none; background:none; cursor:pointer; font-family:inherit; }
input, select, textarea { font-family:inherit; }
svg { display:block; }

/* Custom scrollbar */
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--red); border-radius:99px; }
::-webkit-scrollbar-thumb:hover { background:var(--red2); }

/* Focus styles */
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Container */
.W { width:100%; max-width:1280px; margin:0 auto; padding:0 clamp(16px,5vw,64px); }

/* ── 3. PRELOADER ─────────────────────────────────────────────── */
#preloader {
  position: fixed; inset: 0; z-index: 99999;
  background: var(--navy);
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap:20px;
  transition: opacity .5s ease, visibility .5s ease;
}
#preloader.done { opacity:0; visibility:hidden; pointer-events:none; }
.pl-inner { display:flex; flex-direction:column; align-items:center; gap:14px; }
.pl-logo-wrap { position:relative; width:90px; height:90px; }
.pl-logo-img {
  width:90px; height:90px; border-radius:50%;
  object-fit:contain; background:rgba(255,255,255,.95); padding:6px;
  box-shadow: 0 0 40px rgba(212,175,55,.2);
}
.pl-ring {
  position:absolute; inset:-10px; border-radius:50%;
  border:3px solid transparent;
  border-top-color: var(--gold);
  border-right-color: var(--red);
  animation: spin 1.2s linear infinite;
}
.pl-ring2 {
  position:absolute; inset:-18px; border-radius:50%;
  border:2px solid transparent;
  border-bottom-color: rgba(212,175,55,.3);
  animation: spin 2.2s linear infinite reverse;
}
@keyframes spin { to { transform:rotate(360deg); } }
.pl-name {
  font-family: var(--fd); font-size:.95rem; font-weight:700;
  color:#fff; letter-spacing:.04em; text-align:center;
}
.pl-tagline {
  font-size:.65rem; color:rgba(255,255,255,.35);
  letter-spacing:.18em; text-transform:uppercase;
}
.pl-bar { width:140px; height:2px; background:rgba(255,255,255,.08); border-radius:99px; overflow:hidden; }
.pl-fill {
  height:100%; background:linear-gradient(90deg,var(--red),var(--gold));
  border-radius:99px; animation:plFill 1.5s var(--ease) forwards;
}
@keyframes plFill { from{width:0} to{width:100%} }
.pl-dots { display:flex; gap:6px; margin-top:4px; }
.pl-dots span {
  width:7px; height:7px; border-radius:50%; background:var(--gold);
  animation: plDot 1.4s ease-in-out infinite;
}
.pl-dots span:nth-child(2){animation-delay:.2s;background:rgba(212,175,55,.6)}
.pl-dots span:nth-child(3){animation-delay:.4s;background:rgba(212,175,55,.28)}
@keyframes plDot {
  0%,80%,100%{transform:scale(.4);opacity:.3}
  40%{transform:scale(1.15);opacity:1}
}

/* ── 4. TOPBAR ────────────────────────────────────────────────── */
/* ── 4. TOPBAR — Styles now in header.php inline <style> block ─ */
/* Old .topbar rules kept only for print override below */
/* topbar styles moved to header.php inline style block */

/* ── 5. NAVBAR ────────────────────────────────────────────────── */
.navbar {
  position: sticky; top:0; z-index:1000;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border-bottom: 1px solid rgba(224,231,240,.7);
  transition: box-shadow .35s, background .35s;
}
[data-theme="dark"] .navbar {
  background: rgba(10,14,24,.92);
  border-bottom-color: rgba(31,45,68,.8);
}
.navbar.scrolled {
  box-shadow: 0 4px 28px rgba(0,0,0,.1), 0 1px 0 rgba(0,0,0,.04);
}
[data-theme="dark"] .navbar.scrolled {
  box-shadow: 0 4px 28px rgba(0,0,0,.4), 0 1px 0 rgba(0,0,0,.2);
}
.nav-inner {
  display:flex; align-items:center; height:70px;
}
.nav-logo {
  display:flex; align-items:center; gap:12px;
  flex-shrink:0; margin-right:auto;
}
.nav-logo-emblem {
  width:46px; height:46px; border-radius:10px;
  background:var(--navy);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  box-shadow: 0 2px 12px rgba(10,22,40,.3);
  overflow: hidden;
  position: relative;
}
.nav-logo-emblem::before {
  content:''; position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(212,175,55,.15) 0%, transparent 60%);
}
.nav-logo-emblem img {
  width:38px; height:38px; object-fit:contain;
}
.nav-logo-emblem span {
  font-family:var(--fd); font-size:1rem; font-weight:700; color:var(--gold);
}
.nav-logo-text strong {
  display:block; font-size:.84rem; font-weight:700;
  color:var(--ink); line-height:1.25;
  letter-spacing:-.01em;
}
.nav-logo-text span {
  display:block; font-size:.6rem; color:var(--ink4);
  letter-spacing:.08em; text-transform:uppercase;
  margin-top:1px;
}
.nav-menu {
  display:flex; align-items:center; gap:1px; margin:0 14px;
}
.nav-item { position:relative; }
.nav-link {
  display:flex; align-items:center; gap:3px;
  padding:7px 10px;
  font-size:.78rem; font-weight:600; color:var(--ink3);
  border-radius:8px; transition:all .2s; white-space:nowrap;
  letter-spacing:.01em;
}
.nav-link:hover, .nav-link.active {
  color:var(--red); background:rgba(200,16,46,.06);
}
.nav-link.active { font-weight:700; }

/* Dropdown */
.dropdown {
  position:absolute; top:calc(100% + 10px); left:50%;
  transform: translateX(-50%) translateY(-6px);
  min-width:210px;
  background: var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--r3);
  box-shadow: var(--sh3);
  opacity:0; visibility:hidden;
  transition: all .28s var(--ease);
  pointer-events:none; overflow:hidden; z-index:100;
}
.nav-item:hover .dropdown {
  opacity:1; visibility:visible;
  transform: translateX(-50%) translateY(0);
  pointer-events:all;
}
.dropdown::before {
  content:''; position:absolute; top:-6px; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-bottom-color:var(--border);
  filter:drop-shadow(0 -1px 0 var(--border));
}
.dropdown a {
  display:flex; align-items:center; gap:10px;
  padding:11px 18px;
  font-size:.8rem; color:var(--ink2);
  transition:background .15s, color .15s, padding .15s;
  border-bottom:1px solid var(--border);
}
.dropdown a:last-child { border-bottom:none; }
.dropdown a:hover {
  background: var(--bg3); color:var(--red);
  padding-left:22px;
}
.nav-actions {
  display:flex; align-items:center; gap:8px; flex-shrink:0;
}
.btn-nav-primary {
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 18px;
  background:var(--red); color:#fff;
  border-radius:999px;
  font-size:.77rem; font-weight:700;
  transition:all .25s var(--ease2);
  box-shadow: 0 4px 16px rgba(200,16,46,.3);
  letter-spacing:.01em;
}
.btn-nav-primary:hover {
  background:var(--red2);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(200,16,46,.4);
}
.btn-nav-outline {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px;
  border:1.5px solid var(--border2); color:var(--ink3);
  border-radius:999px; font-size:.77rem; font-weight:600;
  transition:all .2s;
}
.btn-nav-outline:hover {
  border-color:var(--red); color:var(--red);
  background:rgba(200,16,46,.04);
}
.hamburger {
  display:none; flex-direction:column; gap:5px;
  padding:8px; border-radius:8px; transition:background .2s;
}
.hamburger:hover { background:var(--bg3); }
.ham-line {
  width:22px; height:2px; background:var(--ink2);
  border-radius:2px; transition:all .32s var(--ease); display:block;
}
.hamburger.open .ham-line:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open .ham-line:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.open .ham-line:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.mobile-overlay {
  position:fixed; inset:0; z-index:998;
  background:rgba(0,0,0,.55); opacity:0; visibility:hidden;
  transition:all .32s; backdrop-filter:blur(5px);
}
.mobile-overlay.open { opacity:1; visibility:visible; }
.mobile-drawer {
  position:fixed; top:0; right:0; bottom:0; z-index:999;
  width:min(330px,90vw);
  background:var(--bg2);
  transform:translateX(100%);
  transition:transform .38s var(--ease);
  overflow-y:auto; display:flex; flex-direction:column;
  box-shadow:-8px 0 48px rgba(0,0,0,.2);
}
.mobile-drawer.open { transform:translateX(0); }
.mob-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px;
  background:var(--navy);
  flex-shrink:0;
  position:relative; overflow:hidden;
}
.mob-head::before {
  content:''; position:absolute; right:-30px; top:-30px;
  width:120px; height:120px; border-radius:50%;
  background:rgba(212,175,55,.06); pointer-events:none;
}
.mob-head-logo {
  font-family:var(--fd); font-size:1.1rem;
  font-weight:700; color:#fff;
}
.mob-head-logo span { color:var(--gold); }
.mob-close {
  width:34px; height:34px; border-radius:8px;
  background:rgba(255,255,255,.1); color:#fff;
  font-size:1.1rem; display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.mob-close:hover { background:rgba(255,255,255,.2); }
.mob-nav { flex:1; padding:8px 0; }
.mob-link {
  display:flex; align-items:center; gap:12px;
  padding:13px 20px; font-size:.9rem; font-weight:600;
  color:var(--ink2); border-bottom:1px solid var(--border);
  transition:all .22s;
}
.mob-link:hover {
  background:var(--bg3); color:var(--red);
  padding-left:26px;
}
.mob-actions {
  padding:16px 20px; display:flex; flex-direction:column; gap:10px;
  border-top:1px solid var(--border); flex-shrink:0;
}
.mob-btn {
  display:flex; align-items:center; justify-content:center;
  gap:8px; padding:13px; border-radius:var(--r2);
  font-size:.9rem; font-weight:700; transition:all .25s;
}
.mob-btn-primary { background:var(--red); color:#fff; border-radius:999px; }
.mob-btn-primary:hover { background:var(--red2); transform:translateY(-1px); }
.mob-btn-secondary { background:var(--bg3); color:var(--ink2); border-radius:999px; }
.mob-btn-secondary:hover { background:var(--border); }

/* ── 6. WHAT'S NEW TICKER ─────────────────────────────────────── */
.whats-new {
  background:linear-gradient(90deg, var(--navy) 0%, var(--navy3) 50%, var(--navy) 100%);
  height:40px;           /* fixed height — cannot grow to show a second row */
  overflow:hidden;       /* hard clip */
  border-bottom:1px solid rgba(255,255,255,.03);
  display:flex;
  align-items:center;
}
.wn-inner { display:flex; align-items:center; width:100%; overflow:hidden; }
.wn-label {
  flex-shrink:0; background:var(--red); color:#fff;
  font-size:.6rem; font-weight:800; letter-spacing:.18em;
  padding:4px 11px; border-radius:4px;
  margin-right:0; z-index:2; position:relative; text-transform:uppercase;
}
.wn-divider { width:1px; height:16px; background:rgba(255,255,255,.12); margin:0 14px; flex-shrink:0; }
.wn-track-wrap { flex:1; overflow:hidden; position:relative; min-width:0; }
.wn-track-wrap::before, .wn-track-wrap::after {
  content:''; position:absolute; top:0; bottom:0; width:44px; z-index:2; pointer-events:none;
}
.wn-track-wrap::before { left:0; background:linear-gradient(to right,var(--navy3),transparent); }
.wn-track-wrap::after  { right:0; background:linear-gradient(to left,var(--navy3),transparent); }
.wn-track {
  display:inline-flex;   /* inline-flex — items stay on ONE line, no wrapping possible */
  flex-wrap:nowrap;      /* belt AND suspenders */
  white-space:nowrap;
  align-items:center;
  animation:wnScroll 40s linear infinite;
  will-change:transform;
}
.wn-track:hover { animation-play-state:paused; }
.wn-item {
  display:inline-flex; align-items:center; gap:10px;
  flex-shrink:0;         /* never compress */
  white-space:nowrap;    /* never wrap text inside item */
  padding:0 32px; font-size:.76rem; color:rgba(255,255,255,.65);
}
.wn-item::before { content:'●'; color:var(--gold); font-size:.48em; flex-shrink:0; }
@keyframes wnScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ── 7. HERO SECTION ──────────────────────────────────────────── */
.hero {
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; align-items:center; overflow:hidden;
  background:var(--navy);
}
.hero-slides { position:absolute; inset:0; z-index:0; }
.hero-slide {
  position:absolute; inset:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  opacity:0; transition:opacity 1.5s ease;
  will-change:opacity;
}
.hero-slide.active {
  opacity:1;
  animation:kenBurns 7.5s ease-out forwards;
}
@keyframes kenBurns { from{transform:scale(1.08)} to{transform:scale(1.01)} }

/* Hero overlay — rich layered gradient */
.hero-overlay {
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to right, rgba(10,22,40,.92) 0%, rgba(10,22,40,.65) 50%, rgba(10,22,40,.2) 100%),
    linear-gradient(to top, rgba(10,22,40,.85) 0%, transparent 55%);
}

/* Aurora glow for premium feel */
.hero-aurora {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 50% at 15% 60%, rgba(200,16,46,.12) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 5% 80%, rgba(212,175,55,.07) 0%, transparent 60%);
}

.hero-content {
  position:relative; z-index:2;
  max-width:680px; padding-top:40px; padding-bottom:130px;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.18);
  padding:8px 18px; border-radius:999px;
  font-size:.68rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold);
  margin-bottom:28px;
  animation:heroIn .9s var(--ease) .1s both;
}
.hero-badge-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 12px var(--gold);
  animation:dotPulse 2s ease infinite;
}
@keyframes dotPulse {
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.4;transform:scale(1.8)}
}
@keyframes heroIn { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:none} }

.hero-h1 {
  font-family:var(--fd); font-weight:700;
  font-size:clamp(2.1rem,5.5vw,4.4rem);
  line-height:1.1; color:#fff;
  text-shadow:0 2px 24px rgba(0,0,0,.35);
  margin-bottom:16px;
  animation:heroIn .9s var(--ease) .22s both;
}
.hero-h1 em {
  font-style:italic; color:var(--gold); display:block;
  text-shadow:0 0 40px rgba(212,175,55,.2);
}
.hero-p {
  font-size:clamp(.9rem,1.5vw,1.05rem);
  color:rgba(255,255,255,.78); line-height:1.8;
  max-width:520px; margin-bottom:38px;
  animation:heroIn .9s var(--ease) .36s both;
}
.hero-btns {
  display:flex; gap:12px; flex-wrap:wrap;
  animation:heroIn .9s var(--ease) .5s both;
}
.btn-hero-primary {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 30px;
  background:var(--red); color:#fff;
  border-radius:999px; font-weight:700; font-size:.92rem;
  box-shadow:0 8px 32px rgba(200,16,46,.5);
  transition:all .3s var(--ease2); white-space:nowrap;
  position:relative; overflow:hidden;
}
.btn-hero-primary::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,transparent 60%);
  opacity:0; transition:opacity .25s;
}
.btn-hero-primary:hover::before { opacity:1; }
.btn-hero-primary:hover {
  background:var(--red3);
  transform:translateY(-3px);
  box-shadow:0 16px 48px rgba(200,16,46,.6);
}
.btn-hero-outline {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 28px;
  border:2px solid rgba(255,255,255,.38); color:#fff;
  border-radius:999px; font-weight:700; font-size:.92rem;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(10px); transition:all .3s; white-space:nowrap;
}
.btn-hero-outline:hover {
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.75);
  transform:translateY(-2px);
}
.hero-stats {
  display:flex; align-items:center; flex-wrap:wrap;
  margin-top:44px; padding-top:38px;
  border-top:1px solid rgba(255,255,255,.12);
  animation:heroIn .9s var(--ease) .64s both;
}
.hero-stat-item { padding:0 28px 0 0; flex-shrink:0; }
.hero-stat-sep { width:1px; height:42px; background:rgba(255,255,255,.15); margin-right:28px; flex-shrink:0; }
.hero-stat-num {
  display:block; font-family:var(--fd);
  font-size:clamp(1.6rem,3vw,2.5rem);
  font-weight:700; color:var(--gold); line-height:1;
  text-shadow:0 0 30px rgba(212,175,55,.25);
}
.hero-stat-lbl {
  display:block; font-size:.65rem; font-weight:700;
  color:rgba(255,255,255,.5); letter-spacing:.12em;
  text-transform:uppercase; margin-top:5px;
}

/* Hero controls */
.hero-controls { position:absolute; right:clamp(16px,4vw,56px); bottom:52px; display:flex; gap:10px; z-index:5; }
.hero-btn {
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.1); backdrop-filter:blur(12px);
  border:1.5px solid rgba(255,255,255,.22); color:#fff;
  font-size:1.45rem; display:flex; align-items:center; justify-content:center;
  transition:all .28s; line-height:1;
}
.hero-btn:hover { background:var(--red); border-color:var(--red); transform:scale(1.08); }
.hero-dots { position:absolute; bottom:60px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:5; }
.hero-dot {
  width:8px; height:8px; border-radius:4px;
  background:rgba(255,255,255,.28); transition:all .38s var(--ease); border:none; cursor:pointer;
}
.hero-dot.active { width:28px; background:var(--gold); }
.hero-progress { position:absolute; bottom:0; left:0; right:0; height:3px; background:rgba(255,255,255,.07); z-index:6; }
.hero-progress-bar {
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--red),var(--gold));
  transition:width linear; border-radius:0 2px 2px 0;
}
.hero-counter {
  position:absolute; top:50%; right:clamp(16px,4vw,56px);
  transform:translateY(-50%); z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  color:rgba(255,255,255,.4);
}
.hero-cur { font-family:var(--fd); font-size:2.2rem; font-weight:700; color:var(--gold); line-height:1; }
.hero-sep { width:1.5px; height:22px; background:rgba(255,255,255,.22); margin:3px 0; }
.hero-tot { font-size:.75rem; font-weight:600; letter-spacing:.06em; }
.hero-scroll {
  position:absolute; bottom:28px; left:clamp(16px,4vw,56px); z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.scroll-mouse {
  width:22px; height:34px; border-radius:11px;
  border:2px solid rgba(255,255,255,.28);
  display:flex; justify-content:center; padding-top:5px;
}
.scroll-wheel {
  width:3px; height:8px; background:rgba(255,255,255,.55);
  border-radius:2px; animation:scrollW 1.9s ease-in-out infinite;
}
@keyframes scrollW { 0%,100%{transform:translateY(0);opacity:1} 65%{transform:translateY(11px);opacity:.15} }
.scroll-text { font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.28); }

/* ── 8. STATS BAND ────────────────────────────────────────────── */
.stats-band {
  background:var(--navy); padding:clamp(28px,4vw,52px) 0;
  position:relative; overflow:hidden;
}
.stats-band::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 80% at 50% 50%,rgba(212,175,55,.05) 0%,transparent 70%),
    radial-gradient(ellipse 40% 100% at 0% 50%,rgba(200,16,46,.04) 0%,transparent 60%);
}
.stats-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:0; position:relative; z-index:1;
}
.stat-item {
  text-align:center; padding:clamp(22px,3vw,40px) 20px;
  border-right:1px solid rgba(255,255,255,.06);
  position:relative; transition:background .3s;
}
.stat-item:last-child { border-right:none; }
.stat-item::before {
  content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:0; height:2px; background:linear-gradient(90deg,var(--red),var(--gold));
  transition:width .45s var(--ease); border-radius:99px;
}
.stat-item:hover::before { width:60%; }
.stat-icon {
  width:50px; height:50px; border-radius:14px;
  background:rgba(212,175,55,.1); border:1px solid rgba(212,175,55,.18);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 18px; font-size:1.5rem;
  transition:transform .3s var(--ease), box-shadow .3s;
}
.stat-item:hover .stat-icon {
  transform:scale(1.1) translateY(-2px);
  box-shadow:0 8px 24px rgba(212,175,55,.2);
}
.stat-num {
  font-family:var(--fd); font-size:clamp(2rem,4vw,3.2rem);
  font-weight:700; color:var(--gold); line-height:1; display:block;
  text-shadow:0 0 40px rgba(212,175,55,.2);
}
.stat-label {
  font-size:.68rem; font-weight:700; color:rgba(255,255,255,.45);
  letter-spacing:.12em; text-transform:uppercase; margin-top:8px; display:block;
}

/* ── 9. SECTIONS ──────────────────────────────────────────────── */
.section { padding:clamp(64px,8vw,104px) 0; }
.section-alt { background:var(--bg3); }
.section-dark { background:var(--navy); color:#fff; }
.sec-hdr { margin-bottom:clamp(36px,5vw,56px); }
.sec-hdr.center { text-align:center; }
.sec-hdr.center .sec-sub { margin:0 auto; }
.eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-size:.66rem; font-weight:800; letter-spacing:.22em;
  text-transform:uppercase; color:var(--red); margin-bottom:14px;
}
.eyebrow::before { content:''; width:22px; height:2px; background:var(--red); display:block; border-radius:2px; }
.sec-title {
  font-family:var(--fd); font-weight:700;
  font-size:clamp(1.7rem,3.5vw,2.6rem);
  color:var(--ink); line-height:1.2; margin-bottom:14px;
  letter-spacing:-.01em;
}
.sec-title span { color:var(--red); }
.section-dark .sec-title { color:#fff; }
.sec-sub { font-size:.92rem; color:var(--ink3); line-height:1.78; max-width:580px; }
.section-dark .sec-sub { color:rgba(255,255,255,.58); }

/* Page header (phdr) */
.phdr {
  background:var(--navy); padding:clamp(90px,11vw,130px) 0 clamp(52px,7vw,80px);
  position:relative; overflow:hidden;
}
.phdr::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 80% at 80% 50%, rgba(200,16,46,.1) 0%, transparent 70%);
  pointer-events:none;
}
.phdr-content { position:relative; z-index:1; }
.phdr-content h1 {
  font-family:var(--fd); font-size:clamp(2rem,5vw,3.3rem);
  font-weight:700; color:#fff; line-height:1.15;
  margin:12px 0 10px; letter-spacing:-.01em;
}
.phdr-content p { font-size:.92rem; color:rgba(255,255,255,.6); max-width:500px; line-height:1.75; }
.breadcrumb {
  display:flex; align-items:center; gap:8px;
  font-size:.74rem; color:rgba(255,255,255,.38); margin-bottom:8px;
}
.breadcrumb a { color:rgba(255,255,255,.42); transition:color .2s; }
.breadcrumb a:hover { color:var(--gold); }
.breadcrumb span { color:rgba(255,255,255,.28); }

/* ── 10. CARDS ────────────────────────────────────────────────── */
.card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r2); box-shadow:var(--sh1);
  transition:all .32s var(--ease);
}
.card:hover { box-shadow:var(--sh3); border-color:var(--border2); }

/* Premium glass card */
.glass-card {
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.5);
  border-radius:var(--r3); box-shadow:var(--sh2);
}
[data-theme="dark"] .glass-card {
  background:rgba(17,24,39,.7);
  border-color:rgba(31,45,68,.5);
}

/* ── 11. CLASSES GRID ─────────────────────────────────────────── */
.classes-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:12px; }
.class-card {
  background:var(--bg2); border-radius:var(--r2);
  border:2px solid var(--border);
  padding:18px 12px; text-align:center;
  transition:all .32s var(--ease); cursor:pointer;
  position:relative; overflow:hidden;
}
.class-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .38s var(--ease);
}
.class-card:hover::before { transform:scaleX(1); }
.class-card::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 100%, rgba(200,16,46,.05) 0%, transparent 70%);
  opacity:0; transition:opacity .32s;
}
.class-card:hover::after { opacity:1; }
.class-card:hover {
  border-color:rgba(200,16,46,.3);
  transform:translateY(-6px);
  box-shadow:var(--sh2);
}
.class-emoji { font-size:1.85rem; display:block; margin-bottom:9px; transition:transform .3s var(--ease); }
.class-card:hover .class-emoji { transform:scale(1.15); }
.class-name { font-family:var(--fd); font-size:.85rem; font-weight:700; color:var(--ink); margin-bottom:3px; }
.class-sub { font-size:.67rem; color:var(--ink4); }
.class-card.pre-school::before { background:linear-gradient(90deg,#f59e0b,#fbbf24); }
.class-card.primary::before   { background:linear-gradient(90deg,#3b82f6,#60a5fa); }
.class-card.middle::before    { background:linear-gradient(90deg,#22c55e,#4ade80); }
.class-card.secondary::before { background:linear-gradient(90deg,var(--red),#f87171); }

/* ── 12. NEWS & NOTICES ───────────────────────────────────────── */
.news-wrap { display:grid; grid-template-columns:1.65fr 1fr; gap:24px; align-items:start; }
.news-card-main {
  background:var(--bg2); border-radius:var(--r3);
  overflow:hidden; border:1px solid var(--border);
  box-shadow:var(--sh1); transition:all .35s var(--ease); display:block;
}
.news-card-main:hover { transform:translateY(-5px); box-shadow:var(--sh3); border-color:var(--border2); }
.news-main-img { width:100%; height:244px; object-fit:cover; display:block; background:var(--bg3); }
.news-main-body { padding:24px 28px 28px; }
.news-cat {
  display:inline-block; padding:3px 10px; border-radius:4px;
  font-size:.63rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  margin-bottom:11px; background:rgba(200,16,46,.1); color:var(--red);
}
.news-main-title {
  font-family:var(--fd); font-size:1.3rem; font-weight:700; color:var(--ink);
  line-height:1.3; margin-bottom:10px; transition:color .2s;
}
.news-card-main:hover .news-main-title { color:var(--red); }
.news-main-text { font-size:.84rem; color:var(--ink3); line-height:1.72; margin-bottom:16px; }
.news-meta { display:flex; gap:14px; font-size:.72rem; color:var(--ink4); flex-wrap:wrap; }
.news-sidebar { display:flex; flex-direction:column; gap:12px; }
.news-side-card {
  display:flex; gap:12px; align-items:flex-start;
  background:var(--bg2); border-radius:var(--r2);
  padding:12px; border:1px solid var(--border); box-shadow:var(--sh0);
  transition:all .28s var(--ease); text-decoration:none; color:inherit;
}
.news-side-card:hover { transform:translateX(5px); border-color:rgba(200,16,46,.25); box-shadow:var(--sh1); }
.news-side-img { width:68px; height:58px; border-radius:10px; object-fit:cover; flex-shrink:0; background:var(--bg3); }
.news-side-title { font-size:.82rem; font-weight:700; color:var(--ink); line-height:1.38; margin-bottom:5px; }
.news-side-date { font-size:.66rem; color:var(--ink4); }

/* Notice board */
.notice-board {
  background:var(--bg2); border-radius:var(--r3);
  border:1px solid var(--border); overflow:hidden; box-shadow:var(--sh1);
}
.nb-head {
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy3) 100%);
  padding:16px 20px; display:flex; align-items:center; gap:10px;
}
.nb-head h3 { font-family:var(--fd); font-size:.95rem; font-weight:700; color:#fff; }
.nb-item {
  display:flex; align-items:flex-start; gap:13px;
  padding:13px 18px; border-bottom:1px solid var(--border);
  transition:background .18s, padding .18s; cursor:pointer;
}
.nb-item:last-child { border-bottom:none; }
.nb-item:hover { background:var(--bg3); padding-left:22px; }
.nb-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:6px; }
.nb-dot.urgent   { background:#ef4444; box-shadow:0 0 8px rgba(239,68,68,.4); }
.nb-dot.important{ background:#f59e0b; box-shadow:0 0 8px rgba(245,158,11,.4); }
.nb-dot.normal   { background:#3b82f6; }
.nb-title { font-size:.82rem; font-weight:600; color:var(--ink2); line-height:1.45; }
.nb-date  { font-size:.67rem; color:var(--ink4); margin-top:3px; }

/* ── 13. TEACHER CAROUSEL ─────────────────────────────────────── */
.tc-section { background:var(--bg3); }
.tc-track {
  display:flex!important; flex-direction:row!important; flex-wrap:nowrap!important;
  gap:18px; overflow-x:auto!important; overflow-y:visible;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; cursor:grab; padding:8px 0 24px;
}
.tc-track::-webkit-scrollbar { display:none; }
.tc-track:active { cursor:grabbing; }
.tc-card {
  flex:0 0 196px!important; min-width:196px!important; max-width:196px!important; width:196px!important;
  background:var(--bg2); border-radius:var(--r2);
  border:2px solid var(--border); overflow:hidden;
  scroll-snap-align:start; transition:all .32s var(--ease);
  text-align:center; box-shadow:var(--sh1);
}
.tc-card:hover { border-color:rgba(200,16,46,.35); transform:translateY(-8px); box-shadow:var(--sh3); }
.tc-top { height:4px; background:linear-gradient(90deg,var(--red),var(--gold)); }
.tc-photo {
  width:84px; height:84px; border-radius:50%; object-fit:cover;
  margin:18px auto 0; display:block;
  border:3px solid #fff; box-shadow:0 4px 16px rgba(0,0,0,.12);
  transition:transform .32s var(--ease);
}
.tc-card:hover .tc-photo { transform:scale(1.05); }
.tc-name { font-family:var(--fd); font-size:.9rem; font-weight:700; color:var(--ink); padding:12px 12px 3px; line-height:1.3; }
.tc-role { font-size:.64rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--red); padding:0 12px 12px; }
.tc-info { padding:0 14px 14px; border-top:1px solid var(--border); padding-top:10px; }
.tc-info-row { font-size:.72rem; color:var(--ink4); display:flex; align-items:center; gap:5px; justify-content:center; margin-bottom:4px; }
.tc-arrow {
  position:absolute; top:50%; transform:translateY(-55%); z-index:5;
  width:40px; height:40px; border-radius:50%;
  background:var(--bg2); border:1.5px solid var(--border); color:var(--ink2);
  font-size:1.5rem; font-weight:700; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--sh2); transition:all .25s; line-height:1;
}
.tc-arrow:hover { background:var(--red); border-color:var(--red); color:#fff; }
.tc-arrow.prev { left:4px; }
.tc-arrow.next { right:4px; }

/* ── 14. RESULTS ──────────────────────────────────────────────── */
.result-card {
  display:flex; align-items:flex-start; gap:20px;
  background:var(--bg2); border-radius:var(--r2);
  border:1px solid var(--border); padding:22px;
  box-shadow:var(--sh1); transition:all .32s var(--ease);
  position:relative; overflow:hidden;
}
.result-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(to bottom,var(--red),var(--gold));
  transform:scaleY(0); transform-origin:top; transition:transform .38s var(--ease);
  border-radius:0 2px 2px 0;
}
.result-card:hover::before { transform:scaleY(1); }
.result-card:hover { border-color:rgba(200,16,46,.2); box-shadow:var(--sh2); transform:translateY(-3px); }
.result-icon {
  width:52px; height:52px; border-radius:14px;
  background:var(--navy); display:flex; align-items:center;
  justify-content:center; flex-shrink:0; font-size:1.4rem;
  box-shadow:0 4px 16px rgba(10,22,40,.2);
}
.result-class { font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--red); margin-bottom:5px; }
.result-title { font-family:var(--fd); font-size:1.05rem; font-weight:700; color:var(--ink); line-height:1.3; }
.result-meta { display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; font-size:.76rem; color:var(--ink3); }
.result-link {
  display:inline-flex; align-items:center; gap:5px;
  margin-top:12px; padding:7px 16px;
  background:var(--red); color:#fff; border-radius:var(--r);
  font-size:.76rem; font-weight:700; transition:background .2s;
}
.result-link:hover { background:var(--red2); }

/* ── 15. HOLIDAYS ─────────────────────────────────────────────── */
.hol-list { display:flex; flex-direction:column; gap:10px; }
.hol-card {
  display:flex; align-items:center; gap:14px;
  background:var(--bg2); border-radius:var(--r2);
  border:1px solid var(--border); padding:13px 16px;
  box-shadow:var(--sh0); transition:all .28s var(--ease);
}
.hol-card:hover { border-color:rgba(200,16,46,.25); transform:translateX(5px); box-shadow:var(--sh1); }
.hol-date-box {
  width:52px; height:58px; border-radius:11px;
  background:var(--navy); display:flex; flex-direction:column;
  align-items:center; justify-content:center; flex-shrink:0;
  box-shadow:0 4px 12px rgba(10,22,40,.2);
}
.hol-date-box strong {
  font-family:var(--fd); font-size:1.45rem; font-weight:700;
  color:var(--gold); line-height:1;
}
.hol-date-box span { font-size:.52rem; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.45); margin-top:2px; }
.hol-title { font-weight:700; color:var(--ink); font-size:.86rem; line-height:1.35; }
.hol-badge {
  display:inline-block; padding:2px 9px; border-radius:99px;
  font-size:.6rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; margin-top:4px;
}
.hol-badge.national   { background:#dbeafe; color:#1d4ed8; }
.hol-badge.jk_ut      { background:#ede9fe; color:#6d28d9; }
.hol-badge.provincial { background:#fef3c7; color:#b45309; }
.hol-badge.local      { background:#d1fae5; color:#065f46; }
.hol-badge.vacation   { background:#dcfce7; color:#15803d; }
.hol-badge.school     { background:#fef9c3; color:#a16207; }
.hol-badge.exam       { background:#fce7f3; color:#9d174d; }
.hol-badge.regional   { background:#ede9fe; color:#5b21b6; }

/* ── 16. FEE TABLE ────────────────────────────────────────────── */
.fee-table-outer {
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border-radius:var(--r2); box-shadow:var(--sh1);
  border:1px solid var(--border);
}
.fee-table { width:100%; border-collapse:collapse; font-size:.86rem; min-width:500px; }
.fee-table thead th {
  background:var(--navy); color:#fff;
  padding:14px 16px; text-align:left;
  font-size:.69rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
}
.fee-table thead th:first-child { border-radius:var(--r) 0 0 0; }
.fee-table thead th:last-child  { border-radius:0 var(--r) 0 0; }
.fee-table tbody tr { transition:background .15s; }
.fee-table tbody tr:nth-child(even) { background:var(--bg3); }
.fee-table tbody tr:hover { background:rgba(200,16,46,.04); }
.fee-table tbody td { padding:13px 16px; border-bottom:1px solid var(--border); color:var(--ink2); vertical-align:middle; }
.fee-row-sep td { border-top:2px solid var(--border); }
.fee-badge {
  display:inline-block; padding:4px 12px; border-radius:99px;
  font-size:.7rem; font-weight:700; letter-spacing:.04em;
}
.fee-badge.pre { background:#fef3c7; color:#92400e; }
.fee-badge.pri { background:#dbeafe; color:#1d4ed8; }
.fee-badge.mid { background:#dcfce7; color:#15803d; }
.fee-badge.sec { background:#fce7f3; color:#9d174d; }

/* ── 17. PTA ──────────────────────────────────────────────────── */
.pta-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.pta-card {
  background:var(--bg2); border-radius:var(--r2);
  border:1px solid var(--border); padding:24px 16px; text-align:center;
  box-shadow:var(--sh1); transition:all .32s var(--ease); cursor:default;
  position:relative; overflow:hidden;
}
.pta-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--red),var(--gold));
  transform:scaleX(0); transform-origin:left; transition:transform .38s var(--ease);
}
.pta-card:hover::before { transform:scaleX(1); }
.pta-card:hover { border-color:rgba(200,16,46,.25); transform:translateY(-6px); box-shadow:var(--sh3); }
.pta-av {
  width:72px; height:72px; border-radius:50%;
  background:var(--navy); color:var(--gold);
  font-family:var(--fd); font-size:1.6rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 14px; overflow:hidden;
  border:3px solid transparent;
  box-shadow:0 0 0 3px rgba(212,175,55,.2);
  transition:box-shadow .32s;
}
.pta-card:hover .pta-av { box-shadow:0 0 0 3px rgba(200,16,46,.3); }
.pta-av img { width:100%; height:100%; object-fit:cover; }
.pta-name { font-family:var(--fd); font-size:.9rem; font-weight:700; color:var(--ink); }
.pta-role { font-size:.65rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--red); margin-top:4px; }

/* ── 18. YOUTUBE GRID ─────────────────────────────────────────── */
.yt-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.yt-card {
  background:var(--bg2); border-radius:var(--r2);
  overflow:hidden; border:1px solid var(--border);
  box-shadow:var(--sh1); transition:all .32s var(--ease);
}
.yt-card:hover { box-shadow:var(--sh3); transform:translateY(-4px); border-color:var(--border2); }
.yt-thumb { position:relative; aspect-ratio:16/9; cursor:pointer; overflow:hidden; }
.yt-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .45s var(--ease); }
.yt-card:hover .yt-thumb img { transform:scale(1.06); }
.yt-play {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.32); transition:background .28s;
}
.yt-card:hover .yt-play { background:rgba(0,0,0,.18); }
.yt-play-icon {
  width:52px; height:52px; border-radius:50%;
  background:var(--red); display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 24px rgba(200,16,46,.6);
  transition:transform .28s var(--ease), box-shadow .28s;
}
.yt-card:hover .yt-play-icon {
  transform:scale(1.12);
  box-shadow:0 10px 40px rgba(200,16,46,.7);
}

/* ── 19. CTA BANNER ───────────────────────────────────────────── */
.cta-banner {
  background:var(--navy); position:relative; overflow:hidden;
  padding:clamp(60px,9vw,100px) 0;
}
.cta-banner::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 65% 65% at 70% 50%,rgba(200,16,46,.14) 0%,transparent 70%),
    radial-gradient(ellipse 40% 60% at 10% 80%,rgba(212,175,55,.07) 0%,transparent 60%);
}
.cta-inner { position:relative; z-index:1; text-align:center; }
.cta-inner h2 {
  font-family:var(--fd); font-size:clamp(1.9rem,4.5vw,3.2rem);
  font-weight:700; color:#fff; margin-bottom:14px; line-height:1.2; letter-spacing:-.01em;
}
.cta-inner p {
  font-size:.95rem; color:rgba(255,255,255,.62);
  margin-bottom:36px; max-width:520px; margin-left:auto; margin-right:auto; line-height:1.75;
}
.cta-btns { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
.btn-cta-primary {
  display:inline-flex; align-items:center; gap:9px;
  padding:15px 34px; background:var(--red); color:#fff;
  border-radius:999px; font-weight:700; font-size:.95rem;
  box-shadow:0 8px 32px rgba(200,16,46,.45); transition:all .3s var(--ease2);
  position:relative; overflow:hidden;
}
.btn-cta-primary::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.14) 0%,transparent 60%);
  opacity:0; transition:opacity .25s;
}
.btn-cta-primary:hover::before { opacity:1; }
.btn-cta-primary:hover { transform:translateY(-3px); box-shadow:0 16px 48px rgba(200,16,46,.6); }
.btn-cta-outline {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 32px;
  border:2px solid rgba(255,255,255,.32); color:#fff;
  border-radius:999px; font-weight:700; font-size:.95rem;
  background:rgba(255,255,255,.07); transition:all .3s;
}
.btn-cta-outline:hover {
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.65);
  transform:translateY(-2px);
}

/* ── 20. FOOTER ───────────────────────────────────────────────── */
.footer {
  background:var(--navy); color:rgba(255,255,255,.6);
  position:relative; overflow:hidden;
}
.footer::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(212,175,55,.3), transparent);
}
.footer-top {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
  gap:clamp(24px,5vw,64px);
  padding:clamp(52px,7vw,88px) 0;
}
.footer-brand-name {
  font-family:var(--fd); font-size:1.25rem; font-weight:700;
  color:#fff; margin-bottom:6px; letter-spacing:-.01em;
}
.footer-brand-name span { color:var(--gold); }
.footer-tagline {
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.28); margin-bottom:14px;
}
.footer-socials { display:flex; gap:9px; margin-top:20px; flex-wrap:wrap; }
.footer-social {
  width:36px; height:36px; border-radius:9px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.55); transition:all .25s;
}
.footer-social:hover {
  background:var(--red); border-color:var(--red); color:#fff;
  transform:translateY(-2px); box-shadow:0 6px 20px rgba(200,16,46,.35);
}
.footer h4 {
  font-size:.68rem; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.32); margin-bottom:18px;
}
.footer-link {
  display:flex; align-items:center; gap:7px;
  font-size:.8rem; color:rgba(255,255,255,.52);
  margin-bottom:10px; transition:color .2s, transform .2s;
}
.footer-link:hover { color:var(--gold); transform:translateX(4px); }
.footer-link::before {
  content:'→'; font-size:.65em; color:var(--red);
  opacity:0; transition:opacity .2s, transform .2s; transform:translateX(-4px);
}
.footer-link:hover::before { opacity:1; transform:none; }
.footer-contact-row {
  display:flex; align-items:flex-start; gap:10px;
  font-size:.8rem; color:rgba(255,255,255,.52); margin-bottom:12px; line-height:1.5;
}
.footer-contact-row svg { flex-shrink:0; margin-top:1px; color:var(--gold); }
.footer-contact-row a { color:rgba(255,255,255,.52); transition:color .2s; }
.footer-contact-row a:hover { color:var(--gold); }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.06);
  padding:20px 0;
}
.footer-bottom-inner {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px;
}
.footer-bottom span { font-size:.73rem; color:rgba(255,255,255,.26); }
.footer-bottom a { color:rgba(255,255,255,.26); font-size:.7rem; display:flex; align-items:center; gap:5px; transition:color .2s; }
.footer-bottom a:hover { color:rgba(255,255,255,.5); }

/* ── 21. FORMS ────────────────────────────────────────────────── */
.form-group { display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
.form-group label {
  font-size:.73rem; font-weight:700; color:var(--ink2);
  text-transform:uppercase; letter-spacing:.07em;
}
.form-group input,
.form-group select,
.form-group textarea {
  padding:12px 16px; font-size:15px;
  border:1.5px solid var(--border); border-radius:var(--r);
  background:var(--bg2); color:var(--ink);
  outline:none; transition:border-color .22s, box-shadow .22s; width:100%;
  -webkit-appearance:none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(200,16,46,.1);
}
.form-group textarea { min-height:120px; resize:vertical; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.btn-submit {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 28px; background:var(--red); color:#fff;
  border-radius:var(--r2); font-size:.9rem; font-weight:700;
  border:none; cursor:pointer; transition:all .28s var(--ease2);
  box-shadow:0 4px 18px rgba(200,16,46,.3);
}
.btn-submit:hover { background:var(--red2); transform:translateY(-2px); box-shadow:0 8px 28px rgba(200,16,46,.4); }
.btn-submit:active { transform:none; }
.btn-submit:disabled { opacity:.55; cursor:not-allowed; transform:none !important; }

/* ── 22. GENERAL BUTTONS ──────────────────────────────────────── */
.btn-red {
  display:inline-flex; align-items:center; gap:7px;
  padding:11px 24px; background:var(--red); color:#fff;
  border-radius:var(--r); font-weight:700; font-size:.84rem;
  transition:all .27s var(--ease2);
  box-shadow:0 4px 16px rgba(200,16,46,.25);
}
.btn-red:hover {
  background:var(--red2); transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(200,16,46,.4);
}

/* ── 23. TOAST ────────────────────────────────────────────────── */
#toast-wrap {
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%);
  z-index:9000; display:flex; flex-direction:column; gap:8px;
  pointer-events:none; width:max-content; max-width:90vw;
}
.toast {
  padding:13px 22px; border-radius:var(--r2);
  font-size:.84rem; font-weight:600; background:var(--ink); color:#fff;
  box-shadow:var(--sh3); border-left:4px solid var(--red);
  opacity:0; transform:translateY(16px) scale(.97);
  transition:all .32s var(--ease); pointer-events:none;
}
.toast.show { opacity:1; transform:none; pointer-events:auto; }
.toast.success { border-left-color:#22c55e; }
.toast.info    { border-left-color:#3b82f6; }
.toast.error   { border-left-color:var(--red); }

/* ── 24. LIGHTBOX ─────────────────────────────────────────────── */
.lightbox {
  position:fixed; inset:0; z-index:9990;
  background:rgba(0,0,0,.94); display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:all .32s;
}
.lightbox.open { opacity:1; visibility:visible; }
.lightbox img { max-width:90vw; max-height:86vh; border-radius:var(--r2); box-shadow:var(--sh4); }
.lb-close {
  position:absolute; top:20px; right:24px;
  color:#fff; font-size:1.9rem; cursor:pointer; opacity:.6; transition:opacity .2s;
  line-height:1; width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:rgba(255,255,255,.1);
}
.lb-close:hover { opacity:1; background:rgba(255,255,255,.2); }
.lb-prev, .lb-next {
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.1); border:1.5px solid rgba(255,255,255,.2);
  color:#fff; width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; cursor:pointer; transition:all .22s;
}
.lb-prev { left:20px; }
.lb-next { right:20px; }
.lb-prev:hover, .lb-next:hover { background:var(--red); border-color:var(--red); }

/* ── 25. BACK TO TOP ──────────────────────────────────────────── */
.back-top {
  position:fixed; bottom:92px; right:22px; z-index:900;
  width:42px; height:42px; border-radius:50%;
  background:var(--red); color:#fff;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:all .3s var(--ease);
  box-shadow:0 4px 18px rgba(200,16,46,.45);
}
.back-top.show { opacity:1; visibility:visible; }
.back-top:hover { transform:translateY(-4px); box-shadow:0 8px 28px rgba(200,16,46,.55); }

/* ── 26. CHAT FAB ─────────────────────────────────────────────── */
.chat-fab {
  position:fixed; bottom:28px; right:22px; z-index:900;
  width:54px; height:54px; border-radius:50%;
  background:var(--red); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 28px rgba(200,16,46,.5); transition:all .28s var(--ease);
}
.chat-fab:hover { transform:scale(1.08); box-shadow:0 10px 36px rgba(200,16,46,.6); }
.chat-badge {
  position:absolute; top:-2px; right:-2px;
  width:12px; height:12px; border-radius:50%;
  background:#22c55e; border:2px solid #fff;
  animation:badgePulse 2.5s ease-in-out infinite;
}
@keyframes badgePulse { 0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.4)} 50%{box-shadow:0 0 0 5px rgba(34,197,94,0)} }
.chat-panel {
  position:fixed; bottom:96px; right:22px; z-index:900;
  width:340px;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r4); box-shadow:var(--sh4);
  overflow:hidden; opacity:0; visibility:hidden;
  transform:translateY(16px) scale(.96);
  transition:all .32s var(--ease);
}
.chat-panel.open { opacity:1; visibility:visible; transform:none; }
.chat-head {
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy3) 100%);
  padding:16px 18px; display:flex; align-items:center; gap:12px;
}
.chat-head-avatar {
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.chat-head-name { font-size:.88rem; font-weight:700; color:#fff; margin-bottom:1px; }
.chat-head-status { font-size:.68rem; color:rgba(255,255,255,.5); }
.chat-close {
  margin-left:auto; width:30px; height:30px; border-radius:7px;
  background:rgba(255,255,255,.1); color:rgba(255,255,255,.7);
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem; transition:all .2s;
}
.chat-close:hover { background:rgba(255,255,255,.2); color:#fff; }
.chat-messages { height:260px; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:9px; }
.chat-msg { max-width:85%; padding:9px 13px; border-radius:12px; font-size:.82rem; line-height:1.5; }
.chat-msg.bot { background:var(--bg3); color:var(--ink); border-bottom-left-radius:3px; align-self:flex-start; }
.chat-msg.user { background:var(--red); color:#fff; border-bottom-right-radius:3px; align-self:flex-end; }
.chat-quick {
  display:flex; gap:6px; padding:8px 12px; overflow-x:auto;
  scrollbar-width:none; border-top:1px solid var(--border);
}
.chat-quick::-webkit-scrollbar { display:none; }
.chat-quick-btn {
  flex-shrink:0; padding:5px 12px; background:var(--bg3);
  border:1px solid var(--border); border-radius:99px;
  font-size:.74rem; font-weight:600; color:var(--ink3); white-space:nowrap;
  transition:all .2s; cursor:pointer;
}
.chat-quick-btn:hover { background:var(--red); border-color:var(--red); color:#fff; }
.chat-input-row { padding:10px 14px; border-top:1px solid var(--border); display:flex; gap:8px; align-items:center; }
.chat-input-row input {
  flex:1; padding:9px 12px;
  border:1.5px solid var(--border); border-radius:var(--r);
  font-size:.84rem; background:var(--bg2); color:var(--ink); outline:none;
  transition:border-color .2s;
}
.chat-input-row input:focus { border-color:var(--red); }
.chat-send {
  width:36px; height:36px; border-radius:50%;
  background:var(--red); color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:transform .2s, box-shadow .2s;
}
.chat-send:hover { transform:scale(1.08); box-shadow:0 4px 14px rgba(200,16,46,.4); }

/* ── 27. LAYOUT HELPERS ───────────────────────────────────────── */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.py { padding:clamp(56px,7vw,88px) 0; }

/* GSAP targets */
.rv, .rvl, .rvr { opacity:1; transform:none; }

/* ── 28. RESPONSIVE ───────────────────────────────────────────── */
@media (max-width:1100px) {
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .footer-top { grid-template-columns:1fr 1fr; }
  .pta-grid { grid-template-columns:repeat(2,1fr); }
  .yt-grid { grid-template-columns:1fr; }
}
@media (max-width:960px) {
  .nav-menu, .nav-actions { display:none; }
  .hamburger { display:flex; }
  /* .topbar-left deprecated */
  #tb { display:none!important; } /* hide topbar on mobile */
  .news-wrap { grid-template-columns:1fr; }
  .grid-2, .grid-3 { grid-template-columns:1fr; }
  .tc-arrow { display:none; }
}
@media (max-width:768px) {
  .hero { align-items:flex-end; }
  .hero-overlay {
    background:
      linear-gradient(to top,rgba(10,22,40,.96) 0%,rgba(10,22,40,.75) 40%,rgba(10,22,40,.3) 80%,transparent 100%);
  }
  .hero-content { padding-top:0; padding-bottom:92px; }
  .hero-counter, .hero-scroll { display:none; }
  .hero-btns { flex-direction:column; }
  .btn-hero-primary, .btn-hero-outline { justify-content:center; width:100%; max-width:320px; }
  .hero-stats { overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
  .hero-stats::-webkit-scrollbar { display:none; }
  .hero-stat-item, .hero-stat-sep { flex-shrink:0; }
  .result-card { flex-direction:column; }
  .grid-4 { grid-template-columns:1fr 1fr; }
  .pta-grid { grid-template-columns:1fr 1fr; }
  .footer-top { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  input, select, textarea { font-size:16px!important; }
}
@media (max-width:600px) {
  .W { padding-left:16px!important; padding-right:16px!important; }
  .section, .py { padding-top:52px!important; padding-bottom:52px!important; }
  .sec-title { font-size:1.5rem!important; }
  .stats-grid { grid-template-columns:1fr 1fr!important; }
  .classes-grid { grid-template-columns:repeat(2,1fr)!important; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns:1fr!important; }
  .pta-grid { grid-template-columns:1fr 1fr!important; }
  .phdr-content h1 { font-size:1.6rem!important; }
  .footer-bottom-inner { flex-direction:column; gap:10px; text-align:center; }
  .tc-card { flex:0 0 158px!important; min-width:158px!important; max-width:158px!important; }
  .chat-panel { width:calc(100vw - 24px); right:12px; }
  .yt-grid { grid-template-columns:1fr!important; }
  .cta-inner h2 { font-size:1.75rem!important; }
}
@media (max-width:480px) {
  .hero-h1 { font-size:1.7rem!important; }
  .sec-title { font-size:1.35rem!important; }
  .pta-grid { grid-template-columns:1fr!important; }
  .tc-card { flex:0 0 148px!important; min-width:148px!important; max-width:148px!important; }
  .stat-num { font-size:1.8rem!important; }
}
@media (max-width:390px) {
  .hero-h1 { font-size:1.5rem!important; }
  .stat-num { font-size:1.6rem!important; }
}

/* Safe area insets for modern phones */
@supports (padding: max(0px)) {
  .chat-fab {
    right: max(18px, env(safe-area-inset-right))!important;
    bottom: max(18px, env(safe-area-inset-bottom))!important;
  }
  .back-top {
    bottom: max(88px, calc(72px + env(safe-area-inset-bottom)))!important;
  }
}

/* Overflow safety */
html, body { overflow-x:hidden!important; }
img, video, iframe { max-width:100%!important; }

/* Print */
@media print {
  /* .topbar removed, use #tb */ .navbar, .hero-controls, .chat-fab, .chat-panel, .back-top, #preloader { display:none!important; }
  .hero { min-height:auto; }
  body { background:#fff; color:#000; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
}

/* ════════════════════════════════════════════════════════════════
   LAYOUT BUG FIXES — Resolves all visible issues
   ════════════════════════════════════════════════════════════════ */

/* ── 1. Classes grid — force multi-column, never single column ── */
.classes-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  gap: 14px !important;
}
.class-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
}

/* ── 2. Teacher carousel — bulletproof horizontal layout ────── */
.tc-section { overflow: visible !important; }
.tc-track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-snap-type: x mandatory !important;
  gap: 18px !important;
  padding: 8px 4px 28px !important;
  scrollbar-width: none !important;
}
.tc-track::-webkit-scrollbar { display: none !important; }
.tc-card {
  flex: 0 0 196px !important;
  min-width: 196px !important;
  max-width: 196px !important;
  width: 196px !important;
  display: flex !important;
  flex-direction: column !important;
  scroll-snap-align: start !important;
}

/* ── 3. PTA grid — force 4 columns, never single ─────────────── */
.pta-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
}
/* CRITICAL: Remove GSAP opacity from pta-cards (they break the grid) */
.pta-card.rv,
.pta-card {
  opacity: 1 !important;
  transform: none !important;
}
/* Re-enable individual GSAP only after JS runs */
.pta-card.gsap-done {
  opacity: 1 !important;
}

/* ── 4. Reviews / section-dark — force navy background ────────── */
.section-dark {
  background: #0a1628 !important;
  background-color: #0a1628 !important;
  color: #ffffff !important;
}
.section-dark .sec-title,
.section-dark h2,
.section-dark h3 {
  color: #ffffff !important;
}
.section-dark .sec-sub,
.section-dark p {
  color: rgba(255, 255, 255, 0.65) !important;
}
.section-dark .eyebrow {
  color: var(--gold) !important;
}
/* Reviews overview box */
.reviews-overview {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
/* Rating bars text */
.rb-label, .rb-pct {
  color: rgba(255, 255, 255, 0.7) !important;
}
/* Review cards */
.review-card {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.review-card .review-text {
  color: rgba(255, 255, 255, 0.82) !important;
}
.review-card .review-name {
  color: #ffffff !important;
}
.review-card .review-role {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* ── 5. News section — ensure fallback article rows have style ── */
.news-mini-item {
  display: flex !important;
  gap: 14px !important;
  align-items: flex-start !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--border) !important;
}
.news-mini-img {
  width: 72px !important;
  height: 54px !important;
  flex-shrink: 0 !important;
  border-radius: var(--r) !important;
  object-fit: cover !important;
  background: var(--bg3) !important;
}

/* ── 6. Section alt background ──────────────────────────────── */
.section-alt {
  background: var(--bg3, #eef1f8) !important;
}

/* ── 7. RV elements — visible by default, GSAP handles animation ── */
/* IMPORTANT: Do NOT set opacity:0 here — GSAP sets it via inline style when ready */
.rv, .rvl, .rvr {
  /* opacity and transform controlled entirely by GSAP inline styles */
  /* CSS only provides the transition duration for smooth animation */
  will-change: opacity, transform;
}
/* Explicit visible state when GSAP is done / not loaded */
.rv.visible, .rvl.visible, .rvr.visible,
.no-gsap .rv, .no-gsap .rvl, .no-gsap .rvr,
.rv[style*="opacity: 1"], .rvl[style*="opacity: 1"], .rvr[style*="opacity: 1"] {
  opacity: 1 !important;
  transform: none !important;
}

/* ── 8. Responsive grid fixes ──────────────────────────────── */
@media (max-width: 1100px) {
  .pta-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
  .classes-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .pta-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .reviews-grid { grid-template-columns: 1fr 1fr !important; }
  .social-wall-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
  .classes-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .pta-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .reviews-grid { grid-template-columns: 1fr !important; }
  .tc-card { flex: 0 0 158px !important; min-width: 158px !important; max-width: 158px !important; }
}

/* ════════════════════════════════════════════════════════════
   MOBILE PERFECTION — Comprehensive fixes for all pages
   ════════════════════════════════════════════════════════ */

/* ── Navbar ── */
@media (max-width:960px) {
  .navbar { padding:0 16px; }
  .nav-logo-text { display:none; }
}

/* ── Hero ── */
@media (max-width:600px) {
  .hero { min-height:100svh; }
  .hero-h1 { font-size:1.6rem!important; line-height:1.25; }
  .hero-slide-content p { font-size:.9rem; }
  .hero-progress { height:3px; }
  .hero-dots { gap:6px; }
  .hero-dot { width:6px; height:6px; }
}

/* ── Page header (phdr) ── */
@media (max-width:600px) {
  .phdr { padding:clamp(72px,14vw,100px) 0 clamp(28px,6vw,40px); }
  .phdr-content h1 { font-size:1.8rem!important; }
  .breadcrumb { font-size:.72rem; }
}

/* ── Social media wall ── */
@media (max-width:960px) {
  .social-wall-grid { grid-template-columns:1fr!important; }
}
@media (max-width:600px) {
  .social-panel-hdr { padding:12px 14px; font-size:.82rem; }
  .insta-grid { grid-template-columns:repeat(3,1fr); gap:2px; }
  .yt-mini-grid { grid-template-columns:1fr 1fr; gap:6px; }
  .social-follow-btn { padding:4px 10px; font-size:.68rem; }
}

/* ── Reviews section ── */
@media (max-width:900px) {
  .reviews-overview { flex-direction:column; gap:20px; padding:20px; }
  .reviews-grid { grid-template-columns:1fr 1fr!important; }
}
@media (max-width:600px) {
  .reviews-grid { grid-template-columns:1fr!important; }
  .reviews-overview { padding:16px; }
  .rating-number { font-size:3rem; }
}

/* ── About page ── */
@media (max-width:900px) {
  .about-milestones { grid-template-columns:1fr!important; }
  .about-stats-grid { grid-template-columns:repeat(2,1fr)!important; }
  .values-grid { grid-template-columns:repeat(2,1fr)!important; }
  .about-img-frame { aspect-ratio:16/9; }
  .about-cta-btns { flex-direction:column; align-items:center; }
}
@media (max-width:600px) {
  .about-stats-grid { grid-template-columns:repeat(2,1fr)!important; }
  .values-grid { grid-template-columns:1fr!important; }
  .principal-profile { flex-direction:column; align-items:center; text-align:center; }
  .about-cta { padding:28px 20px; }
}

/* ── Academics page ── */
@media (max-width:900px) {
  .acad-levels-grid { grid-template-columns:1fr!important; }
  .excellence-stats { grid-template-columns:repeat(2,1fr)!important; }
  .facilities-grid { grid-template-columns:repeat(2,1fr)!important; }
  .excellence-left { flex-direction:column; gap:14px; }
}
@media (max-width:600px) {
  .acad-features-grid { grid-template-columns:1fr!important; }
  .facilities-grid { grid-template-columns:1fr!important; }
  .excellence-btns { flex-direction:column; }
}

/* ── Admissions page ── */
@media (max-width:900px) {
  .adm-status-inner { gap:8px; }
  .adm-status-inner a { margin-left:0; width:100%; text-align:center; }
}
@media (max-width:600px) {
  .adm-form-card { padding:20px 16px; }
  .adm-process { margin-top:16px; }
}

/* ── Contact page ── */
@media (max-width:900px) {
  .contact-grid { grid-template-columns:1fr!important; }
  .map-wrap iframe { height:220px; }
}
@media (max-width:600px) {
  .contact-quick-grid { grid-template-columns:1fr 1fr!important; }
  .contact-form-card { padding:20px 16px; }
}

/* ── Faculty page ── */
@media (max-width:900px) {
  .grid-4 { grid-template-columns:repeat(2,1fr)!important; }
  .faculty-stats-row { flex-wrap:wrap; gap:16px; justify-content:center; }
  .fac-stat-div { display:none; }
}
@media (max-width:600px) {
  .fac-dept-tabs { gap:6px; }
  .fac-tab { padding:6px 12px; font-size:.76rem; }
  .dept-header { gap:10px; }
}

/* ── Fees page ── */
@media (max-width:1100px) {
  .fees-cards-grid { grid-template-columns:repeat(2,1fr)!important; }
}
@media (max-width:600px) {
  .fees-cards-grid { grid-template-columns:1fr!important; }
  .fees-hl-div { display:none; }
  .fees-highlight-inner { gap:0; }
  .fees-hl-item { padding:8px 12px; width:50%; }
  .pay-cta-banner { flex-direction:column; align-items:flex-start; }
}

/* ── Gallery pages ── */
@media (max-width:900px) {
  .gal-masonry { columns:2 160px!important; }
  .vid-grid { grid-template-columns:repeat(2,1fr)!important; }
}
@media (max-width:600px) {
  .gal-masonry { columns:2 120px!important; }
  .vid-grid { grid-template-columns:1fr!important; }
  .gal-switcher { width:100%; }
  .gal-switch-btn { flex:1; justify-content:center; font-size:.8rem; padding:9px 10px; }
  .yt-cta-box { flex-direction:column; }
  .yt-sub-btn { margin-left:0; width:100%; text-align:center; }
}

/* ── News page ── */
@media (max-width:900px) {
  .news-layout { grid-template-columns:1fr!important; }
  .news-grid-items { grid-template-columns:1fr!important; }
}

/* ── Holidays page ── */
@media (max-width:640px) {
  .hol-summary { grid-template-columns:repeat(2,1fr)!important; }
  .hol-date-col { min-width:56px; }
}

/* ── PTA page ── */
@media (max-width:900px) {
  .pta-join-card { padding:24px 16px; }
}

/* ── Results page ── */
@media (max-width:640px) {
  .results-stats-grid { grid-template-columns:repeat(2,1fr)!important; }
  .jkbose-banner { flex-direction:column; gap:16px; }
  .jkbose-banner .btn-submit { width:100%; justify-content:center; }
}

/* ── Footer ── */
@media (max-width:600px) {
  .footer-top { grid-template-columns:1fr!important; gap:28px; }
  .footer-col { text-align:left; }
  .footer-brand-tagline { font-size:.82rem; }
  .footer-social { justify-content:flex-start; }
  .footer-bottom-inner { flex-direction:column; gap:8px; text-align:center; }
}

/* ── Chat FAB ── */
@media (max-width:600px) {
  .chat-fab { bottom:16px!important; right:14px!important; width:48px!important; height:48px!important; }
  .chat-panel { width:calc(100vw - 24px)!important; right:12px!important; bottom:72px!important; }
  .back-top { bottom:76px!important; right:14px!important; }
}

/* ── Forms global ── */
@media (max-width:600px) {
  .form-row { grid-template-columns:1fr!important; }
  .form-group input, .form-group select, .form-group textarea {
    font-size:16px!important; /* prevent iOS zoom */
  }
}

/* ── General card touch improvements ── */
@media (hover:none) {
  /* Better touch targets on touch devices */
  .class-card, .pta-card, .tc-card, .hol-card, .fee-card,
  .facility-card, .value-card, .mv-card, .review-card {
    -webkit-tap-highlight-color: rgba(200,16,46,.08);
  }
  /* Remove hover effects that feel broken on touch */
  .tc-card:hover, .facility-card:hover, .value-card:hover { transform:none; }
}

/* ── Typography mobile ── */
@media (max-width:480px) {
  .sec-title { font-size:1.3rem!important; }
  .eyebrow { font-size:.62rem!important; }
  .sec-sub { font-size:.84rem!important; }
  body { font-size:15px; }
}

/* ── Prevent horizontal scroll globally ── */
html, body { overflow-x:hidden!important; max-width:100vw; }
* { min-width:0; }

/* ── Tables on mobile ── */
@media (max-width:600px) {
  .fee-table { font-size:.72rem; }
  .fee-table th, .fee-table td { padding:8px 10px; }
}

/* ── Academics stage labels ─────────────────────────── */
.acad-stage-label { margin-bottom:16px; }
@media(max-width:900px) {
  .acad-preschool-grid { grid-template-columns:1fr!important; }
}
@media(max-width:600px) {
  .acad-preschool-grid { grid-template-columns:1fr!important; }
}

/* Teacher photo - enforce circle */
.tc-photo{width:88px!important;height:88px!important;min-width:88px!important;min-height:88px!important;border-radius:50%!important;object-fit:cover!important;aspect-ratio:1/1!important}


/* ================================================================
   MOBILE CRITICAL FIXES — v3.1
================================================================ */

/* 1. Force all rv elements visible on small screens */
@media (max-width: 768px) {
  .rv, .rvl, .rvr {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* 2. Teacher photo — always perfect circle, never oval */
.tc-photo,
.teacher-carousel .tc-photo,
.carousel-track .tc-photo {
  width: 88px !important;
  height: 88px !important;
  min-width: 88px !important;
  min-height: 88px !important;
  max-width: 88px !important;
  max-height: 88px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  aspect-ratio: 1 / 1 !important;
  display: block !important;
}

/* 3. Classes grid - mobile 2 columns */
@media (max-width: 600px) {
  .classes-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .class-card {
    padding: 14px 10px !important;
  }
  .class-emoji { font-size: 1.5rem !important; }
  .class-name  { font-size: .8rem !important; }
  .class-sub   { font-size: .67rem !important; }
}

/* 4. Hero badge wrapping fix on mobile */
@media (max-width: 380px) {
  .hero-badge {
    font-size: .58rem !important;
    padding: 6px 12px !important;
    flex-wrap: wrap;
    gap: 4px;
  }
}

/* 5. Contact/About blank section fix — sections with inline opacity */
@media (max-width: 900px) {
  section > .W,
  .section > .W,
  .py > .W {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* 6. Gallery lightbox mobile */
@media (max-width: 600px) {
  .gal-lightbox { padding: 12px 8px !important; }
  #lb-img { max-width: 96vw !important; max-height: 80vh !important; }
  .lb-prev { left: 4px !important; }
  .lb-next { right: 4px !important; }
}

/* 7. Preloader mobile */
@media (max-width: 480px) {
  .pl-name { font-size: .85rem !important; }
  .pl-logo-wrap { width: 80px !important; height: 80px !important; }
  .pl-logo-img  { width: 80px !important; height: 80px !important; }
  .pl-ring  { inset: -8px !important; }
  .pl-ring2 { inset: -16px !important; }
  .pl-ring3 { inset: -24px !important; }
  .pl-bar-wrap { width: 180px !important; }
  .pl-motto { gap: 5px !important; }
  .pl-motto-word { font-size: .6rem !important; }
}

/* 8. Topbar hidden on mobile (too cluttered) */
@media (max-width: 600px) {
  .topbar { display: none !important; }
}

/* 9. Hero stats no wrap on very small screens */
@media (max-width: 380px) {
  .hero-stat-sep { margin-right: 12px !important; }
  .hero-stat-item { padding-right: 12px !important; }
  .hero-stat-num { font-size: 1.2rem !important; }
  .hero-stat-lbl { font-size: .58rem !important; }
}

#preloader.done{opacity:0!important;visibility:hidden!important;pointer-events:none!important;display:none!important}

.pl-fill { width: 0%; transition: width 3s linear; }

/* ── Teacher Carousel — auto-infinite scroll ─────────────────── */
.tc-section { background: var(--bg3); }
.tc-track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 18px;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  padding: 8px 0 24px;
  scroll-snap-type: x mandatory;
}
.tc-track::-webkit-scrollbar { display: none; }
.tc-track:active { cursor: grabbing; }
.tc-card {
  flex: 0 0 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
  width: 200px !important;
  background: var(--bg2);
  border-radius: var(--r2);
  border: 2px solid var(--border);
  overflow: hidden;
  scroll-snap-align: start;
  transition: all .3s var(--ease);
  text-align: center;
  box-shadow: var(--sh);
}
.tc-card:hover { border-color: rgba(200,16,46,.35); transform: translateY(-6px); box-shadow: var(--sh3); }
.tc-top { height: 4px; background: linear-gradient(90deg, var(--red), var(--gold)); }
.tc-photo {
  width: 88px !important;
  height: 88px !important;
  min-width: 88px !important;
  min-height: 88px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center top;
  margin: 18px auto 0;
  display: block !important;
  border: 3px solid #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  background: var(--bg3);
  aspect-ratio: 1 / 1 !important;
}
.tc-name { font-family: var(--fd); font-size: .9rem; font-weight: 700; color: var(--ink); padding: 12px 12px 3px; line-height: 1.3; }
.tc-role { font-size: .67rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--red); padding: 0 12px 12px; }
.tc-info { padding: 0 12px 14px; border-top: 1px solid var(--border); padding-top: 10px; }
.tc-info-row { font-size: .73rem; color: var(--ink4); display: flex; align-items: center; gap: 5px; justify-content: center; margin-bottom: 4px; }
.tc-arrow {
  position: absolute; top: 50%; transform: translateY(-60%);
  z-index: 5; width: 40px; height: 40px; border-radius: 50%;
  background: var(--bg2); border: 1.5px solid var(--border);
  color: var(--ink2); font-size: 1.5rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh2); transition: all .25s; line-height: 1; cursor: pointer;
}
.tc-arrow:hover { background: var(--red); border-color: var(--red); color: #fff; }
.tc-arrow.prev { left: 4px; }
.tc-arrow.next { right: 4px; }
@media(max-width: 900px) { .tc-arrow { display: none; } }
@media(max-width: 768px) {
  .tc-photo { width: 88px !important; height: 88px !important; min-width: 88px !important; min-height: 88px !important; border-radius: 50% !important; }
}

/* ── Privacy Protection ──────────────────────────────────────── */

/* Disable image dragging and selection */
img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Disable all text/content selection */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Allow text selection in forms and inputs only */
input, textarea, [contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}

/* Hide site content when printing */
@media print {
  body { display: none !important; }
}

/* Screenshot detection — blur content when window loses focus 
   (works against screen capture tools on some OSes) */
body.bdphs-blurred * {
  filter: blur(8px) !important;
  transition: filter 0.1s;
}

/* Watermark overlay on teacher/gallery images */
.teacher-photo-wrap,
.tc-premium-card,
.fac-card,
.gal-item-btn {
  position: relative;
}
.teacher-photo-wrap::after,
.tc-premium-card::after,
.fac-card::after,
.gal-item-btn::after {
  content: 'BDPHS © bdphs.in';
  position: absolute;
  bottom: 4px;
  right: 4px;
  font-size: .48rem;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
  letter-spacing: .04em;
  pointer-events: none;
  z-index: 10;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
  white-space: nowrap;
}