/* ============================================
   MMS CENTRE OF EXCELLENCE — DESIGN SYSTEM
   Display + Body: Inter (loaded below) — readable, not thin, not condensed
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Official MMS brand colors, matched to ricemms.com and the school's Site
     Appearance CMS settings (content/settings.json). theme.js overrides these
     live from the CMS, these are just the correct values baked in as defaults. */
  --navy: #1800AD;
  --navy-2: #452DC6;
  --navy-3: #6851D9;
  --ink: #14213D;
  --orange: #FF6200;
  --orange-2: #FF7E26;
  --red: #9C0607;
  --red-2: #A51E1F;
  --gold: #F2C477;
  --teal: #1D8A8A;

  /* Dutch Orange — menu banner background. Unified with the new --orange
     brand color (2026 refresh); kept as its own variables (rather than
     just reusing --orange) so the nav banner's light/base/deep gradient
     can still be tuned independently if needed. */
  --dutch-orange: #FF6200;
  --dutch-orange-light: #FF804D;
  --dutch-orange-deep: #E04500;
  --paper: #FFFFFF;
  --paper-2: #F5F7FA;
  --line: #E4E8EF;
  --muted: #5B6B84;

  /* lab accent colors — matched to the school's own hexagon diagram */
  --lab-steam: #3E9B4F;
  --lab-science: #1E6FB8;
  --lab-vr: #2457C5;
  --lab-math: #7A4FC9;
  --lab-auto: #C23B3B;
  --lab-composite: #D9A017;
  --lab-comm: #E07B1C;
  --lab-elec: #1D9E8F;
  --lab-space: #1B2A6B;
  --lab-culinary: #B8562F;
  --lab-infotech: #2E5AAC;

  /* department accent colors */
  --dept-arts: #A8336B;
  --dept-commerce: #0F6B4C;
  --dept-math-science: #1B5FA8;
  --dept-nios: #6B3FA0;
  --dept-science: #1B5FA8;
  --dept-mathematics: #0E7C86;
  --dept-social-science: #B8562F;
  --dept-language: #C0862E;
  --dept-e-arts: #A8336B;
  --dept-physical-education: #2E7D32;
  --dept-coe: #FF6200;
  --dept-ertdu: #4A4A8C;
  --dept-ict: #0D6E6E;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 10px 30px -12px rgba(5, 0, 116, 0.25);
  --shadow-sm: 0 4px 14px -6px rgba(5, 0, 116, 0.18);
  --maxw: 1180px;
}

* { box-sizing: border-box; }
/* overflow-anchor: none (page-wide) -- the compact header (see "Compact
   header on scroll" below) intentionally shrinks by ~120-130px as soon as
   the visitor starts reading, so the content underneath moves up to fill
   that freed space. Chrome/Firefox's automatic scroll anchoring treats that
   the same as an accidental layout shift (like a late-loading image) and
   "corrects" scrollY to cancel it out -- which here undoes the collapse
   threshold, re-expanding the header, which re-triggers the collapse, in a
   feedback loop. Confirmed by logging scrollY through the transition: it
   was jumping back toward 0 on its own mid-scroll, not from any user input.
   That fighting-the-browser correction was the real cause of the reported
   scroll glitch, worst at slow scroll speeds where there's time to see it.
   Disabling anchoring site-wide lets our own intentional reflow happen
   without the browser fighting it. */
html { scroll-behavior: smooth; scroll-padding-top: 92px; overflow-anchor: none; }

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: 17px;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
h3, h4 { font-weight: 700; }

p { margin: 0 0 1em; color: var(--ink); font-size: 1rem; }

@media (max-width: 700px) {
  body { font-size: 16px; }
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  font-family: var(--font);
  font-size: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
@media (max-width: 700px) {
  .eyebrow { font-size: 16px; }
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-family: var(--font);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  border: 2px solid transparent;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 45%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-20deg);
  transition: left 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 1;
}
.btn:hover::after { left: 130%; }
.btn:active { transform: translateY(0) scale(0.97); transition-duration: 0.1s; }
.btn-primary {
  background: var(--orange);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 16px 30px -10px rgba(224,123,28,0.55); background: var(--orange-2); }
.btn-outline {
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}
.btn-outline:hover { border-color: #fff; transform: translateY(-3px) scale(1.02); box-shadow: 0 12px 26px -12px rgba(0,0,0,0.4); }
.btn-outline.dark { border-color: var(--navy); color: var(--navy); }
.btn-outline.dark:hover { background: var(--navy); color: #fff; transform: translateY(-3px) scale(1.02); box-shadow: 0 12px 26px -12px rgba(11,26,58,0.4); }

/* ---------- Install App button (Android web visitors only) ---------- */
/* .btn's own display:inline-flex otherwise overrides the [hidden] attribute
   (same fix as .lab-gallery[hidden] above) -- keep it hidden until main.js
   deliberately reveals it for the right visitors. */
.btn-install-app[hidden] { display: none !important; }
.btn-install-app {
  background: linear-gradient(135deg, #3DDC84, #0F9D58);
  color: #fff;
  box-shadow: 0 4px 16px rgba(15,157,88,0.4);
  animation: install-app-glow 2.6s ease-in-out infinite;
}
.btn-install-app:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 30px -8px rgba(15,157,88,0.55);
  animation-play-state: paused;
}
.btn-install-app svg { width: 18px; height: 18px; flex: 0 0 auto; }
@keyframes install-app-glow {
  0%, 100% { box-shadow: 0 4px 16px rgba(15,157,88,0.4); }
  50% { box-shadow: 0 4px 22px rgba(15,157,88,0.75); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-install-app { animation: none; }
}

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* The compact-header transition shrinks this element's own height by
     ~120-130px. Chrome/Firefox's automatic scroll anchoring can pick this
     sticky header (always partly in view) as the page's "anchor" element,
     and when the anchor's own box shrinks, the browser silently adjusts
     scrollY to compensate -- which here drops scrollY back below the
     collapse threshold, un-collapsing the header, which pushes scrollY back
     up past the threshold, re-collapsing it, in a feedback loop. That loop
     is the real cause of the reported flicker/glitch during slow scrolling
     (confirmed by logging scrollY across the transition: it was jumping
     150 -> 22 -> 150 -> 22 on its own, not from any user input). Opting
     this element out of anchor selection stops the browser from using its
     own resize as a reason to move the scroll position. */
  overflow-anchor: none;
  /* A sticky element with a box-shadow/gradient background is a known
     Chrome/Edge repaint-flicker trigger during scroll -- most visible on
     slow, small-increment scrolling. Promoting it to its own compositing
     layer (rather than repainting it against the page on every scroll
     frame) eliminates the flicker without changing how it looks. */
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  /* Dutch Orange, given a raised/embossed "projected panel" finish: a
     top-to-bottom sheen gradient, an inset highlight along the top edge and
     an inset shadow along the bottom edge (the bevel), plus an outer drop
     shadow so the whole banner reads as a 3D rectangle sitting above the
     page rather than a flat bar. */
  background: linear-gradient(180deg, var(--dutch-orange-light) 0%, var(--dutch-orange) 45%, var(--dutch-orange-deep) 100%);
  box-shadow:
    0 16px 32px -14px rgba(140, 66, 0, 0.55),
    0 1px 0 rgba(255,255,255,0.65) inset,
    0 -5px 9px rgba(110, 50, 0, 0.3) inset;
  border-bottom: 1px solid rgba(110, 50, 0, 0.4);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 28px;
  /* Full-bleed, unlike the rest of the site's --maxw-capped content — this
     pushes the logo to the true left edge and gives the button grid every
     spare pixel of width, rather than sitting centered with wasted margins
     on wide screens. */
  max-width: none;
  margin: 0;
}
/* Logo + school name + search: a single stacked column that hugs its own
   content and sits flush left, so the button grid on the right gets all
   the remaining space. */
.brand-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;
}
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--navy);
  text-decoration: none;
}
/* Full square logo — the complete mark (ring emblem + MMS wordmark) shown
   uncropped, not clipped into a circle. A soft rounded-square "plate" with
   its own bevel keeps it feeling part of the 3D banner. */
.brand img {
  width: clamp(52px, 5vw, 88px);
  height: clamp(52px, 5vw, 88px);
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 12px;
  flex-shrink: 0;
  background: #fff;
  box-shadow:
    0 6px 14px -6px rgba(110,50,0,0.45),
    0 0 0 2px rgba(255,255,255,0.7);
}
/* max-height is given a real starting number (not the default "none") so the
   compact-header transition below has two numeric endpoints to interpolate
   between. Transitioning from "none" is not smoothly animatable -- browsers
   snap it to the end value partway through the transition instead of easing,
   which showed up as a visible pop/glitch mid-collapse, most noticeable when
   scrolling slowly enough to see the individual frames. */
.brand-text { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.15; min-width: 0; max-height: 60px; }
.brand-text strong { font-family: var(--font); font-size: clamp(15px, 1.4vw, 20px); font-weight: 800; letter-spacing: 0.01em; white-space: normal; color: var(--navy); }
.brand-text span { font-family: var(--font); font-size: 10px; color: rgba(5,0,116,0.72); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; margin-top: 2px; font-weight: 700; }

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
  justify-content: flex-end;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  display: block;
  white-space: nowrap;
  color: rgba(255,255,255,0.88);
  font-size: 14px;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: color 0.25s cubic-bezier(.2,.8,.2,1),
              background 0.25s cubic-bezier(.2,.8,.2,1),
              box-shadow 0.3s cubic-bezier(.2,.8,.2,1),
              transform 0.3s cubic-bezier(.34,1.56,.64,1),
              border-color 0.25s ease;
}
/* Silver-coated, projected 3D finish on hover */
.nav-links a:hover {
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff 0%, #e7e9ed 42%, #b7bdc7 100%);
  border-color: rgba(255,255,255,0.85);
  box-shadow:
    0 10px 18px -8px rgba(0,0,0,0.5),
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 -4px 6px rgba(20,33,61,0.18) inset;
  transform: translateY(-3px) scale(1.05);
}
/* Selected / current page: stays highlighted with its own raised, glowing finish */
.nav-links a.active {
  color: #fff;
  background: linear-gradient(180deg, #ff8a52 0%, var(--orange) 55%, #c53200 100%);
  border-color: rgba(255,255,255,0.4);
  box-shadow:
    0 8px 18px -6px rgba(255,66,0,0.55),
    0 1px 0 rgba(255,255,255,0.55) inset,
    0 -4px 6px rgba(0,0,0,0.25) inset;
}
.nav-links a.active:hover {
  color: #fff;
  transform: translateY(-3px) scale(1.05);
  filter: brightness(1.08);
  box-shadow:
    0 12px 22px -6px rgba(255,66,0,0.65),
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 -4px 6px rgba(0,0,0,0.25) inset;
}
.nav-links > li { display: flex; align-items: center; }
@media (prefers-reduced-motion: reduce) {
  .nav-links a { transition-duration: 0.01ms !important; transform: none !important; }
}
/* Desktop: the nav pills sit directly on the Dutch Orange banner, so they
   get navy text plus their own small bevel (each pill reads as its own
   raised chip "organised" on the 3D panel). At 900px and below, .nav-links
   instead becomes a dropdown sheet on --navy (see the max-width:900px
   block below), so the original light-on-navy scheme is kept there. */
@media (min-width: 901px) {
  /* Uniform button grid: every top-level item (16 today — plain links and
     dropdown triggers alike) sits in an equal-width cell across 4 columns,
     so the whole cluster reads as one tidy rectangle instead of pills that
     wrap wherever their text happens to end. If items are added or removed,
     revisit the column count so it still divides evenly. */
  .nav-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 10px;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }
  .nav-links > li { width: 100%; }
  .nav-links a {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    text-align: center;
    padding: 10px 10px;
    color: var(--navy);
    background: rgba(255,255,255,0.22);
    border-color: rgba(255,255,255,0.4);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.55) inset,
      0 3px 7px -4px rgba(120,55,0,0.4);
  }
  .has-dropdown { width: 100%; }
  .nav-links a.active {
    color: #fff;
    background: linear-gradient(180deg, var(--navy-3) 0%, var(--navy) 58%, #030050 100%);
    border-color: rgba(255,255,255,0.45);
    box-shadow:
      0 8px 18px -7px rgba(5,0,116,0.6),
      0 1px 0 rgba(255,255,255,0.4) inset,
      0 -4px 6px rgba(0,0,0,0.3) inset;
  }
  .nav-links a.active:hover {
    color: #fff;
    filter: brightness(1.15);
  }
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--navy);
  font-size: 24px;
  cursor: pointer;
}

/* ---------- Dropdown (Partnerships, etc.) ---------- */
.has-dropdown { position: relative; z-index: 1; }
.dropdown-toggle {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 11px;
  cursor: pointer;
  padding: 6px 8px 6px 0;
  transition: transform 0.15s ease, color 0.15s ease;
}
.has-dropdown.open .dropdown-toggle,
.has-dropdown:hover .dropdown-toggle { transform: rotate(180deg); color: #fff; }
.dropdown-menu {
  list-style: none;
  margin: 0;
  padding: 8px;
  display: none;
}
@media (min-width: 901px) {
  /* Raise the open dropdown (and its trigger pill) above every other nav
     item, so a submenu never gets visually buried under the nav items on
     the row below it. */
  .has-dropdown:hover,
  .has-dropdown.open {
    z-index: 60;
  }
  /* Invisible bridge over the visual gap between the trigger and the menu,
     so moving the mouse from one to the other never drops out of :hover
     and closes the menu before you can reach it. */
  .has-dropdown::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 12px;
  }
  .dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 240px;
    background: var(--navy-2);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    box-shadow: var(--shadow);
    z-index: 60;
  }
  .has-dropdown:hover .dropdown-menu,
  .has-dropdown.open .dropdown-menu { display: block; }
  /* Chevron trigger sits on the orange banner itself at desktop widths, so
     it needs the same navy treatment as the pills — placed here (after the
     base .dropdown-toggle rules above) so it actually wins the cascade. */
  .dropdown-toggle { color: rgba(5,0,116,0.6); }
  .has-dropdown.open .dropdown-toggle,
  .has-dropdown:hover .dropdown-toggle { color: var(--navy); }
}
.dropdown-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
}
.dropdown-menu a:hover { background: rgba(255,255,255,0.08); color: #fff; }
/* Non-clickable section headers inside a dropdown (e.g. "Governance" /
   "School Leadership" under Governance & Leadership) -- small caps, muted,
   with a divider before every group after the first. */
.dropdown-menu .dropdown-group-label {
  padding: 10px 12px 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  cursor: default;
}
.dropdown-menu .dropdown-group-label:not(:first-child) {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--navy);
    flex-direction: column;
    align-items: stretch;
    padding: 10px 24px 20px;
    gap: 2px;
    display: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    max-height: calc(100vh - 72px);
    overflow-y: auto;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 14px; }
  .nav-links > li { flex-wrap: wrap; }
  .has-dropdown { display: flex; flex-wrap: wrap; justify-content: space-between; }
  .has-dropdown > a { flex: 1; }
  .dropdown-menu { width: 100%; background: rgba(255,255,255,0.04); border-radius: 10px; margin-top: 4px; }
  .has-dropdown.open .dropdown-menu { display: block; }
  .dropdown-menu a { padding-left: 26px; }
  .dropdown-menu .dropdown-group-label { padding-left: 26px; }
}

/* ---------- Compact header on scroll ----------
   As soon as the visitor starts reading (scrolls past a small threshold),
   main.js adds .is-scrolled to <body>. The header collapses from its full
   height (logo + school name + search, alongside the full nav grid) down to
   a slim single bar (small logo + hamburger toggle) — roughly a 90% height
   reduction — so the nav banner stops eating the screen while reading.
   The hamburger reuses the existing mobile .nav-links/.open pattern so the
   full menu is always one tap away, at any screen width, while scrolled. */
.site-header,
.nav,
.brand-col,
.nav-search {
  transition: padding 0.3s ease, gap 0.3s ease, max-height 0.3s ease, opacity 0.25s ease, margin 0.3s ease;
}
body.is-scrolled .nav { padding: 8px 20px; }
body.is-scrolled .brand-col { gap: 0; }
/* .brand, .brand img and .brand-text are intentionally left OUT of the
   transition above and switch instantly instead of easing in. .brand's
   flex-direction goes column -> row here, and flex-direction can't be
   animated -- browsers always snap it immediately, no interpolation. With
   the logo's width/height and the school-name text's max-height still
   easing smoothly for ~250-300ms *after* that instant snap, the row layout
   spent that whole window rendering with stale, oversized child boxes
   before they caught up -- an oversized logo and a not-yet-collapsed name
   overlapping the nav pills, which had already reflowed into their final
   spot. That mismatched in-between state was the reported flicker/
   double-image look, most visible scrolling slowly enough to actually see
   it. Snapping the logo and name in the same instant as the flex-direction
   change removes that mismatched frame entirely; .nav's padding, .brand-col's
   gap and .nav-search (none of which sit inside a flex-direction change)
   keep the smooth ease so the collapse still feels animated overall. */
body.is-scrolled .brand { flex-direction: row; gap: 10px; }
body.is-scrolled .brand img { width: 36px; height: 36px; border-radius: 8px; }
body.is-scrolled .brand-text {
  max-height: 0;
  opacity: 0;
  margin: 0;
  overflow: hidden;
}
body.is-scrolled .nav-search {
  max-height: 0;
  opacity: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Reveal the hamburger toggle at every screen width once scrolled, and hide
   the always-visible desktop nav grid behind it — same collapse the mobile
   layout already uses below 900px. */
body.is-scrolled .nav-toggle { display: block; }
@media (min-width: 901px) {
  body.is-scrolled .nav-links { display: none; }
  body.is-scrolled .nav-links.open {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    position: absolute;
    top: 100%;
    right: 28px;
    left: auto;
    width: min(760px, calc(100vw - 56px));
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    background: var(--navy);
    padding: 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: var(--shadow);
    gap: 6px;
  }
  body.is-scrolled .nav-links.open a {
    color: rgba(255,255,255,0.88);
    background: none;
    box-shadow: none;
  }
  body.is-scrolled .nav-links.open a:hover {
    color: var(--ink);
    background: linear-gradient(180deg, #ffffff 0%, #e7e9ed 42%, #b7bdc7 100%);
  }
  body.is-scrolled .nav-links.open a.active {
    color: #fff;
    background: linear-gradient(180deg, #ff8a52 0%, var(--orange) 55%, #c53200 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-header, .nav, .brand-col, .nav-search { transition-duration: 0.01ms !important; }
}

/* ---------- Back to top (floating button, all pages) ----------
   Injected by main.js on every page (see initBackToTop) so it doesn't need
   to be hand-added to ~35 HTML files. Fades in once the visitor has
   scrolled a bit, and smooth-scrolls back to the top on click. */
.back-to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--dutch-orange-light) 0%, var(--dutch-orange) 45%, var(--dutch-orange-deep) 100%);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 12px 26px -10px rgba(140,66,0,0.55), 0 1px 0 rgba(255,255,255,0.55) inset;
  opacity: 0;
  transform: translateY(14px) scale(0.88);
  pointer-events: none;
  z-index: 500;
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(.34,1.56,.64,1), box-shadow 0.2s ease;
}
.back-to-top.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.back-to-top:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 16px 30px -10px rgba(140,66,0,0.65); }
.back-to-top:active { transform: translateY(0) scale(0.96); }
.back-to-top svg { width: 22px; height: 22px; }
@media (max-width: 640px) {
  .back-to-top { right: 14px; bottom: 14px; width: 44px; height: 44px; }
  .back-to-top svg { width: 20px; height: 20px; }
}

/* ---------- Floating WhatsApp button (all pages) ----------
   Injected by main.js on every page (see initWhatsAppButton), the same way
   as the back-to-top button above -- pinned to the opposite bottom corner
   so the two never overlap. Always visible; opens a WhatsApp chat. */
.whatsapp-float {
  position: fixed;
  left: 22px;
  bottom: 22px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25D366;
  color: #fff;
  box-shadow: 0 12px 26px -10px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.3) inset;
  z-index: 500;
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), box-shadow 0.2s ease;
}
.whatsapp-float:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 16px 30px -10px rgba(0,0,0,0.55); }
.whatsapp-float:active { transform: translateY(0) scale(0.96); }
.whatsapp-float svg { width: 30px; height: 30px; }
@media (max-width: 640px) {
  .whatsapp-float { left: 14px; bottom: 14px; width: 50px; height: 50px; }
  .whatsapp-float svg { width: 27px; height: 27px; }
}

/* ---------- Floating "Rate & Review" button (all pages) ----------
   Fixed to the right edge, vertically centered. Glassy/translucent at
   rest, brightens into a warm orange/gold glow on hover. Links to
   reviews.html from every page in the site. */
.rv-float-btn {
  position: fixed;
  top: 50%;
  right: 22px;
  transform: translateY(-50%);
  z-index: 500;
  width: 60px; height: 60px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.4);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 8px 24px -8px rgba(20,33,61,0.4), inset 0 1px 0 rgba(255,255,255,0.5);
  color: var(--navy);
  font-size: 25px;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.rv-float-btn:hover, .rv-float-btn:focus-visible {
  transform: translateY(-50%) scale(1.1);
  background: linear-gradient(145deg, var(--gold), var(--orange));
  color: #fff;
  border-color: rgba(255,255,255,0.7);
  box-shadow: 0 14px 30px -6px rgba(255,98,0,0.55), inset 0 1px 0 rgba(255,255,255,0.6);
}
.rv-float-label {
  position: absolute; right: 72px; top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: var(--navy); color: #fff; font-size: 12.5px; font-weight: 700;
  padding: 7px 13px; border-radius: 8px; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.rv-float-btn:hover .rv-float-label, .rv-float-btn:focus-visible .rv-float-label {
  opacity: 1; transform: translateY(-50%) translateX(0);
}
@media (max-width: 640px) {
  .rv-float-btn { width: 50px; height: 50px; right: 14px; font-size: 21px; }
  .rv-float-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rv-float-btn { transition-duration: 0.01ms; }
}

/* ---------- Floating action stack (all pages) ----------
   Wraps .rv-float-btn alone on most pages; on index.html, admissions.html
   and contact.html it also holds the page-specific Get Directions button
   so the two sit in one column without overlapping. */
.float-actions {
  position: fixed; top: 50%; right: 22px; transform: translateY(-50%);
  z-index: 500; display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
}
.float-actions > .rv-float-btn { position: static; transform: none; }
.float-actions > .rv-float-btn:hover, .float-actions > .rv-float-btn:focus-visible { transform: scale(1.1); }
@media (max-width: 640px) {
  .float-actions { right: 14px; }
}

/* ---------- Admission enquiry popup (all pages) ----------
   Injected by main.js the first time a visitor loads any page in a browser
   session (see initAdmissionPopup), spotlighting the online admission /
   enquiry form. Dismissible via the close button, the backdrop, or Escape;
   sessionStorage keeps it from reappearing on later pages the same visit. */
.admission-popup-overlay {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(10, 6, 40, 0.6);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease;
}
.admission-popup-overlay.is-open { opacity: 1; visibility: visible; }
.admission-popup {
  position: relative;
  background: #fff;
  border-radius: var(--radius, 14px);
  max-width: 420px;
  width: 100%;
  padding: 34px 28px 28px;
  text-align: center;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.45);
  transform: translateY(18px) scale(0.96);
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1);
}
.admission-popup-overlay.is-open .admission-popup { transform: translateY(0) scale(1); }
.admission-popup-close {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  border: none; background: var(--paper-2, #f3f3f3);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; color: var(--muted);
  cursor: pointer; transition: background 0.15s ease;
}
.admission-popup-close:hover { background: #e5e5e5; }
.admission-popup h3 { margin: 10px 0 10px; font-size: 22px; line-height: 1.3; }
.admission-popup p { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin: 0 0 22px; }
.admission-popup .btn { width: 100%; }
@media (max-width: 480px) {
  .admission-popup { padding: 28px 20px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: opacity 0.2s ease; }
}

/* ---------- Nav right-hand cluster (toggle + links) ---------- */
/* Fills all the space .brand-col doesn't use. Site search now lives under
   the logo, in .brand-col, not here. */
.nav-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}
.nav-links { order: 1; }
.nav-toggle { order: 2; }

/* ---------- Site search ---------- */
/* Sits under the logo/school-name block as its own small pill button,
   labelled so it stays discoverable now that it's off the top-right corner. */
/* max-height given a real starting number for the same reason as .brand-text
   above -- see that comment. Without it, this element's collapse to 0 on
   scroll snaps instead of easing, out of step with the smoothly-animating
   padding/gap around it. */
.nav-search { position: relative; max-height: 60px; }
.search-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  height: auto;
  padding: 7px 16px;
  background: rgba(255,255,255,0.3);
  border: 1px solid rgba(5,0,116,0.18);
  border-radius: 999px;
  color: var(--navy);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.search-toggle:hover,
.search-toggle[aria-expanded="true"] {
  background: #fff;
  color: var(--navy);
  transform: translateY(-2px);
  box-shadow: 0 10px 18px -10px rgba(5,0,116,0.5);
}
.search-toggle svg { width: 16px; height: 16px; flex: 0 0 auto; }

.search-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 360px;
  max-width: calc(100vw - 32px);
  background: var(--navy-2);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 12px;
  z-index: 200;
}
.search-panel[hidden] { display: none; }
.search-input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.07);
  color: #fff;
  font-size: 14px;
  font-family: var(--font);
  outline: none;
  box-sizing: border-box;
}
.search-input::placeholder { color: rgba(255,255,255,0.45); }
.search-input:focus { border-color: var(--gold); background: rgba(255,255,255,0.12); }

.search-hint,
.search-empty {
  margin: 10px 2px 2px;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
}

.search-results {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  max-height: 360px;
  overflow-y: auto;
}
.search-results li + li { margin-top: 2px; }
.search-results a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: rgba(255,255,255,0.9);
  font-size: 14px;
  font-weight: 500;
}
.search-results a:hover,
.search-results a.is-active { background: rgba(255,255,255,0.1); color: #fff; }
.search-result-title { flex: 1; }
.search-result-tag {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}

/* ---------- Ask AI ---------- */
.search-ask-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.07);
  color: #fff;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.search-ask-btn:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.32); }
.search-ask-btn:disabled { opacity: 0.6; cursor: default; }

.search-ai-answer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.search-ai-loading {
  margin: 0;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  font-style: italic;
}
.search-ai-text {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.94);
}
.search-ai-sources {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.search-ai-sources a {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
}
.search-ai-sources a:hover { background: rgba(255,255,255,0.16); }
.search-ai-error {
  margin: 0;
  font-size: 13px;
  color: #ffb4a3;
}

@media (max-width: 900px) {
  .search-panel { left: -6px; width: min(360px, calc(100vw - 20px)); }
}

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 60%, var(--navy-3) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.hero .wrap {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 50px;
  align-items: center;
  padding-top: 88px;
  padding-bottom: 72px;
  position: relative;
  z-index: 2;
}
.hero h1 {
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  color: #fff;
}
.hero h1 .accent { color: var(--gold); }
.hero-sub {
  font-size: 18px;
  color: rgba(255,255,255,0.82);
  max-width: 46ch;
  margin-bottom: 30px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 30px; }
.hero-stats { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 36px; }
.hero-stats div { border-left: 2px solid var(--orange); padding-left: 14px; }
.hero-stats strong { display: block; font-family: var(--font); font-size: 26px; color: #fff; }
.hero-stats span { font-size: 12.5px; color: rgba(255,255,255,0.65); font-family: var(--font); letter-spacing: 0.04em; }

.hero-media {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
  aspect-ratio: 4/5;
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Hero slideshow: auto-crossfading photos ---------- */
.hero-slideshow { position: relative; width: 100%; height: 100%; }
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease;
}
.hero-slide.is-active { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}

/* A hero slide can also be a click-to-play video (see initVideoModal in
   main.js): a plain <button> styled to fill the slide exactly like the
   photo slides, with a play icon centred over the video's thumbnail. */
.hero-slide-video {
  display: block; width: 100%; height: 100%;
  padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
}
.hero-slide-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 74px; height: 74px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.94); color: var(--orange);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 30px -10px rgba(0,0,0,0.5);
  z-index: 2;
  transition: transform 0.2s ease, background 0.2s ease;
}
.hero-slide-video:hover .hero-slide-play { transform: translate(-50%, -50%) scale(1.08); background: #fff; }
.hero-slide-play svg { width: 30px; height: 30px; margin-left: 4px; }
@media (max-width: 640px) {
  .hero-slide-play { width: 56px; height: 56px; }
  .hero-slide-play svg { width: 24px; height: 24px; }
}

/* An inline video player -- a thumbnail button (see initInlineVideoPlayers
   in main.js) that swaps itself for a real, playing embed on click,
   right where it sits on the page (no popup, no leaving the site). Reuses
   .hero-slide-play above for the play icon. */
.inline-video-player {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
}
.inline-video-player img { width: 100%; height: 100%; object-fit: cover; display: block; }
.inline-video-player:hover .hero-slide-play { transform: translate(-50%, -50%) scale(1.08); background: #fff; }
.inline-video-player-frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.inline-video-player-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10,37,64,0.55) 100%);
}
.hex-badge {
  position: absolute;
  bottom: 18px; left: 18px;
  z-index: 3;
  background: rgba(255,255,255,0.94);
  color: var(--navy);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.hero-bg-hex {
  position: absolute;
  right: -120px;
  top: -80px;
  width: 560px;
  height: 560px;
  opacity: 0.12;
  z-index: 1;
  pointer-events: none;
}

@media (max-width: 900px) {
  .hero .wrap {
    grid-template-columns: 1fr;
    padding-top: 40px;
    padding-bottom: 48px;
    gap: 34px;
  }
  .hero-media { order: -1; aspect-ratio: 16/11; max-width: 420px; margin: 0 auto; }
  .hero-stats { gap: 20px 28px; }
}

/* ---------- Sections ---------- */
section { padding: 84px 0; }
@media (max-width: 700px) {
  section { padding: 56px 0; }
  .quote-block, .cta-band { padding: 34px 26px !important; }
}
.section-alt { background: var(--paper-2); }
.section-navy { background: var(--navy); color: #fff; }
.section-navy .eyebrow { color: var(--gold); }
.section-navy p { color: rgba(255,255,255,0.78); }

.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.section-head-wide { max-width: none; }
.section-head.section-head-wide p { max-width: 980px; }
.section-head h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.section-head p { font-size: 17px; color: var(--muted); }
.section-navy .section-head p { color: rgba(255,255,255,0.75); }

/* ---------- Cards / Grids ---------- */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

.lab-card {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}
.lab-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.lab-card .lab-tag {
  height: 6px;
  width: 100%;
}
.lab-card-body { padding: 26px; }
.lab-num {
  font-family: var(--font);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.08em;
  margin-bottom: 10px;
  display: block;
}
.lab-card h3 { font-size: 19px; margin-bottom: 8px; }
.lab-card p { font-size: 14.5px; color: var(--muted); margin-bottom: 0; }
.lab-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  font-size: 22px;
}
.lab-icon svg { width: 24px; height: 24px; }
a.lab-card { text-decoration: none; color: inherit; }
.lab-card .lab-more { font-size: 13.5px; font-weight: 700; color: var(--orange); margin-top: 12px; display: inline-block; }
.lab-card .lab-more .arrow { display: inline-block; transition: transform 0.35s cubic-bezier(.34,1.56,.64,1); }

/* ---------- Labs showcase: icon badges + dynamic motion (labs.html grid only) ---------- */
.labs-showcase .lab-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1), box-shadow 0.45s ease;
}
.labs-showcase .lab-card:hover {
  transform: translateY(-10px) scale(1.015);
  box-shadow: 0 24px 46px -16px rgba(5,0,116,0.38);
}
.labs-showcase .lab-card:hover .lab-tag { box-shadow: 0 0 18px 2px var(--accent, var(--orange)); }
.labs-showcase .lab-card:hover .lab-more .arrow { transform: translateX(5px); }

/* ---------- Resource link cards (e.g. CBSE Official Resources) ---------- */
.resource-links .lab-card:hover .lab-more .arrow { transform: translate(3px, -3px); }
@media (prefers-reduced-motion: reduce) {
  .resource-links .lab-card { transition-duration: 0.01ms !important; }
  .resource-links .lab-card .lab-more .arrow { transition-duration: 0.01ms !important; }
}
.labs-showcase .lab-card:hover h3 { color: var(--accent, var(--ink)); transition: color 0.3s ease; }

/* rotating gradient ring, revealed on hover */
.labs-showcase .lab-card::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from 0deg, transparent 0 62%, var(--accent, var(--orange)) 80%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: lab-ring-spin 3s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.labs-showcase .lab-card:hover::before { opacity: 1; }
@keyframes lab-ring-spin { to { transform: rotate(360deg); } }

/* shine sweep across the card on hover */
.labs-showcase .lab-card::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-16deg);
  transition: left 0.85s ease;
  pointer-events: none;
  z-index: 2;
}
.labs-showcase .lab-card:hover::after { left: 130%; }

.labs-showcase .lab-card-body { position: relative; z-index: 1; }

.labs-showcase .lab-icon-badge {
  width: 78px; height: 78px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
  box-shadow: 0 10px 22px -8px rgba(5,0,116,0.4), 0 0 0 4px #fff;
  animation: lab-icon-float 4.6s ease-in-out infinite;
  transition: transform 0.5s cubic-bezier(.34,1.56,.64,1), box-shadow 0.5s ease;
}
.labs-showcase .lab-icon-badge img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.6s ease;
}
.labs-showcase .lab-card:hover .lab-icon-badge {
  animation-play-state: paused;
  transform: scale(1.1) rotate(-6deg);
  box-shadow: 0 16px 30px -8px var(--accent, rgba(5,0,116,0.4)), 0 0 0 4px #fff;
}
.labs-showcase .lab-card:hover .lab-icon-badge img { transform: scale(1.14) rotate(4deg); }
@keyframes lab-icon-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
.labs-showcase .grid-4 > a:nth-child(4n+1) .lab-icon-badge { animation-delay: 0s; }
.labs-showcase .grid-4 > a:nth-child(4n+2) .lab-icon-badge { animation-delay: .7s; }
.labs-showcase .grid-4 > a:nth-child(4n+3) .lab-icon-badge { animation-delay: 1.4s; }
.labs-showcase .grid-4 > a:nth-child(4n+4) .lab-icon-badge { animation-delay: 2.1s; }

/* per-card staggered flow-in, replacing the section-level fade */
.labs-showcase .lab-card[data-reveal] {
  transform: translateY(36px) scale(0.94);
  filter: blur(5px);
  transition: opacity 0.75s cubic-bezier(.16,.84,.44,1), transform 0.75s cubic-bezier(.16,.84,.44,1), filter 0.75s ease;
}
.labs-showcase .lab-card[data-reveal].is-visible {
  transform: none;
  filter: blur(0);
}
.labs-showcase .lab-card[data-reveal].is-visible:hover {
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1), box-shadow 0.45s ease, filter 0.75s ease;
}
@media (prefers-reduced-motion: reduce) {
  .labs-showcase .lab-icon-badge,
  .labs-showcase .lab-card::before { animation: none; }
  .labs-showcase .lab-card,
  .labs-showcase .lab-card[data-reveal] { transition-duration: 0.01ms; }
}

/* ---------- Lab detail pages ---------- */
.lab-icon-lg {
  width: 64px; height: 64px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.lab-icon-lg svg { width: 32px; height: 32px; }
.lab-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 700px) { .lab-gallery { grid-template-columns: repeat(2, 1fr); } }
/* .lab-gallery's own display:grid otherwise overrides the [hidden] attribute
   (same-origin CSS beats the browser's UA stylesheet regardless of order),
   so a "view more" gallery marked hidden would still render -- and the
   gallery-toggle button above it would appear to do nothing. Force it shut
   until the toggle script removes the attribute. */
.lab-gallery[hidden] { display: none !important; }
.lab-gallery figure { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--paper-2); border: 1px solid var(--line); }
.lab-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.lab-gallery figcaption { padding: 10px 12px; font-size: 13px; color: var(--muted); }
.gallery-empty, .activities-empty, .lab-events-empty {
  text-align: center; color: var(--muted); padding: 26px;
  background: var(--paper-2); border-radius: var(--radius); font-size: 14.5px;
}
.activity-list { display: flex; flex-direction: column; gap: 14px; }
.activity-item {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 22px; box-shadow: var(--shadow-sm);
}
.activity-item h4 { font-size: 16px; margin-bottom: 4px; }
.activity-item .activity-date { font-size: 12.5px; color: var(--orange); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.activity-item p { font-size: 14.5px; color: var(--muted); margin: 6px 0 0; }
.activity-source-link { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--orange); text-decoration: none; }
.activity-source-link:hover { text-decoration: underline; }
.lab-events-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .lab-events-grid { grid-template-columns: 1fr; } }

/* ---------- Achievement / project cards ---------- */
.project-card {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.project-media { aspect-ratio: 16/10; overflow: hidden; }
.project-media img { width: 100%; height: 100%; object-fit: cover; }
.project-body { padding: 22px 24px 26px; }
.project-body .eyebrow { margin-bottom: 8px; }
.project-body h3 { font-size: 19px; margin-bottom: 8px; }
.project-body p { color: var(--muted); font-size: 14.5px; margin-bottom: 0; }

.version-tag {
  display: inline-block;
  font-family: var(--font);
  font-size: 11px;
  background: var(--navy);
  color: #fff;
  padding: 3px 9px;
  border-radius: 999px;
  margin-right: 6px;
}

/* ---------- Quote block ---------- */
.quote-block {
  background: linear-gradient(135deg, var(--orange) 0%, var(--red) 100%);
  color: #fff;
  border-radius: 20px;
  padding: 56px;
  text-align: center;
  position: relative;
}
.quote-block blockquote {
  font-family: var(--font);
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  font-weight: 600;
  margin: 0 auto;
  max-width: 780px;
  line-height: 1.35;
}
.quote-block cite {
  display: block;
  margin-top: 20px;
  font-family: var(--font);
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* ---------- Timeline (used for evolution / process) ---------- */
.flow {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}
.flow-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 24px;
  box-shadow: var(--shadow-sm);
  font-family: var(--font);
  font-weight: 600;
  text-align: center;
  min-width: 160px;
}
.flow-item span { display: block; font-family: var(--font); font-weight: 400; font-size: 13px; color: var(--muted); margin-top: 4px; }
.flow-arrow { font-size: 24px; color: var(--orange); }

/* ---------- Partner / logo strip ---------- */
.partner-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow-sm);
}
.partner-card img { border-radius: var(--radius-sm); margin-bottom: 18px; aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.partner-card h3 { font-size: 19px; margin-bottom: 8px; }
.partner-card p { color: var(--muted); font-size: 14.5px; }

/* ---------- Team / people grid ---------- */
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; }
.people-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.people-card img { aspect-ratio: 1; object-fit: cover; }
.people-card .pname { padding: 10px 8px 2px; font-size: 13px; font-weight: 600; font-family: var(--font); }
.people-card .prole { padding: 0 8px 2px; font-size: 11.5px; color: var(--muted); }
.people-card .pqual { padding: 0 8px 12px; font-size: 10.5px; color: var(--muted); font-style: italic; opacity: 0.85; }
.people-group { margin-bottom: 36px; }
.people-group:last-child { margin-bottom: 0; }
.people-group h3 { font-size: 15px; margin-bottom: 16px; color: var(--navy); }

/* ---------- Stat strip ---------- */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
@media (max-width: 700px) { .stat-strip { grid-template-columns: repeat(2, 1fr); } }
.stat-strip .stat strong {
  display: block;
  font-family: var(--font);
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  color: var(--orange);
}
.stat-strip .stat span {
  font-family: var(--font);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* ---------- Split feature ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.split.reverse .split-media { order: 2; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
}
.split-media img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; }
.split-text .eyebrow { margin-bottom: 12px; }
.split-text h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin-bottom: 16px; }
.split-text ul { padding-left: 20px; margin: 18px 0; color: var(--muted); }
.split-text li { margin-bottom: 8px; }

/* ---------- Placeholder photo (used until MMS supplies an actual photo) ---------- */
.photo-placeholder {
  aspect-ratio: 4/5;
  border-radius: var(--radius);
  border: 2px dashed var(--line);
  background: var(--paper-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--muted);
  text-align: center;
  padding: 24px;
}
.photo-placeholder .ph-icon { font-size: 40px; opacity: 0.5; }
.photo-placeholder span { font-size: 13.5px; font-weight: 600; }

/* ---------- Reserved photo slot inside a .lab-gallery (empty until MMS adds the photo) ---------- */
.lab-gallery figure.pending-photo { border: none; background: transparent; }
.lab-gallery figure.pending-photo .photo-placeholder { aspect-ratio: 4/3; }

/* ---------- Copyright badge for project photo galleries ---------- */
/* Add class="copyright-gallery" to a .lab-gallery, then class="copyright-badge"
   on a <span> inside each <figure> (alongside the <img>) once a real photo
   is added, e.g.:
   <figure>
     <img src="..." alt="...">
     <span class="copyright-badge">&copy; MMS CoE</span>
     <figcaption>...</figcaption>
   </figure>
*/
.copyright-gallery figure { position: relative; }
.copyright-gallery img { object-fit: contain; background: #0b0b12; }
.copyright-gallery .copyright-badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  background: rgba(5, 0, 116, 0.75);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 3px 9px;
  border-radius: 999px;
  pointer-events: none;
}

/* ---------- Leadership message pages ---------- */
.message-quote {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--navy);
  margin: 0 0 20px;
}
.message-signoff strong { display: block; font-size: 16px; }
.message-signoff span { display: block; font-size: 13.5px; color: var(--muted); margin-top: 2px; }

/* ---------- Page header (interior pages) ---------- */
.page-hero {
  background: var(--navy);
  color: #fff;
  padding: 64px 0 56px;
}
.page-hero h1 { font-size: clamp(2rem, 3.6vw, 2.8rem); color: #fff; }
.page-hero p { color: rgba(255,255,255,0.75); max-width: 60ch; font-size: 17px; margin-bottom: 0; }
.page-hero.has-bg-image {
  background: linear-gradient(180deg, rgba(5,0,116,0.90) 0%, rgba(5,0,116,0.94) 100%), url('../images/coe-hexagon-diagram.jpg') center/cover no-repeat;
}
/* Centred variant -- used on achievements.html so the headline statement
   sits in the middle of the hero instead of the usual left-aligned intro. */
.page-hero.hero-center .wrap { text-align: center; }
.page-hero.hero-center p { margin-left: auto; margin-right: auto; }
.page-hero .lab-num { color: rgba(255,255,255,0.8); }
.breadcrumb {
  font-family: var(--font);
  font-size: 12px;
  color: var(--gold);
  letter-spacing: 0.06em;
  margin-bottom: 14px;
  text-transform: uppercase;
}

/* ---------- Achievements quick-nav (jump to Students / School & Faculty) ---------- */
.achv-quicknav { padding: 44px 0 8px; }
.achv-quicknav-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
}
.achv-quicknav-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1 320px;
  max-width: 440px;
  padding: 20px 26px;
  border-radius: 18px;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.achv-quicknav-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 45%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-20deg);
  transition: left 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 1;
}
.achv-quicknav-btn:hover::after { left: 130%; }
.achv-quicknav-btn.students {
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-2) 65%, #ffb46b 100%);
  box-shadow: 0 8px 22px -10px rgba(255,98,0,0.5), 0 0 0 1px rgba(255,255,255,0.08) inset;
  animation: achv-glow-orange 3.2s ease-in-out infinite;
}
.achv-quicknav-btn.faculty {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 65%, var(--navy-3) 100%);
  box-shadow: 0 8px 22px -10px rgba(24,0,173,0.5), 0 0 0 1px rgba(255,255,255,0.08) inset;
  animation: achv-glow-navy 3.2s ease-in-out infinite;
  animation-delay: 0.6s;
}
.achv-quicknav-btn:hover {
  transform: translateY(-6px) scale(1.02);
  animation-play-state: paused;
}
.achv-quicknav-btn.students:hover { box-shadow: 0 18px 34px -10px rgba(255,98,0,0.65), 0 0 0 1px rgba(255,255,255,0.14) inset; }
.achv-quicknav-btn.faculty:hover { box-shadow: 0 18px 34px -10px rgba(24,0,173,0.65), 0 0 0 1px rgba(255,255,255,0.14) inset; }
.aqn-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  background: rgba(255,255,255,0.18);
  border-radius: 14px;
}
.aqn-text { display: flex; flex-direction: column; gap: 3px; }
.aqn-title { font-family: var(--font); font-weight: 700; font-size: 16.5px; line-height: 1.25; }
.aqn-sub { font-size: 12.5px; color: rgba(255,255,255,0.8); font-weight: 400; }
.aqn-arrow {
  margin-left: auto;
  font-size: 19px;
  opacity: 0.85;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  flex-shrink: 0;
}
.achv-quicknav-btn:hover .aqn-arrow { transform: translateY(5px); }
@keyframes achv-glow-orange {
  0%, 100% { box-shadow: 0 8px 22px -10px rgba(255,98,0,0.5), 0 0 0 1px rgba(255,255,255,0.08) inset; }
  50% { box-shadow: 0 8px 30px -6px rgba(255,130,38,0.75), 0 0 0 1px rgba(255,255,255,0.12) inset; }
}
@keyframes achv-glow-navy {
  0%, 100% { box-shadow: 0 8px 22px -10px rgba(24,0,173,0.5), 0 0 0 1px rgba(255,255,255,0.08) inset; }
  50% { box-shadow: 0 8px 30px -6px rgba(104,81,217,0.75), 0 0 0 1px rgba(255,255,255,0.12) inset; }
}
@media (prefers-reduced-motion: reduce) {
  .achv-quicknav-btn { animation: none; }
}
@media (max-width: 560px) {
  .achv-quicknav-btn { flex: 1 1 100%; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: rgba(255,255,255,0.7); padding: 56px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 40px; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-grid h4 { color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--font); margin-bottom: 16px; }
.footer-grid a { display: block; color: rgba(255,255,255,0.65); font-size: 14.5px; margin-bottom: 10px; }
.footer-grid a:hover { color: var(--gold); }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.footer-brand img { width: 44px; height: 44px; border-radius: 50%; }
.footer-brand strong { font-family: var(--font); color: #fff; font-size: 17px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
}

/* ---------- Utilities ---------- */
.tag-list { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.tag {
  font-family: var(--font);
  font-size: 11.5px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--navy);
}
.section-navy .tag { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16); color: #fff; }

.cta-band {
  background: var(--navy);
  color: #fff;
  border-radius: 22px;
  padding: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}
.cta-band h2 { color: #fff; margin-bottom: 8px; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.cta-band p { color: rgba(255,255,255,0.72); margin: 0; }

[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Gallery photos: staggered dynamic entrance ----------
   Every .lab-gallery figure (all photo galleries site-wide) rises, sharpens
   and fades in one after another as its section scrolls into view, instead
   of appearing all at once. Purely CSS, driven off the section's existing
   [data-reveal].is-visible state, so it needs no extra JS and degrades
   gracefully (images just appear) for reduced-motion users and for photos
   injected after the section has already revealed. */
.lab-gallery figure {
  opacity: 0;
  transform: translateY(26px) scale(0.94);
  filter: blur(5px);
  transition: opacity 0.7s cubic-bezier(.16,.84,.44,1), transform 0.7s cubic-bezier(.16,.84,.44,1), filter 0.7s ease;
}
[data-reveal].is-visible .lab-gallery figure { opacity: 1; transform: none; filter: blur(0); }
.lab-gallery figure:nth-child(1) { transition-delay: 0.04s; }
.lab-gallery figure:nth-child(2) { transition-delay: 0.11s; }
.lab-gallery figure:nth-child(3) { transition-delay: 0.18s; }
.lab-gallery figure:nth-child(4) { transition-delay: 0.25s; }
.lab-gallery figure:nth-child(5) { transition-delay: 0.32s; }
.lab-gallery figure:nth-child(6) { transition-delay: 0.39s; }
.lab-gallery figure:nth-child(7) { transition-delay: 0.46s; }
.lab-gallery figure:nth-child(8) { transition-delay: 0.53s; }
.lab-gallery figure:nth-child(n+9) { transition-delay: 0.6s; }
[data-reveal].is-visible .lab-gallery figure:hover { transform: translateY(-4px); transition: transform 0.35s cubic-bezier(.2,.8,.2,1); }
@media (prefers-reduced-motion: reduce) {
  .lab-gallery figure { transition-duration: 0.01ms !important; transition-delay: 0s !important; filter: none !important; }
}

/* ---------- Lightbox (click a photo to view it larger / zoom in) ---------- */
.lightbox-zoomable { cursor: zoom-in; }
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(3, 0, 20, 0.94);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease;
  padding: 60px 24px 40px;
}
.lightbox-overlay.is-open { opacity: 1; visibility: visible; }
.lightbox-stage { position: relative; display: flex; flex-direction: column; align-items: center; max-width: 100%; max-height: 100%; }
.lightbox-img-wrap { overflow: hidden; max-width: 90vw; max-height: 72vh; border-radius: 14px; touch-action: none; background: rgba(255,255,255,0.02); }
.lightbox-img {
  display: block; max-width: 90vw; max-height: 72vh; width: auto; height: auto;
  object-fit: contain; cursor: zoom-in; transform-origin: center center;
  transition: transform 0.2s ease; user-select: none; -webkit-user-drag: none;
}
.lightbox-img.is-zoomed { cursor: grab; transition: none; }
.lightbox-img.is-dragging { cursor: grabbing; }
.lightbox-caption { color: #fff; text-align: center; font-size: 14.5px; max-width: 680px; margin-top: 18px; opacity: 0.92; line-height: 1.5; }
.lightbox-counter { color: rgba(255,255,255,0.55); font-size: 12px; margin-top: 8px; letter-spacing: 0.05em; text-transform: uppercase; }
.lightbox-close, .lightbox-nav {
  position: fixed; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22);
  color: #fff; cursor: pointer; transition: background 0.15s ease;
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(255,255,255,0.22); }
.lightbox-close { top: 20px; right: 24px; width: 44px; height: 44px; font-size: 22px; line-height: 1; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 50px; height: 50px; font-size: 24px; }
.lightbox-prev { left: 18px; }
.lightbox-next { right: 18px; }
.lightbox-hint { color: rgba(255,255,255,0.45); font-size: 11.5px; margin-top: 10px; }
@media (max-width: 700px) {
  .lightbox-nav { width: 40px; height: 40px; font-size: 19px; }
  .lightbox-prev { left: 6px; } .lightbox-next { right: 6px; }
  .lightbox-close { width: 38px; height: 38px; font-size: 18px; top: 10px; right: 10px; }
  .lightbox-overlay { padding: 46px 12px 28px; }
}

/* ---------- Video modal (click-to-play video, e.g. the hero slideshow) ----------
   Injected once by main.js (see initVideoModal) and reused by every element
   marked data-video-id; visual language matches the photo lightbox above. */
.video-modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(3, 0, 20, 0.94);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease;
  padding: 60px 24px 40px;
}
.video-modal-overlay.is-open { opacity: 1; visibility: visible; }
.video-modal-frame-wrap {
  position: relative; width: 100%; max-width: 960px; aspect-ratio: 16/9;
  background: #000; border-radius: 12px; overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7);
}
.video-modal-frame-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-modal-close {
  position: fixed; top: 20px; right: 24px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1; cursor: pointer; transition: background 0.15s ease;
}
.video-modal-close:hover { background: rgba(255,255,255,0.22); }
@media (max-width: 700px) {
  .video-modal-overlay { padding: 46px 12px 28px; }
  .video-modal-close { width: 38px; height: 38px; font-size: 18px; top: 10px; right: 10px; }
}

/* Shown in place of a video embed (inline player or modal) when YouTube
   reports a playback error -- e.g. embedding blocked for this video/domain --
   instead of leaving YouTube's own broken-looking error screen on show. */
.video-embed-fallback {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; padding: 24px;
  background: var(--navy); color: #fff;
}
.video-embed-fallback-text { margin: 0; font-size: 0.95rem; color: rgba(255,255,255,0.85); max-width: 320px; }

/* ---------- Aethal Chorus spotlight (Music Class, E-Arts Department) ---------- */
.aethal-chorus {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
}
.aethal-chorus-lede {
  font-family: var(--font); font-weight: 700; letter-spacing: 0.04em;
  color: var(--orange); font-size: 13.5px; text-transform: uppercase;
  margin: -6px 0 16px;
}
.aethal-chorus-media {
  display: grid; grid-template-columns: minmax(0, 360px) auto; gap: 18px 24px;
  align-items: start; margin: 22px 0;
}
.aethal-chorus-video {
  position: relative;
  border-radius: var(--radius); overflow: hidden; background: var(--paper-2);
  border: 1px solid var(--line);
  min-height: 480px; display: flex; align-items: center; justify-content: center;
}
.aethal-chorus-video iframe { width: 100%; border: 0; min-height: 480px; }
.aethal-chorus-links { display: flex; flex-direction: column; gap: 12px; align-self: center; }
@media (max-width: 760px) {
  .aethal-chorus-media { grid-template-columns: 1fr; }
  .aethal-chorus-video, .aethal-chorus-video iframe { min-height: 420px; }
  .aethal-chorus-links { flex-direction: row; flex-wrap: wrap; }
}
.aethal-chorus-conductor {
  display: flex; align-items: center; gap: 18px; margin-top: 26px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 22px;
}
.aethal-chorus-conductor-photo {
  flex: none; width: 72px; height: 72px; border-radius: 50%;
  background: var(--paper-2); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); overflow: hidden;
}
.aethal-chorus-conductor-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aethal-chorus-conductor-photo svg { width: 34px; height: 34px; }
.aethal-chorus-conductor-info h4 { font-size: 16px; margin: 0 0 2px; }
.aethal-chorus-conductor-role { font-size: 12.5px; color: var(--orange); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.aethal-chorus-conductor-message { font-size: 14px; color: var(--muted); margin: 8px 0 0; font-style: italic; }
@media (max-width: 480px) {
  .aethal-chorus-conductor { flex-direction: column; text-align: center; }
}

/* =========================================================================
   SITE-WIDE DESIGN REFRESH -- rolled out from the home page trial.
   Buttons get a tactile, physical-feeling press (skeuomorphism); the top
   nav pills get a matching resting-state bevel; the dropdown-toggle width
   bug (5 menu items rendering narrower than the rest) is fixed for every
   page that shares this nav; and quote blocks get a soft frosted-glass
   panel (glassmorphism). No colors were changed -- only shadows, borders
   and blur on top of the existing --navy/--orange/--gold/etc tokens.
   Delete this block (and nothing else) to revert every page to how it
   looked before this pass.
   ========================================================================= */

/* ---------- SKEUOMORPHISM: tactile, physical-feeling buttons ---------- */
.btn {
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -4px 7px rgba(0,0,0,0.16),
    0 8px 16px -6px rgba(20,33,61,0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.btn::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.05) 40%, rgba(0,0,0,0.06) 100%);
  pointer-events: none; z-index: 0;
}
.btn > * { position: relative; z-index: 1; }
.btn-primary:hover, .btn-outline.dark:hover, .btn-install-app:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -3px 6px rgba(0,0,0,0.14),
    0 12px 22px -6px rgba(20,33,61,0.42);
}
.btn:active {
  transform: translateY(2px) scale(0.98);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.28),
    inset 0 -1px 0 rgba(255,255,255,0.15);
}
.btn-outline {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    inset 0 -2px 5px rgba(0,0,0,0.18),
    0 6px 14px -8px rgba(0,0,0,0.3);
}

/* Top nav links use their own .nav-links a class (not .btn), so the rules
   above never touch them -- this is the fix for that. Gives every menu
   pill a raised, resting-state bevel instead of sitting flat until hover. */
.nav-links a {
  background: linear-gradient(180deg, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0.08) 55%, rgba(0,0,0,0.06) 100%);
  border-color: rgba(255,255,255,0.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -2px 4px rgba(0,0,0,0.14),
    0 3px 8px -4px rgba(0,0,0,0.35);
}
.nav-links a.active {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -3px 5px rgba(0,0,0,0.2),
    0 8px 18px -6px rgba(255,66,0,0.55);
}
.nav-links a:active {
  transform: translateY(1px) scale(0.98) !important;
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,0.3),
    inset 0 -1px 0 rgba(255,255,255,0.15);
}
/* The dropdown items (Governance & Leadership, Faculty, Departments,
   Partnerships, Outreach Programs, etc.) were sharing their grid cell with
   the small (dot) toggle button as a flex sibling, so their pill came out
   narrower than every plain link on every page using this nav. Taking the
   toggle out of the flex flow (position: absolute, overlaid on top) lets
   the link itself fill the full cell, same as every other item. */
@media (min-width: 901px) {
  .has-dropdown { display: block; }
  .has-dropdown > a { width: 100%; }
  .dropdown-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    z-index: 2;
  }
  .has-dropdown.open .dropdown-toggle,
  .has-dropdown:hover .dropdown-toggle { transform: translateY(-50%) rotate(180deg); }
}

/* ---------- GLASSMORPHISM: frosted panel for quote blocks (site-wide) ----------
   The frosted background below was overriding .quote-block's original
   orange-red gradient with near-transparent white -- combined with the
   base rule's color:#fff, that made every pull-quote (and, on
   curriculum.html, the whole "four pillars" chip group nested inside it)
   render as white text on a white/near-white page: invisible. Keeping
   only the edge polish here and letting the original gradient show
   through again restores both visibility and the "dynamic" look. */
.quote-block {
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* ---------- NEUMORPHISM / GLASSMORPHISM: reusable card components ----------
   These two classes exist site-wide in this stylesheet but are currently
   only used in the home page's markup; styled here so any future page that
   reuses them (a partners section, a hex icon badge) automatically matches
   the same visual language. */
.partner-card {
  border: none;
  box-shadow:
    8px 8px 18px rgba(20,33,61,0.10),
    -8px -8px 18px rgba(255,255,255,0.85);
}
.hex-badge {
  background: rgba(255,255,255,0.16);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.35);
}

/* ---------- MMS Anthem (home page) ---------- */
.anthem-section { position: relative; overflow: hidden; }
.anthem-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 300px at 15% 0%, rgba(255,98,0,0.14), transparent 60%),
    radial-gradient(600px 320px at 85% 100%, rgba(104,81,217,0.18), transparent 60%);
  pointer-events: none;
}
.anthem-section .wrap { position: relative; z-index: 1; }

.anthem-langs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 30px 0 34px;
}
.anthem-lang-btn {
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  padding: 9px 20px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.anthem-lang-btn:hover {
  border-color: rgba(255,255,255,0.4);
  color: #fff;
  transform: translateY(-2px);
}
.anthem-lang-btn.active {
  background: linear-gradient(120deg, var(--orange), var(--orange-2));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 24px -10px rgba(255,98,0,0.65);
}

.anthem-poster-wrap { max-width: 700px; margin: 0 auto; }

.anthem-poster {
  position: relative;
  border-radius: 20px;
  padding: 38px 36px 30px;
  background:
    linear-gradient(135deg, rgba(255,98,0,0.10), rgba(242,196,119,0.07) 45%, rgba(104,81,217,0.16)),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  background-size: 220% 220%, 100% 100%;
  animation: anthem-aurora 12s ease-in-out infinite;
  border: 1px solid rgba(242,196,119,0.35);
  box-shadow: 0 30px 60px -25px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
@keyframes anthem-aurora {
  0%, 100% { background-position: 0% 50%, 0 0; }
  50% { background-position: 100% 50%, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .anthem-poster { animation: none; }
}

.anthem-corner {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 2px solid var(--gold);
  opacity: 0.85;
}
.anthem-corner.tl { top: 12px; left: 12px; border-right: none; border-bottom: none; border-radius: 6px 0 0 0; }
.anthem-corner.tr { top: 12px; right: 12px; border-left: none; border-bottom: none; border-radius: 0 6px 0 0; }
.anthem-corner.bl { bottom: 12px; left: 12px; border-right: none; border-top: none; border-radius: 0 0 0 6px; }
.anthem-corner.br { bottom: 12px; right: 12px; border-left: none; border-top: none; border-radius: 0 0 6px 0; }

.anthem-poster-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.anthem-lang-native {
  font-family: var(--font);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 2.6rem);
  color: #fff;
  line-height: 1.1;
  text-shadow: 0 1px 0 rgba(255,255,255,0.18), 0 3px 10px rgba(0,0,0,0.5), 0 0 24px rgba(255,130,38,0.25);
}
.anthem-lang-sub {
  margin-top: 6px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.anthem-script-toggle {
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.anthem-script-toggle:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.35); }

.anthem-play-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
}
.anthem-play-btn {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
  color: #fff;
  font-size: 19px;
  animation: anthem-pulse 2.4s ease-in-out infinite;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.anthem-play-btn:hover { transform: scale(1.06); }
.anthem-play-btn .anthem-play-icon { position: relative; left: 2px; }
.anthem-poster.is-playing .anthem-play-btn .anthem-play-icon { left: 0; }
@keyframes anthem-pulse {
  0%, 100% { box-shadow: 0 8px 22px -10px rgba(255,98,0,0.6), 0 0 0 0 rgba(255,130,38,0.5); }
  50% { box-shadow: 0 8px 28px -6px rgba(255,130,38,0.85), 0 0 0 10px rgba(255,130,38,0); }
}
@media (prefers-reduced-motion: reduce) {
  .anthem-play-btn { animation: none; }
}

.anthem-eq { display: flex; align-items: flex-end; gap: 4px; height: 22px; flex: 0 0 auto; }
.anthem-eq i {
  display: block;
  width: 4px;
  height: 6px;
  border-radius: 2px;
  background: var(--gold);
  animation: anthem-eq-bar 1s ease-in-out infinite;
  animation-play-state: paused;
  opacity: 0.55;
}
.anthem-poster.is-playing .anthem-eq i { animation-play-state: running; opacity: 1; }
.anthem-eq i:nth-child(1) { animation-delay: 0s; }
.anthem-eq i:nth-child(2) { animation-delay: 0.12s; }
.anthem-eq i:nth-child(3) { animation-delay: 0.24s; }
.anthem-eq i:nth-child(4) { animation-delay: 0.36s; }
.anthem-eq i:nth-child(5) { animation-delay: 0.48s; }
@keyframes anthem-eq-bar { 0%, 100% { height: 6px; } 50% { height: 22px; } }

.anthem-play-label {
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}

.anthem-lyrics {
  position: relative;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 6px;
}
/* Fade the top/bottom edges of the scrollable lyrics box with plain
   gradient overlays rather than mask-image: mask-image (and -webkit-mask-image)
   is a known trigger for Safari/iOS to detach the site's sticky nav header
   mid-scroll (it renders "frozen" partway down the page). Overlays avoid
   that compositing bug entirely while giving the same visual fade. */
.anthem-lyrics::before,
.anthem-lyrics::after {
  content: "";
  position: absolute;
  left: 0;
  right: 6px;
  height: 24px;
  pointer-events: none;
  z-index: 1;
}
.anthem-lyrics::before {
  top: 0;
  background: linear-gradient(180deg, rgba(24,0,173,0.55), rgba(24,0,173,0));
}
.anthem-lyrics::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(24,0,173,0.55), rgba(24,0,173,0));
}
.anthem-lyrics::-webkit-scrollbar { width: 6px; }
.anthem-lyrics::-webkit-scrollbar-thumb { background: rgba(242,196,119,0.4); border-radius: 6px; }
.anthem-lyrics-text {
  white-space: pre-line;
  font-size: 17px;
  line-height: 1.95;
  color: rgba(255,255,255,0.92);
  padding: 4px 4px 20px;
}

.anthem-credit {
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}
.section-navy .anthem-credit { color: rgba(255,255,255,0.5); }

@media (max-width: 640px) {
  .anthem-poster { padding: 30px 20px 24px; }
  .anthem-poster-head { flex-direction: column; align-items: flex-start; }
}