/* ==========================================================================
   MATZZ Tuition — Design Tokens
   ========================================================================== */
:root {
  /* Brand palette — luxury 3-tone system:
     cream (dominant), navy (secondary/structure), gold (accent only) */
  --color-bg: #FCFBF2;              /* warm cream/white, main site background */
  --color-bg-soft: #F2EAD8;         /* deeper cream for section banding */
  --color-surface: #FFFFFF;         /* card / panel surface — crisp white on cream */
  --color-surface-alt: #FFFCF6;

  --color-navy: #16223B;            /* deep luxury navy — headings, nav, footer */
  --color-navy-2: #223655;          /* secondary navy for gradients */
  --color-navy-soft: #E8EAEF;       /* faint navy-tinted neutral for subtle fills */
  --color-navy-tint: #46536E;       /* muted navy for secondary text on dark */

  /* The gold is light, so it only carries on navy (or as a fill behind navy
     text). Anywhere it would sit as a mark on the cream, use -ink instead —
     the gold itself is only ~2:1 against the background there. */
  --color-accent: #D5AD36;          /* gold — fills, and marks on navy */
  --color-accent-deep: #BE9829;     /* deeper gold — hover fills */
  --color-accent-ink: #7A5E1B;      /* antique gold — legible text/icons on cream */
  --color-accent-tint: #F7EDCF;     /* faint gold for badge backgrounds */

  --color-error: #B3483B;           /* muted, functional — form validation only */
  --color-error-tint: #F3E3DF;

  --color-ink: #1E2534;             /* primary body text — near-navy for cohesion */
  --color-muted: #6B7280;           /* secondary/muted text */
  --color-border: #E6DFCC;          /* hairline borders on cream surfaces */
  --color-border-soft: #EFE9D9;
  --color-band: #EBE3D0;            /* hairline separating page sections */

  --color-focus-ring: #16223B;

  /* Typography */
  --font-heading: 'Fraunces', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-4xl: 3.75rem;

  /* Spacing scale (8px rhythm) */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;
  --space-9: 8rem;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(30, 42, 69, 0.06);
  --shadow-md: 0 12px 32px rgba(30, 42, 69, 0.10);
  --shadow-lg: 0 24px 60px rgba(30, 42, 69, 0.16);

  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  /* Hover and state changes arrive slower than they leave, so the page
     answers quickly when you move on. */
  --dur-enter: 420ms;
  --dur-exit: 240ms;
  --dur-ink: 1100ms;
  --container-w: 1180px;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

html, body { overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
svg { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--color-navy); margin: 0; line-height: 1.2; }
p { margin: 0; }

.clickable, a, button, [role="button"] { cursor: pointer; }

/* Focus states — visible everywhere, meets WCAG */
:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 3px;
  border-radius: 4px;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-navy);
  color: #fff;
  padding: var(--space-2) var(--space-4);
  z-index: 1000;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.section {
  position: relative;
  padding-block: var(--space-8);
}
/* Section divider: a short inset hairline that feathers out at both ends,
   with a second, slightly thicker segment stacked over its middle so the
   band swells at the centre and tapers away — a jewel rather than a rule.
   It sits at the top of every section and doubles as the previous one's
   closing band; adding one at the bottom too would stack into a double
   line between adjacent sections.
   Both layers are centred on the same axis, so their weights blend. */
.section::before,
.section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-pill);
}
/* The long, fine taper */
.section::before {
  width: min(460px, 52%);
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--color-band) 28%,
    var(--color-band) 72%,
    transparent
  );
}
/* The swell at the centre */
.section::after {
  width: min(150px, 18%);
  height: 2px;
  background: linear-gradient(to right, transparent, var(--color-band), transparent);
}
.section--tight { padding-block: var(--space-7); }
.section--alt { background: var(--color-bg-soft); }

.section-head {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: var(--space-6);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
  background: var(--color-accent-tint);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-3);
}

.section-title {
  font-size: var(--fs-2xl);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.section-sub {
  color: var(--color-muted);
  font-size: var(--fs-md);
}

@media (min-width: 768px) {
  .section-title { font-size: var(--fs-3xl); }
}

/* Honeypot wrapper. Moved off-screen rather than display:none, since some
   bots skip fields that are explicitly hidden. */
.form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-sm);
  padding: 0.95rem 1.75rem;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  transition: transform 220ms var(--ease-standard), box-shadow 220ms var(--ease-standard), background-color 220ms var(--ease-standard), color 220ms var(--ease-standard), border-color 220ms var(--ease-standard);
  min-height: 44px;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); }

.btn--primary {
  background: var(--color-accent);
  color: var(--color-navy);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--color-accent-deep); box-shadow: var(--shadow-md); }

.btn--outline {
  background: transparent;
  color: var(--color-navy);
  border-color: var(--color-navy);
}
.btn--outline:hover { background: var(--color-navy); color: #fff; }

.btn--light {
  background: var(--color-surface);
  color: var(--color-navy);
  border-color: var(--color-border);
}
.btn--light:hover { background: var(--color-navy); color: #fff; border-color: var(--color-navy); }

.btn--block { width: 100%; }
.btn--sm { padding: 0.7rem 1.3rem; font-size: var(--fs-xs); }

.icon {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
}

/* ==========================================================================
   Header / Navigation
   ========================================================================== */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 500;
  background: rgba(248, 241, 227, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 250ms ease, box-shadow 250ms ease, background-color 250ms ease;
}
.site-header.is-scrolled {
  border-color: var(--color-border);
  box-shadow: 0 4px 20px rgba(30,42,69,0.06);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-2);
  gap: var(--space-4);
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
}
.logo-img {
  height: 76px;
  width: auto;
  display: block;
}
@media (min-width: 640px) {
  .logo-img { height: 96px; }
}
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-text strong {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-navy);
  letter-spacing: 0.01em;
}
.logo-text span {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--color-muted);
  margin-top: 3px;
}

.nav-links {
  display: none;
  align-items: center;
  gap: var(--space-5);
}
.nav-links a {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-navy);
  position: relative;
  padding-block: 4px;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--color-accent-ink);
  transition: width 220ms var(--ease-standard);
}
.nav-links a:hover::after,
.nav-links a.is-active::after { width: 100%; }
.nav-links a.is-active { color: var(--color-accent-ink); }

.nav-actions { display: flex; align-items: center; gap: var(--space-3); }
.nav-cta { display: none; }
.nav-book { display: none; } /* phones only, see the mobile block */

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: transparent;
  border: none;
  color: var(--color-navy);
}
/* The open button says "Menu" so it reads at a glance; the close button
   inside the menu stays icon-only. The visible word is also its name for
   screen readers, which announce it with its expanded state. */
.nav-toggle--labelled {
  width: auto;
  gap: 0.5rem;
  padding-inline: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
}

@media (min-width: 1024px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .nav-toggle { display: none; }
}

/* Mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  z-index: 600;
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  /* Short screens (and browser toolbars) can leave less room than the menu
     needs, so it scrolls rather than pushing the booking button off-screen. */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
  transform: translateX(100%);
  transition: transform 320ms var(--ease-standard);
  visibility: hidden;
}
.mobile-menu.is-open { transform: translateX(0); visibility: visible; }
.mobile-menu-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-6);
}
.mobile-menu-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.mobile-menu-links a {
  font-family: var(--font-body);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--color-navy);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.mobile-menu-cta { margin-top: auto; padding-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.mobile-menu-contact { color: var(--color-muted); font-size: var(--fs-sm); }
.mobile-menu-contact a { color: var(--color-navy); font-weight: 600; }

@media (min-width: 1024px) {
  .mobile-menu, .nav-toggle { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  padding-top: calc(150px + var(--space-7));
  padding-bottom: var(--space-8);
  overflow: hidden;
}

.hero-bg-video,
.hero-bg-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}
/* The poster stays underneath the video as a safety net. If the browser ever
   stops drawing the video layer (it happened after switching device modes),
   the same frame still shows instead of a bare cream panel. The overlay comes
   later in the DOM at the same z-index, so it still sits above the video. */
.hero-bg-video { z-index: 1; }

.hero-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--color-bg);
  opacity: 0.74;
  pointer-events: none;
}

/* Reduced motion: skip the scroll-scrubbed video entirely, show a static frame */
@media (prefers-reduced-motion: reduce) {
  .hero-bg-video { display: none; }
  .hero-bg-fallback { display: block; }
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.hero-copy .eyebrow { background: var(--color-surface); box-shadow: var(--shadow-sm); }

.hero-title {
  font-size: var(--fs-3xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-3);
}
/* Rotating headline word. All three sit stacked in one slot: the active word
   rests at 0, the one leaving travels up and out, and the rest wait below. */
.word-rotate { display: block; }
.word-rotate-track {
  display: block;
  position: relative;
  /* Room for the underline before the clip bites. */
  padding-bottom: 12px;
  /* Clips the words travelling in and out of the slot. */
  overflow: hidden;
}
.word-rotate-sizer { visibility: hidden; }
.word-rotate-word {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-accent-ink);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(120%);
  /* Slight overshoot, standing in for the spring in the original. */
  transition: transform 700ms cubic-bezier(0.34, 1.4, 0.64, 1),
              opacity 500ms var(--ease-standard);
}
.word-rotate-word.is-active { opacity: 1; transform: translateY(0); }
.word-rotate-word.is-out { transform: translateY(-120%); }
/* Set while a spent word is moved back below the slot, so the reset itself
   never animates across the headline. */
.word-rotate-word.is-parking { transition: none; }
/* Sized to its own word, so the underline retracts and extends with it. The
   old phrase had to hide this below 480px to avoid overflowing; one short
   word can't, so it now survives on phones too. */
.word-rotate-word svg {
  display: block;
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 100%;
  height: 10px;
  color: var(--color-accent-ink);
}

@media (prefers-reduced-motion: reduce) {
  .word-rotate-word { transition: none; transform: none; }
  .word-rotate-word.is-out { transform: none; }
}

.hero-desc {
  font-size: var(--fs-md);
  color: var(--color-muted);
  max-width: 46ch;
  margin-bottom: var(--space-5);
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.trust-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-navy);
}
.trust-chip .icon { color: var(--color-accent-ink); }

.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-card {
  position: relative;
  z-index: 1;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5);
  width: 100%;
  max-width: 420px;
  border: 1px solid var(--color-border-soft);
}
.hero-card-title {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-navy);
  margin-bottom: var(--space-3);
}
.hero-card-text {
  color: var(--color-muted);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-4);
}

.hero-founders {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-border);
}
.hero-founders-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-navy);
}
.hero-avatar-stack { display: flex; flex-shrink: 0; }
.hero-avatar-stack span {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 700; font-size: 0.8rem;
  color: #fff; border: 3px solid var(--color-surface);
  margin-left: -12px;
}
.hero-avatar-stack span:first-child { margin-left: 0; }

.hero-badge-float {
  position: absolute;
  /* Above the card — without this, the top badge loses to the card on DOM
     order alone, since both are positioned and neither would be stacked. */
  z-index: 2;
  background: var(--color-navy);
  color: #fff;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-sm);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: var(--shadow-md);
}
.hero-badge-float .icon { color: var(--color-accent); }
/* Anchored to the card, so they hang off its corners at any column width. */
.hero-badge-float--top { top: -20px; left: -20px; }
.hero-badge-float--bottom { bottom: -20px; right: -20px; }

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; }
  .hero-title { font-size: var(--fs-4xl); }
}

/* ==========================================================================
   Stats band
   ========================================================================== */
.stats-band {
  background: var(--color-navy);
  padding-block: var(--space-6);
  position: relative;
  overflow: hidden;
}
.stats-lede {
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: var(--space-3);
}

/* University names are set as text, never as logos — the institutions
   don't license their marks to third parties, and a logo row would imply
   an endorsement none of them give. */
.uni-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-5);
}
.uni-list li {
  position: relative;
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--color-accent);
  white-space: nowrap;
}
/* Separator dots, drawn between items rather than after the last one. */
.uni-list li + li::before {
  content: "";
  position: absolute;
  left: calc(var(--space-4) / -2);
  top: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  text-align: center;
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255,255,255,0.12);
}
.stat-item strong {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  color: #fff;
  font-weight: 700;
}
.stat-item span {
  color: rgba(255,255,255,0.7);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.stats-disclaimer {
  margin-top: var(--space-4);
  text-align: center;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.45);
}
@media (min-width: 640px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
  .uni-list li { font-size: var(--fs-xl); }
}

/* ==========================================================================
   Subjects / levels
   ========================================================================== */
.level-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .level-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .level-grid { grid-template-columns: repeat(4, 1fr); } }

.level-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  position: relative;
  overflow: hidden;
  transition: transform 260ms var(--ease-standard), box-shadow 260ms var(--ease-standard);
}
.level-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 6px;
  background: var(--bar-color, var(--color-accent));
}
.level-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--icon-bg, var(--color-accent-tint));
  color: var(--icon-color, var(--color-accent-ink));
  margin-bottom: var(--space-3);
}
.level-card h3 { font-size: var(--fs-md); margin-bottom: var(--space-1); }
.level-card p { color: var(--color-muted); font-size: var(--fs-sm); margin-bottom: var(--space-3); }
.level-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.level-tags span {
  font-size: 0.75rem; font-weight: 600;
  padding: 0.3rem 0.7rem;
  background: var(--color-bg);
  border-radius: var(--radius-pill);
  color: var(--color-navy);
}

/* ==========================================================================
   How it works — steps
   ========================================================================== */
.steps {
  position: relative;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  counter-reset: step;
}
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); } }

.step-item {
  position: relative;
  text-align: center;
  padding: var(--space-4);
}
.step-number {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--color-navy);
  color: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-md);
  margin: 0 auto var(--space-3);
  position: relative;
  z-index: 2;
}
/* A gold ring around each number, drawn in step order (see "Ink"). A hairline
   in the light gold all but vanished against the cream, so the ring is a
   heavier stroke in the deeper gold, with a little space around the number. */
.step-number::after {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 3px solid var(--color-accent-deep);
  -webkit-mask: conic-gradient(#000 var(--ring, 360deg), transparent 0);
          mask: conic-gradient(#000 var(--ring, 360deg), transparent 0);
}
.step-item h3 { font-size: var(--fs-md); margin-bottom: var(--space-1); }
.step-item p { color: var(--color-muted); font-size: var(--fs-sm); }

/* ==========================================================================
   Feature grid (why choose us)
   ========================================================================== */
.feature-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }

.feature-card {
  /* Icon in its own column, heading above the text beside it. As a flex row
     the heading and paragraph sat side by side and the heading got ~80px. */
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: var(--space-3);
  align-items: start;
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-soft);
}
.feature-icon {
  grid-row: span 2;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: var(--color-accent-tint);
  color: var(--color-accent-ink);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.feature-card h3 { font-size: var(--fs-md); margin-bottom: 0.35rem; }
.feature-card p { color: var(--color-muted); font-size: var(--fs-sm); }

/* ==========================================================================
   Tutors
   ========================================================================== */
/* The navy tile each portrait sits on. */
.tutor-tile {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* The portraits are drawn as circles, so they sit on the tile as a round
   medallion rather than being cropped square: graduation caps stay whole, and
   the slightly different pinks between illustrations never sit edge to edge
   in the carousel. A fine gold edge separates the pink from the navy. */
.tutor-portrait {
  width: 84%;
  height: 84%;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 3px rgba(213, 173, 54, 0.5), 0 14px 34px rgba(8, 14, 28, 0.35);
}
.tutor-role { color: var(--color-accent-ink); font-weight: 600; font-size: var(--fs-xs); margin-bottom: var(--space-2); text-transform: uppercase; letter-spacing: 0.04em; }
.tutor-meta { display: flex; gap: var(--space-3); font-size: var(--fs-xs); color: var(--color-navy); font-weight: 600; }
.tutor-meta span { display: flex; align-items: center; gap: 0.3rem; }
.tutor-meta .icon { color: var(--color-accent-ink); width: 1em; height: 1em; }

/* ==========================================================================
   Coverflow carousel — 3D perspective ring. JS owns each card's
   transform/opacity/z-index; CSS only sets the stage and chrome.
   ========================================================================== */
.coverflow {
  --cf-card: clamp(210px, 46vw, 300px);
  position: relative;
}

.coverflow-viewport {
  overflow: hidden;
  /* Vertical padding keeps card shadows clear of the overflow clip. */
  padding-block: var(--space-5);
  perspective: calc(var(--cf-card) * 3);
  cursor: grab;
  outline: none;
  /* Horizontal drag is ours; the page keeps vertical scrolling. */
  touch-action: pan-y;
}
.coverflow-viewport:active { cursor: grabbing; }
.coverflow-viewport:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}

.coverflow-stage {
  position: relative;
  /* Cards are square, so the stage is exactly one card tall. */
  height: var(--cf-card);
  transform-style: preserve-3d;
  user-select: none;
  -webkit-user-select: none;
}

.coverflow-card {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--cf-card);
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  will-change: transform, opacity;
  /* Pre-JS position, so the first card is centred before the first paint. */
  transform: translateX(-50%);
}
.coverflow-card img,
.coverflow-card .tutor-tile { -webkit-user-drag: none; }

/* Caption block. Every tutor is in the DOM; the inactive ones are taken out
   of flow so they stack in place, and the active one defines the height. */
.coverflow-captions {
  position: relative;
  max-width: 460px;
  margin: var(--space-4) auto 0;
  min-height: 190px;
  text-align: center;
}
.coverflow-caption {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 320ms var(--ease-standard), transform 320ms var(--ease-standard);
  pointer-events: none;
}
.coverflow-caption.is-active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.coverflow-caption h3 {
  font-size: var(--fs-lg);
  margin-bottom: var(--space-2);
}
.coverflow-caption-bio {
  color: var(--color-muted);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-3);
}
.coverflow-caption .tutor-meta { justify-content: center; }

.coverflow-arrow {
  position: absolute;
  top: calc(var(--cf-card) / 2 + var(--space-5));
  z-index: 200;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: background-color 200ms ease, color 200ms ease;
}
.coverflow-arrow:hover { background: var(--color-navy); color: #fff; }
.coverflow-arrow--prev { left: 0; }
.coverflow-arrow--next { right: 0; }

.coverflow-dots {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  margin-top: var(--space-4);
}
.coverflow-dots button {
  /* 24x24 hit area around a small visual dot (WCAG 2.2 target size). */
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  padding: 0;
}
.coverflow-dots button::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  transition: width 260ms var(--ease-standard), background-color 200ms ease;
}
.coverflow-dots button[aria-current="true"]::before {
  background: var(--color-accent-ink);
  width: 26px;
}

/* ==========================================================================
   Our story — a quieter editorial block, deliberately not another card grid.
   ========================================================================== */
.story {
  max-width: 660px;
  margin-inline: auto;
  text-align: center;
}
.story .section-title { margin-bottom: var(--space-5); }
.story p {
  color: var(--color-muted);
  margin-bottom: var(--space-4);
  text-align: left;
}
.story-lead {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  line-height: 1.45;
  color: var(--color-navy) !important;
  text-align: center !important;
  margin-bottom: var(--space-5) !important;
}
.story-signoff {
  font-family: var(--font-heading);
  font-style: italic;
  /* Fluid, because the line only lands if all five names stay on one row —
     at 18px it overruns a 375px screen by 3px and drops the final Z. */
  font-size: clamp(1rem, 4.4vw, var(--fs-md));
  color: var(--color-navy) !important;
  text-align: center !important;
  margin-top: var(--space-5);
  margin-bottom: 0 !important;
}
/* The five initials spell MATZZ — the signature is the only place the name is
   explained, so they take the gold and drop the italic to stand out of it. */
.story-initial {
  color: var(--color-accent-ink);
  font-weight: 700;
  font-style: normal;
}

/* ==========================================================================
   Privacy notice (privacy.html)
   The reset strips link styling and list markers site-wide, so a long-form
   document has to put both back or links vanish into the text.
   ========================================================================== */
.form-helper a,
.legal-doc a {
  color: var(--color-accent-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.form-helper a:hover,
.legal-doc a:hover { color: var(--color-navy); }

.legal {
  /* Same allowance the hero makes for the fixed header. */
  padding-top: calc(150px + var(--space-5));
  padding-bottom: var(--space-8);
}
.legal-doc { max-width: 720px; margin-inline: auto; }
.legal-doc p,
.legal-doc li { line-height: 1.7; }
.legal-doc p { margin-bottom: var(--space-3); }

.legal-head { margin-bottom: var(--space-5); }
.legal-head .section-title { margin-top: var(--space-3); }
.legal-updated { color: var(--color-muted); font-size: var(--fs-sm); margin-top: var(--space-2); }

.legal-summary {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
}
.legal-summary h2 { font-size: var(--fs-md); margin-bottom: var(--space-2); }
.legal-summary ul { margin-bottom: 0; }

.legal-toc {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.legal-toc ol {
  list-style: decimal;
  padding-left: 1.4em;
  columns: 2 220px;
  column-gap: var(--space-5);
}
.legal-toc li { padding-block: 0.2rem; break-inside: avoid; }
.legal-toc li::marker { color: var(--color-accent-ink); }

.legal-doc section {
  margin-top: var(--space-6);
  /* Anchor jumps from the contents list would otherwise land the heading
     underneath the fixed header. */
  scroll-margin-top: 150px;
}
.legal-doc h2 { font-size: var(--fs-lg); margin-bottom: var(--space-3); }
.legal-doc h3 { font-size: var(--fs-md); margin: var(--space-4) 0 var(--space-2); }
.legal-doc section ul,
.legal-summary ul {
  list-style: disc;
  padding-left: 1.25em;
  margin-bottom: var(--space-3);
}
.legal-doc section li,
.legal-summary li { margin-bottom: 0.35rem; }
.legal-doc section li::marker,
.legal-summary li::marker { color: var(--color-accent-ink); }

.legal-table-wrap { overflow-x: auto; margin-bottom: var(--space-3); }
.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  background: var(--color-surface);
}
.legal-table th,
.legal-table td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
}
.legal-table th { background: var(--color-bg-soft); color: var(--color-navy); font-weight: 600; }

.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-navy);
}
.legal-back .icon { width: 1.1em; height: 1.1em; }
.legal-back:hover { color: var(--color-accent-ink); }

.site-footer--compact { padding-top: 0; }
.legal-footer-links { display: flex; gap: var(--space-4); }
.legal-footer-links a:hover { color: #fff; }

/* ==========================================================================
   Pricing
   ========================================================================== */
.price-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  position: relative;
}
/* Level pricing. The colour bar repeats the one on the matching card in
   #subjects, so the two sections read as the same four things. */
.price-card--level { overflow: hidden; }
.price-card--level::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 6px;
  background: var(--bar-color, var(--color-accent));
}
/* Pushes the price to the bottom, so the four amounts line up across the row
   however long the descriptions run. */
.price-card--level .price-amount { margin-top: auto; margin-bottom: 0; }

.price-name { font-family: var(--font-heading); font-size: var(--fs-md); font-weight: 600; margin-bottom: 0.3rem; }
.price-card-desc { color: var(--color-muted); font-size: var(--fs-sm); margin-bottom: var(--space-4); }
.price-amount { display: flex; align-items: baseline; gap: 0.3rem; margin-bottom: var(--space-4); }
.price-amount strong { font-family: var(--font-heading); font-size: var(--fs-3xl); font-weight: 700; }
.price-amount span { color: var(--color-muted); font-size: var(--fs-sm); }

/* What every rate includes — one shared list rather than the same ticks
   repeated inside all four cards. */
.price-included {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
  max-width: 900px;
  margin: var(--space-5) auto 0;
}
.price-included li {
  display: flex; align-items: flex-start; gap: 0.6rem;
  font-size: var(--fs-sm); color: var(--color-navy);
}
.price-included .icon {
  color: var(--color-accent-ink);
  width: 1.15em; height: 1.15em;
  margin-top: 0.15em; flex-shrink: 0;
}
.price-note {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--color-muted);
  margin-top: var(--space-3);
}
.price-cta { display: flex; justify-content: center; margin-top: var(--space-5); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list {
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--dur-exit) var(--ease-standard), box-shadow var(--dur-exit) var(--ease-standard);
}
.faq-item[data-open="true"] {
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
  transition-duration: var(--dur-enter);
}
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  background: transparent;
  border: none;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--color-navy);
}
.faq-question .icon { color: var(--color-accent-ink); transition: transform 260ms var(--ease-standard); flex-shrink: 0; }
.faq-item[data-open="true"] .faq-question .icon { transform: rotate(180deg); }
.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 320ms var(--ease-standard);
}
.faq-answer-inner {
  padding: 0 var(--space-4) var(--space-4);
  color: var(--color-muted);
  font-size: var(--fs-sm);
  /* The answer settles in just after the panel opens, and leaves at once. */
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 160ms var(--ease-standard), transform 160ms var(--ease-standard);
}
.faq-item[data-open="true"] .faq-answer-inner {
  opacity: 1;
  transform: none;
  transition-duration: var(--dur-enter);
  transition-delay: 80ms;
}

/* ==========================================================================
   Contact / CTA
   ========================================================================== */
.contact-section {
  background: var(--color-navy);
  color: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
}
/* Grid items default to min-width: auto, so the longest dropdown option
   ("11+ Verbal & Non-Verbal Reasoning") set a floor under the whole column
   and pushed the card 67px past a phone's edge, where overflow: hidden
   clipped it. Letting the columns shrink is what fixes the cropped side. */
.contact-section > * { min-width: 0; }
@media (min-width: 900px) { .contact-section { grid-template-columns: 0.85fr 1.15fr; } }

.contact-info {
  padding: var(--space-6);
  position: relative;
  overflow: hidden;
}
.contact-info h2 { color: #fff; font-size: var(--fs-2xl); margin-bottom: var(--space-3); }
.contact-info p { color: rgba(255,255,255,0.75); margin-bottom: var(--space-5); font-size: var(--fs-md); }
.contact-detail-list { display: flex; flex-direction: column; gap: var(--space-3); }
.contact-detail {
  display: flex; align-items: center; gap: var(--space-2);
  font-weight: 500;
}
.contact-detail .icon-wrap {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(213,173,54,0.16);
  color: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.contact-form-wrap { background: var(--color-surface); padding: var(--space-6); }
.contact-form-wrap h3 { font-size: var(--fs-lg); margin-bottom: var(--space-4); }

.form-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.form-field { display: flex; flex-direction: column; gap: 0.4rem; }
.form-field--full { grid-column: 1 / -1; }
.form-field label { font-size: var(--fs-xs); font-weight: 600; color: var(--color-navy); transition: color var(--dur-exit) var(--ease-standard); }
.form-field:focus-within label { color: var(--color-accent-ink); transition-duration: var(--dur-enter); }
.form-field label .req { color: var(--color-error); margin-left: 2px; }
.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-ink);
  min-height: 44px;
  width: 100%;
  min-width: 0;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.form-field textarea { min-height: 110px; resize: vertical; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--color-navy);
  outline: none;
  box-shadow: 0 0 0 4px rgba(213, 173, 54, 0.24);
}
.form-field input[aria-invalid="true"],
.form-field select[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
  border-color: var(--color-error);
}
.form-error {
  font-size: 0.78rem;
  color: var(--color-error);
  min-height: 1em;
  display: none;
}
.form-error.is-visible { display: block; }
.form-helper { font-size: var(--fs-xs); color: var(--color-muted); margin-top: var(--space-3); }

.form-status {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  display: none;
  align-items: center;
  gap: 0.6rem;
}
.form-status.is-visible { display: flex; }
.form-status--success { background: var(--color-accent-tint); color: var(--color-navy); }
.form-status--error { background: var(--color-error-tint); color: var(--color-error); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--color-navy);
  color: rgba(255,255,255,0.72);
  padding-top: var(--space-8);
}
.footer-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  padding-bottom: var(--space-6);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

.footer-brand p { margin-top: var(--space-3); font-size: var(--fs-sm); max-width: 32ch; }
.footer-social { display: flex; gap: 0.6rem; margin-top: var(--space-4); }
.footer-social a {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  transition: background-color 200ms ease;
}
.footer-social a:hover { background: var(--color-accent); color: var(--color-navy); }

.footer-col h4 { font-family: var(--font-body); color: #fff; font-size: var(--fs-sm); margin-bottom: var(--space-3); letter-spacing: 0.03em; }
.footer-col ul { display: flex; flex-direction: column; gap: 0.65rem; }
.footer-col a {
  font-size: var(--fs-sm);
  padding-bottom: 2px;
  /* An underline drawn in from the left on hover, like the nav links. */
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: color 200ms ease, background-size var(--dur-exit) var(--ease-standard);
}
.footer-col a:hover { color: #fff; background-size: 100% 1px; transition-duration: 200ms, var(--dur-enter); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-4);
  font-size: var(--fs-xs);
}
.footer-safeguard { display: flex; align-items: center; gap: 0.4rem; color: rgba(255,255,255,0.6); }
.footer-safeguard .icon { color: var(--color-accent); width: 1.1em; height: 1.1em; }

/* ==========================================================================
   Reveal / motion utility classes (JS toggles these via GSAP or fallback)
   ========================================================================== */
[data-reveal] { opacity: 1; }
.js-enabled [data-reveal] { opacity: 0; }
.reduced-motion [data-reveal] { opacity: 1 !important; transform: none !important; }

/* ==========================================================================
   Micro-interactions
   One motif, spent quietly: the hero's pen, carried down the page as a few
   "ink" moments. The step rings and pricing ticks redraw each time they come
   back into view; the dividers and initials draw once. Everything else is
   restraint: small travel, soft shadows, and states that arrive slower than
   they leave.
   ========================================================================== */

/* Headings break into even lines rather than leaving one word behind. */
.section-title,
.level-card h3,
.step-item h3,
.feature-card h3 { text-wrap: balance; }

/* --- Ink. Undrawn states exist only once main.js has armed the observer
       (html.ink-ready), so without JS or with reduced motion it all shows
       finished. ------------------------------------------------------------ */

/* Rings and ticks replay: once they are fully off screen, main.js snaps them
   back to undrawn under .ink-reset. Transitions are off for that moment, so
   the reset itself never animates. */
.steps.ink-reset .step-number::after,
.price-included.ink-reset .icon path { transition: none !important; }

/* Arming (main.js) swaps everything to undrawn as the page loads. Transitions
   are off for that moment too; otherwise the rings, ticks, dividers and
   initials all visibly un-draw for a couple of seconds after load. */
.ink-arming .section::before,
.ink-arming .section::after,
.ink-arming .price-included .icon path,
.ink-arming .step-number::after,
.ink-arming .story-initial { transition: none !important; }
@property --ring {
  syntax: "<angle>";
  inherits: false;
  initial-value: 360deg;
}

/* Section dividers draw outward from the centre; the swell follows. */
.ink-ready .section::before,
.ink-ready .section::after {
  transform: translate(-50%, -50%) scaleX(0);
  transition: transform var(--dur-ink) var(--ease-standard);
}
.ink-ready .section::after { transition-delay: 200ms; }
.ink-ready .section.is-inked::before,
.ink-ready .section.is-inked::after { transform: translate(-50%, -50%) scaleX(1); }

/* The pricing ticks are marked one after another, like work being marked. */
.ink-ready .price-included .icon path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  /* Slowed in step with the step rings, so the two ink moments share a pace. */
  transition: stroke-dashoffset 760ms var(--ease-standard) 250ms;
}
.ink-ready .price-included li:nth-child(2) .icon path { transition-delay: 470ms; }
.ink-ready .price-included li:nth-child(3) .icon path { transition-delay: 690ms; }
.ink-ready .price-included li:nth-child(4) .icon path { transition-delay: 910ms; }
.ink-ready .price-included.is-inked .icon path { stroke-dashoffset: 0; }

/* Each step's ring is drawn in order: 1, 2, 3, 4. */
.ink-ready .step-number::after {
  --ring: 0deg;
  /* Slower than the other ink moments on purpose: the ring is the thing the
     eye follows here, so it gets time to be seen being drawn. */
  transition: --ring 1300ms var(--ease-standard) 150ms;
}
.ink-ready .step-item:nth-child(2) .step-number::after { transition-delay: 430ms; }
.ink-ready .step-item:nth-child(3) .step-number::after { transition-delay: 710ms; }
.ink-ready .step-item:nth-child(4) .step-number::after { transition-delay: 990ms; }
.ink-ready .steps.is-inked .step-number::after { --ring: 360deg; }

/* The founders' initials ink from navy to gold, spelling out the name. */
.ink-ready .story-signoff .story-initial {
  color: var(--color-navy);
  transition: color 600ms var(--ease-standard);
}
.ink-ready .story-signoff .story-initial:nth-of-type(2) { transition-delay: 120ms; }
.ink-ready .story-signoff .story-initial:nth-of-type(3) { transition-delay: 240ms; }
.ink-ready .story-signoff .story-initial:nth-of-type(4) { transition-delay: 360ms; }
.ink-ready .story-signoff .story-initial:nth-of-type(5) { transition-delay: 480ms; }
.ink-ready .story-signoff.is-inked .story-initial { color: var(--color-accent-ink); }

/* --- Hover. Fine pointers only, so nothing sticks on after a tap. ------- */
.level-card,
.price-card--level {
  transition: transform var(--dur-exit) var(--ease-standard),
              box-shadow var(--dur-exit) var(--ease-standard),
              border-color var(--dur-exit) var(--ease-standard);
}
.feature-icon {
  transition: background-color var(--dur-exit) var(--ease-standard),
              color var(--dur-exit) var(--ease-standard);
}
.btn .icon,
.faq-question,
.contact-detail a { transition: transform var(--dur-exit) var(--ease-standard), color var(--dur-exit) var(--ease-standard); }

@media (hover: hover) and (pointer: fine) {
  .level-card:hover,
  .price-card--level:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-border);
    transition-duration: var(--dur-enter);
  }
  /* Feature cards aren't clickable, so they don't lift; the icon answers. */
  .feature-card:hover .feature-icon {
    background: var(--color-accent);
    color: var(--color-navy);
    transition-duration: var(--dur-enter);
  }
  .btn:hover .icon { transform: translateX(3px); transition-duration: var(--dur-enter); }
  .faq-question:hover { color: var(--color-accent-ink); }
  .contact-detail a:hover { color: var(--color-accent); }
}

/* Touch screens have no hover, so the feature icons light up as they cross
   the middle of the screen instead (main.js adds .is-lit for ~1.4s), then
   fade back more slowly than they came on, like a glow dimming. */
@media (hover: none) {
  .feature-icon { transition-duration: 700ms; }
  .feature-card.is-lit .feature-icon {
    background: var(--color-accent);
    color: var(--color-navy);
    transition-duration: var(--dur-enter);
  }
}

/* Contact: handle on the first line, platforms beneath, so the wrap is
   deliberate rather than leaving "Facebook" on its own. */
.contact-social { display: flex; flex-direction: column; line-height: 1.35; }
.contact-platforms { font-size: var(--fs-xs); font-weight: 500; color: rgba(255, 255, 255, 0.62); }

/* Utility */
.flex-center { display: flex; align-items: center; justify-content: center; }
.mt-0 { margin-top: 0; }

/* ==========================================================================
   Mobile (under 640px): a dedicated pass, not the desktop layout stacked.
   Three moves: tighten the vertical rhythm, re-lay out the long card grids
   into forms that suit a phone (a swipe row, compact rows, a price list),
   and hide the few things that only repeat what is already on screen.
   ========================================================================== */
@media (max-width: 639.98px) {

  /* --- Rhythm. Section spacing roughly halved: a phone scrolls, it does
         not need desktop's air between every block. -------------------- */
  .section { padding-block: var(--space-6); }
  .section-head { margin-bottom: var(--space-5); }
  .section-title { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  .section-sub { font-size: var(--fs-base); }

  /* --- Header. A slimmer logo once you start scrolling, so the fixed bar
         hands about 20px back to every screen. ------------------------- */
  .logo-img { transition: height var(--dur-exit) var(--ease-standard); }
  .site-header.is-scrolled .logo-img { height: 56px; }

  /* A compact Book button that waits for the logo to shrink, then eases in
     beside Menu. It sits outside the flow, so at the top of the page it
     takes no room from the full-size logo, and while hidden it can't be
     tapped or tabbed to. */
  .nav-actions { position: relative; }
  .nav-book {
    display: inline-flex;
    position: absolute;
    right: calc(100% + 0.25rem);
    top: 0; bottom: 0;
    margin-block: auto;
    height: 34px;
    min-height: 34px;
    padding: 0 0.75rem;
    font-size: 0.75rem;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.92);
    transition: opacity var(--dur-exit) var(--ease-standard),
                transform var(--dur-exit) var(--ease-standard),
                visibility 0s linear var(--dur-exit);
  }
  .site-header.is-scrolled .nav-book {
    opacity: 1;
    visibility: visible;
    transform: none;
    /* Starts once the logo is mostly shrunk, so the two never overlap. */
    transition: opacity var(--dur-enter) var(--ease-standard) 140ms,
                transform var(--dur-enter) var(--ease-standard) 140ms,
                visibility 0s;
  }
  /* The narrowest phones have no gap to spare beside the shrunk logo. */
  @media (max-width: 359.98px) {
    .nav-book { display: none; }
  }
  /* Up to 375px it tucks in against Menu, whose own padding keeps a gap,
     so the logo gets the breathing room instead. */
  @media (max-width: 374.98px) {
    .nav-book { right: 100%; }
  }

  /* --- Menu. The logo matches the scrolled header and the links drop a
         size, so everything down to the booking button fits on one screen,
         even with the browser's toolbars showing. ------------------------ */
  .mobile-menu { padding-top: var(--space-3); }
  .mobile-menu .logo-img { height: 56px; }
  .mobile-menu-top { margin-bottom: var(--space-4); }
  .mobile-menu-links { gap: 0; }
  .mobile-menu-links a { font-size: var(--fs-lg); line-height: 1.3; padding-block: 0.8rem; }
  .mobile-menu-cta { padding-top: var(--space-4); gap: var(--space-2); }

  /* --- Hero ------------------------------------------------------------- */
  .hero {
    padding-top: calc(101px + var(--space-5)); /* the 101px header, plus air */
    padding-bottom: var(--space-6);
  }
  .hero-grid { gap: var(--space-5); }
  .hero-title { font-size: clamp(2.25rem, 9.6vw, 3rem); }
  .hero-desc { font-size: var(--fs-base); margin-bottom: var(--space-4); }
  /* One full-width action. "View Subjects" only scrolls to what the reader
     is about to scroll to anyway. */
  .hero-cta-row { margin-bottom: var(--space-4); }
  .hero-cta-row .btn--primary { width: 100%; }
  .hero-cta-row .btn--outline { display: none; }
  .hero-trust { gap: var(--space-2) var(--space-3); }
  /* The card keeps its headline; the floating badges repeat the card's own
     text and hang off the edge of a narrow screen. */
  .hero-card { padding: var(--space-4); }
  .hero-card-title { font-size: var(--fs-md); }
  .hero-badge-float { display: none; }

  /* --- Stats. Label and value on one row, instead of three stacked
         blocks. ---------------------------------------------------------- */
  .stats-band { padding-block: var(--space-5); }
  /* Four university names can't share a line at this width, and wrapping
     strands a separator dot at the start of the second line. Two tidy rows
     of two instead, without the dots. */
  .uni-list {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    column-gap: var(--space-5);
  }
  .uni-list li { text-align: center; }
  .uni-list li + li::before { display: none; }
  .uni-list { margin-bottom: var(--space-4); }
  .stats-grid { gap: 0; padding-top: var(--space-2); text-align: left; }
  .stat-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block: 0.7rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .stat-item:last-child { border-bottom: 0; }
  .stat-item strong { font-size: var(--fs-lg); }
  .stat-item span { text-align: right; }

  /* --- Subjects. A swipe row: the next card peeks in from the right,
         which is the cue that there is more. -------------------------- */
  #subjects .level-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    gap: var(--space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    /* Bleeds to the screen edges so cards slide under the margin, while the
       first card still lines up with the text above it. */
    margin-inline: calc(var(--space-4) * -1);
    padding: var(--space-1) var(--space-4) var(--space-3);
    scroll-padding-inline: var(--space-4);
    scrollbar-width: none;
  }
  #subjects .level-grid::-webkit-scrollbar { display: none; }
  #subjects .level-card { scroll-snap-align: start; }

  /* --- How it works. Number beside the text, read top to bottom. ------ */
  .steps { gap: var(--space-4); }
  .step-item {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: var(--space-3);
    align-items: start;
    text-align: left;
    padding: 0;
  }
  .step-number { grid-row: span 2; margin: 0; }
  .step-item h3 { margin-top: 0.35rem; }

  /* --- Why us. A light list: six boxed cards in a column read as a wall. */
  .feature-grid { gap: 0; }
  .feature-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
  }
  .feature-card:last-child { border-bottom: 0; }

  /* --- Tutors ----------------------------------------------------------- */
  .coverflow-viewport { padding-block: var(--space-3); }
  .coverflow-captions { margin-top: var(--space-3); }

  /* --- Story ------------------------------------------------------------ */
  .story .section-title { margin-bottom: var(--space-4); }
  .story-lead { font-size: var(--fs-md); margin-bottom: var(--space-4) !important; }

  /* --- Pricing. A price list, level on the left and rate on the right,
         so the four compare at a glance. ------------------------------- */
  #pricing .level-grid { gap: var(--space-2); }
  .price-card--level {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "name amount" "desc amount";
    column-gap: var(--space-3);
    align-items: center;
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
  }
  /* The level's colour moves from a bar along the top to the left edge. */
  .price-card--level::before { inset: 0 auto 0 0; width: 5px; height: auto; }
  .price-card--level .price-name { grid-area: name; margin: 0; }
  .price-card--level .price-card-desc { grid-area: desc; margin: 0; font-size: var(--fs-xs); }
  .price-card--level .price-amount {
    grid-area: amount;
    margin: 0;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
  }
  .price-card--level .price-amount strong { font-size: var(--fs-xl); line-height: 1; }
  .price-card--level .price-amount span { font-size: var(--fs-xs); }
  .price-included {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-4);
  }
  .price-cta .btn { width: 100%; }

  /* --- FAQ -------------------------------------------------------------- */
  .faq-list { gap: var(--space-2); }
  .faq-question { padding: var(--space-3); }
  .faq-answer-inner { padding: 0 var(--space-3) var(--space-3); }

  /* --- Contact. Less padding inside the card, and 16px fields: below that,
         iOS zooms the whole page in when a field is tapped. ------------- */
  .contact-info { padding: var(--space-5) var(--space-4); }
  .contact-info h2 { font-size: var(--fs-xl); }
  .contact-info p { font-size: var(--fs-base); margin-bottom: var(--space-4); }
  .contact-form-wrap { padding: var(--space-5) var(--space-4); }
  .form-field input,
  .form-field select,
  .form-field textarea { font-size: 16px; }
  .form-field textarea { min-height: 96px; }

  /* --- Footer. The Subjects links all point at one section, so they go;
         the Company links run as a row. -------------------------------- */
  .site-footer:not(.site-footer--compact) { padding-top: var(--space-6); }
  .footer-grid { gap: var(--space-5); padding-bottom: var(--space-5); }
  .footer-col--subjects { display: none; }
  .footer-col--company ul { flex-direction: row; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
}