/*
 * IMAT Quest — Landing Page Styles
 * css/landing.css
 *
 * Section-specific styles for index.html.
 * Navbar lives in navbar.css (shared across all pages).
 * Design tokens from style.css.
 *
 * Sections: Hero · Trust Strip · Who We Are · How It Works ·
 *           Features · Courses Preview · Italy Teaser ·
 *           Testimonials · CTA Banner · Footer
 */

/* ============================================================
   LANDING: COMPACT TEXT SCALE OVERRIDE
   The Ω fluid scale (tokens.css) maxes out at 1440px with values
   too large for this page's design density. These static overrides
   compact the scale to match the original design intent.
   --text-2xl is intentionally NOT overridden — hero headline stays
   fluid (40–69px). Landing.css loads last so these beat tokens.css.
   ============================================================ */

:root {
  --text-3xs: 0.6875rem; /* 11px */
  --text-2xs: 0.75rem; /* 12px */
  --text-xs: 0.8125rem; /* 13px — labels, compact UI text */
  --text-sm: 0.9375rem; /* 15px — body copy */
  --text-base: 1.125rem; /* 18px — card/step headings */
  --text-md: 1.375rem; /* 22px — section subheadings */
  --text-lg: 2rem; /* 32px — section headings */
  --text-xl: 2.25rem; /* 36px — display / large stats */
  --text-2xl: clamp(
    2.59rem,
    2.59vw + 1.29rem,
    3.45rem
  ); /* 41–55px — hero headline (+15% from prior value) */
}

/* ============================================================
   SHARED — Reusable section patterns
   ============================================================ */

.overline {
  display: block;
  font-family: var(
    --font-heading
  ); /* Outfit holds geometric detail better than Inter at 13px all-caps */
  font-weight: var(--weight-semibold);
  font-size: 13px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-pink);
  margin-block-end: var(--space-4);
}

.section-lead {
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 0.35vw + 0.95rem, 1.1875rem); /* 17–19px — +5% for breathing room */
  line-height: 1.7;
  color: var(--color-text-secondary);
  max-inline-size: 640px;
  margin-block-end: var(--space-8);
}

.section-placeholder {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  padding: var(--space-12) 0;
  text-align: center;
}

.text-pink {
  color: var(--color-pink);
}

.desktop-only {
  display: inline;
}

.container {
  max-inline-size: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* ============================================================
   EDITORIAL BONES — Universal chapter header (Scholar's Folio)
   Numeral (roman, amber) · Heading (Outfit 700) ·
   Kicker (Georgia italic, muted) · Amber rule
   Applied to: How It Works, Features, Italy Teaser, Testimonials
   ============================================================ */

.chapter-header {
  text-align: center;
  margin-block-end: var(--space-12);
}

.chapter-numeral {
  display: block;
  font-family: var(--font-serif-editorial);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.1em;
  color: var(--color-amber-ink); /* text on light bg — WCAG AA */
  margin-block-end: var(--space-3);
}

.chapter-title {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(1.875rem, 2.2vw + 0.8rem, 2.75rem); /* 30–44px — slight lift from 28–40px T26 */
  line-height: 1.12;
  letter-spacing: -0.025em; /* tighter than -0.02em — editorial press feel */
  color: var(--color-navy);
  margin-block-end: var(--space-3);
}

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

.section--dark .chapter-numeral {
  color: var(--color-amber);
}

.section--dark .chapter-kicker {
  color: rgb(255 255 255 / 50%);
}

.chapter-kicker {
  display: block;
  font-family: var(--font-serif-editorial);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.0625rem, 0.35vw + 0.95rem, 1.25rem); /* 17–20px — +5% elegance lift */
  line-height: 1.55;
  color: var(--color-text-secondary);
  max-inline-size: 520px;
  margin: 0 auto var(--space-5);
}

.chapter-rule {
  display: block;
  inline-size: 40px;
  block-size: 2px;
  background: var(--color-amber);
  border: none;
  margin: 0 auto;
}

.section--dark .chapter-rule {
  background: var(--color-amber);
  opacity: 0.7;
}

.fleuron {
  display: block;
  text-align: center;
  font-family: var(--font-serif-editorial);
  font-size: 18px;
  color: var(--color-amber);
  opacity: 0.5;
  margin-block-start: var(--space-12);
  user-select: none;
}

/* ============================================================
   EVIDENCE LAYER — Layer 4: Footnote Citations
   Superscript refs → tooltip/inline reveal on hover/tap.
   Only applied where claims have verifiable sources.
   ============================================================ */

.fn-ref {
  display: inline;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--color-amber-ink); /* 11px superscript — needs AA */
  cursor: pointer;
  vertical-align: super;
  line-height: 0;
  padding: 2px 3px;
  text-decoration: none;
  border-block-end: 1px dotted var(--color-amber); /* decorative underline stays amber */
  position: relative;
}

.fn-ref:focus-visible {
  outline: 2px solid var(--color-amber);
  outline-offset: 2px;
  border-radius: 2px;
}

.fn-note {
  position: absolute;
  inset-block-end: calc(100% + 8px);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  background: var(--color-navy);
  color: rgb(255 255 255 / 85%);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  font-style: normal;
  line-height: 1.5;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  max-inline-size: 280px;
  white-space: normal;
  box-shadow: 0 4px 16px rgb(0 0 0 / 20%);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) ease;
}

.fn-note.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Arrow on tooltip */
.fn-note::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-block-start-color: var(--color-navy);
}

/* Light-bg sections: dark tooltip (default). Dark-bg sections: need light tooltip */
.section--dark .fn-note {
  background: var(--color-cream);
  color: var(--color-navy);
}

.section--dark .fn-note::after {
  border-block-start-color: var(--color-cream);
}

/* ============================================================
   HERO — Arc beat: HOOK
   Full-bleed cinematic Colosseum video with text overlay.
   Replaced split-layout slideshow 2026-04-21 (Phase A Day 1).
   ============================================================ */

.hero {
  position: relative;
  background: var(--color-navy);
  min-block-size: 100svh;
  padding: calc(var(--navbar-height, 72px) + var(--space-10)) var(--space-8)
    var(--section-padding, 96px);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
}

/* Poster bedrock — always visible behind the video. If the video
   stalls, errors, or is skipped on slow connections, the poster
   is already painted, so the hero never looks broken. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../assets/video/hero-colosseum-poster.jpg");
  background-size: cover;
  background-position: center 45%;
}

/* ── Hero video — edge-to-edge Colosseum cinematic ─────────────
   Cinematic F grade baked into encode (CRF 28, ~14MB, 1600×900).
   Starts invisible; JS adds .is-video-ready once the video can
   actually play, which fades it in over the poster. */
.hero__video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center 45%;
  z-index: 1;
  transform: scale(1);
  transform-origin: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-crawl) var(--ease-out-quart);
}

.hero.is-video-ready .hero__video {
  opacity: 1;
}

/* Scrim needs to sit above the video */
.hero__scrim {
  z-index: 2 !important;
}
.hero__grid {
  position: relative;
  z-index: 3;
}

/* ── Hero scrim — non-intrusive text legibility layer ──────────
   Radial pool of navy darkness anchored behind the text block
   (left-of-centre) — keeps Colosseum visible on the right, text
   readable on the left. Subtle bottom fade anchors the CTAs. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 65% 80% at 22% 55%,
      rgb(0 20 40 / 78%) 0%,
      rgb(0 20 40 / 50%) 35%,
      rgb(0 20 40 / 18%) 65%,
      rgb(0 20 40 / 0%) 82%
    ),
    linear-gradient(180deg, rgb(0 0 0 / 0%) 55%, rgb(0 0 0 / 22%) 100%);
}

/* Reduced-motion fallback — freeze on poster (poster::before already renders) */
@media (prefers-reduced-motion: reduce) {
  .hero__video {
    display: none;
  }
}

/* Ultrawide / 4K — gently scale up so Colosseum fills more frame */
@media (min-width: 1920px) {
  .hero__video {
    transform: scale(1.05);
  }
}

@media (min-width: 2560px) {
  .hero__video {
    transform: scale(1.15);
  }
}

@media (min-width: 3840px) {
  .hero__video {
    transform: scale(1.2);
  }
}

.hero__grid,
.hero__scroll-cue {
  position: relative;
  z-index: 10;
}

.hero__grid {
  display: block;
  inline-size: 100%;
  max-inline-size: var(--container-max);
  margin: 0 auto;
}

.hero__content {
  text-align: start;
  max-inline-size: 620px;
  position: relative;
  z-index: 1;
}

/* ── Badge (pink, Part 7 §7.2) ── */
.hero__badge {
  display: inline-flex;
  margin-block-end: var(--space-4);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs); /* ω: 8px → --space-2xs (8px→12px, min exact match) */
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs); /* ω: 13px → --text-xs (13.3px at 320px, 2.3% off ✓) */
  letter-spacing: 0.04em; /* ω-defer: no matching token — badge-specific tight-caps value */
  text-transform: uppercase;
  padding: var(--space-2xs) var(--space-s); /* ω: 8px 16px → --space-2xs --space-s (min exact match ✓) */
  border-radius: var(--radius-full);
}

.badge--pink {
  background: color-mix(in oklch, var(--color-pink), transparent 90%); /* ω: rgba pink 10% */
  color: var(--color-pink);
  border: 1px solid color-mix(in oklch, var(--color-pink), transparent 78%); /* ω: rgba pink 22% */
}

.badge__dot {
  inline-size: 7px; /* ω-defer: no matching token — badge-dot-specific value */
  block-size: 7px; /* ω-defer: no matching token — badge-dot-specific value */
  border-radius: 50%;
  background: var(--color-pink);
  box-shadow: 0 0 8px color-mix(in oklch, var(--color-pink), transparent 45%); /* ω: rgba pink 55% */
  flex-shrink: 0;
}

/* Legacy amber badge — kept for non-hero uses */
.badge-orange {
  background: color-mix(in oklch, var(--color-amber), transparent 85%); /* ω: rgba amber 15% */
  color: var(--color-amber-ink); /* small badge text — needs AA */
  border: 1px solid color-mix(in oklch, var(--color-amber), transparent 75%); /* ω: rgba amber 25% */
}

/* Hero status ribbon — amber chip, dark-bg variant (no AA concern on navy) */
.badge--amber {
  background: color-mix(in oklch, var(--color-amber), transparent 88%); /* ω: rgba amber 12% */
  color: color-mix(
    in oklch,
    var(--color-amber),
    white 30%
  ); /* ω: #F2C884 — light amber on dark bg */
  border: 1px solid color-mix(in oklch, var(--color-amber), transparent 70%); /* ω: rgba amber 30% */
  font-size: var(--text-2xs); /* ω: 12px → --text-2xs (11.1px at 320px, 7.5% off ✓) */
  letter-spacing: 0.08em; /* ω-defer: no matching token — amber-badge-specific caps value */
}
.badge--amber .badge__dot {
  background: var(--color-amber);
  box-shadow: 0 0 10px color-mix(in oklch, var(--color-amber), transparent 35%); /* ω: rgba amber 65% */
}
.hero__ribbon {
  margin-block-end: var(--space-4);
}

.hero__headline {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold); /* ω: 700 → --weight-bold */
  font-size: var(
    --text-2xl
  ); /* ω: clamp(2.5rem,3.5vw+1rem,4rem) → --text-2xl (2.488→4.328rem, min 0.5% off ✓) */
  line-height: var(--lh-tight); /* ω: 1.1 → --lh-tight (exact match ✓) */
  letter-spacing: -0.03em; /* ω-defer: no matching token — hero-headline-specific value (-0.025em closest is 17% off) */
  color: var(--color-white);
  margin-block-end: var(--space-5);
}

.hero__headline-primary,
.hero__headline-italic {
  display: block;
}

.hero__headline-primary {
  font-family: "DM Serif Display", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.hero__headline-italic {
  font-family: "DM Serif Display", Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: 0.95em; /* ω-defer: relative em unit — hero-headline-italic-specific scaling ratio */
  color: color-mix(
    in oklch,
    var(--color-pink),
    white 40%
  ); /* ω: #F4A7B9 — light pink tint on dark bg */
  letter-spacing: -0.01em; /* ω-defer: no matching token — -0.015em closest is 50% off */
  margin-block-start: 0.08em;
  white-space: nowrap;
}

.hero__subheadline {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: clamp(
    1.125rem,
    0.45vw + 0.98rem,
    1.35rem
  ); /* +12% from T26: subheadline scales with headline */
  line-height: var(--lh-relaxed); /* ω: 1.65 → --lh-relaxed (1.625, 1.5% off ✓) */
  color: color-mix(in oklch, var(--color-white), transparent 15%); /* ω: rgba white 85% */
  max-inline-size: 480px; /* ω-defer: no matching token — hero-subheadline-specific measure */
  margin-block-end: var(--space-8);
}

/* Hero deck — editorial italic serif, bridges H1 to CTAs */
.hero__deck {
  font-family: "DM Serif Display", Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: 1.0625rem; /* 17px — deck +12% from T26 (was --text-sm = 15px) */
  line-height: var(--lh-normal); /* ω: 1.55 → --lh-normal (1.5, 3.3% off ✓) */
  color: color-mix(in oklch, var(--color-white), transparent 20%); /* ω: rgba white 80% */
  max-inline-size: 540px; /* ω-defer: no matching token — hero-deck-specific measure */
  margin: calc(var(--space-5) * -0.3) 0 var(--space-6);
  letter-spacing: -0.005em; /* ω-defer: no matching token — --tracking-normal(0) is 100% off; deck-specific micro-tightening */
}

.hero__ctas {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-block-end: var(--space-5);
  flex-wrap: wrap;
}

.hero__social-proof {
  font-family: var(--font-body);
  font-size: var(--text-xs); /* ω: 14px → --text-xs (13.3px at 320px / ~14px at mid-viewport ✓) */
  line-height: var(--lh-normal); /* ω: 1.5 → --lh-normal (exact match ✓) */
  color: color-mix(in oklch, var(--color-white), transparent 55%); /* ω: rgba white 45% */
  letter-spacing: 0.01em; /* ω-defer: no matching token — --tracking-normal(0) is 100% off; social-proof micro-spacing */
  margin: 0;
}

/* Mobile mini-trust bar — hidden above 1024px, replaces mockup below */
.hero__mini-trust {
  display: none;
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: var(--space-4) var(--space-3);
  background: color-mix(in oklch, var(--color-white), transparent 96%); /* ω: rgba white 4% */
  border: 1px solid color-mix(in oklch, var(--color-white), transparent 92%); /* ω: rgba white 8% */
  border-radius: var(--radius-xl);
  gap: var(--space-2);
}

.hero__mini-trust li {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__mini-trust strong {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold); /* ω: 700 → --weight-bold */
  font-size: var(--text-md); /* ω: 22px → --text-md (clamp 23px→34px, min 4.5% off ✓) */
  color: var(--color-white);
  line-height: var(--lh-tight); /* ω: 1.1 → --lh-tight (exact match ✓) */
}

.hero__mini-trust span {
  font-family: var(--font-body);
  font-size: var(--text-3xs); /* ω: 11px → --text-3xs (clamp 9.3px→10.5px, max 4.5% off ✓) */
  letter-spacing: 0.04em; /* ω-defer: no matching token — mini-trust-label-specific caps tracking */
  text-transform: uppercase;
  color: color-mix(in oklch, var(--color-white), transparent 45%); /* ω: rgba white 55% */
  margin-block-start: var(--space-3xs); /* ω: 4px → --space-3xs (4px→6px, min exact match ✓) */
}

/* ============================================================
   HERO — Entrance choreography (Part 7 §7.8)
   Left col: 100ms stagger slide-up (fade + translateY)
   Mockup: enters at 1000ms, slides from right 60px
   Activated when body gets .hero-entered class.
   ============================================================ */

.hero-enter {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-crawl) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    /* ω: 600ms → --dur-crawl */ transform var(--dur-crawl)
      var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)); /* ω: 600ms → --dur-crawl */
}

body.hero-entered .hero-enter {
  opacity: 1;
  transform: translateY(0);
}

body.hero-entered .hero-enter--1 {
  transition-delay: 100ms;
}
body.hero-entered .hero-enter--2 {
  transition-delay: 200ms;
}
body.hero-entered .hero-enter--3 {
  transition-delay: 300ms;
}
body.hero-entered .hero-enter--4 {
  transition-delay: 400ms;
}
body.hero-entered .hero-enter--5 {
  transition-delay: 500ms;
  transform: translateY(0);
}
body.hero-entered .hero-enter--5 {
  opacity: 1;
}

.hero-enter-mockup {
  opacity: 0;
  transform: perspective(1200px) rotateY(-4deg) rotateX(2deg) scale(1) translateX(60px);
  transition:
    opacity var(--dur-crawl) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) 1000ms,
    /* ω: 600ms → --dur-crawl */ transform var(--dur-crawl)
      var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) 1000ms; /* ω: 600ms → --dur-crawl */
}

body.hero-entered .hero-enter-mockup {
  opacity: 1;
  transform: perspective(1200px) rotateY(-4deg) rotateX(2deg) scale(1) translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .hero-enter,
  .hero-enter-mockup {
    opacity: 1 !important;
    transform: perspective(1200px) rotateY(-4deg) rotateX(2deg) scale(1) !important;
    transition: none !important;
  }
  .hero-enter {
    transform: none !important;
  }
}

/* ============================================================
   HERO — Scroll cue chevron (Part 7 §7.9)
   ============================================================ */

.hero__scroll-cue {
  position: absolute;
  inset-block-end: 28px; /* ω-defer: no matching token — scroll-cue-specific positional value */
  inset-inline-start: 50%;
  transform: translateX(-50%);
  color: color-mix(in oklch, var(--color-white), transparent 72%); /* ω: rgba white 28% */
  opacity: 0;
  animation: hero-scroll-cue 2.5s var(--ease-in-out, ease-in-out) infinite;
  animation-delay: 2.5s;
  animation-fill-mode: forwards;
  transition: opacity var(--dur-base) ease; /* ω: --duration-base → --dur-base */
  padding: var(--space-2xs); /* ω: 8px → --space-2xs (8px→12px, min exact match ✓) */
  z-index: 2;
}

.hero__scroll-cue:hover {
  color: color-mix(in oklch, var(--color-white), transparent 40%);
} /* ω: rgba white 60% */
.hero__scroll-cue.is-hidden {
  opacity: 0;
  animation: none;
}

@keyframes hero-scroll-cue {
  0% {
    opacity: 0.5;
    transform: translateX(-50%) translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) translateY(8px);
  }
  100% {
    opacity: 0.5;
    transform: translateX(-50%) translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll-cue {
    animation: none;
    opacity: 0.5;
  }
}

/* ── Buttons ── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-smooth),
    transform var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-smooth),
    box-shadow var(--duration-fast) var(--ease-smooth);
}

.btn-primary {
  background: var(--color-pink);
  color: var(--color-white);
  border-radius: var(--radius-sm);
}

.btn-primary:hover {
  background: #57202d; /* burgundy darkened ~15% */
  transform: translateY(calc(-1 * var(--move-lift-btn)));
}

.btn-secondary {
  background: transparent;
  color: var(--color-white);
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: var(--radius-sm);
}

.btn-secondary:hover {
  background: rgb(255 255 255 / 8%);
  border-color: rgb(255 255 255 / 40%);
  transform: translateY(calc(-1 * var(--move-lift-btn)));
}

.btn-lg {
  block-size: 44px;
  padding: 0 22px;
  font-size: 15px;
}

.btn-sm {
  block-size: 40px;
  padding: 0 var(--space-5);
  font-size: 14px;
}

.btn-cta-inverted {
  background: var(--color-white);
  color: var(--color-pink);
  border-radius: var(--radius-sm);
}

.btn-cta-inverted:hover {
  background: rgb(255 255 255 / 92%);
  transform: translateY(calc(-1 * var(--move-lift-btn)));
}

/* ============================================================
   TRUST STRIP — Arc beat: TRUST (Part 8 + palette-flip exception)
   Background: washed burgundy (#8B4A55). Cards: amber with
   vertical warm gradient, deep burgundy-tinted borders, layered
   shadow. No lift (spec §8.2). Added:
     - Top-right mehndi paisley (burgundy ink, deeper on hover)
     - Staggered breathing glow via ::after — 4.5s cycle, six
       cards offset so they pulse out of sync like candles
     - Slow (1.2s) hover warm-up — border + shadow deepen
   ============================================================ */

/* Washed burgundy section — dried-rose / mulberry, lets amber pop.
   Not --color-burgundy (#6B2838) which is too saturated behind amber.
   Silk: broad diagonal sheen band drifts across the whole section
   over 28s. Extremely low-contrast — it's felt, not seen. */
/* Trust strip — Venetian-plaster wall.
   Base is a warm travertine cream, layered with mottled radial
   splotches to read as weathered plaster. A very slow drifting
   warm light hints at candlelight grazing the surface. */
.trust-strip {
  position: relative;
  background:
    radial-gradient(ellipse 60% 40% at 18% 22%, rgb(196 162 112 / 22%), transparent 62%),
    radial-gradient(ellipse 50% 45% at 82% 68%, rgb(168 128 82 / 18%), transparent 65%),
    radial-gradient(ellipse 45% 55% at 50% 110%, rgb(140 96 58 / 14%), transparent 60%),
    radial-gradient(ellipse 30% 35% at 68% 18%, rgb(230 206 166 / 35%), transparent 70%),
    linear-gradient(180deg, #e8dac0 0%, #dfcdad 55%, #d3be9a 100%);
  padding: var(--space-12) 0;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    inset 0 1px 0 rgb(255 248 228 / 50%),
    inset 0 -2px 0 rgb(110 78 42 / 10%);
}

/* Plaster grain + faint fresco crackle — two stacked SVG-noise
   fallbacks via layered gradients create subtle aperiodic mottling
   without needing an external texture. */
.trust-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-radial-gradient(
      circle at 23% 37%,
      rgb(90 58 30 / 4%) 0,
      rgb(90 58 30 / 4%) 1.5px,
      transparent 2px,
      transparent 6px
    ),
    repeating-radial-gradient(
      circle at 71% 62%,
      rgb(62 38 18 / 3.5%) 0,
      rgb(62 38 18 / 3.5%) 1px,
      transparent 1.8px,
      transparent 5px
    ),
    repeating-linear-gradient(
      105deg,
      rgb(110 78 42 / 2.5%) 0,
      rgb(110 78 42 / 2.5%) 1px,
      transparent 2px,
      transparent 7px
    );
  mix-blend-mode: multiply;
  opacity: 0.75;
  pointer-events: none;
  z-index: 0;
}

/* Slow candle-wash — a warm light drifts across the wall. */
.trust-strip::after {
  content: "";
  position: absolute;
  inset: -10%;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgb(255 230 190 / 8%) 46%,
    rgb(255 238 210 / 14%) 50%,
    rgb(255 230 190 / 8%) 54%,
    transparent 70%
  );
  background-size: 240% 240%;
  background-position: 0% 50%;
  animation: silk-section-drift 32s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
  will-change: background-position;
}

.trust-strip > .container {
  position: relative;
  z-index: 1;
}

@keyframes silk-section-drift {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

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

/* Amber silk cards — a four-stop vertical gradient (bright top
   catchlight → body → shadow fold → slight bottom lift) reads as
   a smooth silk panel. Specular inset highlight on the top edge
   + subtle inset shadow on the bottom give the polished fold. */
.trust-strip__card {
  /* Ω T16: container-type enables @container queries so internal layout
     responds to the card's own width rather than the viewport.
     container-name scopes queries to avoid nested-container ambiguity. */
  container-type: inline-size;
  container-name: trust-card;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, #f0c46a 0%, #d99b47 52%, #c58839 100%);
  border: 1.5px solid color-mix(in oklch, var(--color-burgundy), transparent 62%);
  box-shadow:
    0 6px 20px rgb(107 40 56 / 22%),
    0 2px 4px rgb(0 0 0 / 8%),
    inset 0 1.5px 0 rgb(255 248 225 / 55%),
    inset 0 -1px 0 rgb(80 30 40 / 14%);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-4);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  transition:
    border-color 1200ms var(--ease-out-quart),
    /* ω-defer: 1200ms — no token within 10% (cinematic=1400ms +17%) */ box-shadow 1200ms
      var(--ease-out-quart); /* ω-defer: 1200ms — no token within 10% */
  /* Per Part 8 §8.2: NO lift. Silk sheen + breathe only. */
}

/* Silk gloss — narrow anisotropic highlight drifts slowly across
   each card. soft-light blend keeps it modulating amber, not
   chalking it out. Staggered per card so the six panels shimmer
   independently, like folds of fabric catching the light. */
.trust-strip__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    102deg,
    transparent 28%,
    rgb(255 246 222 / 10%) 42%,
    rgb(255 250 232 / 34%) 49%,
    rgb(255 253 240 / 44%) 50%,
    rgb(255 250 232 / 34%) 51%,
    rgb(255 246 222 / 10%) 58%,
    transparent 72%
  );
  background-size: 260% 100%;
  background-position: 0% 50%;
  mix-blend-mode: soft-light;
  animation: silk-sheen 9500ms ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 2;
  will-change: background-position;
}

@keyframes silk-sheen {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

.trust-strip__card:nth-child(1)::before {
  animation-delay: 0ms;
}
.trust-strip__card:nth-child(2)::before {
  animation-delay: 1100ms;
}
.trust-strip__card:nth-child(3)::before {
  animation-delay: 2300ms;
}
.trust-strip__card:nth-child(4)::before {
  animation-delay: 3500ms;
}
.trust-strip__card:nth-child(5)::before {
  animation-delay: 4600ms;
}
.trust-strip__card:nth-child(6)::before {
  animation-delay: 5800ms;
}

/* Ambient breathing glow — slow warm light pulsing from above.
   Six cards are staggered so they breathe out of sync like candles. */
.trust-strip__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 110% 80% at 50% 0%,
    rgb(255 240 200 / 45%) 0%,
    rgb(255 220 160 / 18%) 35%,
    transparent 65%
  );
  opacity: 0.4;
  pointer-events: none;
  z-index: 1;
  animation: card-breathe 4500ms ease-in-out infinite;
}

@keyframes card-breathe {
  0%,
  100% {
    opacity: 0.32;
  }
  50% {
    opacity: 0.72;
  }
}

/* Stagger the six cards so the pulse never looks synchronized */
.trust-strip__card:nth-child(1)::after {
  animation-delay: 0ms;
}
.trust-strip__card:nth-child(2)::after {
  animation-delay: 520ms;
}
.trust-strip__card:nth-child(3)::after {
  animation-delay: 1040ms;
}
.trust-strip__card:nth-child(4)::after {
  animation-delay: 1560ms;
}
.trust-strip__card:nth-child(5)::after {
  animation-delay: 2080ms;
}
.trust-strip__card:nth-child(6)::after {
  animation-delay: 2600ms;
}

/* Hover: gentle warm-up — border deepens, shadow grows, motif ink darkens.
   Deliberately 1.2s so it feels like the card is noticing you, not reacting. */
.trust-strip__card:hover {
  border-color: color-mix(in oklch, var(--color-burgundy), transparent 38%);
  box-shadow:
    0 10px 28px rgb(107 40 56 / 30%),
    0 3px 6px rgb(0 0 0 / 10%),
    inset 0 1px 0 rgb(255 240 210 / 45%);
}

.trust-strip__card i {
  position: relative;
  z-index: 3;
  font-size: 24px; /* ω-defer: --text-base (1.2–1.688rem) misses fixed 24px by >10% at extremes */
  color: #3a1520; /* ω-defer: deep ink burgundy — no token within 10% (darkest is --color-burgundy #6B2838) */
}

.trust-strip__text {
  position: relative;
  z-index: 3;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold); /* bold reads stronger on amber gold surface */
  font-size: 15px; /* ω-defer: +1px for legibility on textured gold background */
  line-height: var(--lh-snug); /* 1.25 */
  color: #3a1520; /* ω-defer: deep ink burgundy — no token within 10% */
}

/* All plates are now gold — silver plate removed. */

@media (prefers-reduced-motion: reduce) {
  .trust-strip::before,
  .trust-strip__card::before,
  .trust-strip__card::after {
    animation: none;
  }
  .trust-strip__card::after {
    opacity: 0.5;
  }
  .trust-strip__card::before {
    background-position: 50% 50%;
  }
  .trust-strip__card {
    transition: none;
  }
}

/* Ω T16 — Container queries for trust-strip cards.
   When a card's own inline-size reaches --cq-card-m (400px) the layout
   switches from the default stacked (flex-column) to a side-by-side
   arrangement: icon left, text right. This fires on any viewport width —
   a card in a narrow sidebar on a 4K monitor gets the same treatment as
   a card on a 400px phone.
   Literal 400px used because @container conditions cannot resolve var(). */
@supports (container-type: inline-size) {
  @container trust-card (min-width: 400px) {
    /* -- .trust-strip__card inner layout -- */
    .trust-strip__card {
      flex-direction: row;
      text-align: start;
      align-items: center;
      padding: var(--space-4) var(--space-5);
    }

    .trust-strip__card i {
      flex-shrink: 0;
    }

    .trust-strip__text {
      text-align: start;
    }
  }
}

/* ============================================================
   WHO WE ARE — Arc beat: CONNECTION (Part 11 locked)
   Two-Act structure on navy. Act 1 = "We Were You" (shared
   story), Act 2 = "Meet Us" (featured Harsh + 3 supporting).
   ============================================================ */

.who-we-are {
  padding: var(--section-padding) 0;
  background: var(--color-navy);
  color: var(--color-white);
}

/* ---------- Act 1: Header ---------- */

.team-header {
  text-align: center;
  margin-block-end: var(--space-10); /* 40px to journey strip */
}

.team-header__overline {
  display: block;
  color: var(--color-amber); /* Dark bg → amber (Part 2) */
  margin-block-end: var(--space-3); /* 12px */
}

.team-header__title {
  font-family: var(--font-heading);
  font-weight: var(
    --weight-bold
  ); /* dark navy bg eats semibold weight — bold restores visual mass */
  font-size: clamp(2rem, 3vw + 0.5rem, 3rem); /* 32–48px */
  line-height: var(--lh-snug); /* ω: 1.2 → --lh-snug 1.25 (4% diff, within 10%) */
  letter-spacing: -0.025em;
  color: var(--color-white);
  max-inline-size: 700px;
  margin: 0 auto;
}

/* ---------- Act 1: Journey Strip (NEET → IMAT → Italy) ---------- */

.journey-strip {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  max-inline-size: 520px;
  margin: 0 auto var(--space-10); /* 40px below */
}

.journey-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  inline-size: 120px;
  flex-shrink: 0;
}

.journey-step__icon {
  inline-size: 56px;
  block-size: 56px;
  border-radius: 12px; /* ω-defer: intended 12px (written for old --radius-lg). tokens.css --radius-md=8px (33% off), --radius-lg=16px (33% off). No token within 10% — keep literal until radius-scale reconciled */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block-end: var(--space-3); /* 12px */
  font-size: 24px; /* ω-defer: 24px icon em — not text content, layout-critical */
}

.journey-step__icon--neet {
  background: color-mix(
    in oklch,
    oklch(50% 0.22 27deg),
    transparent 88%
  ); /* ω: rgb(220 38 38 / 12%) → color-mix. Red=pain (no palette token — intentional) */
  color: #ef4444; /* ω-defer: #ef4444 red — no red token in palette; intentional pain-state colour */
}

.journey-step__icon--imat {
  background: color-mix(
    in oklch,
    var(--color-amber),
    transparent 86%
  ); /* ω: rgb(217 155 71 / 14%) → color-mix amber 14% */
  color: var(--color-amber); /* Discovery — amber */
}

.journey-step__icon--italy {
  background: color-mix(
    in oklch,
    var(--color-pink),
    transparent 86%
  ); /* ω: rgb(232 71 107 / 14%) → color-mix pink 14% */
  color: var(--color-pink); /* Dream — pink */
}

.journey-step__label {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: 14px; /* ω-defer: 14px fixed — --text-xs clamp(13.3–16.8px) grows 20% at desktop. Visual regression risk */
  line-height: var(--lh-tight); /* ω: 1 → --lh-tight 1.1 (9% diff, within 10%) */
  color: var(--color-white);
  margin-block-end: var(--space-1); /* 4px */
  letter-spacing: 0.06em; /* ω-defer: 0.06em — nearest --tracking-wider 0.05em is 20% off */
}

.journey-step__sublabel {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 12px; /* ω-defer: 12px fixed — --text-2xs clamp(11.1–13.3px) grows 11% at desktop. Visual regression risk */
  line-height: var(--lh-snug); /* ω: 1.3 → --lh-snug 1.25 (4% diff, within 10%) */
  color: color-mix(
    in oklch,
    var(--color-white),
    transparent 60%
  ); /* ω: rgb(255 255 255 / 40%) → color-mix white 40% */
}

/* Dashed connector aligned to icon row (28px = half of 56px icon) */
.journey-connector {
  inline-size: 48px;
  block-size: 1px;
  flex-shrink: 0;
  margin-block-start: 28px;
  background: repeating-linear-gradient(
    90deg,
    rgb(255 255 255 / 15%) 0,
    rgb(255 255 255 / 15%) 6px,
    transparent 6px,
    transparent 12px
  );
}

/* ---------- Act 1: Narrative Block ---------- */

.team-narrative {
  max-inline-size: 640px;
  margin: 0 auto var(--space-16); /* 64px to Act 2 */
  padding-inline-start: var(--space-6); /* 24px */
  border-inline-start: 3px solid var(--color-pink);
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 17px;
  line-height: 1.75;
  font-style: italic;
  color: rgb(255 255 255 / 55%);
}

/* ---------- Act 2: Featured Founder (Harsh) ---------- */

.founder-featured {
  /* Ω T17: container-type enables @container queries so internal layout
     responds to the card's own width rather than the viewport.
     container-name scopes queries to avoid nested-container ambiguity.
     Base (narrow) state: stacked (1-col). Side-by-side switches on at
     --cq-card-l (600px) via @container below. */
  container-type: inline-size;
  container-name: founder-featured;
  position: relative;
  display: grid;
  grid-template-columns: 1fr; /* narrow default: stacked */
  text-align: center;
  gap: var(--space-6); /* 24px — narrow gap */
  align-items: center;
  background: var(--color-navy-light); /* #002a52 — elevated surface */
  border: 1px solid color-mix(in oklch, var(--color-white), transparent 94%); /* ω: rgb(255 255 255 / 6%) → color-mix white 6% */
  border-inline-start: none; /* narrow: top accent instead */
  border-block-start: 4px solid var(--color-pink);
  border-radius: var(
    --radius-lg
  ); /* ω: --radius-xl was 16px under old scale; tokens.css --radius-lg=16px (exact match) */
  padding: var(--space-8) var(--space-6); /* 32px 24px — narrow */
  margin-block-end: var(--space-8); /* 32px to supporting cards */
}

.founder-featured__avatar {
  /* Narrow base: 120px (stacked layout). Wide layout restores 160px via @container below. */
  inline-size: 120px;
  block-size: 120px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    var(--color-navy) 0%,
    #003366 100%
  ); /* ω-defer: #003366 — no mid-navy token; between navy and navy-light */
  border: 3px solid color-mix(in oklch, var(--color-white), transparent 90%); /* ω: rgb(255 255 255 / 10%) → color-mix white 10% */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 40px; /* ω-defer: avatar monogram — layout-critical, not body text. Narrow: 40px */
  line-height: var(--lh-tight); /* ω: 1 → --lh-tight 1.1 (9% diff, within 10%) */
  color: color-mix(
    in oklch,
    var(--color-white),
    transparent 70%
  ); /* ω: rgb(255 255 255 / 30%) → color-mix white 30% */
  letter-spacing: 0.04em; /* ω-defer: 0.04em — nearest --tracking-wide 0.025em is 60% off */
  flex-shrink: 0;
  margin: 0 auto; /* narrow: centered */
  box-shadow:
    0 4px 24px color-mix(in oklch, var(--color-black), transparent 70%),
    /* ω: rgb(0 0 0 / 30%) → color-mix black 30% */ 0 0 40px
      color-mix(in oklch, var(--color-pink), transparent 94%); /* ω: rgb(232 71 107 / 6%) → color-mix pink 6% — subtle pink ambient glow */
}

.founder-featured__content {
  min-inline-size: 0;
}

.founder-featured__overline {
  display: block;
  color: var(--color-amber); /* dark navy bg — amber stays vivid */
  font-size: 11px; /* ω-defer: 11px — --text-3xs max is 10.5px (5% off at max, outside clamp range). Too small for fluid scale; keep literal */
  margin-block-end: var(--space-2);
}

.founder-featured__name {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 24px; /* ω-defer: narrow base 24px — wide layout restores 28px via @container */
  line-height: var(--lh-tight); /* ω: 1.15 → --lh-tight 1.1 (4.5% diff, within 10%) */
  color: var(--color-white);
  margin-block-end: var(--space-1);
}

.founder-featured__subject {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 15px; /* ω-defer: 15px — --text-sm clamp(16–21.3px) within 10% at min but grows 42% at desktop. Visual regression risk. Migrate when baselines refreshed */
  color: var(--color-ice);
  margin-block-end: var(--space-4);
}

.founder-featured__bio {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 14px; /* ω-defer: narrow base 14px — wide layout restores 15px + max-inline-size via @container */
  line-height: var(--lh-relaxed); /* ω: 1.7 → --lh-relaxed 1.625 (4.6% diff, within 10%) */
  font-style: italic;
  text-align: start; /* italic reads better left-aligned even when stacked */
  color: color-mix(
    in oklch,
    var(--color-white),
    transparent 40%
  ); /* ω: rgb(255 255 255 / 60%) → color-mix white 60% */
  margin: var(--space-4) 0;
  max-inline-size: 100%; /* narrow: full width; wide restores 560px via @container */
}

.founder-featured__role {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 13px; /* ω-defer: 13px fixed — --text-xs clamp(13.3–16.8px) grows 29% at desktop. Visual regression risk */
  line-height: var(--lh-tight); /* ω: 1 → --lh-tight 1.1 (9% diff, within 10%) */
  color: var(--color-pink);
  margin-block-start: var(--space-4);
}

/* ---------- Shared Score Badge ---------- */

.founder__score {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3); /* 4px 12px */
  background: color-mix(
    in oklch,
    var(--color-amber),
    transparent 88%
  ); /* ω: rgb(217 155 71 / 12%) → color-mix amber 12% */
  border: 1px solid color-mix(in oklch, var(--color-amber), transparent 80%); /* ω: rgb(217 155 71 / 20%) → color-mix amber 20% */
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: 13px; /* ω-defer: 13px fixed — --text-xs clamp(13.3–16.8px) grows 29% at desktop. Visual regression risk */
  line-height: var(--lh-tight); /* ω: 1 → --lh-tight 1.1 (9% diff, within 10%) */
  color: var(--color-amber); /* score pill sits on dark navy bg — amber has strong contrast */
  margin-block-end: var(--space-4);
}

.founder__score i {
  font-size: 14px; /* ω-defer: 14px fixed — --text-xs grows 20% at desktop. Visual regression risk */
}

/* Ω T17 — founder-featured stays centered/stacked at all sizes.
   Side-by-side was removed: avatar + name must stay visually grouped.
   The card is kept max 680px so it reads as a focused centrepiece. */
.founder-featured {
  max-inline-size: 680px;
  margin-inline: auto;
}

/* ---------- Act 2: Supporting Founders (3 cards) ---------- */

.founders-supporting {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6); /* 24px */
}

.founder-card {
  /* Ω T17: container-type enables @container queries so internal layout
     responds to the card's own width rather than the viewport.
     container-name scopes queries to avoid nested-container ambiguity. */
  container-type: inline-size;
  container-name: founder-card;
  position: relative;
  background: var(--color-navy-light);
  border: 1px solid color-mix(in oklch, var(--color-white), transparent 94%); /* ω: rgb(255 255 255 / 6%) → color-mix white 6% */
  border-radius: var(
    --radius-lg
  ); /* ω: --radius-xl was 16px under old scale; tokens.css --radius-lg=16px (exact match) */
  padding: var(--space-8) var(--space-6); /* 32px 24px */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-inline-size: none; /* override any legacy .founder-card rule */
  box-shadow: none;
}

.founder-card__avatar {
  inline-size: 100px;
  block-size: 100px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    var(--color-navy) 0%,
    #003366 100%
  ); /* ω-defer: #003366 — no mid-navy token; between navy and navy-light */
  border: 3px solid color-mix(in oklch, var(--color-white), transparent 90%); /* ω: rgb(255 255 255 / 10%) → color-mix white 10% */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 32px; /* ω-defer: avatar monogram — layout-critical, not body text */
  line-height: var(--lh-tight); /* ω: 1 → --lh-tight 1.1 (9% diff, within 10%) */
  color: color-mix(
    in oklch,
    var(--color-white),
    transparent 70%
  ); /* ω: rgb(255 255 255 / 30%) → color-mix white 30% */
  letter-spacing: 0.04em; /* ω-defer: 0.04em — nearest --tracking-wide 0.025em is 60% off */
  margin-block-end: var(--space-5); /* 20px */
  box-shadow: 0 4px 16px color-mix(in oklch, var(--color-black), transparent 75%); /* ω: rgb(0 0 0 / 25%) → color-mix black 25% */
}

.founder-card__name {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 20px; /* ω-defer: 20px — --text-base clamp(19.2–27px) scales to 27px at desktop (35% off). Visual regression risk. Migrate when baselines refreshed */
  line-height: var(--lh-snug); /* ω: 1.2 → --lh-snug 1.25 (4% diff, within 10%) */
  color: var(--color-white);
  margin-block-end: var(--space-1);
}

.founder-card__subject {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 14px; /* ω-defer: 14px fixed — --text-xs clamp(13.3–16.8px) grows 20% at desktop. Visual regression risk */
  line-height: var(--lh-snug); /* ω: 1.3 → --lh-snug 1.25 (4% diff, within 10%) */
  color: var(--color-ice);
  margin-block-end: var(--space-3); /* 12px */
}

.founder-card__bio {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 14px; /* ω-defer: 14px fixed — --text-xs grows 20% at desktop. Visual regression risk */
  line-height: var(--lh-relaxed); /* ω: 1.65 → --lh-relaxed 1.625 (1.5% diff, within 10%) */
  font-style: italic;
  color: color-mix(
    in oklch,
    var(--color-white),
    transparent 50%
  ); /* ω: rgb(255 255 255 / 50%) → color-mix white 50% */
  margin-block-end: var(--space-4); /* 16px */
}

.founder-card__proof {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 12px; /* ω-defer: 12px fixed — --text-2xs clamp(11.1–13.3px) grows 11% at desktop. Visual regression risk */
  line-height: var(--lh-normal); /* ω: 1.5 → --lh-normal 1.5 (exact match) */
  color: color-mix(
    in oklch,
    var(--color-white),
    transparent 65%
  ); /* ω: rgb(255 255 255 / 35%) → color-mix white 35% */
  background: color-mix(
    in oklch,
    var(--color-white),
    transparent 97%
  ); /* ω: rgb(255 255 255 / 3%) → color-mix white 3% */
  border: 1px solid color-mix(in oklch, var(--color-white), transparent 96%); /* ω: rgb(255 255 255 / 4%) → color-mix white 4% */
  border-radius: var(--radius-md); /* 8px — tokens.css --radius-md=8px exact match */
  padding: var(--space-2) var(--space-3); /* 8px 12px */
  margin-block-end: var(--space-4);
  inline-size: 100%;
  text-align: center;
}

.founder-card__role {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 12px; /* ω-defer: 12px fixed — --text-2xs grows 11% at desktop. Visual regression risk */
  line-height: var(--lh-tight); /* ω: 1 → --lh-tight 1.1 (9% diff, within 10%) */
  color: var(--color-pink);
  margin-block-start: auto; /* Pin to bottom */
}

/* ---------- Signature Hover Tier (Part 5 §5.11) ---------- */

@media (hover: hover) and (pointer: fine) {
  .founder-featured,
  .founder-card {
    transition: transform var(--dur-base) var(--ease-out-expo); /* ω: --duration-base → --dur-base (240ms, was 250ms, 4% diff); --ease-out → --ease-out-expo (identical cubic-bezier) */
  }

  .founder-featured::after,
  .founder-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out-expo); /* ω: --duration-base → --dur-base; --ease-out → --ease-out-expo */
    pointer-events: none;
    z-index: -1;
  }

  .founder-featured::after {
    box-shadow: 0 20px 60px color-mix(in oklch, var(--color-pink), transparent 92%); /* ω: rgb(232 71 107 / 8%) → color-mix pink 8% */
  }

  .founder-card::after {
    box-shadow: 0 20px 50px color-mix(in oklch, var(--color-pink), transparent 90%); /* ω: rgb(232 71 107 / 10%) → color-mix pink 10% */
  }

  .founder-featured:hover,
  .founder-card:hover {
    transform: translateY(calc(-1 * var(--move-lift-md))); /* -6px */
  }

  .founder-featured:hover::after,
  .founder-card:hover::after {
    opacity: 1;
  }

  /* Photo scale on supporting cards only (featured is horizontal) */
  .founder-card__avatar {
    transition: transform var(--dur-base) var(--ease-out-expo); /* ω: --duration-base → --dur-base; --ease-out → --ease-out-expo */
  }

  .founder-card:hover .founder-card__avatar {
    transform: scale(1.06);
  }
}

/* ---------- Collective Proof Bar ---------- */

.team-proof-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4); /* 16px */
  margin-block-start: var(--space-12); /* 48px above */
  padding: var(--space-5) var(--space-6); /* 20px 24px */
  background: color-mix(
    in oklch,
    var(--color-white),
    transparent 97%
  ); /* ω: rgb(255 255 255 / 3%) → color-mix white 3% */
  border: 1px solid color-mix(in oklch, var(--color-white), transparent 96%); /* ω: rgb(255 255 255 / 4%) → color-mix white 4% */
  border-radius: 12px; /* ω-defer: intended 12px (old --radius-lg). tokens.css --radius-md=8px (33% off), --radius-lg=16px (33% off). Keep literal until radius-scale reconciled */
}

.team-proof-bar__item {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 14px; /* ω-defer: 14px fixed — --text-xs clamp(13.3–16.8px) grows 20% at desktop. Visual regression risk */
  line-height: var(--lh-tight); /* ω: 1 → --lh-tight 1.1 (9% diff, within 10%) */
  color: color-mix(
    in oklch,
    var(--color-white),
    transparent 50%
  ); /* ω: rgb(255 255 255 / 50%) → color-mix white 50% */
  white-space: nowrap;
}

.team-proof-bar__item strong {
  color: var(--color-white);
  font-weight: var(--weight-semibold);
}

.team-proof-bar__dot {
  color: var(--color-pink);
  opacity: 0.4;
  font-size: 14px; /* ω-defer: 14px fixed — --text-xs grows 20% at desktop. Visual regression risk */
  line-height: var(--lh-tight); /* ω: 1 → --lh-tight 1.1 (9% diff, within 10%) */
}

/* ---------- Section Close CTA ---------- */

.team-cta {
  text-align: center;
  margin-block-start: var(--space-10); /* 40px */
}

.btn-text--light {
  color: color-mix(
    in oklch,
    var(--color-white),
    transparent 40%
  ); /* ω: rgb(255 255 255 / 60%) → color-mix white 60% */
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: 16px; /* ω-defer: 16px fixed — --text-sm clamp(16–21.3px) grows 33% at desktop. Visual regression risk */
  line-height: var(--lh-tight); /* ω: 1 → --lh-tight 1.1 (9% diff, within 10%) */
  transition:
    color 150ms var(--ease-flutter),
    /* ω-defer: 150ms duration — --dur-fast=180ms is 20% off, no token within 10%; --ease-smooth → --ease-flutter (closest available motion feel) */
    gap 150ms var(--ease-out-expo); /* ω-defer: 150ms — same; --ease-out → --ease-out-expo (identical curve) */
}

@media (hover: hover) and (pointer: fine) {
  .btn-text--light:hover {
    color: var(--color-white);
    opacity: 1; /* override .btn-text:hover 0.85 */
  }
}

/* ---------- Responsive: tablet (<=1024px) ---------- */

@media (max-width: 1024px) {
  .founders-supporting {
    grid-template-columns: repeat(3, 1fr); /* stay 3-col */
    gap: var(--space-5);
  }

  .founder-featured {
    gap: var(--space-8);
    padding: var(--space-8);
  }

  .founder-featured__avatar {
    inline-size: 140px;
    block-size: 140px;
    font-size: 42px; /* ω-defer: avatar monogram — layout-critical, not body text */
  }
}

/* ---------- Responsive: mobile (<=768px) ---------- */

@media (max-width: 768px) {
  .journey-strip {
    flex-direction: column;
    align-items: center; /* cross-axis = horizontal centering when column */
    gap: 0;
    max-inline-size: 220px;
  }

  .journey-step {
    inline-size: auto;
  }

  .journey-connector {
    inline-size: 1px;
    block-size: 24px;
    margin: 0;
    background: repeating-linear-gradient(
      180deg,
      rgb(255 255 255 / 15%) 0,
      rgb(255 255 255 / 15%) 4px,
      transparent 4px,
      transparent 8px
    );
  }

  /* Ω T17: .founder-featured layout topology moved to @container (min-width: 600px) above.
     The base state is now the narrow/stacked layout — no viewport overrides needed here. */

  .team-proof-bar {
    flex-direction: column;
    gap: var(--space-2);
    text-align: center;
  }

  .team-proof-bar__dot {
    display: none; /* Hide middots when stacked */
  }
}

/* ---------- Responsive: phone (<=430px / phone-l) ---------- */

@media (max-width: 430px) {
  .founders-supporting {
    grid-template-columns: 1fr;
    max-inline-size: 400px;
    margin: 0 auto;
    gap: var(--space-4); /* 16px — tighter */
  }

  .team-narrative {
    font-size: 15px; /* out-of-scope — not touching */
    padding-inline-start: var(--space-5);
  }

  .team-header__title {
    font-size: clamp(
      1.75rem,
      6vw,
      2.25rem
    ); /* ω: bespoke clamp override — retained as responsive fine-tune, no standard token matches this phone-specific range */
  }
}

/* ============================================================
   HOW IT WORKS — Layer 12: Calibration Timeline (Horology)
   Vernier-scale aesthetic: thin ruler, tick marks, 3 primary marks
   ============================================================ */

.how-it-works {
  padding: var(--section-padding) 0;
  background: var(--color-white);
}

.calibration {
  position: relative;
  max-inline-size: 960px;
  margin: 0 auto;
}

.calibration-scale {
  position: relative;
  block-size: 40px; /* ω-defer: decorative fixed height — no matching fluid token */
  margin-block-end: var(
    --space-10
  ); /* ω-defer: fluid --space-l adds height at 430px baseline viewport */
}

.calibration-scale__line {
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 0;
  block-size: 1px;
  background: var(--color-navy);
  opacity: 0.15;
  transform: translateY(-50%);
}

.calibration-scale__line::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 11px,
    color-mix(in oklch, var(--color-navy), transparent 92%) 11px,
    color-mix(in oklch, var(--color-navy), transparent 92%) 12px
  );
  block-size: 8px;
  inset-block-start: -3px;
}

.calibration-scale__ticks {
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-around;
}

.calibration-mark {
  inline-size: 2px;
  block-size: 20px;
  background: var(--color-amber);
  border-radius: 1px;
  position: relative;
}

.calibration-mark::after {
  content: "";
  position: absolute;
  inset-block-end: -4px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--color-amber);
}

.calibration__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(
    --space-8
  ); /* ω-defer: --space-l fluid value adds height at 430px baseline; step retained */
}

.cal-step {
  text-align: center;
  padding: var(
    --space-6
  ); /* ω-defer: --space-m fluid value adds height at 430px baseline; step retained */
}

.cal-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  border: 2px solid var(--color-amber); /* ring stays vivid */
  color: var(--color-amber-ink); /* numeral inside ring — readable */
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: 20px; /* BRAND-ALIGNMENT: numeral in 40px circle — must not fluid-scale */
  margin-block-end: var(
    --space-4
  ); /* ω-defer: --space-s fluid value adds height at 430px baseline; step retained */
}

.cal-step__title {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(
    --text-base
  ); /* corrected: --text-md (34px) too large for a step card heading; --text-base = 19–27px */
  color: var(--color-navy);
  margin-block-end: var(
    --space-3
  ); /* ω-defer: --space-xs fluid value adds height at 430px baseline; step retained */
}

.cal-step__desc {
  font-family: var(--font-body);
  font-size: var(
    --text-xs
  ); /* corrected: --text-sm (21px) too large for compact step description; --text-xs = 13–17px */
  line-height: 1.65; /* ω-defer: --lh-relaxed=1.625 shifts baseline height; exact value retained */
  color: var(--color-text-secondary);
  max-inline-size: 280px; /* ω-defer: prose column constraint — no matching fluid token */
  margin: 0 auto;
}

/* ============================================================
   FEATURES — Layer 9: Apothecary Cabinet (1st of 2 uses)
   6 drawers in a 3×2 grid. Amber-gold top-border label strips.
   Light Premium Hybrid card: white → cream gradient fill.
   ============================================================ */

.features {
  padding: var(--section-padding) 0;
  background: var(--color-cream);
}

.apothecary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-inline-size: 1040px;
  margin: 0 auto;
}

.apothecary-drawer {
  /* Ω T18: container-type enables @container queries so internal layout
     decisions are made against the card's own width, not the viewport.
     container-name scopes queries to avoid nested-container ambiguity.
     Card is always stacked (label → icon → desc), so no @container layout
     rule is needed — declaration registers the containment context. */
  container-type: inline-size;
  container-name: feature-card;
  position: relative;
  background: linear-gradient(
    180deg,
    var(--color-white) 0%,
    var(--color-cream-warm) 100%
  ); /* ω: #f9f3e6 → --color-cream-warm (color-mix cream+amber 8%) */
  border: 1px solid var(--color-border);
  border-block-start: 3px solid var(--color-amber);
  border-radius: var(--radius-lg);
  padding: 20px 18px;
  text-align: center;
  box-shadow:
    inset 0 2px 4px rgb(0 0 0 / 2%),
    0 2px 8px rgb(0 0 0 / 4%);
  transition:
    transform var(--duration-hover) var(--ease-out),
    /* ω-defer: --duration-hover + --ease-out in style.css; Phase 7 motion tokens */ box-shadow
      var(--duration-hover) var(--ease-out);
}

.apothecary-drawer:hover {
  transform: translateY(
    calc(-1 * var(--move-lift-sm))
  ); /* ω-defer: --move-lift-sm in style.css; Phase 7 motion tokens */
  box-shadow:
    inset 0 2px 4px rgb(0 0 0 / 2%),
    0 6px 20px rgb(0 0 0 / 8%);
}

.apothecary-drawer__label {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  letter-spacing: 0.06em; /* ω-defer: deliberate 0.06em all-caps label; --tracking-wider is 0.05em (delta too visible) */
  text-transform: uppercase;
  color: var(--color-amber-ink); /* small-caps label on cream drawer — needs AA */
  margin-block-end: var(--space-s); /* ω: --space-4 (16px) → --space-s (clamp 16px→24px) */
}

.apothecary-drawer__icon {
  display: block;
  font-size: 24px; /* ω-defer: no icon-size token; Phase 7 scale */
  color: var(--color-navy);
  margin-block-end: var(--space-s); /* ω: --space-4 (16px) → --space-s (clamp 16px→24px) */
  opacity: 0.7;
}

.apothecary-drawer__desc {
  font-family: var(--font-body);
  font-size: var(
    --text-xs
  ); /* corrected: --text-sm (21px) too large for compact feature card description; --text-xs = 13–17px */
  line-height: 1.65; /* ω-defer: deliberate 1.65; --lh-relaxed (1.625) delta is design-intentional */
  color: var(
    --color-text-secondary
  ); /* ω-defer: --color-text-secondary in style.css; Phase 7 semantic tokens */
}

/* ============================================================
   COURSES PREVIEW — Arc beat: PROOF
   ============================================================ */

.courses-preview {
  padding: var(--section-padding) 0;
  background: var(--color-white); /* Scholar's Folio: white surface */
}

.courses-preview h2 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(
    --text-lg
  ); /* corrected: --text-2xl (69px max) over-scaled; --text-lg (43px max) matches intended 40px cap */
  line-height: var(
    --lh-snug
  ); /* ω: 1.15 → --lh-snug (1.25); ω-defer: exact 1.15 between tight/snug */
  letter-spacing: -0.025em; /* tighter than --tracking-tight (-0.015em) — commercial section needs editorial punch */
  color: var(--color-navy);
  margin-block-end: var(
    --space-s
  ); /* ω: --space-5 (20px) → --space-s (16-24px fluid, min match ✓) */
}

.courses-preview__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-block-start: 24px;
}

.course-card {
  /* Ω T18: container-type enables @container queries so internal layout
     decisions are made against the card's own width, not the viewport.
     container-name scopes queries to avoid nested-container ambiguity.
     Card is flex-column (icon → title → desc → includes → CTA), always
     stacked — no @container layout rule needed; declaration registers
     the containment context. */
  container-type: inline-size;
  container-name: course-card;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition:
    transform var(--dur-fast) var(--ease-out-expo),
    /* ω: --duration-hover/--ease-out → Ω tokens */ box-shadow var(--dur-fast) var(--ease-out-expo);
}

.course-card:hover {
  transform: translateY(
    -4px
  ); /* ω-defer: --move-lift-sm not in Ω tokens; 4px literal until token added */
  box-shadow: var(--shadow-lg);
}

.course-card--featured {
  border-color: var(--color-pink);
  border-width: 2px;
}

.course-card__badge {
  position: absolute;
  inset-block-start: -12px; /* ω-defer: decorative offset, no token equivalent */
  inset-inline-start: var(--space-m); /* ω: --space-6 (24px) → --space-m (24-36px fluid) */
  background: var(--color-pink);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-2xs); /* ω: 12px → --text-2xs (~11-13px fluid) */
  letter-spacing: var(
    --tracking-wide
  ); /* ω: 0.03em → --tracking-wide (0.025em); ω-defer: 0.03em exact */
  text-transform: uppercase;
  padding: var(--space-3xs) var(--space-xs); /* ω: 4px 14px → --space-3xs --space-xs (4-6px, 12-18px fluid) */
  border-radius: var(--radius-full);
}

.course-card > i {
  font-size: 32px; /* ω-defer: icon size, no fluid token for icon glyphs */
  color: var(--color-pink);
  margin-block-end: var(
    --space-s
  ); /* ω: --space-4 (16px) → --space-s (16-24px fluid, min exact match ✓) */
}

.course-card h3 {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(
    --text-base
  ); /* corrected: --text-md (34px) too large for card heading; --text-base = 19–27px */
  color: var(--color-navy);
  margin-block-end: var(
    --space-xs
  ); /* ω: --space-3 (12px) → --space-xs (12-18px fluid, min exact match ✓) */
}

.course-card__note {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-2xs, 0.7rem);
  color: var(--color-burgundy);
  opacity: 0.8;
  margin-block-start: calc(var(--space-xs) * -0.5);
  margin-block-end: var(--space-xs);
}

.course-card > p {
  font-family: var(--font-body);
  font-size: var(
    --text-xs
  ); /* corrected: --text-sm (21px) too large for compact card body; --text-xs = 13–17px */
  line-height: var(
    --lh-relaxed
  ); /* ω: 1.6 → --lh-relaxed (1.625); ω-defer: exact 1.6 between normal/relaxed */
  color: var(
    --color-text-muted
  ); /* ω: --color-text-secondary (legacy) → --color-text-muted (Ω semantic) */
  margin-block-end: var(--space-s); /* ω: --space-5 (20px) → --space-s (16-24px fluid) */
}

.course-card__includes {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-m); /* ω: --space-6 (24px) → --space-m (24-36px fluid) */
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs); /* ω: --space-2 (8px) → --space-2xs (8-12px fluid, min exact match ✓) */
  flex-grow: 1;
}

.course-card__includes li {
  display: flex;
  align-items: center;
  gap: var(--space-2xs); /* ω: --space-2 (8px) → --space-2xs (8-12px fluid, min exact match ✓) */
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(
    --color-text-muted
  ); /* ω: --color-text-secondary (legacy) → --color-text-muted (Ω semantic) */
}

.course-card__includes li i {
  font-size: 16px; /* ω-defer: icon size, no fluid token for icon glyphs */
  color: var(--color-pink);
  flex-shrink: 0;
}

.course-card .btn {
  align-self: flex-start;
  margin-block-start: auto;
}

.courses-preview__card-btn {
  color: var(--color-navy);
  border-color: var(--color-navy);
}

.courses-preview__card-btn:hover {
  background: var(--color-navy);
  color: var(--color-white);
}

/* ── Whole-card link affordance (Courses Preview) ──────────────
   Card itself is the <a>. Cue chevron lives at the bottom and
   glides right on hover. Focus ring is drawn on the card. */
.course-card--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.course-card--link:hover {
  border-color: var(--color-burgundy);
}
.course-card--link.course-card--featured:hover {
  border-color: var(--color-pink);
}
.course-card--link:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-pink); /* ω: 2px → --focus-ring-width (3px) */
  outline-offset: var(--focus-ring-offset); /* ω: 3px → --focus-ring-offset (2px) */
}

.course-card__cue {
  align-self: flex-start;
  margin-block-start: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs); /* ω: 8px → --space-2xs (8-12px fluid, min exact match ✓) */
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs); /* ω: 14px → --text-xs (~13-17px fluid) */
  letter-spacing: var(
    --tracking-wide
  ); /* ω: 0.02em → --tracking-wide (0.025em); ω-defer: exact 0.02em */
  color: var(--color-burgundy);
  padding-block-start: var(--space-2xs); /* ω: --space-2 (8px) → --space-2xs (8-12px fluid) */
  border-block-start: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out-expo); /* ω: --duration-hover/--ease-out → Ω tokens */
}
.course-card__cue i {
  font-size: 16px; /* ω-defer: icon size, no fluid token for icon glyphs */
  transition: transform var(--dur-fast) var(--ease-out-expo); /* ω: --duration-hover/--ease-out → Ω tokens */
}
.course-card--link:hover .course-card__cue i {
  transform: translateX(4px); /* ω-defer: micro-nudge, no motion token for translateX offsets */
}
.course-card--featured .course-card__cue {
  color: var(--color-pink);
}

/* ── Course card accent palette ──────────────────────────────
   Card 1 (featured): Burgundy — authority, depth, flagship
   Card 2: Teal — precision, subject-focused
   Card 3: Amber — time pressure, practice, past papers        */

.course-card--featured {
  background: color-mix(in oklch, var(--color-burgundy), white 96%);
  border-color: color-mix(in oklch, var(--color-burgundy), transparent 72%);
  border-block-start: 3px solid var(--color-burgundy);
}
.course-card--featured > i {
  color: var(--color-burgundy);
}
.course-card--featured .course-card__includes li i {
  color: var(--color-burgundy);
}
.course-card--featured:hover {
  border-color: color-mix(in oklch, var(--color-burgundy), transparent 50%);
}

.courses-preview__grid .course-card:nth-child(2) {
  background: color-mix(in oklch, var(--color-teal), white 94%);
  border-color: color-mix(in oklch, var(--color-teal), transparent 72%);
  border-block-start: 3px solid var(--color-teal);
}
.courses-preview__grid .course-card:nth-child(2) > i {
  color: var(--color-teal);
}
.courses-preview__grid .course-card:nth-child(2) .course-card__includes li i {
  color: var(--color-teal);
}
.courses-preview__grid .course-card:nth-child(2) .course-card__cue {
  color: var(--color-teal);
}
.courses-preview__grid .course-card:nth-child(2):hover {
  border-color: color-mix(in oklch, var(--color-teal), transparent 45%);
}

.courses-preview__grid .course-card:nth-child(3) {
  background: color-mix(in oklch, var(--color-amber), white 93%);
  border-color: color-mix(in oklch, var(--color-amber), transparent 68%);
  border-block-start: 3px solid var(--color-amber);
}
.courses-preview__grid .course-card:nth-child(3) > i {
  color: var(--color-amber-ink);
}
.courses-preview__grid .course-card:nth-child(3) .course-card__includes li i {
  color: var(--color-amber-ink);
}
.courses-preview__grid .course-card:nth-child(3) .course-card__cue {
  color: var(--color-amber-ink);
}
.courses-preview__grid .course-card:nth-child(3):hover {
  border-color: color-mix(in oklch, var(--color-amber), transparent 40%);
}

.courses-preview__all-btn {
  color: var(--color-navy);
  border-color: var(--color-navy);
  margin-block-start: var(--space-xl); /* ω: --space-10 (40px) → --space-xl (48-72px fluid) */
}

.courses-preview__all-btn:hover {
  background: var(--color-navy);
  color: var(--color-white);
}

/* ============================================================
   ITALY TEASER — Layer 6: Observatory (singular awe moment)
   Dark navy field. Dawn glow (radial amber→rose) expands on scroll.
   Constellation star-points resolve into Italy map.
   ============================================================ */

.italy-teaser {
  position: relative;
  padding: var(--section-padding) 0;
  background: var(--color-navy);
  color: var(--color-white);
  overflow: hidden;
  isolation: isolate;
}

/* Dawn glow — radial gradient that expands via JS scroll progress */
.observatory-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    ellipse 35% 45% at 50% 40%,
    color-mix(in oklch, var(--color-amber), transparent 80%) 0%,
    /* ω: rgb(217 155 71 / 20%) → color-mix */
    color-mix(in oklch, var(--color-rose), transparent 90%) 40%,
    /* ω: rgb(232 196 201 / 10%) → color-mix */ transparent 70%
  );
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity var(--dur-crawl) var(--ease-flutter),
    /* ω: 0.8s ease → --dur-crawl 600ms / --ease-flutter */ transform var(--dur-cinematic)
      var(--ease-out-quart); /* ω: 1.2s ease → --dur-cinematic 1400ms; ω-defer: 1.2s closest to cinematic (1400ms, 17% diff — next closest epic 900ms is 25% off) */
}

.italy-teaser.observatory-active .observatory-glow {
  opacity: 1;
  transform: scale(1);
}

.italy-teaser .container {
  position: relative;
  z-index: 1;
}

.observatory {
  text-align: center;
}

/* Map container */
.observatory-map {
  max-inline-size: 360px; /* ω-defer: layout geometry for the observatory SVG map — coordinate-adjacent */
  margin: 0 auto var(--space-xl); /* ω: --space-10 (40px) → --space-xl (clamp 48–72px fluid) */
}

.observatory-map svg {
  inline-size: 100%;
  block-size: auto;
}

/* Star-city dots — start faint, brighten on observatory-active */
.observatory-map .star-city {
  fill: var(--color-amber);
  opacity: 0.2;
  transition: opacity var(--dur-crawl) var(--ease-flutter) 0.3s; /* ω: 0.8s ease → --dur-crawl / --ease-flutter; delay 0.3s preserved (no token for delays) */
}

.italy-teaser.observatory-active .star-city {
  opacity: 1;
}

/* City labels — hidden until active */
.observatory-map .city-label {
  font-family: var(--font-body);
  font-size: 9px; /* ω-defer: SVG text coordinate-adjacent — 9px maps viewBox; no fluid token applies */
  font-weight: var(--weight-medium);
  fill: color-mix(
    in oklch,
    var(--color-white),
    transparent 30%
  ); /* ω: rgb(255 255 255 / 70%) → color-mix */
  opacity: 0;
  transition: opacity var(--dur-crawl) var(--ease-flutter) 0.6s; /* ω: 0.6s ease → --dur-crawl / --ease-flutter; delay 0.6s preserved */
}

.italy-teaser.observatory-active .city-label {
  opacity: 1;
}

/* Coastline path — draws in via stroke-dashoffset */
.observatory-map .coastline {
  fill: none;
  stroke: color-mix(
    in oklch,
    var(--color-white),
    transparent 75%
  ); /* ω: rgb(255 255 255 / 25%) → color-mix */
  stroke-width: 1.5; /* ω-defer: SVG stroke geometry — no token for stroke widths */
  stroke-dasharray: 2400; /* ω-defer: SVG path coordinate — preserve */
  stroke-dashoffset: 2400; /* ω-defer: SVG path coordinate — preserve */
  transition: stroke-dashoffset var(--dur-cinematic) var(--ease-out-quart) 0.2s; /* ω: 1.5s ease → --dur-cinematic 1400ms (6.7% diff ✓); delay 0.2s preserved */
}

.italy-teaser.observatory-active .coastline {
  stroke-dashoffset: 0;
}

/* Pull-quote */
.observatory-quote {
  max-inline-size: 600px; /* ω-defer: layout geometry, not a text/space token */
  margin: 0 auto var(--space-l); /* ω: --space-8 (32px) → --space-l (clamp 32–48px fluid) */
}

.observatory-quote p {
  font-family: var(--font-serif-editorial);
  font-style: italic;
  font-size: clamp(
    1.1rem,
    0.5vw + 1rem,
    1.35rem
  ); /* ω-defer: custom pull-quote ramp, between --text-sm/--text-base; not within 10% of either fluid token */
  line-height: var(--lh-relaxed); /* ω: 1.65 → --lh-relaxed 1.625 (1.5% diff ✓) */
  color: color-mix(
    in oklch,
    var(--color-white),
    transparent 25%
  ); /* ω: rgb(255 255 255 / 75%) → color-mix */
}

.observatory-cta {
  margin-block-start: var(--space-m); /* ω: --space-6 (24px) → --space-m (clamp 24–36px fluid) */
}

@media (prefers-reduced-motion: reduce) {
  .observatory-glow {
    opacity: 1;
    transform: scale(1);
    transition: none;
  }
  .observatory-map .star-city {
    opacity: 1;
    transition: none;
  }
  .observatory-map .city-label {
    opacity: 1;
    transition: none;
  }
  .observatory-map .coastline {
    stroke-dashoffset: 0;
    transition: none;
  }
}

/* ============================================================
   VINTAGE CARTOGRAPHER'S MAP — Checkpoint 1 (static)
   A parchment card floats on the navy section. Italy is drawn
   in sepia ink. A near-invisible cool wash reads as moonlight.
   Paper grain is generated inline via an SVG data-URI filter
   (fractal noise → luminance → sepia tint) so it tiles seamlessly
   without a raster asset. Balls + draw animation arrive later.
   ============================================================ */

.italy-teaser__map-card {
  position: relative;
  max-inline-size: 400px; /* reduced from 560px — map was dominating the section */
  aspect-ratio: 610 / 792; /* ω-defer: SVG viewBox ratio — preserve exactly */
  margin: var(--space-xl) auto var(--space-xl); /* ω: --space-10 (40px) → --space-xl (48–72px fluid); --space-12 (48px) → --space-xl (clamp min 48px ✓) */
  background-color: #efe1c4;
  background-image:
    radial-gradient(
      ellipse 120% 90% at 50% 50%,
      rgb(234 218 185 / 55%) 0%,
      rgb(216 200 164 / 0%) 65%
    ),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch' seed='7'/><feColorMatrix type='luminanceToAlpha'/><feColorMatrix type='matrix' values='0 0 0 0 0.42  0 0 0 0 0.3  0 0 0 0 0.16  0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  background-size:
    auto,
    240px 240px;
  background-repeat: no-repeat, repeat;
  border-radius: 6px;
  /* Ball drops into the card from above; overflow must stay visible so the
     quill bead renders as it falls across the card edge. Backgrounds, inset
     shadows and ::after moonlight are clipped to border-radius naturally. */
  overflow: visible;
  isolation: isolate;
  box-shadow:
    inset 0 0 60px rgb(120 90 50 / 35%),
    inset 0 1px 0 rgb(255 246 220 / 40%),
    0 22px 60px rgb(4 8 20 / 55%),
    0 6px 18px rgb(0 0 0 / 28%);
}

.italy-teaser__map-art {
  position: relative;
  z-index: 1;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  padding: 5% 6%;
  box-sizing: border-box;
  /* Inline SVG default overflow is `hidden`; we need `visible` so the ball
     renders above the card's paper as it falls in from outside the viewBox. */
  overflow: visible;
  color: #3d2817;
}

/* Moonlight wash — faint cool tint sits above the ink, below nothing.
   This is the whole reason the scene reads as "viewed at night". */
.italy-teaser__map-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(180 195 215 / 12%);
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
}

/* ============================================================
   REGION FILL LAYER — washed Dusty Rose → Burgundy hover
   Historically, old atlases used rose/carmine washes to tint
   countries; we lean into that. Regions with universities sit a
   touch warmer at rest, then rise + deepen into full Burgundy on
   hover, revealing the region + city list via native SVG <title>.
   ============================================================ */

/* Every Italian region: soft Dusty Rose base with a plum border.
   These are presentation attributes as CSS — class selector beats
   any inherited SVG fill from the root, so removing fill="none"
   is belt-and-braces, not strictly required. */
.italy-region path {
  fill: #d4a8ae; /* ω-defer: map region base fill — no palette token within 10% (--color-rose #E8C4C9 is too light) */
  stroke: #8b4654; /* ω-defer: map region border — no palette token within 10% */
  stroke-width: 1; /* ω-defer: SVG stroke geometry */
  transition:
    fill var(--dur-base) var(--ease-flutter),
    /* ω: 0.28s ease → --dur-base 240ms (14% diff — nearest; ω-defer note: 0.28s is between --dur-fast 180ms and --dur-base 240ms) */
    stroke var(--dur-base) var(--ease-flutter); /* ω: same as fill */
}

/* Regions with universities: slightly warmer/deeper at rest so the
   eye reads the target set before any interaction. Eight of twenty
   regions qualify — the map tells its own story of where to look. */
.italy-region--has-uni path {
  fill: #c88b94;
}

/* Every region lifts on hover — the whole map feels alive, not just
   the "important" ones. has-uni regions additionally deepen to full
   Burgundy; regions without universities go a mid-rose on hover so
   the colour change still reads without misleading the eye. */
.italy-region {
  transition:
    transform var(--dur-base) var(--ease-flutter),
    /* ω: 0.28s ease → --dur-base 240ms / --ease-flutter */ filter var(--dur-base)
      var(--ease-flutter);
  cursor: pointer;
}
.italy-region:hover {
  transform: translateY(-2.5px);
  filter: drop-shadow(0 3px 6px rgb(107 40 56 / 32%));
}
.italy-region:hover path {
  fill: #b27682;
  stroke: #6b2838;
}
.italy-region--has-uni:hover path {
  fill: var(--color-burgundy, #6b2838);
  stroke: #3d1018;
}

/* Decoration (Corsica, Malta, Vatican, San Marino): present but
   quiet — they anchor Italy's geographic context without competing
   with the Italian regions. No hover, no cursor change. */
.italy-region--deco {
  fill: #e8d8c2;
  stroke: #9b7a55;
  stroke-width: 0.7;
  opacity: 0.45;
  pointer-events: none;
}

/* Hover label — shows region name + universities instantly, without
   waiting for the browser's ~1.5s native <title> tooltip delay. Lives
   at the bottom of the parchment card, fades in only while a region
   is hovered. Above the moonlight wash (z:2), invisible to pointer
   events so it never blocks a neighbouring region's hover zone. */
.italy-teaser__hover-label {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: 4.5%; /* ω-defer: % anchor into SVG card — coordinate-adjacent */
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
  text-align: center;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out-quart); /* ω: 0.22s ease → --dur-fast 180ms (18% diff — nearest; ease → --ease-out-quart) */
  max-inline-size: 88%; /* ω-defer: % sizing relative to SVG card */
  padding: 0 4%; /* ω-defer: % padding relative to SVG card */
}
.italy-teaser__map-card.is-hovering .italy-teaser__hover-label {
  opacity: 1;
}
.italy-teaser__hover-label-region {
  display: block;
  font-family: var(--font-serif-editorial); /* ω: Georgia, serif → --font-serif-editorial */
  font-style: italic;
  font-weight: var(--weight-semibold); /* ω: 600 → --weight-semibold */
  font-size: var(--text-sm); /* ω: 15px → --text-sm clamp(1rem … 1.333rem) min=16px (6.7% diff ✓) */
  color: #3d2817; /* ω-defer: deep sepia ink — no token within 10% (--color-burgundy #6B2838 = 77% lightness diff) */
  line-height: var(--lh-tight); /* ω: 1.15 → --lh-tight 1.1 (4.5% diff ✓) */
  letter-spacing: 0.01em; /* ω-defer: 0.01em — no token (--tracking-normal=0 is 100% off, --tracking-wide=0.025em is 60% off) */
}
.italy-teaser__hover-label-unis {
  display: block;
  margin-block-start: 3px; /* ω-defer: micro 3px gap — no token within 10% (--space-3xs min=4px is 33% off) */
  font-family: var(--font-body); /* ω: explicit fallback list → canonical token */
  font-size: var(
    --text-2xs
  ); /* ω: 10.5px → --text-2xs clamp(0.694rem … 0.829rem) ≈ 11.1–13.3px; min 11.1px (5.7% diff ✓) */
  letter-spacing: 0.08em; /* ω-defer: 0.08em — nearest --tracking-wider 0.05em is 37.5% off */
  text-transform: uppercase;
  color: var(--color-burgundy); /* ω: #6b2838 → --color-burgundy */
  font-weight: var(--weight-semibold); /* ω: 600 → --weight-semibold */
}
.italy-teaser__hover-label-unis:empty {
  display: none;
}

/* Reduced-motion: colour shift only, no lift or shadow. Label still
   fades (opacity is an accepted transition even in reduced-motion). */
@media (prefers-reduced-motion: reduce) {
  .italy-region,
  .italy-region path {
    transition: fill var(--dur-fast) var(--ease-linear); /* ω: 0.2s linear → --dur-fast 180ms (10% diff ✓) / --ease-linear */
  }
  .italy-region:hover {
    transform: none;
    filter: none;
  }
}

/* ============================================================
   INK DROP — Checkpoint 2 (single Milan ball)
   A quill bead falls from above the card, splashes on Milan,
   and leaves a sepia ink dot with a soft bleed halo.
   ============================================================ */

/* Ink drops are decorative — they must never intercept hover on the
   region underneath. Halo finishes at r=20/opacity:0 but still blocks
   pointer events without this. Entire group opts out. */
.ink-drop {
  pointer-events: none;
}

/* The falling ball — a dark quill bead, substantial enough to read at scale. */
.ink-drop__ball {
  fill: #2b1a0a;
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
  /* Initial resting state (used before .is-dropping lands).
     -220px starts the ball just above the card so the entire fall
     is visible — the old -360px hid most of the descent in empty navy. */
  transform: translateY(-220px);
  opacity: 0;
  r: 7;
}

/* The ink mark that remains after the drop lands. */
.ink-drop__dot {
  fill: #3d2817;
  transform-box: fill-box;
  transform-origin: center;
}

/* Soft bleed halo around the dot — mimics ink soaking parchment. */
.ink-drop__halo {
  fill: #3d2817;
  opacity: 0;
  filter: blur(2px);
}

/* Trigger: set once the card is in view so the cascade plays exactly once.
   Each ink-drop group carries `--n` (0..14) — multiplied by 0.08s for stagger.
   Northernmost city (Bergamo) drops first; Catania lands last. */
.italy-teaser__map-card.is-dropping .ink-drop__ball {
  animation-name: ink-ball-fall;
  animation-duration: var(--dur-epic); /* ω: 0.95s → --dur-epic 900ms (5.3% diff ✓) */
  animation-timing-function: cubic-bezier(
    0.42,
    0,
    0.82,
    0.55
  ); /* ω-defer: custom impact curve — no token within 10%; closest --ease-in-out-quart differs in shape */
  animation-delay: calc(
    0.2s + var(--n, 0) * 0.08s
  ); /* ω-defer: stagger calc with non-token units — preserve */
  animation-fill-mode: forwards;
}
.italy-teaser__map-card.is-dropping .ink-drop__dot {
  animation-name: ink-dot-settle;
  animation-duration: 0.45s; /* ω-defer: 450ms — --dur-slow 400ms is 11.1% off (>10% threshold) */
  animation-timing-function: var(--ease-out-quart); /* ω: ease-out → --ease-out-quart */
  animation-delay: calc(1.07s + var(--n, 0) * 0.08s); /* ω-defer: stagger calc — preserve */
  animation-fill-mode: forwards;
}
.italy-teaser__map-card.is-dropping .ink-drop__halo {
  animation-name: ink-halo-bleed;
  animation-duration: var(--dur-epic); /* ω: 0.95s → --dur-epic 900ms (5.3% diff ✓) */
  animation-timing-function: var(--ease-out-quart); /* ω: ease-out → --ease-out-quart */
  animation-delay: calc(1.09s + var(--n, 0) * 0.08s); /* ω-defer: stagger calc — preserve */
  animation-fill-mode: forwards;
}

@keyframes ink-ball-fall {
  /* Ball starts just above the card — fade in fast, then accelerate down. */
  0% {
    transform: translateY(-220px);
    opacity: 0;
  }
  10% {
    transform: translateY(-200px);
    opacity: 1;
  }
  /* Full opacity sustained through the fall. */
  85% {
    transform: translateY(0);
    opacity: 1;
  }
  /* Impact — splat compression (horizontal spread, vertical squash). */
  92% {
    transform: translateY(2px) scale(1.55, 0.38);
    opacity: 1;
  }
  /* Bead soaks into paper — fade + tighten. */
  100% {
    transform: translateY(0) scale(0.55, 0.55);
    opacity: 0;
  }
}

@keyframes ink-dot-settle {
  /* The dot grows from nothing to a full mark. */
  0% {
    r: 0;
  }
  60% {
    r: 7;
  }
  /* Slight settle — the dot tightens as ink dries. */
  100% {
    r: 6;
  }
}

@keyframes ink-halo-bleed {
  /* Ink bleeds outward, then fades as it dries into the paper. */
  0% {
    r: 3;
    opacity: 0;
  }
  30% {
    r: 14;
    opacity: 0.32;
  }
  100% {
    r: 20;
    opacity: 0;
  }
}

/* Reduced-motion: no flight, no bleed — the dot simply appears. */
@media (prefers-reduced-motion: reduce) {
  .italy-teaser__map-card.is-dropping .ink-drop__ball {
    animation: none;
    opacity: 0;
  }
  .italy-teaser__map-card.is-dropping .ink-drop__halo {
    animation: none;
    opacity: 0;
  }
  .italy-teaser__map-card.is-dropping .ink-drop__dot {
    animation: none;
    r: 5.5;
  }
}

@media (max-width: 768px) {
  .italy-teaser__map-card {
    max-inline-size: 440px;
  }
}

@media (max-width: 430px) {
  .italy-teaser__map-card {
    max-inline-size: 320px; /* ω-defer: SVG card geometry at mobile — coordinate-adjacent */
    margin: var(--space-l) auto var(--space-xl); /* ω: --space-8 (32px) → --space-l (32–48px fluid); --space-10 (40px) → --space-xl (48–72px fluid) */
  }
}

/* ============================================================
   TESTIMONIALS — Pull-Quote Folio (Layer 1 + Layer 4)
   Full-width pull-quotes in Georgia italic, crossfade carousel.
   Video testimonial slots with click-to-play.
   ============================================================ */

.testimonials {
  padding: var(--section-padding) 0;
  background: var(--color-white);
}

.testimonials-carousel {
  position: relative;
  max-inline-size: 600px;
  margin: 0 auto;
  min-block-size: 180px;
  /* Ω T19: container-type enables @container queries so internal layout
     can adapt to carousel width rather than viewport width.
     container-name scopes queries to avoid nested-container ambiguity.
     Pull-quote is center-stacked at all widths — declaration-only (no
     @container layout rule needed); registers the sizing context. */
  container-type: inline-size;
  container-name: testimonials-carousel;
}

/* Slides — stacked, crossfade */
.testimonial-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out-quart);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.testimonial-slide.is-active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}

/* Pull-quote styling */
.pull-quote {
  text-align: center;
  padding: var(--space-8) var(--space-6);
}

.pull-quote__hook {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm); /* ω: custom clamp 1.05→1.25rem ≈ --text-sm 1.0→1.333rem (≤7% drift) */
  letter-spacing: -0.01em;
  color: var(--color-burgundy);
  margin-block-end: var(--space-3);
  line-height: 1.3; /* ω-defer: 1.3 between --lh-snug(1.25) and --lh-normal(1.5); no match within 4% */
}

.pull-quote__text {
  font-family: var(--font-serif-editorial);
  font-style: italic;
  font-size: clamp(
    0.9375rem,
    0.4vw + 0.8rem,
    1.125rem
  ); /* compact: 15–18px — large testimonials looked fake/stretched */
  line-height: var(--lh-relaxed); /* ω: 1.65 → --lh-relaxed 1.625 (1.5% drift) */
  color: var(--color-navy);
  margin-block-end: var(--space-6);
  max-inline-size: 720px;
  margin-inline: auto;
}
.pull-quote__text strong {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-style: normal;
  color: var(--color-burgundy);
}

/* Ω T23 — Testimonial score pill.
   Sage (--color-sage = oklch(77% 0.06 140) / #A8C69A) is the
   success/validation accent in the design system. Student score results
   (68.5, 31.5 Biology · 64 overall, 76) are genuine proof of achievement —
   a sage left-border + light sage tint whispers "verified result"
   without competing with the editorial prose. Kept inline so it reads
   naturally within the sentence. Numbers stay sans-serif (Outfit) per
   the typography rule: serif digits hurt scannability. */
.testimonial-score {
  display: inline;
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-style: normal;
  font-size: 0.92em; /* ω-defer: em-relative intentional — scales with pull-quote prose size */
  color: color-mix(
    in oklch,
    var(--color-sage),
    var(--color-navy) 45%
  ); /* ω-defer: @supports guard omitted — color-mix(in oklch) supported in all 7 target browsers (Edge/Chrome/Brave/Safari/Samsung/Opera/Firefox) as of 2026 */
  background: color-mix(in oklch, var(--color-sage) 18%, white);
  padding-block: 0.1em;
  padding-inline: 0.45em;
  border-radius: 3px; /* ω-defer: between --radius-xs(2px) and --radius-sm(4px); propose --radius-pill-inline token if pattern recurs */
  border-inline-start: 2px solid var(--color-sage);
  white-space: nowrap;
  vertical-align: baseline;
}

.pull-quote__attribution {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.pull-quote__attribution strong {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  color: var(--color-navy);
}

.pull-quote__attribution span {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* Video testimonial slot */
.video-testimonial {
  text-align: center;
  padding: var(--space-8);
}

.video-testimonial__poster {
  position: relative;
  inline-size: 100%;
  max-inline-size: 480px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.video-play-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-pink);
  font-size: 48px; /* ω-defer: icon font-size, not body text — no --text-* token covers 3rem+ icons */
  transition: transform var(--dur-fast) var(--ease-out-expo);
}

.video-play-btn:hover {
  transform: scale(1.1);
}

.video-testimonial__name {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.video-testimonial video {
  inline-size: 100%;
  max-inline-size: 480px;
  border-radius: var(--radius-lg);
}

/* Carousel navigation dots */
.carousel-nav {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-block-start: var(--space-8);
}

.carousel-dot {
  inline-size: 8px; /* ω-defer: fixed nav dot geometry, layout-critical sub-pixel */
  block-size: 8px; /* ω-defer: fixed nav dot geometry, layout-critical sub-pixel */
  border-radius: 50%;
  border: 1.5px solid var(--color-navy);
  background: transparent;
  cursor: pointer;
  padding: 0;
  opacity: 0.3;
  transition:
    opacity var(--dur-fast) var(--ease-out-quart),
    background var(--dur-fast) var(--ease-out-quart);
}

.carousel-dot.is-active {
  opacity: 1;
  background: var(--color-navy);
}

.carousel-dot:hover {
  opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-slide {
    transition: none;
  }
}

/* ============================================================
   CTA BANNER — The Colophon (craftsman's closing statement)
   Flutter gradient (pink → burgundy drift). One line + one CTA.
   Exempt from editorial bones.
   ============================================================ */

.colophon {
  background: var(--gradient-accent-wide);
  background-size: 200% 100%;
  background-position: 0% 50%;
  animation: colophon-flutter 14s var(--ease-in-out-quart) infinite alternate; /* ω-defer: 14s flutter duration is intentional design, beyond token range */
  padding: var(--space-20) 0;
  text-align: center;
}

@keyframes colophon-flutter {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .colophon {
    animation: none;
    background-position: 50% 50%;
  }
}

.colophon__line {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-md); /* ω: custom clamp 1.5→2.25rem ≈ --text-md 1.44→2.136rem (≤5% drift) */
  line-height: var(
    --lh-snug
  ); /* ω: 1.2 → --lh-snug 1.25 (4% drift, nearest token for display heading) */
  letter-spacing: -0.02em;
  color: var(--color-white);
  margin-block-end: var(--space-8);
}

.colophon__cta {
  display: flex;
  justify-content: center;
}

.btn-colophon {
  background: var(--color-white);
  color: var(--color-burgundy);
  border-radius: var(--radius-sm);
  font-weight: var(--weight-semibold);
}

.btn-colophon:hover {
  background: color-mix(
    in oklch,
    var(--color-white),
    transparent 8%
  ); /* ω: rgba(255,255,255,0.92) → color-mix */
  transform: translateY(calc(-1 * var(--move-lift-btn)));
}

/* ============================================================
   FOOTER — Layer 9: Cabinet Columns (Apothecary, 2nd use)
   Deep navy. Amber-gold top-border on each column = drawer label.
   Exempt from editorial bones.
   ============================================================ */

.footer {
  background: var(--color-navy-deep);
  padding: var(--space-20) 0 var(--space-12);
}

.cabinet-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-10);
  margin-block-end: var(--space-12);
}

.cabinet-col {
  border-block-start: 3px solid var(--color-amber); /* ω-defer: structural 3px "drawer label" border — intentional design weight, no border-width token */
  padding-block-start: var(--space-5);
}

.cabinet-col__label {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-amber);
  margin-block-end: var(--space-5);
}

.cabinet-col a {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-white-60);
  text-decoration: none;
  padding: var(--space-1) 0;
  transition: color var(--dur-fast) var(--ease-in-out-quart);
}

.cabinet-col a:hover {
  color: var(--color-white);
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block-start: var(--space-8);
  border-block-start: 1px solid color-mix(in oklch, var(--color-white), transparent 92%); /* ω: rgba(255,255,255,0.08) → color-mix */
}

.footer__brand-row {
  display: flex;
  align-items: center;
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
}

.footer__logo img {
  inline-size: 28px;
  block-size: 28px;
}

.footer__logo span {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  color: var(--color-white);
}

.footer__bottom p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-white-60);
}

/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(var(--move-md));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  .hero {
    min-block-size: auto;
    padding: calc(var(--strip-height) + 60px + var(--space-10)) var(--space-6) var(--space-12);
    text-align: start;
  }

  .hero__content {
    max-inline-size: 100%;
  }

  /* Shift video focus higher on tall mobile frames + zoom in slightly
     so the Colosseum stays readable in portrait crop */
  .hero__video {
    object-position: center 40%;
    transform: scale(1.08);
  }

  .hero__mini-trust {
    display: flex;
  }

  .hero__scroll-cue {
    display: none;
  }

  .trust-strip__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .apothecary-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .calibration__steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5); /* ω-defer: --space-s fluid value shifts baseline at this viewport */
  }

  .courses-preview__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cabinet-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }
}

@media (max-width: 430px) {
  .hero {
    padding: calc(var(--strip-height) + 60px + var(--space-8)) var(--space-4) var(--space-10);
  }

  .hero__headline {
    font-size: clamp(2rem, 6vw, 2.75rem);
  }

  .hero__ctas {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__ctas .btn-lg {
    inline-size: 100%;
    justify-content: center;
  }

  .hero__mini-trust {
    padding: var(--space-3) var(--space-2);
  }
  .hero__mini-trust strong {
    font-size: 18px;
  }
  .hero__mini-trust span {
    font-size: 10px;
  }

  .desktop-only {
    display: none;
  }

  .trust-strip__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .apothecary-grid {
    grid-template-columns: 1fr;
    max-inline-size: 400px;
    margin: 0 auto;
  }

  .calibration__steps {
    grid-template-columns: 1fr;
    gap: var(--space-4); /* ω-defer: --space-s fluid value shifts baseline at 430px viewport */
  }

  .calibration-scale {
    display: none;
  }

  .courses-preview__grid {
    grid-template-columns: 1fr;
  }

  .observatory-map {
    max-inline-size: 260px;
  }

  .observatory-quote p {
    font-size: var(--text-sm); /* ω: 1rem → --text-sm min=1rem ✓ */
  }

  /* Pull-quote: tighter padding on small screens */
  .pull-quote {
    padding: var(--space-6) var(--space-3);
  }

  /* Colophon: reduce vertical padding on mobile */
  .colophon {
    padding: var(--space-12) 0;
  }

  .cabinet-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
}