/* ═══════════════════════════════════════════
   DESIGN SYSTEM — Ann Perreau's Music School
   Style:  Exaggerated Minimalism + Bold Typography
   Fonts:  Bebas Neue (display) · Source Sans 3 (body) · Playfair Display (accent)
   Skill:  frontend-design + ui-ux-pro-max
   Rules:  Source Sans 3 body, 0px radius, tight tracking, 150-300ms ease-out,
           40ms stagger, transform/opacity only, cursor-pointer, reduced-motion
═══════════════════════════════════════════ */

/* ─── Reset ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; width: 100%; height: 100%; object-fit: cover; }
picture { display: contents; }
a   { color: inherit; text-decoration: none; cursor: pointer; }
button { cursor: pointer; }
ul  { list-style: none; }

/* ─── Tokens ─────────────────────────────── */
:root {
  /* Colors — Music Instrument Learning × Light Neutral
     Light base + dark text; red brand accent unchanged.
     Text colours verified for WCAG AA (>=4.5:1) on --bg and
     on --surface-2, the lightest surface text sits on. */
  --red:        #c8102e;
  --red-dark:   #9e0c23;
  --red-bright: #f5233f;  /* holds against the dark hero photo without effects */
  --red-glow:   rgba(200, 16, 46, 0.22);
  --bg:         #faf9f7;   /* warm off-white */
  --surface-1:  #f2f0ec;
  --surface-2:  #ece9e4;
  --surface-3:  #e3dfd8;
  --border:     #e0ddd6;
  --border-mid: rgba(0,0,0,0.12);
  --mid:        #6e6c67;   /* ~4.7:1 on --bg  */
  --muted:      #5f5d58;   /* ~6.0:1 on --bg  */
  --fg:         #1a1815;   /* ~16:1 on --bg   */
  --fg-dim:     #4a4844;   /* ~8:1  on --bg   */
  --fg-faint:   #5c5a55;   /* ~6:1 on --bg, ~5:1 on --surface-2 */

  /* Text that always sits over dark photo scrims (hero, program
     cards, video) — stays light in the light theme for legibility. */
  --fg-on-media:     #f7f6f4;
  --fg-on-media-dim: rgba(247,246,244,0.78);

  /* Fonts — Bold Statement pairing (Bebas Neue + Source Sans 3) */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'Source Sans 3', sans-serif;
  --font-serif:   'Playfair Display', serif;

  /* Type scale */
  --text-xs:   0.72rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;

  /* Spacing — 8pt grid */
  --sp-1:  8px;  --sp-2: 16px;  --sp-3: 24px;
  --sp-4: 32px;  --sp-5: 48px;  --sp-6: 64px;
  --sp-7: 80px;  --sp-8: 96px;  --sp-9: 128px;

  /* Motion — 150-300ms, ease-out enter, ease-in exit */
  --ease-out:  cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:   cubic-bezier(0.4, 0.0, 1, 1);
  --ease-std:  cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast:  150ms;
  --dur-mid:   250ms;
  --dur-slow:  350ms;

  /* Layout */
  --max-w: 1320px;
  --radius: 2px;       /* nearly-zero per Bold Typography style */
  --header-h: 72px;
}

/* ─── Reduced-motion override ─────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── Utility ────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

/* ═══════════════════════════════════════════
   TYPOGRAPHY
═══════════════════════════════════════════ */
/* Display — Bebas Neue, tight tracking, oversized */
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 0.95; text-transform: uppercase; }

h2 { font-size: clamp(2.5rem, 6vw, 5rem); letter-spacing: 0.02em; }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.9rem); letter-spacing: 0.04em; }

/* Section eyebrow — Source Sans 3, spaced caps */
.section-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: var(--sp-1);
  display: block;
}

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.section-header.center { flex-direction: column; align-items: center; text-align: center; }

/* Section link — underline CTA pattern from skill */
.section-link {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
  position: relative;
  padding-bottom: 3px;
  white-space: nowrap;
}
.section-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--red);
  transform: scaleX(1);
  transform-origin: left;
  transition: background var(--dur-mid) var(--ease-out);
}
.section-link:hover { color: var(--red); }
.section-link span {
  display: inline-block;
  transition: transform var(--dur-mid) var(--ease-out);
}
.section-link:hover span { transform: translateX(4px); }

/* ═══════════════════════════════════════════
   BUTTONS  — cursor-pointer on all
═══════════════════════════════════════════ */
.btn-primary {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 32px;
  border: 2px solid var(--red);
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out),
    transform   var(--dur-fast) var(--ease-out),
    box-shadow  var(--dur-fast) var(--ease-out);
}
.btn-primary:hover {
  background: var(--red-dark);
  border-color: var(--red-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px var(--red-glow);
}
.btn-primary:active { transform: translateY(0); transition-duration: var(--dur-fast); }

.btn-ghost {
  display: inline-block;
  background: transparent;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 32px;
  border: 2px solid var(--border-mid);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn-ghost:hover { border-color: var(--red); color: var(--red); }

.btn-red {
  display: inline-block;
  background: transparent;
  color: var(--red);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 24px;
  border: 2px solid var(--red);
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out),
    color      var(--dur-fast) var(--ease-out),
    transform  var(--dur-fast) var(--ease-out);
}
.btn-red:hover { background: var(--red); color: #fff; transform: translateY(-2px); }
.btn-red:active { transform: translateY(0); }

.btn-outline-sm {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 9px 20px;
  border: 1.5px solid var(--border-mid);
  border-radius: var(--radius);
  color: var(--fg);
  cursor: pointer;
  white-space: nowrap;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    color        var(--dur-fast) var(--ease-out);
}
.btn-outline-sm:hover { border-color: var(--red); color: var(--red); }

.btn-header {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 22px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn-header:hover { background: var(--red-dark); transform: translateY(-1px); }

/* ═══════════════════════════════════════════
   HEADER
═══════════════════════════════════════════ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  background: transparent;
  /* Task 11: white nav + white logo over the natural dark hero — colour
     only, no shadows or glows anywhere in the header. */
  --header-fg:  #ffffff;
  --header-sub: rgba(255,255,255,0.78);
  transition: background var(--dur-slow) var(--ease-out);
}
/* Task 12: gentle black fade behind the transparent header so the white
   nav/logo hold against the stage lights. Part of the header (full bleed,
   under its content, over the hero photo), gone once the header is opaque. */
.site-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 110px;   /* ends before the hero's red border frame (top ~112px at 1440x900) */
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.75) 0%,
    rgba(0,0,0,0.45) 45%,
    rgba(0,0,0,0) 100%);
  pointer-events: none;
  z-index: -1;
}
.site-header.scrolled::before,
.site-header.solid::before { content: none; }

/* Scrolled off the hero: swap to the dark treatment (opaque, no blur) so
   the white logo and nav stay legible over light page content. */
.site-header.scrolled {
  background: #17130f;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  --header-fg:  #ffffff;
  --header-sub: rgba(255,255,255,0.7);
}

.header-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--sp-5);
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.logo { display: flex; align-items: center; line-height: 1; flex-shrink: 0; }

/* Brand wordmark — solid-white PNG asset (Task 11): white over the dark
   hero and over the dark scrolled/solid header. No filter, no glow. */
.logo-mark {
  display: block;
  width: 148px; height: 54px;
  background: url(/assets/images/site/logo-mark-white.png) left center / contain no-repeat;
}
@media (max-width: 480px) { .logo-mark { width: 124px; height: 45px; } }
.logo-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  color: var(--header-fg);
  transition: color var(--dur-fast) var(--ease-out);
}
.logo:hover .logo-name { color: var(--red); }
.logo-sub {
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--header-sub);
  margin-top: 2px;
}

.primary-nav { display: flex; gap: var(--sp-4); margin-left: auto; }
/* NOTE: the old ".primary-nav a" element rule was removed. It matched EVERY
   anchor in the nav — including dropdown links — and leaked the light hero
   colour (--header-fg) into the submenu. Top-level items are now styled
   solely by ".nav-link", and submenu items solely by ".dropdown-link", so
   the light-over-hero colour is scoped to the top level only. */

.header-actions { display: flex; align-items: center; gap: var(--sp-2); }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  -webkit-tap-highlight-color: transparent;
}
.hamburger span {
  display: block;
  width: 24px; height: 2px;
  background: var(--header-fg);
  transition: transform var(--dur-mid) var(--ease-std), opacity var(--dur-mid) var(--ease-std);
}

.mobile-nav {
  display: none;
  flex-direction: column;
  padding: var(--sp-3) var(--sp-5) var(--sp-4);
  background: rgba(250,249,247,0.99);
  border-top: 1px solid var(--border);
}
.mobile-nav a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
  transition: color var(--dur-fast) var(--ease-out);
}
.mobile-nav a:hover { color: var(--red); }
.mobile-nav.open { display: flex; }
.btn-mobile-cta {
  margin-top: var(--sp-2);
  background: var(--red) !important;
  text-align: center;
  padding: 14px 0 !important;
  border: none !important;
  border-radius: var(--radius) !important;
}

/* ═══════════════════════════════════════════
   HERO — Rock Hall bordered-frame
═══════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: calc(var(--header-h) + var(--sp-4)) var(--sp-3) var(--sp-5);
}

.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  /* Slight black tint so the hero text sits more comfortably on the photo;
     the bottom white fade above it stays clean */
  filter: brightness(0.68);
  transform: scale(1.04);
  animation: heroZoom 14s var(--ease-out) forwards;
}
@keyframes heroZoom {
  to { transform: scale(1); }
}
.hero-overlay {
  position: absolute; inset: 0;
  /* Task 11 shape, retuned for Task 15 (scroll indicator removed, button
     row now ~98px from the hero bottom at desktop): one linear layer,
     straight bottom-to-top, identical across the full width. Solid --bg at
     the bottom edge, eased stops, fully transparent by the button row. */
  background: linear-gradient(to top,
    var(--bg) 0px,
    rgba(250,249,247,0.93) 14px,
    rgba(250,249,247,0.82) 28px,
    rgba(250,249,247,0.68) 42px,
    rgba(250,249,247,0.52) 56px,
    rgba(250,249,247,0.36) 68px,
    rgba(250,249,247,0.22) 78px,
    rgba(250,249,247,0.11) 87px,
    rgba(250,249,247,0.04) 93px,
    rgba(250,249,247,0) 98px);
}
/* Between 481-1024px the row sits 78-98px up — end the fade at the split */
@media (max-width: 1024px) {
  .hero-overlay {
    background: linear-gradient(to top,
      var(--bg) 0px,
      rgba(250,249,247,0.93) 13px,
      rgba(250,249,247,0.82) 25px,
      rgba(250,249,247,0.68) 38px,
      rgba(250,249,247,0.52) 50px,
      rgba(250,249,247,0.36) 61px,
      rgba(250,249,247,0.22) 70px,
      rgba(250,249,247,0.11) 78px,
      rgba(250,249,247,0.04) 84px,
      rgba(250,249,247,0) 88px);
  }
}

/* The bordered frame — Rock Hall structure */
.hero-frame-wrap {
  position: relative; z-index: 2;
  width: 100%; max-width: 1480px;
  flex: 1;
  display: flex; align-items: stretch;
  padding: 0 var(--sp-3);
}

/* Teachers group-photo hero: no border (it crossed faces at the edges) and
   the text block anchors to the TOP, sitting in the flag band above
   everyone's heads so no face is covered. */
.hero-frame {
  width: 100%;
  border: none;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--sp-3) var(--sp-5);
  opacity: 0;
  transform: scale(0.975);
  animation: frameIn 0.9s 0.15s var(--ease-out) forwards;
}
@keyframes frameIn { to { opacity: 1; transform: scale(1); } }

.hero-frame-inner {
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  /* Sits below the photo's own "Cool Britannia" lettering, above the heads */
  margin-top: clamp(60px, 12.5vh, 130px);
}

.hero-eyebrow {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.3vw, 1.2rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: var(--sp-2);
  opacity: 0;
  animation: fadeUp 0.6s 0.65s var(--ease-out) forwards;
}

/* Compact headline — small enough that no face is covered. On desktop it
   runs as ONE line inside the flag band above the heads; the deliberate
   two-line break returns below 1025px where the band is taller. */
@media (min-width: 1025px) {
  .hero-title br { display: none; }
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.6vw, 4.6rem);
  letter-spacing: 0.02em;
  line-height: 0.9;
  color: var(--red-bright);   /* Task 11: brighter red, separates from the dark stage on colour alone */
  text-transform: uppercase;
  text-align: center;
  opacity: 0;
  animation: fadeUp 0.8s 0.45s var(--ease-out) forwards;
}

/* Retired while the teachers group photo is the hero: at every width the
   italic strapline landed on faces, and the identical line appears as the
   H2 of the very next section. Remove `display:none` to bring it back. */
.hero-tagline {
  display: none;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1rem, 2vw, 1.4rem);
  color: var(--red-bright);
  margin-top: var(--sp-2);
  letter-spacing: 0.03em;
}

/* Task 11: no shadows, glows or scrims anywhere in the hero — legibility
   is handled by colour alone (white text, bright red headline). */

.hero-below {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  width: 100%;
}

.hero-cta-group {
  display: flex; gap: var(--sp-2);
  flex-wrap: wrap; justify-content: center;
  opacity: 0;
  animation: fadeUp 0.6s 0.95s var(--ease-out) forwards;
}

/* Task 15 Amendment A: both hero buttons are identical fixed rectangles —
   same width (sized to the longer label), height, radius, type. Labels
   centre inside. */
.hero-cta-group .btn-primary,
.hero-cta-group .btn-ghost {
  width: 224px;
  padding-left: 0;
  padding-right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* Book a Trial Class: frosted panel — translucent white over a light
   backdrop blur. Checked at every breakpoint: this button always sits on
   the white fade + the bright stage floor (never on dark photo), so per
   the Amendment A rule the border and label are brand red, not white. */
.hero-cta-group .btn-ghost {
  background: rgba(255,255,255,0.25);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--red);
  border-color: var(--red);
}
.hero-cta-group .btn-ghost:hover {
  background: rgba(255,255,255,0.45);
  color: var(--red-dark);
  border-color: var(--red-dark);
}
.hero-cta-group .btn-primary:focus-visible,
.hero-cta-group .btn-ghost:focus-visible {
  outline: 3px solid var(--red-bright);
  outline-offset: 2px;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  .hero { padding: calc(var(--header-h) + 12px) 16px var(--sp-4); }
  .hero-frame-wrap { padding: 0; }
  .hero-frame { border-width: 3px; padding: var(--sp-5) var(--sp-3); }
}

/* ═══════════════════════════════════════════
   TICKER
═══════════════════════════════════════════ */
.ticker-wrap {
  background: var(--red);
  overflow: hidden;
  padding: 13px 0;
  white-space: nowrap;
}
.ticker {
  display: inline-flex; gap: var(--sp-4);
  animation: ticker 32s linear infinite;
}
.ticker span {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}
.ticker .dot { color: rgba(255,255,255,0.45); }
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ═══════════════════════════════════════════
   SPOTLIGHT — Founder feature
═══════════════════════════════════════════ */
.spotlight { background: var(--surface-1); padding: var(--sp-9) 0; }

.spotlight-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--sp-5);
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: var(--sp-8);
  align-items: center;
}

.spotlight-media {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: var(--radius);
}
.spotlight-media img { transition: transform 0.8s var(--ease-out); }
.spotlight-media:hover img { transform: scale(1.04); }
/* Red accent bar bottom */
.spotlight-media::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 5px; background: var(--red);
}

.spotlight-text { padding: var(--sp-3) 0; }
.spotlight-text h2 {
  font-size: clamp(3rem, 6vw, 6rem);
  margin-bottom: var(--sp-3);
  line-height: 0.92;
}
.spotlight-text p {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--fg-dim);
  line-height: 1.8;
  margin-bottom: var(--sp-5);
  max-width: 54ch;
}

/* ═══════════════════════════════════════════
   PROGRAMS — Rock Hall hover pop-out
═══════════════════════════════════════════ */
.programs-section { background: var(--bg); padding: var(--sp-9) 0; }

.programs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}

.program-card {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  cursor: pointer;
  background: var(--surface-2);
  /* stagger via JS inline style --i */
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity    var(--dur-slow) var(--ease-out),
    transform  var(--dur-slow) var(--ease-out);
}
.program-card.visible { opacity: 1; transform: translateY(0); }

/* Image zoom on hover */
.card-img-wrap { position: absolute; inset: 0; }
.card-img-wrap img {
  transition: transform 0.55s var(--ease-out);
}
.program-card:hover .card-img-wrap img { transform: scale(1.07); }

/* Gradient overlay */
.card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(10,10,10,0.96) 0%,
    rgba(10,10,10,0.40) 55%,
    transparent 100%
  );
  transition: background var(--dur-mid) var(--ease-out);
}
.program-card:hover .card-overlay {
  background: linear-gradient(
    to top,
    rgba(10,10,10,0.98) 0%,
    rgba(10,10,10,0.65) 60%,
    rgba(200,16,46,0.08) 100%
  );
}

/* Bottom info */
.card-info {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: var(--sp-4) var(--sp-3);
  z-index: 2;
}
.card-info h3 {
  font-size: 1.4rem;
  color: var(--fg-on-media);
  transition: color var(--dur-fast) var(--ease-out);
}
.program-card:hover .card-info h3 { color: var(--red); }

.card-info p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--fg-on-media-dim);
  margin-top: var(--sp-1);
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.35s var(--ease-out), opacity 0.35s var(--ease-out);
}
.program-card:hover .card-info p { max-height: 80px; opacity: 1; }

.card-link {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  margin-top: var(--sp-2);
  transition: opacity var(--dur-mid) var(--ease-out) 0.08s, transform var(--dur-mid) var(--ease-out) 0.08s;
}
/* Program cards reveal their link on hover; everywhere else it is always visible */
.program-card .card-link { opacity: 0; transform: translateY(8px); }
.card-link span { display: inline-block; transition: transform var(--dur-fast) var(--ease-out); }
.card-link:hover span { transform: translateX(4px); }
.program-card:hover .card-link { opacity: 1; transform: translateY(0); }

/* Pop-out bubble — picture + name */
.card-hover-pop {
  position: absolute;
  top: 38%; left: 50%;
  transform: translate(-50%, -50%) scale(0.82);
  width: 196px;
  background: var(--surface-1);
  border: 2px solid var(--red);
  border-radius: var(--radius);
  overflow: hidden;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity   0.28s var(--ease-out),
    transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 24px 64px rgba(0,0,0,0.85), 0 0 0 1px var(--red-glow);
}
.card-hover-pop img { height: 150px; object-fit: cover; }
.card-hover-pop span {
  display: block;
  padding: 11px 14px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg);
  background: var(--surface-2);
  border-top: 2px solid var(--red);
}
.program-card:hover .card-hover-pop {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Red border flash */
.program-card::after {
  content: '';
  position: absolute; inset: 0;
  border: 0px solid var(--red);
  pointer-events: none; z-index: 5;
  transition: border-width var(--dur-fast) var(--ease-out);
}
.program-card:hover::after { border-width: 3px; }

/* Placeholder colours when images haven't loaded */
.program-card[data-program="individual"] .card-img-wrap { background: #1a0e14; }
.program-card[data-program="group"]      .card-img-wrap { background: #0e141a; }
.program-card[data-program="fun"]        .card-img-wrap { background: #0e1a14; }
.program-card[data-program="play"]       .card-img-wrap { background: #1a1a0e; }
.program-card[data-program="bespoke"]    .card-img-wrap { background: #14101a; }
.program-card[data-program="specialist"] .card-img-wrap { background: #0e1618; }

/* ═══════════════════════════════════════════
   ABOUT
═══════════════════════════════════════════ */
.about-section {
  background: var(--surface-1);
  padding: var(--sp-9) 0;
  position: relative; overflow: hidden;
}
/* Oversized background word — exaggerated minimalism */
.about-bg-text {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(8rem, 22vw, 24rem);
  color: rgba(0,0,0,0.04);
  pointer-events: none;
  white-space: nowrap;
  user-select: none;
  letter-spacing: 0.08em;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: center;
  position: relative; z-index: 1;
}

.about-text h2 { margin-bottom: var(--sp-3); }
.about-text p {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--fg-dim);
  line-height: 1.8;
  margin-bottom: var(--sp-2);
  max-width: 55ch;
}

.about-images { display: grid; grid-template-rows: auto auto; gap: var(--sp-2); }
.about-img-main   { aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius); }
.about-img-secondary { aspect-ratio: 16/7; overflow: hidden; border-radius: var(--radius); }
.about-img-main img,
.about-img-secondary img { transition: transform 0.6s var(--ease-out); }
.about-img-main:hover img,
.about-img-secondary:hover img { transform: scale(1.04); }

/* ═══════════════════════════════════════════
   VIDEO SECTION
═══════════════════════════════════════════ */
.video-section {
  position: relative;
  padding: var(--sp-9) var(--sp-5);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  min-height: 560px; overflow: hidden;
}
.video-bg { position: absolute; inset: 0; }
.video-bg img { object-fit: cover; }
.video-overlay {
  position: absolute; inset: 0;
  background: rgba(8,8,8,0.78);
}
.video-content { position: relative; z-index: 2; max-width: 720px; }
.video-content h2 { font-size: clamp(2.5rem, 7vw, 6rem); margin-bottom: var(--sp-3); color: var(--fg-on-media); }
.video-content p {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--fg-on-media-dim);
  margin-bottom: var(--sp-5);
  line-height: 1.75;
}
.section-eyebrow.light { color: rgba(247,246,244,0.65); }

/* ═══════════════════════════════════════════
   PHILOSOPHY / STORIES
═══════════════════════════════════════════ */
.stories-section { background: var(--bg); padding: var(--sp-9) 0; }

.stories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}

.story-card {
  background: var(--surface-2);
  padding: var(--sp-5) var(--sp-4);
  position: relative; overflow: hidden;
  cursor: default;
  transition:
    background  var(--dur-mid) var(--ease-out),
    transform   var(--dur-mid) var(--ease-out);
}
.story-card::before {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px; background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-mid) var(--ease-out);
}
.story-card:hover { background: var(--surface-3); transform: translateY(-4px); }
.story-card:hover::before { transform: scaleX(1); }

.story-num {
  font-family: var(--font-display);
  font-size: 4rem;
  color: rgba(200,16,46,0.12);
  line-height: 1;
  margin-bottom: var(--sp-2);
  transition: color var(--dur-mid) var(--ease-out);
}
.story-card:hover .story-num { color: rgba(200,16,46,0.32); }
.story-card h3 {
  font-size: 1.1rem;
  margin-bottom: var(--sp-2);
  transition: color var(--dur-fast) var(--ease-out);
}
.story-card:hover h3 { color: var(--red); }
.story-card p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--fg-faint);
  line-height: 1.75;
}

/* ═══════════════════════════════════════════
   EVENTS
═══════════════════════════════════════════ */
.events-section { background: var(--surface-1); padding: var(--sp-9) 0; }
.events-list { display: flex; flex-direction: column; }

.event-row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-4) 0 var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  transition:
    border-left-color var(--dur-fast) var(--ease-out),
    background        var(--dur-fast) var(--ease-out);
}
.event-row:first-child { border-top: 1px solid var(--border); }
.event-row:hover {
  border-left-color: var(--red);
  background: rgba(200,16,46,0.04);
}

.event-date { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.event-month {
  font-family: var(--font-body);
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--red); text-transform: uppercase;
}
.event-day {
  font-family: var(--font-display);
  font-size: 3rem; color: var(--fg);
}

.event-details h3 {
  font-size: 1.2rem; margin-bottom: 5px;
  transition: color var(--dur-fast) var(--ease-out);
}
.event-row:hover .event-details h3 { color: var(--red); }
.event-details p {
  font-family: var(--font-body);
  font-size: var(--text-sm); color: var(--muted);
}

.event-meta { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); }
.event-tag {
  font-family: var(--font-body);
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 10px;
  background: rgba(200,16,46,0.10);
  color: var(--red); border-radius: var(--radius);
}
.event-tag.free { background: rgba(21,128,61,0.12); color: #15803d; }

/* ═══════════════════════════════════════════
   CTA CARDS
═══════════════════════════════════════════ */
.cta-cards-section { background: var(--bg); padding: var(--sp-9) 0; }

.cta-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}

.cta-card {
  background: var(--surface-2);
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
  position: relative; overflow: hidden;
  cursor: default;
  transition:
    background var(--dur-mid) var(--ease-out),
    transform  var(--dur-mid) var(--ease-out);
}
.cta-card::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--red);
  transform: scaleX(0);
  transition: transform var(--dur-mid) var(--ease-out);
}
.cta-card:hover { background: var(--surface-3); transform: translateY(-6px); }
.cta-card:hover::after { transform: scaleX(1); }

.cta-card-icon {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  margin: 0 auto var(--sp-3);
  border: 1.5px solid var(--border-mid);
  border-radius: 50%;
  color: var(--red);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.cta-card:hover .cta-card-icon {
  border-color: var(--red);
  background: rgba(200,16,46,0.08);
}

.cta-card h3 {
  font-size: 1.5rem; margin-bottom: var(--sp-2);
  transition: color var(--dur-fast) var(--ease-out);
}
.cta-card:hover h3 { color: var(--red); }
.cta-card p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--fg-dim);
  margin-bottom: var(--sp-4);
  line-height: 1.7;
}

/* ═══════════════════════════════════════════
   NEWSLETTER
═══════════════════════════════════════════ */
.newsletter-section { background: var(--red); padding: var(--sp-8) 0; }
.newsletter-inner {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--sp-7);
  align-items: center;
}
.newsletter-text h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  color: #fff; margin-bottom: var(--sp-1);
}
.newsletter-text p {
  font-family: var(--font-body);
  color: rgba(255,255,255,0.78);
  font-size: var(--text-base);
}

.newsletter-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}
.newsletter-form input {
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: var(--radius);
  padding: 14px 18px;
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.newsletter-form input::placeholder { color: rgba(255,255,255,0.55); }
.newsletter-form input:focus { border-color: #fff; background: rgba(255,255,255,0.22); }
.newsletter-form input[type="email"] { grid-column: 1 / -1; }
.newsletter-form button {
  grid-column: 1 / -1;
  background: #fff; color: var(--red);
  font-family: var(--font-body);
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 15px;
  border: none; border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.newsletter-form button:hover { background: rgba(255,255,255,0.9); transform: translateY(-2px); }
.newsletter-form button:active { transform: translateY(0); }

/* ═══════════════════════════════════════════
   CONTACT
═══════════════════════════════════════════ */
.contact-section { background: var(--surface-1); padding: var(--sp-9) 0; }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--sp-8);
  margin-top: var(--sp-6);
}
.contact-item { margin-bottom: var(--sp-5); }
.contact-label {
  font-family: var(--font-body);
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--red); display: block;
  margin-bottom: var(--sp-1);
}
.contact-item p, .contact-item a {
  font-family: var(--font-body);
  color: var(--fg-dim); font-size: var(--text-base);
  line-height: 1.8;
  transition: color var(--dur-fast) var(--ease-out);
}
.contact-item a:hover { color: var(--red); }

.social-links { display: flex; gap: var(--sp-3); }
.social-links a {
  font-family: var(--font-body);
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg);
  border-bottom: 1px solid var(--red);
  padding-bottom: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}
.social-links a:hover { color: var(--red); }

.contact-form { display: flex; flex-direction: column; gap: var(--sp-2); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }

.contact-form input,
.contact-form textarea {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  outline: none; resize: vertical;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--mid); }
.contact-form input:focus,
.contact-form textarea:focus { border-color: var(--red); background: var(--surface-3); }

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.footer-top {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-5) var(--sp-7);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--sp-7);
}
.footer-brand .logo-name {
  font-family: var(--font-display);
  font-size: 1.8rem; letter-spacing: 0.06em;
  display: block; color: var(--red);
}
.footer-brand .logo-sub {
  font-family: var(--font-body);
  font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--red); display: block;
  margin-top: 2px; margin-bottom: var(--sp-2);
}
.footer-brand p {
  font-family: var(--font-body);
  font-size: var(--text-sm); color: var(--mid);
  max-width: 220px; line-height: 1.7;
}

.footer-nav-group { display: flex; flex-direction: column; }
.footer-nav-group h4 {
  font-family: var(--font-body);
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--red); margin-bottom: var(--sp-3);
}
.footer-nav-group a {
  font-family: var(--font-body);
  font-size: var(--text-sm); color: var(--fg-dim);
  padding: 6px 0;
  position: relative; display: inline-block;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-nav-group a::after {
  content: '';
  position: absolute; bottom: 4px; left: 0;
  width: 0; height: 1px; background: var(--red);
  transition: width var(--dur-mid) var(--ease-out);
}
.footer-nav-group a:hover { color: var(--fg); }
.footer-nav-group a:hover::after { width: 100%; }

.footer-bottom {
  border-top: 1px solid var(--border);
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-5);
  display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: var(--sp-2);
}
.footer-bottom p {
  font-family: var(--font-body);
  font-size: var(--text-xs); color: var(--mid);
}
.footer-bottom a { color: var(--fg-dim); transition: color var(--dur-fast) var(--ease-out); }
.footer-bottom a:hover { color: var(--red); }

/* ═══════════════════════════════════════════
   SCROLL REVEAL — staggered 40ms per card
═══════════════════════════════════════════ */
.reveal {
  opacity: 0; transform: translateY(36px);
  transition:
    opacity   var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ═══════════════════════════════════════════
   PLACEHOLDER BG (hero fallback)
═══════════════════════════════════════════ */
.hero-bg {
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(80,20,14,0.85) 0%, transparent 70%),
    linear-gradient(180deg, #0d0507 0%, #080808 60%, #0a0305 100%);
}

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .programs-grid  { grid-template-columns: repeat(2, 1fr); }
  .stories-grid   { grid-template-columns: repeat(2, 1fr); }
  .cta-cards-grid { grid-template-columns: repeat(2, 1fr); }
  .spotlight-inner { grid-template-columns: 1fr; gap: var(--sp-5); }
  .spotlight-media { max-width: 480px; }
  .about-grid      { grid-template-columns: 1fr; gap: var(--sp-5); }
  .footer-top      { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
  .newsletter-inner { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .container { padding: 0 var(--sp-3); }
  .header-inner { padding: 0 var(--sp-3); }
  .primary-nav { display: none; }
  .hamburger { display: flex; }

  .programs-grid  { grid-template-columns: 1fr; }
  .stories-grid   { grid-template-columns: 1fr; }
  .cta-cards-grid { grid-template-columns: 1fr; }

  .event-row { grid-template-columns: 80px 1fr; grid-template-rows: auto auto; }
  .event-meta { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; }

  .newsletter-form { grid-template-columns: 1fr; }
  .newsletter-form input[type="email"],
  .newsletter-form button { grid-column: 1; }

  .contact-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .form-row     { grid-template-columns: 1fr; }

  .footer-top { grid-template-columns: 1fr 1fr; padding: var(--sp-6) var(--sp-3) var(--sp-5); }
  .footer-bottom { padding: var(--sp-3); flex-direction: column; align-items: flex-start; }

  .card-hover-pop { display: none; }
}

@media (max-width: 480px) {
  .hero-cta-group { flex-direction: column; align-items: center; }
  /* Stacked pair goes full width and stays equal (Task 15 Amendment A) */
  .hero-cta-group .btn-primary, .hero-cta-group .btn-ghost { width: 100%; }
  /* Stacked buttons sit higher (~141px from the hero bottom after the
     scroll indicator was removed) — same eased single-layer fade, scaled
     so it is transparent by the button row */
  .hero-overlay {
    background: linear-gradient(to top,
      var(--bg) 0px,
      rgba(250,249,247,0.93) 20px,
      rgba(250,249,247,0.82) 40px,
      rgba(250,249,247,0.68) 60px,
      rgba(250,249,247,0.52) 80px,
      rgba(250,249,247,0.36) 98px,
      rgba(250,249,247,0.22) 112px,
      rgba(250,249,247,0.11) 125px,
      rgba(250,249,247,0.04) 134px,
      rgba(250,249,247,0) 141px);
  }
  .footer-top { grid-template-columns: 1fr; }
  .spotlight-inner { padding: 0 var(--sp-3); }
}

/* ═══════════════════════════════════════════════════════════
   MULTIPAGE SITE — nav dropdowns, layout, page components
   (appended for the Eleventy multipage build)
═══════════════════════════════════════════════════════════ */

/* Anchor offset so #hash targets clear the fixed header */
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
body.nav-locked { overflow: hidden; }

/* Interior pages: header is solid from the top — same dark treatment as
   the scrolled state so the white logo/nav always read (Task 11) */
.site-header.solid {
  background: #17130f;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  --header-fg:  #ffffff;
  --header-sub: rgba(255,255,255,0.7);
}
body.is-interior #main { padding-top: var(--header-h); }

/* ── Primary nav + dropdowns ── */
.primary-nav { display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; }
.nav-item.has-dropdown { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-body);
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--header-fg);
  background: none; border: none; cursor: pointer;
  padding: 6px 2px; position: relative;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-link .caret { font-size: 0.7em; transition: transform var(--dur-fast) var(--ease-out); }
.nav-item.open .nav-link .caret { transform: rotate(180deg); }
.nav-link::after {
  content: ''; position: absolute; left: 0; bottom: -2px;
  width: 0; height: 2px; background: var(--red-bright);
  transition: width var(--dur-mid) var(--ease-out);
}
.nav-link:hover, .nav-link.active { color: var(--red-bright); }
.nav-link.active::after, .nav-item:hover .nav-link::after { width: 100%; }

.dropdown {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 230px; padding: var(--sp-1);
  /* Own colour context — independent of the light-over-hero header colour */
  color: var(--fg);
  background: var(--bg);            /* fully opaque off-white; no blur/transparency */
  border: 1px solid var(--border);
  border-top: 3px solid var(--red);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0,0,0,0.18);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  z-index: 1100;                    /* above the fixed header's own content, hero frame + text */
}
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown,
.nav-item.open .dropdown {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
/* Submenu links — self-contained type + colour (no inheritance from the header) */
.dropdown-link {
  display: block; padding: 10px 14px;
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #1a1a1a;                  /* charcoal on the pale panel — ~16:1 */
  border-radius: var(--radius);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
/* Hover / keyboard focus: accent red on a tinted row (red on --surface-2 = 4.86:1) */
.dropdown-link:hover,
.dropdown-link:focus-visible,
.dropdown-link.active { background: var(--surface-2); color: var(--red); }
.dropdown-link:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
/* Current page stays legible: red is 4.86:1 on the tint; bump weight for emphasis */
.dropdown-link.active { font-weight: 700; box-shadow: inset 2px 0 0 var(--red); }

/* ── Mobile nav ── */
.mobile-nav {
  display: none; flex-direction: column;
  padding: var(--sp-2) var(--sp-3) var(--sp-4);
  background: var(--bg);
  border-top: 1px solid var(--border);
  max-height: calc(100vh - var(--header-h)); overflow-y: auto;
}
.mobile-nav.open { display: flex; }
.mobile-nav .m-link {
  display: block; padding: 13px 4px;
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg); border-bottom: 1px solid var(--border);
}
.mobile-nav .m-link.active { color: var(--red); }
.m-group { border-bottom: 1px solid var(--border); }
.m-parent {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 13px 4px; background: none; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg);
}
.m-parent .caret { transition: transform var(--dur-fast) var(--ease-out); }
.m-group.open .m-parent .caret { transform: rotate(180deg); }
.m-sub { display: none; padding: 2px 0 10px var(--sp-2); }
.m-group.open .m-sub { display: block; }
.m-sub .m-link { border-bottom: none; padding: 9px 4px; font-weight: 600; text-transform: none; letter-spacing: 0.02em; color: var(--fg-dim); }
.m-sub .m-link:hover, .m-sub .m-link.active { color: var(--red); }
.btn-mobile-cta {
  margin-top: var(--sp-3); text-align: center;
  background: var(--red); color: #fff;
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 14px; border-radius: var(--radius);
}
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Layout helpers ── */
.section { padding: var(--sp-9) 0; }
.section-alt { background: var(--surface-1); }
.container.narrow { max-width: 820px; }
.center { text-align: center; }
.center .section-eyebrow { display: block; }
.lead { font-size: var(--text-lg); color: var(--fg-dim); line-height: 1.8; margin-top: var(--sp-2); max-width: 62ch; }
.center .lead { margin-left: auto; margin-right: auto; }
.section .container > h2 { margin-bottom: var(--sp-2); }
.section p { color: var(--fg-dim); line-height: 1.8; }
.section p + p { margin-top: var(--sp-2); }
.cta-inline { margin-top: var(--sp-4); }

/* ── Body-copy justification (Task 08) ──────────────────────────
   Justify ONLY genuine running prose. The .prose wrapper is added
   solely to real body-copy blocks (never centred blocks), and the
   label paragraphs those blocks contain (eyebrows, dates, CTAs,
   pull-quotes) are explicitly excluded. Applies at all breakpoints.
   Never targets .center blocks, so it can't override text-align:center. */
.prose > p:not(.section-eyebrow):not(.pull-quote):not(.cta-inline):not(.update-date) {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: pretty;
  overflow-wrap: break-word;
}

/* ── Interior page hero ── */
.page-hero {
  position: relative; overflow: hidden;
  padding: var(--sp-8) 0 var(--sp-6);
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}
.page-hero.has-img { padding: var(--sp-9) 0 var(--sp-7); border-bottom: none; }
.page-hero-bg { position: absolute; inset: 0; z-index: 0; }
.page-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero-overlay { position: absolute; inset: 0; background: rgba(10,10,10,0.62); }
.page-hero-inner { position: relative; z-index: 1; }
.page-hero.has-img .page-hero-title,
.page-hero.has-img .page-hero-sub { color: var(--fg-on-media); }
.page-hero.has-img .page-hero-sub { color: var(--fg-on-media-dim); }
.page-hero-title { font-size: clamp(2.6rem, 6vw, 5rem); letter-spacing: 0.02em; }
.page-hero-sub { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.05rem, 2.2vw, 1.5rem); color: var(--fg-dim); margin-top: var(--sp-2); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-3); font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; }
.breadcrumb a { color: var(--red); font-weight: 700; }
.page-hero.has-img .breadcrumb a { color: #fff; }
.page-hero.has-img .breadcrumb span { color: var(--fg-on-media-dim); }
.breadcrumb span { color: var(--muted); }

/* ── Discipline cards (landing + home) ── */
.discipline-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.discipline-card {
  display: flex; flex-direction: column; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out), border-color var(--dur-mid) var(--ease-out);
}
.section-alt .discipline-card { background: var(--bg); }
.discipline-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(0,0,0,0.10); border-color: var(--red); }
.discipline-card-img { aspect-ratio: 16/10; overflow: hidden; }
.discipline-card-img img { transition: transform 0.5s var(--ease-out); }
.discipline-card:hover .discipline-card-img img { transform: scale(1.05); }
.discipline-card-body { padding: var(--sp-3) var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: 8px; }
.discipline-card-body h3 { font-size: 1.5rem; }
.discipline-card-body p { font-family: var(--font-body); font-size: var(--text-sm); color: var(--fg-dim); line-height: 1.65; }
.discipline-card .card-link { color: var(--red); font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; margin-top: auto; }

/* ── Discipline detail layout ── */
.discipline-layout { display: grid; grid-template-columns: 300px 1fr; gap: var(--sp-7); align-items: start; }
.discipline-specs { background: var(--surface-1); border: 1px solid var(--border); border-top: 3px solid var(--red); border-radius: var(--radius); padding: var(--sp-4); position: sticky; top: calc(var(--header-h) + 16px); }
.section-alt .discipline-specs { background: var(--bg); }
.discipline-specs h3 { font-size: 1.2rem; margin-bottom: var(--sp-2); }
.specs > div { padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); }
.specs > div:last-child { border-bottom: none; }
.specs dt { font-family: var(--font-body); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); margin-bottom: 4px; }
.specs dd { font-family: var(--font-body); font-size: var(--text-sm); color: var(--fg-dim); line-height: 1.6; }
.discipline-main .sub-heading { font-size: 1.2rem; margin: var(--sp-5) 0 var(--sp-2); }
.tick-list, .pill-list { list-style: none; margin-top: var(--sp-1); }
.tick-list li { font-family: var(--font-body); color: var(--fg-dim); padding: 6px 0 6px 26px; position: relative; }
.tick-list li::before { content: '♪'; position: absolute; left: 0; color: var(--red); font-weight: 700; }
.pill-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-list li { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; padding: 7px 14px; background: var(--surface-2); border-radius: 999px; color: var(--fg); }

/* ── Philosophy ── */
.philosophy-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.philosophy-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4); }
.section-alt .philosophy-card { background: var(--bg); }
.philosophy-num { font-family: var(--font-display); font-size: 2.6rem; color: rgba(200,16,46,0.28); line-height: 1; display: block; margin-bottom: var(--sp-2); }
.philosophy-card p { font-family: var(--font-body); font-size: var(--text-base); color: var(--fg-dim); line-height: 1.6; }

/* ── People ── */
/* Tighter vertical rhythm on Our People (Task 04) — heading sits attached
   to its grid; inter-faculty gap trimmed (~40%). Column gap kept so card
   size is unchanged; only the row gap comes down. */
.faculty-heading { font-size: 1.4rem; margin: var(--sp-4) 0 var(--sp-2); padding-bottom: var(--sp-1); border-bottom: 2px solid var(--red); display: inline-block; }
.faculty-heading:first-of-type { margin-top: 0; } /* first faculty tucks under the section header */
.people-grid { display: grid; grid-template-columns: repeat(6, 1fr); column-gap: var(--sp-3); row-gap: var(--sp-2); }
/* Our People page — trim the oversized section padding (128px -> 80px, ~40%)
   so the header-image gap, inter-section gap and footer gap all tighten,
   and pull the section title closer to its content. Scoped to this page. */
#executive-team.section,
#teachers.section { padding: var(--sp-7) 0; }
#executive-team .section-header,
#teachers .section-header { margin-bottom: var(--sp-4); }
.person { text-align: center; }
.person-photo { aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); }
.person-photo img { transition: transform 0.5s var(--ease-out); }
.person:hover .person-photo img { transform: scale(1.06); }
.person figcaption { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.person-name { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.03em; color: var(--fg); }
.person-role { font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* ── Galleries ── */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.gallery-item { aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius); }
.gallery-item img { transition: transform 0.5s var(--ease-out); }
.gallery-item:hover img { transform: scale(1.05); }

/* ── Feature split (home / school life teaser) ── */
.feature-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items: center; }
.feature-media { aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius); }
.feature-text h2 { margin-bottom: var(--sp-2); }
.feature-text p { color: var(--fg-dim); line-height: 1.8; margin-bottom: var(--sp-3); }

/* ── Updates / events ── */
.updates-list { display: grid; gap: var(--sp-3); }
.update-card { display: grid; grid-template-columns: 300px 1fr; gap: var(--sp-4); align-items: center; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.section-alt .update-card { background: var(--bg); }
.update-media { aspect-ratio: 16/10; overflow: hidden; }
.update-body { padding: var(--sp-3) var(--sp-4) var(--sp-3) 0; }
.update-date { font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); }
.update-body h3 { font-size: 1.6rem; margin: 6px 0 8px; }
.update-body p { font-family: var(--font-body); color: var(--fg-dim); margin-bottom: 8px; }

/* ── Link cards / rental cards ── */
.link-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.link-card { display: block; padding: var(--sp-4); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); transition: transform var(--dur-mid) var(--ease-out), border-color var(--dur-mid) var(--ease-out); }
.link-card:hover { transform: translateY(-4px); border-color: var(--red); }
.link-card h3 { font-size: 1.4rem; margin-bottom: 8px; }
.link-card p { font-family: var(--font-body); font-size: var(--text-sm); color: var(--fg-dim); margin-bottom: var(--sp-2); }
.link-card .card-link { color: var(--red); font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; }
.rental-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin: var(--sp-4) 0; }
.rental-card { padding: var(--sp-4); background: var(--surface-1); border: 1px solid var(--border); border-left: 3px solid var(--red); border-radius: var(--radius); }
.rental-card h3 { font-size: 1.3rem; margin-bottom: 6px; }
.rental-card p { font-family: var(--font-body); font-size: var(--text-sm); color: var(--fg-dim); }

/* ── Pull-quote / poster / connect ── */
.pull-quote { font-family: var(--font-serif); font-style: italic; font-size: var(--text-xl); color: var(--fg); line-height: 1.5; padding-left: var(--sp-3); border-left: 3px solid var(--red); margin-top: var(--sp-4); }
.poster img { max-width: 640px; margin: 0 auto; border: 1px solid var(--border); border-radius: var(--radius); }
.connect-links { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; margin: var(--sp-4) 0; }
.error-section { min-height: 60vh; display: flex; align-items: center; }
.error-section h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }

/* ── Contact map ── */
.map-section { line-height: 0; }
.map-section iframe { display: block; width: 100%; filter: grayscale(0.2) contrast(1.05); }
.contact-form label { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.contact-form select { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 14px; font-family: var(--font-body); font-size: var(--text-base); color: var(--fg); }
.contact-form select:focus { outline: none; border-color: var(--red); }
.form-note { font-family: var(--font-body); font-size: var(--text-sm); color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 400; }
.form-note a, .footer-address { color: var(--red); }

/* ── Footer additions ── */
.footer-cta { background: var(--red); color: #fff; padding: var(--sp-7) 0; }
.footer-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.footer-cta .section-eyebrow { color: rgba(255,255,255,0.85); }
.footer-cta h2 { color: #fff; font-size: clamp(2rem, 4vw, 3.2rem); }
.footer-cta-sub { color: rgba(255,255,255,0.85); font-family: var(--font-body); margin-top: 6px; }
.footer-cta-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.footer-cta .btn-primary { background: #fff; color: var(--red); border-color: #fff; }
.footer-cta .btn-primary:hover { background: rgba(255,255,255,0.9); box-shadow: none; }
.footer-cta .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.5); }
.footer-cta .btn-ghost:hover { border-color: #fff; color: #fff; }
.footer-social { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.footer-social a { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg); border-bottom: 1px solid var(--red); padding-bottom: 2px; }
.footer-social a:hover { color: var(--red); }
.footer-contact a { display: block; padding: 5px 0; color: var(--fg-dim); font-family: var(--font-body); font-size: var(--text-sm); }
.footer-contact a:hover { color: var(--red); }
.footer-address { display: block; margin-top: 8px; line-height: 1.6; }

/* ── Team cards as buttons (open modal) ── */
.person-card {
  appearance: none; -webkit-appearance: none;
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: center;
  cursor: pointer; width: 100%; display: block;
}
.person-card .person-photo,
.person .person-photo {
  display: block; aspect-ratio: 1; overflow: hidden;
  border-radius: var(--radius); background: var(--surface-2);
  border: 1px solid var(--border);
}
.person-card .person-caption,
.person .person-caption { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.person-card:hover .person-photo img { transform: scale(1.06); }
.person-card:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: var(--radius); }
.person-card::after {
  content: "View profile"; display: block; margin-top: 6px;
  font-family: var(--font-body); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--red);
  opacity: 0; transform: translateY(-3px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.person-card:hover::after, .person-card:focus-visible::after { opacity: 1; transform: translateY(0); }

/* Executive Leadership — single-occupant row, not stretched full width */
.people-grid-lead { grid-template-columns: repeat(6, 1fr); }
.people-grid-lead .person-card { grid-column: span 1; max-width: 200px; }
.teachers-header { margin-top: var(--sp-7); }

/* ── Accessible CV-style modal (teacher popups) ── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-3);
  background: rgba(10, 10, 10, 0.62);
  opacity: 0; transition: opacity var(--dur-mid) var(--ease-out);
}
.modal-overlay[hidden] { display: none; }
.modal-overlay.open { opacity: 1; }
.modal {
  position: relative;
  width: 100%; max-width: 840px; max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden; /* inner area scrolls */
  background: var(--bg); border-radius: var(--radius);
  border-top: 4px solid var(--red);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.35);
  transform: scale(0.96); opacity: 0;
  transition: transform var(--dur-mid) var(--ease-out), opacity var(--dur-mid) var(--ease-out);
}
.modal-overlay.open .modal { transform: scale(1); opacity: 1; }
/* Close stays pinned to the modal corner while .modal-scroll scrolls */
.modal-close {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 40px; height: 40px; border: none; border-radius: 50%;
  background: rgba(250, 249, 247, 0.9); color: var(--fg);
  font-size: 1.6rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.modal-close:hover { background: var(--red); color: #fff; }
.modal-scroll { overflow-y: auto; padding: var(--sp-5) var(--sp-5) var(--sp-6); }

/* Header: small photo top-left + text block beside it */
.pm-header { display: flex; gap: var(--sp-4); align-items: flex-start; }
.pm-photo {
  flex: 0 0 auto; width: 140px; height: 140px;
  overflow: hidden; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--border);
}
.pm-photo img { width: 100%; height: 100%; object-fit: cover; }
.pm-headtext { min-width: 0; flex: 1; } /* use the full width beside the photo */
.pm-discipline { padding-right: 40px; } /* only the top line clears the close button */
.pm-discipline {
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); margin-bottom: 6px;
}
.pm-name { font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1; margin-bottom: 8px; }
.pm-role, .pm-tenure {
  font-family: var(--font-body); color: var(--fg-dim); font-size: var(--text-base); line-height: 1.4;
}
.pm-tenure { color: var(--muted); font-size: var(--text-sm); margin-top: 2px; }

/* Body: qualifications + bio, comfortable line length */
/* Full content width (no line-length cap); ~1.5x paragraph spacing above */
.pm-body { margin-top: 36px; }
.pm-quals { margin-bottom: 36px; }
.pm-quals-heading {
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg); margin-bottom: var(--sp-1);
}
.pm-quals ul, #pm-quals { list-style: none; }
#pm-quals li {
  font-family: var(--font-body); color: var(--fg-dim); line-height: 1.6;
  padding: 4px 0 4px 22px; position: relative;
}
#pm-quals li::before { content: "\2022"; position: absolute; left: 4px; color: var(--red); font-weight: 700; }
.pm-bio p {
  font-family: var(--font-body); color: var(--fg-dim); line-height: 1.7;
  font-size: var(--text-base);
  text-align: justify;         /* justified at EVERY width, mobile included (Task 06B) */
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: pretty;
  word-break: normal;
  overflow-wrap: break-word;   /* long institution / competition names wrap, never overflow */
}
.pm-bio p + p { margin-top: var(--sp-3); }

/* CTA: single centred WhatsApp button, last element */
.pm-cta { margin-top: var(--sp-6); text-align: center; }
.pm-wa { display: inline-flex; align-items: center; gap: 8px; }
.pm-wa::before { content: "\1F4AC"; font-size: 1.1em; }

body.modal-open { overflow: hidden; }

@media (max-width: 640px) {
  /* Slightly tighter side padding gives Dr. Chong's long-noun bio more
     characters per line, so justification stays even (Task 06B). */
  .modal-scroll { padding: var(--sp-4) 14px var(--sp-5); }
  .pm-photo { width: 90px; height: 90px; }
}
/* (Task 06B withdrew the previous <=480 revert-to-left — bios now justify at all widths) */
/* Only stack the header below ~380px */
@media (max-width: 380px) {
  .pm-header { flex-direction: column; gap: var(--sp-2); }
  .pm-discipline { padding-right: 0; }
}

/* ═══ Responsive — multipage components ═══ */
@media (max-width: 1024px) {
  .primary-nav { display: none; }
  .hamburger { display: flex; }
  .header-actions .btn-header { display: none; } /* mobile menu carries its own CTA */
  .discipline-grid, .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .people-grid { grid-template-columns: repeat(4, 1fr); }
  .philosophy-grid { grid-template-columns: repeat(2, 1fr); }
  .link-cards { grid-template-columns: 1fr; }
  .discipline-layout { grid-template-columns: 1fr; gap: var(--sp-4); }
  .discipline-specs { position: static; }
  .feature-split { grid-template-columns: 1fr; gap: var(--sp-4); }
  .footer-cta-inner { flex-direction: column; align-items: flex-start; }
  /* Our People — tablet step (desktop 80 -> tablet 64 -> mobile 48) */
  #executive-team.section,
  #teachers.section { padding: var(--sp-6) 0; }
}
@media (max-width: 640px) {
  .discipline-grid, .gallery-grid, .gallery-3, .rental-grid { grid-template-columns: 1fr; }
  .people-grid { grid-template-columns: repeat(2, 1fr); }
  .philosophy-grid { grid-template-columns: 1fr; }
  .update-card { grid-template-columns: 1fr; }
  .update-body { padding: 0 var(--sp-3) var(--sp-3); }
  .section { padding: var(--sp-7) 0; }
  /* Our People — scale the tightened gaps down further on mobile */
  #executive-team.section,
  #teachers.section { padding: var(--sp-5) 0; }
  #executive-team .section-header,
  #teachers .section-header { margin-bottom: var(--sp-3); }
  #teachers .faculty-heading { margin-top: var(--sp-3); }
}

/* ═══════════════════════════════════════════════════════════
   TASK 05 — MOBILE OPTIMISATION
   Every rule is inside a max-width query, so desktop (>1024px)
   is untouched. Nothing here changes the signed-off desktop.
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Shorter header bar — shorter scrim behind it (Task 12) */
  .site-header::before { height: 100px; }

  /* Compact header bar: logo left, burger right */
  :root { --header-h: 64px; }
  .header-inner { justify-content: space-between; gap: var(--sp-2); padding: 0 16px; }
  .logo-mark { width: 116px; height: 42px; }
  .header-actions { gap: 0; }
  .hamburger {
    width: 44px; height: 44px; padding: 0;
    align-items: center; justify-content: center;
  }

  /* CRITICAL: the header must NOT create a containing block for the fixed menu.
     backdrop-filter (like transform/filter) makes position:fixed descendants
     resolve against the header instead of the viewport, collapsing the menu
     into the 64px bar when scrolled/solid. Opaque backgrounds only (the dark
     scrolled/solid treatment is already opaque with no blur). */
  /* While the menu is open, force the bar opaque dark so the white logo and
     the close icon read against it, with nothing showing through */
  body.nav-locked .site-header {
    background: #17130f; --header-fg: #fff; --header-sub: rgba(255,255,255,0.7);
  }

  /* Menu overlay anchored to the viewport, full height, opaque, above the header */
  .mobile-nav {
    position: fixed; top: var(--header-h); left: 0; right: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));  /* survives the collapsing mobile address bar */
    max-height: none;
    padding: var(--sp-3) 16px calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
    background: var(--bg); border-top: 1px solid var(--border);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;            /* no scroll-chaining to the page behind */
    z-index: 1300;                           /* menu above header (1000) above content */
  }
  /* iOS-safe body scroll lock — JS pins top:-scrollY and restores it on close */
  body.nav-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
  .mobile-nav .m-link, .m-parent { min-height: 48px; }
  .m-top, .m-parent { display: flex; align-items: center; }
  .m-parent { justify-content: space-between; }
  .m-sub .m-link { min-height: 44px; }
  .btn-mobile-cta { min-height: 50px; display: flex; align-items: center; justify-content: center; }
}

@media (max-width: 768px) {
  /* Typography scaled for a phone (clamp keeps it fluid) */
  /* Task 16: shorter headline phrase — higher cap keeps tablet presence */
  .hero-title { font-size: clamp(2.4rem, 11vw, 4.5rem); letter-spacing: 0.01em; }
  h2, .section-title { font-size: clamp(1.9rem, 6.5vw, 2.6rem); letter-spacing: 0.01em; }
  .page-hero-title { font-size: clamp(2rem, 7vw, 2.6rem); letter-spacing: 0.01em; }
  .about-bg-text { font-size: clamp(5rem, 30vw, 10rem); }

  /* Section padding ~half; tight gutters */
  .section { padding: var(--sp-6) 0; }
  .container { padding: 0 16px; }
  .header-inner { padding: 0 16px; }

  /* Multi-column grids -> single column (teacher cards stay 2-up) */
  .discipline-grid, .gallery-grid, .gallery-3, .rental-grid, .philosophy-grid,
  .cta-cards-grid, .link-cards, .updates-list, .footer-top, .newsletter-form { grid-template-columns: 1fr; }
  .people-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { gap: var(--sp-4); }

  /* Buttons: >=44px tap target, trimmed size */
  .btn-primary, .btn-ghost, .btn-red, .btn-header, .btn-outline-sm {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 22px; letter-spacing: 0.1em;
  }
  /* Primary CTAs that sit alone go full width */
  .cta-inline .btn-primary, .cta-inline .btn-red,
  .connect-links .btn-primary, .newsletter-form button { display: flex; width: 100%; }
  .hero-cta-group { width: 100%; }
  .hero-cta-group .btn-primary, .hero-cta-group .btn-ghost { flex: 0 1 auto; }

  /* Reset desktop-tuned crops so subjects aren't cut in the tall mobile frame */
  .page-hero.has-img .page-hero-bg img { object-position: center !important; }
  .discipline-card-img img { object-position: center !important; }

  /* Smaller hero frame inset */
  .hero-frame { padding: var(--sp-4) var(--sp-3); border-width: 3px; }
}

@media (max-width: 640px) {
  .section { padding: var(--sp-5) 0; }

  /* Teacher popup: full screen with its own scroll, close pinned */
  .modal-overlay { padding: 0; }
  .modal {
    max-width: none; width: 100%; height: 100%; max-height: 100%;
    border-radius: 0; border-top: none;
  }
  .modal-scroll {
    padding: calc(var(--sp-5) + env(safe-area-inset-top, 0px)) 16px
             calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
  }
  .pm-cta { text-align: center; }
  .pm-wa { display: flex; width: 100%; }
}

@media (max-width: 480px) {
  /* Drop the hero border frame so it can't squeeze the headline */
  .hero-frame { border: none; padding: var(--sp-3) 0; box-shadow: none; }
  .hero { padding-left: 12px; padding-right: 12px; }
}

/* ═══════════════════════════════════════════════════════════
   TASK 09 — mobile discipline cards (text over image) + light hero
   Scoped to <=1024px. Desktop unchanged.
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* ── PART A — discipline cards: text overlaid on the image ── */
  .discipline-card {
    display: block; position: relative;
    aspect-ratio: 16 / 9;         /* Task 13: compact card, ~193px tall at 375 */
    border: none; overflow: hidden;
  }
  .discipline-card:hover { transform: none; box-shadow: none; }
  .discipline-card-img { position: absolute; inset: 0; aspect-ratio: auto; }
  .discipline-card-img img {
    width: 100%; height: 100%; object-fit: cover; object-position: center; transform: none;
  }
  /* Task 13: no white fade. White text on the photo; every image measured
     with bright patches in the text zone (>2 cards fail 4.5:1 bare), so all
     cards share the same subtle dark scrim for consistency. Scaled to the
     text block, which spans the bottom half of the compact card. */
  .discipline-card::after {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to top,
      rgba(0,0,0,0.62) 0%,
      rgba(0,0,0,0.42) 28%,
      rgba(0,0,0,0.24) 46%,
      rgba(0,0,0,0) 62%);
  }
  .discipline-card-body {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 14px 16px; gap: 4px;
  }
  .discipline-card-body h3 { color: #fff; font-size: 1.1rem; }
  .discipline-card-body p {
    color: rgba(255,255,255,0.88); font-size: var(--text-sm); line-height: 1.5;
    text-align: justify; hyphens: none; -webkit-hyphens: none; overflow-wrap: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .discipline-card .card-link { color: var(--red-bright); }
}
/* PART B (light hero + dark header/text) is now applied site-wide in the base
   rules above — the client confirmed it should also apply at desktop width. */

/* ═══════════════════════════════════════════════════════════
   TASK 14 — compact footer on mobile/tablet (<=1024px).
   Desktop unchanged. Tap targets stay >=44px via padding on
   the links themselves; visual gaps tightened instead.
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Section padding + block gaps roughly halved */
  .footer-top { padding: var(--sp-4) 16px var(--sp-3); gap: var(--sp-3); }

  /* Smaller footer wordmark than desktop */
  .footer-brand .logo-name { font-size: 1.35rem; }
  .footer-brand p { max-width: none; line-height: 1.4; }

  /* Headings sit attached to their own content */
  .footer-nav-group h4 { margin-bottom: 2px; }

  /* Short link lists in two columns; each link is its own 44px target */
  .footer-nav-group { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; align-items: start; }
  .footer-nav-group h4 { grid-column: 1 / -1; }
  .footer-nav-group a { display: flex; align-items: center; min-height: 44px; padding: 0; }

  /* Contact block stays a single column — longer, actionable lines at 16px */
  .footer-nav-group.footer-contact { display: flex; flex-direction: column; }
  .footer-contact a { font-size: 1rem; line-height: 1.4; padding: 0; min-height: 44px; display: flex; align-items: center; }
  .footer-address { margin-top: 0; line-height: 1.4; }

  /* Social links in one horizontal row, padded to 44px */
  .footer-social { margin-top: 0; gap: var(--sp-3); }
  .footer-social a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.875rem; border-bottom: none; box-shadow: inset 0 -1px 0 var(--red); }

  /* Copyright bar: one compact row (wraps only if it must) */
  .footer-bottom {
    padding: 4px 16px calc(4px + env(safe-area-inset-bottom, 0px));
    flex-direction: row; align-items: center; gap: 0 16px;
  }
  .footer-bottom p { font-size: 0.875rem; display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 480px) {
  /* Task 14: the two nav groups sit side by side; brand + contact span the
     full width. Inside the half-width groups the links go back to one column
     (two 44px-link columns can't fit in ~160px), so the nav still uses the
     full width instead of one word per row. */
  .footer-top { grid-template-columns: 1fr 1fr; gap: var(--sp-2) 16px; padding: var(--sp-3) 16px var(--sp-2); }
  .footer-brand, .footer-nav-group.footer-contact { grid-column: 1 / -1; }
  .footer-nav-group { display: flex; flex-direction: column; }
  /* Copyright-bar links are their own 44px targets */
  .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
}