/* ==========================================================================
   Lumina Ridge College — main stylesheet (shared by every page)
   Brand: school navy + gold (#F7B500).
   Order: 1. Variables  2. Base  3. Layout  4. Components  5. Sections
          6. Animations  7. Media queries
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES (design tokens) + Bootstrap theme mapping
   ========================================================================== */
:root {
  /* Brand colours */
  --color-primary: #0E2A47;          /* school navy */
  --color-primary-rgb: 14, 42, 71;
  --color-primary-dark: #0A1E33;
  --color-primary-dark-rgb: 10, 30, 51;
  --color-accent: #F7B500;           /* college gold */
  --color-accent-rgb: 247, 181, 0;
  --color-accent-dark: #E0A400;
  --color-secondary: #F7B500;        /* gold for labels and highlights (matches --color-accent) */
  --color-secondary-rgb: 247, 181, 0;

  /* Neutrals */
  --color-text: #18212E;
  --color-text-rgb: 24, 33, 46;
  --color-text-muted: #556070;
  --color-surface: #FFFFFF;
  --color-surface-rgb: 255, 255, 255;
  --color-background: #F7F6F2;
  --color-background-rgb: 247, 246, 242;
  --color-border: #E3E0D7;
  --color-tint-primary: #EAEFF5;
  --color-tint-accent: #FFF4D1;
  --color-on-dark: #FFFFFF;
  --color-on-dark-muted: #C3CCD8;
  --color-on-primary: #FFFFFF;
  --color-on-accent: #0E2A47;
  --color-danger: #B4232A;

  /* Overlays (single brand colour at different strengths) */
  --overlay-hero: linear-gradient(90deg, rgba(var(--color-primary-dark-rgb), 0.94) 0%, rgba(var(--color-primary-dark-rgb), 0.8) 45%, rgba(var(--color-primary-dark-rgb), 0.35) 100%);
  --overlay-banner: linear-gradient(90deg, rgba(var(--color-primary-dark-rgb), 0.92) 0%, rgba(var(--color-primary-dark-rgb), 0.7) 60%, rgba(var(--color-primary-dark-rgb), 0.45) 100%);
  --overlay-card: linear-gradient(180deg, transparent 30%, rgba(var(--color-primary-dark-rgb), 0.92) 100%);
  --overlay-cta: rgba(var(--color-primary-dark-rgb), 0.86);
  --overlay-center: linear-gradient(180deg, rgba(var(--color-primary-dark-rgb), 0.78) 0%, rgba(var(--color-primary-dark-rgb), 0.55) 50%, rgba(var(--color-primary-dark-rgb), 0.88) 100%);
  --glow-dark: radial-gradient(circle at 85% 0%, rgba(var(--color-surface-rgb), 0.07), transparent 55%);
  /* Contour rings (topographic "bush map" texture) for navy surfaces */
  --pattern-contour: repeating-radial-gradient(circle at 100% 0%, transparent 0 2.25rem, rgba(var(--color-surface-rgb), 0.045) 2.25rem 2.3125rem);
  --pattern-dots: radial-gradient(circle, var(--color-accent) 0.125rem, transparent 0.15625rem) 0 0 / 1rem 1rem;

  /* Typography */
  --font-primary: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 800;
  --font-size-xs: 0.75rem;     /* 12px */
  --font-size-sm: 0.875rem;    /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg: 1.25rem;     /* 20px */
  --font-size-lead: clamp(1.0625rem, 0.4vw + 1rem, 1.25rem);
  --font-size-h3: clamp(1.125rem, 0.5vw + 1rem, 1.5rem);
  --font-size-h2: clamp(1.875rem, 2.4vw + 1rem, 2.875rem);
  --font-size-page-title: clamp(2.25rem, 3.6vw + 1rem, 3.75rem);
  --font-size-hero: clamp(2.5rem, 4.6vw + 1rem, 4.5rem);
  --font-size-stat: clamp(2rem, 2.5vw + 1rem, 3rem);
  --font-size-display: clamp(6rem, 18vw, 12rem);
  --line-height-tight: 1.1;
  --line-height-snug: 1.3;
  --line-height-base: 1.65;
  --measure: 65ch;

  /* Spacing (8px system) */
  --space-1: 0.5rem;   /* 8px */
  --space-2: 1rem;     /* 16px */
  --space-3: 1.5rem;   /* 24px */
  --space-4: 2rem;     /* 32px */
  --space-5: 2.5rem;   /* 40px */
  --space-6: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */
  --space-10: 5rem;    /* 80px */
  --space-12: 6rem;    /* 96px */
  --section-space: clamp(4.5rem, 6vw + 2rem, 7.5rem);

  /* Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.75rem;
  --radius-pill: 62rem;
  --radius-organic: var(--radius-2xl) var(--radius-2xl) var(--radius-2xl) 6rem;
  --radius-hero: clamp(1.5rem, 4vw, 3.5rem);

  /* Borders, sizes */
  --border-width: 0.0625rem;   /* 1px */
  --nav-height: 5rem;
  --touch-target: 2.75rem;     /* 44px */
  --icon-size: 1.25rem;
  --line-on-dark: rgba(var(--color-surface-rgb), 0.14);

  /* Shadows & Motion */
  --shadow-soft: 0 0.5rem 1.5rem rgba(var(--color-text-rgb), 0.06);
  --shadow-lift: 0 1.5rem 3rem rgba(var(--color-primary-rgb), 0.16);
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);

  /* Bootstrap theme mapping */
  --bs-primary: var(--color-primary);
  --bs-primary-rgb: var(--color-primary-rgb);
  --bs-secondary: var(--color-secondary);
  --bs-secondary-rgb: var(--color-secondary-rgb);
  --bs-warning: var(--color-accent);
  --bs-warning-rgb: var(--color-accent-rgb);
  --bs-danger: var(--color-danger);
  --bs-dark: var(--color-primary-dark);
  --bs-dark-rgb: var(--color-primary-dark-rgb);
  --bs-body-font-family: var(--font-primary);
  --bs-body-font-size: var(--font-size-base);
  --bs-body-font-weight: var(--font-weight-regular);
  --bs-body-line-height: var(--line-height-base);
  --bs-body-color: var(--color-text);
  --bs-body-color-rgb: var(--color-text-rgb);
  --bs-body-bg: var(--color-background);
  --bs-body-bg-rgb: var(--color-background-rgb);
  --bs-emphasis-color: var(--color-text);
  --bs-secondary-color: var(--color-text-muted);
  --bs-heading-color: var(--color-primary);
  --bs-link-color: var(--color-primary);
  --bs-link-color-rgb: var(--color-primary-rgb);
  --bs-link-hover-color: var(--color-primary-dark);
  --bs-link-hover-color-rgb: var(--color-primary-dark-rgb);
  --bs-border-width: var(--border-width);
  --bs-border-color: var(--color-border);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-xl: var(--radius-xl);
  --bs-border-radius-xxl: var(--radius-2xl);
  --bs-border-radius-pill: var(--radius-pill);
  --bs-box-shadow: var(--shadow-soft);
  --bs-focus-ring-color: rgba(var(--color-primary-rgb), 0.35);
  --bs-form-invalid-color: var(--color-danger);
  --bs-form-invalid-border-color: var(--color-danger);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
/* Plus Jakarta Sans is loaded from Google Fonts in each page <head> (display=swap). */

html {
  scroll-padding-top: calc(var(--nav-height) + var(--space-2));
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img,
picture {
  max-width: 100%;
  height: auto;
}

h1, h2, h3, h4 {
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

main p {
  max-width: var(--measure);
}

a {
  text-underline-offset: 0.2em;
}

:focus-visible {
  outline: 0.1875rem solid var(--color-accent);
  outline-offset: 0.1875rem;
}

::selection {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.icon {
  width: var(--icon-size);
  height: var(--icon-size);
  flex-shrink: 0;
  vertical-align: middle;
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-2);
  top: var(--space-2);
  z-index: 1090;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: var(--font-weight-semibold);
}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.section {
  position: relative;
  padding-block: var(--section-space);
}

.section--surface {
  background: var(--color-surface);
}

.section--dark {
  isolation: isolate;
  overflow: clip;
  background: var(--pattern-contour), var(--glow-dark), var(--color-primary);
  color: var(--color-on-dark-muted);
}

.section__header {
  max-width: 48rem;
  margin-bottom: var(--space-6);
}

/* Skip rendering work for off-screen sections */
.cv-auto {
  content-visibility: auto;
  contain-intrinsic-size: auto 60rem;
}

/* ==========================================================================
   4. COMPONENTS
   ========================================================================== */

/* --- Page loader (shown only when motion is allowed; see Animations) --- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  place-items: center;
  background: var(--pattern-contour), var(--glow-dark), var(--color-primary-dark);
  color: var(--color-on-dark);
  pointer-events: none;
}

.loader__inner {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
}

.loader__mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 7rem;
  height: 7rem;
}

.loader__mark .crest {
  width: 3.5rem;
  height: 4rem;
}

/* Gold arc spinning around the crest */
.loader__ring {
  position: absolute;
  inset: 0;
  border: 0.1875rem solid rgba(var(--color-surface-rgb), 0.1);
  border-top-color: var(--color-accent);
  border-right-color: var(--color-accent);
  border-radius: 50%;
}

.loader__name {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
  text-align: center;
}

.loader__name span {
  display: block;
  color: var(--color-accent);
  font-size: 0.6875rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.loader__bar {
  position: relative;
  overflow: hidden;
  width: 8rem;
  height: 0.1875rem;
  border-radius: var(--radius-pill);
  background: rgba(var(--color-surface-rgb), 0.12);
}

.loader__bar-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--color-accent);
  transform-origin: left center;
}

/* --- Scroll progress bar (scroll-driven, see Animations) --- */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1100;
  display: none;
  height: 0.1875rem;
  background: var(--color-accent);
  transform-origin: left center;
  pointer-events: none;
}

/* --- Utility bar --- */
.utility {
  background: var(--color-primary-dark);
  color: var(--color-on-dark-muted);
  font-size: var(--font-size-sm);
}

.utility__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.utility__list {
  display: none;
  gap: var(--space-3);
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}

.utility__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--touch-target);
  color: var(--color-on-dark-muted);
  text-decoration: none;
}

.utility__link:hover {
  color: var(--color-on-dark);
}

.utility__link .icon {
  width: 1rem;
  height: 1rem;
  color: var(--color-accent);
}

.utility__link--feature {
  color: var(--color-on-dark);
  font-weight: var(--font-weight-semibold);
}

/* --- Header / navbar --- */
/* The header floats over the hero/banner (negative margin pulls the next section up under it).
   Its navy background is a pseudo-element whose opacity fades in as you scroll. */
.site-header {
  view-transition-name: site-header;
  isolation: isolate;
  margin-bottom: calc(-1 * var(--nav-height));
  border-bottom: var(--border-width) solid var(--line-on-dark);
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(var(--color-primary-dark-rgb), 0.92);
  backdrop-filter: saturate(1.4) blur(0.75rem);
  box-shadow: 0 0.75rem 2rem rgba(var(--color-primary-dark-rgb), 0.25);
}

/* Mobile menu open: always solid */
.site-header:has(.navbar-collapse.show, .navbar-collapse.collapsing)::before {
  opacity: 1;
  animation: none;
}

.site-header .navbar {
  --bs-navbar-padding-y: var(--space-1);
  --bs-navbar-color: var(--color-on-dark);
  --bs-navbar-hover-color: var(--color-accent);
  --bs-navbar-active-color: var(--color-on-dark);
  --bs-navbar-brand-color: var(--color-on-dark);
  --bs-navbar-brand-hover-color: var(--color-on-dark);
  --bs-navbar-nav-link-padding-x: 0.875rem;
  --bs-navbar-toggler-padding-x: var(--space-1);
  --bs-navbar-toggler-padding-y: var(--space-1);
  --bs-navbar-toggler-border-color: var(--line-on-dark);
  --bs-navbar-toggler-border-radius: var(--radius-md);
  min-height: var(--nav-height);
}

.navbar-toggler {
  min-width: var(--touch-target);
  min-height: var(--touch-target);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--color-primary);
  text-decoration: none;
}

/* Crest (inline SVG, coloured by tokens) */
.crest {
  width: 2.5rem;
  height: 2.9rem;
  flex-shrink: 0;
}

.crest__shield { fill: var(--color-primary); }
.crest__trim { fill: none; stroke: var(--color-accent); stroke-width: 1.5; }
.crest__cap { fill: var(--color-on-primary); }
.crest__star { fill: var(--color-accent); }

.brand__name {
  display: block;
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.brand__tagline {
  display: block;
  color: var(--color-secondary);
  font-size: 0.6875rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.site-header .brand {
  color: var(--color-on-dark);
}

.site-header .brand__tagline {
  color: var(--color-accent);
}

.site-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--touch-target);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.site-nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0.25rem;
  height: 0.125rem;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
}

.site-nav__link:hover::after,
.site-nav__link:focus-visible::after,
.site-nav__link[aria-current="page"]::after,
.site-nav__link.active::after {
  transform: scaleX(1);
}

/* --- Home dropdown (Bootstrap dropdown, themed through its variables) --- */
.site-nav__chev {
  width: 0.875rem;
  height: 0.875rem;
  margin-inline-start: 0.25rem;
}

.site-header .dropdown-menu {
  --bs-dropdown-bg: var(--color-primary-dark);
  --bs-dropdown-border-color: var(--line-on-dark);
  --bs-dropdown-border-radius: var(--radius-lg);
  --bs-dropdown-padding-y: var(--space-1);
  --bs-dropdown-min-width: 15rem;
  --bs-dropdown-link-color: var(--color-on-dark);
  --bs-dropdown-link-hover-color: var(--color-accent);
  --bs-dropdown-link-hover-bg: rgba(var(--color-surface-rgb), 0.06);
  --bs-dropdown-link-active-color: var(--color-on-accent);
  --bs-dropdown-link-active-bg: var(--color-accent);
  --bs-dropdown-item-padding-x: var(--space-2);
  --bs-dropdown-item-padding-y: 0.625rem;
  margin-top: 0;
  border-top: 0.1875rem solid var(--color-accent);
  box-shadow: var(--shadow-lift);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-target);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.dropdown-item__note {
  margin-inline-start: auto;
  color: var(--color-on-dark-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dropdown-item.active .dropdown-item__note,
.dropdown-item:active .dropdown-item__note {
  color: var(--color-on-accent);
}

/* --- Buttons (themed via Bootstrap's --bs-btn-* variables) --- */
.btn {
  --bs-btn-padding-x: var(--space-3);
  --bs-btn-padding-y: 0.625rem;
  --bs-btn-font-weight: var(--font-weight-semibold);
  --bs-btn-border-radius: var(--radius-pill);
  --bs-btn-border-width: 0.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: var(--touch-target);
}

.btn-lg {
  --bs-btn-padding-x: var(--space-4);
  --bs-btn-padding-y: 0.8125rem;
  --bs-btn-font-size: var(--font-size-base);
  --bs-btn-border-radius: var(--radius-pill);
}

.btn-primary {
  --bs-btn-color: var(--color-on-primary);
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-color: var(--color-on-primary);
  --bs-btn-hover-bg: var(--color-primary-dark);
  --bs-btn-hover-border-color: var(--color-primary-dark);
  --bs-btn-active-color: var(--color-on-primary);
  --bs-btn-active-bg: var(--color-primary-dark);
  --bs-btn-active-border-color: var(--color-primary-dark);
  --bs-btn-focus-shadow-rgb: var(--color-primary-rgb);
}

.btn-outline-primary {
  --bs-btn-color: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-color: var(--color-on-primary);
  --bs-btn-hover-bg: var(--color-primary);
  --bs-btn-hover-border-color: var(--color-primary);
  --bs-btn-active-color: var(--color-on-primary);
  --bs-btn-active-bg: var(--color-primary-dark);
  --bs-btn-active-border-color: var(--color-primary-dark);
  --bs-btn-focus-shadow-rgb: var(--color-primary-rgb);
}

.btn--accent {
  --bs-btn-color: var(--color-on-accent);
  --bs-btn-bg: var(--color-accent);
  --bs-btn-border-color: var(--color-accent);
  --bs-btn-hover-color: var(--color-on-accent);
  --bs-btn-hover-bg: var(--color-accent-dark);
  --bs-btn-hover-border-color: var(--color-accent-dark);
  --bs-btn-active-color: var(--color-on-accent);
  --bs-btn-active-bg: var(--color-accent-dark);
  --bs-btn-active-border-color: var(--color-accent-dark);
  --bs-btn-focus-shadow-rgb: var(--color-accent-rgb);
}

.btn--ghost {
  --bs-btn-color: var(--color-on-dark);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: rgba(var(--color-surface-rgb), 0.6);
  --bs-btn-hover-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-on-dark);
  --bs-btn-hover-border-color: var(--color-on-dark);
  --bs-btn-active-color: var(--color-primary);
  --bs-btn-active-bg: var(--color-on-dark);
  --bs-btn-active-border-color: var(--color-on-dark);
  --bs-btn-focus-shadow-rgb: var(--color-surface-rgb);
}

.btn__icon {
  width: 1.125rem;
  height: 1.125rem;
}

/* Text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: var(--touch-target);
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.link-arrow:hover {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 0.125rem;
}

.link-arrow .icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-secondary);
}

.section--dark .link-arrow {
  color: var(--color-on-dark);
}

/* --- Eyebrow, titles, accent text --- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--space-2);
  color: var(--color-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: var(--space-4);
  height: 0.125rem;
  background: var(--color-accent);
}

.section--dark .eyebrow,
.hero .eyebrow,
.page-hero .eyebrow,
.cta-band .eyebrow {
  color: var(--color-accent);
}

.section-title {
  margin-bottom: var(--space-2);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-tight);
}

.section--dark .section-title {
  color: var(--color-on-dark);
}

.lead-text {
  color: var(--color-text-muted);
  font-size: var(--font-size-lead);
}

.section--dark .lead-text {
  color: var(--color-on-dark-muted);
}
.text-gold { color: var(--color-accent); }

/* --- Shared card shell; hover shadow is a pseudo-element (opacity only) --- */
.ui-card {
  position: relative;
  isolation: isolate;
  height: 100%;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
}

.ui-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: var(--shadow-lift);
  opacity: 0;
  pointer-events: none;
}

.ui-card:hover::after,
.ui-card:focus-within::after {
  opacity: 1;
}

.ui-card__body {
  padding: var(--space-4) var(--space-3);
}

.ui-card__media {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--radius-xl) - var(--border-width)) calc(var(--radius-xl) - var(--border-width)) 0 0;
  background: var(--color-tint-primary);
}

.ui-card__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.ui-card__title {
  margin-bottom: var(--space-1);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-snug);
}

.ui-card__text {
  color: var(--color-text-muted);
}

.ui-card--dark {
  border-color: var(--line-on-dark);
  background: rgba(var(--color-surface-rgb), 0.04);
  color: var(--color-on-dark-muted);
}

.ui-card--dark .ui-card__title {
  color: var(--color-on-dark);
}

.ui-card--dark .ui-card__text {
  color: var(--color-on-dark-muted);
}

/* --- Icon badge (single brand style) --- */
.icon-badge {
  position: relative;
  isolation: isolate;
  display: inline-grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: var(--space-3);
  border-radius: 50%;
  background: var(--color-tint-primary);
  color: var(--color-primary);
}

.icon-badge .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.icon-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--color-primary);
  opacity: 0;
}

.ui-card:hover .icon-badge,
.bento-card:hover .icon-badge {
  color: var(--color-accent);
}

.ui-card:hover .icon-badge::before,
.bento-card:hover .icon-badge::before {
  opacity: 1;
}

/* --- Check list --- */
.check-list {
  display: grid;
  gap: 0.625rem;
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.check-list .icon {
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 0.125rem;
  padding: 0.25rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-primary);
}

.section--dark .check-list .icon,
.dept-panel .check-list .icon {
  background: rgba(var(--color-surface-rgb), 0.08);
  color: var(--color-accent);
}

/* --- Chips --- */
.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem var(--space-2);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.chip .icon {
  width: 1rem;
  height: 1rem;
  color: var(--color-secondary);
}

/* --- Stats --- */
.stat {
  height: 100%;
  padding: var(--space-3) var(--space-2);
  text-align: center;
}

.stat__value {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--color-primary);
  font-size: var(--font-size-stat);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: -0.03em;
}

.stat__label {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.section--dark .stat__value,
.stats-band .stat__value {
  color: var(--color-on-dark);
}

.section--dark .stat__label,
.stats-band .stat__label {
  color: var(--color-on-dark-muted);
}

.stats-band {
  position: relative;
  overflow: hidden;
  padding: var(--space-2);
  border-top: 0.25rem solid var(--color-accent);
  border-radius: var(--radius-2xl);
  background: var(--pattern-contour), var(--glow-dark), var(--color-primary);
}

/* --- FAQ: Bootstrap accordion skin on native <details> (no JS) --- */
.faq {
  --bs-accordion-bg: var(--color-surface);
  --bs-accordion-color: var(--color-text);
  --bs-accordion-btn-color: var(--color-primary);
  --bs-accordion-border-color: var(--color-border);
  --bs-accordion-border-radius: var(--radius-lg);
  --bs-accordion-inner-border-radius: calc(var(--radius-lg) - var(--border-width));
  --bs-accordion-btn-padding-x: var(--space-3);
  --bs-accordion-btn-padding-y: 1.125rem;
  --bs-accordion-body-padding-x: var(--space-3);
  --bs-accordion-body-padding-y: var(--space-2);
  --bs-accordion-active-color: var(--color-primary);
  --bs-accordion-active-bg: var(--color-tint-accent);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--color-accent-rgb), 0.4);
}

.faq .accordion-button {
  min-height: var(--touch-target);
  font-weight: var(--font-weight-semibold);
  list-style: none;
  cursor: pointer;
}

.faq .accordion-button::-webkit-details-marker {
  display: none;
}

.faq .accordion-item[open] > .accordion-button {
  color: var(--bs-accordion-active-color);
  background-color: var(--bs-accordion-active-bg);
  box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}

.faq .accordion-item[open] > .accordion-button::after {
  background-image: var(--bs-accordion-btn-active-icon);
  transform: var(--bs-accordion-btn-icon-transform);
}

.faq .accordion-item > .accordion-button:focus-visible {
  box-shadow: var(--bs-accordion-btn-focus-box-shadow);
}

.faq .accordion-item:first-of-type > .accordion-button {
  border-top-left-radius: var(--bs-accordion-inner-border-radius);
  border-top-right-radius: var(--bs-accordion-inner-border-radius);
}

.faq .accordion-item:last-of-type:not([open]) > .accordion-button {
  border-bottom-left-radius: var(--bs-accordion-inner-border-radius);
  border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
}

.faq .accordion-body {
  color: var(--color-text-muted);
}

/* --- Forms (native validation only) --- */
.form-card {
  padding: var(--space-4) var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-top: 0.25rem solid var(--color-accent);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-soft);
}

.form-card__title {
  margin-bottom: var(--space-1);
  font-size: var(--font-size-h3);
}

.form-card__note {
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.form-control,
.form-select {
  min-height: 3rem;
  border-radius: var(--radius-md);
  background-color: var(--color-background);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--color-primary);
  background-color: var(--color-surface);
}

.form-label {
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: var(--touch-target);
  padding-inline-start: 0;
}

.form-check .form-check-input {
  float: none;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.125rem 0 0;
}

.form-check-input:checked {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}

.form-check-label {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.field-error {
  display: none;
  margin: var(--space-1) 0 0;
  color: var(--color-danger);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.form-control:user-invalid,
.form-select:user-invalid,
.form-check-input:user-invalid {
  border-color: var(--bs-form-invalid-border-color);
}

.form-control:user-invalid ~ .field-error,
.form-select:user-invalid ~ .field-error,
.form-check:has(.form-check-input:user-invalid) ~ .field-error {
  display: block;
}

/* --- Breadcrumb (on dark banners) --- */
.page-hero .breadcrumb {
  --bs-breadcrumb-divider-color: var(--color-on-dark-muted);
  --bs-breadcrumb-item-active-color: var(--color-accent);
  --bs-breadcrumb-margin-bottom: var(--space-2);
  align-items: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.page-hero .breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  color: var(--color-on-dark);
}

/* --- Table (fees) --- */
.table-shell {
  overflow: hidden;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}

.fees-table {
  --bs-table-bg: var(--color-surface);
  --bs-table-striped-bg: var(--color-background);
  --bs-table-border-color: var(--color-border);
  margin-bottom: 0;
}

.fees-table th,
.fees-table td {
  padding: var(--space-2) var(--space-3);
  white-space: nowrap;
}

.fees-table tbody th {
  color: var(--color-primary);
}

.fees-table thead th {
  --bs-table-bg: var(--color-primary);
  border-bottom: 0.1875rem solid var(--color-accent);
  color: var(--color-on-dark);
  font-size: var(--font-size-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- Pagination --- */
.pagination {
  --bs-pagination-padding-x: 1rem;
  --bs-pagination-padding-y: 0.625rem;
  --bs-pagination-color: var(--color-primary);
  --bs-pagination-border-color: var(--color-border);
  --bs-pagination-hover-color: var(--color-primary);
  --bs-pagination-hover-bg: var(--color-tint-accent);
  --bs-pagination-active-bg: var(--color-primary);
  --bs-pagination-active-border-color: var(--color-primary);
  gap: var(--space-1);
}

.pagination .page-link,
.pagination .page-item .page-link {
  display: grid;
  place-items: center;
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  border-radius: var(--radius-pill);
}

/* --- Call-to-action banner (photo + navy overlay) --- */
.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background: var(--color-primary);
  color: var(--color-on-dark-muted);
  text-align: center;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pattern-contour), var(--overlay-cta);
}

.cta-band__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.cta-band__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta-band__inner {
  padding: var(--space-6) var(--space-3);
}

.cta-band__title {
  margin-bottom: var(--space-2);
  color: var(--color-on-dark);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-tight);
}

.cta-band__text {
  margin-inline: auto;
  margin-bottom: var(--space-4);
  font-size: var(--font-size-lead);
}

/* --- Page banner (inner pages) --- */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: calc(var(--nav-height) + var(--space-6)) var(--space-10);
  border-radius: 0 0 var(--radius-hero) var(--radius-hero);
  background: var(--pattern-contour), var(--glow-dark), var(--color-primary);
  color: var(--color-on-dark-muted);
}

.page-hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pattern-contour), var(--overlay-banner);
}

.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.page-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero__title {
  max-width: 48rem;
  margin-bottom: var(--space-2);
  color: var(--color-on-dark);
  font-size: var(--font-size-page-title);
  line-height: var(--line-height-tight);
  letter-spacing: -0.03em;
}

.page-hero__lead {
  max-width: 42rem;
  margin-bottom: 0;
  color: var(--color-on-dark);
  font-size: var(--font-size-lead);
}

/* --- Footer --- */
.site-footer {
  padding-top: var(--space-10);
  overflow: clip;
  border-top: 0.25rem solid var(--color-accent);
  background: var(--pattern-contour), var(--color-primary-dark);
  color: var(--color-on-dark-muted);
  font-size: var(--font-size-sm);
}

.site-footer__brand,
.site-footer__brand:hover {
  color: var(--color-on-dark);
}

.site-footer__brand .brand__tagline {
  color: var(--color-accent);
}

.site-footer__heading {
  margin-bottom: var(--space-2);
  color: var(--color-on-dark);
  font-size: var(--font-size-base);
  letter-spacing: 0;
}

.site-footer__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: var(--touch-target);
  color: var(--color-on-dark-muted);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
  color: var(--color-on-dark);
  text-decoration: underline;
}

.site-footer__address {
  font-style: normal;
}

.site-footer__contact {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  margin-bottom: 0.25rem;
}

.site-footer__contact > .icon {
  margin-top: 0.75rem;
  color: var(--color-accent);
}

.site-footer__contact > span {
  padding-block: 0.625rem;
}

.site-footer__social-link {
  display: inline-grid;
  place-items: center;
  width: var(--touch-target);
  height: var(--touch-target);
  border: var(--border-width) solid var(--line-on-dark);
  border-radius: 50%;
  color: var(--color-on-dark);
}

.site-footer__social-link:hover {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.newsletter {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-3);
  border: var(--border-width) solid var(--line-on-dark);
  border-radius: var(--radius-xl);
  background: rgba(var(--color-surface-rgb), 0.04);
}

.newsletter__title {
  margin-bottom: 0.25rem;
  color: var(--color-on-dark);
  font-size: var(--font-size-h3);
}

.newsletter .form-control {
  border-color: var(--line-on-dark);
  background: rgba(var(--color-primary-dark-rgb), 0.6);
  color: var(--color-on-dark);
}

.newsletter .form-control::placeholder {
  color: var(--color-on-dark-muted);
}

.acknowledgement {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-xl);
  background: rgba(var(--color-surface-rgb), 0.04);
}

.acknowledgement__mark {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border: 0.125rem solid var(--color-accent);
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-accent) 0.125rem, transparent 0.15625rem) 0 0 / 0.625rem 0.625rem;
}

.acknowledgement p {
  margin: 0;
}

.site-footer__bottom {
  margin-top: var(--space-4);
  padding-block: var(--space-2);
  border-top: var(--border-width) solid var(--line-on-dark);
}

/* --- Accent button: arrow sits in a navy circle --- */
.btn--accent .btn__icon {
  width: 1.75rem;
  height: 1.75rem;
  margin-inline-end: calc(-1 * var(--space-2));
  padding: 0.375rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-accent);
}

/* --- Section spacing helpers --- */
.section--flush-top {
  padding-top: 0;
}

/* CTA sits right under a same-colour section; give it room after a coloured one */
.section--cta {
  padding-top: 0;
}

.section--dark + .section--cta,
.section--surface + .section--cta {
  padding-top: var(--section-space);
}

/* ==========================================================================
   5. SECTIONS
   ========================================================================== */

/* --- Home hero (photo + navy overlay; never animated: LCP) --- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: flex;
  align-items: center;
  min-height: clamp(38rem, 100svh, 62rem);
  padding-block: calc(var(--nav-height) + var(--space-8)) var(--space-12);
  border-radius: 0 0 var(--radius-hero) var(--radius-hero);
  background: var(--color-primary);
  color: var(--color-on-dark);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pattern-contour), var(--overlay-hero);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__content {
  max-width: 42rem;
}

.hero__title {
  margin-bottom: var(--space-3);
  color: var(--color-on-dark);
  font-size: var(--font-size-hero);
  line-height: 1.04;
  letter-spacing: -0.04em;
}

.hero__lead {
  margin-bottom: var(--space-4);
  font-size: var(--font-size-lead);
}

/* --- Quick links bar (overlaps hero) --- */
.quick-links {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--space-8));
}

.quick-links__list {
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-lift);
  list-style: none;
}

.quick-links__list > li {
  box-shadow: inset calc(-1 * var(--border-width)) calc(-1 * var(--border-width)) 0 var(--color-border);
}

/* Mobile: icon above text in a 2 x 2 grid; side by side from md up */
.quick-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  height: 100%;
  min-height: 5.5rem;
  padding: var(--space-2);
  color: var(--color-primary);
  text-decoration: none;
}

.quick-link:hover {
  background: var(--color-tint-accent);
}

.quick-link__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-accent);
}

.quick-link__title {
  display: block;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
}

.quick-link__text {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* --- Bento "why us" grid --- */
.bento-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 16rem;
  overflow: hidden;
  padding: var(--space-4) var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
}

.bento-card__title {
  margin-bottom: var(--space-1);
  font-size: var(--font-size-h3);
}

.bento-card__text {
  margin-bottom: 0;
  color: var(--color-text-muted);
}

.bento-card--image {
  justify-content: flex-end;
  min-height: 26rem;
  border: 0;
  background: var(--color-primary);
}

.bento-card--image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--overlay-card);
}

.bento-card__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bento-card--image .bento-card__title {
  color: var(--color-on-dark);
}

.bento-card--image .bento-card__text {
  color: var(--color-on-dark-muted);
}

/* --- School stage cards --- */
.stage-card__media img {
  aspect-ratio: 4 / 3;
}

.stage-card__num {
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  padding: 0.375rem var(--space-2);
  border-radius: 0 var(--radius-md) 0 0;
  background: var(--color-primary);
  color: var(--color-accent);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Stacked stages (academics page; sticky from lg up) */
.stack {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.stack__item {
  top: calc(var(--nav-height) + var(--space-2));
}

.stack-card {
  overflow: hidden;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-2xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-lift);
}

.stack-card__media {
  height: 100%;
  min-height: 14rem;
  background: var(--color-tint-primary);
}

.stack-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.stack-card__body {
  padding: var(--space-4) var(--space-3);
}

.stack-card__title {
  margin-bottom: var(--space-2);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-tight);
}

.stack-card__ages {
  display: inline-block;
  margin-bottom: var(--space-2);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

/* --- Split media (image with offset gold frame) --- */
.split-media {
  position: relative;
  isolation: isolate;
}

.split-media::before {
  content: "";
  position: absolute;
  inset: var(--space-3) calc(-1 * var(--space-1)) calc(-1 * var(--space-2)) var(--space-3);
  z-index: -1;
  border: 0.125rem solid var(--color-accent);
  border-radius: var(--radius-organic);
}

/* Gold dot grid peeking out behind the photo */
.split-media::after {
  content: "";
  position: absolute;
  top: calc(-1 * var(--space-2));
  right: calc(-1 * var(--space-1));
  z-index: -2;
  width: 7rem;
  height: 7rem;
  background: var(--pattern-dots);
  opacity: 0.7;
}

.split-media__frame {
  overflow: hidden;
  border-radius: var(--radius-organic);
  background: var(--color-tint-primary);
  box-shadow: var(--shadow-lift);
}

.split-media__frame img {
  display: block;
  width: 100%;
  height: auto;
}

.split-media__badge {
  position: absolute;
  bottom: var(--space-3);
  inset-inline-start: var(--space-2);
  max-width: 15rem;
  margin: 0;
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  background: var(--color-primary);
  color: var(--color-on-dark-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  box-shadow: var(--shadow-soft);
}

.split-media__badge strong {
  display: block;
  color: var(--color-accent);
  font-size: var(--font-size-h3);
}

/* --- Quote / signature --- */
.big-quote {
  margin: 0 0 var(--space-4);
  padding-inline-start: var(--space-3);
  border-inline-start: 0.25rem solid var(--color-accent);
  color: var(--color-primary);
  font-size: clamp(1.25rem, 1.1vw + 1rem, 1.625rem);
  font-weight: var(--font-weight-semibold);
  line-height: 1.45;
  letter-spacing: -0.015em;
}

.big-quote p {
  max-width: none;
}

.signature {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.signature img {
  width: 3.5rem;
  height: 3.5rem;
  border: 0.125rem solid var(--color-accent);
  border-radius: 50%;
  object-fit: cover;
}

.signature__name {
  display: block;
  color: var(--color-primary);
  font-style: normal;
  font-weight: var(--font-weight-bold);
}

.signature__role {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* --- Gallery mosaic --- */
.mosaic {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 10rem;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mosaic__item {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: var(--radius-xl);
  background: var(--color-primary-dark);
}

.mosaic__item--wide { grid-column: span 2; }
.mosaic__item--tall { grid-row: span 2; }

.mosaic__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mosaic__caption {
  position: absolute;
  inset: auto 0 0;
  padding: var(--space-4) var(--space-2) var(--space-2);
  background: var(--overlay-card);
  color: var(--color-on-dark);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

/* Masonry gallery (gallery page) */
.masonry {
  columns: 1;
  column-gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.masonry__item {
  break-inside: avoid;
  margin-bottom: var(--space-2);
}

.masonry__figure img {
  height: auto;
}

/* --- Testimonials --- */
.testimonial {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--space-4) var(--space-3);
}

.testimonial__mark {
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: var(--space-2);
  color: var(--color-accent);
}

.testimonial__text {
  flex-grow: 1;
  margin-bottom: var(--space-3);
  color: var(--color-text);
  font-size: var(--font-size-lead);
}

.testimonial__author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: var(--space-2);
  border-top: var(--border-width) solid var(--color-border);
}

.testimonial__author img {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  object-fit: cover;
}

.testimonial--featured {
  border-color: transparent;
  background: var(--glow-dark), var(--color-primary);
}

.testimonial--featured .testimonial__text,
.testimonial--featured .signature__name {
  color: var(--color-on-dark);
}

.testimonial--featured .signature__role {
  color: var(--color-on-dark-muted);
}

.testimonial--featured .testimonial__author {
  border-top-color: var(--line-on-dark);
}

/* --- News cards --- */
.news-card__media img {
  aspect-ratio: 16 / 10;
}

.news-card__date {
  position: absolute;
  top: var(--space-2);
  inset-inline-start: var(--space-2);
  display: grid;
  place-items: center;
  min-width: 3.5rem;
  padding: var(--space-1);
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-on-dark);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  text-transform: uppercase;
}

.news-card__day {
  color: var(--color-accent);
  font-size: var(--font-size-lg);
}

.news-card__cat {
  margin-bottom: var(--space-1);
  color: var(--color-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.news-card__link {
  color: var(--color-primary);
  text-decoration: none;
}

.news-card__link:hover,
.news-card__link:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
}

.news-card__meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.news-card__meta .icon {
  width: 1rem;
  height: 1rem;
}

/* Featured article (news page) */
.feature-post {
  overflow: hidden;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-2xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}

.feature-post__media {
  height: 100%;
  min-height: 16rem;
  overflow: hidden;
  background: var(--color-tint-primary);
}

.feature-post__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-post__body {
  padding: var(--space-4) var(--space-3);
}

.feature-post__title {
  margin-bottom: var(--space-2);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-tight);
}

/* CSS-only filters (radio + :has) for news and gallery */
.filter {
  margin: 0 0 var(--space-5);
  padding: 0;
  border: 0;
}

.filter__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.filter__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.filter__label {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  padding: 0 var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.filter__label:hover {
  border-color: var(--color-primary);
}

.filter__input:checked + .filter__label {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-dark);
}

.filter__input:focus-visible + .filter__label {
  outline: 0.1875rem solid var(--color-accent);
  outline-offset: 0.1875rem;
}

.news-board:has(#filter-events:checked) [data-cat]:not([data-cat="events"]),
.news-board:has(#filter-sport:checked) [data-cat]:not([data-cat="sport"]),
.news-board:has(#filter-learning:checked) [data-cat]:not([data-cat="learning"]),
.news-board:has(#filter-community:checked) [data-cat]:not([data-cat="community"]),
.gallery-board:has(#gal-learning:checked) [data-cat]:not([data-cat="learning"]),
.gallery-board:has(#gal-sport:checked) [data-cat]:not([data-cat="sport"]),
.gallery-board:has(#gal-arts:checked) [data-cat]:not([data-cat="arts"]),
.gallery-board:has(#gal-outdoors:checked) [data-cat]:not([data-cat="outdoors"]) {
  display: none;
}

/* Events list */
.event {
  display: flex;
  gap: var(--space-2);
  padding-block: var(--space-2);
  border-bottom: var(--border-width) solid var(--color-border);
}

.event:last-child {
  border-bottom: 0;
}

.event__date {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-lg);
  background: var(--color-primary);
  color: var(--color-on-dark);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  text-transform: uppercase;
}

.event__day {
  color: var(--color-accent);
  font-size: var(--font-size-lg);
}

.event__title {
  margin-bottom: 0.25rem;
  font-size: var(--font-size-base);
}

.event__meta {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* --- Values (about) --- */
.value-card__num {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--font-size-stat);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

/* --- Timeline (about) --- */
.timeline {
  position: relative;
  max-width: 52rem;
  margin: 0 auto;
  padding: 0 0 0 var(--space-6);
  list-style: none;
}

.timeline::before,
.timeline__progress {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 0.9375rem;
  width: 0.125rem;
  background: var(--line-on-dark);
}

.timeline__progress {
  background: var(--color-accent);
  transform-origin: top center;
}

.timeline__item {
  position: relative;
  padding-bottom: var(--space-5);
}

.timeline__item:last-child {
  padding-bottom: 0;
}

.timeline__item::before {
  content: "";
  position: absolute;
  top: 0.25rem;
  inset-inline-start: calc(-1 * var(--space-6) + 0.375rem);
  width: 1.25rem;
  height: 1.25rem;
  border: 0.25rem solid var(--color-primary);
  border-radius: 50%;
  background: var(--color-accent);
}

.timeline__year {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--color-accent);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.timeline__title {
  margin-bottom: var(--space-1);
  color: var(--color-on-dark);
  font-size: var(--font-size-h3);
}

/* --- Team (about) --- */
.team-card {
  margin: 0;
}

.team-card__media {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-xl);
  background: var(--color-tint-primary);
}

.team-card__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.team-card__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 0.25rem;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
}

.team-card:hover .team-card__media::after {
  transform: scaleX(1);
}

.team-card__name {
  margin-bottom: 0.125rem;
  font-size: var(--font-size-h3);
}

.team-card__role {
  display: block;
  color: var(--color-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

/* --- Acknowledgement of Country feature (about) --- */
.country {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--space-6) var(--space-3);
  border-radius: var(--radius-2xl);
  background: var(--color-tint-accent);
}

.country::before {
  content: "";
  position: absolute;
  top: -3rem;
  right: -3rem;
  z-index: -1;
  width: 16rem;
  height: 16rem;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-accent) 0.25rem, transparent 0.2625rem) 0 0 / 1.25rem 1.25rem;
  opacity: 0.45;
}

/* --- Steps (admissions) --- */
.steps {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps__item {
  position: relative;
  padding: var(--space-4) var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  counter-increment: step;
}

.steps__item::before {
  content: counter(step, decimal-leading-zero);
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-2);
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-accent);
  font-weight: var(--font-weight-bold);
}

.steps__title {
  margin-bottom: var(--space-1);
  font-size: var(--font-size-h3);
}

.steps__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* --- Key dates --- */
.date-card {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
}

.date-card__date {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--radius-lg);
  background: var(--color-primary);
  color: var(--color-on-dark);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  text-transform: uppercase;
}

.date-card__day {
  color: var(--color-accent);
  font-size: 1.5rem;
}

.date-card__title {
  margin-bottom: 0.25rem;
  font-size: var(--font-size-base);
}

.date-card__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* --- Feature rows (campus life zig-zag) --- */
.feature-row + .feature-row {
  margin-top: var(--section-space);
}

.parallax {
  overflow: hidden;
  border-radius: var(--radius-organic);
  background: var(--color-tint-primary);
  box-shadow: var(--shadow-lift);
}

.parallax img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* --- Houses --- */
.house-card {
  position: relative;
  overflow: hidden;
  height: 100%;
  padding: var(--space-4) var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
}

.house-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 0.25rem;
  background: var(--color-accent);
}

.house-card__crest {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 4rem;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-md) var(--radius-md) 50% 50%;
  background: var(--color-primary);
  color: var(--color-accent);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.house-card__title {
  margin-bottom: 0.25rem;
  font-size: var(--font-size-h3);
}

.house-card__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* --- Article (news-article page) --- */
.article-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
}

.article-hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.article-hero__meta .icon {
  width: 1rem;
  height: 1rem;
  color: var(--color-accent);
}

.article-cover {
  position: relative;
  overflow: hidden;
  margin-top: calc(-1 * var(--space-8));
  border-radius: var(--radius-2xl);
  background: var(--color-tint-primary);
  box-shadow: var(--shadow-lift);
}

.article-cover img {
  display: block;
  width: 100%;
  height: auto;
}

.prose {
  font-size: 1.0625rem;
}

.prose h2 {
  margin-block: var(--space-5) var(--space-2);
  font-size: clamp(1.5rem, 1.2vw + 1rem, 2rem);
}

.prose figure {
  margin-block: var(--space-4);
}

.prose figure img {
  display: block;
  width: 100%;
  border-radius: var(--radius-xl);
}

.prose figcaption {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.prose blockquote {
  margin-block: var(--space-4);
  padding: var(--space-3);
  border-inline-start: 0.25rem solid var(--color-accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: var(--color-tint-accent);
  color: var(--color-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.prose blockquote p {
  margin-bottom: var(--space-1);
}

.prose blockquote footer {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
}

.sidebar {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-3));
}

.sidebar-card {
  padding: var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
}

.sidebar-card + .sidebar-card {
  margin-top: var(--space-3);
}

.sidebar-card__title {
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 0.125rem solid var(--color-accent);
  font-size: var(--font-size-base);
}

.mini-post {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--touch-target);
  padding-block: 0.5rem;
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  text-decoration: none;
}

.mini-post:hover {
  text-decoration: underline;
}

.mini-post img {
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-md);
  object-fit: cover;
}

.share-link {
  display: inline-grid;
  place-items: center;
  width: var(--touch-target);
  height: var(--touch-target);
  border: var(--border-width) solid var(--color-border);
  border-radius: 50%;
  color: var(--color-primary);
}

.share-link:hover {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-accent);
}

/* --- Contact --- */
.contact-card {
  padding: var(--space-4) var(--space-3);
}

.contact-card__value {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  overflow-wrap: anywhere;
}

.dept-panel {
  height: 100%;
  padding: var(--space-4) var(--space-3);
  border-radius: var(--radius-xl);
  background: var(--pattern-contour), var(--glow-dark), var(--color-primary);
  color: var(--color-on-dark-muted);
}

.dept-panel__title {
  margin-bottom: var(--space-2);
  color: var(--color-on-dark);
  font-size: var(--font-size-h3);
}

.dept {
  display: flex;
  flex-direction: column;
  padding-block: var(--space-2);
  border-bottom: var(--border-width) solid var(--line-on-dark);
}

.dept:last-child {
  border-bottom: 0;
}

.dept__name {
  color: var(--color-on-dark);
  font-weight: var(--font-weight-bold);
}

.dept a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  color: var(--color-on-dark-muted);
  overflow-wrap: anywhere;
}

.dept a:hover {
  color: var(--color-on-dark);
}

/* --- 404 --- */
.error-page {
  display: grid;
  place-items: center;
  min-height: 85vh;
  padding-block: calc(var(--nav-height) + var(--space-8)) var(--space-10);
  text-align: center;
}

.error-page__code {
  display: block;
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: -0.06em;
}

/* --- Hero extras: drawn underline + next-event card --- */
.hero__swash {
  position: relative;
  display: inline-block;
}

.hero__swash::after {
  content: "";
  position: absolute;
  inset: auto 0 -0.06em;
  height: 0.09em;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  transform-origin: left center;
}

.event-card {
  width: 100%;
  max-width: 22rem;
  padding: var(--space-3);
  border-top: 0.25rem solid var(--color-accent);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-lift);
}

.event-card :focus-visible {
  outline-color: var(--color-primary);
}

.event-card__label {
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.event-card__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.event-card__date {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--radius-lg);
  background: var(--color-primary);
  color: var(--color-on-dark);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  text-transform: uppercase;
}

.event-card__day {
  color: var(--color-accent);
  font-size: 1.625rem;
}

.event-card__title {
  margin-bottom: 0.125rem;
  font-size: var(--font-size-lg);
}

.event-card__meta {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* --- Quick link arrow --- */
.quick-link__arrow {
  display: none;
  margin-inline-start: auto;
  color: var(--color-primary);
  opacity: 0.35;
}

.quick-link:hover .quick-link__arrow {
  opacity: 1;
}

/* --- Big values strip (alternating solid / outlined words) --- */
.word-marquee {
  overflow: hidden;
  padding-bottom: var(--section-space);
}

.word-marquee__track {
  display: flex;
  width: max-content;
}

.word-marquee__group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-4);
  padding-inline-end: var(--space-4);
}

.word-marquee__word {
  color: var(--color-primary);
  font-size: clamp(2.75rem, 7vw, 6.5rem);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

@supports (-webkit-text-stroke: 0.0625rem) {
  .word-marquee__word--outline {
    color: transparent;
    -webkit-text-stroke: 0.09375rem var(--color-primary);
  }
}

.word-marquee__star {
  width: clamp(1.5rem, 3vw, 2.75rem);
  height: clamp(1.5rem, 3vw, 2.75rem);
  color: var(--color-accent);
}

/* --- Footer wordmark --- */
.site-footer__wordmark {
  margin: var(--space-6) 0 0;
  color: rgba(var(--color-surface-rgb), 0.06);
  font-size: clamp(3.25rem, 12.5vw, 11rem);
  font-weight: var(--font-weight-bold);
  line-height: 0.9;
  letter-spacing: -0.05em;
  white-space: nowrap;
  user-select: none;
}

/* --- Centred statement (home) --- */
.statement__text {
  max-width: 58rem;
  margin: 0 auto;
  color: var(--color-text-muted);
  font-size: clamp(1.5rem, 1.6vw + 1rem, 2.5rem);
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
  letter-spacing: -0.02em;
  text-align: center;
}

.statement__text strong {
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

.statement .container::before {
  content: "";
  display: block;
  width: var(--space-6);
  height: 0.25rem;
  margin: 0 auto var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}

/* --- "Why families choose us" scroll-snap row --- */
.reasons__hint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.reasons__hint .icon {
  color: var(--color-secondary);
}

.reasons {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  padding-bottom: var(--space-3);
  scrollbar-color: var(--color-accent) var(--color-border);
  scrollbar-width: thin;
}

.reasons:focus-visible {
  outline-offset: 0.5rem;
  border-radius: var(--radius-xl);
}

.reasons__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78%, 20rem);
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.reason {
  scroll-snap-align: start;
}

.reason__card {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  height: 100%;
  min-height: 26rem;
  overflow: hidden;
  border-radius: var(--radius-organic);
  background: var(--color-primary);
}

.reason__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--overlay-card);
}

.reason__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reason__body {
  padding: var(--space-4) var(--space-3);
  color: var(--color-on-dark-muted);
}

.reason__num {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--color-accent);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.reason__title {
  margin-bottom: var(--space-1);
  color: var(--color-on-dark);
  font-size: var(--font-size-h3);
}

.reason__text {
  margin: 0;
  font-size: var(--font-size-sm);
}

/* ==========================================================================
   Home 2 — split hero, tabs, quote band, tiles, news layout, events
   ========================================================================== */
.hero-split {
  display: grid;
  overflow: clip;
  border-radius: 0 0 var(--radius-hero) var(--radius-hero);
  background: var(--color-primary);
  color: var(--color-on-dark);
}

.hero-split__panel {
  display: flex;
  align-items: center;
  padding-block: calc(var(--nav-height) + var(--space-6)) var(--space-8);
  padding-inline: max(0.75rem, calc((100vw - var(--container-width, 100vw)) / 2 + 0.75rem));
  background: var(--pattern-contour), var(--glow-dark), var(--color-primary);
}

.hero-split__content {
  max-width: 40rem;
}

.hero-split__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin: var(--space-6) 0 0;
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--line-on-dark);
}

.hero-split__stats div {
  display: flex;
  flex-direction: column-reverse;
}

.hero-split__stats dt {
  color: var(--color-on-dark-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-split__stats dd {
  margin: 0;
  color: var(--color-accent);
  font-size: var(--font-size-stat);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.hero-split__media {
  position: relative;
  min-height: 22rem;
}

.hero-split__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-split__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(var(--color-primary-dark-rgb), 0.55) 0%, transparent 30%);
  pointer-events: none;
}

.hero-split__seal {
  position: absolute;
  top: calc(-1 * var(--space-6));
  right: var(--space-3);
  z-index: 2;
  display: grid;
  place-content: center;
  width: 7rem;
  height: 7rem;
  margin: 0;
  border: 0.375rem solid var(--color-primary);
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.12em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.hero-split__seal strong {
  display: block;
  font-size: 2.25rem;
  letter-spacing: -0.03em;
}

/* Tabs (radio + :has); without :has support every panel simply shows */
.tabs__panels {
  display: grid;
  gap: var(--space-4);
}

.tabs__panel {
  overflow: hidden;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-2xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-lift);
}

.tabs__media {
  height: 100%;
  min-height: 16rem;
  background: var(--color-tint-primary);
}

.tabs__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tabs__body {
  padding: var(--space-4) var(--space-3);
}

.tabs:has(#tab-elc:checked) .tabs__panel:not([data-panel="elc"]),
.tabs:has(#tab-junior:checked) .tabs__panel:not([data-panel="junior"]),
.tabs:has(#tab-middle:checked) .tabs__panel:not([data-panel="middle"]),
.tabs:has(#tab-senior:checked) .tabs__panel:not([data-panel="senior"]) {
  display: none;
}

/* Quote band */
.quote-portrait {
  width: min(18rem, 70%);
  margin-inline: auto;
  overflow: hidden;
  aspect-ratio: 1;
  border: 0.375rem solid var(--color-accent);
  border-radius: 50%;
}

.quote-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quote-band__text {
  margin: 0 0 var(--space-3);
  color: var(--color-on-dark);
  font-size: clamp(1.5rem, 1.5vw + 1rem, 2.25rem);
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.quote-band__text p {
  max-width: none;
}

.quote-band__cite {
  color: var(--color-on-dark-muted);
}

.quote-band__cite strong {
  color: var(--color-on-dark);
}

/* Co-curricular tiles: navy fills up from the bottom on hover */
.tile {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  height: 100%;
  overflow: hidden;
  padding: var(--space-4) var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  color: var(--color-primary);
  text-decoration: none;
}

.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pattern-contour), var(--color-primary);
  transform: scaleY(0);
  transform-origin: bottom center;
}

.tile:hover::before,
.tile:focus-visible::before {
  transform: scaleY(1);
}

.tile__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-1);
  border-radius: 50%;
  background: var(--color-tint-primary);
  color: var(--color-primary);
}

.tile__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.tile__text {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.tile:hover .tile__title,
.tile:focus-visible .tile__title { color: var(--color-on-dark); }
.tile:hover .tile__text,
.tile:focus-visible .tile__text { color: var(--color-on-dark-muted); }
.tile:hover .tile__icon,
.tile:focus-visible .tile__icon { background: var(--color-accent); }

/* News: featured photo card + compact rows */
.news-feature {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  height: 100%;
  min-height: 26rem;
  overflow: hidden;
  border-radius: var(--radius-organic);
  background: var(--color-primary);
  color: var(--color-on-dark-muted);
}

.news-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--overlay-card);
}

.news-feature__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-feature__body {
  padding: var(--space-5) var(--space-4);
}

.news-feature__title {
  margin-bottom: var(--space-1);
  font-size: clamp(1.5rem, 1.4vw + 1rem, 2.25rem);
  line-height: var(--line-height-tight);
}

.news-feature__title a {
  color: var(--color-on-dark);
  text-decoration: none;
}

.news-feature__title a:hover,
.news-feature__title a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
}

.news-row {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-background);
}

.news-row__img {
  flex-shrink: 0;
  width: 6.5rem;
  height: 6.5rem;
  border-radius: var(--radius-lg);
  object-fit: cover;
}

.news-row__title {
  margin: 0;
  font-size: var(--font-size-base);
  line-height: var(--line-height-snug);
}

.section-title--sm {
  font-size: var(--font-size-h3);
}

.event-tile {
  height: 100%;
  padding: var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-background);
}

.event-tile__date {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  margin-bottom: var(--space-2);
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-on-dark);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

.event-tile__date span {
  color: var(--color-accent);
  font-size: var(--font-size-lg);
}

.event-tile__title {
  margin-bottom: 0.25rem;
  font-size: var(--font-size-base);
}

.event-tile__meta {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* ==========================================================================
   Home 3 — centred hero, pills, scroll cue, pillars, day timeline, spotlight
   ========================================================================== */
.hero--center {
  justify-content: center;
}

.hero--center::before {
  background: var(--pattern-contour), var(--overlay-center);
}

.hero--center .hero__content {
  max-width: 56rem;
}

.hero__title--xl {
  font-size: clamp(3rem, 7vw + 1rem, 7rem);
  letter-spacing: -0.05em;
}

.hero-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-2);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.hero-pills li {
  padding: 0.5rem 1.25rem;
  border: var(--border-width) solid var(--line-on-dark);
  border-radius: var(--radius-pill);
  background: rgba(var(--color-surface-rgb), 0.08);
  font-size: var(--font-size-sm);
  backdrop-filter: blur(0.5rem);
}

.hero-pills strong {
  margin-inline-end: 0.25rem;
  color: var(--color-accent);
}

.scroll-cue {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  display: none;
  place-items: center;
  width: var(--touch-target);
  height: 3.25rem;
  margin-inline-start: calc(-0.5 * var(--touch-target));
}

.scroll-cue::before {
  content: "";
  position: absolute;
  width: 1.5rem;
  height: 2.5rem;
  border: 0.125rem solid rgba(var(--color-surface-rgb), 0.7);
  border-radius: var(--radius-pill);
}

.scroll-cue__wheel {
  width: 0.25rem;
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}

/* Pillar cards: text reveals on hover (always visible on touch / reduced motion) */
.pillar {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  height: 100%;
  min-height: 28rem;
  overflow: hidden;
  border-radius: var(--radius-organic);
  background: var(--color-primary);
  color: var(--color-on-dark);
  text-decoration: none;
}

.pillar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--overlay-card);
}

.pillar__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pillar__body {
  display: grid;
  gap: 0.5rem;
  padding: var(--space-4) var(--space-3);
}

.pillar__num {
  color: var(--color-accent);
  font-weight: var(--font-weight-bold);
}

.pillar__title {
  font-size: clamp(1.75rem, 1.8vw + 1rem, 2.5rem);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: -0.03em;
}

.pillar__text {
  color: var(--color-on-dark-muted);
}

.pillar__more {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--color-accent);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.pillar__more .icon {
  width: 1rem;
  height: 1rem;
}

/* A day at Lumina Ridge */
.day {
  display: grid;
  gap: var(--space-4) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.day__item {
  position: relative;
  padding-top: var(--space-3);
  border-top: 0.125rem solid var(--line-on-dark);
}

.day__item::before {
  content: "";
  position: absolute;
  top: -0.5625rem;
  left: 0;
  width: 1rem;
  height: 1rem;
  border: 0.25rem solid var(--color-primary);
  border-radius: 50%;
  background: var(--color-accent);
}

.day__time {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--color-accent);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.day__title {
  margin-bottom: 0.25rem;
  color: var(--color-on-dark);
  font-size: var(--font-size-lg);
}

.day__text {
  margin: 0;
  font-size: var(--font-size-sm);
}

/* Spotlight quote */
.spotlight {
  display: grid;
  overflow: hidden;
  margin: 0;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-2xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}

.spotlight__media {
  min-height: 20rem;
  background: var(--color-tint-primary);
}

.spotlight__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spotlight__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-5) var(--space-3);
}

.spotlight__quote {
  margin: 0 0 var(--space-3);
  color: var(--color-primary);
  font-size: clamp(1.375rem, 1.2vw + 1rem, 2rem);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  letter-spacing: -0.015em;
}

.spotlight__quote p {
  max-width: none;
}

.spotlight__cite {
  color: var(--color-text-muted);
}

.spotlight__cite strong {
  display: block;
  color: var(--color-primary);
}

/* --- Article body sits closer to its cover photo --- */
.article-body {
  padding-top: var(--space-8);
}

/* ==========================================================================
   6. ANIMATIONS (transform + opacity only, all behind reduced-motion check)
   ========================================================================== */
@keyframes reveal-up {
  from { opacity: 0; transform: translate3d(0, 2rem, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes reveal-scale {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes zoom-out {
  from { transform: scale(1.15); }
  to { transform: scale(1); }
}

@keyframes grow-x {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes grow-y {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes draw-x {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes marquee {
  to { transform: translate3d(-50%, 0, 0); }
}

@keyframes hero-drift {
  to { transform: translate3d(0, 18%, 0); }
}

@keyframes loader-spin {
  to { transform: rotate(1turn); }
}

@keyframes loader-in {
  from { opacity: 0; transform: scale(0.9); }
}

@keyframes loader-pulse {
  50% { transform: scale(1.08); }
}

@keyframes loader-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Fade the overlay away, then take it out of the way of clicks and screen readers */
@keyframes loader-out {
  to { opacity: 0; visibility: hidden; }
}

@keyframes header-solid {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes cue {
  0% { opacity: 0; transform: translateY(-0.375rem); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translateY(0.625rem); }
}

@keyframes vt-out {
  to { opacity: 0; }
}

@keyframes vt-in {
  from { opacity: 0; transform: translate3d(0, 1rem, 0); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Cross-page transitions (supporting browsers; others navigate normally) */
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root) { animation: vt-out 0.2s ease both; }
  ::view-transition-new(root) { animation: vt-in 0.4s var(--ease-out-expo) both; }

  /* Page loader: ~1s branded intro, then fades out (never shown with reduced motion) */
  .loader {
    display: grid;
    animation: loader-out 0.45s ease 0.85s forwards;
  }

  .loader__inner { animation: loader-in 0.4s var(--ease-out-expo) both; }
  .loader__ring { animation: loader-spin 0.9s linear infinite; }
  .loader__mark .crest { animation: loader-pulse 1.2s ease-in-out infinite; }
  .loader__bar-fill { animation: loader-fill 0.85s var(--ease-out-expo) both; }

  /* Nav underline */
  .site-nav__link::after { transition: transform var(--transition-base); }

  /* Gold underline draws under the hero highlight (the heading itself is never hidden) */
  .hero__swash::after { animation: draw-x 1.1s var(--ease-out-expo) 1.1s both; }

  /* Values strip scrolls slowly; pauses on hover */
  .word-marquee__track { animation: marquee 50s linear infinite; }
  .word-marquee:hover .word-marquee__track { animation-play-state: paused; }

  /* Quick-link arrow */
  .quick-link__arrow { transition: transform var(--transition-base), opacity var(--transition-base); }
  .quick-link:hover .quick-link__arrow { transform: translateX(0.25rem); }

  /* Buttons */
  .btn {
    transition: transform var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
  }

  .btn:hover { transform: translateY(-0.125rem); }
  .btn:active { transform: translateY(0) scale(0.98); }
  .btn__icon,
  .link-arrow .icon { transition: transform var(--transition-base); }
  .btn:hover .btn__icon,
  .link-arrow:hover .icon { transform: translateX(0.25rem); }

  /* Cards lift; a deeper shadow fades in on the pseudo-element */
  .ui-card,
  .bento-card,
  .house-card,
  .steps__item {
    transition: transform 0.5s var(--ease-out-expo);
  }

  .ui-card::after { transition: opacity var(--transition-base); }

  .ui-card:hover,
  .bento-card:hover,
  .house-card:hover,
  .steps__item:hover {
    transform: translateY(-0.375rem);
  }

  /* Image zoom inside clipped frames */
  .ui-card__media img,
  .bento-card__bg,
  .mosaic__item img,
  .team-card__media img,
  .feature-post__media img {
    transition: transform 0.8s var(--ease-out-expo);
  }

  .reason__img,
  .pillar__img,
  .news-feature__img { transition: transform 0.8s var(--ease-out-expo); }

  .pillar:hover .pillar__img,
  .news-feature:hover .news-feature__img { transform: scale(1.06); }

  .tile::before { transition: transform 0.45s var(--ease-out-expo); }
  .tile__title, .tile__text, .tile__icon { transition: color var(--transition-base), background-color var(--transition-base); }
  .scroll-cue__wheel { animation: cue 1.6s ease-in-out infinite; }
  .site-nav__chev { transition: transform var(--transition-base); }
  .dropdown:hover .site-nav__chev,
  .site-nav__link[aria-expanded="true"] .site-nav__chev { transform: rotate(180deg); }
  .reason__card:hover .reason__img { transform: scale(1.06); }

  .ui-card:hover .ui-card__media img,
  .bento-card:hover .bento-card__bg,
  .mosaic__item:hover img,
  .team-card:hover .team-card__media img,
  .feature-post:hover .feature-post__media img {
    transform: scale(1.05);
  }

  .icon-badge,
  .icon-badge::before,
  .quick-link,
  .quick-link__icon {
    transition: transform var(--transition-base), opacity var(--transition-base), color var(--transition-base), background-color var(--transition-base);
  }

  .quick-link:hover .quick-link__icon { transform: translateY(-0.25rem); }
  .team-card__media::after { transition: transform var(--transition-base); }

  .site-footer__social-link,
  .share-link {
    transition: transform var(--transition-base), background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  }

  .site-footer__social-link:hover,
  .share-link:hover { transform: translateY(-0.25rem); }

  /* Gallery captions slide up on hover (always visible without motion) */
  .mosaic__caption {
    opacity: 0;
    transform: translateY(0.75rem);
    transition: opacity var(--transition-base), transform var(--transition-base);
  }

  .mosaic__item:hover .mosaic__caption,
  .mosaic__item:focus-within .mosaic__caption {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Pillar text reveals on hover/focus (desktop with motion only) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pillar__text,
  .pillar__more {
    opacity: 0;
    transform: translateY(0.75rem);
    transition: opacity var(--transition-base), transform 0.5s var(--ease-out-expo);
  }

  .pillar:hover .pillar__text,
  .pillar:hover .pillar__more,
  .pillar:focus-visible .pillar__text,
  .pillar:focus-visible .pillar__more {
    opacity: 1;
    transform: none;
  }
}

/* Touch devices have no hover: keep gallery captions visible there */
@media (hover: none) {
  .mosaic__caption {
    opacity: 1;
    transform: none;
  }
}

/* Scroll-driven effects. Unsupported browsers show everything statically. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Header turns solid navy over the first few rem of scrolling */
    .site-header::before {
      animation: header-solid linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 10rem;
    }

    /* Reading progress bar */
    .scroll-progress {
      display: block;
      animation: grow-x linear both;
      animation-timeline: scroll(root block);
    }

    /* Staggered fade-up for content below the hero */
    .reveal,
    .reveal-group > * {
      animation: reveal-up linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 22%;
    }

    .reveal-scale {
      animation: reveal-scale linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 25%;
    }

    .reveal-group > :nth-child(3n + 2) { animation-range: entry 6% cover 27%; }
    .reveal-group > :nth-child(3n + 3) { animation-range: entry 12% cover 32%; }

    /* Gentle image zoom-out as framed photos scroll through view */
    .parallax img,
    .split-media__frame img {
      animation: zoom-out linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    /* Banner photos drift slower than the page (parallax) once you scroll */
    .hero__bg img,
    .page-hero__bg img {
      animation: hero-drift linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100vh;
    }

    /* Footer wordmark rises in */
    .site-footer__wordmark {
      animation: reveal-up linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }

    /* Timeline line draws as you scroll */
    .timeline__progress {
      animation: grow-y linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 70%;
    }
  }
}

/* ==========================================================================
   7. MEDIA QUERIES (mobile-first)
   ========================================================================== */
/* px allowed here only to match Bootstrap breakpoints */
@media (min-width: 576px) {
  :root { --container-width: 33.75rem; }
  .masonry { columns: 2; }
  .cta-band__inner { padding: var(--space-8) var(--space-6); }
  .country { padding: var(--space-6) var(--space-5); }
  .mosaic { grid-auto-rows: 12rem; }
  .split-media__badge { inset-inline-start: calc(-1 * var(--space-1)); }
}

@media (min-width: 768px) {
  :root { --container-width: 45rem; }
  .day { grid-template-columns: repeat(3, 1fr); }
  .steps.steps--three { grid-template-columns: repeat(3, 1fr); }
  .tabs__body { padding: var(--space-6) var(--space-5); }
  .spotlight__body { padding: var(--space-6) var(--space-5); }
  .scroll-cue { display: grid; }
  .utility__inner { justify-content: space-between; }
  .utility__list { display: flex; }
  .stats-band__item + .stats-band__item .stat { border-inline-start: var(--border-width) solid var(--line-on-dark); }
  .mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 13rem; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .stack-card__body,
  .feature-post__body { padding: var(--space-6) var(--space-5); }
  .stack-card__media img { aspect-ratio: auto; }
  .form-card,
  .dept-panel { padding: var(--space-5) var(--space-4); }
  .timeline { padding-inline-start: var(--space-8); }
  .timeline__item::before { inset-inline-start: calc(-1 * var(--space-8) + 0.375rem); }
  .quick-link { flex-direction: row; align-items: center; gap: var(--space-2); padding: var(--space-3); }
  .newsletter { padding: var(--space-4); }
}

@media (min-width: 992px) {
  :root { --container-width: 60rem; }
  .hero-split { grid-template-columns: 1fr 1fr; min-height: clamp(38rem, 100svh, 60rem); }
  .hero-split__panel { padding-inline-end: var(--space-6); }
  .hero-split__seal { top: auto; right: auto; bottom: var(--space-8); left: -3.5rem; }
  .day { grid-template-columns: repeat(6, 1fr); }
  .spotlight { grid-template-columns: 2fr 3fr; }
  .split-media::after { top: calc(-1 * var(--space-4)); right: calc(-1 * var(--space-4)); width: 9rem; height: 9rem; }
  .quick-link__arrow { display: block; }
  .hero { padding-block: calc(var(--nav-height) + var(--space-10)) var(--space-12); }
  .page-hero { padding-block: calc(var(--nav-height) + var(--space-8)) var(--space-12); }
  .steps { grid-template-columns: repeat(5, 1fr); }
  .mosaic { grid-auto-rows: 14rem; }
  .stack { gap: var(--space-6); }
  .stack__item { position: sticky; }
  .reasons__list { grid-auto-columns: calc((100% - 3 * var(--space-3)) / 3.4); }
  .masonry { columns: 3; }
}

@media (min-width: 1200px) {
  :root { --container-width: 71.25rem; }
  /* Full menu shows from xl up (hamburger below) */
  .site-nav__link::after { inset-inline: var(--bs-navbar-nav-link-padding-x); }
  .site-header .dropdown:hover > .dropdown-menu,
  .site-header .dropdown:focus-within > .dropdown-menu { display: block; }
  .section__header { margin-bottom: var(--space-8); }
}

@media (min-width: 1400px) {
  :root { --container-width: 82.5rem; }
}

/* Never print the loader */
@media print {
  .loader { display: none; }
}