/* =================================================================
   ACS BODA — Arjun Convent Higher Secondary School
   Modern Design System  |  Plain CSS
   ================================================================= */

:root {
  /* ── palette ─────────────────────────────────────────────────────────────
     Two of the three come off the crest, and one does not — noted because an
     earlier version of this file claimed all three did.

     Sampling the crest at full size: maroon #8c2828 is the dominant colour
     (2470px), the star behind the disc is cyan #00a0f0 (550px), the lettering
     is navy and the banner off-white. There are 19 gold-ish pixels in the whole
     crest. The gold below is therefore NOT from the crest — it is here because
     a warm yellow or gold accent appeared on 16 of 33 school homepages
     measured, the most consistent finding of that survey, and because navy
     with a warm accent is the dominant recipe (8 of 33 use navy+yellow).

     Navy leads rather than maroon: navy is the modal school primary (13 of 33)
     and none of the ten most recent award winners uses a maroon primary. Maroon
     alone reads university-heritage. */
  --gold:        #e0a11a;   /* warm accent, not from the crest. 2.3:1 on white,
                               so never text on a light ground; fills and rules */
  --gold-lt:     #f6c84c;
  --maroon:      #8e2b2b;   /* the crest disc, measured. Secondary */
  --maroon-lt:   #b04a3f;
  --sky:         #1b9ad8;   /* the crest's star, and the classroom walls */

  /* Neutrals */
  --ink:         #1b2431;
  --slate:       #46536b;
  --muted:       #5d6879;   /* 4.80:1 on the warmest ground; #66718a was 4.16 */
  --line:        #e3ddd3;
  --bg:          #ffffff;
  --bg-soft:     #f8f6f2;   /* warm paper */
  --bg-warm:     #f1ece4;
  --cream:       #fdfbf7;
  --white:       #ffffff;

  /* Gradients */
  --grad-hero:   linear-gradient(135deg, var(--maroon) 0%, var(--maroon-lt) 58%, var(--gold) 100%);
  --grad-gold:   linear-gradient(135deg, #e0a11a 0%, #f6c84c 100%);
  --grad-dark:   linear-gradient(160deg, var(--dark-1) 0%, var(--dark-2) 55%, var(--dark-3) 100%);
  --grad-crest:  linear-gradient(135deg, #8e2b2b 0%, #b04a3f 100%);

  /* Effects */
  /* three steps, and everything rounded lands on one of them. Five ad-hoc
     values (10, 12, 14, 16, 22px) were in use alongside these two. */
  --radius-sm:   14px;
  --radius:      18px;
  --radius-lg:   28px;
  --shadow-sm:   0 4px 14px rgba(16, 32, 56, .08);
  --shadow:      0 18px 50px rgba(16, 32, 56, .14);
  --shadow-lg:   0 26px 70px rgba(16, 48, 92, .26);
  --ring:        0 0 0 1px rgba(255,255,255,.10);


  /* ── type scale ─────────────────────────────────────────────────────────
     Eight steps. Replaced seventeen ad-hoc rem values, several within one
     or two percent of each other, which rendered as 21 distinct sizes on
     the home page alone. */
  --fs-2xs:   .6875rem;
  --fs-xs:    .75rem;
  --fs-sm:    .8125rem;
  --fs-md:    .875rem;
  --fs-base:  .9375rem;
  --fs-lg:    1rem;
  --fs-xl:    1.125rem;
  --fs-2xl:   1.375rem;
  --fs-3xl:   1.75rem;

  /* fluid display steps — five, replacing seven ad-hoc clamp ranges */
  /* 4.6rem left about twelve characters a line in the hero's 457px column,
     which was dictating the headline rather than serving it. 4rem fits a real
     sentence on three lines and still reads as the largest thing on the page. */
  --fs-display:  clamp(2.2rem, 5.4vw, 4rem);
  --fs-h1:       clamp(2.1rem, 5vw, 3.5rem);
  --fs-h2:       clamp(1.9rem, 4vw, 2.9rem);
  --fs-h3:       clamp(1.2rem, 2vw, 1.5rem);
  --fs-lead:     clamp(1.05rem, 1.5vw, 1.18rem);

  --font:        'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ease:        cubic-bezier(.22,.61,.36,1);
  --header-h:    89px;
  /* ── the dark family ─────────────────────────────────────────────────────
     One ramp, all from the crest's maroon. The page had two unrelated dark
     families fighting: a maroon hero and header against a navy statistics band
     and a navy footer. Every dark surface now comes off these three. */
  --dark-1:      #3c1010;   /* deepest — footer, and the header's band */
  --dark-2:      #5c1a1a;
  --dark-3:      #7c2222;

  --hero-ground: radial-gradient(1100px 620px at 78% -14%, #a63c26 0%, transparent 58%),
                 radial-gradient(900px 520px at 4% 108%, var(--dark-1) 0%, transparent 62%),
                 linear-gradient(158deg, var(--dark-3) 0%, #93312a 46%, #a83c2c 100%);
  --band-ground: radial-gradient(760px 420px at 82% -10%, rgba(224,161,26,.10), transparent 62%),
                 linear-gradient(160deg, var(--dark-1) 0%, var(--dark-2) 55%, var(--dark-3) 100%);
  --header-band: rgba(60, 16, 16, .62);

  --container:   1340px;   /* elite authored widths cluster 1320-1400px */
  --measure:     780px;    /* reading measure, kept off the container */

  /* section rhythm on the 8px grid: 40px mobile to 80px desktop is the norm
     across 31 elite sites, with the dominant values all multiples of 8 */
  --pad-sm:      clamp(40px, 5vw, 64px);
  --pad:         clamp(56px, 7vw, 96px);
  --pad-lg:      clamp(64px, 9vw, 128px);
}


/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Form controls do not inherit typography from their parent — the browser gives
   them its own. Only .field input/select/textarea reset it, so every <button>
   on the site rendered in Arial: the gallery filters came out at 13.3333px with
   line-height normal, and both submit buttons in Arial at 16px. Three of the
   inconsistencies measured across the site were this one omission. */
button, input, select, textarea, optgroup { font: inherit; color: inherit; }
body {
  font-family: var(--font);
  color: var(--ink);
  /* warm off-white, not #fff — cards sit white on top of it, which is how
     the elite sites get their layered look */
  background: var(--cream);
  line-height: 1.65;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; height: auto;}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
section { position: relative; }

/* ---------- Layout ---------- */
.container { width: min(var(--container), 92%); margin-inline: auto; }
/* a wide container is not a wide paragraph — measures stay narrow */
.measure { max-width: var(--measure); }
.section { padding: var(--pad-lg) 0; }
.section--soft { background: var(--bg-soft); }
.section--dark { background: var(--band-ground); color: #f6e3da; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { line-height: 1.12; font-weight: 800; letter-spacing: -.02em; }
.display { font-size: var(--fs-display); }
h2.title { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
.lead { font-size: var(--fs-lead); color: var(--slate); }
.section--dark .lead { color: #fbeee7; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--maroon);
  background: rgba(16,48,92,.09); padding: .4rem .9rem; border-radius: 999px;
}
.section--dark .eyebrow { color: var(--gold-lt); background: rgba(224,161,26,.16); }
/* One accent colour on one phrase inside a heading, and nothing more.
   This used to carry a gold rule underneath, drawn with ::after. It read as an
   underline rather than an accent, and because the class is not heading-only it
   was inherited by eight places that are not headings at all: the four
   statistics numerals and the four timeline years each got a bar under them
   too. Colour alone does the same job in every one of those places.
   Gold as text measures 1.52:1 on the paper ground, so the light-ground accent
   is the brand maroon; gold is used only where the ground is dark. */
.grad-text { color: var(--maroon); }
/* on the dark grounds gold is the legible one — 5.8:1 and up */
.hero .grad-text,
.page-hero .grad-text,
.section--dark .grad-text { color: var(--gold-lt); }
/* --muted is tuned for the light grounds and measures 2.30:1 on the maroon
   band. Lighthouse scored these pages 100 because the band's background is a
   gradient, so backgroundColor is transparent and axe cannot resolve what the
   text sits on — it skips the check rather than failing it. Everything that
   inherits a light-ground neutral needs an explicit value here. */
.section--dark .stat-box .lbl,
.section--dark .lbl,
.section--dark .small,
.section--dark .muted { color: #fbeee7; }
.footer .stat-box .lbl,
.footer .lbl,
.footer .small,
.footer .muted { color: #e0bdb0; }
.center { text-align: center; }
.section-head { max-width: 720px; margin: 0 auto 3.5rem; }
.section-head.center { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: .6rem;
  font-weight: 700; font-size: var(--fs-lg); cursor: pointer;
  padding: .95rem 1.5rem; border-radius: 999px; border: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s;
  will-change: transform;
}
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--grad-hero); color: #fff; box-shadow: var(--shadow-lg); }
.btn--primary:hover { transform: translateY(-3px); box-shadow: 0 36px 90px rgba(142,43,43,.42); }
.btn--gold { background: var(--grad-gold); color: var(--dark-1); box-shadow: 0 16px 40px rgba(224,161,26,.42); }
.btn--gold:hover { transform: translateY(-3px); }
.btn--ghost { background: #fff; color: var(--maroon); border: 1.5px solid var(--line); box-shadow: var(--shadow-sm); }
.btn--ghost:hover { border-color: var(--maroon); transform: translateY(-2px); }
.btn--outline { background: transparent; color: var(--maroon); border: 2px solid var(--maroon); }
.btn--outline:hover { background: var(--maroon); color: #fff; transform: translateY(-3px); }

/* =================================================================
   HEADER / NAV
   ================================================================= */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding: 1rem 0;
  /* Its own band, a shade deeper than the hero, so the bar reads as a separate
     object rather than dissolving into the hero it sits on. */
  background: var(--header-band);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
          backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.12);
  transition: transform .32s var(--ease), background .3s, padding .3s, box-shadow .3s;
}
/* leaves on the way down, returns on the way up */
.header.is-shy { transform: translateY(-100%); }
.header.scrolled {
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  box-shadow: var(--shadow-sm); padding: .55rem 0;
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { display: flex; align-items: center; gap: .75rem; font-weight: 800; }
.brand__logo {
  width: 48px; height: 48px; border-radius: var(--radius-sm); display: grid; place-items: center;
  background: #fff; color: var(--maroon); font-weight: 900; font-size: var(--fs-lg);
  box-shadow: 0 6px 18px rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.5);
  flex-shrink: 0; overflow: hidden; padding: 4px;
}
.brand__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand__name { font-size: var(--fs-xl); line-height: 1.1; color: #fff; }
.header.scrolled .brand__name { color: var(--ink); }
.brand__name small { display: block; font-size: var(--fs-2xs); font-weight: 600; color: #e4c5b9; letter-spacing: .04em; }
.header.scrolled .brand__name small { color: var(--muted); }
/* The hero is dark and the header carries its own darker band, so the bar is
   light-on-dark at rest and flips to dark-on-white once it goes solid. */

.nav__links { display: flex; align-items: center; gap: .35rem; }
.nav__links a {
  font-weight: 600; font-size: var(--fs-base); color: #f3ded6; padding: .55rem .85rem;
  border-radius: var(--radius-sm); position: relative; transition: color .25s, background .25s;
}
.header.scrolled .nav__links a { color: var(--slate); }
.nav__links a:hover,
.nav__links a.active { color: #fff; background: rgba(255,255,255,.16); }
.header.scrolled .nav__links a:hover,
.header.scrolled .nav__links a.active { color: var(--maroon); background: rgba(142,43,43,.09); }
.nav__cta { display: flex; align-items: center; gap: .8rem; }

.nav__toggle {
  display: none; flex-direction: column; gap: 5px; background: none; border: none;
  cursor: pointer; padding: 8px; z-index: 110;
}
.nav__toggle span { width: 26px; height: 3px; background: #fff; border-radius: 2px; transition: .3s var(--ease); }
.header.scrolled .nav__toggle span { background: var(--maroon); }
.nav__toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav__toggle.open span:nth-child(2) { opacity: 0; }
.nav__toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav__toggle { display: flex; color:#fff; }
  .header.scrolled .nav__toggle { color: var(--ink); }
  .nav__links {
    position: fixed; inset: 0 0 0 auto; width: min(320px, 82%);
    flex-direction: column; align-items: stretch; justify-content: center; gap: .4rem;
    background: var(--grad-dark); padding: 2rem; transform: translateX(110%);
    transition: transform .45s var(--ease); box-shadow: -20px 0 60px rgba(0,0,0,.3);
  }
  .nav__links.open { transform: translateX(0); }
  .nav__links a { color: #e9ecff !important; font-size: var(--fs-xl); padding: .9rem 1rem; }
  .nav__cta .btn {
  white-space: nowrap; display: none; }
}

/* =================================================================
   HERO
   ================================================================= */
/* ── hero ─────────────────────────────────────────────────────────────────
   Warm, photo-led, and the depth is CSS. The stack of photographs sits in a
   perspective container and tilts as one body with the pointer; the crest
   floats in front of it. Transforms only, so it is composited and costs
   nothing per frame — the Three.js version it replaced held the main thread
   for 12.7 seconds and crashed where WebGL was missing. */
/* ── hero ─────────────────────────────────────────────────────────────────
   Deep maroon, at the owner's direction. The survey of 37 school sites found
   no dark page theme anywhere, so this is a deliberate departure and the rest
   of the page stays light — the dark is one band, not the site.

   The header gets its OWN darker band rather than sharing the hero's colour, so
   the two read as separate objects instead of one wash. */
.hero { position: relative; overflow: hidden; isolation: isolate;
        padding: calc(var(--header-h) + clamp(1.6rem, 4vw, 3.2rem)) 0 clamp(3.4rem,7vw,6rem);
        background: var(--hero-ground); color: #fdeee6; }

/* ── the drifting field ───────────────────────────────────────────────────
   Four soft lights that move on their own behind the hero, the way the large
   gradient fields on chatgpt.com and openai.com do. Only `translate` and
   `scale` animate, so the browser composites them and the per-frame cost is
   nothing — the Three.js hero this site used to carry held the main thread for
   12.7 seconds. Long, unequal durations keep the pattern from looping visibly. */
.bgfx { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.bgfx i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(70px); opacity: .55; will-change: transform;
}
.bgfx i:nth-child(1) { width: 46vw; height: 46vw; left: -8vw;  top: -14vw;
  background: radial-gradient(circle, #c8552f 0%, transparent 68%);
  animation: drift-a 34s ease-in-out infinite; }
.bgfx i:nth-child(2) { width: 40vw; height: 40vw; right: -6vw; top: -6vw;
  background: radial-gradient(circle, #e0a11a 0%, transparent 66%);
  opacity: .40; animation: drift-b 43s ease-in-out infinite; }
.bgfx i:nth-child(3) { width: 38vw; height: 38vw; left: 22vw;  bottom: -18vw;
  background: radial-gradient(circle, #8e2b2b 0%, transparent 70%);
  animation: drift-c 51s ease-in-out infinite; }
.bgfx i:nth-child(4) { width: 30vw; height: 30vw; right: 14vw; bottom: -12vw;
  background: radial-gradient(circle, #1b9ad8 0%, transparent 72%);
  opacity: .22; animation: drift-d 39s ease-in-out infinite; }

@keyframes drift-a {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  33%     { transform: translate3d(7vw,4vw,0) scale(1.12); }
  66%     { transform: translate3d(3vw,-3vw,0) scale(.94); }
}
@keyframes drift-b {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  40%     { transform: translate3d(-6vw,5vw,0) scale(1.16); }
  75%     { transform: translate3d(-2vw,-2vw,0) scale(.9); }
}
@keyframes drift-c {
  0%,100% { transform: translate3d(0,0,0) scale(1.04); }
  45%     { transform: translate3d(6vw,-6vw,0) scale(.92); }
  80%     { transform: translate3d(-5vw,-2vw,0) scale(1.1); }
}
@keyframes drift-d {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50%     { transform: translate3d(-8vw,-5vw,0) scale(1.2); }
}
/* Motion this large is exactly what a reader with vestibular sensitivity asks
   to be spared, so it stops rather than slows. */
@media (prefers-reduced-motion: reduce) {
  .bgfx i { animation: none; }
}

/* the drifting field — see .bgfx below */
.hero__bg { position: absolute; inset: -12%; z-index: -2; pointer-events: none; }
.hero__rays { position: absolute; inset: -18% -10% auto -10%; height: 118%; z-index: -1;
  pointer-events: none; opacity: .07; filter: blur(1px);
  background: repeating-conic-gradient(from 0deg at 78% 22%,
    var(--gold-lt) 0deg 1deg, transparent 1deg 10deg);
  -webkit-mask-image: radial-gradient(closest-side at 78% 22%, #000, transparent 70%);
          mask-image: radial-gradient(closest-side at 78% 22%, #000, transparent 70%); }

.hero .container { position: relative; z-index: 2; }
.hero__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem,5vw,4rem); align-items: center; }
@media (min-width: 1000px) { .hero__grid { grid-template-columns: .88fr 1.12fr; } }
@media (min-width: 1280px) { .hero__grid { grid-template-columns: .82fr 1.18fr; } }

.hero__inner { max-width: 620px; }
.hero h1 { color: #fff; margin: 1.1rem 0; }
.hero .lead { color: #fbeee7; max-width: 560px; }
/* .page-hero is the same dark ground as .hero, so an eyebrow on it needs the
   same light treatment. Only .hero was listed here, which meant the first
   eyebrow ever placed on a .page-hero rendered maroon on maroon. */
.hero .eyebrow,
.page-hero .eyebrow { display: inline-flex; align-items: center; gap: .55rem; color: #ffeccb;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  padding: .4rem .85rem; border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; }
.hero .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-lt);
  box-shadow: 0 0 0 4px rgba(246,200,76,.22); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.1rem; }
.hero__stats { display: flex; flex-wrap: wrap; gap: clamp(1.6rem,4vw,2.6rem); margin-top: 2.8rem; }
.hero__stat .num { font-size: var(--fs-h2); font-weight: 800; color: var(--gold-lt); line-height: 1.1; }
.hero__stat .lbl { font-size: var(--fs-sm); color: #fbeee7; letter-spacing: .03em; }

/* ── the hero photograph ──────────────────────────────────────────────────
   One picture on a perspective plane, big, with the crest and a chip on their
   own planes in front of it. The three-photo stack it replaced had the middle
   image 57% covered and nothing wider than 361px inside a 1440px hero. */
.hero__art { perspective: 1400px; perspective-origin: 55% 45%; }
.stack { position: relative; transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .45s var(--ease); will-change: transform; }

.ph--main { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden;
  background: #fff; border: 6px solid #fff;
  box-shadow: 0 34px 70px -26px rgba(16,32,56,.48), 0 2px 6px rgba(16,32,56,.10);
  transform: translateZ(0); }
.ph--main img { display: block; width: 100%; height: auto; }
.ph--main figcaption {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  background: rgba(255,255,255,.94); color: var(--maroon);
  font-size: var(--fs-sm); font-weight: 700; padding: .45rem .7rem;
  border-radius: var(--radius-sm); backdrop-filter: blur(4px);
}

/* the crest, lifted off the photograph */
.crest { position: absolute; top: -26px; left: -26px; width: clamp(64px, 8vw, 92px);
  transform: translateZ(90px); filter: drop-shadow(0 10px 20px rgba(16,32,56,.28));
  animation: float 8s ease-in-out infinite; }
.crest img { width: 100%; height: auto; display: block; }

/* one fact, on its own plane, so the depth is legible */
.chip { position: absolute; right: -22px; bottom: 42px; z-index: 3;
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  column-gap: .6rem; row-gap: 0; padding: .7rem .95rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: 0 20px 44px -18px rgba(16,32,56,.42);
  transform: translateZ(140px); animation: float 9s ease-in-out infinite .8s; }
.chip .sico { grid-row: 1 / span 2; width: 26px; height: 26px; color: var(--maroon); }
.chip b { font-size: var(--fs-sm); color: var(--maroon); line-height: 1.2; }
.chip i { font-style: normal; font-size: var(--fs-xs); color: var(--muted); }

@keyframes float { 0%,100% { translate: 0 0; } 50% { translate: 0 -12px; } }

@media (prefers-reduced-motion: reduce) {
  .crest, .chip { animation: none; }
  .stack { transition: none; }
}
.scroll-hint {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 2;
  color: #fbeee7; font-size: var(--fs-sm); letter-spacing: .2em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
}
.scroll-hint .mouse { width: 24px; height: 38px; border: 2px solid rgba(251,238,231,.7); border-radius: var(--radius-sm); position: relative; }
.scroll-hint .mouse::after { content:""; position:absolute; top:7px; left:50%; transform:translateX(-50%);
  width:4px; height:8px; background:#fbeee7; border-radius:3px; animation: scrollDot 1.6s infinite; }
@keyframes scrollDot { 0%{opacity:0;transform:translate(-50%,0)} 40%{opacity:1} 80%{opacity:0;transform:translate(-50%,12px)} }

/* =================================================================
   CARDS / GRIDS
   ================================================================= */
.grid { display: grid; gap: 1.6rem; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  :root { --header-h: 80px; } .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 2rem; box-shadow: var(--shadow-sm); transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  position: relative; overflow: hidden;
}
/* 3D tilt cards */
.card--3d { transform-style: preserve-3d; will-change: transform; }
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.card__icon {
  width: 60px; height: 60px; border-radius: var(--radius); display: grid; place-items: center;
  background: var(--grad-hero); color: #fff; font-size: var(--fs-3xl); margin-bottom: 1.2rem;
  box-shadow: var(--shadow-lg); transform: translateZ(40px);
}
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--slate); font-size: var(--fs-base); }
.card--alt .card__icon { background: var(--grad-gold); color: var(--dark-1); box-shadow: 0 16px 36px rgba(224,161,26,.34); }

/* Feature split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.split--rev { direction: rtl; } .split--rev > * { direction: ltr; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.media-frame {
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow);
  position: relative; aspect-ratio: 4/3; background: var(--grad-hero);
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-badge {
  position: absolute; bottom: 18px; left: 18px; background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px); padding: .8rem 1.2rem; border-radius: var(--radius-sm); box-shadow: var(--shadow);
  font-weight: 700; display: flex; align-items: center; gap: .6rem;
}

/* Stat band */
.stats-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; text-align: center; }
@media (max-width: 700px){ .stats-band { grid-template-columns: repeat(2, minmax(0, 1fr));} }
.stat-box .num { font-size: var(--fs-h2); font-weight: 800; }
.stat-box .lbl { color: var(--muted); font-weight: 600; font-size: var(--fs-md); }

/* List with checks */
.check-list li { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .8rem; color: var(--slate); }
.check-list li::before { content: "✓"; flex-shrink:0; width: 24px; height: 24px; border-radius: 50%;
  background: var(--grad-gold); color: var(--dark-1); font-weight: 900; display: grid; place-items: center; font-size: var(--fs-sm); }

/* =================================================================
   PAGE HERO (inner pages)
   ================================================================= */
/* Light, like the home page. It was a navy gradient with white type, which
   left the fixed header unreadable over it once the home hero went light —
   two opposite header states for one bar. One ground, one header. */
/* The same ground as the home hero. The header carries its own dark band now,
   so a light inner hero would need the type inverted back again — one bar,
   two opposite states, which is the bug that came out of doing this the other
   way round. */
.page-hero {
  background: var(--hero-ground); color: #fdeee6;
  padding: calc(var(--header-h) + clamp(2rem, 6vw, 4.5rem)) 0 clamp(56px, 8vw, 88px);
  text-align: center; position: relative; overflow: hidden; isolation: isolate;
}
.page-hero::before, .page-hero::after {
  content:""; position:absolute; border-radius:50%; filter: blur(80px); opacity:.34; z-index:-1;
}
.page-hero::before { width: 360px; height: 360px; background: var(--gold); top:-120px; right:-60px; }
.page-hero::after  { width: 320px; height: 320px; background: var(--sky); bottom:-140px; left:-50px; }
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { font-size: var(--fs-h1); margin-bottom: .8rem; color: #fff; }
.page-hero .lead { color: #fbeee7; max-width: var(--measure); margin-inline: auto; }

/* ── the admissions hero, with the enquiry form beside it ─────────────────
   The form used to sit 56% of the way down the page, behind the process, the
   fees and the documents list. A school's front door is the enquiry, so it
   goes above the fold and the reading can happen after. */
.page-hero--split { text-align: left; padding-bottom: clamp(40px, 5vw, 64px); }
.page-hero--split .container {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: clamp(2rem, 4vw, 3.5rem); align-items: start;
}
.page-hero--split .lead { margin-inline: 0; }
.page-hero--split .crumb { justify-content: flex-start; }
@media (max-width: 980px) {
  .page-hero--split { text-align: center; }
  .page-hero--split .container { grid-template-columns: minmax(0, 1fr); }
  .page-hero--split .lead { margin-inline: auto; }
  .page-hero--split .crumb { justify-content: center; }
  /* Once the columns stack, the photo only pushes the form below the fold —
     which is the one thing this layout exists to prevent. It measured the card
     at 1027px on a 900px viewport before this rule. The page has the same
     photograph further down. */
  .page-hero--split .media-frame { display: none; }
}

/* A light card on the maroon ground, so the existing .field styles — which are
   built for a light background — carry over unchanged. */
.enquiry-card {
  background: var(--cream); color: var(--ink); text-align: left;
  border-radius: var(--radius-lg); padding: clamp(1.4rem, 2.4vw, 2rem);
  box-shadow: 0 24px 60px rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.5);
}
.enquiry-card h2 { font-size: var(--fs-2xl); color: var(--ink); margin-bottom: .3rem; }
.enquiry-card > p { font-size: var(--fs-md); color: var(--muted); margin-bottom: 1.2rem; }
.enquiry-card .field { margin-bottom: .85rem; }
.enquiry-card .field label { font-size: var(--fs-sm); }
.enquiry-card .field input, .enquiry-card .field select { padding: .7rem .9rem; border-radius: var(--radius-sm); }

/* Radio rows: the choice is the label, so the whole label is the target. */
.pickrow { display: flex; flex-wrap: wrap; gap: .5rem; }
.pickrow label {
  display: inline-flex; align-items: center; gap: .4rem; margin: 0;
  padding: .42rem .8rem; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; cursor: pointer; font-size: var(--fs-sm); font-weight: 600;
  color: var(--slate); transition: .2s var(--ease);
}
.pickrow input { accent-color: var(--maroon); margin: 0; width: auto; }
.pickrow label:has(input:checked) { border-color: var(--maroon); background: rgba(142,43,43,.07); color: var(--maroon); }
.pickrow label:focus-within { outline: 2px solid var(--maroon); outline-offset: 2px; }

/* The sum is generated in the browser, so it stops a naive bot and nothing
   more. Real spam control needs a server, which this site does not have. */
.captcha { display: flex; align-items: flex-end; gap: .7rem; }
.captcha .field { flex: 1; margin-bottom: 0; }
.captcha__sum {
  font-weight: 800; font-size: var(--fs-xl); color: var(--maroon);
  background: var(--bg-warm); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .62rem .9rem; white-space: nowrap;
}
.field-error { color: #b3261e; font-size: var(--fs-sm); margin-top: .3rem; display: block; }
.crumb { display:flex; gap:.5rem; justify-content:center; align-items:center;
         font-size:var(--fs-md); color:#fbeee7; margin-top:1.2rem; }
.crumb a { color: #ffe4b0; }
.crumb a:hover { color: #fff; }

/* =================================================================
   TABLES (fees / books)
   ================================================================= */
.table-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow-sm); border:1px solid var(--line); }
table { width: 100%; border-collapse: collapse; background: #fff; min-width: 520px; }
thead th { background: var(--grad-dark); color: #fff; padding: 1rem 1.2rem; text-align: left; font-size: var(--fs-base); }
tbody td { padding: .95rem 1.2rem; border-top: 1px solid var(--line); color: var(--slate); }
tbody tr:nth-child(even) { background: var(--bg-soft); }
tbody tr:hover { background: rgba(16,48,92,.05); }
tbody td:first-child { font-weight: 700; color: var(--ink); }

/* =================================================================
   GALLERY
   ================================================================= */
.gallery-grid { columns: 3 240px; column-gap: 1rem; }
.gallery-grid figure {
  break-inside: avoid; margin-bottom: 1rem; border-radius: var(--radius); overflow: hidden;
  position: relative; box-shadow: var(--shadow-sm); cursor: pointer;
}
.gallery-grid img { width: 100%; transition: transform .6s var(--ease); height: auto;}
.gallery-grid figure:hover img { transform: scale(1.08); }
.gallery-grid figcaption {
  position: absolute; inset: auto 0 0 0; padding: 1.5rem 1rem .9rem; color: #fff; font-weight: 600;
  background: linear-gradient(transparent, rgba(11,20,55,.85)); opacity: 0; transform: translateY(10px);
  transition: .4s var(--ease);
}
.gallery-grid figure:hover figcaption { opacity: 1; transform: translateY(0); }
.filter-bar { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-bottom: 2.5rem; }
.filter-bar button {
  border:1px solid var(--line); background:#fff; padding:.55rem 1.2rem; border-radius:999px;
  font-weight:600; cursor:pointer; color:var(--slate); transition:.25s;
}
.filter-bar button.active, .filter-bar button:hover { background: var(--grad-hero); color:#fff; border-color:transparent; }

/* =================================================================
   CONTACT / FORM
   ================================================================= */
.field { margin-bottom: 1.1rem; }
.field label { display:block; font-weight:600; font-size:var(--fs-md); margin-bottom:.4rem; }
.field input, .field select, .field textarea {
  width:100%; padding:.9rem 1.1rem; border:1px solid var(--line); border-radius:var(--radius-sm);
  font:inherit; background:#fff; transition:.25s; color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none; border-color:var(--maroon); box-shadow:0 0 0 4px rgba(16,48,92,.16);
}
.contact-info-card {
  display:flex; gap:1rem; align-items:flex-start; padding:1.4rem;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm);
  transition: transform .3s var(--ease);
}
.contact-info-card:hover { transform: translateY(-4px); }
.contact-info-card .ico { width:48px; height:48px; border-radius:var(--radius-sm); background:var(--grad-hero);
  color:#fff; display:grid; place-items:center; font-size:var(--fs-2xl); flex-shrink:0; }
.form-note { font-size:var(--fs-md); color:var(--muted); }

/* =================================================================
   CTA / FOOTER
   ================================================================= */
.cta {
  background: var(--grad-hero); color:#fff; border-radius: var(--radius-lg);
  padding: clamp(2.5rem,6vw,4.5rem); text-align:center; position:relative; overflow:hidden;
  box-shadow: var(--shadow-lg);
}
.cta::before { content:""; position:absolute; inset:0; background:
  radial-gradient(circle at 20% 20%, rgba(255,255,255,.18), transparent 40%); }
.cta h2 { color:#fff; position:relative; }
.cta p { color: rgba(255,255,255,.9); position:relative; max-width:560px; margin:1rem auto 2rem; }

.footer { background: var(--dark-1); color: #e0bdb0; padding: 4rem 0 1.5rem; }
.footer__grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap:2.5rem; }
@media (max-width: 800px){ .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .footer__grid { grid-template-columns: 1fr; } }
.footer h4 { color:#fff; margin-bottom:1.1rem; font-size:var(--fs-lg); }
.footer a { display:block; padding:.3rem 0; transition:.2s; }
.footer a:hover { color:#fff; padding-left:6px; }
.footer .brand__name, .footer .brand__name small { color:#fff; }
.footer__bottom { border-top:1px solid rgba(255,255,255,.1); margin-top:3rem; padding-top:1.5rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:var(--fs-md); }
.social { display:flex; gap:.6rem; }
.social a { width:40px; height:40px; border-radius:var(--radius-sm); background:rgba(255,255,255,.08);
  display:grid; place-items:center; transition:.3s; }
.social a:hover { background:var(--grad-hero); transform:translateY(-3px); }

/* =================================================================
   SCROLL REVEAL ANIMATIONS
   ================================================================= */
.reveal { opacity:0; transform: translateY(40px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity:1; transform: none; }
.reveal[data-delay="1"]{ transition-delay:.1s; }
.reveal[data-delay="2"]{ transition-delay:.2s; }
.reveal[data-delay="3"]{ transition-delay:.3s; }
.reveal[data-delay="4"]{ transition-delay:.4s; }
.reveal-zoom { opacity:0; transform: scale(.9); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-zoom.in { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal, .reveal-zoom { opacity:1 !important; transform:none !important; }
}

/* Floating animation */
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
.float { animation: float 5s ease-in-out infinite; }

/* marquee */
.marquee { overflow:hidden; white-space:nowrap; }
.marquee__track { display:inline-flex; gap:3rem; animation: marquee 22s linear infinite; }
.marquee__track span { font-weight:700; color:var(--muted); font-size:var(--fs-xl); display:inline-flex; align-items:center; gap:1rem; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* the principal's frame, holding the crest until a real photograph exists */
.media-frame--crest { display: grid; place-items: center; aspect-ratio: 1/1;
  background: radial-gradient(circle at 50% 40%, var(--cream), var(--bg-warm)); }
.media-frame--crest img { width: clamp(120px, 40%, 200px); height: auto; }

/* ── sprite icons ────────────────────────────────────────────────────────
   These replaced 78 emoji. Emoji are drawn by the operating system, so the
   same page rendered a different icon set on Windows, Android and iOS at
   different weights, and a few had no colour glyph at all. `.sico`, not
   `.ico` — that name already means a 48px gradient tile in .contact-info-card. */
.sico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.18em; }
/* 26px inside a 60px tile read as too small: the emoji these replaced filled
   their whole box, a stroked glyph does not. CSS beats the presentation
   attribute on the symbol, so the weight can be lifted here too. */
.card__icon .sico { width: 31px; height: 31px; stroke-width: 1.85; }
.marquee .sico { width: 18px; height: 18px; margin-right: .35rem; }
.contact-info-card .sico { width: 22px; height: 22px; }
.f-contact .sico, .footer .sico { width: 16px; height: 16px; }

/* <small> was inheriting the browser's 0.8333em, which is why 13.3333px kept
   appearing outside the scale. */
small { font-size: var(--fs-sm); }