/* ═══════════════════════════════════════════════════════════════
   MPS SECTIONS — All Homepage Section Styles
   ═══════════════════════════════════════════════════════════════ */

/* ──────────────────── HERO ──────────────────── */
.hero {
  position: relative;
  width: 100%;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--color-navy);
}

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-bg-slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  border-radius: 0;
  border: none;
}

.hero-bg-slot::before { padding-top: 0; }

/* Overlays */
.hero-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.hero-ov-bottom {
  background: linear-gradient(
    to top,
    var(--color-navy) 0%,
    rgba(17,24,39,0.85) 25%,
    rgba(17,24,39,0.3) 55%,
    transparent 80%
  );
}

.hero-ov-left {
  background: linear-gradient(
    to right,
    rgba(15,61,145,0.6) 0%,
    transparent 60%
  );
}

.hero-ov-vignette {
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.6) 100%);
}

/* Particles */
.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.particle {
  position: absolute;
  border-radius: 50%;
  animation: particleFloat linear infinite;
  will-change: transform, opacity;
}

@keyframes particleFloat {
  0%   { transform: translateY(100vh) rotate(0deg);    opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-20vh) rotate(720deg); opacity: 0; }
}

/* Hero content */
.hero-content {
  position: relative;
  z-index: 4;
  padding-bottom: clamp(var(--space-16), 8vw, var(--space-24));
  padding-top: calc(var(--nav-h) + var(--space-12));
  will-change: transform;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
  margin-bottom: var(--space-6);
}

.eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-gold);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(0.85); }
}

.hero-h1 {
  font-family: var(--font-display);
  font-size: clamp(var(--text-4xl), 7vw, var(--text-8xl));
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: var(--tracking-tightest);
  color: var(--color-white);
  margin-bottom: var(--space-6);
  display: flex;
  flex-direction: column;
}

.hero-line { display: block; }

.hero-line--gold { color: var(--color-gold); }

.hero-sub {
  font-size: clamp(var(--text-base), 1.5vw, var(--text-xl));
  line-height: var(--leading-relaxed);
  color: rgba(255,255,255,0.72);
  max-width: 52ch;
  margin-bottom: var(--space-10);
}

.hero-actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: clamp(var(--space-12), 6vw, var(--space-20));
}

.hero-stats {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.h-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.h-stat-val {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1;
}

.h-stat-lbl {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.5);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 500;
}

.h-stat-div {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.15);
}

/* Scroll indicator */
.scroll-indicator {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: rgba(255,255,255,0.45);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  animation: fadeInUp 1s ease 2s both;
}

.scroll-mouse {
  width: 24px;
  height: 38px;
  border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}

.scroll-dot {
  width: 4px;
  height: 8px;
  background: var(--color-gold);
  border-radius: var(--radius-full);
  animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%       { transform: translateY(10px); opacity: 0.4; }
}

/* ──────────────────── WHY SECTION ──────────────────── */
.why-section { background: var(--color-white); }

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.why-card {
  padding: var(--space-8);
  background: var(--color-mist);
  border: 1px solid var(--color-border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition:
    transform var(--dur-slow) var(--ease-spring),
    box-shadow var(--dur-slow) var(--ease-smooth),
    background-color var(--dur-base);
}

.why-card:hover {
  background: var(--color-white);
  box-shadow: var(--shadow-xl);
  border-color: rgba(201,162,39,0.3);
}

.why-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(15,61,145,0.1) 0%, rgba(201,162,39,0.1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-royal);
  margin-bottom: var(--space-5);
  transition: background-color var(--dur-base), color var(--dur-base);
}

.why-card:hover .why-icon {
  background: linear-gradient(135deg, var(--color-royal) 0%, var(--color-royal-light) 100%);
  color: var(--color-white);
}

.why-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: var(--space-3);
}

.why-text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-soft);
}

/* ──────────────────── ACADEMICS ──────────────────── */
.academics-section {}

.programme-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-8);
}

.prog-item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.prog-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-gold);
  margin-top: 6px;
  flex-shrink: 0;
}

.prog-level {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: var(--space-1);
  letter-spacing: -0.01em;
}

.prog-desc {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
  line-height: var(--leading-relaxed);
}

/* ──────────────────── BOARDING ──────────────────── */
.boarding-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-8);
}

.board-item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.board-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  background: rgba(15,61,145,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-royal);
  flex-shrink: 0;
}

.board-item strong {
  display: block;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: var(--space-1);
}

.board-item p {
  font-size: var(--text-sm);
  color: var(--color-text-soft);
  line-height: var(--leading-relaxed);
}

/* ──────────────────── FACILITIES ──────────────────── */
.facilities-section {}

.fac-scroller {
  overflow: hidden;
  position: relative;
  margin-bottom: var(--space-6);
}

.fac-track {
  display: flex;
  gap: var(--space-5);
  transition: transform var(--dur-slower) var(--ease-smooth);
  will-change: transform;
}

.fac-card {
  flex: 0 0 calc(33.333% - var(--space-4));
  min-width: 280px;
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  overflow: hidden;
}

.fac-body {
  padding: var(--space-5) var(--space-6);
}

.fac-name {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: var(--space-2);
}

.fac-desc {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
  line-height: var(--leading-relaxed);
}

.fac-nav {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
}

.fac-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color var(--dur-fast),
    color var(--dur-fast),
    transform var(--dur-fast) var(--ease-spring);
}

.fac-nav-btn:hover {
  background: var(--color-gold);
  color: var(--color-navy);
  border-color: var(--color-gold);
  transform: scale(1.05);
}

/* ──────────────────── STUDENT LIFE ──────────────────── */
.student-life-section {}

.sl-mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  gap: var(--space-4);
  grid-template-areas:
    "lg lg sm1 tall"
    "lg lg sm2 tall";
}

.sl-tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  cursor: pointer;
}

.sl-tile-lg { grid-area: lg; }
.sl-tile:nth-child(2) { grid-area: sm1; }
.sl-tile:nth-child(3) { grid-area: sm2; }
.sl-tile-tall { grid-area: tall; }
.sl-tile:nth-child(5) { /* clubs — fills below sm2 */ }

.sl-slot {
  border-radius: var(--radius-2xl);
  transition: transform var(--dur-slow) var(--ease-smooth);
}

.sl-tile:hover .sl-slot { transform: scale(1.04); }

.sl-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-5) var(--space-5);
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
  border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
}

.sl-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 2px;
}

.sl-sub {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.6);
  letter-spacing: var(--tracking-wide);
}

/* ──────────────────── ACHIEVEMENTS ──────────────────── */
/* auto-fit rather than a fixed four columns: the statistics come from the CMS,
   so there may be one, three or six of them, and a hard 4-column grid left a
   single surviving tile stranded in the left quarter of the row. The max track
   keeps four across at desktop exactly as before, and any smaller number
   centres instead of stretching. */
.ach-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 260px));
  justify-content: center;
  gap: var(--space-8);
  text-align: center;
}

.ach-stat {
  padding: var(--space-8);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-2xl);
  background: rgba(255,255,255,0.04);
  transition:
    background-color var(--dur-base),
    border-color var(--dur-base),
    transform var(--dur-slow) var(--ease-spring);
}

.ach-stat:hover {
  background: rgba(201,162,39,0.08);
  border-color: rgba(201,162,39,0.3);
  transform: translateY(-4px);
}

.ach-num {
  font-family: var(--font-display);
  font-size: clamp(var(--text-4xl), 5vw, var(--text-6xl));
  font-weight: 700;
  color: var(--color-white);
  line-height: 1;
  margin-bottom: var(--space-3);
}

.ach-unit {
  font-size: 0.55em;
  color: var(--color-gold);
}

.ach-lbl {
  font-size: var(--text-sm);
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  margin-bottom: var(--space-2);
}

.ach-note {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.3);
  display: block;
}

/* ──────────────────── NEWS ──────────────────── */
.news-section {}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.news-card {
  background: var(--color-white);
  border-color: var(--color-border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: hidden;
}

/* A story the school has flagged Featured in the admin. The flag is what makes
   the toggle visible to a reader — without it "Featured" changed nothing on
   the page and the control looked broken. */
.news-card--featured { border-color: rgba(201,162,39,0.55); }

.news-flag {
  padding: 3px 10px;
  background: rgba(201,162,39,0.14);
  color: var(--color-gold-dark, #9a7b1d);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* The featured layout's main story carries a larger headline, matching the
   size the page was designed with. */
.featured-main .news-card--featured .news-title { font-size: 1.6rem; }
.featured-main .news-card--featured .news-body  { padding: var(--space-8); }
.featured-side .news-card--featured .news-title { font-size: 1.1rem; }

.news-body {
  padding: var(--space-6);
}

.news-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.news-cat {
  padding: 3px 10px;
  background: rgba(15,61,145,0.08);
  color: var(--color-royal);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.news-dt {
  font-size: var(--text-xs);
  color: var(--color-text-ghost);
}

.news-title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-navy);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-3);
  letter-spacing: -0.01em;
}

.news-excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-soft);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-royal);
  text-decoration: none;
  transition: gap var(--dur-fast), color var(--dur-fast);
}

.news-more:hover {
  color: var(--color-gold);
  gap: var(--space-2);
}

/* ──────────────────── EVENTS ──────────────────── */
.events-section { background: var(--color-mist); }

.events-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.event-item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--space-8);
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--color-border);
  align-items: flex-start;
  transition: background-color var(--dur-fast);
}

.event-item:last-child { border-bottom: none; }

.event-item:hover { background: rgba(15,61,145,0.02); }

.ev-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--color-royal) 0%, var(--color-royal-light) 100%);
  color: var(--color-white);
  flex-shrink: 0;
  box-shadow: var(--shadow-blue);
}

.ev-d {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1;
}

.ev-m {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  opacity: 0.8;
}

.ev-title {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: var(--space-2);
  letter-spacing: -0.01em;
}

.ev-desc {
  font-size: var(--text-sm);
  color: var(--color-text-soft);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-3);
  max-width: 65ch;
}

.ev-meta {
  display: flex;
  gap: var(--space-5);
  font-size: var(--text-xs);
  color: var(--color-text-ghost);
  margin-bottom: var(--space-4);
}

.ev-meta span {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.ev-meta svg { opacity: 0.6; }

.ev-btn {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-5);
  border: 1.5px solid var(--color-royal);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-royal);
  text-decoration: none;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition:
    background-color var(--dur-fast),
    color var(--dur-fast);
}

.ev-btn:hover {
  background: var(--color-royal);
  color: var(--color-white);
}

/* ──────────────────── GALLERY PREVIEW ──────────────────── */
/* Five tiles, three shapes. The old two-row template named five areas but only
   had room for four, so the fifth tile fell out of the mosaic entirely (see
   .gal-wide below). A third row gives every tile a real cell AND gives the
   wide tile back its width: with all five squeezed into two rows every cell
   came out portrait, which is the wrong frame for a landscape photograph like
   the campus aerial. */
.gallery-masonry {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  grid-template-areas:
    "t t sm1 sm2"
    "t t sm3 sm3"
    "ww ww ww ww";
}

.gal-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  cursor: pointer;
  /* The tile fills whatever cell the grid gives it. Its .gal-slot used to size
     itself purely from its own aspect ratio, so in a row made taller by the
     big portrait tile beside it each small tile left a band of dead space
     underneath — 291x218 of photograph sitting in a 291x382 cell. Invisible
     while the tiles were empty; a hole in the mosaic once they hold pictures.
     The aspect spacer still sets the MINIMUM height, so a tile in a row of its
     own keeps its designed proportion. */
  display: flex;
}

.gal-tall { grid-area: t; }
/* All five tiles are placed by name. They used to rely on auto-placement
   dropping into the named cells in order, and that quietly failed everywhere:
   `.gal-wide` also carried `grid-column: span 2`, which took the cell the
   template had reserved for the third small tile, so that tile was pushed into
   an implicit row — at 1280px it landed underneath the big portrait, alone and
   out of order, and at 375px into a 0px-wide implicit column where it had no
   size at all. The span is gone; every tile now sits in the cell the template
   names for it, and the templates below name one for each. */
.gal-sm1 { grid-area: sm1; }
.gal-sm2 { grid-area: sm2; }
.gal-sm3 { grid-area: sm3; }
.gal-wide { grid-area: ww; }
/* Full width across all four columns, so it takes the 8:3 band the markup has
   always described it as ("1200 x 450 - 8:3"). At the 16:9 it inherits it
   would be 676px of one photograph closing the section. */
.gal-item.gal-wide .gal-slot::before { padding-top: 37.5%; }

.gal-slot {
  border-radius: var(--radius-xl);
  transition: transform var(--dur-slow) var(--ease-smooth);
  flex: 1 1 auto;   /* fill the tile — see .gal-item */
}

.gal-item:hover .gal-slot { transform: scale(1.05); }

.gal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15,61,145,0);
  display: flex;
  align-items: flex-end;
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  transition: background-color var(--dur-base);
}

.gal-item:hover .gal-overlay {
  background: rgba(15,61,145,0.4);
}

.gal-overlay span {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-white);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--dur-base),
    transform var(--dur-base) var(--ease-smooth);
}

.gal-item:hover .gal-overlay span {
  opacity: 1;
  transform: translateY(0);
}

/* ──────────────────── TESTIMONIALS ──────────────────── */
.testimonials-section {}

.tst-carousel {
  position: relative;
  overflow: hidden;
}

.tst-track {
  display: flex;
  gap: var(--space-6);
  transition: transform var(--dur-slower) var(--ease-smooth);
  will-change: transform;
}

.tst-card {
  flex: 0 0 calc(50% - var(--space-3));
  padding: var(--space-8) var(--space-10);
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  position: relative;
}

.tst-quote {
  font-family: var(--font-display);
  font-size: 6rem;
  line-height: 0.8;
  color: var(--color-gold);
  opacity: 0.3;
  position: absolute;
  top: var(--space-6);
  left: var(--space-8);
  user-select: none;
}

.tst-text {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-style: italic;
  line-height: var(--leading-relaxed);
  color: rgba(255,255,255,0.85);
  margin-bottom: var(--space-6);
  position: relative;
  z-index: 1;
}

.tst-footer {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.tst-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tst-name {
  font-style: normal;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-white);
}

.tst-role {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.45);
}

.tst-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.tst-nav {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color var(--dur-fast),
    transform var(--dur-fast) var(--ease-spring);
}

.tst-nav:hover {
  background: var(--color-gold);
  color: var(--color-navy);
  border-color: var(--color-gold);
  transform: scale(1.05);
}

.tst-dots {
  display: flex;
  gap: var(--space-2);
}

.tst-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  border: none;
  cursor: pointer;
  transition: background-color var(--dur-fast), transform var(--dur-fast);
}

.tst-dot.is-active {
  background: var(--color-gold);
  transform: scale(1.3);
}

/* ──────────────────── PRINCIPAL ──────────────────── */
.principal-section {}

.principal-badge {
  bottom: -1.5rem;
  right: -1.5rem;
  background: rgba(15,61,145,0.85);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}

.pri-quote-mark {
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 0.8;
  color: var(--color-gold);
  opacity: 0.3;
  margin-bottom: var(--space-4);
  user-select: none;
}

.pri-text {
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  color: var(--color-text-mid);
  margin-bottom: var(--space-5);
}

.pri-sig {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-4);
}

.pri-sig-name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-navy);
  font-style: italic;
}

.pri-sig-role {
  font-size: var(--text-sm);
  color: var(--color-text-soft);
}

/* ──────────────────── TOUR CTA ──────────────────── */
.tour-cta-section {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.tour-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.tour-slot {
  position: absolute;
  inset: 0;
  border-radius: 0;
}

.tour-slot::before { padding-top: 0; }

.tour-overlay-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(15,61,145,0.85) 0%,
    rgba(17,24,39,0.8) 60%,
    rgba(17,24,39,0.6) 100%
  );
  z-index: 1;
}

.tour-content {
  position: relative;
  z-index: 2;
  padding: clamp(var(--space-16), 8vw, var(--space-32)) var(--space-8);
}

.tour-text { max-width: 600px; }

/* ──────────────────── ADMISSIONS CTA ──────────────────── */
.adm-cta-section {}

.adm-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-12);
  padding: clamp(var(--space-10), 5vw, var(--space-16)) clamp(var(--space-8), 5vw, var(--space-16));
  align-items: center;
}

.adm-btns {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-8);
}

.adm-deco {
  position: relative;
  width: 200px;
  height: 200px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.adm-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(201,162,39,0.15);
  animation: ringPulse 4s ease-in-out infinite;
}

.adm-ring-1 { width: 200px; height: 200px; animation-delay: 0s; }
.adm-ring-2 { width: 160px; height: 160px; animation-delay: 0.5s; }
.adm-ring-3 { width: 120px; height: 120px; animation-delay: 1s; }

@keyframes ringPulse {
  0%, 100% { opacity: 0.15; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(1.04); }
}

.adm-badge {
  position: relative;
  z-index: 1;
  animation: badgeFloat 6s ease-in-out infinite;
}

@keyframes badgeFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* ──────────────────── HISTORICAL MILESTONES TIMELINE ──────────────────── */
.milestones-section {
  position: relative;
}

.milestones-timeline {
  position: relative;
  max-width: 960px;
  margin: var(--space-8) auto 0;
  padding: var(--space-4) 0;
}

.milestones-timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: linear-gradient(180deg, rgba(201,162,39,0.1) 0%, var(--color-gold) 15%, var(--color-gold) 85%, rgba(201,162,39,0.1) 100%);
  transform: translateX(-50%);
}

.ms-item {
  position: relative;
  display: flex;
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
  width: 100%;
}

.ms-item:last-child {
  margin-bottom: 0;
}

.ms-item--left {
  justify-content: flex-start;
  padding-right: calc(50% + 2rem);
}

.ms-item--right {
  justify-content: flex-end;
  padding-left: calc(50% + 2rem);
}

.ms-node {
  position: absolute;
  top: 1.25rem;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--color-navy);
  border: 2px solid var(--color-gold);
  box-shadow: 0 0 0 4px rgba(201,162,39,0.2);
  z-index: 2;
  transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.ms-item:hover .ms-node {
  transform: translate(-50%, -50%) scale(1.3);
  box-shadow: 0 0 0 6px rgba(201,162,39,0.35);
  background: var(--color-gold);
}

.ms-card {
  width: 100%;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg, 12px);
  position: relative;
  transition: transform var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.ms-card:hover {
  transform: translateY(-3px);
  border-color: rgba(201,162,39,0.4);
}

.ms-year {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-gold);
  letter-spacing: 0.02em;
  margin-bottom: 0.35rem;
}

.ms-badge-feat {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 9999px;
  background: rgba(201,162,39,0.18);
  color: var(--color-gold);
  margin-left: 0.5rem;
  vertical-align: middle;
}

.ms-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--color-white);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.ms-desc {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.65;
  margin: 0;
}

.ms-media {
  margin-top: 1rem;
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  max-height: 200px;
}

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

@media (max-width: 768px) {
  .milestones-timeline::before {
    left: 1.25rem;
    transform: none;
  }
  .ms-item--left,
  .ms-item--right {
    padding-left: 3.25rem;
    padding-right: 0;
    justify-content: flex-start;
  }
  .ms-node {
    left: 1.25rem;
    transform: translate(-50%, -50%);
  }
  .ms-item:hover .ms-node {
    transform: translate(-50%, -50%) scale(1.2);
  }
}

/* ──────────────────── LEGACY NARRATIVE & HERITAGE ──────────────────── */
.legacy-narrative-section {
  position: relative;
}

.narrative-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  margin-top: var(--space-6);
}

.narrative-lead {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.5;
  color: var(--color-navy);
  margin-bottom: 1.25rem;
  font-weight: 500;
}

.narrative-body {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-text-soft);
  margin-bottom: 1.5rem;
}

.narrative-quote-box {
  border-left: 3px solid var(--color-gold);
  padding: 1rem 1.25rem;
  background: rgba(201, 162, 39, 0.05);
  border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
  margin-top: 1.5rem;
}

.narrative-quote-text {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--color-navy);
  margin: 0 0 0.5rem 0;
}

.narrative-quote-author {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-gold);
  margin: 0;
}

.narrative-visual {
  position: relative;
}

.narrative-img-wrap {
  border-radius: var(--radius-xl, 16px);
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(15, 61, 145, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

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

.narrative-caption {
  font-size: 0.82rem;
  color: var(--color-text-soft);
  margin-top: 0.65rem;
  text-align: center;
  font-style: italic;
}

/* ──────────────────── WHY GENERATIONS RETURN (TRUST PILLARS) ──────────────────── */
.generations-section {
  position: relative;
}

.gen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: var(--space-8);
}

.gen-card {
  position: relative;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  background: var(--color-white, #fff);
  border: 1px solid var(--color-border, rgba(0,0,0,0.08));
  border-radius: var(--radius-xl, 16px);
  box-shadow: 0 4px 16px rgba(15, 61, 145, 0.04);
  transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
  overflow: hidden;
}

.gen-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-gold), transparent);
  opacity: 0;
  transition: opacity var(--dur-fast) ease;
}

.gen-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(15, 61, 145, 0.09);
}

.gen-card:hover::before {
  opacity: 1;
}

.gen-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-gold);
  opacity: 0.75;
  margin-bottom: 0.75rem;
  line-height: 1;
}

.gen-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--color-navy);
  margin-bottom: 0.65rem;
  line-height: 1.3;
}

.gen-desc {
  font-size: 0.95rem;
  color: var(--color-text-soft);
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 860px) {
  .narrative-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .narrative-img-wrap img {
    aspect-ratio: 16/10;
  }
}

/* ═══════════════════════════════════════════════════════════════
   LONG-FORM CMS CONTENT
   CMS long-text fields arrive as plain text with newlines. cms.js
   converts them to real <p> elements carrying .rich-text; these rules
   give that generated markup readable rhythm and a comfortable measure.
   ═══════════════════════════════════════════════════════════════ */

.rich-text > p {
  margin: 0 0 1.15em;
  line-height: 1.8;
  color: var(--color-text-soft);
}

.rich-text > p:last-child { margin-bottom: 0; }

/* Long-form prose reads badly at full container width. */
.rich-text.measure,
.longform-body {
  max-width: 68ch;
}

.rich-text.measure-center {
  max-width: 68ch;
  margin-inline: auto;
}

/* Collapsed state for very long stories. Height-clamped rather than
   truncated — the full text stays in the DOM and is revealed on demand. */
.rich-text.is-clamped {
  max-height: var(--longform-max, 420px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}

.rich-text.is-expanded {
  max-height: none;
  -webkit-mask-image: none;
          mask-image: none;
}

.longform-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1rem;
  padding: 0.6rem 1.35rem;
  min-height: 44px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-navy);
  background: transparent;
  border: 1px solid var(--color-gold);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-smooth),
              color var(--dur-fast) var(--ease-smooth);
}

.longform-toggle:hover,
.longform-toggle:focus-visible {
  background: var(--color-gold);
  color: var(--color-navy);
}

.longform-toggle::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur-fast) var(--ease-smooth);
}

.longform-toggle[aria-expanded="true"]::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

/* ── Careers: role meta line + collapsible details ──
   Keeps a long vacancy list scannable. <details> is used so the toggle works
   with keyboard and screen readers, and still works if JS fails. */
.career-meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.85rem;
  margin: 0 0 0.6rem;
  padding: 0;
  font-size: 0.85rem;
  color: var(--color-text-soft);
}
.career-meta li { display: inline-flex; align-items: center; }
.career-meta li + li::before {
  content: "·";
  margin-right: 0.85rem;
  color: var(--color-gold);
}
.career-details { margin-top: 0.25rem; }
.career-details > summary {
  cursor: pointer;
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-royal);
  padding: 0.2rem 0;
  list-style: none;
}
.career-details > summary::-webkit-details-marker { display: none; }
.career-details > summary::after {
  content: " ↓";
  font-size: 0.8em;
}
.career-details[open] > summary::after { content: " ↑"; }
.career-details > summary:focus-visible {
  outline: 2px solid var(--color-royal);
  outline-offset: 3px;
  border-radius: 3px;
}
.career-desc, .career-req {
  color: var(--color-text-soft);
  font-size: 0.9rem;
  margin-top: 0.6rem;
}
.career-req strong {
  display: block;
  color: var(--color-navy);
  margin-bottom: 0.2rem;
}

/* ── Optional supporting block attached to a long-form story ──
   Rendered by applyExtraBlocks() from a CMS object and revealed together with
   "Continue Reading". Hidden entirely when the admin leaves it empty. */
.longform-extra {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--color-gold);
  background: rgba(201, 162, 39, 0.06);
  border-radius: 0 8px 8px 0;
}
.longform-extra[hidden] { display: none; }
.lf-panel[hidden] { display: none; }
.lf-panel.is-collapsed { display: none; }
.longform-extra.is-collapsed { display: none; }
.lf-extra-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--color-navy);
  margin-bottom: 0.6rem;
}
.lf-extra-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin-bottom: 0.75rem;
}
.lf-extra-body > p { margin-bottom: 0.6rem; }
.lf-extra-body > p:last-child { margin-bottom: 0; }

.section-dark .longform-extra,
.legacy-hero .longform-extra {
  background: rgba(255, 255, 255, 0.06);
}
.section-dark .lf-extra-title,
.legacy-hero .lf-extra-title { color: var(--color-gold); }

/* On dark sections the generated paragraphs need light text. */
.section-dark .rich-text > p,
.legacy-hero .rich-text > p {
  color: rgba(255, 255, 255, 0.78);
}

.section-dark .longform-toggle,
.legacy-hero .longform-toggle {
  color: var(--color-gold);
}

.section-dark .longform-toggle:hover,
.section-dark .longform-toggle:focus-visible {
  background: var(--color-gold);
  color: var(--color-navy);
}

.section-dark .rich-text.is-clamped {
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}

/* ═══════════════════════════════════════════════════════════════
   LEADERSHIP HIERARCHY
   Rows communicate rank: row 1 senior leadership, row 2 the next
   level. A row renders however many real people it has — short rows
   stay centred rather than being padded with invented cards.
   ═══════════════════════════════════════════════════════════════ */

/* Doubled class deliberately: the shipped container also carries .grid-3/.grid-4,
   whose display:grid lives in a later stylesheet's media block and would
   otherwise win and lay the two hierarchy rows out side by side. */
.leadership-tiers.leadership-tiers {
  display: flex;
  flex-direction: column;
  gap: var(--space-10, 2.5rem);
  grid-template-columns: none;
}

.leader-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8, 2rem);
  align-items: start;
  justify-content: center;
}

/* A row with fewer than three people centres instead of stretching. */
.leader-row:has(> :nth-child(1):last-child) { grid-template-columns: minmax(0, 22rem); justify-content: center; }
.leader-row:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 22rem)); justify-content: center; }

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE LEGACY GATEWAY
   ═══════════════════════════════════════════════════════════════ */

.hl-grid,
.hm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.hl-media .media-slot { aspect-ratio: 9 / 7; border-radius: var(--radius-lg, 14px); overflow: hidden; }
.hl-body { margin-top: 1.25rem; max-width: 56ch; }
.hl-body > p:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════
   CROWN E-MAGAZINE
   ═══════════════════════════════════════════════════════════════ */

.hm-media { display: flex; justify-content: center; }
.hm-cover {
  aspect-ratio: 3 / 4;
  width: min(320px, 100%);
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.hm-body { margin-top: 1.25rem; max-width: 54ch; }

.hm-edition {
  margin-top: 1.25rem;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.hm-edition:has(.hm-year:empty) { display: none; }

.mag-archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-8, 2rem);
}

.mag-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white, #fff);
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
  border-radius: var(--radius-lg, 14px);
  overflow: hidden;
  height: 100%;
}

.mag-card--featured {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.mag-cover {
  aspect-ratio: 3 / 4;
  background: var(--color-navy, #0C142C);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.mag-cover img { width: 100%; height: 100%; object-fit: cover; }
.mag-card--featured .mag-cover { border-radius: var(--radius-md, 10px); }

.mag-cover-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-gold);
  letter-spacing: 0.04em;
}
.mag-cover-fallback em { font-size: 0.95rem; opacity: 0.75; font-style: normal; }

.mag-meta { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.mag-card--featured .mag-meta { padding: 0; }

.mag-year {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
  font-weight: 600;
}

.mag-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--color-navy);
  line-height: 1.3;
  margin: 0;
}
.mag-card--featured .mag-title { font-size: clamp(1.6rem, 3vw, 2.2rem); }

.mag-summary { font-size: 0.95rem; color: var(--color-text-soft); line-height: 1.7; margin: 0; }

.mag-read { align-self: flex-start; margin-top: 0.5rem; }

.mag-soon {
  align-self: flex-start;
  margin-top: 0.5rem;
  padding: 0.45rem 1rem;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  border: 1px dashed var(--color-border, rgba(0, 0, 0, 0.18));
  border-radius: 999px;
}

.mag-empty { color: var(--color-text-soft); text-align: center; }

/* ═══════════════════════════════════════════════════════════════
   GALLERY LIGHTBOX (bound by cms.js — main.js targets a different class)
   ═══════════════════════════════════════════════════════════════ */

.cms-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(6, 10, 24, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cms-lightbox[hidden] { display: none; }

.cms-lb-figure { margin: 0; max-width: min(1100px, 100%); max-height: 100%; text-align: center; }
.cms-lb-img {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-md, 10px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.cms-lb-cap { margin-top: 1rem; color: rgba(255, 255, 255, 0.82); font-size: 0.95rem; }
.cms-lb-cap[hidden] { display: none; }

.cms-lb-close {
  position: absolute;
  top: clamp(0.75rem, 2vw, 1.5rem);
  right: clamp(0.75rem, 2vw, 1.5rem);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  cursor: pointer;
}
.cms-lb-close:hover,
.cms-lb-close:focus-visible { background: rgba(255, 255, 255, 0.2); }

/* ═══════════════════════════════════════════════════════════════
   LEGACY PAGE
   ═══════════════════════════════════════════════════════════════ */

.legacy-founder-slot { aspect-ratio: 3 / 4; border-radius: var(--radius-lg, 14px); overflow: hidden; }
.legacy-history-slot { aspect-ratio: 3 / 2; border-radius: var(--radius-lg, 14px); overflow: hidden; }

.media-caption {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--color-text-ghost, rgba(0, 0, 0, 0.45));
  font-style: italic;
  text-align: center;
}

.two-col-reverse .col-visual { order: 2; }
.two-col-reverse .col-text { order: 1; }

@media (max-width: 1024px) {
  .leader-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hl-grid,
  .hm-grid { grid-template-columns: 1fr; }
  .hm-media { order: -1; }
  .mag-card--featured { grid-template-columns: 1fr; }
  .mag-card--featured .mag-cover { width: min(280px, 100%); margin-inline: auto; }
  .two-col-reverse .col-visual,
  .two-col-reverse .col-text { order: initial; }
}

@media (max-width: 640px) {
  .leader-row { grid-template-columns: 1fr; }
  .leader-row:has(> :nth-child(2):last-child) { grid-template-columns: 1fr; }
  .mag-archive-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   BREADCRUMB
   ═══════════════════════════════════════════════════════════════ */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.breadcrumb-item {
  font-size: var(--text-sm);
  color: var(--color-text-soft);
  text-decoration: none;
  transition: color var(--dur-fast);
}
.breadcrumb-item:hover { color: var(--color-royal); }
.breadcrumb-item.is-current {
  color: var(--color-navy);
  font-weight: 500;
  pointer-events: none;
}

.breadcrumb-sep {
  font-size: var(--text-sm);
  color: var(--color-text-ghost);
}

/* ═══════════════════════════════════════════════════════════════
   PAGE HERO (inner pages)
   ═══════════════════════════════════════════════════════════════ */

.page-hero {
  position: relative;
  overflow: hidden;
}

.page-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--color-white);
  margin-bottom: 1rem;
}

.page-hero-sub {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: rgba(255,255,255,0.8);
  line-height: var(--leading-relaxed);
}

.page-hero .eyebrow-gold {
  margin-bottom: 1rem;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION-BLUE (deep navy/royal blue sections)
   ═══════════════════════════════════════════════════════════════ */

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

/* ═══════════════════════════════════════════════════════════════
   EYEBROW — GOLD VARIANT
   ═══════════════════════════════════════════════════════════════ */

.eyebrow-gold {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: rgba(201,162,39,0.12);
  border: 1px solid rgba(201,162,39,0.3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  color: var(--color-gold);
  text-transform: uppercase;
  margin-bottom: var(--space-6);
}

/* ═══════════════════════════════════════════════════════════════
   TEXT UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════ */

.text-center { text-align: center; }
.text-left   { text-align: left; }

.measure-center {
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
}

/* Rich text (long-form body content) */
.rich-text p + p { margin-top: 1.2em; }
.rich-text {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--color-text-mid);
}
.rich-text.measure-center { text-align: left; }

/* ═══════════════════════════════════════════════════════════════
   SECTION HEADER (section-hd) — ENHANCED
   ═══════════════════════════════════════════════════════════════ */

.section-hd {
  margin-bottom: var(--space-12);
}

.section-hd.text-center {
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   BADGE SYSTEM
   ═══════════════════════════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.badge-royal {
  background: rgba(15,61,145,0.1);
  color: var(--color-royal);
  border: 1px solid rgba(15,61,145,0.15);
}

.badge-gold {
  background: rgba(201,162,39,0.12);
  color: var(--color-gold-dark);
  border: 1px solid rgba(201,162,39,0.2);
}

.badge-success {
  background: rgba(34,197,94,0.1);
  color: #16a34a;
  border: 1px solid rgba(34,197,94,0.2);
}

/* ═══════════════════════════════════════════════════════════════
   GALLERY FILTER ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════ */

.gallery-hero-deck {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}

.gallery-photo-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  aspect-ratio: 4/3;
  cursor: pointer;
  background: var(--color-mist);
}

.gallery-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-smooth);
}

.gallery-photo-item:hover img { transform: scale(1.06); }

.gallery-photo-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s;
}

.gallery-photo-item:hover::after { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   NARRATIVE GRID (legacy page)
   ═══════════════════════════════════════════════════════════════ */

.narrative-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 3rem;
  align-items: start;
}

.narrative-img-wrap { position: relative; }
.narrative-caption {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--color-text-ghost);
  font-style: italic;
  text-align: center;
}

.narrative-lead {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 1rem;
  font-family: var(--font-display);
}

.narrative-quote {
  border-left: 3px solid var(--color-gold);
  padding: 1rem 1.5rem;
  margin: 1.5rem 0 0;
  background: rgba(201,162,39,0.05);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.narrative-quote-text {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--color-navy);
  margin-bottom: 0.5rem;
}

.narrative-quote-author {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Generations grid */
.gen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

@media (max-width: 768px) {
  .narrative-grid { grid-template-columns: 1fr; }
  .gen-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   CONTINUE READING — LONG-FORM EXPAND & EDITORIAL RHYTHM
   ═══════════════════════════════════════════════════════════════ */

.longform-body.is-clamped,
.rich-text.is-clamped {
  max-height: var(--longform-max, 420px);
  overflow: hidden;
  position: relative;
  transition: max-height 0.5s var(--ease-premium);
}

.longform-body:not(.is-clamped),
.rich-text:not(.is-clamped) {
  transition: max-height 0.6s var(--ease-premium);
}

.longform-body.is-clamped::after,
.rich-text.is-clamped::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 5rem;
  background: linear-gradient(to bottom, transparent, var(--color-white) 90%);
  pointer-events: none;
}

.section-alt .longform-body.is-clamped::after,
.section-alt .rich-text.is-clamped::after {
  background: linear-gradient(to bottom, transparent, var(--color-mist) 90%);
}

.section-dark .longform-body.is-clamped::after,
.section-dark .rich-text.is-clamped::after,
.section-blue .longform-body.is-clamped::after,
.section-blue .rich-text.is-clamped::after {
  background: linear-gradient(to bottom, transparent, var(--color-navy) 90%);
}

.longform-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-royal);
  background: rgba(15,61,145,0.06);
  border: 1px solid rgba(15,61,145,0.18);
  border-radius: var(--radius-full);
  padding: 0.45rem 1.15rem;
  cursor: pointer;
  transition: all 0.25s var(--ease-smooth);
}

.longform-toggle:hover {
  background: var(--color-royal);
  color: var(--color-white);
  border-color: var(--color-royal);
  box-shadow: 0 4px 14px rgba(15,61,145,0.25);
  transform: translateY(-1px);
}

.section-dark .longform-toggle {
  color: var(--color-gold);
  background: rgba(201,162,39,0.08);
  border-color: rgba(201,162,39,0.25);
}

.section-dark .longform-toggle:hover {
  background: var(--color-gold);
  color: var(--color-navy);
  border-color: var(--color-gold);
  box-shadow: 0 4px 14px rgba(201,162,39,0.3);
}


/* ═══════════════════════════════════════════════════════════════
   INSTITUTIONAL SECTION REFINEMENTS
   ═══════════════════════════════════════════════════════════════ */

/* ── Admissions Step Cards ── */
.adm-step-card {
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.4s var(--ease-premium),
    box-shadow 0.4s var(--ease-smooth),
    border-color 0.3s;
}

.adm-step-card:hover {
  transform: translateY(-6px);
  border-color: rgba(201, 162, 39, 0.4);
  box-shadow: var(--shadow-depth-3);
}

.adm-step-num {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--color-gold);
  line-height: 1;
  margin-bottom: var(--space-4);
}

.adm-pulse-node {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.35rem 0.85rem;
  background: rgba(201, 162, 39, 0.12);
  border: 1px solid rgba(201, 162, 39, 0.35);
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-gold-dark);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.adm-pulse-dot {
  width: 8px;
  height: 8px;
  background: var(--color-gold);
  border-radius: 50%;
  animation: pulseRing 2s infinite;
}

/* ── Academics Stream Pillars ── */
.acad-stream-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.acad-stream-card {
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  transition:
    transform 0.4s var(--ease-premium),
    box-shadow 0.4s,
    border-color 0.3s;
}

.acad-stream-card:hover {
  transform: translateY(-6px);
  border-color: rgba(15, 61, 145, 0.3);
  box-shadow: var(--shadow-depth-3);
}

.acad-stream-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background: rgba(15, 61, 145, 0.08);
  color: var(--color-royal);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  transition: transform 0.35s var(--ease-spring);
}

.acad-stream-card:hover .acad-stream-icon {
  transform: scale(1.1) rotate(-3deg);
  background: var(--color-royal);
  color: var(--color-white);
}

/* ── Gallery Filter & Year Chips ── */
.gallery-filters-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-10);
}

.gal-filter-btn {
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-text-mid);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition:
    all 0.3s var(--ease-smooth),
    transform 0.2s var(--ease-spring);
}

.gal-filter-btn:hover {
  border-color: var(--color-royal);
  color: var(--color-royal);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(15, 61, 145, 0.12);
}

.gal-filter-btn.is-active {
  background: var(--color-royal);
  border-color: var(--color-royal);
  color: var(--color-white);
  box-shadow: 0 4px 16px rgba(15, 61, 145, 0.3);
}

/* ── Contact Office Hours Card ── */
.office-hours-card {
  background: linear-gradient(135deg, rgba(15, 25, 50, 0.95), rgba(17, 24, 39, 0.95));
  border: 1px solid rgba(201, 162, 39, 0.3);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  color: var(--color-white);
  box-shadow: var(--shadow-depth-3);
}

.office-hours-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}



/* ============================================================
   CAREERS CTA  (contact.html #careers)
   Target of the "Careers at MPS" footer link on every page.
   ============================================================ */
.careers-cta-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: clamp(2rem, 4vw, 3.25rem);
}
.careers-cta-text { flex: 1 1 420px; min-width: 0; }
.careers-cta-text .h2 { margin-bottom: 0.75rem; }
.careers-cta-text .section-sub { margin: 0; max-width: 62ch; }
.careers-cta-actions { flex: 0 0 auto; }
.careers-cta-note {
  margin: 1rem 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-gold);
  letter-spacing: 0.02em;
}
@media (max-width: 768px) {
  .careers-cta-card { flex-direction: column; align-items: flex-start; gap: var(--space-6); }
  .careers-cta-actions, .careers-cta-actions .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   GALLERY — ALBUM-FIRST (event cards -> photos -> lightbox)
   ============================================================ */
.gal-album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-6);
}
.gal-album-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 1.1rem;
  background: var(--color-white);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: transform .3s var(--ease-premium), box-shadow .3s, border-color .3s;
}
.gal-album-card:hover,
.gal-album-card:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(201, 162, 39, 0.55);
  box-shadow: 0 18px 44px rgba(10, 22, 51, 0.16);
}
.gal-album-cover {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: #0a1633;
  overflow: hidden;
}
/* Blurred copy of the same photo, filling the letterbox behind the real one.
   Scaled up so the blur has no visible edge. Purely decorative. */
.gal-cover-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(18px) saturate(135%) brightness(.72);
  transform: scale(1.25);
  display: block;
}
/* The actual photograph — never cropped, never zoomed. */
.gal-cover-img {
  position: relative;
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.gal-album-count {
  position: absolute;
  right: .6rem; bottom: .6rem;
  background: rgba(10, 22, 51, 0.78);
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .03em;
  padding: .22rem .6rem;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.gal-album-body { display: block; padding: 1rem 1.1rem 1.15rem; }
.gal-album-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.3;
  margin-bottom: .3rem;
}
.gal-album-cat {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-gold);
}

/* Album detail header */
.gal-album-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}
.gal-back {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  padding: .55rem 1.05rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-navy);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .25s, color .25s, background .25s;
}
.gal-back:hover, .gal-back:focus-visible {
  border-color: var(--color-royal);
  color: var(--color-royal);
  background: var(--color-mist);
}
.gal-album-headings { min-width: 0; }
.gal-album-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 600;
  color: var(--color-navy);
  margin: 0;
  line-height: 1.2;
}
.gal-album-meta {
  margin: .2rem 0 0;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-gold);
}

/* Numbered pagination */
.gal-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin-top: var(--space-8);
}
.gal-page-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0 .7rem;
  border: 1px solid var(--color-border);
  border-radius: .7rem;
  background: var(--color-white);
  color: var(--color-navy);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.gal-page-btn:hover:not(:disabled):not(.is-active) {
  border-color: var(--color-royal);
  color: var(--color-royal);
}
.gal-page-btn.is-active {
  background: var(--color-royal);
  border-color: var(--color-royal);
  color: #fff;
  cursor: default;
}
.gal-page-btn:disabled { opacity: .38; cursor: not-allowed; }
.gal-page-gap { padding: 0 .3rem; color: var(--color-text-ghost); }

/* Lightbox prev / next / counter */
.cms-lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 50%;
  background: rgba(10, 22, 51, 0.55);
  color: #fff;
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: background .25s, border-color .25s, transform .25s;
  z-index: 2;
}
.cms-lb-nav:hover {
  background: rgba(10, 22, 51, 0.85);
  border-color: rgba(201,162,39,0.75);
}
.cms-lb-prev { left: clamp(.6rem, 3vw, 2.25rem); }
.cms-lb-next { right: clamp(.6rem, 3vw, 2.25rem); }
.cms-lb-counter {
  position: absolute;
  bottom: clamp(.9rem, 3vh, 2rem);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.88);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .08em;
  background: rgba(10, 22, 51, 0.5);
  padding: .3rem .8rem;
  border-radius: 999px;
  backdrop-filter: blur(8px);
}

@media (max-width: 768px) {
  .gal-album-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-4); }
  .gal-album-name { font-size: 1rem; }
  .gal-album-body { padding: .8rem .85rem 1rem; }
  .cms-lb-nav { width: 44px; height: 44px; font-size: 1.5rem; }
  .gal-album-head { gap: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
  .gal-album-card { transition: none; }
  .gal-album-card:hover { transform: none; }
}

/* [hidden] loses to an explicit display value, so every gallery control that
   is toggled from JS needs this or it stays on screen when hidden is set. */
.gal-album-grid[hidden],
.gal-pager[hidden],
.gal-back[hidden],
.gal-album-card[hidden],
.cms-lb-nav[hidden],
.cms-lb-counter[hidden],
.gal-elsewhere[hidden],
.year-bar[hidden],
.gal-empty[hidden] { display: none !important; }

/* ============================================================
   LONG-FORM SUPPORTING BLOCK — image + fun fact
   Revealed with "Continue Reading" only; never visible while the
   story is collapsed. Shows labelled frames until the CMS has data.
   ============================================================ */
.lf-extra-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: stretch;
}
.lf-extra-media { margin: 0; min-width: 0; }
/* Capped for the same reason as the empty frame above: a real supporting photo
   is a supporting photo, not a second hero. */
.lf-extra-media .lf-extra-img {
  margin-bottom: 0;
  width: 100%;
  /* A definite height, not `auto` and not `100%`. `100%` let the picture absorb
     the whole expanded column; `auto` collapses it to zero until the lazy image
     actually decodes, which reserves no space and shifts the layout when it
     lands. A clamped height is medium, stable and never dominant. */
  height: clamp(150px, 22vh, 240px);
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.lf-extra-fact { min-width: 0; display: flex; flex-direction: column; justify-content: center; }

/* Placeholder frames — same dashed gold language as the site's media slots,
   so an empty area reads as reserved space rather than a broken image. */
.lf-extra-ph .lf-ph-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 150px;
  /* Bounded, not `height: 100%`. Unbounded, the frame inherited whatever height
     the flex row handed it and a "Continue Reading" expansion could stretch one
     empty placeholder down most of the page. Medium and clearly visible is the
     brief: big enough to read the hint inside it, never big enough to compete
     with the photograph next to it. */
  max-height: 260px;
  height: auto;
  padding: 1.25rem;
  border: 1.5px dashed rgba(201, 162, 39, 0.45);
  border-radius: 10px;
  background: rgba(201, 162, 39, 0.045);
  color: var(--color-text-ghost);
  text-align: center;
}
.lf-ph-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.lf-extra-ph svg { opacity: .55; }

/* On dark sections the dashed frame needs to lift off the navy. */
.section-dark .lf-extra-ph .lf-ph-frame,
.legacy-hero .lf-extra-ph .lf-ph-frame {
  border-color: rgba(201, 162, 39, 0.5);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 700px) {
  .lf-extra-grid { grid-template-columns: 1fr; gap: 1rem; }
  .lf-extra-ph .lf-ph-frame { min-height: 120px; }
}

/* Guidance inside an empty long-form placeholder: what belongs here and where
   it is edited. Only ever visible once Continue Reading is expanded. */
.lf-ph-hint {
  font-size: .78rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  max-width: 30ch;
  opacity: .9;
}
.lf-ph-where {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .62;
  margin-top: .15rem;
}

/* ─── CONTINUE READING: use the revealed height WITHOUT touching the photo ────
   Earlier this stretched the media column and let the photograph grow to fill
   it. That was wrong: the picture ballooned to several times its natural size
   with a blurred copy smeared behind it.

   The photograph now keeps its natural size, exactly as it looks collapsed.
   The empty space Continue Reading opens up above and below it is filled by two
   supporting panels instead — one image, one fun fact — which is what the space
   is actually for. */
.two-col-layout.lf-expanded,
.two-col-layout--rev.lf-expanded { align-items: stretch; }

.two-col-layout.lf-expanded .col-visual,
.two-col-layout--rev.lf-expanded .col-visual {
  display: flex;
  flex-direction: column;
  justify-content: center;   /* image sits centred; panels take the slack */
  gap: var(--space-5);
}

/* The photograph does NOT grow. flex:0 0 auto keeps it at its natural height,
   and the blurred backdrop stays off in this context. */
.lf-expanded .col-visual > .media-slot,
.lf-expanded .col-visual > figure,
.lf-expanded .col-visual > img {
  flex: 0 0 auto;
  margin-bottom: 0;
}
.lf-expanded .col-visual > .media-slot > img:not(.mps-fit-bg),
.lf-expanded .col-visual > figure > img,
.lf-expanded .col-visual > img {
  width: 100%;
  height: auto;              /* natural proportions, never stretched */
  object-fit: contain;
}

/* The two supporting panels sit one above the image and one below it.
   They are deliberately NOT allowed to absorb the leftover column height.
   `flex: 1 1 0` used to do exactly that: on the About page's history section
   the photograph is 562x316 while each panel grew to 562x1227 — the supporting
   placeholder rendered almost four times the size of the actual photograph and
   dominated the expanded page. They now take their natural height, bounded, and
   the slack is left as white space between them and the picture. */
.lf-expanded .col-visual > .lf-panel {
  /* `flex: 0 1 auto` is what actually fixes the ballooning — the panel takes
     its natural height instead of absorbing the column's slack.
     Deliberately NO max-height: the Facts panel holds real editorial copy and
     capping it would silently clip whatever the school wrote. The empty
     placeholder frames are bounded individually (see .lf-ph-frame), which is
     the thing that was oversized; real content is left free to be as long as
     it is. */
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
}
.lf-expanded .col-visual > .lf-panel > * { width: 100%; }

/* Comfortable, explicit separation between the real photograph and the
   supporting panels either side of it. (--space-8 = 2rem. There is no
   --space-7 in the token set; using one silently invalidates the declaration
   and drops the gap to `normal`.) */
.two-col-layout.lf-expanded .col-visual,
.two-col-layout--rev.lf-expanded .col-visual { gap: var(--space-8); }

@media (max-width: 768px) {
  /* Single column on mobile: nothing is stranded, so the panels only need to be
     readable, not space-filling. */
  .lf-expanded .col-visual > .lf-panel { flex: 0 0 auto; min-height: 0; max-height: none; }
}

/* ─── PAGE BANNER ALIGNMENT (sitewide, one rule) ─────────────────────────────
   No .page-hero rule set text-align at all, so every banner simply inherited
   whatever it happened to sit in and each page patched itself with inline
   styles. That is why alignment differed page to page. This is the single
   authoritative rule: eyebrow, heading and intro paragraph all centred, with
   the paragraph held to a readable measure and centred in the grid.

   Selectors are prefixed with .page-hero so they beat the existing
   single-class .page-hero-sub / .page-hero-title rules in components.css,
   which loads after sections.css. Nothing is centred outside the banner. */
.page-hero .page-hero-content,
.page-hero > .container {
  text-align: center;
}
.page-hero .page-hero-title { text-align: center; }
.page-hero .eyebrow,
.page-hero .eyebrow-gold { display: inline-block; }

.page-hero .page-hero-sub {
  text-align: center;
  max-width: 68ch;          /* readable measure, wider than the 55ch default   */
  margin-left: auto;
  margin-right: auto;
}

/* Banner CTA rows centre with everything else rather than hanging left. */
.page-hero .hero-actions,
.page-hero .btn-row { justify-content: center; }

@media (max-width: 768px) {
  .page-hero .page-hero-sub { max-width: 100%; }
}
/* ─── FACILITY CARD: multiple images + per-card Continue Reading ─────────────
   Frames stack in the same box and only opacity moves, so adding images never
   changes the card's height and cannot disturb the carousel. */
.media-slot.fac-multi { position: relative; overflow: hidden; }
.fac-frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s var(--ease-premium);
  pointer-events: none;
}
.fac-frame.is-active { opacity: 1; }

/* Continue Reading on a facility blurb. Quiet by default — it is a utility
   inside a card, not a call to action. */
.fac-more {
  /* Inline-flex with a 24px floor so the control meets the WCAG 2.5.8 minimum
     target size. As a zero-padding inline-block it measured 115x17 on a phone,
     which is a hard-to-hit tap target. The underline still sits tight under the
     text because the border is on a fixed line-height, not on the padding. */
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-top: 0.6rem;
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-gold);
  cursor: pointer;
  border-bottom: 1px solid rgba(201,162,39,0.45);
  transition: color .2s, border-color .2s;
}
.fac-more:hover,
.fac-more:focus-visible { color: var(--color-gold-light); border-color: var(--color-gold-light); }
.fac-more:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }

/* The card grows downward as text expands; the track aligns to the top so the
   other cards are not dragged out of position. */
.fac-track { align-items: flex-start; }

@media (prefers-reduced-motion: reduce) {
  .fac-frame { transition: none; }
  .fac-more  { transition: none; }
}
/* ─── AWARDS & RECOGNITIONS (homepage, under the achievement statistics) ─────
   These are photographed certificates, so they arrive portrait, landscape and
   square in the same row. The frame is fixed and the scan is CONTAINED inside
   it — a cover crop would cut through the seal or the signature, which is the
   only part of a certificate anyone wants to see. The card sits on the dark
   section, so it borrows the same glass treatment as .ach-stat rather than the
   light .glass-card, which was rendering navy text on navy. */
/* ─── AWARDS GRID ────────────────────────────────────────────────────────────
   Compact cards sitting side by side, in the same visual language as the
   Facilities carousel above (glass panel, hairline border, gold hover lift).

   The layout is a class rather than an inline style on purpose — see the note
   in index.html. Four certificates now sit in one row on a desktop instead of
   stacking full-width, one per screen.

   `auto-fit` with a 240px floor means the row count follows the number of
   awards and the viewport: 4-up on a wide screen, 2-up on a tablet, 1-up on a
   phone, without a media query per breakpoint. */
.awards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-12);
  align-items: start;
}
.awards-grid[hidden] { display: none; }

/* Cap the row so a tall certificate cannot stretch its neighbours. */
@media (min-width: 1100px) {
  .awards-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

.award-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-2xl);
  background: rgba(255,255,255,0.05);
  overflow: hidden;
  transition:
    background-color var(--dur-base),
    border-color var(--dur-base),
    transform var(--dur-slow) var(--ease-spring);
}
.award-card:hover {
  background: rgba(201,162,39,0.08);
  border-color: rgba(201,162,39,0.3);
  transform: translateY(-4px);
}
.award-media {
  position: relative;
  /* 4:3 keeps every card the same height whatever the certificate's own shape,
     and `contain` below means a portrait scan is never cropped through its
     seal or signature. A hard max-height stops a wide viewport from turning
     each certificate into a full-screen panel. */
  aspect-ratio: 4 / 3;
  max-height: 260px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.award-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.award-body {
  padding: var(--space-5) var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.award-title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-white);
  line-height: 1.4;
}
.award-meta {
  font-size: var(--text-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.award-desc {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
  line-height: var(--leading-relaxed);
  margin: .25rem 0 0;
}
@media (prefers-reduced-motion: reduce) {
  .award-card { transition: none; }
  .award-card:hover { transform: none; }
}

/* ─── ACCREDITATIONS & AFFILIATIONS (about.html) ─────────────────────────────
   The cards are generated from about.affiliations, so there can be two of them
   or ten; auto-fit keeps the row centred and evenly spaced at any count. */
.aff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 240px));
  justify-content: center;
  gap: var(--space-6);
  margin-top: var(--space-8);
}
.aff-card {
  padding: var(--space-6) var(--space-5);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.aff-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.3;
  margin: 0;
}
.aff-type {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin: 0;
}
.aff-code {
  font-size: .85rem;
  color: var(--color-text-soft);
  margin: 0;
}
@media (max-width: 480px) {
  .aff-grid { grid-template-columns: 1fr; }
}

/* ─── BOARDING · OUR RESIDENCES ──────────────────────────────────────────────
   An editorial split rather than a card grid: a stacked picture column and a
   raised glass panel that carries the copy and the amenity list. The panel is
   deliberately the taller, quieter element — it is what the section is really
   about — and the pictures support it instead of the other way round.

   The grid is asymmetric (7:5) so it does not read as two equal boxes, and the
   panel is nudged up into the picture column at desktop width to break the
   rectangle. Everything below 1024px unstacks into a single honest column. */
.res-layout {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-8);
  align-items: start;
}
.res-media {
  display: grid;
  gap: var(--space-6);
}
.res-figure { margin: 0; }
.res-slot { border-radius: var(--radius-2xl); }
.res-figure--lead .res-slot::before { padding-top: 66.66%; }   /* 3:2 */
.res-figure--sub  .res-slot::before { padding-top: 56.25%; }   /* 16:9 */
.res-figure--sub { width: 72%; }
.res-cap {
  margin-top: .7rem;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}

.res-panel {
  position: relative;
  padding: var(--space-8) var(--space-8) var(--space-9);
  border-radius: var(--radius-2xl);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  margin-top: var(--space-8);
}
.res-panel-kicker {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-4);
}
.res-panel-lead {
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.92);
  margin: 0;
}
.res-rule {
  width: 48px;
  height: 2px;
  background: var(--color-gold);
  margin: var(--space-7) 0 var(--space-6);
}
.res-panel-sub {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin: 0 0 var(--space-4);
}
/* A checked list reads as a specification; the old pill row read as tags. */
.res-amenities {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem var(--space-5);
}
.res-amenities li {
  position: relative;
  padding-left: 1.55rem;
  font-size: .92rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.78);
}
.res-amenities li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .45em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--color-gold);
}

@media (max-width: 1024px) {
  .res-layout { grid-template-columns: 1fr; gap: var(--space-7); }
  .res-panel { margin-top: 0; }
  .res-media { grid-template-columns: 1fr 1fr; align-items: start; }
  .res-figure--sub { width: 100%; }
  .res-figure--lead .res-slot::before,
  .res-figure--sub  .res-slot::before { padding-top: 66.66%; }
}
@media (max-width: 640px) {
  .res-media { grid-template-columns: 1fr; }
  .res-amenities { grid-template-columns: 1fr; }
  .res-panel { padding: var(--space-7) var(--space-6) var(--space-8); }
  .res-panel-lead { font-size: 1.15rem; }
}

/* A picture frame the school has not filled yet. The labelled scaffolding
   inside it is removed by sweepUnfilledPlaceholders(); this keeps what is left
   looking like a deliberate panel rather than a dashed "missing image" box. */
.media-slot.slot-empty {
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(135deg, rgba(26,39,68,.55) 0%, rgba(13,26,53,.55) 100%);
}
.section:not(.section-dark) .media-slot.slot-empty {
  border-color: rgba(10,22,51,0.08);
  background: linear-gradient(135deg, rgba(15,61,145,.05) 0%, rgba(10,22,51,.04) 100%);
}