/* ============================================================
   School website — design system (warm-brown). Per-tenant colours
   come from :root vars injected by the layout.
   ============================================================ */
:root{
  --primary:#6f4f42; --primary-hover:#5a4036; --accent:#c98a3c;
  --primary-light:#f5ece5; --primary-dark:#3d2a20;
  --surface:#fff; --surface-raised:#faf6f0; --surface-warm:#f3ebe1;
  --text:#2c241e; --text-muted:#7b6e62; --text-faint:#aa9e91;
  --border:#e8ded3; --border-dark:#d6c9bb;
  --gold:#c98a3c; --gold-light:#f5e6cf;
  --r:12px; --r-lg:18px; --r-sm:8px;
  --sh-sm:0 1px 3px rgba(60,42,32,.06),0 1px 2px rgba(60,42,32,.04);
  --sh-md:0 6px 20px rgba(90,64,54,.10);
  --sh-lg:0 18px 50px rgba(60,42,32,.16);
  --maxw:1160px; --ease:cubic-bezier(.4,0,.2,1);
}
/* Scale the content width up on larger laptops/desktops so the layout
   fills more of the viewport instead of sitting in a fixed 1160px column
   with wide empty margins. Bounded so line lengths stay readable. */
@media (min-width:1500px){ :root{ --maxw:1340px; } }
@media (min-width:1800px){ :root{ --maxw:1480px; } }
@media (min-width:2200px){ :root{ --maxw:1640px; } }
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ margin:0; font-family:'Inter','Noto Sans Devanagari',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:var(--text); background:var(--surface); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a{ color:var(--primary); text-decoration:none; }
img{ max-width:100%; display:block; }
h1,h2,h3,h4{ letter-spacing:-.02em; line-height:1.15; margin:0 0 .5em; color:var(--text); }
p{ margin:0 0 1em; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.tc{ text-align:center; }

/* section rhythm */
.section{ padding:80px 0; }
.section-sm{ padding:56px 0; }
.section-alt{ background:var(--surface-raised); }
.section-warm{ background:var(--surface-warm); }
.eyebrow{ display:inline-block; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--accent); margin-bottom:14px; }
.section-title{ font-size:clamp(26px,3.4vw,38px); font-weight:800; margin:0 0 14px; }
.section-lead{ font-size:18px; color:var(--text-muted); max-width:640px; margin:0 auto 8px; }
.center-head{ text-align:center; margin-bottom:52px; }
.center-head .section-lead{ margin-inline:auto; }
.center-head .section-title:after{ content:""; display:block; width:58px; height:4px; border-radius:2px; background:linear-gradient(90deg,var(--accent),var(--primary)); margin:18px auto 0; }
.lead{ font-size:18px; color:var(--text-muted); }

/* buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; height:50px; padding:0 26px; border-radius:var(--r); font-weight:600; font-size:15.5px; cursor:pointer; border:2px solid transparent; transition:all .18s var(--ease); white-space:nowrap; }
.btn:hover{ transform:translateY(-2px); }
.btn-lg{ height:56px; padding:0 34px; font-size:16.5px; }
.btn-primary{ background:var(--primary); color:#fff; box-shadow:0 6px 16px rgba(111,79,66,.24); }
.btn-primary:hover{ background:var(--primary-hover); box-shadow:0 10px 24px rgba(111,79,66,.30); }
.btn-accent{ background:var(--accent); color:#fff; box-shadow:0 6px 16px rgba(201,138,60,.28); }
.btn-accent:hover{ background:#b3771f; }
.btn-ghost{ background:transparent; border-color:var(--border-dark); color:var(--text); }
.btn-ghost:hover{ border-color:var(--primary); color:var(--primary); }
.btn-light{ background:#fff; color:var(--primary); }
.btn-light:hover{ background:var(--primary-light); }
.btn-outline-light{ background:transparent; border-color:rgba(255,255,255,.5); color:#fff; }
.btn-outline-light:hover{ background:rgba(255,255,255,.14); border-color:#fff; }

/* ---- top bar + header ---- */
.topbar{ background:var(--primary-dark); color:#e9ddd2; font-size:13px; }
.topbar-inner{ display:flex; align-items:center; gap:22px; height:40px; flex-wrap:wrap; }
.topbar a{ color:#e9ddd2; display:inline-flex; align-items:center; gap:6px; }
.topbar a:hover{ color:#fff; }
.topbar-spacer{ margin-left:auto; }
.topbar .sep{ opacity:.4; }
.site-header{ position:sticky; top:0; z-index:60; background:rgba(255,255,255,.94); backdrop-filter:saturate(1.5) blur(10px); border-bottom:1px solid var(--border); transition:box-shadow .2s ease; }
.site-header.scrolled{ box-shadow:var(--sh-md); }
.header-inner{ display:flex; align-items:center; gap:18px; height:78px; }
.brand{ display:flex; align-items:center; gap:13px; min-width:0; flex-shrink:1; }
.brand-logo{ height:52px; width:auto; border-radius:9px; flex-shrink:0; }
.brand-text{ display:flex; flex-direction:column; min-width:0; }
/* Single-line, ellipsis-clipped brand so a long school name never wraps or
   overflows the fixed-height header; font scales down on smaller screens. */
.brand-name{ font-size:clamp(15px,1.4vw,19px); font-weight:800; color:var(--text); line-height:1.15; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand-tag{ font-size:clamp(10.5px,.9vw,11.5px); color:var(--text-muted); font-weight:500; max-width:min(280px,30vw); line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav{ margin-left:auto; display:flex; align-items:center; gap:2px; }
.nav-link{ padding:10px 15px; border-radius:8px; color:var(--text-muted); font-weight:600; font-size:14.5px; white-space:nowrap; transition:all .15s ease; }
.nav-link:hover{ color:var(--primary); background:var(--primary-light); }
.nav-link.active{ color:var(--primary); }
.nav-cta{ margin-left:10px; padding:11px 20px; border-radius:999px; background:var(--primary); color:#fff !important; font-weight:600; font-size:14px; white-space:nowrap; flex-shrink:0; box-shadow:0 4px 12px rgba(111,79,66,.24); transition:all .18s ease; }
.nav-cta:hover{ background:var(--primary-hover); transform:translateY(-1px); }
/* nav dropdown (e.g. Results → Result / Alumni) */
.nav-group{ position:relative; display:flex; align-items:center; }
.nav-parent{ display:inline-flex; align-items:center; gap:5px; background:none; border:none; cursor:pointer; font-family:inherit; }
.nav-group.active .nav-parent, .nav-group:hover .nav-parent{ color:var(--primary); }
.nav-caret{ opacity:.65; transition:transform .2s var(--ease); }
.nav-group:hover .nav-caret, .nav-group.open .nav-caret{ transform:rotate(180deg); }
.nav-dropdown{ position:absolute; top:calc(100% + 8px); left:0; min-width:184px; display:none; flex-direction:column; gap:2px; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:var(--sh-md); padding:8px; z-index:70; }
.nav-group:hover .nav-dropdown, .nav-group.open .nav-dropdown{ display:flex; }
.nav-dropdown:before{ content:""; position:absolute; top:-8px; left:0; right:0; height:8px; }
.nav-drop-link{ padding:9px 13px; border-radius:8px; color:var(--text-muted); font-weight:600; font-size:14px; white-space:nowrap; transition:background .15s ease, color .15s ease; }
.nav-drop-link:hover{ background:var(--primary-light); color:var(--primary); }
.nav-drop-link.active{ background:var(--primary-light); color:var(--primary); }
.nav-toggle{ display:none; margin-left:auto; background:none; border:none; color:var(--text); cursor:pointer; padding:6px; }

/* ---- hero ---- */
.hero{ position:relative; color:#fff; overflow:hidden; background:radial-gradient(130% 120% at 14% 4%,#8a6656 0%,#6f4f42 38%,#412c21 100%); }
.hero-pattern{ position:absolute; inset:0; opacity:.4; background-image:radial-gradient(rgba(255,255,255,.16) 1.4px,transparent 1.7px); background-size:26px 26px; }
.hero-glow{ position:absolute; width:640px; height:640px; right:-160px; top:-240px; border-radius:50%; background:radial-gradient(circle,rgba(201,138,60,.45),transparent 62%); }
.hero-glow.two{ right:auto; top:auto; left:-240px; bottom:-340px; width:580px; height:580px; background:radial-gradient(circle,rgba(255,255,255,.10),transparent 60%); }
.hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center right; z-index:0; }
/* solid brand colour on the left, fading over the photo toward the right */
.hero-overlay{ position:absolute; inset:0; z-index:1; background:
  linear-gradient(90deg, #3a281e 0%, #43301f 22%, rgba(58,40,30,.92) 40%, rgba(58,40,30,.55) 58%, rgba(58,40,30,.12) 80%, rgba(58,40,30,0) 100%),
  linear-gradient(0deg, rgba(40,28,20,.35) 0%, rgba(40,28,20,0) 40%); }
.hero-inner{ position:relative; z-index:2; padding:84px 24px 88px; max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:48px; }
.hero-text{ flex:0 1 580px; max-width:580px; }
.hero-grid{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
.hero-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; background:rgba(255,255,255,.12); padding:9px 17px; border-radius:999px; margin-bottom:22px; border:1px solid rgba(255,255,255,.2); }
.hero-eyebrow .dot{ width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(201,138,60,.3); }
.hero-kicker{ display:inline-block; font-size:clamp(16px,1.6vw,20px); font-weight:800; letter-spacing:.05em; color:var(--gold-light); text-transform:uppercase; margin:0 0 14px; padding-bottom:7px; position:relative; text-shadow:0 1px 14px rgba(201,138,60,.45); }
.hero-kicker:after{ content:""; position:absolute; left:0; bottom:0; width:46px; height:3px; border-radius:2px; background:linear-gradient(90deg,var(--gold),transparent); }
.hero-title{ color:#fff; font-size:clamp(34px,4.4vw,54px); font-weight:800; margin:0 0 18px; line-height:1.07; letter-spacing:-.025em; }
.hero-title .u{ position:relative; white-space:nowrap; }
.hero-title .u:after{ content:""; position:absolute; left:-2px; right:-2px; bottom:.1em; height:.32em; background:rgba(201,138,60,.45); z-index:-1; border-radius:4px; }
.hero-sub{ font-size:clamp(16px,1.35vw,18.5px); opacity:.9; margin:0 0 30px; max-width:520px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
/* hero quick-feature tiles */
.hero-features{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:2px 0 26px; max-width:470px; }
.hero-feature{ text-align:center; }
.hero-feature .fi{ width:48px; height:48px; margin:0 auto 8px; border-radius:13px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); color:var(--gold-light); display:flex; align-items:center; justify-content:center; }
.hero-feature .fl{ font-size:11.5px; color:rgba(255,255,255,.88); line-height:1.25; font-weight:500; }
/* hero media: photo + overlapping admissions card */
.hero-media{ position:relative; }
.hero-photo{ border-radius:22px; aspect-ratio:1/1; box-shadow:0 34px 70px rgba(28,18,12,.45); border:1px solid rgba(255,255,255,.14); }
.hero-adm-card{ position:relative; z-index:2; flex:0 0 288px; align-self:center; background:linear-gradient(160deg,var(--primary),var(--primary-dark)); border:1px solid rgba(255,255,255,.18); border-radius:18px; padding:26px 24px; box-shadow:0 26px 54px rgba(20,12,8,.5); }
.hero-adm-card .ac-ic{ width:38px; height:38px; border-radius:10px; background:rgba(201,138,60,.22); color:var(--gold-light); display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.hero-adm-card h3{ color:#fff; font-size:15px; letter-spacing:.02em; margin:0; text-transform:uppercase; }
.hero-adm-card .yr{ color:var(--gold); font-size:22px; font-weight:800; margin:2px 0 12px; }
.hero-adm-list{ list-style:none; margin:0 0 14px; padding:0; }
.hero-adm-list li{ color:#e9ddd2; font-size:12.5px; padding:5px 0 5px 22px; position:relative; }
.hero-adm-list li:before{ content:""; position:absolute; left:2px; top:8px; width:11px; height:6px; border-left:2px solid var(--gold); border-bottom:2px solid var(--gold); transform:rotate(-45deg); }
.hero-adm-card .btn{ width:100%; height:42px; }
/* floating admissions CTA bar (relocated out of the hero so it no longer
   overlaps the hero photo) — a horizontal card on the page below the hero */
.adm-float-wrap{ position:relative; z-index:5; margin-top:26px; margin-bottom:4px; }
.adm-float{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-lg); padding:20px 28px; box-shadow:var(--sh-lg); color:#fff; }
.adm-float-lead{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.adm-float .af-ic{ width:48px; height:48px; border-radius:13px; background:rgba(201,138,60,.24); color:var(--gold-light); display:flex; align-items:center; justify-content:center; }
.adm-float .af-k{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--gold-light); }
.adm-float .af-yr{ font-size:25px; font-weight:800; color:#fff; line-height:1.05; }
.adm-float-feats{ display:flex; flex-wrap:wrap; gap:10px 22px; flex:1; min-width:200px; }
.adm-float-feats span{ position:relative; padding-left:22px; font-size:13.5px; color:#e9ddd2; }
.adm-float-feats span:before{ content:""; position:absolute; left:2px; top:6px; width:11px; height:6px; border-left:2px solid var(--gold); border-bottom:2px solid var(--gold); transform:rotate(-45deg); }
.adm-float .btn{ flex-shrink:0; }
@media (max-width:820px){
  .adm-float{ flex-direction:column; align-items:flex-start; gap:16px; padding:22px; }
  .adm-float .btn{ width:100%; }
}
/* facts strip */
.hero-strip{ position:relative; z-index:2; background:rgba(0,0,0,.18); border-top:1px solid rgba(255,255,255,.12); }
.hero-strip-inner{ max-width:var(--maxw); margin:0 auto; padding:0 24px; display:grid; grid-template-columns:repeat(4,1fr); }
.hero-fact{ padding:22px 18px; color:#fff; border-left:1px solid rgba(255,255,255,.1); display:flex; align-items:center; gap:14px; }
.hero-fact:first-child{ border-left:none; }
.hero-fact .fi{ width:40px; height:40px; border-radius:11px; background:rgba(201,138,60,.22); color:var(--gold-light); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hero-fact .n{ font-size:23px; font-weight:800; line-height:1.05; }
.hero-fact .l{ font-size:11.5px; opacity:.82; text-transform:uppercase; letter-spacing:.05em; }

/* ---- generic cards grid ---- */
.grid-3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; }
.grid-2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:28px; align-items:center; }
.card{ position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:30px; box-shadow:var(--sh-sm); transition:transform .2s var(--ease),box-shadow .2s var(--ease); overflow:hidden; }
.card:before{ content:""; position:absolute; left:0; top:0; height:100%; width:4px; background:linear-gradient(var(--accent),var(--primary)); transform:scaleY(0); transform-origin:top; transition:transform .25s var(--ease); }
.card:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); }
.card:hover:before{ transform:scaleY(1); }
.card-ic{ width:56px; height:56px; border-radius:15px; background:linear-gradient(135deg,var(--gold-light),var(--primary-light)); color:var(--accent); display:flex; align-items:center; justify-content:center; margin-bottom:18px; box-shadow:inset 0 0 0 1px var(--border); }
.card-title{ font-size:20px; font-weight:700; margin-bottom:8px; }
.card-text{ color:var(--text-muted); font-size:15px; margin:0; }

/* ---- about / split ---- */
.split-img{ position:relative; }
.split-inner{ position:relative; border-radius:var(--r-lg); min-height:370px; overflow:hidden; box-shadow:var(--sh-lg); background:linear-gradient(150deg,#b3771f 0%,var(--primary) 65%,var(--primary-dark) 100%); display:flex; align-items:center; justify-content:center; }
.split-inner:before{ content:""; position:absolute; inset:0; background:radial-gradient(rgba(255,255,255,.14) 1.3px,transparent 1.6px); background-size:22px 22px; opacity:.55; }
.split-inner:after{ content:""; position:absolute; right:-50px; top:-50px; width:200px; height:200px; border-radius:50%; background:rgba(255,255,255,.08); }
.split-inner img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; z-index:3; }
.split-inner .wm{ position:relative; z-index:2; color:rgba(255,255,255,.5); }
.split-inner .wm svg{ width:118px; height:118px; }
.about-badge{ position:absolute; bottom:-22px; right:-18px; z-index:4; background:#fff; border-radius:var(--r); box-shadow:var(--sh-lg); padding:16px 22px; text-align:center; border:1px solid var(--border); }
.about-badge .n{ font-size:30px; font-weight:800; color:var(--primary); line-height:1; }
.about-badge .l{ font-size:12px; color:var(--text-muted); }

/* ---- stats band ---- */
.stats-band{ position:relative; overflow:hidden; background:radial-gradient(120% 140% at 12% 0%,#7a5849,var(--primary-dark)); color:#fff; }
.stats-band:before{ content:""; position:absolute; inset:0; background:radial-gradient(rgba(255,255,255,.07) 1.2px,transparent 1.5px); background-size:26px 26px; }
.stats-band:after{ content:""; position:absolute; right:-110px; top:-110px; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle,rgba(201,138,60,.32),transparent 62%); }
.stats-band .wrap{ position:relative; z-index:1; }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; }
.stats-grid > div{ position:relative; }
.stats-grid > div:not(:last-child):after{ content:""; position:absolute; right:-10px; top:15%; height:70%; width:1px; background:rgba(255,255,255,.12); }
.stat-n{ font-size:clamp(32px,4vw,46px); font-weight:800; line-height:1; }
.stat-n .accent{ color:var(--gold); }
.stat-l{ font-size:14px; opacity:.85; margin-top:8px; }

/* ---- programs / levels ---- */
.prog{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-sm); transition:transform .2s var(--ease),box-shadow .2s var(--ease); }
.prog:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); }
.prog-top{ height:8px; background:linear-gradient(90deg,var(--accent),var(--primary)); }
.prog-body{ padding:26px 28px; }
.prog-k{ display:inline-block; background:var(--primary-light); color:var(--primary); padding:5px 12px; border-radius:999px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.prog h3{ font-size:21px; margin:8px 0 10px; }
.prog p{ color:var(--text-muted); font-size:14.5px; margin:0; }
.prog-list{ list-style:none; padding:0; margin:14px 0 0; }
.prog-list li{ font-size:14px; color:var(--text-muted); padding:6px 0 6px 26px; position:relative; }
.prog-list li:before{ content:""; position:absolute; left:0; top:12px; width:14px; height:8px; border-left:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(-45deg); }

/* ---- principal message ---- */
.principal{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:40px; align-items:center; }
.principal-photo{ position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-lg); background:linear-gradient(160deg,#856152,var(--primary-dark)); aspect-ratio:4/5; display:flex; align-items:center; justify-content:center; }
.principal-photo:before{ content:""; position:absolute; inset:0; background:radial-gradient(rgba(255,255,255,.1) 1.3px,transparent 1.6px); background-size:22px 22px; opacity:.5; }
.principal-photo:after{ content:""; position:absolute; left:-40px; bottom:-40px; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle,rgba(201,138,60,.4),transparent 62%); }
.principal-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; }
.principal-photo .ph{ position:relative; z-index:1; width:128px; height:128px; border-radius:50%; background:rgba(255,255,255,.14); border:2px solid rgba(255,255,255,.32); display:flex; align-items:center; justify-content:center; font-size:52px; color:#fff; font-weight:800; }
.quote-mark{ font-size:60px; line-height:.6; color:var(--gold); font-family:Georgia,serif; }
.principal blockquote{ margin:0; font-size:19px; line-height:1.6; color:var(--text); font-weight:500; }
.principal .who{ margin-top:20px; }
.principal .who .nm{ font-weight:800; font-size:16px; }
.principal .who .rl{ color:var(--text-muted); font-size:14px; }

/* ---- testimonials ---- */
.tcard{ position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:30px 28px; box-shadow:var(--sh-sm); transition:transform .2s var(--ease),box-shadow .2s var(--ease); }
.tcard:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); }
.tcard:before{ content:"\201C"; position:absolute; top:2px; right:22px; font-family:Georgia,'Times New Roman',serif; font-size:96px; line-height:1; color:var(--primary-light); z-index:0; pointer-events:none; }
.tcard > *{ position:relative; z-index:1; }
.tcard p{ font-size:15.5px; color:var(--text); font-style:italic; }
.tcard .who{ display:flex; align-items:center; gap:12px; margin-top:16px; }
.avatar{ width:46px; height:46px; border-radius:50%; background:var(--primary-light); color:var(--primary); display:flex; align-items:center; justify-content:center; font-weight:800; }
.tcard .nm{ font-weight:700; font-size:14.5px; } .tcard .rl{ font-size:13px; color:var(--text-muted); }
.stars{ color:var(--gold); letter-spacing:2px; margin-bottom:10px; }

/* ---- process steps ---- */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:24px; counter-reset:step; }
.step{ position:relative; padding-top:8px; }
.step-n{ width:48px; height:48px; border-radius:50%; background:var(--primary); color:#fff; font-weight:800; font-size:19px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; box-shadow:0 6px 14px rgba(111,79,66,.24); }
.step h3{ font-size:18px; margin-bottom:6px; }
.step p{ color:var(--text-muted); font-size:14px; margin:0; }

/* ---- FAQ ---- */
.faq{ max-width:800px; margin:0 auto; }
.faq-item{ border:1px solid var(--border); border-radius:var(--r); margin-bottom:12px; background:var(--surface); overflow:hidden; }
.faq-q{ display:flex; justify-content:space-between; align-items:center; gap:14px; padding:18px 22px; cursor:pointer; font-weight:600; font-size:16px; }
.faq-q .ico{ flex-shrink:0; transition:transform .2s ease; color:var(--accent); }
.faq-item.open .faq-q .ico{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.faq-a-inner{ padding:0 22px 20px; color:var(--text-muted); font-size:15px; }
.faq-item.open .faq-a{ max-height:320px; }

/* ---- news ---- */
.news-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; }
.news-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-sm); transition:transform .2s var(--ease),box-shadow .2s var(--ease); border-top:4px solid var(--accent); }
.news-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); }
.news-card .body{ padding:24px 26px; }
.news-date{ font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--accent); margin-bottom:8px; }
.news-title{ font-size:19px; font-weight:700; margin:0 0 8px; }
.news-body{ color:var(--text-muted); margin:0; font-size:14.5px; }
.news-list{ display:flex; flex-direction:column; gap:16px; max-width:840px; margin:0 auto; }
.news-item{ background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:var(--r-lg); padding:24px 28px; box-shadow:var(--sh-sm); }
.news-item .news-title{ font-size:21px; }

/* ---- news & events redesign (media cards + category tags + filter chips) ---- */
/* additive only — reuses the .news-cards/.news-card base above; adds a media
   area, on-palette category tags, an excerpt clamp, a date row and filter chips */
.news-card__media{ position:relative; height:190px; overflow:hidden; background:var(--surface-warm); }
.news-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease); }
.news-card:hover .news-card__media img{ transform:scale(1.06); }
.news-card__media .ph{ width:100%; height:100%; }
.news-tag{ position:absolute; left:12px; bottom:12px; z-index:2; display:inline-block; padding:4px 12px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:var(--primary); box-shadow:var(--sh-sm); }
.news-tag--news{ background:var(--primary); }
.news-tag--school_news{ background:#6f4f42; }
.news-tag--achievements{ background:var(--accent); }
.news-tag--announcements{ background:#8a7a3f; }
.news-tag--competitions{ background:#b5651d; }
.news-tag--admissions{ background:#a15c4a; }
.news-excerpt{ color:var(--text-muted); font-size:14px; line-height:1.55; margin:0 0 14px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.news-meta{ display:flex; align-items:center; gap:6px; color:var(--text-faint); font-size:12.5px; font-weight:600; border-top:1px solid var(--border); padding-top:12px; }
.news-meta svg{ color:var(--accent); flex:0 0 auto; }
.news-filter{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:0 0 36px; }
.news-chip{ display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border-radius:999px; border:1px solid var(--border-dark); background:var(--surface); color:var(--text-muted); font-size:13.5px; font-weight:700; font-family:inherit; cursor:pointer; transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease); }
.news-chip:hover{ border-color:var(--primary); color:var(--primary); }
.news-chip.on{ background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:var(--sh-sm); }

/* ---- gallery ---- */
.gallery-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px; }
.gallery-item{ margin:0; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--border); background:var(--surface-raised); box-shadow:var(--sh-sm); cursor:pointer; position:relative; }
.gallery-item img{ width:100%; height:220px; object-fit:cover; transition:transform .4s var(--ease); }
.gallery-item:hover img{ transform:scale(1.07); }
.gallery-item figcaption{ position:absolute; left:0; right:0; bottom:0; padding:26px 16px 12px; font-size:14px; color:#fff; background:linear-gradient(transparent,rgba(44,36,30,.8)); }
.gallery-preview{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.gp-tile{ border-radius:var(--r); overflow:hidden; aspect-ratio:1; box-shadow:var(--sh-sm); }
.gp-tile img{ width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease); }
.gp-tile:hover img{ transform:scale(1.08); }
/* lightbox */
.lightbox{ position:fixed; inset:0; background:rgba(30,22,16,.92); display:none; align-items:center; justify-content:center; z-index:200; padding:30px; }
.lightbox.open{ display:flex; }
.lightbox img{ max-width:92vw; max-height:88vh; border-radius:10px; box-shadow:var(--sh-lg); }
.lightbox-close{ position:absolute; top:22px; right:28px; color:#fff; font-size:34px; cursor:pointer; line-height:1; z-index:3; }
.lightbox-nav{ position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; border:none; cursor:pointer; background:rgba(255,255,255,.14); color:#fff; display:flex; align-items:center; justify-content:center; z-index:2; transition:background .18s ease; }
.lightbox-nav:hover{ background:rgba(255,255,255,.28); }
.lightbox-prev{ left:20px; }
.lightbox-next{ right:20px; }
@media (max-width:560px){ .lightbox-nav{ width:44px; height:44px; } .lightbox-prev{ left:8px; } .lightbox-next{ right:8px; } }

/* ---- carousel (Result Slides) ---- */
.carousel{ position:relative; max-width:940px; margin:0 auto; outline:none; }
.carousel-viewport{ overflow:hidden; border-radius:var(--r-lg); box-shadow:var(--sh-md); border:1px solid var(--border); }
.carousel-track{ display:flex; will-change:transform; transition:transform .5s var(--ease); }
.carousel-slide{ position:relative; flex:0 0 100%; min-width:0; }
.carousel-slide img{ display:block; width:100%; height:clamp(300px,52vw,560px); object-fit:contain; background:linear-gradient(160deg,#3d2a20,#241812); }
.carousel-cap{ position:absolute; left:0; right:0; bottom:0; padding:36px 20px 16px; background:linear-gradient(transparent,rgba(28,20,15,.82)); color:#fff; font-weight:600; font-size:14.5px; text-align:center; }
.carousel-btn{ position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; border:none; cursor:pointer; background:rgba(255,255,255,.92); color:var(--primary); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-md); z-index:3; transition:background .18s ease, transform .18s ease; }
.carousel-btn:hover{ background:#fff; transform:translateY(-50%) scale(1.07); }
.carousel-btn.prev{ left:14px; } .carousel-btn.next{ right:14px; }
.carousel-dots{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:18px; }
.carousel-dot{ width:9px; height:9px; padding:0; border:none; border-radius:50%; cursor:pointer; background:var(--border-dark); transition:background .18s ease, transform .18s ease; }
.carousel-dot:hover{ background:var(--text-muted); }
.carousel-dot.active{ background:var(--primary); transform:scale(1.3); }
@media (max-width:560px){ .carousel-btn{ width:38px; height:38px; } .carousel-btn.prev{ left:8px; } .carousel-btn.next{ right:8px; } }

/* ---- CTA band ---- */
.cta-band{ position:relative; background:radial-gradient(rgba(255,255,255,.1) 1.2px,transparent 1.5px) 0 0/22px 22px, linear-gradient(135deg,var(--accent),#a86a1c); color:#fff; overflow:hidden; }
.cta-band:after{ content:""; position:absolute; left:-80px; top:-80px; width:300px; height:300px; border-radius:50%; background:rgba(255,255,255,.1); }
.cta-band:before{ content:""; position:absolute; right:-90px; bottom:-120px; width:320px; height:320px; border-radius:50%; background:rgba(255,255,255,.06); }
.cta-inner{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:28px; padding:56px 24px; flex-wrap:wrap; max-width:var(--maxw); margin:0 auto; }
.cta-inner h2{ margin:0 0 6px; font-size:clamp(24px,3vw,32px); color:#fff; }
.cta-inner p{ margin:0; opacity:.92; font-size:17px; }

/* ---- page head ---- */
.page-head{ position:relative; background:radial-gradient(rgba(255,255,255,.07) 1.2px,transparent 1.5px) 0 0/24px 24px, radial-gradient(130% 130% at 12% 0%,#856152,#412c21); color:#fff; padding:70px 0 62px; overflow:hidden; }
.page-head:before{ content:""; position:absolute; width:520px; height:520px; right:-140px; top:-220px; border-radius:50%; background:radial-gradient(circle,rgba(201,138,60,.4),transparent 62%); }
.page-head .wrap{ position:relative; z-index:2; }
.page-head h1{ font-size:clamp(30px,4.4vw,44px); font-weight:800; margin:0; color:#fff; }
.page-head p{ color:rgba(255,255,255,.85); margin:10px 0 0; font-size:18px; max-width:640px; }
.crumbs{ font-size:13px; color:rgba(255,255,255,.7); margin-bottom:12px; }
.crumbs a{ color:rgba(255,255,255,.9); }

/* ---- values / list rows ---- */
.value-row{ display:flex; gap:16px; align-items:flex-start; padding:20px 0; border-top:1px solid var(--border); }
.value-row:first-child{ border-top:none; }
.value-ic{ width:46px; height:46px; flex-shrink:0; border-radius:12px; background:var(--primary-light); color:var(--accent); display:flex; align-items:center; justify-content:center; }
.value-row h3{ font-size:18px; margin:2px 0 4px; }
.value-row p{ color:var(--text-muted); font-size:15px; margin:0; }
.prose p{ max-width:760px; }

/* ---- forms (admissions) ---- */
.form-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-md); padding:34px; max-width:920px; margin:0 auto; }
.form-intro{ color:var(--text-muted); margin-bottom:24px; }
.adm-form fieldset{ border:1px solid var(--border); border-radius:var(--r); padding:22px 24px 26px; margin:0 0 22px; }
.adm-form legend{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--primary); padding:0 8px; }
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
/* Block layout: label text + required "*" flow inline on one line, the
   control sits on its own line below — so every input starts at the same
   offset and the boxes line up across each row. */
.grid > .fld{ align-self:start; }
.fld{ display:block; font-size:13px; font-weight:600; color:var(--text-muted); }
.fld-wide{ grid-column:1/-1; }
.fld input,.fld select{ display:block; width:100%; margin-top:7px; height:46px; padding:0 13px; border:1.5px solid var(--border); border-radius:var(--r-sm); font-size:15px; font-family:inherit; color:var(--text); background:#fff; font-weight:500; transition:border-color .15s,box-shadow .15s; box-sizing:border-box; }
.fld input:focus,.fld select:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(111,79,66,.14); }
.fld input[type=file]{ padding:10px 13px; height:auto; }
.req{ color:#c0392b; }
.field-err{ color:#c0392b; font-size:12px; font-weight:600; }
.form-actions{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.form-note{ font-size:12.5px; color:var(--text-faint); }
.alert{ padding:15px 18px; border-radius:var(--r-sm); font-size:14.5px; margin-bottom:20px; }
.alert-err{ background:#fde8e6; color:#c0392b; border:1px solid #f2c4bf; }
.alert-info{ background:var(--primary-light); color:var(--primary); border:1px solid var(--border-dark); }

/* ---- thank you ---- */
.thankyou{ max-width:580px; text-align:center; margin:0 auto; }
.thankyou-ic{ width:84px; height:84px; margin:0 auto 20px; border-radius:50%; background:#e7f8ee; color:#1a7a42; display:flex; align-items:center; justify-content:center; }
.ref-box{ background:var(--surface-raised); border:1px dashed var(--border-dark); border-radius:var(--r); padding:18px; margin:22px 0; font-size:15px; color:var(--text-muted); }
.ref-box strong{ font-size:24px; color:var(--primary); font-family:ui-monospace,monospace; letter-spacing:.05em; display:block; margin-top:6px; }
.muted{ color:var(--text-faint); font-size:14px; }

/* ---- contact ---- */
.contact-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:28px; }
.contact-cards{ display:flex; flex-direction:column; gap:16px; }
.contact-card{ display:flex; gap:16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:22px 24px; box-shadow:var(--sh-sm); }
.contact-card .ic{ width:48px; height:48px; flex-shrink:0; border-radius:12px; background:var(--primary-light); color:var(--accent); display:flex; align-items:center; justify-content:center; }
.contact-card .k{ font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); font-weight:700; }
.contact-card .v{ font-size:16px; font-weight:600; color:var(--text); }
.contact-map{ min-height:380px; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--border); box-shadow:var(--sh-sm); }

/* ---- footer ---- */
.site-footer{ background:var(--primary-dark); color:#d9cfc4; margin-top:0; }
.footer-inner{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:36px; padding:60px 24px 44px; max-width:var(--maxw); margin:0 auto; }
.footer-brand{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.footer-brand img{ height:46px; border-radius:8px; }
.footer-name{ font-size:18px; font-weight:800; color:#fff; }
.footer-about{ font-size:14px; opacity:.8; line-height:1.7; }
.footer-h{ font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--gold); margin-bottom:14px; }
.footer-link{ display:block; color:#d9cfc4; font-size:14px; margin:9px 0; transition:color .15s; }
.footer-link:hover{ color:#fff; padding-left:4px; }
.footer-line{ margin:8px 0; font-size:14px; opacity:.85; display:flex; gap:9px; }
.footer-cta{ display:inline-flex; margin-top:10px; background:var(--accent); color:#fff !important; padding:11px 20px; border-radius:8px; font-weight:600; font-size:14px; }
.footer-app{ display:inline-flex; align-items:center; gap:8px; margin-top:10px; background:rgba(255,255,255,.08); color:#fff !important; padding:10px 18px; border-radius:8px; font-weight:600; font-size:14px; border:1px solid rgba(255,255,255,.18); transition:background .18s ease,border-color .18s ease; }
.footer-app:hover{ background:var(--primary); border-color:var(--primary); }
.footer-bar{ border-top:1px solid rgba(255,255,255,.1); }
.footer-bar .wrap{ padding:18px 24px; font-size:13px; opacity:.7; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }

/* ---- on-theme photo placeholder ---- */
.ph{ position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; background:linear-gradient(145deg,#b3771f 0%,var(--primary) 62%,var(--primary-dark) 100%); color:rgba(255,255,255,.55); }
.ph:before{ content:""; position:absolute; inset:0; background:radial-gradient(rgba(255,255,255,.13) 1.3px,transparent 1.6px); background-size:20px 20px; opacity:.5; }
.ph > svg{ width:38%; max-width:104px; height:auto; position:relative; z-index:1; }
.ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; }
.ph-cap{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:26px 14px 12px; background:linear-gradient(transparent,rgba(44,36,30,.82)); color:#fff; font-size:13.5px; font-weight:600; }

/* ---- updates ticker ---- */
.updates{ background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.updates-inner{ max-width:var(--maxw); margin:0 auto; padding:0 24px; display:flex; align-items:center; gap:18px; height:52px; }
.updates-tag{ display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:#fff; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:7px 14px; border-radius:8px; flex-shrink:0; }
.updates-tag .pulse{ width:8px; height:8px; border-radius:50%; background:#fff; }
.updates-track{ flex:1; overflow:hidden; white-space:nowrap; }
.updates-list{ display:inline-flex; gap:36px; animation:ticker 26s linear infinite; }
.updates:hover .updates-list{ animation-play-state:paused; }
.updates-list a{ font-size:14px; color:var(--text-muted); display:inline-flex; align-items:center; gap:10px; }
.updates-list a:before{ content:"›"; color:var(--accent); font-weight:800; }
.updates-list a:hover{ color:var(--primary); }
@keyframes ticker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---- why-choose icon tiles ---- */
.why-tiles{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.why-tile{ text-align:center; padding:22px 12px; border-radius:var(--r); border:1px solid var(--border); background:var(--surface); transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s; }
.why-tile:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); border-color:var(--border-dark); }
.why-tile .ti{ width:56px; height:56px; margin:0 auto 12px; border-radius:16px; background:linear-gradient(135deg,var(--gold-light),var(--primary-light)); color:var(--accent); display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 0 1px var(--border); }
.why-tile .tl{ font-size:13px; font-weight:600; color:var(--text); line-height:1.3; }

/* ---- principal + stats combo ---- */
.pstats{ display:grid; grid-template-columns:1fr 1.15fr; gap:28px; align-items:stretch; }
.pcard{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-sm); overflow:hidden; display:flex; flex-direction:column; }
.pcard-photo{ aspect-ratio:16/10; }
.pcard-body{ padding:26px 28px; }
.pcard-body .qm{ font-family:Georgia,serif; font-size:44px; line-height:.5; color:var(--gold); }
.pcard-body p{ font-size:15px; color:var(--text-muted); margin:10px 0 16px; }
.pcard-who .nm{ font-weight:800; } .pcard-who .rl{ font-size:13px; color:var(--text-muted); }
.stats-panel{ position:relative; overflow:hidden; display:flex; align-items:center; border-radius:var(--r-lg); padding:40px 30px; background:radial-gradient(120% 130% at 12% 0%,#7a5849,var(--primary-dark)); color:#fff; box-shadow:var(--sh-md); }
.stats-panel:before{ content:""; position:absolute; inset:0; background:radial-gradient(rgba(255,255,255,.07) 1.2px,transparent 1.5px); background-size:24px 24px; }
.stats-panel .sp-grid{ position:relative; z-index:1; width:100%; display:grid; grid-template-columns:repeat(4,1fr); gap:34px 14px; }
.spitem{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.spitem .si{ width:44px; height:44px; border-radius:12px; background:rgba(201,138,60,.22); color:var(--gold-light); display:flex; align-items:center; justify-content:center; margin:0 0 11px; }
.spitem .sn{ font-size:27px; font-weight:800; line-height:1.05; white-space:nowrap; }
.spitem .sn .accent{ color:var(--gold); }
.spitem .sl{ font-size:11.5px; opacity:.82; margin-top:5px; line-height:1.3; }

/* ---- toppers ---- */
.toppers{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.topper{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-sm); overflow:hidden; text-align:center; transition:transform .18s var(--ease),box-shadow .18s var(--ease); }
.topper:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); }
.topper-photo{ aspect-ratio:1/1; position:relative; }
.topper-pct{ position:absolute; bottom:10px; left:50%; transform:translateX(-50%); z-index:4; background:var(--accent); color:#fff; font-weight:800; font-size:15px; padding:5px 16px; border-radius:999px; box-shadow:0 8px 18px rgba(201,138,60,.4); }
.topper-body{ padding:18px 14px; }
.topper-body .nm{ font-weight:700; font-size:16px; } .topper-body .st{ font-size:13px; color:var(--accent); font-weight:600; }

/* ---- alumni ---- */
.alumni-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.alumni-card{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-sm); overflow:hidden; transition:transform .18s var(--ease),box-shadow .18s var(--ease); }
.alumni-card:hover{ transform:translateY(-5px); box-shadow:var(--sh-lg); }
.alumni-photo{ aspect-ratio:4/5; position:relative; }
.alumni-photo:after{ content:""; position:absolute; inset:0; z-index:3; background:linear-gradient(transparent 62%,rgba(44,36,30,.34)); pointer-events:none; }
.alumni-year{ position:absolute; top:12px; right:12px; z-index:4; background:var(--primary); color:#fff; font-weight:700; font-size:12.5px; letter-spacing:.02em; padding:5px 12px; border-radius:999px; box-shadow:0 6px 16px rgba(60,42,32,.3); }
.alumni-body{ padding:20px 16px 22px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:5px; flex:1; }
.alumni-nm{ font-weight:800; font-size:17.5px; letter-spacing:-.01em; line-height:1.2; }
.alumni-fn{ font-size:12.5px; color:var(--text-muted); font-weight:500; }
.alumni-ach{ margin-top:9px; display:inline-flex; align-items:center; gap:7px; background:linear-gradient(135deg,var(--gold-light),var(--primary-light)); color:var(--primary); font-weight:700; font-size:13px; line-height:1.25; text-align:left; padding:8px 15px; border-radius:12px; box-shadow:inset 0 0 0 1px var(--border); }
.alumni-ach-ic{ color:var(--accent); flex-shrink:0; display:flex; }

/* ---- events ---- */
.events-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:start; }
.event-list{ display:flex; flex-direction:column; gap:12px; }
.event{ display:flex; gap:16px; align-items:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:14px 16px; box-shadow:var(--sh-sm); transition:border-color .18s,transform .18s var(--ease); }
.event:hover{ transform:translateX(3px); border-color:var(--border-dark); }
.event-date{ flex-shrink:0; width:58px; text-align:center; background:var(--primary-light); border-radius:10px; padding:8px 4px; }
.event-date .d{ font-size:20px; font-weight:800; color:var(--primary); line-height:1; } .event-date .m{ font-size:11px; font-weight:700; text-transform:uppercase; color:var(--accent); }
.event-info .et{ font-weight:700; font-size:15px; } .event-info .ew{ font-size:12.5px; color:var(--text-muted); }
.event-feature{ position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:340px; box-shadow:var(--sh-md); }
.event-feature .ph{ position:absolute; inset:0; }
.event-feature .ef-body{ position:absolute; left:0; right:0; bottom:0; z-index:4; padding:28px 26px; background:linear-gradient(transparent,rgba(44,36,30,.9)); color:#fff; }
.event-feature .ef-body h3{ color:#fff; margin:0 0 6px; font-size:22px; }
.event-feature .ef-body p{ margin:0 0 14px; font-size:14px; opacity:.9; }

/* ---- campus life grid ---- */
.campus-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.campus-tile{ position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:4/3; box-shadow:var(--sh-sm); }
.campus-tile .ph{ position:absolute; inset:0; }
.campus-tile img{ transition:transform .4s var(--ease); }
.campus-tile:hover img{ transform:scale(1.07); }

/* ---- admissions band ---- */
.adm-band{ position:relative; overflow:hidden; background:radial-gradient(120% 140% at 10% 0%,#7a5849,var(--primary-dark)); color:#fff; }
.adm-band:before{ content:""; position:absolute; inset:0; background:radial-gradient(rgba(255,255,255,.06) 1.2px,transparent 1.5px); background-size:24px 24px; }
.adm-band-inner{ position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:40px 24px; display:flex; align-items:center; gap:30px; flex-wrap:wrap; }
.adm-band h2{ color:#fff; margin:0 0 4px; font-size:clamp(22px,2.6vw,30px); }
.adm-band h2 .accent{ color:var(--gold); }
.adm-band p{ margin:0; opacity:.85; }
.adm-band-feats{ display:flex; gap:26px; margin-left:auto; flex-wrap:wrap; }
.adm-band-feat{ display:flex; align-items:center; gap:10px; font-size:13.5px; }
.adm-band-feat .afi{ width:38px; height:38px; border-radius:10px; background:rgba(201,138,60,.22); color:var(--gold-light); display:flex; align-items:center; justify-content:center; }

/* ---- footer newsletter ---- */
.footer-news{ display:flex; gap:8px; margin-top:12px; }
.footer-news input{ flex:1; height:42px; padding:0 12px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); border-radius:8px; color:#fff; font-size:13.5px; font-family:inherit; }
.footer-news input::placeholder{ color:rgba(255,255,255,.5); }
.footer-news button{ width:46px; flex-shrink:0; border:none; border-radius:8px; background:var(--accent); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.footer-social{ display:flex; gap:10px; margin-top:16px; }
.footer-social a{ width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.08); color:#d9cfc4; display:flex; align-items:center; justify-content:center; transition:background .18s,color .18s; }
.footer-social a:hover{ background:var(--accent); color:#fff; }
/* topbar login links */
.topbar-links{ display:flex; align-items:center; gap:16px; }
.topbar-links a{ display:inline-flex; align-items:center; gap:6px; }
.topbar-social{ display:flex; gap:12px; }
.lang-switch{ display:inline-flex; align-items:center; gap:2px; margin-left:16px; border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:2px; }
.lang-switch a{ padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600; color:#e9ddd2; line-height:1.5; }
.lang-switch a.on{ background:var(--accent); color:#fff; }
.lang-switch a:hover:not(.on){ color:#fff; }

/* ---- reveal animation (only hide when JS is active, so no-JS still shows) ---- */
.js .reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease),transform .6s var(--ease); }
.js .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .js .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }

/* ---- responsive ---- */
@media (max-width:960px){
  .hero-grid{ grid-template-columns:1fr; } .hero-media{ display:none; }
  .hero-inner{ flex-direction:column; align-items:flex-start; padding:66px 24px 74px; }
  .hero-text{ flex:1 1 auto; max-width:none; }
  .hero-adm-card{ display:none; }
  .hero.has-img .hero-overlay{ background:linear-gradient(180deg, rgba(58,40,30,.80), rgba(40,28,20,.9)); }
  .principal{ grid-template-columns:1fr; } .principal-photo{ max-width:320px; }
  .footer-inner{ grid-template-columns:1fr 1fr; }
  .hero-strip-inner{ grid-template-columns:repeat(2,1fr); }
  .stats-grid{ grid-template-columns:repeat(2,1fr); gap:32px 20px; }
  .contact-grid{ grid-template-columns:1fr; }
  .gallery-preview{ grid-template-columns:repeat(2,1fr); }
  .why-tiles{ grid-template-columns:repeat(3,1fr); }
  .pstats{ grid-template-columns:1fr; }
  .events-grid{ grid-template-columns:1fr; }
  .adm-band-feats{ margin-left:0; }
}
/* Tight band where the horizontal nav (7 links) still shows but space is
   scarce (13" laptops down to the hamburger cutoff): compress the nav and
   logo so the brand name keeps room instead of getting squeezed. */
@media (max-width:1120px) and (min-width:821px){
  .header-inner{ gap:12px; }
  .nav-link{ padding:9px 10px; font-size:13.5px; }
  .brand-logo{ height:46px; }
}
@media (max-width:620px){
  .why-tiles{ grid-template-columns:repeat(2,1fr); }
  .stats-panel .sp-grid{ grid-template-columns:repeat(2,1fr); }
  .toppers{ grid-template-columns:1fr; }
  .alumni-grid{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .campus-grid{ grid-template-columns:repeat(2,1fr); }
  .hero-features{ grid-template-columns:repeat(2,1fr); max-width:none; }
}
@media (max-width:820px){
  .section{ padding:56px 0; }
  .nav{ display:none; position:absolute; top:78px; left:0; right:0; flex-direction:column; align-items:stretch; background:#fff; border-bottom:1px solid var(--border); padding:12px; gap:2px; box-shadow:var(--sh-md); }
  .nav.open{ display:flex; }
  .nav-cta{ margin-left:0; text-align:center; margin-top:6px; }
  .nav-toggle{ display:block; }
  /* dropdown group renders inline & expands on tap (no hover) in the mobile panel */
  .nav-group{ flex-direction:column; align-items:stretch; }
  .nav-parent{ width:100%; justify-content:space-between; }
  .nav-dropdown{ position:static; display:none; min-width:0; border:none; box-shadow:none; padding:2px 0 6px 14px; }
  .nav-group:hover .nav-dropdown{ display:none; }
  .nav-group.open .nav-dropdown{ display:flex; }
  .nav-dropdown:before{ display:none; }
  .topbar{ display:none; }
  .hero-inner{ padding:70px 24px 76px; }
  .cta-inner{ text-align:center; justify-content:center; }
}
@media (max-width:520px){
  .footer-inner{ grid-template-columns:1fr; } .hero-strip-inner{ grid-template-columns:1fr 1fr; }
  .alumni-grid{ grid-template-columns:1fr; }
}

/* =====================================================================
   INTERACTIVE & ANIMATION ENHANCEMENTS (additive; home + global polish).
   Heavy motion is gated behind .js and disabled under reduced-motion.
   ===================================================================== */

/* scroll progress bar */
.scroll-progress{ position:fixed; top:0; left:0; height:3px; width:0; z-index:200; background:linear-gradient(90deg,var(--accent),var(--primary)); box-shadow:0 0 10px rgba(201,138,60,.5); }

/* back-to-top */
.to-top{ position:fixed; right:22px; bottom:26px; width:46px; height:46px; border-radius:50%; border:none; cursor:pointer; z-index:150; background:linear-gradient(160deg,var(--accent),#b3771f); color:#fff; box-shadow:0 10px 24px rgba(201,138,60,.4); display:flex; align-items:center; justify-content:center; opacity:0; transform:translateY(16px) scale(.9); pointer-events:none; transition:opacity .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease); }
.to-top.show{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(201,138,60,.55); }

/* ambient floating shapes in the hero */
.hero-shape{ position:absolute; z-index:1; border-radius:50%; pointer-events:none; opacity:.5; background:radial-gradient(circle at 30% 30%,rgba(201,138,60,.55),rgba(201,138,60,0) 70%); }
.hero-shape.s1{ width:120px; height:120px; left:7%; top:26%; }
.hero-shape.s2{ width:74px; height:74px; left:46%; top:14%; background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.35),rgba(255,255,255,0) 70%); }
.hero-shape.s3{ width:170px; height:170px; right:24%; bottom:14%; opacity:.32; }
.js .hero-shape{ animation:floaty 9s var(--ease) infinite; }
.js .hero-shape.s2{ animation-duration:7s; animation-delay:-2s; }
.js .hero-shape.s3{ animation-duration:12s; animation-delay:-4s; }
@keyframes floaty{ 0%,100%{ transform:translate(0,0); } 33%{ transform:translate(14px,-20px); } 66%{ transform:translate(-12px,12px); } }

/* animated hero glow + eyebrow pulse + title-accent shimmer */
.js .hero-glow{ animation:glowpulse 8s ease-in-out infinite; }
.js .hero-glow.two{ animation-duration:11s; }
@keyframes glowpulse{ 0%,100%{ opacity:1; } 50%{ opacity:.72; } }
.js .hero-eyebrow .dot{ animation:dotpulse 1.9s ease-in-out infinite; }
@keyframes dotpulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(201,138,60,.5); } 70%{ box-shadow:0 0 0 8px rgba(201,138,60,0); } }
.js .hero-title .u:after{ background:linear-gradient(90deg,rgba(201,138,60,.25),rgba(201,138,60,.72),rgba(201,138,60,.25)); background-size:200% 100%; animation:shimmer 4s linear infinite; }
@keyframes shimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }

/* button shine sweep on hover */
.btn{ position:relative; overflow:hidden; }
.btn:after{ content:""; position:absolute; top:0; left:-120%; width:55%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent); transform:skewX(-18deg); z-index:0; pointer-events:none; }
.js .btn:hover:after{ animation:sweep .7s var(--ease); }
@keyframes sweep{ from{ left:-120%; } to{ left:140%; } }

/* pause the updates marquee on hover */
.updates-list:hover{ animation-play-state:paused; }

/* campus tiles: gently zoom the photo on hover */
.campus-tile .ph{ overflow:hidden; }
.campus-tile .ph img{ transition:transform .5s var(--ease); }
.campus-tile:hover .ph img{ transform:scale(1.08); }

/* staggered reveal for grids (children fade + rise in sequence) */
.js .stagger > *{ opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease),transform .6s var(--ease); }
.js .stagger.in > *{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .js .stagger > *{ opacity:1; transform:none; transition:none; }
  .js .hero-shape,.js .hero-glow,.js .hero-eyebrow .dot,.js .hero-title .u:after,.js .btn:hover:after{ animation:none; }
}

/* =====================================================================
   APP BAR / HEADER polish (top info bar + sticky main header)
   ===================================================================== */
/* top info bar: soft gradient */
.topbar{ background:linear-gradient(90deg,var(--primary-dark),#34231a 55%,var(--primary-dark)); }

/* sticky header: smooth shrink-on-scroll + faint gold underline accent */
.site-header{ transition:box-shadow .25s ease, background .25s ease; }
.site-header.scrolled{ background:rgba(255,255,255,.97); box-shadow:0 6px 24px rgba(60,42,32,.10); }
.site-header:after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:0; transition:opacity .3s ease; }
.site-header.scrolled:after{ opacity:.55; }
.header-inner{ transition:height .25s var(--ease); }
.site-header.scrolled .header-inner{ height:64px; }

/* brand: logo lift + name colour on hover; gentle shrink on scroll */
.brand-logo{ transition:height .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
.site-header.scrolled .brand-logo{ height:44px; }
.brand-name{ transition:color .2s ease; }
.brand:hover .brand-logo{ transform:scale(1.05) rotate(-2deg); box-shadow:0 6px 16px rgba(111,79,66,.25); }
.brand:hover .brand-name{ color:var(--primary); }

/* nav links: animated gold->brown underline instead of a background fill */
.nav-link{ position:relative; }
.nav-link:hover{ background:transparent; color:var(--primary); }
.nav-link:after{ content:""; position:absolute; left:15px; right:15px; bottom:7px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--accent),var(--primary)); transform:scaleX(0); transform-origin:center; transition:transform .25s var(--ease); }
.nav-link:hover:after,.nav-link.active:after{ transform:scaleX(1); }

/* Apply Now CTA: gradient + nudging arrow + lift */
.nav-cta{ display:inline-flex; align-items:center; gap:7px; background:linear-gradient(135deg,var(--primary),var(--primary-hover)); }
.nav-cta:after{ content:"\2192"; font-size:15px; line-height:1; transition:transform .2s var(--ease); }
.nav-cta:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(111,79,66,.36); }
.nav-cta:hover:after{ transform:translateX(3px); }

/* mobile menu: rotate the toggle, keep fill hover for stacked links, drop-in */
.nav-toggle{ transition:transform .25s var(--ease), color .2s ease; }
.nav.open ~ .nav-toggle{ transform:rotate(90deg); color:var(--primary); }
@media (max-width:820px){
  .nav-link:after{ display:none; }
  .nav-link:hover,.nav-link.active{ background:var(--primary-light); }
  .nav.open{ animation:navdrop .25s var(--ease); }
}
@keyframes navdrop{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }

/* =====================================================================
   HERO IMAGE SLIDESHOW — two backgrounds cross-fade with a slow Ken-Burns
   zoom (JS toggles .on every 3s; single image just fades/zooms in once).
   ===================================================================== */
.hero-slides{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-slides .hero-bg{ opacity:0; transform:scale(1.07); transition:opacity 1.2s var(--ease), transform 6s var(--ease); }
.hero-slides .hero-bg.on{ opacity:1; transform:scale(1); }
@media (prefers-reduced-motion:reduce){
  .hero-slides .hero-bg{ transition:none; transform:none; }
}

/* =====================================================================
   SCHOOL LIFE page — image hero + activity cards (warm-brown palette)
   ===================================================================== */
.life-hero{ position:relative; overflow:hidden; color:#fff; min-height:380px; display:flex; align-items:center;
  background:radial-gradient(rgba(255,255,255,.07) 1.2px,transparent 1.5px) 0 0/24px 24px, radial-gradient(130% 130% at 12% 0%,#856152,#412c21); }
.life-hero-bg{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; }
.life-hero-ov{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(58,40,30,.55) 0%, rgba(46,32,24,.72) 55%, rgba(40,28,20,.82) 100%); }
.life-hero-in{ position:relative; z-index:2; width:100%; text-align:center; padding:72px 24px; }
.life-hero-in .crumbs{ color:rgba(255,255,255,.75); margin-bottom:8px; }
.life-hero-in .crumbs a{ color:rgba(255,255,255,.92); }
.life-hero h1{ color:#fff; font-size:clamp(34px,5vw,56px); font-weight:800; letter-spacing:-.02em; margin:4px 0 10px; }
.life-hero p{ color:rgba(255,255,255,.9); font-size:clamp(16px,1.6vw,20px); margin:0 auto; max-width:640px; }

.life-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:24px; }
.life-card{ position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-sm); transition:transform .2s var(--ease),box-shadow .2s var(--ease); }
.life-card:hover{ transform:translateY(-5px); box-shadow:var(--sh-lg); }
.life-card-media{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.life-card-media .ph{ position:absolute; inset:0; }
.life-card-media img{ transition:transform .5s var(--ease); }
.life-card:hover .life-card-media img{ transform:scale(1.06); }
.life-badge{ position:absolute; top:14px; left:14px; z-index:4; width:42px; height:42px; border-radius:12px; background:var(--surface); color:var(--primary); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-md); }
.life-card-body{ padding:22px 24px 26px; }
.life-card-body h3{ font-size:20px; font-weight:700; margin:0 0 8px; }
.life-card-body p{ color:var(--text-muted); font-size:14.5px; line-height:1.6; margin:0; }
@media (max-width:620px){
  .life-grid{ grid-template-columns:1fr; }
  .life-hero{ min-height:300px; }
}

/* =====================================================================
   RESULT SHEET — one student's marksheet from the link SMSed to a parent
   (/results?t=<token>). A document, not a marketing section: a single
   white card, tabular numbers, and a print rule that drops the site
   chrome so a parent gets the sheet and nothing else on paper.
   ===================================================================== */
.rs-section{ padding-top:34px; }
.rs-sheet{
  max-width:820px; margin:0 auto; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--sh-md); padding:30px 30px 26px;
}
.rs-head{ text-align:center; border-bottom:2px solid var(--primary-light); padding-bottom:16px; }
.rs-logo{ height:62px; width:auto; object-fit:contain; margin:0 auto 10px; display:block; }
.rs-school{ font-size:23px; font-weight:800; color:var(--primary); margin:0; line-height:1.25; }
.rs-addr{ font-size:13px; color:var(--text-muted); margin:5px 0 0; }
.rs-exam{
  display:inline-block; margin:13px 0 0; padding:5px 15px;
  background:var(--primary-light); color:var(--primary);
  border-radius:999px; font-size:13.5px; font-weight:700; letter-spacing:.02em;
}

.rs-who{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr));
  gap:12px 20px; margin:20px 0 22px;
}
.rs-who div{ min-width:0; }
.rs-who dt{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); font-weight:700; }
.rs-who dd{ margin:2px 0 0; font-size:15px; font-weight:600; color:var(--text); overflow-wrap:anywhere; }

/* A narrow phone scrolls the table sideways rather than crushing the
   subject names into two characters a line. */
.rs-tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.rs-table{ width:100%; border-collapse:collapse; font-size:14.5px; }
.rs-table th, .rs-table td{
  padding:10px 12px; text-align:center; border-bottom:1px solid var(--border);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.rs-table th{
  background:var(--surface-warm); color:var(--primary-dark);
  font-size:12px; text-transform:uppercase; letter-spacing:.05em; font-weight:700;
}
.rs-table .sub{ text-align:left; white-space:normal; }
.rs-table tbody tr:nth-child(even) td{ background:#fdfbf8; }
.rs-table tfoot td{ font-weight:800; background:var(--primary-light); color:var(--primary-dark); border-bottom:none; }
.rs-comp{ font-size:12px; color:var(--text-muted); line-height:1.5; }
.rs-abs{ color:#b3261e; font-weight:800; font-size:12.5px; letter-spacing:.04em; }
.rs-empty{ text-align:center; color:var(--text-muted); padding:22px; }

.rs-sum{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; margin:22px 0 0; }
.rs-card{
  background:var(--surface-raised); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:12px 10px; text-align:center;
}
.rs-card span{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); font-weight:700; }
.rs-card b{ display:block; margin-top:4px; font-size:20px; color:var(--primary); font-variant-numeric:tabular-nums; }

.rs-foot{ margin:22px 0 0; padding-top:14px; border-top:1px dashed var(--border); font-size:12px; color:var(--text-muted); line-height:1.6; text-align:center; }
.rs-actions{ text-align:center; margin:22px 0 0; }

@media (max-width:560px){
  .rs-sheet{ padding:22px 16px 20px; }
  .rs-school{ font-size:19px; }
  .rs-table{ font-size:13.5px; }
}

/* On paper: the sheet only. The header, footer and the Print button itself
   are chrome a parent has no use for in a filed document. */
@media print{
  .topbar, .site-header, .site-footer, .rs-actions, #lightbox{ display:none !important; }
  .rs-section{ padding:0 !important; }
  .rs-sheet{ max-width:none; border:none; box-shadow:none; border-radius:0; padding:0; }
  .rs-table tbody tr:nth-child(even) td{ background:none; }
  .rs-table th{ background:none; color:#000; border-bottom:2px solid #000; }
  .rs-card{ background:none; }
}