/* ============================================================
   THEME · RETRO VINTAGE PRINT
   Aged paper, letterpress type, rubber stamps, double rules.
   Palette preserved. Distinct from every other theme.
   ============================================================ */

:root {
  --radius: 2px;
  --radius-sm: 2px;
  --font-head: Georgia, 'Times New Roman', serif;
  --shadow-sm: 2px 2px 0 rgba(74, 14, 30, .08);
  --shadow-md: 4px 4px 0 rgba(74, 14, 30, .12);
  --shadow-lg: 6px 6px 0 rgba(74, 14, 30, .16);
  --shadow-gold: 3px 3px 0 rgba(214, 155, 47, .4);
}

/* ---------- Paper grain overlay ---------- */
body { background: var(--light); }
body::before {
  content: ""; position: fixed; inset: 0; z-index: 9997; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(74, 14, 30, .02) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(74, 14, 30, .012) 0 1px, transparent 1px 4px);
}

/* ---------- Letterpress typography ---------- */
h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: .01em; }
.eyebrow {
  letter-spacing: 3px;
  /* Old: color: var(--royal-2); (pink/maroon) */
  color: var(--navy-ink); /* existing blue shade */
  background: rgba(252, 249, 243, .7);
  border-width: 1.5px; border-style: dashed; border-color: var(--royal-2); border-radius: 6px;
  padding: 5px 12px; transform: rotate(-.5deg);
}
/* Old: .eyebrow::before { display: none; }
   Every eyebrow now shows the golden line before its text. */
.eyebrow::before { display: block; background: var(--grad-gold); }
.section-title { font-style: normal; }
.section-title::after { height: 2px; background: var(--gold-2); border-radius: 0; box-shadow: 0 4px 0 rgba(214, 155, 47, .3); }

/* ---------- Cards: aged ivory panels ---------- */
.card-premium {
  background: var(--white);
  border: 1px solid rgba(74, 14, 30, .16); border-radius: 2px;
  border-top-width: 3px; border-top-style: double; border-top-color: var(--gold-2);
  box-shadow: 3px 3px 0 rgba(74, 14, 30, .06), inset 0 0 0 1px rgba(214, 155, 47, .12);
}
.card-premium:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 rgba(74, 14, 30, .1); }
.card-premium .card-icon {
  border-radius: 2px; background: transparent; color: var(--gold-2);
  border-width: 1.5px; border-style: dashed; border-color: var(--gold-2); font-size: 22px;
}
.card-premium:hover .card-icon { background: var(--gold-2); color: var(--navy); transform: rotate(0) scale(1.04); }

/* ---------- Stat cards ---------- */
.stat-card {
  background: var(--white); border: 1px solid rgba(74, 14, 30, .16); border-radius: 2px;
  border-top-width: 4px; border-top-style: double; border-top-color: var(--gold-2); box-shadow: 3px 3px 0 rgba(74, 14, 30, .08);
}
.stat-card:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 rgba(74, 14, 30, .12); }
.stat-num { font-family: var(--font-head); color: var(--navy); }

/* ---------- Buttons: letterpress blocks ---------- */
.btn-premium, .btn-navy, .btn-outline-premium, .btn-ghost {
  border-radius: 2px !important; text-transform: uppercase; letter-spacing: 1.5px; font-size: 13px; font-weight: 700;
}
.btn-premium { background: var(--gold-2); color: var(--navy); border-width: 1px; border-style: solid; border-color: var(--navy); box-shadow: 3px 3px 0 var(--navy); }
.btn-premium:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--navy); color: var(--navy); }
.btn-navy { background: var(--navy); border-width: 1px; border-style: solid; border-color: var(--navy); box-shadow: 3px 3px 0 var(--royal-2); }
.btn-navy:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--royal-2); }
.btn-outline-premium { background: transparent; border: 1px dashed rgba(255, 255, 255, .75); color: #fff; }
.btn-outline-premium:hover { background: var(--gold-2); color: var(--navy); border-width: 1px; border-style: dashed; border-color: var(--navy); }
.btn-ghost { background: transparent; color: var(--royal-2); border: none; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: var(--gold-2); border-radius: 0 !important; }
.btn-ghost:hover { background: transparent; color: var(--royal); border-bottom-color: var(--royal-2); }

/* ---------- Navbar ----------
   The old white-navbar / gold-double-rule / 22px-serif-link rules that used
   to live here were REMOVED: they fought the maroon card and forced the gold
   strip onto the top of the navbar. The single authoritative navbar skin now
   lives in "PHASE 2 - HEADER + NAVBAR" further down this same file
   (.header-bottom card + .navbar-main.navbar + desktop .navbar-nav rules),
   which loads after this point and therefore always wins. */
.brand-text b { font-family: var(--font-head); letter-spacing: .5px; }
.brand-text small { letter-spacing: 2.5px; }
.dropdown-menu { border-radius: 2px; border: 1px solid rgba(74, 14, 30, .25); }
/* Stacking fix: open navbar dropdowns (Gallery etc.) were painting BEHIND
   the centred crest (.logo-center { z-index: 5 }), because .dropdown-menu
   had z-index: auto AND .header-bottom (its ancestor) was a stacking
   context capped at z-index: 1. The parent trap is removed in the
   .header-bottom rule above; the levels below then outrank the crest.
   Position/width/colours/animation unchanged. */
.navbar-main .nav-item.dropdown {
  position: relative;
  z-index: 10001;
}
.navbar-main .dropdown-menu {
  position: absolute;
  z-index: 10002 !important;
}
.nav-cta { border-radius: 2px; border-width: 1px; border-style: solid; border-color: var(--navy); }
.icon-btn, .portal-btn { border-radius: 2px; }
.offcanvas .nav-link { border-bottom: 1px solid rgba(74, 14, 30, .15); }

/* ---------- Hero ---------- */
.hero::before { background: rgba(0, 0, 0, 0.42); }
.hero-badge { border-radius: 4px; background: rgba(74, 14, 30, .55); border: 1.5px dashed rgba(233, 184, 76, .75); letter-spacing: 1.5px; text-transform: uppercase; font-size: 12px; }
.hero-divider::before, .hero-divider::after { width: 60px; height: 0; background: none; border-top-width: 2px; border-top-style: dashed; border-top-color: var(--gold); }
.hero h1 { letter-spacing: 1px; }
.hero-trust b { font-family: var(--font-head); }
.hero-trust span { letter-spacing: 2px; }
.hero-scroll { letter-spacing: 3px; text-transform: uppercase; }
.mouse { border-radius: 8px; border-color: rgba(255, 255, 255, .6); }
.mouse::after { border-radius: 2px; background: var(--gold); }
.crest-card {
  background: rgba(58, 11, 22, .55); border-width: 2px; border-style: solid; border-color: var(--gold); border-radius: 2px;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, .35);
}
.crest-card .corner { border-radius: 0; border-width: 2px; }
.crest-title { letter-spacing: 1.5px; font-weight: 800; }
.crest-sub { letter-spacing: 4px; }
.crest-rule { height: 1px; background: var(--gold); border-radius: 0; }
.crest-motto { font-style: italic; }
.float-chip { border-radius: 2px; background: rgba(252, 249, 243, .92); color: var(--navy); border-width: 1px; border-style: solid; border-color: var(--navy); box-shadow: 3px 3px 0 rgba(0, 0, 0, .3); font-family: var(--font-head); }
.float-chip i { color: var(--gold-2); }
.float-chip .num { color: var(--gold-2); }

/* ---------- Timeline ---------- */
.timeline::before { width: 0; background: none; border-left-width: 2px; border-left-style: dashed; border-left-color: var(--royal-3); }
.tl-item .dot { border-radius: 0; transform: rotate(45deg); background: var(--gold-2); border-width: 3px; border-style: solid; border-color: var(--white); box-shadow: 0 0 0 3px var(--royal-2); }
.tl-card { background: var(--white); border: 1px solid rgba(74, 14, 30, .16); border-radius: 2px; box-shadow: 3px 3px 0 rgba(74, 14, 30, .07); }
.tl-card .year { font-family: var(--font-head); color: var(--gold-2); }
.tl-card:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 rgba(74, 14, 30, .1); }

/* ---------- Notice / events ---------- */
.notice-item { background: var(--white); border: 1px solid rgba(74, 14, 30, .16); border-radius: 2px; box-shadow: 2px 2px 0 rgba(74, 14, 30, .05); }
.notice-item:hover { transform: translateX(4px); box-shadow: 4px 4px 0 rgba(74, 14, 30, .09); }
.notice-date { background: rgba(252, 249, 243, .75); color: var(--navy); border-width: 2px; border-style: dashed; border-color: var(--royal-2); border-radius: 2px; }
.notice-date b { color: var(--navy); font-family: var(--font-head); }
.notice-date small { color: var(--royal-2); }
.event-date-box { background: var(--white); color: var(--navy); border-width: 2px; border-style: dashed; border-color: var(--royal-2); border-radius: 2px; box-shadow: none; }
.event-date-box b { color: var(--navy); font-family: var(--font-head); }
.event-date-box small { color: var(--royal-2); }
.cd-box { background: var(--navy); border-width: 1px; border-style: solid; border-color: var(--gold-2); border-radius: 2px; }

/* ---------- Testimonials ---------- */
.testimonial-card { background: var(--white); border: 1px solid rgba(74, 14, 30, .16); border-radius: 2px; box-shadow: 3px 3px 0 rgba(74, 14, 30, .06); }
.testimonial-card:hover { box-shadow: 5px 5px 0 rgba(74, 14, 30, .1); }
.testimonial-card .avatar { border-radius: 0; border-width: 2px; border-style: solid; border-color: var(--gold-2); }
.carousel-control-custom { border-radius: 2px; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--navy); border-width: 3px; border-style: double; border-color: var(--gold); border-radius: 2px; box-shadow: 6px 6px 0 rgba(0, 0, 0, .2); }
.cta-band::before, .cta-band::after { opacity: .35; filter: blur(20px); }
.cta-band h2 { letter-spacing: 1px; }

/* ---------- Section alt: print rule ---------- */
.section-alt { background: #F6EFDF; }
.section-alt::before { background: none; border-top: 2px dashed rgba(214, 155, 47, .5); height: 0; top: 8px; opacity: .8; }

/* ---------- Marquee ---------- */
.marquee-track span { font-family: var(--font-head); text-transform: uppercase; letter-spacing: 2.5px; color: var(--navy); }
.marquee-strip { background: var(--white); }

/* ---------- Ticker ---------- */
/* Old: .ticker { background: var(--navy); } (maroon) */
.ticker { background: #111844; }
/* Old: .ticker .label { background: var(--gold-2); ... } (flat yellow) */
.ticker .label { border-radius: 2px; background: linear-gradient(135deg, #F1C75B 0%, #D4AF37 100%); color: var(--navy); border-width: 1px; border-style: solid; border-color: var(--navy); font-family: var(--font-head); letter-spacing: 1.5px; }

/* ---------- Pills / profile ---------- */
.pill { border-radius: 2px; border: 1px solid rgba(74, 14, 30, .3); }
.pill.active { background: var(--navy); color: #fff; box-shadow: 3px 3px 0 rgba(74, 14, 30, .25); }
.profile-avatar { border-radius: 0; border-width: 3px; border-style: solid; border-color: var(--gold-2); box-shadow: 4px 4px 0 rgba(74, 14, 30, .15); }
.profile-card:hover .profile-avatar { transform: scale(1.04) rotate(-3deg); }

/* ---------- Check list ---------- */
.check-list li::before { content: "✔"; background: transparent; color: var(--gold-2); border-width: 1.5px; border-style: solid; border-color: var(--gold-2); border-radius: 0; }

/* ---------- Images / glass ---------- */
.img-card { border-radius: 2px; }
.img-frame { border-radius: 2px; box-shadow: 6px 6px 0 rgba(74, 14, 30, .12); }
.glass-card { background: rgba(252, 249, 243, .85); border: 1px solid rgba(74, 14, 30, .18); border-radius: 2px; }
.exp-badge { border-radius: 2px; background: var(--gold-2); color: var(--navy); border-width: 2px; border-style: solid; border-color: var(--navy); box-shadow: 4px 4px 0 var(--navy); }

/* ---------- Footer ---------- */
.footer::after { height: 4px; background: var(--gold-2); }
.footer h5 { text-transform: uppercase; letter-spacing: 2px; }
.footer h5::after { height: 2px; background: var(--gold-2); border-radius: 0; }
.footer-seal-rule { height: 1px; background: linear-gradient(90deg, transparent, var(--gold-2), transparent); }
.footer-motto { letter-spacing: 4px; }
.footer-social a { border-radius: 0; border: 1px solid rgba(255, 255, 255, .35); background: transparent; }

/* ---------- Page hero ---------- */
/* .page-hero::before { background: linear-gradient(120deg, rgba(58, 11, 22, .95), rgba(74, 14, 30, .9)); } */
/* .page-hero::before { background: linear-gradient(120deg, rgba(17, 24, 68, .45), rgba(17, 24, 68, .30)); } */
/* .page-hero::before { background: linear-gradient(120deg, rgba(17, 24, 68, .60), rgba(17, 24, 68, .45)); } */
/* .page-hero::before { background: linear-gradient(120deg, rgba(17, 24, 68, .72), rgba(17, 24, 68, .58)); } */
/* .page-hero::before { background: linear-gradient(120deg, rgba(17, 24, 68, .84), rgba(17, 24, 68, .72)); } */
.page-hero::before { background: linear-gradient(120deg, rgba(17, 24, 68, .90), rgba(17, 24, 68, .80)); }
/* .page-hero .crumbs { border-radius: 2px; background: rgba(74, 14, 30, .5); border: 1px dashed rgba(233, 184, 76, .7); letter-spacing: 1px; text-transform: uppercase; font-size: 12px; } */
.page-hero .crumbs { border-radius: 2px; background: rgba(17, 24, 68, .55); border: 1px dashed rgba(233, 184, 76, .7); letter-spacing: 1px; text-transform: uppercase; font-size: 12px; }

/* ---------- Forms / tables / accordion ---------- */
.form-premium .form-control, .form-premium .form-select { background: var(--white); border: 1.5px solid rgba(74, 14, 30, .3); border-radius: 2px; }
.form-premium .form-control:focus { border-color: var(--gold-2); box-shadow: 0 0 0 3px rgba(214, 155, 47, .18); }
.accordion-premium .accordion-item { border-radius: 2px !important; }
.accordion-premium .accordion-button { font-family: var(--font-head); }
.table-premium { border-radius: 2px; }
.table-premium th { font-family: var(--font-head); letter-spacing: 1px; }

/* ---------- Chat / float ---------- */
.chat-window, .msg, .chat-head .bot-avatar, .chat-input button, .chat-quick button { border-radius: 2px !important; }
.bot-avatar { background: var(--gold-2) !important; color: var(--navy) !important; }
.back-top { border-radius: 2px; background: var(--gold-2); }
.fab-btn { border-radius: 2px; }
.fab-menu { background: var(--navy); }
.fab .quick-menu { border-radius: 2px; }
.fab .quick-menu a { border-radius: 2px; }
.btn-circle { border-radius: 0; }
.message-card { border-radius: 2px; }

/* ==================================================================
   PHASE 1 - HERITAGE INSTITUTIONAL FOUNDATION
   ------------------------------------------------------------------
   Navy / burgundy / gold design foundation inspired by classic
   denominational-school institutional sites (St. Peter's, Agra).

   Implementation rules followed:
   - Appended only. Every rule above stays intact as the fallback.
   - style.css and legacy-content.css are NOT modified.
   - legacy-content.css loads LAST, so any selector that must beat its
     `.container h2-h5` / `.container p` rules is written at (0,2,0)+.
   - No keyframe animation is added to any `.reveal` element. main.js
     drives reveal via IntersectionObserver and the C# repeaters emit
     inline `animation-delay`; transitions only, so nothing is hidden.
   - No `.modal*`, `#popupid`, `img`, `body` or `body::before` rule is
     introduced, so the Bootstrap popup and the paper overlay are
     visually untouched.
   - No ornament asset was required: the section rule is pure CSS.
   ================================================================== */

/* ---------- 1. Heritage tokens (additive + normalised scale) ---------- */
:root {
  /* Institutional navy / royal blue */
  --navy-ink: #16264A;
  --navy-ink-2: #22386B;
  --royal-navy: #1E3A6E;
  --royal-dark: #12203F;

  /* Brand maroon */
  --burgundy: #6B1230;

  /* Gold */
  --gold-dark: #A67C1A;
  --gold-light: #F4E0AC;

  /* Surfaces */
  --surface: #FFFFFF;
  --surface-alt: #F7F2E8;

  /* Text */
  --text: #2C2A33;
  --muted: #6B6570;
  --text-muted: #6B6570;

  /* Hairlines */
  --border: #E4DACA;

  /* Elevation - one consistent scale */
  --shadow-sm: 0 2px 10px rgba(22, 38, 74, .06);
  --shadow-md: 0 14px 34px -12px rgba(22, 38, 74, .20);

  /* Consistent border-radius scale */
  --radius: 10px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* Display serif (no new webfont - no markup/head changes in Phase 1) */
  --font-display: Georgia, "Times New Roman", serif;
}

/* ---------- 2. Section rhythm & spacing ---------- */
.section { padding: 104px 0; }
.section-head { margin-bottom: 50px; }
/* #highlights ("The School at a Glance") directly follows the notice board, so
   its own top padding stacked on that section's bottom padding and left ~250px
   of dead space above the heading. Desktop only; the 104px the previous section
   already contributes keeps the gap comfortable. */
@media (min-width: 1200px) {
  #highlights { padding-top: 0; }
}
.section-alt { background: var(--surface-alt); }
/* Soften the retro dashed print rule into a restrained gold hairline. */
.section-alt::before {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgba(166, 124, 26, .22);
}

/* ---------- 3. Headings, eyebrow & gold ornament ---------- */
.section-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  transform: none;
  /* Old: color: var(--burgundy); (maroon) */
  color: var(--navy-ink); /* existing blue shade */
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
}
/* Re-enables the decorative gold bar (hidden earlier in this file) and
   keeps the existing width-transition + hover growth from style.css. */
.section-head .eyebrow::before {
  display: block;
  content: "";
  flex: none;
  width: 30px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-2));
}

.section-head .section-title {
  color: var(--navy-ink);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: .01em;
  text-shadow: none;
}
/* Accent word in headings is GOLD now (old burgundy kept as comment):
   Old: .section-head .section-title .g { color: var(--burgundy); } */
.section-head .section-title .g {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ---- Message pages (Chairman / Principal / Manager / Headmistress /
   Head Boy / Head Girl): person NAME + handwritten SIGNATURE only.
   Old colours: name = var(--navy) maroon (style.css .msg-photo-block
   .msg-profile-info h5 + the per-page inline <style> block), signature =
   var(--royal-2) (style.css .signature).
   !important + matching specificity beats the inline page <style>.
   Designation (.role), message body, titles and fonts untouched. ---- */
.message-card .msg-body .msg-photo-block .msg-profile-info h5,
.msg-photo-block .msg-profile-info h5 {
  color: var(--navy-ink) !important; /* existing blue shade */
}
.message-card .msg-body .signature,
.signature {
  color: var(--navy-ink) !important; /* existing blue shade */
}

/* ---- contact-us.aspx headings only. Scoped with :has() on the page's
   unique Google-Maps iframe (the previous scope `form.form-premium`
   never matched: the inner <form> tag is dropped by the browser because
   it sits inside the MasterPage server <form>).
   Old colour was the maroon var(--navy) from the global h1-h6 rule,
   .container h2-h5 (legacy-content.css) and .section-title (style.css).
   "Hear From You" stays gold via .section-title .g above. ---- */
section:has(iframe[title="School Location"]) h2.section-title {
  /* Old: color: var(--navy); (maroon) */
  color: var(--navy-ink) !important; /* existing blue shade */
}
section:has(iframe[title="School Location"]) .card-premium h5 {
  /* Old: color: var(--navy); (maroon, via .container h5) */
  color: var(--navy-ink) !important; /* existing blue shade */
}

.section-head .section-sub {
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1.8;
  max-width: 64ch;
}

/* Ornament: double gold rule under the heading block. The rule lives on
   .section-head so it works for centred and left-aligned heads alike. */
.section-title::after { content: none; }
.section-head::after {
  content: "";
  display: block;
  width: 240px;
  height: 18px;
  margin: 22px 0 0;
  background: url("../img/heading-line.svg") no-repeat center / contain;
}
.section-head.text-center::after { margin-left: auto; margin-right: auto; }

/* ---------- Hero section head on the message / principal pages ----------
   The content-section head on these pages is the unmodified school-timings.aspx
   pattern. Only the hero-side half needs adjusting.

   .page-hero .section-head - holds only the h1 + ornament. padding-top:0
      drops the 45/55px band that is reserved for an absolute eyebrow (there is
      none in the hero) and margin-bottom:0 drops the 50/40/34/32px content band
      so the hero keeps the same height and crumb spacing as every other page. */
.page-hero .section-head { padding-top: 0; margin-bottom: 0; }

/* ---------- Content head on the message / principal pages ----------
   The head itself is the unmodified school-timings.aspx pattern - span.eyebrow +
   h2.section-title, with the shared .section-head::after ornament 14px under the
   title. Nothing about the heading, its typography or the ornament is restated
   here; this file already styles it (navy title, burgundy .g, 240x18 SVG).

   The one thing that does need help is the gap below the ornament. Bootstrap's
   gutter classes give .row a NEGATIVE margin-top (g-4 -24px, g-5 -48px) which
   cancels the 32px margin-bottom of the head above it. school-timings.aspx uses
   g-4, so it keeps a correct 8px; the four message pages use g-5, which pushes
   the row 16px ABOVE the bottom of the head and lets the card overlap the gold
   bar (the same pre-existing collision mission-vision.aspx has). Restoring
   margin-top:0 gives those pages the 32px the rhythm above intends. */
.section-head.msg-head + .row { margin-top: 0; }

/* ---------- Section head rhythm (desktop): TITLE -> ORNAMENT -> TEXT -> CONTENT ----------
   Applies to every .section-head on the site. Two problems are fixed here:

   1. ORDER. The divider is .section-head::after, a pseudo-element, so it is
      always painted LAST - which meant every head that has a subtitle or
      description read TITLE -> TEXT -> ORNAMENT. Turning the head into a
      flex column and re-ordering its children puts the SAME ornament directly
      under the title: title -> ornament -> subtitle -> content.
      `:not(.d-flex)` skips the split gallery/video heads (they use .d-flex
      with a heading block plus a button on the right - a deliberately
      different design that is left exactly as it is).
      No `align-items` is set, so left/centre alignment is untouched; .eyebrow
      is position:absolute, stays out of flow and is not reordered.

   2. SPACING. The 22px ornament margin was sized for the old 7px double rule,
      and 50px under the head block was a large empty band above the cards.
      Now: 14px title -> ornament (the h2's own Bootstrap .5rem bottom margin is
      zeroed, since the ornament always follows the title inside the head),
      12px ornament -> text (and the subtitle's Bootstrap 1rem bottom margin is
      dropped so it cannot re-open the gap), 32px text -> cards.

   Desktop only (>=992px): the <=991.98px (40px) and <=767.98px (34px/16px/14px)
   values further down this file are untouched, so tablet and mobile keep their
   existing spacing and stacking. Presentation only - no markup, colour, font,
   card or backend change. */
@media (min-width: 992px) {
  .section-head:not(.d-flex) { display: flex; flex-direction: column; }
  .section-head:not(.d-flex) .section-title { order: 1; margin-bottom: 0; }
  .section-head:not(.d-flex)::after { order: 2; }
  .section-head:not(.d-flex) > p { order: 3; margin-top: 12px; margin-bottom: 0; }
  .section-head { margin-bottom: 32px; }
  .section-head::after { margin-top: 14px; }
}

/* ---------- Media page heads: gallery.aspx + video-gallery.aspx ----------
   One shared block so both pages get an identical head:

        eyebrow (unchanged, absolute, top-left)
        centered "Moments From School Life"
        the existing .section-head::after ornament, centered, directly below
        description (left)  +  action button (right) on one row
        cards

   Why it was broken: the ornament is .section-head::after, and these two heads
   are .d-flex, so the ornament was a THIRD flex item of the title row and
   justify-content-between pushed it to the far right, with the description
   buried inside the title block.

   Rows are forced with flex:0 0 100% on the title block and the ornament, and
   `order` puts the ornament between the title and the description row. The
   description had to become a direct child of .section-head (it used to live
   inside the title div) - that is the only markup change, no text/URL/data.

   Spacing: row-gap is zeroed because .gap-3 is `gap:1rem!important` and would
   otherwise double every row gap; each row then owns one margin - 14px under the
   title and 12px under the ornament (the same two values the plain
   .section-head heads use just above), then the shared .section-head
   margin-bottom (32px desktop) to the cards. column-gap is left alone.
   flex-wrap still drops the button below the description when the row runs out
   of width, so tablet and mobile keep stacking as before. The ornament's size,
   colours, radius and SVG are untouched - only its position changes. */
.media-head { row-gap: 0 !important; }
.media-head > div { order: 1; flex: 0 0 100%; text-align: center; }
/* flex:0 0 100% is the line-break mechanism - do NOT add max-width/width here:
   clamping the hypothetical main size makes the ornament fit beside the
   description again and it lands mid-row. The stretched box is harmless: the
   ornament is `no-repeat center / contain` with a fixed 18px height, so the SVG
   is height-constrained and renders the same 240x18 glyph, horizontally centred
   (measured centre offset from the head's centre: 0px). */
.media-head::after { order: 2; flex: 0 0 100%; margin-left: auto; margin-right: auto; }
.media-head > .section-sub { order: 3; margin-top: 12px; }
.media-head > .btn-ghost { order: 4; }
@media (min-width: 992px) {
  .media-head::after { margin-top: 14px; }
}

/* Dark section variants */
.bg-navy .section-head .section-title,
.section.bg-navy .section-head .section-title { color: #fff; }
.bg-navy .section-head .eyebrow,
.section.bg-navy .section-head .eyebrow { color: var(--gold-2); }

/* ---------- 4. Buttons ---------- */
.btn-premium,
.btn-outline-premium {
  border-radius: var(--radius-sm);
  font-weight: 600;
  letter-spacing: .04em;
  transition: background .3s, color .3s, border-color .3s, box-shadow .3s;
}
/* Replaces the looping gold shimmer with a static institutional gradient. */
.btn-premium {
  background: linear-gradient(135deg, var(--navy-ink), var(--royal-navy));
  background-size: 100% 100%;
  border: 1px solid rgba(166, 124, 26, .45);
  color: #fff;
  box-shadow: var(--shadow-sm);
  animation: none;
}
.btn-premium:hover,
.btn-premium:focus {
  background: linear-gradient(135deg, var(--navy-ink-2), var(--royal-dark));
  background-size: 100% 100%;
  border-color: var(--gold-2);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.btn-outline-premium {
  background: transparent;
  border: 1px solid rgba(166, 124, 26, .55);
  color: var(--navy-ink);
}
.btn-outline-premium:hover,
.btn-outline-premium:focus {
  background: var(--navy-ink);
  border-color: var(--navy-ink);
  color: #fff;
}
.btn-ghost {
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--border);
  border-bottom-color: var(--border);
  color: var(--navy-ink);
}
.btn-ghost:hover,
.btn-ghost:focus {
  background: var(--navy-ink);
  border-color: var(--navy-ink);
  color: #fff;
}

/* ---------- 5. Core cards ---------- */
.card-premium {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
/* Recolour the existing hover gradient frame to the heritage palette. */
.feature-card::after {
  background: linear-gradient(135deg, rgba(22, 38, 74, .75), rgba(233, 184, 76, .8)) border-box;
}
.card-premium .card-icon { color: var(--navy-ink); }
.card-premium p,
.card-premium li { color: var(--text-muted); }
.card-premium h3,
.card-premium h4,
.card-premium h5,
.card-premium h6 {
  /* !important: legacy-content.css loads AFTER this file and its
     `.container h2..h5 { color: var(--navy) }` (maroon) was winning
     over this blue rule for every card title. */
  color: var(--navy-ink) !important; /* existing blue shade */
}

.curriculum-card h4,
.fee-card h4 { color: var(--navy-ink); font-family: var(--font-display); }
.curriculum-card .check-list li,
.fee-card .check-list li { color: var(--text-muted); }

.message-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold-2);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* ---------- 6. Image / album cards ---------- */
.img-card { border-radius: var(--radius-md); }
.img-card-inner { border-radius: var(--radius-md); overflow: hidden; }
.album-card-link {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform .35s ease, box-shadow .35s ease;
}
.album-card-link .img-card { border-radius: var(--radius-md); }

/* ---------- 7. School Cabinet (school-cabinet.aspx) ---------- */
.cabinet-card {
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  text-align: center;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.cabinet-card .cc-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
}
.cabinet-card .cc-info { padding: 18px 16px 20px; }
.cabinet-card .cc-info h5 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--navy-ink);
}
.cabinet-card .cc-role {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

/* ---------- 8. Staff directory (staff-details.aspx) ---------- */
.staff-card {
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  text-align: center;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.staff-card .staff-photo-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
}
.staff-card .staff-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.staff-card .staff-info { padding: 16px 14px 18px; }
.staff-card .staff-info h5 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--navy-ink);
}
.staff-card .staff-role {
  font-size: 13px;
  color: var(--text-muted);
}

/* ---------- 9. Former Principals (former-principals.aspx) ---------- */
.former-principal-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.former-principal-card .fp-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center top;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
}
.former-principal-card .fp-info {
  flex: 1 1 auto;
  padding: 20px 22px 22px;
  text-align: center;
}
.former-principal-card .fp-info h5 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--navy-ink);
}
.former-principal-card .fp-role {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-dark);
}
.former-principal-card .fp-dates {
  display: inline-block;
  margin: 12px 0 0;
  padding: 5px 14px;
  border: 1px solid rgba(166, 124, 26, .4);
  border-radius: 999px;
  background: var(--surface-alt);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy-ink);
}
.former-principal-card .fp-dates i { color: var(--gold-dark); margin-right: 6px; }
.former-principal-card .fp-message {
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text-muted);
  text-align: left;
}

/* ---------- 10. Infrastructure (infrastructure.aspx) ---------- */
.infra-card {
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.infra-card .infra-img { overflow: hidden; background: var(--surface-alt); }
.infra-card .infra-img img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .5s ease;
}
.infra-card .infra-body { padding: 16px 18px 18px; }
.infra-card .infra-body h5 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--navy-ink);
}
.infra-card .infra-body p { margin: 0; font-size: 13.5px; color: var(--text-muted); }

/* ---------- 11. Tables ---------- */
.table-premium {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.table-premium th {
  background: linear-gradient(135deg, var(--navy-ink), var(--royal-navy));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--gold-2);
  padding: 15px 18px;
  vertical-align: middle;
}
.table-premium td {
  padding: 14px 18px;
  font-size: 14.5px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.table-premium tbody tr:nth-child(even) td { background: rgba(247, 242, 232, .6); }
.table-premium tbody tr:hover td { background: rgba(233, 184, 76, .1); color: var(--navy-ink); }
.table-premium tbody tr:last-child td { border-bottom: 0; }
.table-responsive { border-radius: var(--radius-md); }

/* ---------- 12. Forms ---------- */
.form-premium .form-control,
.form-premium .form-select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  font-size: 15px;
  color: var(--text);
  box-shadow: none;
  transition: border-color .25s, box-shadow .25s;
}
.form-premium .form-control:focus,
.form-premium .form-select:focus {
  background: var(--surface);
  border-color: var(--gold-dark);
  color: var(--text);
  box-shadow: 0 0 0 4px rgba(166, 124, 26, .14);
}
.form-premium label {
  color: var(--navy-ink);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .02em;
}
.form-premium .form-control::placeholder { color: var(--muted); }

/* ---------- 13. Hover elevation (pointer-capable devices only) ---------- */
@media (hover: hover) and (pointer: fine) {
  .card-premium:hover,
  .cabinet-card:hover,
  .staff-card:hover,
  .former-principal-card:hover,
  .infra-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: rgba(166, 124, 26, .45);
  }
  .album-card-link:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
  }
  /* Inset ring: paints inside the frame, so the JS parallax transform
     on .img-card img and the shine sweep on .img-card::after are safe. */
  .album-card-link:hover .img-card { box-shadow: inset 0 0 0 3px var(--gold-2); }
  .infra-card:hover .infra-img img { transform: scale(1.06); }
}

/* ---------- 14. Responsive safety ---------- */
@media (max-width: 1199.98px) {
  .section { padding: 88px 0; }
}
@media (max-width: 991.98px) {
  .section { padding: 72px 0; }
  .section-head { margin-bottom: 40px; }
  .section-head .section-title { font-size: 30px; }
  .section-head .section-sub { font-size: 16px; }
}
@media (max-width: 767.98px) {
  .section { padding: 60px 0; }
  .section-head { margin-bottom: 34px; }
  .section-head .eyebrow { font-size: 11px; letter-spacing: .22em; }
  .section-head .eyebrow::before { width: 22px; }
  .section-head .section-title { font-size: 25px; }
  .section-head .section-sub { font-size: 15.5px; line-height: 1.75; }
  .section-head::after { width: 180px; height: 14px; margin-top: 16px; }
  .cabinet-card .cc-info,
  .staff-card .staff-info { padding: 14px 12px 16px; }
  .former-principal-card .fp-info { padding: 18px 16px 20px; }
  .former-principal-card .fp-message { font-size: 14px; }
  .table-premium th,
  .table-premium td { padding: 12px 14px; font-size: 13.5px; }
}
@media (max-width: 575.98px) {
  .section { padding: 52px 0; }
  .section-head .section-title { font-size: 22px; }
  .section-head .section-sub { font-size: 15px; }
  .cabinet-card .cc-photo,
  .staff-card .staff-photo-wrap { aspect-ratio: 4 / 3; }
}

/* ---------- 15. Reduced-motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  .card-premium,
  .cabinet-card,
  .staff-card,
  .former-principal-card,
  .infra-card,
  .album-card-link,
  .btn-premium,
  .btn-outline-premium,
  .btn-ghost,
  .infra-card .infra-img img {
    transition: none;
  }
}

/* ==================================================================
   PHASE 2 - HEADER + NAVBAR (St. Peter's style floating overlay)
   ------------------------------------------------------------------
   Structure now mirrors the reference:
     1  .gold-line      thin utility strip, school identity left,
                        circular outlined contact / social icons right
     2  .logo-center    central crest, absolutely positioned so it
                        breaks out above the strip and hangs down over
                        the navigation bar
     3  .header-bottom  floating bar: max-width 1170px, 10px radius,
                        two-tone gradient, ONE centred <ul> split into
                        a left group and a right group by an empty
                        .logo-width spacer that reserves the crest gap
     4  #mobileNav      full-height cream drawer, enters from the left

   The header is absolutely positioned so it overlays the top page
   banner. Every page already opens with a full-bleed banner
   (.hero / .page-hero / .breadcrumb-area), so all three get extra
   top padding below to clear the hanging crest.

   Colour mapping (Phase 1 palette is preserved; the reference's
   navy + orange-red + gold scheme is expressed with Phase 1 tokens):
     reference #052354 navy      -> var(--navy-ink)   #16264A
     reference #E32F00 / #A72C17 -> var(--burgundy)   #6B1230
     reference #f5deaa / #f3e7cb -> var(--gold-light) #F4E0AC
     reference #F3EDE7 cream     -> var(--surface-alt) #F7F2E8

   Safety rules followed:
   - #mainNav and #mobileNav keep their ids; every href, dropdown,
     collapse target and aria attribute is unchanged.
   - z-index stays at 1030: below Bootstrap offcanvas (1045), backdrop
     (1050) and modal (1055), so the homepage popup is never covered.
   - The third-level "Office Bearers" reveal is still owned by the
     inline <style> in MasterPage.Master; only its appearance changes.
   - No main.js change. Sticky-on-scroll reuses the existing
     `.scrolled` class that main.js already toggles on #mainNav.
   ================================================================== */

/* ---------- 0. Overlay shell ---------- */
.retro-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1030;
}
/* Legibility scrim: the header sits on photography, so it carries its
   own soft top-down gradient exactly like the reference does. */
.retro-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150px;
  background: linear-gradient(180deg, rgba(10, 18, 38, .58) 0%, rgba(10, 18, 38, .26) 55%, rgba(10, 18, 38, 0) 100%);
  pointer-events: none;
  z-index: 0;
}
/* The bar is a compact centred card (1300px). The wrapper is sized to hug it
   so the card can never inherit an oversized container. */
.header-inner.mphead {
  max-width: 1200px !important;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 35px;
  position: relative;
  z-index: 1;
}

/* ---------- 1. Thin utility strip ---------- */
.gold-line {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.gold-line-name b {
  display: block;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .3px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(6, 12, 28, .75);
}
.gold-line-name small {
  display: block;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 1.4px;
  color: var(--gold-light);
  text-shadow: 0 1px 4px rgba(6, 12, 28, .75);
}
.gold-line-icons {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  float: none;
}
.gold-line-icons li {
  display: inline-flex;
  align-items: center;
  padding: 0 3px;
}
/* Hairline rule between icons, as in the reference. */
.gold-line-icons li + li::before {
  content: "";
  width: 1px;
  height: 16px;
  margin-right: 6px;
  background: rgba(255, 255, 255, .5);
}
.gold-line-icons li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 50%;
  background: rgba(10, 18, 38, .28);
  color: #fff;
  font-size: 10.5px;
  text-decoration: none;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.gold-line-icons li a:hover,
.gold-line-icons li a:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy-ink);
}

/* ---------- 2. Central crest ----------
   `top` is POSITIVE so the whole crest sits inside the viewport: the previous
   -8px offset pushed its top edge off-screen and clipped it. It still breaks
   out ABOVE the navbar card and hangs BELOW it, exactly like the reference. */
.logo-center {
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 128px;
  padding: 0 !important;
  display: block !important;
  text-align: center;
  z-index: 5;
}
.logo-center:hover,
.logo-center:focus-visible { opacity: .92; }
.logo-center .brand-logo {
  display: block;
  width: auto;
  height: 128px;
  flex: none;
  filter: drop-shadow(0 6px 16px rgba(6, 12, 28, .5));
}
.logo-center img.school-logo {
  display: block;
  width: auto;
  height: 128px;
  max-width: none;
  object-fit: contain;
  margin: 0 auto;
}

/* ---------- 3. Floating bar shell ---------- */
/* Compact centred rounded-rectangle card: narrower and shorter than before.
   Colour is a smooth premium RED -> BLUE run (left deep red, middle/right
   deep blue) with a subtle GOLD hairline border and a soft gold top
   highlight. Many closely-spaced stops are used so the red blends into the
   blue through plum instead of through a muddy brown, and there is NO gold
   strip / oversized gold top border anywhere (the old ::before gold layer is
   permanently disabled just below). */
.header-bottom {
  position: relative;
  /* Old: z-index: 1;
     STACKING FIX: z-index: 1 turned this bar into a stacking context, so
     EVERYTHING inside it (nav, dropdowns - even z-index: 9999) was capped
     below the centred crest, which is a SIBLING with z-index: 5. That is
     why the previous dropdown-only fix could never work. With `auto` the
     bar no longer traps its children; position stays relative so the bar
     still paints above the hero exactly as before. */
  z-index: auto;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 7px 18px;
  border-radius: 16px;
  /* Old maroon -> blue card gradient (preserved, not deleted):
     background: linear-gradient(96deg,
       #8e0f2e 0%,   -- deep red
       #9c1130 14%,  -- red highlight
       #86102f 26%,
       #7a1030 34%,
       #6a1030 40%,
       #5c1031 45%,
       #4e1132 50%,  -- red -> plum handover
       #401230 55%,
       #33142f 60%,
       #261632 66%,
       #191838 74%,  -- plum -> navy handover
       #0c1a40 100%); -- deep blue  */
  background: linear-gradient(96deg,
    #111844 0%,
    #151f52 30%,
    #131d4d 50%,
    #111a47 74%,
    #0c1a40 100%);
  border: 1px solid rgba(214, 173, 85, .30);
  box-shadow:
    inset 0 1px 0 rgba(233, 184, 76, .26),
    inset 0 -2px 6px rgba(0, 0, 0, .20),
    0 10px 26px rgba(0, 0, 0, .28);
}
/* Old gold decorative strip that used to sit above the navbar: neutralised. */
.header-bottom::before { display: none; }
/* Reset the base stylesheet's sticky white navbar. */
.navbar-main.navbar {
  position: static;
  top: auto;
  z-index: auto;
  min-height: 50px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.navbar-main.scrolled {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* ---------- 4. Desktop navigation (>= 1200px, matching the reference) ---------- */
@media (min-width: 1200px) {
  /* Wider card so every menu item + LOGIN sits inside the maroon/blue
     background; same shape and colours, only the max-width grows. */
  .header-bottom {
    max-width: min(1308px, 100%);
  }
  /* Crest: previous off-centre shift (preserved, not deleted):
       transform: translateX(-60px);
     Now the crest sits at the exact horizontal centre (50%) plus a small
     right nudge so it looks visually balanced with the left / right menu
     groups. Size and vertical position are untouched. */
  .logo-center {
    /* Old: transform: translateX(0); */
    transform: translateX(18px);
  }
  /* The base stylesheet hides the collapse with !important; same
     specificity, and this file loads later, so this wins. */
  /* Old: justify-content: center;  (one centred menu row)
     Old: justify-content: space-between; with no right inset
     Old: justify-content: space-evenly;  (pulled the LEFT group inward,
     so GALLERY slid under the crest)
     Now: 2-column grid - column 2 starts at the EXACT 50% centre of the
     bar, so the right group always begins right beside the crest no
     matter how wide the left group is, and the leftover space stays at
     the far right. */
  .navbar-main .navbar-collapse.main-menu-wrap {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    flex-basis: auto;
    width: 100%;
    padding: 0;
    justify-content: normal;
  }
  /* Left group stays flush left; the RIGHT group gets no inset so it can
     never slide under the crest (old inset preserved):
       margin-right: clamp(10px, 2vw, 32px);
     Tight internal spacing keeps both groups compact. */
  .navbar-main .navbar-nav.nav-menu-left {
    grid-column: 1;
    justify-self: start;
    padding-left: 0;
    /* Old: gap: clamp(6px, .8vw, 10px);
       Old: gap: clamp(14px, 1.2vw, 20px); */
    gap: clamp(16px, 1.3vw, 22px);
  }
  .navbar-main .navbar-nav.nav-menu-right {
    grid-column: 2;
    /* Old: justify-self: start;  (group stopped right after CONTACT and
       the right-hand space of the bar stayed empty) */
    justify-self: stretch;
    /* 76px = half of the 128px crest + 12px breathing room */
    margin-left: 76px;
    margin-right: 0;
    padding-right: 0;
    /* Old: gap: clamp(6px, .8vw, 10px);
       Old: gap: clamp(14px, 1.2vw, 20px); */
    gap: clamp(16px, 1.3vw, 22px);
  }
  /* Extra breathing room between the HOME circle and ABOUT US. */
  .navbar-main .nav-item.nav-home {
    margin-right: clamp(6px, .7vw, 12px);
  }
  /* LOGIN is pushed to the far right end of the bar, so the free space
     on the right side is used instead of being left empty. */
  .navbar-main .nav-item.nav-login {
    margin-left: auto;
  }
    /* Old: justify-content: center; width: 100%; max-width: 100%;
       Old: padding: 0 8px; gap: clamp(8px, 1.1vw, 14px);
       (overridden per group above so GALLERY clears the crest) */
    .navbar-main .navbar-nav {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        width: auto;
        max-width: none;
        flex: 0 0 auto;
        margin: 0;
        padding: 0 8px;
        gap: clamp(8px, 1.1vw, 14px);
    }
  .navbar-main .nav-item {
    position: relative;
    margin: 0;
    flex: 0 0 auto;
  }
  /* Vertical "|" separators between every menu item (desktop only).
     Skips the logo spacer, skips LOGIN (last item) and skips the item
     right before the spacer so no bar sits beside the crest.
     Placed dead-centre in the inter-item gap; pointer-events:none so
     hover / dropdown behaviour is untouched. */
  /* Old selectors (preserved, not deleted):
     .navbar-main .navbar-nav > .nav-item:not(.logo-width):not(:last-child):not(:has(+ .logo-width))::after {
     .navbar-main .navbar-nav > .nav-item:not(.logo-width):not(:last-child):not(:has(+ .logo-width)):not(:has(+ .nav-login))::after { */
  /* No "|" after CONTACT (directly followed by LOGIN) and NO "|" after
     the HOME icon (.nav-home, first item of the left group) - every
     other separator (including GALLERY -> ACHIEVEMENTS) stays. */
  .navbar-main .navbar-nav > .nav-item:not(.logo-width):not(.nav-home):not(:last-child):not(:has(+ .logo-width)):not(:has(+ .nav-login))::after {
    content: "|";
    position: absolute;
    top: 50%;
    /* Old: right: calc(clamp(8px, 1.1vw, 14px) / -2);
       Old: right: calc(clamp(6px, .8vw, 10px) / -2);
       Now matches the real menu gap, so the bar sits exactly in the
       middle of the gap -> equal ~8-11px space on its LEFT and RIGHT. */
    right: calc(clamp(16px, 1.3vw, 22px) / -2);
    transform: translate(50%, -50%);
    font-size: 12px;
    font-weight: 300;
    line-height: 1;
    color: rgba(243, 231, 211, .45);
    pointer-events: none;
  }
  /* The spacer that reserves the crest gap between the two groups. Its minimum
     is never narrower than the shifted 128px crest (+ the 10px left offset),
     so the hanging logo can never touch the neighbouring menu text. */
  .navbar-main .nav-item.logo-width {
    width: clamp(152px, 8vw, 160px);
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
  }
.navbar-main .nav-link {
    position: relative;
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(13px, 0.98vw, 16px);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    white-space: nowrap;
    /* Cream / off-white menu text on the red-to-blue card. */
    color: #f3e7d3 !important;
    padding: 15px 0 !important;
    transition: color .3s ease;
  }
  /* The 18px gold dash that grows in from the left on hover. */
  .navbar-main .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: auto;
    bottom: 13px;
    width: 0;
    height: 2px;
    background: var(--gold-2);
    border-radius: 0;
    transform: none;
    transform-origin: left;
    visibility: hidden;
    opacity: 0;
    transition: width .3s ease, opacity .3s ease, visibility .3s ease;
  }
  .navbar-main .nav-link:hover,
  .navbar-main .nav-link:focus-visible,
  .navbar-main .nav-link.active {
    color: #fff !important;
  }
  .navbar-main .nav-link:hover::after,
  .navbar-main .nav-link:focus-visible::after,
  .navbar-main .nav-link.active::after {
    width: 18px;
    visibility: visible;
    opacity: 1;
  }
  .navbar-main .nav-caret {
    font-size: 10px;
    margin-left: 7px;
    vertical-align: 2px;
    /* Small gold / yellow dropdown arrow. */
    color: var(--gold);
    opacity: 1;
  }
  .navbar-main .nav-link:hover .nav-caret,
  .navbar-main .nav-link.active .nav-caret { color: #fff; }

  /* Small elegant GOLD contact icon inside the Contact nav item. The Contact
     link stays in the same horizontal navbar; only an icon is added. */
  .navbar-main .nav-link .nav-gold-ic {
    font-size: 12px;
    margin-right: 7px;
    color: var(--gold);
    vertical-align: 1px;
  }
  .navbar-main .nav-link:hover .nav-gold-ic,
  .navbar-main .nav-link:focus-visible .nav-gold-ic { color: #fff; }

  /* ---- Dropdown: dark gradient panel, gold uppercase rows ---- */
  .navbar-main .nav-item .dropdown-menu {
    min-width: 280px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0 0 5px 5px;
    background: linear-gradient(90deg, var(--navy-ink) 32%, var(--burgundy) 100%);
    box-shadow: 0 18px 40px -12px rgba(6, 12, 28, .6);
  }
  .navbar-main .nav-item .dropdown-menu > li {
    margin: 0;
    padding: 0 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .25);
  }
  .navbar-main .nav-item .dropdown-menu > li:last-child { border-bottom: 0; }
  .navbar-main .nav-item .dropdown-menu .dropdown-item {
    position: relative;
    display: block;
    padding: 10px 0;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: .2px;
    text-transform: uppercase;
    color: var(--gold-light);
    background: transparent;
    border-radius: 0;
    transition: color .3s ease, padding-left .3s ease;
  }
  /* Small gold dash that slides out on hover. */
  .navbar-main .nav-item .dropdown-menu .dropdown-item::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 10px;
    height: 2px;
    background: var(--gold-2);
    transform: translateY(-50%);
    visibility: hidden;
    opacity: 0;
    transition: visibility .3s ease, opacity .3s ease;
  }
  .navbar-main .nav-item .dropdown-menu .dropdown-item:hover,
  .navbar-main .nav-item .dropdown-menu .dropdown-item:focus,
  .navbar-main .nav-item .dropdown-menu .dropdown-item.active {
    color: #fff;
    background: transparent;
    padding-left: 20px;
    font-weight: 600;
  }
  .navbar-main .nav-item .dropdown-menu .dropdown-item:hover::before,
  .navbar-main .nav-item .dropdown-menu .dropdown-item:focus::before,
  .navbar-main .nav-item .dropdown-menu .dropdown-item.active::before {
    visibility: visible;
    opacity: 1;
  }
  /* Level 3 "Office Bearers" - appearance only; the reveal itself is
     owned by the inline <style> in MasterPage.Master. */
  .navbar-main .dropdown-submenu > .dropdown-menu {
    min-width: 230px;
    border-radius: 0 5px 5px 0;
  }
  .navbar-main .dropdown-submenu > .dropdown-item { font-weight: 600; }
  .navbar-main .dropdown-submenu > .dropdown-item .submenu-caret {
    color: var(--gold);
    font-size: 10px;
    opacity: 1;
  }
  .navbar-main .dropdown-submenu > .dropdown-item:hover .submenu-caret { color: #fff; }

  /* LOGIN as button (stays as the last item of the right group; the row
     itself remains centred so the crest spacer stays under the logo) */
  .navbar-main .nav-item.nav-login .nav-link.nav-btn {
    /* Old solid gold/yellow look (preserved, not deleted):
       background: linear-gradient(135deg, var(--gold-dark), var(--gold-2));
       color: var(--navy-ink) !important; */
    /* Navy/blue body exactly like the HOME circle control + thin gold edge
       Old background: rgba(255, 255, 255, .10);
       Old colour: #f3e7d3 !important;
       Old height: 38px;  */
    background: #111844;
    border: 1px solid rgba(233, 184, 76, .75);
    box-shadow: inset 0 1px 0 rgba(233, 184, 76, .28);
    color: #fff !important;
    /* Old shape (preserved, not deleted):
       padding: 8px 16px !important;
       border-radius: 6px;
       margin-left: 4px;
       height: 34px;
       padding: 0 20px !important; */
    /* Pill shape, same 42px visual weight as the HOME circle */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Clean gap between the user icon and the LOGIN text */
    gap: 8px;
    height: 42px;
    padding: 0 26px !important;
    border-radius: 999px;
    margin-left: 10px;
    line-height: 1;
    transition: all .3s ease;
    font-weight: 600;
    letter-spacing: 1.2px;
  }
  .navbar-main .nav-item.nav-login .nav-link.nav-btn:hover,
  .navbar-main .nav-item.nav-login .nav-link.nav-btn:focus-visible {
    background: linear-gradient(135deg, var(--gold-2), var(--gold));
    color: var(--navy-ink) !important;
  }
  .navbar-main .nav-item.nav-login .nav-link.nav-btn::after {
    display: none;
  }

  /* ---- HOME = circular icon control (42 x 42), navy body + thin gold
     outline, white icon centred inside. Old 34px circle treatment is
     preserved in the comment below the rule. ---- */
  .navbar-main .nav-item.nav-home .nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0;
    padding: 0 !important;
    /* Same thin gold outline as the LOGIN button */
    border: 1px solid rgba(233, 184, 76, .75);
    box-shadow: inset 0 1px 0 rgba(233, 184, 76, .28);
    border-radius: 50%;
    /* Navbar base blue */
    background: #111844;
    font-size: 17px;
    line-height: 1;
    text-align: center;
    color: #fff !important;
    transition: all .3s ease;
  }
  .navbar-main .nav-item.nav-home .nav-link i {
    font-size: 17px;
    line-height: 1;
    display: block;
    color: #fff;
  }
  /* Exact same gold hover effect as the LOGIN button. */
  .navbar-main .nav-item.nav-home .nav-link:hover,
  .navbar-main .nav-item.nav-home .nav-link:focus-visible {
    background: linear-gradient(135deg, var(--gold-2), var(--gold));
    color: var(--navy-ink) !important;
  }
  .navbar-main .nav-item.nav-home .nav-link:hover i,
  .navbar-main .nav-item.nav-home .nav-link:focus-visible i {
    color: var(--navy-ink) !important;
  }
  /* No gold hover dash inside the circle. */
  .navbar-main .nav-item.nav-home .nav-link::after { display: none !important; }
  /* Old 34px circle look (preserved, not deleted):
     .navbar-main .nav-item.nav-home .nav-link { width: 34px; height: 34px;
       background: rgba(255, 255, 255, .10); color: #f3e7d3 !important;
       border: 1px solid rgba(255, 255, 255, .40); }  */
  /* LOGIN back INSIDE the navbar (float-out rule preserved, not deleted):
     .navbar-main .nav-item.nav-login {
       position: absolute;
       right: 18px;
       top: calc(100% + 10px);
       margin: 0;
       z-index: 6;
     }
     LOGIN is again a normal in-flow item at the far right of the bar. */

  /* Hover dropdown support */
  .navbar-main .nav-item.dropdown:hover > .dropdown-menu,
  .navbar-main .nav-item.dropdown:focus-within > .dropdown-menu {
    display: block;
  }
}

/* ---------- 5. Tablet / mobile bar (< 1200px): crest + hamburger ---------- */
@media (max-width: 1199.98px) {
  .header-bottom {
    max-width: 100%;
    padding: 8px 14px;
    border-radius: 14px;
  }
  .navbar-main.navbar {
    min-height: 54px;
    justify-content: flex-end;
    padding: 0;
  }
  .navbar-main .navbar-collapse { display: none !important; }
  .navbar-main .nav-actions {
    display: flex !important;
    align-items: center;
    flex: 0 0 auto;
  }
  .navbar-main .nav-actions .navbar-toggler.icon-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 4px;
    background: rgba(255, 255, 255, .1);
    color: var(--gold-light);
    font-size: 16px;
    box-shadow: none;
    transition: background-color .2s ease, color .2s ease;
  }
  .navbar-main .nav-actions .navbar-toggler.icon-btn:hover,
  .navbar-main .nav-actions .navbar-toggler.icon-btn:focus-visible {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--navy-ink);
  }
  .logo-center { top: 8px; width: 116px; }
  .logo-center .brand-logo { height: 112px; }
  .logo-center img.school-logo { height: 112px; }
  .gold-line-name b { font-size: 12px; }
  .gold-line-name small { font-size: 9px; letter-spacing: 1.1px; }
}

/* ---------- 6. Banner clearance for the hanging crest ----------
   The crest hangs below the bar, so each top banner needs matching
   top padding. Values track the crest height per breakpoint. */
.hero-content,
.page-hero,
.breadcrumb-area { padding-top: 172px; }

@media (max-width: 1199.98px) {
  .hero-content,
  .page-hero,
  .breadcrumb-area { padding-top: 124px; }
}

/* ---------- 7. Small mobile ---------- */
@media (max-width: 767.98px) {
  .logo-center { top: 6px; width: 100px; }
  .logo-center .brand-logo { height: 96px; }
  .logo-center img.school-logo { height: 96px; }
  .gold-line { height: 34px; }
  .gold-line-name { display: none; }
  .gold-line-icons { margin-left: auto; }
  .gold-line-icons li a { width: 25px; height: 25px; font-size: 9.5px; }
  .hero-content,
  .page-hero,
  .breadcrumb-area { padding-top: 104px; }
}

@media (max-width: 575.98px) {
  .logo-center { top: 4px; width: 86px; }
  .logo-center .brand-logo { height: 82px; }
  .logo-center img.school-logo { height: 82px; }
  .header-bottom { padding: 6px 10px; border-radius: 12px; }
  .navbar-main.navbar { min-height: 50px; padding: 0; }
  .hero-content,
  .page-hero,
  .breadcrumb-area { padding-top: 90px; }
}

@media (max-width: 359.98px) {
  .gold-line-icons li:nth-child(n+4) { display: none; }
  .logo-center { top: 3px; width: 76px; }
  .logo-center .brand-logo { height: 74px; }
  .logo-center img.school-logo { height: 74px; }
  .hero-content,
  .page-hero,
  .breadcrumb-area { padding-top: 82px; }
}

/* ---------- 8. Mobile drawer (#mobileNav) ----------
   Full-height cream panel entering from the left, as in the reference. */
#mobileNav.offcanvas {
  background: var(--surface-alt);
  border-right: 0;
}
#mobileNav .offcanvas-header {
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
#mobileNav .offcanvas-header .brand-text b {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--navy-ink);
}
#mobileNav .offcanvas-body { padding: 6px 20px 28px; }
#mobileNav .nav-link {
  padding: 12px 0 !important;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .2px;
  text-transform: uppercase;
  color: var(--navy-ink);
  background: transparent;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  transition: color .2s ease;
}
#mobileNav .nav-link:hover,
#mobileNav .nav-link:focus-visible,
#mobileNav .nav-link.active { color: var(--burgundy); }
#mobileNav .nav-link i { color: var(--gold-dark); font-size: 12px; }
#mobileNav .mobile-sub { padding-left: 14px; }
#mobileNav .mobile-sub .dropdown-item {
  display: block;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border-left: 2px solid transparent;
  border-radius: 0;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
#mobileNav .mobile-sub .dropdown-item:hover,
#mobileNav .mobile-sub .dropdown-item:focus,
#mobileNav .mobile-sub .dropdown-item.active {
  color: var(--burgundy);
  background: rgba(214, 155, 47, .12);
  border-left-color: var(--gold-2);
  font-weight: 600;
}
#mobileNav hr { border-color: var(--border); opacity: 1; }

/* ---------- 9. Sticky on scroll ----------
   Reuses the `.scrolled` class main.js already toggles on #mainNav, so
   no JavaScript change is needed. The crest shrinks back into the bar
   so nothing is clipped once the header is pinned. If :has() is not
   supported the header simply stays in its absolute overlay state. */
.retro-header:has(#mainNav.scrolled) {
  position: fixed;
  top: 0;
}
.retro-header:has(#mainNav.scrolled)::before { height: 100px; }
/* The crest NO LONGER shrinks on scroll. Its top offset, width and height are
   pinned to exactly the unscrolled values and no transform/scale is applied,
   so the logo is pixel-identical before and after scrolling. The utility
   strip is hidden but its 38px of space is PRESERVED (visibility, not
   display), which keeps the bar and the crest in the exact same place and
   preserves the same above/below overlap. */
.retro-header:has(#mainNav.scrolled) .gold-line { visibility: hidden; }
.retro-header:has(#mainNav.scrolled) .logo-center { top: 4px; width: 128px; }
.retro-header:has(#mainNav.scrolled) .logo-center .brand-logo { height: 128px;  }
.retro-header:has(#mainNav.scrolled) .logo-center img.school-logo { height: 128px; }
.retro-header:has(#mainNav.scrolled) .navbar-main .nav-item.logo-width { 
width: clamp(152px, 8vw, 160px); }
/* ---------- 10. Landscape / very short viewports ---------- */
@media (max-height: 520px) and (max-width: 1199.98px) {
   .logo-center { top: 4px; }
   .logo-center .brand-logo { height: 92px; }
   .logo-center img.school-logo { height: 92px; }
  .hero-content,
  .page-hero,
  .breadcrumb-area { padding-top: 96px; }
}

/* ---------- 11. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .gold-line-icons li a,
  .navbar-main .nav-link,
  .navbar-main .nav-link::after,
  .navbar-main .nav-item .dropdown-menu .dropdown-item,
  .navbar-main .nav-item .dropdown-menu .dropdown-item::before,
  .navbar-main .nav-actions .navbar-toggler.icon-btn,
  #mobileNav .nav-link,
  #mobileNav .mobile-sub .dropdown-item {
    transition: none;
  }
  .navbar-main .nav-link::after { transition: none; }
}

/* ================================================================
   MOBILE HEADER ONLY (max-width: 767.98px)
   ---------------------------------------------------------------
   Phones get just the school logo (left) and the hamburger (right),
   on one vertically centred row, with NO pill behind them so the
   hero / video shows through.

   Everything is inside this one query, and it is appended last in the
   file, so the 575.98px and 359.98px logo/pill overrides and the
   short-viewport block above cannot leak in. 768px and up is
   completely untouched: desktop and tablet keep the maroon->blue
   pill, the centred hanging crest and the utility strip.

   1. Kills the pill: .header-bottom is the rounded card that carries
      the maroon -> blue linear-gradient(96deg, #8e0f2e ... #0c1a40),
      the gold hairline border and the drop shadow. All four go, so
      no maroon, no blue and no rounded container remains.
   2. .header-inner becomes a single flex row. Previously the crest
      (.logo-center) was position:absolute and horizontally centred,
      which is why the logo and the hamburger sat on different rows
      (measured centres 45px vs 66px at 390px wide). Static +
      space-between puts the logo hard left and the hamburger hard
      right, centred on the same axis.
   3. Logo pinned to 80px - inside the 75-90px band - with
      flex:none so it can never be squeezed by the flex row.
   4. The button keeps its own markup, attributes and offcanvas
      target, so its function is unchanged; only its wrapper is
      de-padded so it sits flush right.

   Padding is 8px, not 10px, on purpose. .retro-header is position:absolute,
   so the header height eats into the hero's own padding-top (82px @320,
   90px @390, 104px @767). The bar was 98px before this change; 80 + 8 + 8
   = 96px keeps it UNDER that, so the overlay covers less hero than it
   used to at every width instead of covering more. No hero rule is edited.
   ================================================================ */
@media (max-width: 767.98px) {
  /* ---- 1. no pill: no maroon, no blue, no radius, no shadow ---- */
  .header-bottom {
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  /* ---- 2. one row: logo left, hamburger right, centred ---- */
  .header-inner.mphead {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  /* Only the logo and the hamburger remain in the mobile header. The
     utility strip (phone / email / social) leaves the bar; every one of
     those links is still present and reachable in the #mobileNav drawer,
     so nothing is removed from the page. */
  .gold-line { display: none !important; }

  /* ---- 3. logo: left, fixed 80px, never shrinks or collapses ---- */
  .logo-center {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    text-align: left !important;
  }
  .logo-center .brand-logo,
  .logo-center img.school-logo {
    height: 70px !important;
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    object-fit: contain !important;
  }

  /* ---- 4. hamburger: flush right, size and function untouched ---- */
  .navbar-main.navbar {
    min-height: 0 !important;
    padding: 0 !important;
  }
  .navbar-main .nav-actions {
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }
  .navbar-main .nav-actions .navbar-toggler.icon-btn { flex: 0 0 38px !important; }

  /* main.js toggles .scrolled on #mainNav at scrollY > 40 on EVERY
     viewport, and rule 9 above then pins the crest to 152x150 through
     .retro-header:has(#mainNav.scrolled) - specificity (1,4,0), which
     would beat a plain override and blow the logo up mid-scroll. Mirror
     those selectors here at the same specificity so the 80px holds. */
  .retro-header:has(#mainNav.scrolled) .logo-center { top: auto !important; width: auto !important; }
  .retro-header:has(#mainNav.scrolled) .logo-center .brand-logo,
  .retro-header:has(#mainNav.scrolled) .logo-center img.school-logo {
    height: 80px !important;
    width: auto !important;
  }
}