/* ============================================================
   Hayagrivas International School — global.css
   Modern, high-performance design system with silky micro-animations,
   glassmorphic header, tactile card physics, and accessibility.

   PALETTE:
   Header / Dark Navy  #0A2A5E
   Navy Deep           #071E43
   Navy Mid            #13407F
   Page Background     #F0F6FF
   Card White          #FFFFFF
   Border Soft         #D5E2F5
   Border Glow         #B9D3F8
   Main Text           #13263C
   Muted Text          #6B7F9A
   Primary Blue        #1A5CFF
   Primary Blue Hover  #0F46D6
   Light Blue Tint     #D9E8FF
   Regal Gold / Accent #E2A836
   Gold Hover / Deep   #C68C23
   Gold Soft Glow      rgba(var(--gold-rgb), 0.28)
   ============================================================ */

:root {
  --navy: #0A2A5E;
  --navy-deep: #071E43;
  --navy-mid: #13407F;
  --bg-page: #F0F6FF;
  --card-bg: #FFFFFF;
  --border: #D5E2F5;
  --border-glow: #B9D3F8;
  --text-main: #13263C;
  --text-muted: #6B7F9A;
  --primary: #1A5CFF;
  --primary-hover: #0F46D6;
  --light-blue: #D9E8FF;
  --gold: #E2A836;
  --gold-deep: #C68C23;
  --gold-glow: rgba(var(--gold-rgb), 0.28);
  --gold-hi: #f0b543;
  --on-accent: #071E43;

  /* Channel values, so translucent tints follow the active theme */
  --navy-rgb: 10, 42, 94;
  --primary-rgb: 26, 92, 255;
  --gold-rgb: 226, 168, 54;
  --tint-line: #BFD6F7;

  /* "Chrome" = the top bar, header, footer and the solid colour bands
     (values strip, stats, CTA). Photo heroes never use these - they sit
     on a neutral black overlay so every theme leaves the image alone. */
  --chrome: #0A2A5E;
  --chrome-hi: #153a7a;
  --chrome-deep: #061937;
  --chrome-rgb: 10, 42, 94;
  --band-a: #10346e;
  --band-b: #061e47;
  --on-chrome: #FFFFFF;
  --on-chrome-2: #e6efff;
  --on-chrome-3: #b2ccf3;
  --chrome-soft: #D9E8FF;
  --chrome-line: rgba(255, 255, 255, 0.08);
  --chrome-line-strong: rgba(255, 255, 255, 0.2);
  --chrome-hover: rgba(255, 255, 255, 0.12);
  --accent-on-chrome: #E2A836;

  /* Type */
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Lora", Georgia, "Times New Roman", serif;
  --head-weight: 600;

  --shadow-sm: 0 2px 6px rgba(var(--navy-rgb), 0.06);
  --shadow-md: 0 8px 20px rgba(var(--navy-rgb), 0.09);
  --shadow-lg: 0 16px 36px rgba(var(--navy-rgb), 0.14);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.22s;
  --duration-normal: 0.35s;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

/* ---------- Ambient Crystal Spotlight — Liquid Light Aura ---------- */
body::before {
  content: "";
  position: fixed;
  width: 650px;
  height: 650px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--gold-rgb), 0.12) 0%, rgba(var(--gold-rgb), 0) 70%);
  top: -140px;
  right: -120px;
  filter: blur(85px);
  pointer-events: none;
  z-index: 0;
  animation: floatAuraGold 22s ease-in-out infinite alternate;
}
body::after {
  content: "";
  position: fixed;
  width: 750px;
  height: 750px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--primary-rgb), 0.08) 0%, rgba(var(--primary-rgb), 0) 70%);
  bottom: -150px;
  left: -150px;
  filter: blur(95px);
  pointer-events: none;
  z-index: 0;
  animation: floatAuraBlue 26s ease-in-out infinite alternate;
}
@keyframes floatAuraGold {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-60px, 80px) scale(1.12); }
  100% { transform: translate(40px, 40px) scale(0.95); }
}
@keyframes floatAuraBlue {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(70px, -60px) scale(1.08); }
  100% { transform: translate(-30px, -40px) scale(0.96); }
}

main, header, footer, .topbar, .masthead, .quick-contact-fab {
  position: relative;
  z-index: 1;
}

img {
  max-width: 100%;
  display: block;
  height: auto;
}

a {
  color: var(--primary);
  text-underline-offset: 2px;
  transition: color var(--duration-fast) ease;
}
a:hover {
  color: var(--primary-hover);
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: var(--head-weight);
  color: var(--text-main);
  line-height: 1.2;
  margin: 0 0 14px;
}

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

/* ---------- Layout Utilities ---------- */
.wrap {
  width: min(1180px, 92vw);
  margin-inline: auto;
}
.wrap-narrow {
  width: min(780px, 92vw);
  margin-inline: auto;
}
.section {
  padding: clamp(48px, 7vw, 88px) 0;
}
.section-tight {
  padding: clamp(34px, 5vw, 60px) 0;
}
.bg-surface {
  background: #FFFFFF;
}
.center {
  text-align: center;
}
.mt-0 {
  margin-top: 0;
}
.stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
hr.rule {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--navy);
  color: #FFFFFF;
  padding: 10px 16px;
  z-index: 300;
  border-radius: 0 0 8px 0;
  box-shadow: var(--shadow-md);
  transition: left 0.2s ease;
}
.skip-link:focus {
  left: 8px;
  top: 8px;
}

.eyebrow {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--primary);
  display: inline-block;
  border-radius: 2px;
}
.eyebrow.gold {
  color: var(--gold);
}
.eyebrow.gold::before {
  background: var(--gold);
}

.lede {
  font-size: 1.12rem;
  color: var(--text-muted);
  max-width: 66ch;
}
.sec-head {
  max-width: 66ch;
  margin-bottom: 38px;
}
.sec-head h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.4rem);
  margin: 0 0 12px;
  letter-spacing: -0.015em;
}
.sec-head.center {
  margin-inline: auto;
  text-align: center;
}
.sec-head.center .eyebrow {
  justify-content: center;
}

/* ---------- Buttons (Tactile Physics & Micro-Lift) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  font-weight: 600;
  font-size: 0.98rem;
  padding: 0.72em 1.45em;
  border-radius: 9px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--duration-fast) var(--ease-spring),
              box-shadow var(--duration-fast) ease,
              background-color var(--duration-fast) ease,
              border-color var(--duration-fast) ease,
              color var(--duration-fast) ease;
  user-select: none;
  position: relative;
  overflow: hidden;
}
.btn:active {
  transform: translateY(1px) scale(0.985);
}

.btn-primary {
  background: var(--primary);
  color: #FFFFFF;
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.22);
}
.btn-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.36);
}

.btn-accent {
  background: linear-gradient(135deg, var(--gold-hi) 0%, var(--gold) 100%);
  color: var(--on-accent);
  border-color: var(--gold);
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(var(--gold-rgb), 0.28);
}
.btn-accent:hover {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  border-color: var(--gold-deep);
  color: var(--on-accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--gold-rgb), 0.45);
}

.btn-outline {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.btn-outline:hover {
  background: var(--primary);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.2);
}

.btn-ghost {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  transition: color var(--duration-fast) ease, gap var(--duration-fast) ease;
}
.btn-ghost::after {
  content: "→";
  display: inline-block;
  transition: transform var(--duration-fast) var(--ease-spring);
}
.btn-ghost:hover {
  color: var(--primary-hover);
}
.btn-ghost:hover::after {
  transform: translateX(4px);
}

/* ---------- Top Bar ---------- */
.topbar {
  background: var(--chrome-deep);
  color: var(--on-chrome);
  font-size: 0.82rem;
  border-bottom: 1px solid var(--chrome-line);
}
.topbar .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 38px;
  flex-wrap: wrap;
  padding-block: 6px;
}
.topbar a {
  color: var(--on-chrome);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  opacity: 0.9;
  transition: opacity var(--duration-fast) ease, color var(--duration-fast) ease;
}
.topbar a:hover {
  opacity: 1;
  color: var(--accent-on-chrome);
  text-decoration: none;
}
.topbar-meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
}
.topbar-meta span {
  color: var(--on-chrome-2);
}

/* ---------- Masthead / Sticky Glassmorphism Nav ---------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--chrome);
  border-bottom: 1px solid var(--chrome-line);
  transition: background 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.masthead.scrolled {
  background: rgba(var(--chrome-rgb), 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--chrome-line-strong);
  box-shadow: 0 8px 24px rgba(4, 16, 38, 0.28);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 70px;
  transition: min-height 0.25s ease;
}
.masthead.scrolled .nav {
  min-height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--on-chrome);
  transition: transform var(--duration-fast) var(--ease-spring);
}
.brand:hover {
  transform: translateY(-1px);
}
.brand .mark {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  transition: transform 0.4s var(--ease-spring);
}
.brand:hover .mark {
  transform: rotate(4deg) scale(1.04);
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.brand-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--on-chrome);
  letter-spacing: -0.01em;
}
.brand-sub {
  font-size: 0.64rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--chrome-soft);
  font-weight: 600;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  text-decoration: none;
  color: var(--on-chrome-2);
  font-weight: 500;
  font-size: 0.94rem;
  padding: 0.5em 0.85em;
  border-radius: 7px;
  position: relative;
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease, transform var(--duration-fast) ease;
}
.nav-links a:hover {
  background: var(--chrome-hover);
  color: var(--on-chrome);
  transform: translateY(-1px);
}
.nav-links a[aria-current="page"] {
  background: var(--primary);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.35);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-toggle {
  display: none;
  background: var(--chrome-hover);
  border: 1px solid var(--chrome-line-strong);
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  color: var(--on-chrome);
  transition: background var(--duration-fast) ease;
}
.nav-toggle:hover {
  background: var(--chrome-line-strong);
}
.nav-toggle svg {
  width: 22px;
  height: 22px;
  display: block;
}
.only-mobile {
  display: none;
}

@media (max-width: 1260px) {
  .nav-toggle {
    display: inline-flex;
  }
  .nav-enquire {
    display: none;
  }
  .only-mobile {
    display: block;
  }
  .nav-links {
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--chrome);
    border-bottom: 1px solid var(--chrome-line-strong);
    padding: 14px;
    gap: 4px;
    display: none;
    box-shadow: var(--shadow-lg);
    animation: dropMenu 0.25s var(--ease-spring);
    /* eleven entries: never let the last ones fall below a short phone screen */
    max-height: calc(100vh - 84px);
    max-height: calc(100dvh - 84px);
    overflow-y: auto;
  }
  .nav-links.open {
    display: flex;
  }
  .nav-links a {
    padding: 0.85em 1.1em;
    font-size: 1.02rem;
  }
}
@keyframes dropMenu {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Hero A (Split Layout) ---------- */
.hero {
  background: radial-gradient(circle at 80% 20%, var(--chrome-hi) 0%, var(--chrome) 70%);
  color: var(--on-chrome);
  position: relative;
  overflow: hidden;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 44px;
  align-items: center;
  padding: clamp(48px, 7vw, 84px) 0;
}
.hero .eyebrow {
  color: var(--accent-on-chrome);
}
.hero .eyebrow::before {
  background: var(--accent-on-chrome);
}
.hero h1, .hero .hero-title {
  font-size: clamp(2.1rem, 4.5vw, 3.2rem);
  font-family: var(--font-head);
  color: var(--on-chrome);
  font-weight: 700;
  margin: 0 0 18px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.hero h1 em, .hero .hero-title em {
  font-style: normal;
  color: var(--accent-on-chrome);
  text-shadow: 0 0 20px var(--gold-glow);
}
.hero-deck {
  font-size: 1.14rem;
  color: var(--on-chrome-2);
  max-width: 52ch;
  margin: 0 0 28px;
  line-height: 1.6;
}
.hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-figure {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
  transition: transform 0.5s var(--ease-spring);
}
.hero-figure:hover {
  transform: translateY(-4px);
}
.hero-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}
.hero-figure:hover img {
  transform: scale(1.03);
}
.hero-float {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  background: rgba(var(--navy-rgb), 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: var(--shadow-md);
}
.hero-float .aff {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin: 0 0 10px;
}
.hero-float dl {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px 14px;
  margin: 0;
}
.hero-float dt {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--light-blue);
  margin: 0;
}
.hero-float dd {
  margin: 2px 0 0;
  font-size: 1.05rem;
  color: #FFFFFF;
  font-weight: 700;
  line-height: 1.1;
}
@media (max-width: 860px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}
@media (max-width: 520px) {
  .hero-float dl {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Hero D (Poster Hero + Ken-Burns & Timer) ---------- */
.hero-variant {
  display: none;
}
body[data-hero="A"] #heroA {
  display: block;
}
body[data-hero="D"] #heroD {
  display: flex;
}
body[data-hero="D"] #showcase {
  display: none;
}

.heroD {
  position: relative;
  overflow: hidden;
  background: #000;
  min-height: min(80vh, 720px);
  flex-direction: column;
  justify-content: flex-end;
}
.hd-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hd-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s ease;
  overflow: hidden;
}
.hd-slide.active {
  opacity: 1;
  visibility: visible;
}
.hd-subject {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 6s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}
.hd-slide.active .hd-subject {
  transform: scale(1.06);
}
/* Client brief (Oct 2026): the photo is shown as it is, with no colour
   wash over it. Only the lower part darkens - to black, not brand blue -
   so the headline and buttons stay readable over any image. */
.hd-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 38%,
    rgba(0, 0, 0, 0.45) 62%,
    rgba(0, 0, 0, 0.82) 86%,
    rgba(0, 0, 0, 0.9) 100%);
}
.hd-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(88px, 12vh, 136px);
  z-index: 3;
}
.hd-slide .hd-copy {
  transform: translateY(16px);
  opacity: 0;
  transition: transform 0.6s var(--ease-spring), opacity 0.6s ease;
}
.hd-slide.active .hd-copy {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 0.15s;
}

.hd-lead {
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(0.82rem, 1.6vw, 1.2rem);
  letter-spacing: 0.18em;
  color: var(--gold);
  margin: 0 0 0.25em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.hd-word {
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 7.5vw, 5.6rem);
  line-height: 0.95;
  color: #FFFFFF;
  margin: 0;
  letter-spacing: -0.02em;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
}
.hd-word em {
  font-style: normal;
  color: var(--gold);
}

.hd-foot {
  position: relative;
  z-index: 4;
  padding-bottom: clamp(22px, 4vh, 36px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.hd-foot .aff {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}
.hd-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Slide Progress Indicator Bar */
.hd-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.15);
  z-index: 10;
  overflow: hidden;
}
.hd-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold) 0%, #ffdf85 100%);
  box-shadow: 0 0 10px var(--gold);
  transition: width 5.2s linear;
}

.hd-pager {
  position: absolute;
  left: clamp(12px, 2.4vw, 28px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hd-pager button {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  padding: 8px 11px;
  border-radius: 8px;
  font-weight: 700;
  transition: all var(--duration-fast) var(--ease-spring);
  backdrop-filter: blur(8px);
}
.hd-pager button:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: scale(1.08);
}
.hd-pager button[aria-current="true"] {
  background: var(--gold);
  color: var(--on-accent);
  border-color: var(--gold);
  box-shadow: 0 0 14px var(--gold-glow);
}
@media (max-width: 820px) {
  .heroD {
    min-height: auto;
  }
  .hd-stage {
    position: relative;
    inset: auto;
    height: min(60vh, 420px);
    min-height: 320px;
  }
  .hd-copy {
    bottom: 20px;
  }
  .hd-pager {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    flex-direction: row;
    justify-content: center;
    padding: 14px 0 0;
  }
  .hd-foot {
    padding-top: 18px;
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- Showcase (Hero A companion) ---------- */
.showcase {
  position: relative;
  overflow: hidden;
  background: #000;
}
.sc-stage {
  position: relative;
  min-height: min(72vh, 620px);
}
.sc-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.sc-slide.active {
  opacity: 1;
  visibility: visible;
}
.sc-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 6s cubic-bezier(0.25, 1, 0.5, 1);
}
.sc-slide.active .sc-bg {
  transform: scale(1.05);
}
.sc-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.85) 100%);
}
.sc-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: end;
  min-height: min(72vh, 620px);
  padding: 60px 0 56px clamp(48px, 6vw, 80px);
}
.sc-caption h2 {
  color: #FFFFFF;
  font-size: clamp(1.8rem, 4vw, 3rem);
  margin: 0;
}
.sc-caption h2 em {
  font-style: normal;
  color: var(--gold);
}
.sc-desc {
  color: rgba(255, 255, 255, 0.86);
  max-width: 46ch;
}
.sc-desc .lead {
  font-size: 1.15rem;
  color: #FFFFFF;
  font-weight: 600;
  margin: 0 0 10px;
}
.sc-desc p {
  margin: 0 0 20px;
  color: rgba(255, 255, 255, 0.86);
}
.sc-pager {
  position: absolute;
  left: clamp(12px, 3vw, 30px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sc-pager button {
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1rem;
  cursor: pointer;
  padding: 7px 10px;
  border-radius: 6px;
  font-weight: 600;
  transition: all var(--duration-fast) ease;
}
.sc-pager button[aria-current="true"] {
  background: var(--gold);
  color: var(--on-accent);
}
@media (max-width: 820px) {
  .sc-stage {
    min-height: auto;
  }
  .sc-slide {
    position: relative;
    inset: auto;
    opacity: 0;
    height: 0;
    overflow: hidden;
  }
  .sc-slide.active {
    height: auto;
  }
  .sc-inner {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 44px 0 40px;
    gap: 16px;
  }
  .sc-pager {
    position: static;
    transform: none;
    flex-direction: row;
    justify-content: center;
    padding: 0 0 22px;
  }
}

/* ---------- Infinite Smooth Values Marquee ---------- */
.values-strip {
  background: var(--chrome-deep);
  border-top: 1px solid rgba(var(--gold-rgb), 0.25);
  border-bottom: 1px solid var(--chrome-line);
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  padding: 13px 0;
}
.values-strip::before,
.values-strip::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}
.values-strip::before {
  left: 0;
  background: linear-gradient(90deg, var(--chrome-deep) 0%, transparent 100%);
}
.values-strip::after {
  right: 0;
  background: linear-gradient(-90deg, var(--chrome-deep) 0%, transparent 100%);
}

.values-marquee {
  display: inline-flex;
  white-space: nowrap;
  animation: scrollMarquee 32s linear infinite;
  will-change: transform;
}
.values-strip:hover .values-marquee {
  animation-play-state: paused;
}
.values-track {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  padding-right: 28px;
}
.values-track span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.96rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-chrome-2);
}
.values-track span::before {
  content: "✦";
  color: var(--accent-on-chrome);
  font-size: 0.85em;
}

@keyframes scrollMarquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ---------- Scroll Reveal Animations (`[data-reveal]`) ------------
   Content is hidden only while JavaScript is running (`html.js` is
   set by an inline script in <head>), so every page stays fully
   readable with JS off and for crawlers that don't run scripts.

   These rules animate the individual `translate` / `rotate` /
   `scale` properties instead of `transform`. That matters here:
   `.info-card:hover` et al. already use `transform: translateY(-6px)`,
   and a reveal written as `transform` would win on specificity and
   kill the hover lift on every card on the site.

   Stagger is applied by main.js through --rv-delay, computed from
   how many elements cross the threshold together. Nothing below
   needs hand-numbering.
   ------------------------------------------------------------------ */
.js [data-reveal] {
  opacity: 0;
  translate: 0 28px;
  transition:
    opacity 0.7s var(--ease-spring),
    translate 0.7s var(--ease-spring),
    rotate 0.7s var(--ease-spring),
    scale 0.7s var(--ease-spring);
  transition-delay: var(--rv-delay, 0s);
}
.js [data-reveal="fade"]  { translate: none; }
.js [data-reveal="left"]  { translate: -36px 0; }
.js [data-reveal="right"] { translate: 36px 0; }
.js [data-reveal="scale"] { translate: none; scale: 0.94; }

/* A sideways reveal on a full-width block sticks out past the
   viewport while it waits to animate, which gives the whole page a
   horizontal scrollbar. Clipping on the container that holds these
   reveals makes that impossible at any width — `clip` rather than
   `hidden` because it does not create a scroll container and so
   leaves sticky positioning alone. */
.split {
  overflow-x: clip;
}

/* On a phone the split blocks stack into one column, where a
   sideways entrance also just reads oddly. Rise vertically instead. */
@media (max-width: 860px) {
  .js [data-reveal="left"],
  .js [data-reveal="right"] { translate: 0 28px; }
}

/* Spiral — each tile unwinds out of a helix. main.js alternates
   --rv-dir per tile; that alternation is what reads as a spiral
   rather than a row of identical flips. Needs a parent marked
   [data-reveal-stage] to supply the vanishing point. */
.js [data-reveal="spiral"] {
  opacity: 0;
  translate: 0 60px -240px;
  rotate: 0.3 1 0.25 calc(var(--rv-dir, 1) * 36deg);
  scale: 0.78;
  transition:
    opacity 0.8s var(--ease-spring),
    translate 0.95s var(--ease-spring),
    rotate 0.95s var(--ease-spring),
    scale 0.95s var(--ease-spring);
  transition-delay: var(--rv-delay, 0s);
}
[data-reveal-stage] {
  perspective: 1200px;
  perspective-origin: 50% 42%;
}

.js [data-reveal].revealed {
  opacity: 1;
  translate: none;
  rotate: none;
  scale: none;
}

/* Legacy fixed delays, kept so any older markup still behaves. */
.js [data-reveal-delay="100"] { --rv-delay: 0.10s; }
.js [data-reveal-delay="200"] { --rv-delay: 0.20s; }
.js [data-reveal-delay="300"] { --rv-delay: 0.30s; }
.js [data-reveal-delay="400"] { --rv-delay: 0.40s; }

/* ---------- Scroll-linked rotation (`[data-scroll-rotate]`) -------
   The circular school emblem turns as it travels through the
   viewport. Opacity and scale stay at 1 the whole way — only the
   rotation is driven by scroll position. The attribute value is the
   total sweep in degrees (36 = -18deg entering, +18deg leaving);
   main.js writes --rot. Uses `rotate` rather than `transform` for
   the same reason as the reveals above.
   ------------------------------------------------------------------ */
[data-scroll-rotate] {
  rotate: var(--rot, 0deg);
}

/* ---------- Cards (Ambient Crystal Spotlight & Glass Physics) ---------- */
.pillar, .info-card, .quote, .leader, .form-card, .callout, .node-detail, .card, .spotlight-card {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(var(--navy-rgb), 0.06);
  position: relative;
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease-spring),
              box-shadow var(--duration-normal) ease,
              border-color var(--duration-normal) ease;
}

/* Crystal Border Spotlight Halo following Cursor */
.pillar::before,
.info-card::before,
.quote::before,
.leader::before,
.form-card::before,
.card::before,
.spotlight-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: radial-gradient(
    340px circle at var(--mouse-x, -999px) var(--mouse-y, -999px),
    rgba(var(--gold-rgb), 0.85) 0%,
    rgba(var(--primary-rgb), 0.35) 40%,
    transparent 70%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 4;
}

/* Ambient Inner Crystal Light Aura on Hover */
.pillar::after,
.info-card::after,
.quote::after,
.leader::after,
.card::after,
.spotlight-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    400px circle at var(--mouse-x, -999px) var(--mouse-y, -999px),
    rgba(var(--gold-rgb), 0.08) 0%,
    rgba(var(--primary-rgb), 0.035) 45%,
    transparent 75%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 1;
}

.pillar:hover::before,
.info-card:hover::before,
.quote:hover::before,
.leader:hover::before,
.form-card:hover::before,
.card:hover::before,
.spotlight-card:hover::before,
.pillar:hover::after,
.info-card:hover::after,
.quote:hover::after,
.leader:hover::after,
.card:hover::after,
.spotlight-card:hover::after {
  opacity: 1;
}

.pillar:hover, .info-card:hover, .leader:hover, .card:hover, .spotlight-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 42px rgba(var(--navy-rgb), 0.12), 0 0 24px rgba(var(--gold-rgb), 0.08);
  border-color: rgba(var(--gold-rgb), 0.35);
}

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pillar {
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
}
.pillar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  transition: background 0.3s ease;
}
.pillar:hover::before {
  background: linear-gradient(90deg, var(--primary) 0%, var(--gold) 100%);
}
.pillar .picon {
  width: 46px;
  height: 46px;
  color: var(--primary);
  margin-bottom: 18px;
  transition: transform 0.4s var(--ease-spring), color 0.3s ease;
}
.pillar:hover .picon {
  transform: scale(1.12) translateY(-2px);
  color: var(--primary-hover);
}
.pillar h3 {
  font-size: 1.35rem;
  margin: 0 0 10px;
}
.pillar p {
  margin: 0;
  color: var(--text-muted);
  font-size: 1.01rem;
}
@media (max-width: 820px) {
  .pillars {
    grid-template-columns: 1fr;
  }
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.info-card {
  padding: 26px;
}
.info-card h3 {
  font-size: 1.15rem;
  margin: 0 0 8px;
}
.info-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.98rem;
}
.info-card .picon {
  width: 36px;
  height: 36px;
  color: var(--primary);
  margin-bottom: 14px;
  transition: transform 0.3s var(--ease-spring);
}
.info-card:hover .picon {
  transform: scale(1.1);
}

.callout {
  padding: 22px 26px;
  border-left: 4px solid var(--gold);
  background: #FFFDF8;
}
.callout .lab {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 6px;
}
.callout p {
  margin: 0;
  color: var(--text-muted);
}

/* ---------- Split Content ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
.split.reverse .split-media {
  order: 2;
}
.split-media {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #FFFFFF;
  aspect-ratio: 4/3;
  position: relative;
  box-shadow: var(--shadow-md);
  transition: transform 0.4s var(--ease-spring), box-shadow 0.4s ease;
}
.split-media:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.split-media:hover img {
  transform: scale(1.04);
}
.split h2 {
  font-size: clamp(1.65rem, 3.2vw, 2.3rem);
  margin: 0 0 16px;
  letter-spacing: -0.015em;
}
.split p {
  color: var(--text-muted);
}
@media (max-width: 820px) {
  .split {
    grid-template-columns: 1fr;
  }
  .split.reverse .split-media {
    order: 0;
  }
}

/* ---------- Journey Roadmap ---------- */
.journey {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: #FFFFFF;
  counter-reset: step;
  box-shadow: var(--shadow-sm);
}
.jstep {
  padding: 28px 22px;
  border-right: 1px solid var(--border);
  counter-increment: step;
  transition: background-color var(--duration-fast) ease, transform var(--duration-fast) ease;
  position: relative;
}
.jstep:last-child {
  border-right: 0;
}
.jstep {
  padding: 28px 22px;
  border-right: 1px solid var(--border);
  counter-increment: step;
  transition: background-color var(--duration-fast) ease, transform var(--duration-fast) ease;
  position: relative;
  overflow: hidden;
}
.jstep::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    280px circle at var(--mouse-x, -999px) var(--mouse-y, -999px),
    rgba(var(--gold-rgb), 0.12) 0%,
    rgba(var(--primary-rgb), 0.04) 50%,
    transparent 75%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}
.jstep:hover::before {
  opacity: 1;
}
.jstep:last-child {
  border-right: 0;
}
.jstep:hover {
  background: var(--bg-page);
}
.jnum {
  font-size: 0.95rem;
  color: var(--primary);
  font-weight: 700;
  display: inline-block;
  transition: transform 0.3s var(--ease-spring), color 0.3s ease;
}
.jnum::before {
  content: "0" counter(step);
}
.jstep:hover .jnum {
  transform: scale(1.15);
  color: var(--gold-deep);
}
.jstep h3 {
  font-size: 1.15rem;
  margin: 10px 0 6px;
}
.jstep p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
}
@media (max-width: 860px) {
  .journey {
    grid-template-columns: 1fr 1fr;
  }
  .jstep {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
}
@media (max-width: 520px) {
  .journey {
    grid-template-columns: 1fr;
  }
}

/* ---------- Stats (Animated Number Roll-Up) ---------- */
.stats {
  background: radial-gradient(circle at 50% 50%, var(--band-a) 0%, var(--band-b) 100%);
  color: var(--on-chrome);
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--chrome-line);
  border-bottom: 1px solid var(--chrome-line);
}
.stats .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  padding: clamp(42px, 5.5vw, 68px) 0;
}
.stat {
  text-align: center;
  position: relative;
}
.stat .val {
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 3.8vw, 3rem);
  color: var(--on-chrome);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  transition: transform 0.3s var(--ease-spring), color 0.3s ease;
}
.stat:hover .val {
  transform: scale(1.06);
  color: var(--accent-on-chrome);
}
.stat .lab {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chrome-soft);
  margin-top: 10px;
  font-weight: 500;
}
.stat .ph-inline {
  display: block;
  font-size: 0.75rem;
  color: var(--accent-on-chrome);
  margin-top: 4px;
  opacity: 0.9;
}
@media (max-width: 720px) {
  .stats .wrap {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Explore Panels (Zoom & Overlay Motion) ---------- */
.explore {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 900px) {
  .explore {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 520px) {
  .explore {
    grid-template-columns: 1fr;
  }
}
.ex-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 16px;
  aspect-ratio: 3/4;
  text-decoration: none;
  color: #FFFFFF;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-normal) var(--ease-spring),
              box-shadow var(--duration-normal) ease;
}
.ex-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.ex-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: radial-gradient(
    360px circle at var(--mouse-x, -999px) var(--mouse-y, -999px),
    rgba(var(--gold-rgb), 0.95) 0%,
    rgba(255, 255, 255, 0.45) 35%,
    transparent 70%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 3;
}
.ex-card:hover::before {
  opacity: 1;
}
.ex-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 0.7s var(--ease-spring);
}
.ex-card:hover img {
  transform: scale(1.08);
}
.ex-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.12) 40%, rgba(0, 0, 0, 0.72) 75%, rgba(0, 0, 0, 0.9) 100%);
  transition: background 0.35s ease;
}
.ex-card:hover::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.8) 72%, rgba(0, 0, 0, 0.94) 100%);
}
.ex-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 24px;
  transform: translateY(4px);
  transition: transform 0.35s var(--ease-spring);
}
.ex-card:hover .ex-body {
  transform: translateY(0);
}
.ex-body h3 {
  color: #FFFFFF;
  font-size: 1.3rem;
  margin: 0 0 8px;
}
.ex-body p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.92rem;
  margin: 0 0 12px;
  line-height: 1.45;
}
.ex-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--gold);
}
.ex-more::after {
  content: "→";
  transition: transform var(--duration-fast) var(--ease-spring);
}
.ex-card:hover .ex-more {
  color: #ffdf85;
}
.ex-card:hover .ex-more::after {
  transform: translateX(5px);
}

/* ---------- Testimonial Slider ---------- */
.testi {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(26px, 5vw, 56px);
  align-items: center;
}
.testi-media {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4/5;
  border: 1px solid var(--border);
  background: #FFFFFF;
  box-shadow: var(--shadow-md);
}
.testi-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
  transform: scale(1.02);
}
.testi-media img.active {
  opacity: 1;
  transform: scale(1);
}
.testi-body h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.4rem);
  margin: 0 0 22px;
  letter-spacing: -0.015em;
}
.testi-stage {
  position: relative;
}
.testi-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s var(--ease-spring);
  pointer-events: none;
}
.testi-slide.active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.testi-slide blockquote {
  margin: 0 0 20px;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.55;
  color: var(--text-main);
  font-weight: 500;
  position: relative;
}
.testi-slide .who {
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--text-main);
}
.testi-slide .role {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.testi-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}
.testi-controls .arw {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #FFFFFF;
  color: var(--primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-fast) var(--ease-spring);
}
.testi-controls .arw:hover {
  background: var(--primary);
  color: #FFFFFF;
  border-color: var(--primary);
  transform: scale(1.06);
}
.testi-controls .arw:active {
  transform: scale(0.96);
}
.testi-controls .arw svg {
  width: 20px;
  height: 20px;
}
.testi-count {
  font-size: 0.95rem;
  color: var(--text-muted);
  font-weight: 600;
}
.testi-note {
  margin-top: 20px;
  font-size: 0.8rem;
  color: var(--text-muted);
}
@media (max-width: 820px) {
  .testi {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .testi-media {
    aspect-ratio: 16/10;
    max-height: 340px;
  }
}

/* ---------- Results Chain / Timeline ---------- */
.chain {
  position: relative;
}
.chain-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.chain-track::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 50%;
  height: 8px;
  transform: translateY(-50%);
  background: var(--light-blue);
  border-radius: 99px;
  z-index: 0;
}
.chain-node {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
}
.chain-node + .chain-node {
  margin-left: 12px;
}
.node {
  appearance: none;
  cursor: pointer;
  width: clamp(118px, 14vw, 164px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 5px solid var(--primary);
  background: var(--navy);
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px;
  text-align: center;
  transition: transform var(--duration-fast) var(--ease-spring),
              border-color var(--duration-fast) ease,
              box-shadow var(--duration-fast) ease;
  box-shadow: var(--shadow-sm);
}
.node-val {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  line-height: 1;
}
.node-lab {
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--light-blue);
  line-height: 1.25;
}
.node:hover, .chain-node:focus-within .node {
  border-color: var(--gold);
  transform: scale(1.08);
  box-shadow: 0 0 20px var(--gold-glow);
}
.chain-node.is-default .node {
  border-color: var(--gold);
}
.node-detail {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  translate: -50% 0;
  width: min(320px, 84vw);
  padding: 16px 18px;
  font-size: 0.92rem;
  color: var(--text-muted);
  margin: 0;
  text-align: center;
  border-top: 3px solid var(--gold);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s var(--ease-spring);
  pointer-events: none;
  z-index: 3;
}
.chain-node.is-default .node-detail {
  opacity: 1;
  visibility: visible;
}
.chain:hover .chain-node.is-default .node-detail,
.chain:focus-within .chain-node.is-default .node-detail {
  opacity: 0;
  visibility: hidden;
}
.chain-node:hover .node-detail, .chain-node:focus-within .node-detail {
  opacity: 1;
  visibility: visible;
}
.chain-spacer {
  height: 165px;
}
@media (max-width: 820px) {
  .chain-track {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .chain-track::before {
    display: none;
  }
  .chain-node + .chain-node {
    margin-left: 0;
  }
  .chain-node {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .node {
    width: 94px;
    flex: 0 0 94px;
    border-width: 4px;
  }
  .node-detail {
    position: static;
    translate: none;
    opacity: 1;
    visibility: visible;
    width: auto;
    flex: 1;
    text-align: left;
    border-top-width: 1px;
    border-left: 4px solid var(--gold);
    pointer-events: auto;
  }
  .chain-spacer {
    display: none;
  }
}

/* ---------- Quick Facts Tabs ---------- */
.qf-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}
.qf-arrow {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  border: 1px solid var(--border);
  color: var(--primary);
  background: #FFFFFF;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-fast) ease;
}
.qf-arrow:hover {
  background: var(--primary);
  color: #FFFFFF;
}
.qf-arrow svg {
  width: 20px;
  height: 20px;
}
.qf-arrow[hidden] {
  display: none;
}
.qf-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 6px 2px;
  scrollbar-width: none;
}
.qf-strip::-webkit-scrollbar {
  display: none;
}
.qf-tab {
  flex: 0 0 auto;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.72em 1.45em;
  border: 1px solid var(--primary);
  background: #FFFFFF;
  color: var(--primary);
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--duration-fast) var(--ease-spring);
}
.qf-tab:hover {
  background: var(--light-blue);
  transform: translateY(-1px);
}
.qf-tab[aria-selected="true"] {
  background: var(--primary);
  color: #FFFFFF;
  box-shadow: 0 3px 12px rgba(var(--primary-rgb), 0.28);
}
.qf-panels {
  margin-top: 34px;
  min-height: 120px;
}
.js .qf-content {
  display: none;
}
.js .qf-content.active {
  display: block;
  animation: fadeInPanel 0.3s ease;
}
@keyframes fadeInPanel {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.qf-content {
  text-align: center;
}
.qf-content h3 {
  font-size: 1.55rem;
  margin: 0 0 18px;
}
.qf-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: inline-flex;
  flex-direction: column;
  gap: 12px;
  max-width: 580px;
}
.qf-list li {
  font-size: 1.05rem;
  color: var(--text-muted);
}
.qf-list b {
  color: var(--text-main);
  font-weight: 700;
}
.qf-list .soon {
  color: var(--primary);
  font-style: italic;
  font-size: 0.94rem;
}

/* ---------- FAQ (Smooth Chevron Rotation & Focus) ---------- */
.faq {
  max-width: 880px;
  margin: 0 auto;
  border-top: 1px solid var(--border);
}
.faq-item {
  border-bottom: 1px solid var(--border);
  transition: background var(--duration-fast) ease;
}
.faq-item[open] {
  background: rgba(255, 255, 255, 0.6);
}
.faq-q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 8px;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--text-main);
  transition: color var(--duration-fast) ease;
}
.faq-q::-webkit-details-marker {
  display: none;
}
.faq-q:hover {
  color: var(--primary);
}
.faq-item[open] > .faq-q {
  color: var(--primary);
}
.faq-q .ic {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--primary);
  transition: transform 0.3s var(--ease-spring);
}
.faq-q .ic::before, .faq-q .ic::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.faq-q .ic::before {
  left: 0;
  right: 0;
  top: 9px;
  height: 2px;
}
.faq-q .ic::after {
  top: 0;
  bottom: 0;
  left: 9px;
  width: 2px;
}
.faq-item[open] > .faq-q .ic {
  transform: rotate(90deg);
}
.faq-item[open] > .faq-q .ic::after {
  opacity: 0;
}
.faq-a {
  padding: 0 8px 22px 44px;
  color: var(--text-muted);
  max-width: 72ch;
  line-height: 1.65;
}
.faq-a p {
  margin: 0;
}

/* ---------- Mosaic Gallery & Lightbox ---------- */
.mosaic {
  columns: 4 230px;
  column-gap: 16px;
}
@media (max-width: 640px) {
  .mosaic {
    columns: 2 150px;
    column-gap: 12px;
  }
}
.mtile {
  break-inside: avoid;
  margin: 0 0 16px;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--border);
  background: #FFFFFF;
  cursor: zoom-in;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  line-height: 0;
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease-spring), box-shadow 0.35s ease;
}
.mtile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.mtile img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.6s var(--ease-spring);
}
.mtile:hover img {
  transform: scale(1.05);
}
.mtile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.mtile:hover::after, .mtile:focus-visible::after {
  opacity: 1;
}
.mtile .zoom {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s var(--ease-spring);
  transform: scale(0.85);
}
.mtile .zoom svg {
  width: 32px;
  height: 32px;
  color: #FFFFFF;
}
.mtile:hover .zoom, .mtile:focus-visible .zoom {
  opacity: 1;
  transform: scale(1);
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4vw;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: fadeInLb 0.25s ease;
}
@keyframes fadeInLb {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.lightbox.open {
  display: flex;
}
.lightbox img {
  max-width: 92vw;
  max-height: 86vh;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.lb-btn {
  position: absolute;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border);
  color: var(--primary);
  width: 50px;
  height: 50px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-fast) var(--ease-spring);
}
.lb-btn:hover {
  background: var(--primary);
  color: #FFFFFF;
  transform: scale(1.08);
}
.lb-btn svg {
  width: 24px;
  height: 24px;
}
.lb-close {
  top: 18px;
  right: 18px;
}
.lb-prev {
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
}
.lb-next {
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}
.lb-count {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  font-weight: 600;
}
@media (max-width: 640px) {
  .lb-prev {
    left: 8px;
  }
  .lb-next {
    right: 8px;
  }
  .lb-btn {
    width: 42px;
    height: 42px;
  }
}

/* ---------- Leadership ---------- */
.leaders {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}
.leader {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.leader-photo {
  aspect-ratio: 1;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.leader-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-spring);
}
.leader:hover .leader-photo img {
  transform: scale(1.05);
}
.leader-photo .mono {
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--light-blue);
}
.leader-photo .mono svg {
  width: 52px;
  height: 52px;
  color: var(--light-blue);
}
.leader-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.leader-body .role {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 700;
  margin: 0 0 6px;
}
.leader-body .who {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--text-main);
}
.leader-body p {
  font-size: 0.96rem;
  color: var(--text-muted);
  margin: 0;
}
.leader-body .draft {
  margin-top: 12px;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

/* ---------- Quotes ---------- */
.quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.quote {
  padding: 28px;
  border-left: 4px solid var(--gold);
}
.quote blockquote {
  margin: 0 0 16px;
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--text-main);
}
.quote .who {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-main);
}
.quote .role {
  font-size: 0.84rem;
  color: var(--text-muted);
}
@media (max-width: 820px) {
  .quotes {
    grid-template-columns: 1fr;
  }
}

/* ---------- Page Hero (Inner Pages) ---------- */
.page-hero {
  background: #000;
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
}
/* With a photo, the hero becomes the picture with the copy pinned to its
   lower edge - the same treatment as the homepage hero. */
.page-hero.has-img {
  min-height: clamp(360px, 52vh, 500px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.page-hero .wrap {
  position: relative;
  z-index: 2;
  padding: clamp(44px, 6vw, 80px) 0 clamp(38px, 4vw, 56px);
}
.page-hero h1 {
  font-size: clamp(2rem, 4.2vw, 3rem);
  color: #FFFFFF;
  margin: 0 0 14px;
  letter-spacing: -0.02em;
}
.page-hero p {
  color: rgba(255, 255, 255, 0.9);
  max-width: 58ch;
  font-size: 1.12rem;
  margin: 0;
  line-height: 1.6;
}
.page-hero .eyebrow {
  color: var(--gold);
}
.page-hero .eyebrow::before {
  background: var(--gold);
}
.page-hero .ph-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform 8s ease;
}
.page-hero:hover .ph-bg {
  transform: scale(1.07);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.08) 30%,
    rgba(0, 0, 0, 0.55) 62%,
    rgba(0, 0, 0, 0.86) 100%);
}
.breadcrumb {
  position: relative;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 16px;
}
.breadcrumb a {
  color: #FFFFFF;
  text-decoration: none;
}
.breadcrumb a:hover {
  text-decoration: underline;
  color: var(--gold);
}

/* ---------- Prose ---------- */
.prose {
  max-width: 66ch;
}
.prose h2 {
  font-size: 1.65rem;
  margin: 2em 0 0.6em;
}
.prose h3 {
  font-size: 1.28rem;
  margin: 1.7em 0 0.5em;
}
.prose p, .prose li {
  color: var(--text-muted);
}
.prose ul {
  padding-left: 1.2em;
}
.prose li {
  margin-bottom: 0.5em;
}
.prose li::marker {
  color: var(--primary);
}

/* ---------- Tables ---------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow: var(--shadow-sm);
}
table.data {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.96rem;
}
table.data caption {
  text-align: left;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-main);
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}
table.data th, table.data td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--text-muted);
}
table.data thead th {
  background: var(--bg-page);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-main);
  white-space: nowrap;
}
table.data tbody tr:last-child td {
  border-bottom: 0;
}
table.data td.doc {
  font-weight: 600;
  color: var(--text-main);
}
.tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.tag-pending {
  color: var(--text-main);
  background: var(--light-blue);
}
.tag-ok {
  color: #FFFFFF;
  background: var(--primary);
}
.doc-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 600;
  text-decoration: none;
  color: var(--primary);
  min-height: 32px;
}
.doc-link:hover,
.doc-link:focus-visible {
  color: var(--primary-hover);
  text-decoration: underline;
}
.doc-ico {
  flex: 0 0 auto;
}
.doc-meta {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.data td br + .doc-link {
  margin-top: 4px;
}
@media (max-width: 600px) {
  .doc-link { min-height: 40px; }
  .doc-meta { display: block; margin-top: 2px; }
  /* Keep the disclosure tables readable without sideways scrolling */
  table.data { font-size: 0.88rem; }
  table.data th, table.data td { padding: 11px 12px; }
  table.data td { overflow-wrap: anywhere; }
  table.data td.doc { width: 42%; }
}

/* ---------- Forms & Inputs ---------- */
.form-card {
  padding: clamp(26px, 4vw, 44px);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.field.full {
  grid-column: 1/-1;
}
.field label {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text-main);
}
.field label .req {
  color: var(--primary);
}
.field input, .field select, .field textarea {
  font-family: inherit;
  font-size: 1rem;
  padding: 0.75em 0.9em;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #FFFFFF;
  color: var(--text-main);
  width: 100%;
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.16);
}
.field textarea {
  min-height: 120px;
  resize: vertical;
}
.form-note {
  font-size: 0.84rem;
  color: var(--text-muted);
  margin-top: 14px;
}
.form-status {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: 9px;
  font-weight: 600;
  display: none;
  animation: fadeInStatus 0.3s ease;
}
@keyframes fadeInStatus {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.form-status.show {
  display: block;
}
.form-status.ok {
  background: #E8F5E9;
  color: #1B5E20;
  border: 1px solid #C8E6C9;
}
@media (max-width: 620px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Contact ---------- */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 760px) {
  .contact-cards {
    grid-template-columns: 1fr;
  }
}
.map-frame {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16/7;
  background: #FFFFFF;
  box-shadow: var(--shadow-sm);
}
.map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- CTA Band ---------- */
.cta-band {
  background: radial-gradient(circle at 30% 50%, var(--chrome-hi) 0%, var(--chrome) 100%);
  color: var(--on-chrome);
  border-radius: 16px;
  padding: clamp(36px, 5.5vw, 60px);
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--chrome-line);
}
.cta-band h2 {
  color: var(--on-chrome);
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  margin: 0 0 14px;
  letter-spacing: -0.015em;
}
.cta-band p {
  color: var(--chrome-soft);
  max-width: 54ch;
  margin: 0 auto 28px;
  font-size: 1.1rem;
  line-height: 1.6;
}
.cta-band .hero-cta {
  justify-content: center;
}
.cta-band .btn-outline {
  border-color: var(--on-chrome);
  color: var(--on-chrome);
}
.cta-band .btn-outline:hover {
  background: var(--on-chrome);
  border-color: var(--on-chrome);
  color: var(--chrome);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--chrome-deep);
  color: var(--chrome-soft);
  border-top: 1px solid var(--chrome-line);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 36px;
  padding: clamp(44px, 5.5vw, 68px) 0 42px;
}
.site-footer h4 {
  color: var(--on-chrome);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.site-footer a {
  color: var(--chrome-soft);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color var(--duration-fast) ease;
}
.site-footer a:hover {
  color: var(--accent-on-chrome);
  text-decoration: underline;
}
.footer-brand .brand-name {
  font-size: 1.35rem;
  color: var(--on-chrome);
  margin: 0 0 8px;
  font-weight: 700;
}
.footer-brand p {
  font-size: 0.94rem;
  max-width: 34ch;
  color: var(--on-chrome-2);
  line-height: 1.55;
}
.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}
.footer-social a {
  width: 40px;
  height: 40px;
  border: 1px solid var(--chrome-line-strong);
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--chrome-soft);
  background: var(--chrome-hover);
  transition: all var(--duration-fast) var(--ease-spring);
}
.footer-social a:hover {
  background: var(--gold);
  color: var(--on-accent);
  border-color: var(--gold);
  transform: translateY(-2px);
}
.footer-social svg {
  width: 18px;
  height: 18px;
}
.footer-bottom {
  border-top: 1px solid var(--chrome-line);
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.84rem;
  color: var(--on-chrome-3);
}
.footer-bottom a {
  color: var(--on-chrome-3);
  text-decoration: none;
}
.footer-bottom a:hover {
  color: var(--on-chrome);
}
.footer-legal {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
@media (max-width: 820px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 520px) {
  .footer-top {
    grid-template-columns: 1fr;
  }
}

/* ---------- Floating Quick-Action Bar (Mobile Parents Admission FAB) ---------- */
.quick-contact-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 250;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.fab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 99px;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s var(--ease-spring), box-shadow 0.25s ease;
}
.fab-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
}
.fab-call {
  background: #FFFFFF;
  color: var(--navy);
  border: 1px solid var(--border);
}
.fab-wa {
  background: #25D366;
  color: #FFFFFF;
  border: 1px solid #20BD5A;
}
.fab-pulse {
  position: relative;
}
.fab-pulse::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 99px;
  background: inherit;
  animation: pulseFab 2.4s cubic-bezier(0.24, 0, 0.38, 1) infinite;
  z-index: -1;
  opacity: 0.6;
}
@keyframes pulseFab {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  70% {
    transform: scale(1.18);
    opacity: 0;
  }
  100% {
    transform: scale(1.18);
    opacity: 0;
  }
}

@media (max-width: 600px) {
  .quick-contact-fab {
    bottom: 16px;
    right: 16px;
    left: 16px;
    flex-direction: row;
    justify-content: stretch;
  }
  .fab-btn {
    flex: 1;
    justify-content: center;
    padding: 11px 12px;
    font-size: 0.88rem;
  }
}

/* ---------- Accessibility: Prefers-Reduced-Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] {
    opacity: 1 !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;
  }
  [data-scroll-rotate] {
    rotate: none !important;
  }
  .values-marquee {
    animation: none !important;
  }
  .hd-subject {
    transform: none !important;
  }
}

/* ---------- School logo ---------- */
.brand .mark {
  object-fit: contain;
  border-radius: 50%;
}
.brand .mark {
  animation: logoIn 0.5s var(--ease-spring, ease-out) both;
}
@keyframes logoIn {
  from { opacity: 0; transform: scale(0.82); }
  to   { opacity: 1; transform: scale(1); }
}
.footer-logo {
  width: 80px;
  height: 80px;
  margin: 0 0 12px;
}
.footer-brand .brand-tagline {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chrome-soft);
  margin: 4px 0 10px;
}
@media (prefers-reduced-motion: reduce) {
  .brand .mark { animation: none; }
}

/* ============================================================
   Mobile refinements (tested at 360x740 — Galaxy A21)
   ============================================================ */
@media (max-width: 600px) {
  /* The fixed quick-contact bar was covering page content with nothing
     reserving space for it — keep clear room behind it. */
  .site-footer .footer-bottom { padding-bottom: 92px; }
  .fab-btn { min-height: 48px; padding: 12px 12px; }

  /* Tap targets: 44px minimum */
  .hd-pager button,
  .sc-pager button { min-width: 44px; min-height: 44px; }
  .btn-ghost { min-height: 44px; align-items: center; }
  .btn { min-height: 48px; }
  .nav-links a { min-height: 48px; display: flex; align-items: center; }
  .site-footer ul a,
  .footer-legal a { display: inline-block; padding: 9px 0; }
  .nav-toggle { width: 44px; height: 44px; }
  .topbar a { display: inline-block; padding: 4px 0; }
  .qf-tab { min-height: 44px; }
  .faq-q { padding-top: 16px; padding-bottom: 16px; }

  /* Legibility: nothing below ~11.5px on a phone */
  .brand-sub { font-size: 0.72rem; }
  .eyebrow { font-size: 0.76rem; }
  .node-lab { font-size: 0.75rem; }
  .hd-foot .aff,
  .hero-float .aff { font-size: 0.72rem; }
  .brand-tagline { font-size: 0.74rem; }
  .topbar { font-size: 0.8rem; }
}

/* Compact icon-only quick-contact on phones: the full-width bar was sitting
   on top of the hero CTA and footer links. Accessible names live on aria-label. */
@media (max-width: 600px) {
  .quick-contact-fab {
    left: auto;
    right: 12px;
    bottom: 12px;
    flex-direction: column;
    gap: 10px;
  }
  .fab-btn {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    min-height: 54px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
  }
  .fab-btn span { display: none; }
  .fab-btn svg { width: 22px; height: 22px; }
  .hd-foot, .footer-bottom { padding-right: 68px; }
  .map-frame { aspect-ratio: 4 / 3; }
  .site-footer .footer-bottom { padding-bottom: 76px; }
}

/* ============================================================
   Academic-year calendar (Academics → Quick facts → Academic Year)
   Two tracks — the month strip, and an admissions band beneath it.
   Both are 12-column grids that reflow to the same column count at
   every breakpoint, so the band always lines up under the months it
   covers (Jan–Apr). State is never carried by colour alone: every
   chip prints its own status word and the legend repeats it, so the
   calendar still reads correctly in greyscale or to a screen reader.
   ============================================================ */
.ay-lede {
  max-width: 68ch;
  margin: 0 auto 28px;
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.7;
}
.ay-lede b {
  color: var(--text-main);
  font-weight: 700;
}

.ay-cal {
  max-width: 880px;
  margin: 0 auto;
  text-align: left;
}
.ay-track-lab {
  margin: 0 0 9px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ay-months {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 6px;
}
.ay-m {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 74px;
  padding: 9px 4px;
  border-radius: 10px;
  border: 1px solid transparent;
  text-align: center;
}
.ay-mon {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.1;
}
.ay-state {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.25;
}
.ay-m--on {
  background: var(--light-blue);
  color: var(--navy);
  border-color: var(--tint-line);
}
.ay-m--end {
  background: var(--primary);
  color: #FFFFFF;
  border-color: var(--primary-hover);
}
.ay-m--off {
  background: var(--gold);
  color: var(--navy-deep);
  border-color: var(--gold-deep);
}

.ay-band {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 6px;
  margin: 0 0 26px;
}
.ay-band-fill {
  grid-column: 1 / span 4;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--navy);
  color: #FFFFFF;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

.ay-key {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  font-size: 0.86rem;
  color: var(--text-muted);
}
.ay-key li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ay-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.ay-dot--on {
  background: var(--light-blue);
  border: 1px solid var(--tint-line);
}
.ay-dot--end {
  background: var(--primary);
}
.ay-dot--off {
  background: var(--gold);
}

/* Written as real questions: this is the form answer engines and
   voice assistants lift, and it is mirrored in the page's FAQ JSON-LD. */
.ay-qa {
  max-width: 780px;
  margin: 36px auto 0;
  text-align: left;
}
.ay-qa dt {
  margin-top: 20px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
}
.ay-qa dt:first-of-type {
  margin-top: 0;
}
.ay-qa dd {
  margin: 6px 0 0;
  color: var(--text-muted);
  line-height: 1.7;
}
.ay-note {
  max-width: 780px;
  margin: 28px auto 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
  color: var(--text-muted);
  text-align: left;
}

@media (max-width: 880px) {
  .ay-months,
  .ay-band {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (max-width: 460px) {
  .ay-months,
  .ay-band {
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
  }
  /* At four columns the first row IS January–April, so the band
     simply fills it. */
  .ay-band-fill {
    grid-column: 1 / -1;
  }
  .ay-m {
    min-height: 64px;
    padding: 7px 3px;
  }
  .ay-mon {
    font-size: 0.88rem;
  }
  .ay-state {
    font-size: 0.6rem;
  }
}

/* ============================================================
   Colour themes (client review, Oct 2026)
   Blue is the default and lives in :root above. The other three
   only re-point tokens, so every component follows automatically.
   They are switched from the preview bar (assets/js/preview.js),
   which writes data-theme on <html>. Once the school picks one,
   copy its values into :root and delete the rest.
   ============================================================ */
html[data-theme="orange"] {
  --navy: #7C2D12;
  --navy-deep: #431407;
  --navy-mid: #9A3412;
  --navy-rgb: 124, 45, 18;
  --bg-page: #FFF7EF;
  --border: #F0D9C6;
  --border-glow: #E8BE9C;
  --text-main: #2A1A10;
  --text-muted: #79604F;
  --primary: #C2410C;
  --primary-hover: #9A3412;
  --primary-rgb: 194, 65, 12;
  --light-blue: #FFEDD5;
  --tint-line: #FCCFA0;
  --gold: #EDB12F;
  --gold-deep: #B7790F;
  --gold-hi: #F6C658;
  --gold-rgb: 237, 177, 47;
  --on-accent: #3A1505;
  --chrome: #9A3412;
  --chrome-hi: #B8481A;
  --chrome-deep: #6E250C;
  --chrome-rgb: 154, 52, 18;
  --band-a: #A63B14;
  --band-b: #6E250C;
  --on-chrome-2: #FFEEE2;
  --on-chrome-3: #F3C6A8;
  --chrome-soft: #FFDCC4;
  --accent-on-chrome: #FCD25A;
}
html[data-theme="green"] {
  --navy: #14532D;
  --navy-deep: #052E16;
  --navy-mid: #166534;
  --navy-rgb: 20, 83, 45;
  --bg-page: #F1F8F3;
  --border: #CFE5D6;
  --border-glow: #A8D2B6;
  --text-main: #10261A;
  --text-muted: #587062;
  --primary: #15803D;
  --primary-hover: #166534;
  --primary-rgb: 21, 128, 61;
  --light-blue: #DCF5E4;
  --tint-line: #B5E6C5;
  --on-accent: #052E16;
  --chrome: #14532D;
  --chrome-hi: #1F6B3D;
  --chrome-deep: #0C3A1F;
  --chrome-rgb: 20, 83, 45;
  --band-a: #1A6337;
  --band-b: #0C3A1F;
  --on-chrome-2: #E3F4E9;
  --on-chrome-3: #A6CFB4;
  --chrome-soft: #CBEBD6;
  --accent-on-chrome: #F0C463;
}
/* White: light header, footer and bands with dark type. Brand ink
   stays navy so buttons and the results chain keep their weight. */
html[data-theme="white"] {
  --bg-page: #F7F8FA;
  --border: #E2E6EC;
  --border-glow: #C9D2DD;
  --text-main: #15233A;
  --text-muted: #5B6B80;
  --primary: #0A2A5E;
  --primary-hover: #13407F;
  --primary-rgb: 10, 42, 94;
  --light-blue: #E8EDF5;
  --tint-line: #D0D9E6;
  --chrome: #FFFFFF;
  --chrome-hi: #F5F7FA;
  --chrome-deep: #F2F4F7;
  --chrome-rgb: 255, 255, 255;
  --band-a: #FFFFFF;
  --band-b: #EEF1F6;
  --on-chrome: #13233A;
  --on-chrome-2: #2D3F57;
  --on-chrome-3: #5B6B80;
  --chrome-soft: #4A5B72;
  --chrome-line: rgba(19, 35, 58, 0.1);
  --chrome-line-strong: rgba(19, 35, 58, 0.18);
  --chrome-hover: rgba(19, 35, 58, 0.06);
  --accent-on-chrome: #946414;
}

/* ---------- Font pairings ----------
   Default (in :root) is "Classic": Lora headings + DM Sans text. */
html[data-font="modern"] {
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --head-weight: 700;
}
html[data-font="friendly"] {
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Baloo 2", system-ui, -apple-system, "Segoe UI", sans-serif;
  --head-weight: 600;
}
html[data-font="original"] {
  --font-body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --head-weight: 600;
}

/* ============================================================
   Preview bar - REVIEW SITE ONLY, remove at launch together with
   the preview.js <script> tag on every page. Deliberately neutral
   charcoal so it never reads as part of the school's design.
   ============================================================ */
.pv-bar {
  position: relative;
  z-index: 260;
  background: #15171c;
  color: #f4f5f7;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.8rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.pv-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  min-height: 46px;
  padding-block: 6px;
}
.pv-tag {
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fcd34d;
}
.pv-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.pv-lab {
  color: #c9ccd3;
  margin-right: 2px;
}
.pv-sw {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 4px 11px 4px 5px;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: #f4f5f7;
  font: inherit;
  cursor: pointer;
}
.pv-sw:hover {
  border-color: rgba(255, 255, 255, 0.5);
}
.pv-sw i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sw);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.pv-sw[aria-pressed="true"] {
  background: #f4f5f7;
  border-color: #f4f5f7;
  color: #15171c;
  font-weight: 600;
}
.pv-sel {
  font: inherit;
  min-height: 32px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: #23262d;
  color: #f4f5f7;
}
.pv-reset {
  font: inherit;
  background: none;
  border: 0;
  color: #c9ccd3;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 6px 2px;
}
.pv-reset:hover {
  color: #fff;
}
.pv-bar :focus-visible {
  outline: 2px solid #fcd34d;
  outline-offset: 2px;
}
@media (max-width: 640px) {
  .pv-sw span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .pv-sw {
    padding: 5px;
    min-width: 36px;
    min-height: 36px;
    justify-content: center;
  }
  .pv-lab {
    display: none;
  }
}

/* ============================================================
   Header with ten destinations (Oct 2026 adds Activities,
   Achievements and Gallery). The bar runs wider than the content
   column so the full menu fits on a normal laptop; below that it
   becomes the menu button.
   ============================================================ */
.masthead .nav.wrap {
  width: min(1340px, 96vw);
  gap: 14px;
}
@media (min-width: 1261px) {
  .nav-links {
    gap: 2px;
  }
  .nav-links a {
    font-size: 0.9rem;
    padding: 0.5em 0.56em;
  }
}

/* Buttons that sit on a photograph (hero) - always light */
.btn-outline-light {
  background: transparent;
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.9);
}
.btn-outline-light:hover {
  background: #FFFFFF;
  color: #111;
  border-color: #FFFFFF;
  transform: translateY(-2px);
}
/* Outline button on a chrome surface (hero A) */
.btn-outline-chrome {
  background: transparent;
  color: var(--on-chrome);
  border-color: var(--on-chrome);
}
.btn-outline-chrome:hover {
  background: var(--on-chrome);
  color: var(--chrome);
  transform: translateY(-2px);
}

/* ---------- Small "to be confirmed" marker ---------- */
.tbc {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-deep);
  background: rgba(var(--gold-rgb), 0.14);
  border-radius: 6px;
  padding: 3px 8px;
}

/* ---------- Media cards (image on top) ---------- */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
}
.card.media-card {
  display: flex;
  flex-direction: column;
  padding: 0;
}
.media-card > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  position: relative;
  z-index: 2;
}
.mc-body {
  padding: 20px 22px 22px;
  position: relative;
  z-index: 2;
}
.mc-body h3 {
  font-size: 1.15rem;
  margin: 0 0 8px;
}
.mc-body p {
  margin: 0;
  font-size: 0.96rem;
  color: var(--text-muted);
}
.mc-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 6px;
}

/* ---------- Filter chips (gallery) ---------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 30px;
}
.chip {
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  min-height: 42px;
  padding: 0.5em 1.15em;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text-main);
  cursor: pointer;
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
.chip:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.chip[aria-pressed="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: #FFFFFF;
}
a.chip {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.chip .n {
  font-weight: 500;
  opacity: 0.75;
  margin-left: 4px;
}
.mtile[hidden] {
  display: none;
}
.mtile .cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 26px 12px 10px;
  font-size: 0.8rem;
  line-height: 1.35;
  text-align: left;
  color: #FFFFFF;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.72) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.mtile:hover .cap,
.mtile:focus-visible .cap {
  opacity: 1;
}
@media (hover: none) {
  .mtile .cap {
    opacity: 1;
  }
}

/* ---------- YouTube videos (click-to-load) ----------
   Each card is a real link to YouTube, so it works with JS off. With
   JS, a click swaps the thumbnail for the player in place - nothing
   from YouTube loads until a visitor asks for it. */
.videos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 22px;
}
.video {
  margin: 0;
}
.yt {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-sm);
}
.yt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-spring), opacity 0.3s ease;
}
.yt:hover img {
  transform: scale(1.04);
  opacity: 0.88;
}
.yt-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 68px;
  height: 48px;
  translate: -50% -50%;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}
.yt:hover .yt-play,
.yt:focus-visible .yt-play {
  background: #e62117;
}
.yt-play svg {
  width: 26px;
  height: 26px;
  color: #FFFFFF;
}
.yt iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video figcaption {
  margin-top: 12px;
}
.video .v-title {
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.35;
}
.video .v-meta {
  font-size: 0.86rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ---------- Updates timeline ---------- */
.tl {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1000px;
  position: relative;
}
.tl::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--border);
}
.tl-item {
  position: relative;
  padding: 0 0 36px 56px;
}
.tl-item:last-child {
  padding-bottom: 0;
}
.tl-item::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--card-bg);
  border: 4px solid var(--primary);
  box-shadow: 0 0 0 4px var(--bg-page);
}
.tl-date {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 10px;
}
.tl-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}
.tl-body {
  padding: 24px 26px;
  position: relative;
  z-index: 2;
}
.tl-body h3 {
  font-size: 1.3rem;
  margin: 0 0 10px;
}
.tl-body p {
  margin: 0 0 10px;
  color: var(--text-muted);
}
.tl-body p:last-child {
  margin-bottom: 0;
}
.tl-media {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  min-height: 220px;
  position: relative;
  z-index: 2;
}
.tl-media.two {
  grid-template-columns: 1fr 1fr;
}
/* Photos fill whatever height the text gives the card (never less
   than 240px) instead of setting it - a portrait shot would otherwise
   stretch the whole entry. */
.tl-media .mtile {
  margin: 0;
  border: 0;
  border-radius: 0;
  min-height: 240px;
  box-shadow: none;
}
.tl-media .mtile:hover {
  transform: none;
}
.tl-media .mtile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 760px) {
  .tl-card {
    grid-template-columns: 1fr;
  }
  .tl-media {
    order: -1;
    min-height: 0;
  }
  .tl-media .mtile {
    min-height: 0;
    aspect-ratio: 3 / 2;
  }
  .tl-item {
    padding-left: 44px;
  }
  .tl::before {
    left: 11px;
  }
  .tl-item::before {
    left: 2px;
  }
}

/* ---------- Achievements, year by year ---------- */
.yr {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 36px;
  padding: clamp(36px, 5vw, 56px) 0;
  border-top: 1px solid var(--border);
}
.yr:first-of-type {
  border-top: 0;
}
.yr-label {
  position: sticky;
  top: 100px;
  align-self: start;
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.6rem, 5vw, 3.8rem);
  line-height: 1;
  color: var(--primary);
}
.yr-label small {
  display: block;
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.yr-body > h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  margin: 0 0 18px;
}
.yr-body > h3 {
  font-size: 1.2rem;
  margin: 34px 0 14px;
}
.ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.ach-big {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  line-height: 1;
  color: var(--primary);
  margin: 0 0 8px;
}
.ach-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  border-top: 1px solid var(--border);
}
.ach-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
  color: var(--text-muted);
}
.ach-list li b {
  color: var(--text-main);
  font-weight: 600;
}
.ach-list li span {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 700;
  color: var(--text-main);
}
.posters {
  columns: 4 200px;
  column-gap: 14px;
}
.posters .mtile {
  margin-bottom: 14px;
}
.yr-pending {
  margin: 0;
  padding: 18px 22px;
  border: 1px dashed var(--border-glow);
  border-radius: 12px;
  color: var(--text-muted);
  font-size: 0.95rem;
}
@media (max-width: 760px) {
  .yr {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .yr-label {
    position: static;
  }
  .yr-label small {
    display: inline;
    margin-left: 10px;
  }
}

/* ---------- Collaborations ---------- */
.collab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.collab-grid .info-card .who {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 6px;
}
.collab-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
}
.collab-row a {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card-bg);
  color: var(--text-main);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.3;
  text-decoration: none;
  transition: border-color var(--duration-fast) ease, transform var(--duration-fast) var(--ease-spring), box-shadow var(--duration-fast) ease;
}
.collab-row a:hover {
  border-color: var(--primary);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  color: var(--text-main);
}
.collab-row svg {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  color: var(--primary);
}

/* ---------- Enquiry form: date of birth + send states ---------- */
.field-hint {
  font-size: 0.84rem;
  color: var(--text-muted);
  min-height: 1.3em;
  margin: 0;
}
.field-hint.warn {
  color: #8a4b00;
}
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-status.err {
  background: #FDECEC;
  color: #8B1C1C;
  border: 1px solid #F5C2C2;
}
.btn[disabled] {
  opacity: 0.7;
  cursor: progress;
}