/* ЦПО Релакс - stylesheet
   Explicit cascade. Later layers win without !important, so new state
   classes and GSAP-toggled classes never have to fight upstream rules. */

@layer reset, tokens, base, layout, overrides, components, utilities, motion;

/* ---------- tokens: single source for colour, type and spacing ---------- */
@layer tokens {
  :root {
    /* Colour and type tokens are defined once, in @layer motion (below),
       which is declared last in the @layer list on line 5 and therefore
       always wins. Only structural tokens live here. */
    --wrap: 1440px;
    --gutter: clamp(22px, 5vw, 78px);
    --nav-h: 78px;
    --radius: 10px;
    --radius-lg: 14px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
  }
}

/* ---------- base: reset, elements, the original stylesheet ---------- */
@layer base {
/* ЦПО Релакс - editorial gold & black
   Flat surfaces only: no gradients, no glows, no drop shadows.
   Motion: entry-triggered reveals and hover micro-interactions.
   Nothing is scrubbed to scroll position, so the wheel is never hijacked. */



*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--void);
  color: var(--bone);
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--brass); color: var(--void); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--brass); color: var(--void); padding: 12px 20px; font-weight: 600;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------------- type ---------------- */

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(28px, 4.2vw, 60px); line-height: 1.05; }
h2 { font-size: clamp(21px, 2.6vw, 37px); line-height: 1.08; }
h3 { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.22; letter-spacing: -0.02em; }

h1 em, h2 em, h3 em { font-style: normal; color: var(--brass); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--ff-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 20px;
}

.lede { font-size: clamp(16.5px, 1.25vw, 19px); line-height: 1.74; color: var(--muted); max-width: 56ch; }
.lede.long { max-width: 68ch; }

/* ---------------- rhythm ----------------
   Deliberately uneven: sections do not all breathe the same amount. */

.section { padding-block: clamp(52px, 5.6vw, 92px); }
.section.tight { padding-block: clamp(34px, 3.6vw, 58px); }
.section.loose { padding-block: clamp(66px, 7.6vw, 124px); }
.section.alt { background: var(--charcoal); }

/* one light section so the page is not black end to end */
.section.cream { background: var(--cream); color: var(--ink); }
.section.cream .eyebrow { color: #8A6A16; }
.section.cream .lede,
.section.cream .prose p,
.section.cream .faq .fa-body { color: rgba(22, 21, 26, 0.72); }
.section.cream h1 em, .section.cream h2 em, .section.cream h3 em { color: #A87F1E; }
.section.cream .faq,
.section.cream .faq details { border-color: rgba(22, 21, 26, 0.14); }
.section.cream .faq summary::after,
.section.cream .faq summary::before { background: #A87F1E; }
.section.cream .faq summary:hover { color: #8A6A16; }
.section.cream .btn-line { border-color: rgba(22, 21, 26, 0.2); color: var(--ink); }
.section.cream .btn-line:hover { border-color: #A87F1E; color: var(--cream); }
.section.cream .btn-line::before { background: #A87F1E; }
.section.cream .prose li::before { background: #A87F1E; }

.rule { height: 1px; background: var(--line-soft); }
/* headings sit left and narrow rather than centred and full width */
.section-head { max-width: 46ch; margin-bottom: clamp(30px, 3.4vw, 52px); }
.section-head.wide { max-width: 60ch; }
.section-head .lede { margin-top: 18px; }

/* ---------------- reveal + text animation ----------------
   IntersectionObserver adds .in once. No scroll coupling. */

.rv { opacity: 0; transform: translateY(20px); }
.rv.in {
  opacity: 1;
  transform: none;
  transition: opacity .72s var(--ease) var(--rvd, 0s), transform .72s var(--ease) var(--rvd, 0s);
}

/* headline words rise out of a mask, staggered.
   balance fights word-level inline-blocks, and the mask needs room below the
   baseline or Cyrillic descenders (у, р, ц) get clipped. */
.words { text-wrap: normal; }
.words .w { display: inline-block; overflow: hidden; vertical-align: top; }
.words .w > span { display: block; padding-bottom: 0.14em; transform: translateY(120%); }
.words.in .w > span { transform: translateY(0); transition: transform .82s var(--ease); }
.words.in .w:nth-child(1) > span  { transition-delay: .02s }
.words.in .w:nth-child(2) > span  { transition-delay: .07s }
.words.in .w:nth-child(3) > span  { transition-delay: .12s }
.words.in .w:nth-child(4) > span  { transition-delay: .17s }
.words.in .w:nth-child(5) > span  { transition-delay: .22s }
.words.in .w:nth-child(6) > span  { transition-delay: .27s }
.words.in .w:nth-child(7) > span  { transition-delay: .32s }
.words.in .w:nth-child(8) > span  { transition-delay: .37s }
.words.in .w:nth-child(9) > span  { transition-delay: .42s }
.words.in .w:nth-child(n+10) > span { transition-delay: .47s }

/* ---------------- logo ---------------- */

.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.brand-mark { width: 38px; height: 38px; flex: none; overflow: visible; }
.brand-mark .ring {
  fill: none; stroke: var(--brass); stroke-width: 1.4;
  stroke-dasharray: 63 34; stroke-linecap: round;
  transform-origin: 22px 22px;
  transform: rotate(-52deg);
  transition: transform .8s var(--ease), stroke-dasharray .8s var(--ease);
}
.brand:hover .brand-mark .ring { transform: rotate(128deg); stroke-dasharray: 88 9; }
.brand-mark .letter { fill: none; stroke: var(--bone); stroke-width: 2.1; transition: stroke .3s var(--ease); }
.brand:hover .brand-mark .letter { stroke: var(--champagne); }
.brand-type { display: flex; flex-direction: column; line-height: 1; }
.brand-type b {
  font-family: var(--ff-display);
  font-size: 15px; font-weight: 500; letter-spacing: 0.11em;
  text-transform: uppercase;
}
.brand-type i {
  font-style: normal; font-size: 8.5px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--muted-2); margin-top: 5px;
}

/* ---------------- nav ---------------- */

.nav { position: fixed; inset: 12px 0 auto 0; z-index: 90; pointer-events: none; }
.nav .shell {
  pointer-events: auto;
  width: min(var(--wrap), calc(100% - 2 * clamp(14px, 3vw, 34px)));
  margin-inline: auto;
  display: flex; align-items: center; gap: 24px;
  height: var(--nav-h);
  padding-inline: clamp(16px, 2vw, 26px);
  border: 1px solid transparent;
  border-radius: 999px;
  transition: background .35s var(--ease), border-color .35s var(--ease), height .35s var(--ease);
}
.nav.scrolled .shell {
  background: rgba(11, 10, 8, 0.88);
  backdrop-filter: blur(16px);
  border-color: var(--line-soft);
  height: 58px;
}
.nav.scrolled .brand-mark { width: 32px; height: 32px; transition: width .35s var(--ease), height .35s var(--ease); }

.nav-links { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.nav-links a { position: relative; color: var(--muted); transition: color .25s var(--ease); padding-block: 8px; display: block; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px;
  height: 1px; background: var(--brass);
  transform: scaleX(0); transform-origin: right center;
  transition: transform .42s var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current] { color: var(--bone); }
.nav-links a:hover::after, .nav-links a[aria-current]::after { transform: scaleX(1); transform-origin: left center; }

.nav-toggle { display: none; }

/* ---------------- buttons ---------------- */

.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13.5px; font-weight: 500;
  height: 48px; padding-inline: 25px;
  border-radius: 999px;
  border: 1px solid transparent;
  overflow: hidden;
  transition: color .32s var(--ease), border-color .32s var(--ease);
}
.btn > * { position: relative; z-index: 1; }
.btn svg { flex: none; transition: transform .38s var(--ease); }
.btn:hover svg { transform: translateX(5px); }
/* fill wipes in from the left instead of a colour jump */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .42s var(--ease);
}
.btn:hover::before { transform: scaleX(1); }

.btn-gold { background: var(--brass); color: var(--void); padding-right: 19px; }
.btn-gold::before { background: var(--champagne); }
.btn-line { border-color: var(--line); color: var(--bone); }
.btn-line::before { background: var(--brass); }
.btn-line:hover { color: var(--void); border-color: var(--brass); }
.btn-ghost { color: var(--muted); padding-inline: 17px; }
.btn-ghost::before { background: rgba(241, 234, 217, 0.07); }
.btn-ghost:hover { color: var(--bone); }
.btn-sm { height: 40px; font-size: 12.5px; padding-inline: 19px; }

.actions { display: flex; flex-wrap: wrap; gap: 11px; }

/* mobile menu */
.menu {
  position: fixed; inset: 0; z-index: 95;
  background: var(--void);
  padding: calc(var(--nav-h) + 36px) var(--gutter) 44px;
  transform: translateY(-101%);
  transition: transform .5s var(--ease);
  overflow-y: auto;
}
.menu.open { transform: translateY(0); }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu a {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--ff-display); font-size: clamp(24px, 6.6vw, 36px);
  letter-spacing: -0.03em;
  padding: 15px 0; border-bottom: 1px solid var(--line-soft);
  transition: color .25s var(--ease), padding-left .35s var(--ease);
}
.menu a i { font-style: normal; font-family: var(--ff-body); font-size: 11px; letter-spacing: .2em; color: var(--muted-2); }
.menu a:hover { color: var(--brass); padding-left: 8px; }
.menu-foot { margin-top: 38px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--muted); }
.menu-foot a { color: var(--champagne); }

/* ---------------- hero ---------------- */

.hero {
  position: relative;
  padding-top: clamp(160px, 22vh, 224px);
  padding-bottom: clamp(40px, 5vw, 70px);
  min-height: 84svh;
  display: flex; align-items: flex-end;
}
.hero-media { position: absolute; inset: 8px 8px 0 8px; border-radius: var(--radius-lg); overflow: hidden; z-index: 0; }
/* a real photo, only lightly graded, so it does not read as a render */
.hero-media img, .hero-media video {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%;
  filter: grayscale(0.28) contrast(0.98) brightness(.62) saturate(0.9);
}
.hero-media::after { content: ""; position: absolute; inset: 0; background: rgba(11, 11, 12, 0.52); }
.hero .wrap { position: relative; z-index: 1; width: 100%; }

.hero-grid { display: grid; grid-template-columns: 1fr auto; gap: clamp(24px, 4vw, 64px); align-items: end; }
.hero h1 { max-width: 19ch; }
.hero .lede { margin-top: clamp(20px, 2.4vw, 32px); }
.hero .actions { margin-top: clamp(26px, 3vw, 40px); }

.hero-note {
  display: flex; align-items: center; gap: 13px;
  font-family: var(--ff-display);
  font-size: 10px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--champagne); margin-bottom: 24px;
}
.hero-note i { display: block; width: 30px; height: 1px; background: var(--brass); flex: none; }

/* vertical credential rail on the hero's right edge */
.rail {
  writing-mode: vertical-rl;
  display: flex; align-items: center; gap: 18px;
  font-family: var(--ff-display);
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--muted-2);
  padding-bottom: 6px;
}
.rail i { display: block; width: 1px; height: 46px; background: var(--brass); flex: none; }

/* ---------------- trust ----------------
   Anchor card on the left, three stacked beside it. Not a 4-up card grid. */

.trust { display: grid; grid-template-columns: 1.12fr 1fr; gap: 10px; align-items: stretch; }
.trust-item {
  background: var(--raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(20px, 2.1vw, 30px);
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
.trust-item:hover { border-color: rgba(200, 155, 43, 0.34); background: #191920; }
.trust-item svg { stroke: var(--brass); margin-bottom: 14px; transition: transform .45s var(--ease); }
.trust-item:hover svg { transform: translateY(-3px); }
.trust-item b {
  display: block; font-family: var(--ff-display); font-size: 13.5px; font-weight: 500;
  letter-spacing: -0.01em; margin-bottom: 7px;
}
.trust-item span { display: block; font-size: 13.5px; color: var(--muted-2); line-height: 1.62; }

/* the licence card carries the weight */
.trust-anchor {
  grid-row: 1 / span 3;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(24px, 2.8vw, 40px);
}
.trust-anchor b { font-size: clamp(17px, 1.7vw, 24px); margin-bottom: 12px; }
.trust-anchor span { font-size: 15px; color: var(--muted); max-width: 34ch; }
.trust-anchor .lic {
  font-family: var(--ff-display);
  font-size: clamp(22px, 2.6vw, 38px); font-weight: 300; letter-spacing: -0.04em;
  color: var(--champagne); margin-top: clamp(24px, 3vw, 44px); line-height: 1;
}
.trust-anchor .lic i {
  display: block; font-style: normal; font-family: var(--ff-body);
  font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted-2); margin-top: 10px;
}

/* ---------------- location cards ----------------
   Real photographs of real bases, replacing the abstract map on the home page. */

.places { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.place {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius); background: var(--raised);
  min-height: 200px;
}
.place.tall { grid-column: span 2; grid-row: span 2; }
.place img {
  width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0;
  filter: saturate(0.86) brightness(.7);
  transition: transform 1s var(--ease), filter .7s var(--ease);
}
.place:hover img { transform: scale(1.055); filter: saturate(1) brightness(.82); }
.place::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(11, 11, 12, 0.34);
  transition: background .5s var(--ease);
}
.place:hover::after { background: rgba(11, 11, 12, 0.2); }
.place-body {
  position: relative; z-index: 1;
  height: 100%; display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(16px, 1.8vw, 26px);
  min-height: inherit;
}
.place-town {
  font-family: var(--ff-display); font-weight: 400; letter-spacing: -0.03em;
  font-size: clamp(18px, 1.9vw, 27px); line-height: 1.1;
}
.place.tall .place-town { font-size: clamp(24px, 3vw, 42px); }
.place-meta {
  margin-top: 7px; font-size: 11.5px; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--champagne);
}
.place-note { margin-top: 9px; font-size: 13.5px; color: rgba(231, 224, 212, 0.72); max-width: 34ch; }
.place-go {
  position: absolute; top: clamp(14px, 1.6vw, 22px); right: clamp(14px, 1.6vw, 22px);
  color: var(--brass); opacity: 0; transform: translate(-5px, 5px);
  transition: opacity .35s var(--ease), transform .4s var(--ease);
}
.place:hover .place-go { opacity: 1; transform: translate(0, 0); }

/* ---------------- pull quote as social proof ---------------- */

.quote-card {
  border-left: 1px solid var(--brass);
  padding: 2px 0 2px 20px;
  max-width: 46ch;
}
.quote-card p {
  font-size: 15px; line-height: 1.62; color: var(--bone); margin: 0 0 9px;
}
.quote-card cite {
  font-style: normal; font-size: 11.5px; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--muted-2);
}
.quote-card cite b { color: var(--champagne); font-weight: 500; }

/* ---------------- strip ---------------- */

.strip { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.strip .wrap { display: flex; align-items: center; gap: clamp(18px, 3.5vw, 46px); }
.strip-label {
  flex: none;
  font-family: var(--ff-display);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted-2); padding-block: 18px; max-width: 14ch; line-height: 1.6;
}
.strip-track-wrap { overflow: hidden; flex: 1; padding-block: 18px; }
.strip-track { display: flex; gap: 40px; width: max-content; animation: strip 66s linear infinite; }
.strip-track a {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--ff-display); font-size: 17px; letter-spacing: -0.02em;
  color: var(--muted); white-space: nowrap;
  transition: color .25s var(--ease);
}
.strip-track a:hover { color: var(--champagne); }
.strip-track b { font-family: var(--ff-body); font-size: 11px; font-weight: 500; color: var(--brass); }
@keyframes strip { to { transform: translateX(-50%); } }
.strip:hover .strip-track { animation-play-state: paused; }

/* ---------------- page hero ---------------- */

.page-hero { padding-top: calc(var(--nav-h) + clamp(62px, 8vw, 112px)); padding-bottom: clamp(34px, 4vw, 58px); }
.page-hero .lede { margin-top: 22px; }

.crumbs { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); border-bottom: 1px solid var(--line-soft); }
.crumbs .wrap { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; padding-block: 14px; }
.crumbs a { transition: color .25s var(--ease); }
.crumbs a:hover { color: var(--brass); }
.crumbs .sep { opacity: .4; }

/* ---------------- split ---------------- */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4.6vw, 76px); align-items: center; }
.split.narrow { grid-template-columns: 5fr 6fr; }
.split-media { overflow: hidden; border-radius: var(--radius-lg); }
.split-media img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  filter: grayscale(1) contrast(1.02);
  transition: filter .9s var(--ease), transform 1s var(--ease);
}
.split-media:hover img { filter: grayscale(0) contrast(1); transform: scale(1.03); }
.split-media.wide img { aspect-ratio: 3 / 2; }

.prose { max-width: 64ch; }
.prose p { color: var(--muted); font-size: 16px; line-height: 1.82; }
.prose h3 { margin: 36px 0 14px; color: var(--bone); }
.prose ul { margin: 0 0 20px; padding-left: 0; list-style: none; }
.prose li { position: relative; padding-left: 24px; margin-bottom: 10px; color: var(--muted); }
.prose li::before { content: ""; position: absolute; left: 0; top: .78em; width: 11px; height: 1px; background: var(--brass); }

blockquote {
  margin: 34px 0; padding-left: 28px;
  border-left: 1px solid var(--brass);
  font-family: var(--ff-display); font-size: clamp(16px, 1.6vw, 21px);
  font-weight: 300; letter-spacing: -0.02em; line-height: 1.5;
  color: var(--champagne);
}

/* ---------------- stats ---------------- */

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 44px); }
.stat b {
  display: block;
  font-family: var(--ff-display); font-size: clamp(34px, 4.2vw, 60px);
  font-weight: 300; line-height: 1; letter-spacing: -0.04em;
  color: var(--champagne);
  font-variant-numeric: lining-nums tabular-nums;
}
.stat span {
  display: block; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--ff-mono);
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2);
}

/* ---------------- course index ---------------- */

.index { border-top: 1px solid var(--line-soft); }
.index-row {
  position: relative;
  display: grid; grid-template-columns: 62px 1fr auto 20px;
  align-items: baseline; gap: clamp(14px, 2.4vw, 38px);
  padding-block: clamp(20px, 2.4vw, 32px);
  border-bottom: 1px solid var(--line-soft);
  transition: padding-left .45s var(--ease);
}
.index-row:hover { padding-left: 14px; }
.index-num { font-family: var(--ff-display); font-size: 11px; letter-spacing: 0.14em; color: var(--brass); }
.index-title {
  font-family: var(--ff-display); font-size: clamp(19px, 2.3vw, 34px);
  font-weight: 400; letter-spacing: -0.035em; line-height: 1.08;
  transition: color .3s var(--ease);
}
.index-row:hover .index-title { color: var(--brass); }
.index-meta { font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); white-space: nowrap; }
.index-go { color: var(--brass); opacity: 0; transform: translateX(-6px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.index-row:hover .index-go { opacity: 1; transform: translateX(0); }
.index-sub { grid-column: 2 / -1; margin-top: 10px; font-size: 14px; color: var(--muted); max-width: 56ch; }
.index-thumb { display: none; }

.peek {
  position: fixed; top: 0; left: 0;
  width: 230px; height: 290px;
  border-radius: var(--radius); overflow: hidden;
  pointer-events: none; opacity: 0; z-index: 60;
  transition: opacity .3s var(--ease);
}
.peek.on { opacity: 1; }
.peek img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------- teacher cards ---------------- */

.people-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.2vw, 34px) clamp(16px, 1.8vw, 28px); }
.people-grid.wide { grid-template-columns: repeat(3, 1fr); }
/* staggered editorial rhythm rather than a flat grid */
.people-grid.stagger > :nth-child(even) { transform: translateY(clamp(16px, 2.4vw, 40px)); }

.person { display: block; }
.person-photo { position: relative; overflow: hidden; background: var(--raised); aspect-ratio: 3 / 4; border-radius: var(--radius); }
.person-photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.03) brightness(.88);
  transition: filter .7s var(--ease), transform .8s var(--ease);
}
.person:hover .person-photo img { filter: grayscale(0) contrast(1) brightness(1); transform: scale(1.04); }
.person-go {
  position: absolute; right: 12px; bottom: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--brass); color: var(--void);
  display: grid; place-items: center;
  opacity: 0; transform: translateY(8px);
  transition: opacity .35s var(--ease), transform .4s var(--ease);
}
.person:hover .person-go { opacity: 1; transform: translateY(0); }

.person-mono {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--ff-display); font-size: clamp(24px, 3vw, 34px); font-weight: 300;
  letter-spacing: -0.03em;
  color: rgba(201, 162, 39, 0.55); background: var(--raised);
}

.person-body { padding-top: 15px; }
.person h3 { transition: color .25s var(--ease); }
.person:hover h3 { color: var(--brass); }
.person-spec { margin-top: 7px; font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--brass); }
.person-city { margin-top: 5px; font-size: 13px; color: var(--muted-2); }

/* ---------------- map ---------------- */

.map-stage { display: grid; grid-template-columns: 1.62fr 1fr; gap: clamp(24px, 3.2vw, 52px); align-items: center; }
.map-updated {
  display: flex; align-items: center; gap: 9px;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted-2); margin-top: 16px;
}
.map-updated i { display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--brass); flex: none; }
.bg-map { width: 100%; height: auto; display: block; }
.bg-map path.region {
  fill: rgba(241, 234, 217, 0.04); stroke: rgba(241, 234, 217, 0.14); stroke-width: 1;
  transition: fill .35s var(--ease), stroke .35s var(--ease);
}
.bg-map path.region.has { fill: rgba(201, 162, 39, 0.07); stroke: rgba(201, 162, 39, 0.3); }
.bg-map path.region.active { fill: rgba(201, 162, 39, 0.2); stroke: var(--brass); }
.bg-map g.pin { cursor: pointer; }
.bg-map g.pin circle.halo { fill: rgba(201, 162, 39, 0.18); opacity: 0; transition: opacity .3s var(--ease); }
.bg-map g.pin circle.dot {
  fill: var(--brass);
  transform-box: fill-box; transform-origin: center;
  transition: fill .3s var(--ease), transform .35s var(--ease);
}
.bg-map g.pin:hover circle.halo, .bg-map g.pin.active circle.halo { opacity: 1; }
.bg-map g.pin:hover circle.dot, .bg-map g.pin.active circle.dot { fill: var(--champagne); }
.bg-map g.pin:hover circle.dot { transform: scale(1.35); }

.map-panel {
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: clamp(22px, 2.4vw, 34px); min-height: 320px; background: var(--void);
}
.section.alt .map-panel { background: var(--charcoal); }
.map-panel-inner { transition: opacity .3s var(--ease); }
.map-panel.swap .map-panel-inner { opacity: 0; }
.map-panel h3 { font-size: clamp(22px, 2.4vw, 32px); margin-bottom: 8px; }
.map-count { font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass); margin-bottom: 12px; }
/* selected-region readout: two figures side by side, then the specialty sentence */
.map-figs { display: flex; gap: clamp(20px, 3vw, 40px); margin: 18px 0 16px; }
.map-fig b {
  display: block; font-family: var(--ff-display); font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 300; letter-spacing: -0.04em; line-height: 1; color: var(--champagne);
}
.map-fig span { display: block; margin-top: 7px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); }
.map-sentence { font-size: 14.5px; line-height: 1.66; color: var(--muted); margin-bottom: 4px; }
.map-towns { font-size: 13.5px; color: var(--muted-2); }
.map-specs { margin: 22px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line-soft); }
.map-specs li {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 11px 0; border-bottom: 1px solid var(--line-soft);
  font-size: 14px; color: var(--muted);
}
.map-specs li a { transition: color .25s var(--ease); }
.map-specs li a:hover { color: var(--brass); }
.map-specs li b { font-weight: 500; color: var(--champagne); }
.map-panel .btn { margin-top: 24px; }
.map-empty { color: var(--muted-2); font-size: 14.5px; }

.region-index { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(28px, 4.5vw, 70px); }
.region-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding-block: 17px; border-bottom: 1px solid var(--line-soft);
  transition: padding-left .4s var(--ease);
}
.region-row:hover { padding-left: 10px; }
.region-row b { font-family: var(--ff-display); font-size: 19px; font-weight: 400; letter-spacing: -0.03em; transition: color .25s var(--ease); }
.region-row:hover b { color: var(--brass); }
.region-row span { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass); white-space: nowrap; }
.region-row.empty { opacity: .3; pointer-events: none; }
.region-row.empty span { color: var(--muted-2); }

/* ---------------- directory ---------------- */

.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding-block: 22px; border-bottom: 1px solid var(--line-soft); }
.search {
  flex: 1 1 270px; display: flex; align-items: center; gap: 11px;
  border: 1px solid var(--line); border-radius: 999px; padding: 0 20px; height: 48px;
  transition: border-color .3s var(--ease);
}
.search:focus-within { border-color: var(--brass); }
.search input { flex: 1; background: none; border: 0; color: var(--bone); font: inherit; font-size: 14.5px; outline: none; }
.search input::placeholder { color: var(--muted-2); }
.search svg { flex: none; stroke: var(--muted-2); transition: stroke .3s var(--ease); }
.search:focus-within svg { stroke: var(--brass); }

.selects { display: flex; gap: 11px; flex-wrap: wrap; }
.selects select {
  appearance: none; background-color: transparent;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23C9A227' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center;
  color: var(--bone); border: 1px solid var(--line); border-radius: 999px;
  height: 48px; padding: 0 44px 0 20px; font: inherit; font-size: 14px; cursor: pointer;
  transition: border-color .3s var(--ease);
}
.selects select:hover, .selects select:focus { border-color: var(--brass); outline: none; }
.selects option { background: var(--charcoal); color: var(--bone); }

.result-count { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); padding-block: 24px; }
.no-results { padding: 70px 0; text-align: center; color: var(--muted-2); }

/* ---------------- profile ---------------- */

.profile { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: clamp(28px, 4vw, 70px); align-items: start; }
.profile-photo {
  overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 3 / 4;
  background: var(--raised); position: sticky; top: calc(var(--nav-h) + 24px);
}
.profile-photo img { width: 100%; height: 100%; object-fit: cover; }
.profile-tags { display: flex; flex-wrap: wrap; gap: 9px; margin: 22px 0 26px; }
.tag {
  font-family: var(--ff-mono);
  font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 8px 15px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.tag:hover { border-color: var(--brass); color: var(--champagne); }
.tag.gold { color: var(--brass); border-color: rgba(201, 162, 39, 0.4); }
.profile .actions { margin-top: 36px; }

/* ---------------- faq ---------------- */

.faq { border-top: 1px solid var(--line-soft); }
.faq details { border-bottom: 1px solid var(--line-soft); }
.faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 24px 46px 24px 0;
  font-family: var(--ff-display); font-size: clamp(15px, 1.5vw, 20px);
  font-weight: 400; letter-spacing: -0.025em;
  transition: color .25s var(--ease), padding-left .35s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brass); padding-left: 8px; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 13px; height: 1px; background: var(--brass); }
.faq summary::before {
  content: ""; position: absolute; right: 13.5px; top: 50%;
  width: 1px; height: 13px; background: var(--brass);
  transform: translateY(-50%); transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.faq details[open] summary::before { opacity: 0; transform: translateY(-50%) rotate(90deg); }
.faq .fa-body { padding: 0 0 26px; color: var(--muted); max-width: 72ch; line-height: 1.8; font-size: 15.5px; }

/* ---------------- form ---------------- */

.form { display: grid; gap: 20px; max-width: 620px; }
.field { display: grid; gap: 8px; }
.field label { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); transition: color .3s var(--ease); }
.field:focus-within label { color: var(--brass); }
.field input, .field select, .field textarea {
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  color: var(--bone); font: inherit; font-size: 15.5px; padding: 11px 0; border-radius: 0;
  transition: border-color .3s var(--ease);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23C9A227' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 4px center; cursor: pointer;
}
.field option { background: var(--charcoal); color: var(--bone); }
.field textarea { resize: vertical; min-height: 120px; line-height: 1.7; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--brass); }
.field input::placeholder, .field textarea::placeholder { color: rgba(241, 234, 217, 0.24); }
.field.invalid input, .field.invalid textarea, .field.invalid select { border-bottom-color: #B4552F; }
.field .err { font-size: 12px; color: #C9744F; display: none; letter-spacing: 0; text-transform: none; }
.field.invalid .err { display: block; }
.form-note { font-size: 12.5px; color: var(--muted-2); max-width: 50ch; }
.form-status { font-size: 14.5px; color: var(--champagne); display: none; }
.form-status.on { display: block; }
.hp { position: absolute; left: -9999px; }

/* ---------------- footer ---------------- */

.foot { background: var(--charcoal); border-top: 1px solid var(--line-soft); }
.foot-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: clamp(30px, 4vw, 66px); padding-block: clamp(48px, 5.6vw, 80px) clamp(34px, 4vw, 50px); }
.foot .brand { margin-right: 0; margin-bottom: 16px; }
.foot p { color: var(--muted-2); font-size: 14px; max-width: 40ch; }
.foot-col-title { font-family: var(--ff-display); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass); margin-bottom: 16px; }
.foot-col a, .foot-col div { display: block; color: var(--muted); font-size: 14.5px; padding-block: 5px; transition: color .25s var(--ease), padding-left .3s var(--ease); }
.foot-col a:hover { color: var(--champagne); padding-left: 6px; }
.foot-bottom {
  border-top: 1px solid var(--line-soft); padding-block: 22px;
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between;
  font-size: 12.5px; color: var(--muted-2);
}

/* ---------------- responsive ---------------- */

@media (max-width: 1100px) {
  .people-grid { grid-template-columns: repeat(3, 1fr); }
  .map-stage { grid-template-columns: 1fr; }
  .map-panel { min-height: 0; }
  .profile { grid-template-columns: 1fr; }
  .profile-photo { position: static; max-width: 420px; }
  .peek { display: none; }
  .trust { grid-template-columns: 1fr; }
  .trust-anchor { grid-row: auto; }
  .places { grid-template-columns: repeat(2, 1fr); }
  .place.tall { grid-column: span 2; grid-row: auto; min-height: 260px; }
  .rail { display: none; }
  .hero-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  :root { --nav-h: 62px; }
  .nav-links, .nav .btn { display: none; }
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; margin-right: -8px; position: relative; z-index: 96;
  }
  .nav-toggle i { display: block; width: 22px; height: 1.5px; background: var(--bone); transition: transform .4s var(--ease), opacity .25s; }
  .nav-toggle[aria-expanded="true"] i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .nav.scrolled .shell { height: var(--nav-h); }

  .split, .split.narrow { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .region-index { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid > :first-child { grid-column: 1 / -1; }
  .strip .wrap { flex-direction: column; align-items: stretch; gap: 0; }
  .strip-label { padding-bottom: 0; max-width: none; }
  .people-grid.stagger > :nth-child(even) { transform: none; }
}

@media (max-width: 680px) {
  .people-grid, .people-grid.wide { grid-template-columns: repeat(2, 1fr); }
  .places { grid-template-columns: 1fr; }
  .place.tall { grid-column: auto; }
  .index-row { grid-template-columns: 42px 1fr; }
  .index-meta { grid-column: 2; margin-top: 8px; }
  .index-go { display: none; }
  .index-sub { display: none; }
  .index-thumb { display: block; grid-column: 2 / -1; margin-top: 15px; border-radius: var(--radius); overflow: hidden; }
  .index-thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: grayscale(1) brightness(.8); }
  .hero-media { inset: 6px 6px 0 6px; }
}

@media (max-width: 420px) {
  .people-grid, .people-grid.wide { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
}

/* ---------------- reduced motion ---------------- */



/* ==================================================================
   STAGE: elaborate hero + site-wide micro-interactions
   Motion is driven by load, hover and pointer. Never by scroll offset.
   ================================================================== */

/* ---- opening curtain ---- */
#curtain {
  position: fixed; inset: 0; z-index: 200;
  background: var(--void);
  display: grid; place-items: center;
  transition: opacity .5s ease;
}
#curtain .cnum {
  font-family: var(--ff-display); font-weight: 300;
  font-size: clamp(48px, 11vw, 148px); letter-spacing: -0.05em;
  color: var(--bone); line-height: 1;
  font-variant-numeric: tabular-nums;
}
#curtain .cbar { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(231,224,212,.12); }
#curtain .cbar i { display: block; height: 100%; width: 0; background: var(--brass); }
#curtain .cpanel { position: absolute; inset: 0; display: flex; }
#curtain .cpanel b { flex: 1; background: var(--void); transform-origin: top center; }
html.curtain-on, html.curtain-on body { overflow: hidden; }
#curtain.done { pointer-events: none; }

/* ---- hero stage ---- */
.hero { overflow: hidden; }
.hero-layers { position: absolute; inset: 8px 8px 0 8px; border-radius: var(--radius-lg); overflow: hidden; z-index: 0; }
.hero-layer {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 1.05s var(--ease);
}
.hero-layer.on { opacity: 1; }
.hero-layer img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%;
  filter: grayscale(.28) contrast(.98) brightness(.62) saturate(.9);
  transform: scale(1.06);
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift { from { transform: scale(1.06) translate3d(0,0,0) } to { transform: scale(1.14) translate3d(-1.4%, -1.2%, 0) } }
.hero-layers::after { content: ""; position: absolute; inset: 0; background: rgba(11,11,12,.52); }

/* thin frame that draws itself around the stage */
.hero-frame { position: absolute; inset: 8px 8px 0 8px; z-index: 1; pointer-events: none; }
.hero-frame i {
  position: absolute; background: var(--brass); opacity: .55;
  transition: transform 1.4s var(--ease) .5s;
}
.hero-frame i:nth-child(1) { top: 0; left: 0; height: 1px; width: 100%; transform: scaleX(0); transform-origin: left; }
.hero-frame i:nth-child(2) { bottom: 0; left: 0; height: 1px; width: 100%; transform: scaleX(0); transform-origin: right; }
.hero-frame i:nth-child(3) { top: 0; left: 0; width: 1px; height: 100%; transform: scaleY(0); transform-origin: top; }
.hero-frame i:nth-child(4) { top: 0; right: 0; width: 1px; height: 100%; transform: scaleY(0); transform-origin: bottom; }
.hero.lit .hero-frame i:nth-child(1), .hero.lit .hero-frame i:nth-child(2) { transform: scaleX(1); }
.hero.lit .hero-frame i:nth-child(3), .hero.lit .hero-frame i:nth-child(4) { transform: scaleY(1); }

/* per-letter accent inside the headline */
.words .ch { display: inline-block; transform: translateY(105%); }
.words.in .ch { transform: translateY(0); transition: transform .8s var(--ease); }

/* discipline switcher */
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(22px, 2.6vw, 34px); }
.chip {
  position: relative; overflow: hidden;
  font-size: 12px; letter-spacing: .04em;
  padding: 9px 17px; border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.chip::before {
  content: ""; position: absolute; inset: 0; background: var(--brass);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.chip span { position: relative; z-index: 1; }
.chip:hover, .chip.on { color: var(--void); border-color: var(--brass); }
.chip:hover::before, .chip.on::before { transform: scaleX(1); }

/* live clock + counter rail detail */
.hero-ticker {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: clamp(24px, 3vw, 40px);
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-2);
}
.hero-ticker i { display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--brass); }
.hero-ticker b { color: var(--champagne); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---- nav link character roll ---- */
.nav-links a .roll { display: block; position: relative; overflow: hidden; height: 1.35em; }
.nav-links a .roll span { display: block; transition: transform .45s var(--ease); }
.nav-links a .roll span::after {
  content: attr(data-t); position: absolute; left: 0; top: 100%;
  color: var(--champagne);
}
.nav-links a:hover .roll span { transform: translateY(-100%); }

/* ---- magnetic buttons ---- */
.btn { will-change: transform; }

/* ---- card tilt ---- */
.person { will-change: transform; transform-style: preserve-3d; }
.person-photo { will-change: transform; }

/* ---- index row number roll ---- */
.index-num { position: relative; overflow: hidden; display: inline-block; height: 1.3em; }
.index-num span { display: block; transition: transform .5s var(--ease); }
.index-num span::after { content: attr(data-n); position: absolute; left: 0; top: 100%; color: var(--champagne); }
.index-row:hover .index-num span { transform: translateY(-100%); }

/* ---- region row line ---- */
.region-row { position: relative; }
.region-row::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--brass); transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.region-row:hover::after { transform: scaleX(1); }

/* ---- map pin ripple ---- */
.bg-map g.pin circle.ripple { fill: none; stroke: var(--brass); opacity: 0; }
.bg-map g.pin.pulse circle.ripple { animation: ripple .75s ease-out; }
@keyframes ripple { from { opacity: .8; r: 6 } to { opacity: 0; r: 46 } }

@media (max-width: 900px) {
  .hero-chips { gap: 6px; }
  .chip { font-size: 11px; padding: 8px 13px; }
}



/* ==================================================================
   HERO v2: one idea, done large.
   A dark, desaturated frame. A full-colour print of the same photograph
   sits underneath and is revealed through a circular mask that follows
   the pointer. On load, slats wipe the whole stage open.
   ================================================================== */

.hero-chips, .hero-ticker { display: none; }           /* retired: too much chrome */

.hero-stage { position: absolute; inset: 8px 8px 0 8px; border-radius: var(--radius-lg); overflow: hidden; z-index: 0; }
.hero-plate { position: absolute; inset: 0; }
.hero-plate img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%;
  transform: scale(1.08);
  transition: transform 2.4s var(--ease);
}
.hero.lit .hero-plate img { transform: scale(1.02); }

/* the muted print everyone sees */
.hero-plate.base img { filter: grayscale(1) contrast(1.02) brightness(.42); }
.hero-plate.base::after { content: ""; position: absolute; inset: 0; background: rgba(11,11,12,.46); }

/* the colour print, shown only inside the moving mask */
.hero-plate.live {
  clip-path: circle(var(--sr, 0px) at var(--sx, 50%) var(--sy, 50%));
  will-change: clip-path;
}
.hero-plate.live img { filter: saturate(1.02) brightness(.86); }
.hero-plate.live::after { content: ""; position: absolute; inset: 0; background: rgba(11,11,12,.2); }

/* hairline ring riding the mask edge */
.hero-halo {
  position: absolute; z-index: 2; pointer-events: none;
  width: 0; height: 0; border-radius: 50%;
  border: 1px solid rgba(200,155,43,.55);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.hero-halo.on { opacity: 1; }

/* load-time slat wipe */
.hero-slats { position: absolute; inset: 0; z-index: 3; display: flex; pointer-events: none; }
.hero-slats i { flex: 1; background: var(--void); transform-origin: bottom center; }
.hero.lit .hero-slats i { transform: scaleY(0); }
.hero-slats i:nth-child(1) { transition: transform 1.05s cubic-bezier(0.76,0,0.24,1) .05s }
.hero-slats i:nth-child(2) { transition: transform 1.05s cubic-bezier(0.76,0,0.24,1) .12s }
.hero-slats i:nth-child(3) { transition: transform 1.05s cubic-bezier(0.76,0,0.24,1) .19s }
.hero-slats i:nth-child(4) { transition: transform 1.05s cubic-bezier(0.76,0,0.24,1) .26s }
.hero-slats i:nth-child(5) { transition: transform 1.05s cubic-bezier(0.76,0,0.24,1) .33s }
.hero-slats i:nth-child(6) { transition: transform 1.05s cubic-bezier(0.76,0,0.24,1) .40s }
.hero-slats i:nth-child(7) { transition: transform 1.05s cubic-bezier(0.76,0,0.24,1) .47s }

/* quieter, roomier hero column */
.hero .lede { max-width: 44ch; }
.hero .actions { margin-top: clamp(28px, 3.2vw, 44px); }
.hero-hint {
  display: flex; align-items: center; gap: 10px;
  margin-top: clamp(26px, 3vw, 40px);
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted-2);
}
.hero-hint i { display: block; width: 18px; height: 1px; background: var(--brass); }

/* no pointer: show the colour print outright, skip the mask entirely */
@media (hover: none), (pointer: coarse) {
  .hero-plate.live { clip-path: none; }
  .hero-plate.base { display: none; }
  .hero-halo { display: none; }
  .hero-hint { display: none; }
}




}

/* ---------- overrides: the successive design passes, in order ---------- */
@layer overrides {
/* ==================================================================
   LAYER 4 - colour, type and layout overhaul
   Type: Geologica (display) + Wix Madefor Text (body), both Cyrillic.
   Backgrounds now rotate: black, white, yellow, photograph.
   ================================================================== */



body { font-family: var(--ff-body); font-size: 15.5px; line-height: 1.62; }

h1, h2, h3, h4 { font-family: var(--ff-display); font-weight: 600; letter-spacing: -0.035em; }
h1 { font-size: clamp(30px, 4vw, 58px); line-height: 1.02; }
h2 { font-size: clamp(22px, 2.4vw, 34px); line-height: 1.06; }
h3 { font-size: clamp(16px, 1.3vw, 19px); }
.eyebrow { font-family: var(--ff-mono); font-weight: 500; font-size: 10.5px; letter-spacing: .1em; }
.lede { font-size: clamp(15px, 1.05vw, 17px); line-height: 1.65; max-width: 50ch; }

/* shorter sections again */
.section { padding-block: clamp(42px, 4.4vw, 74px); }
.section.tight { padding-block: clamp(28px, 3vw, 46px); }
.section.loose { padding-block: clamp(54px, 6vw, 96px); }
.section-head { margin-bottom: clamp(24px, 2.6vw, 40px); max-width: 42ch; }

/* ---- background variants ---- */
.sec-white { background: var(--paper); color: #131316; }
.sec-white .eyebrow { color: var(--yellow-deep); }
.sec-white .lede, .sec-white .prose p { color: rgba(19,19,22,.7); }
.sec-white h1 em, .sec-white h2 em { color: var(--yellow-deep); }
.sec-white .index, .sec-white .index-row { border-color: rgba(19,19,22,.12); }
.sec-white .index-meta { color: rgba(19,19,22,.5); }
.sec-white .btn-line { border-color: rgba(19,19,22,.22); color: #131316; }
.sec-white .btn-line::before { background: #131316; }
.sec-white .btn-line:hover { color: var(--paper); border-color: #131316; }

.sec-yellow { background: var(--yellow); color: #14120A; }
.sec-yellow .eyebrow { color: rgba(20,18,10,.6); }
.sec-yellow .lede, .sec-yellow .prose p { color: rgba(20,18,10,.76); }
.sec-yellow h1 em, .sec-yellow h2 em { color: #7A5E06; }
.sec-yellow .stat b { color: #14120A; }
.sec-yellow .stat span { color: rgba(20,18,10,.6); border-color: rgba(20,18,10,.18); }
.sec-yellow .btn-gold { background: #14120A; color: var(--yellow); }
.sec-yellow .btn-gold::before { background: #2B2718; }
.sec-yellow .btn-line { border-color: rgba(20,18,10,.28); color: #14120A; }
.sec-yellow .btn-line::before { background: #14120A; }
.sec-yellow .btn-line:hover { color: var(--yellow); }
.sec-yellow .quote-card { border-color: rgba(20,18,10,.35); }
.sec-yellow .quote-card p { color: #14120A; }
.sec-yellow .quote-card cite { color: rgba(20,18,10,.6); }
.sec-yellow .quote-card cite b { color: #14120A; }

/* photograph-backed band */
.sec-img { position: relative; background: var(--void); overflow: hidden; }
.sec-img > .bgimg { position: absolute; inset: 0; }
.sec-img > .bgimg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4) brightness(.4); }
.sec-img > .wrap { position: relative; z-index: 1; }

/* ---- squarer buttons ---- */
.btn { border-radius: var(--radius); height: 46px; font-size: 13px; font-weight: 600; padding-inline: 22px; }
.btn-sm { height: 38px; padding-inline: 16px; }
.tag, .search, .selects select { border-radius: 8px; }
.search, .selects select { height: 46px; }

/* ---- shorter photos ---- */
.split-media img { aspect-ratio: 16 / 11; }
.split-media.wide img { aspect-ratio: 16 / 9; }
.person-photo { aspect-ratio: 4 / 5; border-radius: 8px; }
.profile-photo { aspect-ratio: 4 / 5; border-radius: var(--radius-lg); }
.place { min-height: 168px; border-radius: 10px; }
.place.tall { min-height: 346px; }

/* ---- real Lucide icons in the trust cards ---- */
.trust-item svg { stroke: var(--brass); stroke-width: 1.6; }
.sec-yellow .trust-item, .sec-white .trust-item { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.1); }
.sec-yellow .trust-item b, .sec-white .trust-item b { color: inherit; }
.sec-yellow .trust-item span, .sec-white .trust-item span { color: rgba(20,18,10,.66); }
.sec-yellow .trust-item svg, .sec-white .trust-item svg { stroke: #14120A; }
.sec-yellow .trust-anchor .lic, .sec-white .trust-anchor .lic { color: #14120A; }
.sec-yellow .trust-anchor .lic i { color: rgba(20,18,10,.55); }

/* ==================================================================
   SPLIT HERO - dark photo panel beside a solid colour panel
   ================================================================== */

.hero.hero-split {
  display: grid;
  grid-template-columns: 1.32fr 1fr;
  min-height: 92svh;
  padding: 0;
  align-items: stretch;
  gap: 0;
}
.hero.hero-split .hero-frame { display: none; }

.hs-left { position: relative; overflow: hidden; background: var(--void); display: flex; align-items: flex-end; }
.hs-left .hero-stage { inset: 0; border-radius: 0; }
.hs-copy {
  position: relative; z-index: 4;
  padding: clamp(28px, 4vw, 62px);
  padding-top: calc(var(--nav-h) + clamp(60px, 9vw, 130px));
  width: 100%;
}
.hs-copy h1 { max-width: 14ch; }
.hs-copy .lede { margin-top: 18px; max-width: 40ch; }
.hs-copy .actions { margin-top: clamp(22px, 2.6vw, 34px); }

.hs-right {
  position: relative;
  background: var(--yellow);
  color: #14120A;
  padding: clamp(28px, 3.4vw, 54px);
  padding-top: calc(var(--nav-h) + clamp(40px, 6vw, 84px));
  display: flex; flex-direction: column;
}
.hs-index { display: flex; align-items: baseline; gap: 4px; font-family: var(--ff-display); }
.hs-index b { font-size: clamp(30px, 3.4vw, 46px); font-weight: 600; letter-spacing: -0.05em; line-height: 1; }
.hs-index span { font-size: 14px; opacity: .55; }
.hs-note { margin-top: 22px; font-size: 14.5px; line-height: 1.6; color: rgba(20,18,10,.78); max-width: 34ch; }
.hs-more {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  margin-top: 20px; padding-bottom: 4px;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  border-bottom: 1px solid rgba(20,18,10,.35);
  transition: gap .3s var(--ease), border-color .3s var(--ease);
}
.hs-more:hover { gap: 14px; border-color: #14120A; }

/* figures block sitting at the foot of the colour panel */
.hs-figs {
  margin-top: auto; padding-top: clamp(26px, 3vw, 44px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px;
}
.hs-fig b {
  display: block; font-family: var(--ff-display); font-weight: 600;
  font-size: clamp(21px, 2.3vw, 31px); letter-spacing: -0.045em; line-height: 1;
}
.hs-fig span {
  display: block; margin-top: 6px; font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(20,18,10,.6);
}

@media (max-width: 980px) {
  .hero.hero-split { grid-template-columns: 1fr; min-height: 0; }
  .hs-left { min-height: 66svh; }
  .hs-right { padding-top: clamp(28px, 5vw, 44px); }
  .hs-figs { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 620px) {
  .hs-figs { grid-template-columns: 1fr 1fr; }
}

/* ==================================================================
   LAYER 5 - fixes and full-bleed hero
   1. Media can no longer stretch a section to three times its text.
   2. No section carries a photo background AND a gallery of photos.
   3. Backgrounds rotate roughly 40 black / 40 white / 20 photograph.
   ================================================================== */

/* ---- 1. cap every piece of section media ---- */
.split { align-items: center; }
.split-media img,
.split-media.wide img {
  aspect-ratio: auto;
  height: clamp(230px, 30vw, 400px);
  width: 100%;
  object-fit: cover;
}
.profile-photo { max-height: 460px; }
.place { min-height: 150px; }
.place.tall { min-height: 312px; }

/* trust anchor: sized by its content, not stretched to the column */
.trust { align-items: start; }
.trust-anchor { display: block; grid-row: auto; }
.trust-anchor .lic { margin-top: clamp(18px, 2vw, 26px); }
@media (min-width: 1101px) {
  .trust { grid-template-columns: 1.08fr 1fr; }
  .trust-anchor { grid-row: 1 / span 3; }
}

/* ---- 2. photo-backed bands are for text only ---- */
.sec-img { padding-block: clamp(46px, 5vw, 82px); }
.sec-img > .bgimg img { filter: grayscale(.35) brightness(.34); }
.sec-img .lede { color: rgba(231,224,212,.78); }

/* ---- 3. course index with real character ---- */
.index { border-top: 0; }
.index-row {
  grid-template-columns: 54px 1fr auto 18px;
  align-items: center;
  border-bottom: 1px solid var(--line-soft);
  padding-block: clamp(14px, 1.6vw, 22px);
}
.index-row::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(200,155,43,.08);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .45s var(--ease);
}
.index-row:hover::before { transform: scaleY(1); }
.sec-white .index-row::before { background: rgba(19,19,22,.05); }
.index-num {
  display: grid; place-items: center;
  width: 42px; height: 42px; overflow: visible;
  border: 1px solid var(--line); border-radius: 8px;
  font-size: 11px; font-weight: 600;
  transition: border-color .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.index-num span::after { display: none; }
.index-row:hover .index-num { border-color: var(--brass); background: var(--brass); color: var(--void); }
.sec-white .index-num { border-color: rgba(19,19,22,.18); }
.sec-white .index-row:hover .index-num { background: #131316; border-color: #131316; color: var(--paper); }
.index-sub { display: none; }
.index-thumb {
  display: block; grid-column: auto; margin: 0;
  width: 62px; height: 44px; border-radius: 6px; overflow: hidden;
  opacity: 0; transform: translateX(-8px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.index-thumb img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; filter: none; }
.index-row:hover .index-thumb { opacity: 1; transform: translateX(0); }

/* ==================================================================
   FULL-BLEED HERO
   Framed photograph, info bar above the nav, figures bottom left,
   a real quote card bottom right.
   ================================================================== */

.hero.hero-full {
  display: block; padding: 0; min-height: 0;
  background: var(--void);
}
.hf-frame {
  position: relative;
  margin: 10px;
  margin-top: calc(var(--nav-h) + 22px);
  border-radius: 18px;
  overflow: hidden;
  min-height: clamp(520px, 78svh, 760px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(22px, 3.2vw, 52px);
}
.hf-frame .hero-stage { inset: 0; border-radius: 0; }

.hf-pill {
  position: absolute; top: clamp(18px, 2.4vw, 30px); right: clamp(18px, 2.4vw, 30px);
  z-index: 4; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: 999px;
  background: rgba(11,11,12,.5); backdrop-filter: blur(10px);
  border: 1px solid rgba(231,224,212,.18);
  font-size: 11px; letter-spacing: .06em; color: var(--bone);
}
.hf-pill svg { stroke: var(--yellow); }

.hf-body { position: relative; z-index: 4; max-width: 44ch; }
.hf-rate {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
  font-size: 12px; color: var(--bone);
}
.hf-rate b { color: var(--yellow); letter-spacing: .1em; font-size: 13px; }
.hf-body h1 { max-width: 15ch; }
.hf-body .lede { margin-top: 16px; color: rgba(231,224,212,.82); max-width: 40ch; }
.hf-body .actions { margin-top: clamp(20px, 2.4vw, 30px); }

.hf-foot {
  position: relative; z-index: 4;
  margin-top: clamp(30px, 4vw, 58px);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.hf-figs { display: flex; gap: clamp(20px, 3vw, 44px); }
.hf-fig { padding-left: 16px; border-left: 1px solid rgba(231,224,212,.28); }
.hf-fig b {
  display: block; font-family: var(--ff-display); font-weight: 600;
  font-size: clamp(24px, 2.8vw, 38px); letter-spacing: -0.05em; line-height: 1; color: var(--bone);
}
.hf-fig span { display: block; margin-top: 6px; font-size: 11px; color: rgba(231,224,212,.6); }

.hf-card {
  display: flex; gap: 14px; align-items: center;
  max-width: 380px; padding: 14px 16px; border-radius: 12px;
  background: rgba(11,11,12,.55); backdrop-filter: blur(12px);
  border: 1px solid rgba(231,224,212,.16);
}
.hf-card img { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; flex: none; }
.hf-card p { font-size: 12.5px; line-height: 1.5; color: var(--bone); margin: 0 0 5px; font-style: italic; }
.hf-card cite { font-style: normal; font-size: 10.5px; letter-spacing: .08em; color: rgba(231,224,212,.6); }

/* info bar above the nav */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 91;
  display: flex; justify-content: space-between; gap: 20px;
  padding: 7px clamp(20px, 4vw, 46px);
  font-size: 11px; color: rgba(231,224,212,.6);
  background: var(--void);
  border-bottom: 1px solid var(--line-soft);
}
.topbar a:hover { color: var(--yellow); }
.topbar span, .topbar a { display: inline-flex; align-items: center; gap: 7px; }
.topbar .tb-right { display: flex; gap: 22px; }
body.has-topbar .nav { top: 30px; }
@media (max-width: 860px) {
  .topbar { display: none; }
  body.has-topbar .nav { top: 0; }
}

@media (max-width: 760px) {
  .hf-foot { flex-direction: column; align-items: stretch; }
  .hf-card { max-width: none; }
  .hf-frame { min-height: 0; padding-top: clamp(90px, 22vw, 140px); }
}

/* ==================================================================
   LAYER 6
   Nav      - full-panel underlay: the page stays put and dims in place;
              the menu panel slides in over it from the right edge.
   Headings - per character mask reveal with rotation and blur.
   Sections - numbered 01/02/03 markers.
   ================================================================== */

/* ---- page shell that moves aside ---- */
.page-shell {
  position: relative; z-index: 2;
  background: var(--void);
  transform-origin: top center;
  transition: transform .82s cubic-bezier(0.76,0,0.24,1), border-radius .82s cubic-bezier(0.76,0,0.24,1);
  will-change: transform;
}
html.menu-open .page-shell {
  transform: translateY(62vh) scale(.9);
  border-radius: 20px;
  overflow: hidden;
}
html.menu-open, html.menu-open body { overflow: hidden; height: 100%; }
.page-shell::after {
  content: ""; position: absolute; inset: 0; z-index: 60;
  background: rgba(11,11,12,.5);
  opacity: 0; pointer-events: none;
  transition: opacity .6s var(--ease);
}
html.menu-open .page-shell::after { opacity: 1; pointer-events: auto; }

/* ---- the panel that slides in over the dimmed page ---- */
.underlay {
  position: fixed; inset: 0 0 0 auto; z-index: 10;
  width: min(100vw, 640px);
  background: rgba(14, 13, 10, .97);
  padding: calc(var(--nav-h) + 46px) clamp(20px, 5vw, 68px) 40px;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 4vw, 60px);
  align-content: start;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .7s cubic-bezier(0.22,1,0.36,1), visibility 0s .7s;
  visibility: hidden;
  border-left: 1px solid var(--line);
}
html.menu-open .underlay {
  visibility: visible;
  transform: translateX(0);
  transition: transform .7s cubic-bezier(0.22,1,0.36,1), visibility 0s;
}
.underlay a { display: block; }

.ul-links { list-style: none; margin: 0; padding: 0; }
.ul-links li { overflow: hidden; }
.ul-links a {
  position: relative;
  font-family: var(--ff-display); font-weight: 600;
  font-size: clamp(36px, 9.5vw, 62px); letter-spacing: -0.045em; line-height: 1.14;
  color: var(--bone);
  transform: translateY(105%);
  transition: transform .7s cubic-bezier(0.22,1,0.36,1), color .3s var(--ease);
  display: flex; align-items: baseline; gap: 14px;
}
html.menu-open .ul-links a { transform: translateY(0); }
.ul-links li:nth-child(1) a { transition-delay: .18s }
.ul-links li:nth-child(2) a { transition-delay: .24s }
.ul-links li:nth-child(3) a { transition-delay: .30s }
.ul-links li:nth-child(4) a { transition-delay: .36s }
.ul-links li:nth-child(5) a { transition-delay: .42s }
.ul-links a i {
  font-style: normal; font-family: var(--ff-body);
  font-size: 11px; letter-spacing: .16em; color: var(--muted-2);
}
.ul-links a:hover { color: var(--yellow); }

.ul-side { align-self: end; display: grid; gap: 26px; opacity: 0; transition: opacity .6s var(--ease) .42s; }
html.menu-open .ul-side { opacity: 1; }
.ul-side h4 { font-family: var(--ff-body); font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); margin-bottom: 12px; }
.ul-side a, .ul-side div { color: var(--muted); font-size: 14.5px; padding-block: 4px; transition: color .25s var(--ease), padding-left .3s var(--ease); }
.ul-side a:hover { color: var(--yellow); padding-left: 6px; }

/* menu button is always available, not only on small screens */
.nav-toggle { display: flex !important; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; }
.nav-toggle i { display: block; width: 22px; height: 1.5px; background: var(--bone); transition: transform .4s var(--ease), opacity .25s; }
html.menu-open .nav-toggle i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
html.menu-open .nav-toggle i:nth-child(2) { opacity: 0; }
html.menu-open .nav-toggle i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.menu { display: none !important; }

/* ---- per character heading reveal ---- */
.words .ch {
  display: inline-block;
  transform: translateY(96%) rotate(4deg);
  filter: blur(5px);
  opacity: 0;
  transition:
    transform .78s cubic-bezier(0.22,1,0.36,1) var(--cd, 0s),
    filter .6s ease var(--cd, 0s),
    opacity .5s ease var(--cd, 0s);
}
.words.in .ch { transform: translateY(0) rotate(0deg); filter: blur(0); opacity: 1; }
.words.chars .w > span { transform: none !important; }

/* ---- section number markers ---- */
.sec-num {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--ff-body); font-size: 10px; font-weight: 600;
  letter-spacing: .2em; color: var(--brass); margin-bottom: 12px;
}
.sec-num::before { content: ""; width: 22px; height: 1px; background: currentColor; }
.sec-white .sec-num { color: var(--yellow-deep); }
.sec-yellow .sec-num { color: rgba(20,18,10,.55); }

@media (max-width: 860px) {
  .underlay { grid-template-columns: 1fr; }
  .ul-side { align-self: start; }
  html.menu-open .page-shell { transform: translateY(70vh) scale(.94); }
}



/* close control inside the underlay, since the nav rides away with the page */
#ul-close {
  position: absolute; top: clamp(16px, 2.4vw, 30px); right: clamp(20px, 5vw, 68px);
  z-index: 5; display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: 10px;
  border: 1px solid var(--line); color: var(--bone);
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  opacity: 0; transition: opacity .5s var(--ease) .3s, border-color .3s var(--ease), color .3s var(--ease);
}
html.menu-open #ul-close { opacity: 1; }
#ul-close:hover { border-color: var(--yellow); color: var(--yellow); }
#ul-close svg { stroke: currentColor; }

/* ---- pinned side-tab ribbon, every page, independent of scroll and
   of the nav's open/closed state ---- */
.ribbon {
  position: fixed; top: 50%; right: 0; z-index: 45;
  display: flex; align-items: center; gap: 8px;
  padding: 16px 9px 18px;
  background: var(--ink-800);
  border: 1px solid var(--line); border-right: none;
  border-radius: 8px 0 0 8px;
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--ff-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--yellow);
  transform: translateY(-50%) rotate(-2.5deg);
  transform-origin: right center;
  transition: transform .35s var(--mi-out, var(--ease)), background .35s var(--mi-out, var(--ease)), color .35s var(--mi-out, var(--ease)), padding .35s var(--mi-out, var(--ease));
}
.ribbon:hover, .ribbon:focus-visible {
  transform: translateY(-50%) rotate(0deg) translateX(-3px);
  background: var(--yellow);
  color: var(--ink-950);
  padding-right: 13px;
}
@media (max-width: 640px) {
  .ribbon { font-size: 10px; padding: 13px 7px 15px; }
}

/* ==================================================================
   LAYER 7
   ================================================================== */

/* topbar gone */
.topbar { display: none !important; }
body.has-topbar .nav { top: 0; }

/* hero contained, like every other section */
.hero.hero-full { padding-inline: var(--gutter); }
.hf-frame {
  max-width: var(--wrap); margin-inline: auto; margin-bottom: 0;
  border-radius: 16px;
  min-height: clamp(460px, 66svh, 620px);
}

/* breadcrumbs removed */
.crumbs { display: none !important; }

/* ---- reveal for imagery: a wipe, not just a fade ---- */
.imgrv { overflow: hidden; }
.imgrv > img, .imgrv > picture > img {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.08);
  transition: clip-path 1.05s cubic-bezier(0.76,0,0.24,1) var(--rvd,0s),
              transform 1.3s cubic-bezier(0.22,1,0.36,1) var(--rvd,0s);
}
.imgrv.in > img, .imgrv.in > picture > img { clip-path: inset(0 0 0 0); transform: scale(1); }

/* ---- trust cards with more character ---- */
.trust-item { position: relative; overflow: hidden; }
.trust-item .tnum {
  position: absolute; top: 14px; right: 16px;
  font-family: var(--ff-display); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; color: var(--muted-2);
}
.sec-white .trust-item .tnum { color: rgba(19,19,22,.32); }
.trust-item::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--yellow); transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--ease);
}
.trust-item:hover::after { transform: scaleX(1); }
.trust-anchor { background: #131316; color: var(--bone); border-color: transparent; }
.sec-white .trust-anchor { background: #17161A; }
.sec-white .trust-anchor b, .sec-white .trust-anchor .lic { color: var(--bone); }
.sec-white .trust-anchor span { color: rgba(231,224,212,.66); }
.sec-white .trust-anchor svg { stroke: var(--yellow); }
.sec-white .trust-anchor .lic i { color: rgba(231,224,212,.5); }

/* ---- bases section: map beside the photo cards ---- */
.bases-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(22px, 3vw, 46px); align-items: start; }
.bases-map { position: relative; }
.bases-map .bg-map { width: 100%; }
.bases-map .map-panel { margin-top: 16px; min-height: 0; padding: 18px 20px; }
.bases-grid .places { grid-template-columns: repeat(2, 1fr); }
.bases-grid .place.tall { grid-column: span 2; grid-row: auto; min-height: 220px; }
@media (max-width: 1000px) { .bases-grid { grid-template-columns: 1fr; } }

/* ---- teacher profile: stronger header ---- */
.pf-head {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(20px, 3vw, 46px);
  align-items: end;
  padding: clamp(22px, 3vw, 40px);
  border-radius: 14px; background: var(--raised);
  border: 1px solid var(--line-soft);
}
.pf-head h1 { font-size: clamp(26px, 3.2vw, 46px); }
.pf-photo { border-radius: 12px; overflow: hidden; aspect-ratio: 5 / 4; }
.pf-photo img { width: 100%; height: 100%; object-fit: cover; }
.pf-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.pf-fact { padding: 12px 14px; border-radius: 10px; background: rgba(231,224,212,.05); }
.pf-fact b { display: block; font-family: var(--ff-display); font-size: 13px; font-weight: 600; }
.pf-fact span { display: block; margin-top: 4px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
@media (max-width: 900px) { .pf-head { grid-template-columns: 1fr; } .pf-facts { grid-template-columns: 1fr 1fr; } }

/* ---- contact: two panels ---- */
.ct-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(20px, 3vw, 40px); align-items: start; }
.ct-panel { padding: clamp(22px, 2.8vw, 38px); border-radius: 14px; background: var(--raised); border: 1px solid var(--line-soft); }
.ct-panel.accent { background: var(--yellow); color: #14120A; border-color: transparent; }
.ct-panel.accent .eyebrow { color: rgba(20,18,10,.6); }
.ct-panel.accent .map-specs li { color: rgba(20,18,10,.8); border-color: rgba(20,18,10,.16); }
.ct-panel.accent .map-specs { border-color: rgba(20,18,10,.16); }
.ct-panel.accent .map-specs li b, .ct-panel.accent .map-specs li b a { color: #14120A; }
.ct-panel.accent .btn-line { border-color: rgba(20,18,10,.3); color: #14120A; }
.ct-panel.accent .btn-line::before { background: #14120A; }
.ct-panel.accent .btn-line:hover { color: var(--yellow); }
@media (max-width: 900px) { .ct-grid { grid-template-columns: 1fr; } }

/* ---- обучения page: cards instead of a bare list ---- */
.prog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.prog {
  position: relative; display: block; overflow: hidden;
  border-radius: 12px; border: 1px solid var(--line-soft);
  background: var(--raised); padding: clamp(18px, 2vw, 26px);
  min-height: 168px;
  transition: border-color .4s var(--ease), transform .5s var(--ease);
}
.prog:hover { border-color: rgba(200,155,43,.4); transform: translateY(-4px); }
.prog-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.prog-num { font-family: var(--ff-display); font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--brass); }
.prog h3 { margin-top: 16px; max-width: 22ch; }
.prog p { margin-top: 9px; font-size: 13.5px; color: var(--muted-2); max-width: 34ch; }
.prog-meta { margin-top: 14px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--champagne); }
.prog-img {
  position: absolute; right: 0; bottom: 0; width: 42%; height: 62%;
  clip-path: inset(0 0 0 0); opacity: 0;
  transition: opacity .5s var(--ease);
}
.prog-img img { width: 100%; height: 100%; object-fit: cover; }
.prog:hover .prog-img { opacity: .28; }
@media (max-width: 760px) { .prog-grid { grid-template-columns: 1fr; } }



/* hero frame must line up exactly with .wrap on both edges */
.hf-frame { margin: 0 auto; margin-top: calc(var(--nav-h) + 18px); }

/* Image wipes only hide the image once JS has confirmed it can reveal it again.
   Without this, a dead observer would leave photographs fully clipped. */
.imgrv > img, .imgrv > picture > img { clip-path: none; transform: none; }
html.js-rv .imgrv > img, html.js-rv .imgrv > picture > img {
  clip-path: inset(0 0 100% 0); transform: scale(1.08);
}
html.js-rv .imgrv.in > img, html.js-rv .imgrv.in > picture > img {
  clip-path: inset(0 0 0 0); transform: scale(1);
}

/* ==================================================================
   LAYER 8
   About    - white card panel overlapping a photo hero (Migital)
   Teachers - fanned photo hero + role-accented cards (Ultrablox)
   Map      - white band, richer selected-region panel
   Contact  - photo band with a floating white form card (Stayli)
   ================================================================== */

/* ---- shared photo band hero for inner pages ---- */
.pg-hero { position: relative; overflow: hidden; }
.pg-hero .bgimg { position: absolute; inset: 0; }
.pg-hero .bgimg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4) brightness(.42); }
.pg-hero > .wrap {
  position: relative; z-index: 1;
  padding-top: calc(var(--nav-h) + clamp(52px, 7vw, 96px));
  padding-bottom: clamp(60px, 8vw, 116px);
}
.pg-hero h1 { max-width: 18ch; }
.pg-hero .lede { margin-top: 16px; color: rgba(231,224,212,.82); }

/* ---- About: overlapping white panel ---- */
.ab-panel {
  position: relative; z-index: 2;
  max-width: var(--wrap); margin: clamp(-92px, -7vw, -54px) auto 0;
  background: var(--paper); color: #131316;
  border-radius: 18px;
  padding: clamp(24px, 3.2vw, 46px);
  display: grid; grid-template-columns: .85fr 1.15fr 1fr;
  gap: clamp(20px, 3vw, 40px);
}
.ab-panel h3 { color: #131316; }
.ab-col > .eyebrow { color: var(--yellow-deep); }
.ab-list { list-style: none; margin: 0; padding: 0; }
.ab-list li {
  padding: 9px 0; border-bottom: 1px solid rgba(19,19,22,.1);
  font-size: 14.5px; color: rgba(19,19,22,.72);
  display: flex; align-items: center; gap: 10px;
  transition: padding-left .3s var(--ease), color .3s var(--ease);
}
.ab-list li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--yellow-deep); flex: none; }
.ab-list li:hover { padding-left: 6px; color: #131316; }
.ab-list li.on { font-weight: 700; color: #131316; }
.ab-col p { font-size: 14.5px; line-height: 1.66; color: rgba(19,19,22,.7); }
.ab-card {
  background: #17161A; color: var(--bone);
  border-radius: 14px; padding: clamp(20px, 2.4vw, 30px);
  display: flex; flex-direction: column; justify-content: space-between;
}
.ab-card h3 { color: var(--bone); max-width: 16ch; }
.ab-card p { color: rgba(231,224,212,.7); margin-top: 12px; font-size: 13.5px; }
.ab-card .btn { margin-top: 20px; align-self: flex-start; }
@media (max-width: 1000px) { .ab-panel { grid-template-columns: 1fr; } }

/* ---- Teachers: fanned photo hero ---- */
.fan { display: flex; justify-content: center; align-items: flex-end; gap: clamp(6px, 1vw, 16px); margin-top: clamp(26px, 4vw, 52px); }
.fan figure {
  margin: 0; width: clamp(86px, 11vw, 156px); border-radius: 14px; overflow: hidden;
  background: var(--raised); aspect-ratio: 4 / 5;
  transition: transform .6s var(--ease), filter .6s var(--ease);
  filter: grayscale(1) brightness(.9);
}
.fan figure img { width: 100%; height: 100%; object-fit: cover; }
.fan figure:nth-child(1) { transform: rotate(-16deg) translateY(28px); }
.fan figure:nth-child(2) { transform: rotate(-9deg)  translateY(10px); }
.fan figure:nth-child(3) { transform: rotate(0deg)   translateY(-14px); z-index: 2; }
.fan figure:nth-child(4) { transform: rotate(9deg)   translateY(10px); }
.fan figure:nth-child(5) { transform: rotate(16deg)  translateY(28px); }
.fan figure:hover { filter: grayscale(0) brightness(1); transform: rotate(0deg) translateY(-22px) scale(1.06); z-index: 3; }
@media (max-width: 620px) { .fan figure:nth-child(1), .fan figure:nth-child(5) { display: none; } }

/* role in the accent colour, like the reference */
.person-spec { color: var(--yellow); }
.sec-white .person-spec { color: var(--yellow-deep); }

/* ---- Map band on white ---- */
.map-section-white { background: var(--paper); color: #131316; }
.map-section-white .bg-map path.region { fill: rgba(19,19,22,.05); stroke: rgba(19,19,22,.16); }
.map-section-white .bg-map path.region.has { fill: rgba(217,168,31,.16); stroke: rgba(217,168,31,.5); }
.map-section-white .bg-map path.region.active { fill: var(--yellow); stroke: #A87F1E; }
.map-section-white .eyebrow { color: var(--yellow-deep); }
.map-section-white .lede { color: rgba(19,19,22,.7); }
.map-section-white h2 em { color: var(--yellow-deep); }
.map-section-white .map-panel { background: #17161A; color: var(--bone); border-color: transparent; }

/* richer selected-region panel */
.map-panel { position: relative; }
.map-panel .map-count { display: inline-flex; align-items: center; gap: 8px; }
.map-panel .map-count::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); }
.map-figs { padding: 14px 0; border-block: 1px solid var(--line-soft); }
.map-panel .map-towns { display: inline-block; margin-top: 4px; padding: 5px 11px; border-radius: 7px; background: rgba(231,224,212,.07); font-size: 12.5px; }
.map-sentence { margin-top: 14px; }

/* ---- Contact: floating white form card over a photo band ---- */
.ct-band { position: relative; overflow: hidden; }
.ct-band .bgimg { position: absolute; inset: 0; }
.ct-band .bgimg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.3) brightness(.5); }
.ct-band > .wrap {
  position: relative; z-index: 1;
  padding-top: calc(var(--nav-h) + clamp(46px, 6vw, 78px));
  padding-bottom: clamp(40px, 5vw, 70px);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start;
}
.ct-band h1 { max-width: 14ch; }
.ct-band .lede { margin-top: 14px; color: rgba(231,224,212,.82); }
.ct-band .hf-figs { margin-top: clamp(26px, 3.4vw, 42px); }
.ct-card {
  background: var(--paper); color: #131316;
  border-radius: 16px; padding: clamp(22px, 2.8vw, 36px);
}
.ct-card h2 { font-size: clamp(19px, 1.9vw, 26px); }
.ct-card .form { max-width: none; margin-top: 20px; }
.ct-card .field label { color: rgba(19,19,22,.55); }
.ct-card .field input, .ct-card .field select, .ct-card .field textarea {
  color: #131316; border-bottom-color: rgba(19,19,22,.18);
  background: rgba(19,19,22,.03); border-radius: 8px; padding: 11px 12px;
}
.ct-card .field input::placeholder, .ct-card .field textarea::placeholder { color: rgba(19,19,22,.36); }
.ct-card .field input:focus, .ct-card .field select:focus, .ct-card .field textarea:focus { border-bottom-color: var(--yellow-deep); }
.ct-card .field option { background: var(--paper); color: #131316; }
.ct-card .btn-gold { background: #131316; color: var(--paper); }
.ct-card .btn-gold::before { background: var(--yellow-deep); }
.ct-card .btn-gold:hover { color: #131316; }
.ct-card .form-note { color: rgba(19,19,22,.5); }
.ct-card .field:focus-within label { color: var(--yellow-deep); }
@media (max-width: 900px) { .ct-band > .wrap { grid-template-columns: 1fr; } }

/* ==================================================================
   LAYER 9
   ================================================================== */

/* ---- removals ----
   .tnum is no longer removed: the microinteraction system uses the
   01-04 markers as the hover affordance for the trust list. */
.hf-pill, .hs-index { display: none !important; }

/* ---- hero: background covers the whole section, no inset frame ---- */
.hero.hero-full { padding: 0; }
.hf-frame {
  margin: 0; max-width: none; border-radius: 0;
  min-height: clamp(520px, 82svh, 780px);
  padding: clamp(24px, 3.4vw, 56px) var(--gutter) clamp(28px, 3.4vw, 52px);
  padding-top: calc(var(--nav-h) + clamp(70px, 10vw, 150px));
}
.hf-body, .hf-foot { max-width: var(--wrap); margin-inline: auto; width: 100%; }
.hf-body { max-width: min(var(--wrap), 100%); }
.hf-body > * { max-width: 44ch; }
.hf-body h1 { max-width: 16ch; }

/* ---- vertical guide lines over photography ---- */
.vlines { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: flex; }
.vlines i { flex: 1; border-right: 1px solid rgba(231,224,212,.13); }
.vlines i:last-child { border-right: 0; }
.sec-white .vlines i, .map-section-white .vlines i { border-color: rgba(19,19,22,.08); }

/* ---- photo-backed sections reveal their image ---- */
.sec-img .bgimg, .pg-hero .bgimg, .ct-band .bgimg, .hero-stage { overflow: hidden; }
.sec-img .bgimg img, .pg-hero .bgimg img, .ct-band .bgimg img {
  transform: scale(1.14);
  transition: transform 1.6s cubic-bezier(0.22,1,0.36,1), filter 1.2s ease;
}
.sec-img.in .bgimg img, .pg-hero.in .bgimg img, .ct-band.in .bgimg img { transform: scale(1.02); }
/* every photo band carries a dark scrim */
.sec-img::after, .pg-hero::after, .ct-band::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: rgba(11,11,12,.62); pointer-events: none;
}
.sec-img > .wrap, .pg-hero > .wrap, .ct-band > .wrap { position: relative; z-index: 1; }
.sec-img .bgimg img, .pg-hero .bgimg img, .ct-band .bgimg img { filter: grayscale(.32) brightness(.72); }

/* ---- menu now arrives from the right ---- */
html.menu-open .page-shell {
  transform: translateX(-42vw) scale(.94);
  border-radius: 16px;
}
.underlay {
  align-content: space-between;
}
.ul-side { align-self: end; grid-template-columns: 1fr 1fr; display: grid; gap: 20px 26px; }
#ul-close { right: clamp(24px, 3vw, 48px); }
@media (max-width: 900px) {
  .ul-side { grid-template-columns: 1fr; }
}

/* ---- alignment: trust and bases share the container grid ---- */
.trust { grid-template-columns: 1.05fr 1fr; align-items: stretch; }
.trust-anchor { display: flex; flex-direction: column; justify-content: space-between; }
.trust-side { display: grid; gap: 10px; align-content: stretch; }
.trust-side .trust-item { display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 1100px) { .trust { grid-template-columns: 1fr; } }

.bases-grid { grid-template-columns: minmax(0,1fr) minmax(0,1.3fr); align-items: stretch; }
.bases-map { display: flex; flex-direction: column; }
.bases-map .bg-map { flex: 1; min-height: 0; }
.bases-map .map-panel { margin-top: auto; }
.bases-grid .places { grid-auto-rows: 1fr; height: 100%; }
.bases-grid .place { min-height: 132px; }
.bases-grid .place.tall { min-height: 0; }

/* ---- specialty sections on the courses page ---- */
.spec-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 48px);
  align-items: center; padding-block: clamp(26px, 3vw, 44px);
  border-bottom: 1px solid var(--line-soft);
}
.spec-row:nth-child(even) .spec-media { order: 2; }
.sec-white .spec-row { border-color: rgba(19,19,22,.1); }
.spec-media { position: relative; overflow: hidden; border-radius: 12px; }
.spec-media img { width: 100%; height: clamp(180px, 22vw, 260px); object-fit: cover; transition: transform 1s var(--ease); }
.spec-row:hover .spec-media img { transform: scale(1.05); }
.spec-num { font-family: var(--ff-display); font-size: 11px; font-weight: 600; letter-spacing: .16em; color: var(--brass); }
.spec-body h3 { margin-top: 10px; }
.spec-body p { margin-top: 9px; font-size: 14px; color: var(--muted-2); max-width: 40ch; }
.spec-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.spec-tags span { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; padding: 6px 11px; border-radius: 7px; border: 1px solid var(--line); color: var(--muted); }
.sec-white .spec-tags span { border-color: rgba(19,19,22,.16); color: rgba(19,19,22,.62); }
.spec-row .actions { margin-top: 16px; }
@media (max-width: 820px) { .spec-row { grid-template-columns: 1fr; } .spec-row:nth-child(even) .spec-media { order: 0; } }

/* ---- contact: useful panel instead of a flat colour block, map below ---- */
.ct-info { padding: 0; background: none; border: 0; }
.ct-info .ct-media { border-radius: 14px; overflow: hidden; margin-bottom: 16px; }
.ct-info .ct-media img { width: 100%; height: clamp(180px, 22vw, 250px); object-fit: cover; }
.ct-hours { display: grid; gap: 1px; background: var(--line-soft); border-radius: 12px; overflow: hidden; }
.ct-hours div { background: var(--raised); padding: 12px 16px; display: flex; justify-content: space-between; gap: 14px; font-size: 13.5px; }
.ct-hours div span { color: var(--muted-2); }
.ct-hours div b { font-weight: 500; color: var(--champagne); }
.ct-map { border-radius: 14px; overflow: hidden; border: 1px solid var(--line-soft); }
.ct-map iframe { width: 100%; height: clamp(260px, 34vw, 400px); border: 0; display: block; filter: grayscale(.8) invert(.9) hue-rotate(180deg) brightness(.9); }

/* ---- hover animations, broadly ---- */
.stat, .hf-fig, .map-fig { transition: transform .45s var(--ease); }
.stat:hover, .hf-fig:hover, .map-fig:hover { transform: translateY(-4px); }
.tag:hover { transform: translateY(-2px); }
.foot-col a, .ab-list li, .map-specs li a { will-change: transform; }
.map-specs li:hover { color: var(--bone); }
.sec-white .map-specs li:hover { color: #131316; }
.brand:hover .brand-type b { color: var(--yellow); transition: color .3s var(--ease); }
.strip-track a:hover b { color: var(--yellow); }
.prog:hover .prog-num { color: var(--yellow); }
.quote-card { transition: border-color .4s var(--ease); }
.quote-card:hover { border-color: var(--yellow); }
.fan figure { cursor: pointer; }



/* the page stays put — it dims via .page-shell::after, it doesn't move.
   The panel sliding in over it (.underlay, above) carries the motion. */
html.menu-open .page-shell {
  transform: none !important;
  border-radius: 0;
  overflow: visible;
}


/* ==================================================================
   LAYER 10 - bigger scale, longer sections, photo carousels
   ================================================================== */



body { font-size: 17px; line-height: 1.66; }
h1 { font-size: clamp(36px, 5.4vw, 82px); }
h2 { font-size: clamp(27px, 3.5vw, 52px); }
h3 { font-size: clamp(19px, 1.7vw, 26px); }
.eyebrow { font-size: 11.5px; letter-spacing: .2em; margin-bottom: 24px; }
.lede { font-size: clamp(17px, 1.35vw, 22px); line-height: 1.68; max-width: 54ch; }

/* sections breathe again */
.section { padding-block: clamp(72px, 7.6vw, 132px); }
.section.tight { padding-block: clamp(52px, 5.2vw, 84px); }
.section.loose { padding-block: clamp(96px, 10vw, 176px); }
.section-head { margin-bottom: clamp(40px, 4.4vw, 72px); max-width: 48ch; }

.btn { height: 54px; font-size: 14.5px; padding-inline: 28px; border-radius: 11px; }
.btn-sm { height: 44px; font-size: 13px; padding-inline: 20px; }

.hf-frame { min-height: clamp(600px, 88svh, 880px); }
.hf-fig b { font-size: clamp(30px, 3.4vw, 46px); }
.stat b { font-size: clamp(40px, 5vw, 74px); }
.person-photo { aspect-ratio: 3 / 4; }
.split-media img, .split-media.wide img { height: clamp(280px, 34vw, 500px); }
.place { min-height: 200px; }
.place.tall { min-height: 412px; }
.bases-grid .place { min-height: 168px; }
.spec-media img { height: clamp(220px, 26vw, 340px); }
.trust-item { padding: clamp(24px, 2.6vw, 38px); }
.trust-anchor .lic { font-size: clamp(26px, 3vw, 46px); }
.prog { min-height: 210px; }
.index-row { padding-block: clamp(18px, 2vw, 30px); }
.index-title { font-size: clamp(21px, 2.6vw, 40px); }
.index-num { width: 48px; height: 48px; }
.index-thumb { width: 78px; height: 54px; }
.ct-map iframe { height: clamp(320px, 40vw, 520px); }

/* ---- auto-running photo carousel ---- */
.reel { overflow: hidden; }
.reel + .reel { margin-top: clamp(12px, 1.4vw, 20px); }
.reel-track { display: flex; gap: clamp(12px, 1.4vw, 20px); width: max-content; }
.reel-track.a { animation: reelA 64s linear infinite; }
.reel-track.b { animation: reelB 78s linear infinite; }
@keyframes reelA { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes reelB { from { transform: translateX(-50%) } to { transform: translateX(0) } }
.reel:hover .reel-track { animation-play-state: paused; }
.reel figure {
  margin: 0; flex: none;
  width: clamp(180px, 19vw, 292px);
  border-radius: 12px; overflow: hidden;
  background: var(--raised); position: relative;
}
.reel figure img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  filter: grayscale(1) brightness(.9);
  transition: filter .6s var(--ease), transform .8s var(--ease);
}
.reel figure:hover img { filter: grayscale(0) brightness(1); transform: scale(1.05); }
.reel figcaption {
  position: absolute; inset: auto 0 0 0; padding: 14px 15px;
  background: rgba(11,11,12,.62); backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(8px);
  transition: opacity .4s var(--ease), transform .45s var(--ease);
}
.reel figure:hover figcaption { opacity: 1; transform: translateY(0); }
.reel figcaption b { display: block; font-family: var(--ff-display); font-size: 14px; font-weight: 600; color: var(--bone); }
.reel figcaption span { display: block; margin-top: 3px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--yellow); }
.reel-edge { position: relative; }

/* ---- photo strip for text-heavy sections ---- */
.pstrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.2vw, 16px); margin-top: clamp(30px, 3.4vw, 52px); }
.pstrip figure { margin: 0; border-radius: 12px; overflow: hidden; background: var(--raised); }
.pstrip img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; filter: grayscale(.4); transition: filter .6s var(--ease), transform .8s var(--ease); }
.pstrip figure:hover img { filter: none; transform: scale(1.06); }
.pstrip figure:nth-child(2) { transform: translateY(clamp(12px, 1.6vw, 26px)); }
.pstrip figure:nth-child(4) { transform: translateY(clamp(12px, 1.6vw, 26px)); }
@media (max-width: 760px) { .pstrip { grid-template-columns: 1fr 1fr; } .pstrip figure { transform: none !important; } }

/* GSAP writes inline transforms; keep our own off those elements */
.gs-ready .rv { opacity: 1; transform: none; transition: none; }



}

/* ---------- motion: reduced-motion and state classes, always last ---------- */
@layer motion {
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rv { opacity: 1; transform: none; }
  .words .w > span { transform: none; }
  .strip-track { animation: none; }
  .person-photo img, .split-media img { filter: none; }
  .place img { transform: none; }
  .people-grid.stagger > :nth-child(even) { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #curtain { display: none; }
  html.curtain-on, html.curtain-on body { overflow: auto; }
  .hero-layer img { animation: none; transform: scale(1.02); }
  .words .ch { transform: none; }
  .hero-frame i { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slats { display: none; }
  .hero-plate img { transform: scale(1.02); transition: none; }
  .hero-plate.live { clip-path: none; }
  .hero-plate.base { display: none; }
  .hero-halo { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .page-shell { transition: none; }
  .words .ch { transform: none; filter: none; opacity: 1; }
  .ul-links a { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .imgrv > img { clip-path: none; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sec-img .bgimg img, .pg-hero .bgimg img, .ct-band .bgimg img { transform: scale(1.02); transition: none; }
  html.menu-open .page-shell { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.menu-open .page-shell { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .reel-track { animation: none !important; }
  .pstrip figure { transform: none !important; }
}

}


/* ---------- components: the type scale ----------
   Piazzolla (Cyrillic-native editorial serif, real italics, opsz 8..30 pinned to
   30 for display sizes) for headings; Inter for body and UI.
   One scale, referenced everywhere, replacing ad hoc clamp() per component. */
@layer components {
  :root {
    --ff-display: "Piazzolla", "Iowan Old Style", Georgia, serif;
    --ff-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    /* Spec-sheet mono, scoped to labels only: eyebrows, stat captions, the
       licence number, module tags. A registration-plaque detail, not a
       body face. */
    --ff-mono: "IBM Plex Mono", "Consolas", ui-monospace, monospace;

    /* fluid scale, 1280px reference viewport */
    --t-micro: clamp(10.5px, 0.72vw, 11.5px);
    --t-small: clamp(12.5px, 0.95vw, 13.5px);
    --t-body:  clamp(15.5px, 1.33vw, 18px);
    --t-lede:  clamp(17px, 1.45vw, 21px);
    --t-h4:    clamp(17px, 1.3vw, 20px);
    --t-h3:    clamp(20px, 1.75vw, 26px);
    --t-h2:    clamp(30px, 3.9vw, 54px);
    --t-h1:    clamp(40px, 6.2vw, 86px);

    --lh-tight: 1.04;
    --lh-head:  1.1;
    --lh-body:  1.62;
    --lh-lede:  1.55;

    --tr-display: -0.022em;
    --tr-body: 0em;
    --tr-label: 0.18em;
  }

  h1, h2, h3, h4 {
    font-family: var(--ff-display);
    font-weight: 500;
    font-variation-settings: "opsz" 30;
    letter-spacing: var(--tr-display);
    line-height: var(--lh-head);
  }
  h1 { font-size: var(--t-h1); line-height: var(--lh-tight); font-weight: 400; }
  h2 { font-size: var(--t-h2); }
  h3 { font-size: var(--t-h3); }
  h4 { font-size: var(--t-h4); }

  /* the accent word keeps Piazzolla's real italic rather than a synthetic slant */
  h1 em, h2 em, h3 em { font-style: italic; font-synthesis: none; color: var(--yellow); }

  body { font-family: var(--ff-body); font-size: var(--t-body); line-height: var(--lh-body); letter-spacing: var(--tr-body); }
  .lede { font-size: var(--t-lede); line-height: var(--lh-lede); }
  .eyebrow { font-family: var(--ff-body); font-size: var(--t-micro); letter-spacing: var(--tr-label); font-weight: 600; }
  .prose p { font-size: var(--t-body); line-height: 1.78; }

  /* numerals: tabular so counters do not jitter while animating */
  .stat b, .hf-fig b, .map-fig b, .trust-anchor .lic {
    font-family: var(--ff-display);
    font-variation-settings: "opsz" 30;
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: -0.03em;
  }

  .index-title, .place-town, .brand-type b, .ul-links a, .map-panel h3, .faq summary, .spec-body h3, .prog h3 {
    font-family: var(--ff-display);
    font-variation-settings: "opsz" 30;
    letter-spacing: var(--tr-display);
  }
  .brand-type b { font-weight: 600; letter-spacing: 0.06em; }
  .btn, .field label, .person-spec, .index-num, .index-meta, .reel figcaption span { font-family: var(--ff-body); }
}

/* ---------- nav: underlay pill + explicit top/scrolled states ---------- */
@layer components {
  .nav .shell {
    padding-block: var(--nav-pad, 0px);
    transition: background .4s var(--ease), border-color .4s var(--ease),
                height .4s var(--ease), padding .4s var(--ease), backdrop-filter .4s var(--ease);
  }
  .nav[data-state="top"] .shell { --nav-pad: 6px; background: transparent; backdrop-filter: none; }
  .nav[data-state="scrolled"] .shell {
    --nav-pad: 0px;
    height: 58px;
    background: rgba(11, 11, 12, 0.72);
    backdrop-filter: blur(18px) saturate(1.4);
    border-color: var(--line-soft);
  }

  /* the pill lives behind the links and is driven by GSAP */
  .nav-links { position: relative; }
  .nav-pill {
    position: absolute;
    top: 50%; left: 0;
    height: 34px; width: 0;
    margin-top: -17px;
    border-radius: 999px;
    background: rgba(231, 224, 212, 0.09);
    border: 1px solid rgba(231, 224, 212, 0.10);
    pointer-events: none;
    opacity: 0;
    z-index: 0;
    will-change: transform, width;
  /* GSAP owns transform and width here. A CSS transition on the same
     properties would fight the tween, so it is explicitly cancelled. */
  transition: none;
  }
  .nav-links li { position: relative; z-index: 1; }
  .nav-links a { padding-inline: 14px; border-radius: 999px; }
  /* the underline is redundant now the pill carries the state */
  .nav-links a::after { display: none; }
  .nav-links a[aria-current] { color: var(--bone); }
}
/* ---------- utilities: component rules that must outrank element defaults ----------
   Layer order beats specificity, so .words (a component) would otherwise lose its
   leading to the generic h1/h2 line-height set in overrides. */
@layer utilities {
  /* .words owns the mask mechanics only. Leading is a design-system decision and
     lives in components, per element, so --lh-tight and --lh-head stay truthful.
     text-wrap:normal stays because `balance` fights word-level inline-blocks. */
  .words { text-wrap: normal; }
}
/* ---------- hero: slow Ken Burns drift ----------
   Starts only after the 2.4s landing settle finishes, so it takes over from
   scale(1.02) rather than fighting the transition. 20s each way, alternating,
   so it never snaps back. Both plates share the motion or the colour mask
   would slide against the print underneath it. */
@layer motion {
  @keyframes hero-kenburns {
    from { transform: scale(1.02) translate3d(0, 0, 0); }
    to   { transform: scale(1.11) translate3d(-1.6%, -1.1%, 0); }
  }
  .hero.lit .hero-plate img {
    animation: hero-kenburns 20s 2.4s ease-in-out infinite alternate;
    will-change: transform;
  }
  @media (prefers-reduced-motion: reduce) {
    .hero.lit .hero-plate img { animation: none; transform: scale(1.02); }
  }
}

/* ================= homepage sections pass =================
   Enhancements only. The hover systems already in place stay; these layer
   on top in a later layer so nothing above needs !important. */
@layer motion {

  /* --- trust list: drop the card look for an editorial rule-and-accent row.
         Kept once on the homepage, so it can afford to be the wide element. */
  .trust-item {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--line-soft);
    border-radius: 0;
    padding: 26px 0 24px;
    position: relative;
  }
  .trust-item::after {
    content: "";
    position: absolute; left: 0; top: -1px; height: 1px; width: 0;
    background: var(--brass);
    transition: width .55s cubic-bezier(0.22,1,0.36,1);
  }
  .trust-item:hover { background: transparent; border-color: var(--line-soft); }
  .trust-item:hover::after { width: 100%; }

  /* --- specialty grid: the thumbnail is hidden on desktop, so the row has
         nothing to show. Bring it back as a plate that resolves on hover. */
  .index-row { position: relative; }
  @media (min-width: 861px) {
    .index-row .index-thumb {
      display: block;
      position: absolute; right: 0; top: 50%;
      width: 190px; aspect-ratio: 16 / 10;
      margin-top: calc(-1 * (190px * 10 / 16) / 2);
      border-radius: var(--radius);
      overflow: hidden;
      pointer-events: none;
      opacity: 0;
      transform: translateX(18px) scale(0.96);
      transition: opacity .45s var(--ease), transform .55s cubic-bezier(0.22,1,0.36,1);
      z-index: 2;
    }
    .index-row .index-thumb img {
      width: 100%; height: 100%; object-fit: cover;
      filter: grayscale(1) brightness(.85);
      transition: filter .5s var(--ease);
    }
    .index-row:hover .index-thumb { opacity: 1; transform: translateX(0) scale(1); }
    .index-row:hover .index-thumb img { filter: grayscale(0) brightness(1); }
    /* keep the arrow clear of the plate */
    .index-row:hover .index-go { transform: translateX(-200px); }
  }

  /* --- featured teacher cards: lift the whole card, not just the photo */
  .person {
    transition: transform .5s cubic-bezier(0.22,1,0.36,1);
  }
  .person:hover { transform: translateY(-6px); }

  /* --- footer: the accent rule grows under a hovered link */
  .foot-col a { position: relative; }
  .foot-col a::after {
    content: "";
    position: absolute; left: 0; bottom: 2px; height: 1px; width: 0;
    background: var(--brass);
    transition: width .4s cubic-bezier(0.22,1,0.36,1);
  }
  .foot-col a:hover::after { width: calc(100% - 6px); }

  @media (prefers-reduced-motion: reduce) {
    .trust-item::after,
    .foot-col a::after { transition: none; }
    .person, .person:hover { transform: none; transition: none; }
    .index-row .index-thumb { transition: none; }
    .index-row:hover .index-go { transform: none; }
  }
}

/* ================= feedback pass: reel, bases, specialties, trust ================= */
@layer motion {

  /* --- teacher reel: was reading as a wall of huge portraits. Smaller cards
         and a squarer crop, so it behaves like a strip rather than a section. */
  .reel figure { width: clamp(108px, 10.5vw, 158px); border-radius: 10px; }
  .reel figure img { aspect-ratio: 1 / 1; }
  .reel figcaption b { font-size: 12px; }

  /* --- учебни бази: the ragged edge came from center-aligning two columns of
         different height and letting the last card sit alone in a 3-up grid. */
  .map-stage { align-items: start; }
  .places { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .place { min-height: 0; aspect-ratio: 4 / 3; }
  .place.tall { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; }
  .places .place:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 7; }

  /* --- специалности: rebuilt from a bare list into a card grid that actually
         shows the work. The photos already existed but were display:none. */
  .index {
    border-top: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(14px, 1.6vw, 26px);
  }
  .index-row {
    display: block;
    padding: 0 0 22px;
    border-bottom: 0;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color .45s var(--ease), transform .5s cubic-bezier(0.22,1,0.36,1);
  }
  .index-row:hover { padding-left: 0; transform: translateY(-4px); border-color: rgba(200,155,43,.38); }
  .index-row .index-num { display: inline-block; margin: 18px 22px 0; height: auto; }
  .index-row .index-title { display: block; margin: 8px 22px 0; }
  .index-row .index-meta { display: block; margin: 10px 22px 0; }
  .index-row .index-go { display: none; }

  @media (min-width: 861px) {
    /* supersede the floating hover plate: inside a card the image is the card */
    .index-row .index-thumb {
      display: block; position: static;
      width: 100%; aspect-ratio: 16 / 10;
      margin: 0; opacity: 1; transform: none;
      border-radius: 0;
      transition: none;
    }
    .index-row .index-thumb img {
      width: 100%; height: 100%; object-fit: cover;
      filter: grayscale(1) brightness(.8);
      transition: filter .6s var(--ease), transform .9s var(--ease);
    }
    .index-row:hover .index-thumb { opacity: 1; transform: none; }
    .index-row:hover .index-thumb img { filter: grayscale(0) brightness(1); transform: scale(1.04); }
    .index-row:hover .index-go { transform: none; }
  }

  /* --- защо да ни се доверите: give the licence number the weight of a stat
         instead of letting it sit as faint grey type. */
  .trust-anchor .lic, .trust-anchor b {
    color: var(--bone);
    opacity: 1;
  }
  .trust-anchor {
    border-top: 1px solid var(--line-soft);
    padding-top: 22px;
  }

  @media (prefers-reduced-motion: reduce) {
    .index-row, .index-row:hover { transform: none; transition: none; }
    .index-row:hover .index-thumb img { transform: none; }
  }
}

@layer motion {
  /* .reel-track is a flex row, so figures were stretching to the tallest item
     instead of taking their own square. Pin them to the start. */
  .reel-track { align-items: flex-start; }
  .reel figure { height: auto; }

  /* aspect-ratio on the thumb collapsed against the card's block layout, so
     the image height is stated outright. */
  @media (min-width: 861px) {
    .index-row .index-thumb { aspect-ratio: auto; height: clamp(150px, 15vw, 210px); }
    .index-row .index-thumb img { height: 100%; aspect-ratio: auto; }
  }
}

@layer motion {
  /* aspect-ratio kept losing to an inherited height on the reel image, so the
     strip states its own height. Square crop, roughly a fifth of the old size. */
  .reel figure { width: clamp(108px, 10.5vw, 158px) !important; height: clamp(108px, 10.5vw, 158px) !important; }
  .reel figure img { height: 100% !important; aspect-ratio: auto !important; object-fit: cover; }
}


/* ==================================================================
   PALETTE — one near-black base sitewide, material gold as the accent.
   No alternate light sections. Legacy token names are mapped onto this
   scale so the existing rules pick it up without being rewritten.
   ================================================================== */
@layer motion {
  :root {
    --ink-950: #0E0D0A;   /* true background, warm-black not pure black */
    --ink-800: #1C1A14;   /* raised surfaces: cards, panels, footer */
    --ink-600: #3A362B;   /* borders and dividers on dark */

    --yellow-500: #C9A227; /* material gold — resting state, links, numerals, icons */
    --yellow-300: #E8B923; /* the "lit" moment — hover/active only, small doses */
    --yellow-700: #B8900E; /* AA-safe body-text-on-dark use where 500 fails contrast */

    --paper-text-on-ink: #EDE6D6; /* body copy on dark — warm bone, never pure white */

    /* legacy names remapped onto the scale above */
    --void:      var(--ink-950);
    --charcoal:  var(--ink-800);
    --raised:    var(--ink-800);
    --bone:      var(--paper-text-on-ink);
    --cream:     var(--paper-text-on-ink);
    --champagne: var(--yellow-300);
    --brass:     var(--yellow-500);
    --yellow:      var(--yellow-500);
    --yellow-deep: var(--yellow-700);
    --muted:     rgba(237, 230, 214, 0.66);
    --muted-2:   rgba(237, 230, 214, 0.44);
    --line:      var(--ink-600);
    --line-soft: rgba(58, 54, 43, 0.55);
  }

  body { background: var(--ink-950); color: var(--paper-text-on-ink); }

  /* .section.cream, .sec-white and .sec-yellow are no longer emitted by
     any generator script (removed from gen-pages.ps1/gen-pages2.ps1) — this
     is a defensive fallback in case the class survives anywhere, so it
     renders as a standard dark section instead of the retired paper look.
     The base layer's .section.cream rules (still live, further up this
     file) hardcode dark-on-light literal colours for its children — every
     one of those gets reset here too, or they render as dark text on the
     dark background this block just switched the section to. */
  .section.cream { background: var(--void); color: var(--paper-text-on-ink); }
  .section.cream .eyebrow { color: var(--yellow-500); }
  .section.cream .lede,
  .section.cream .prose p,
  .section.cream .faq .fa-body { color: rgba(237, 230, 214, 0.72); }
  .section.cream h1 em, .section.cream h2 em, .section.cream h3 em { color: var(--yellow-500); }
  .section.cream .faq,
  .section.cream .faq details { border-color: rgba(237, 230, 214, 0.14); }
  .section.cream .faq summary::after,
  .section.cream .faq summary::before { background: var(--yellow-500); }
  .section.cream .faq summary:hover { color: var(--yellow-300); }
  .section.cream .btn-line { border-color: rgba(237, 230, 214, 0.2); color: var(--paper-text-on-ink); }
  .section.cream .btn-line:hover { border-color: var(--yellow-500); color: var(--ink-950); }
  .section.cream .btn-line::before { background: var(--yellow-500); }
  .section.cream .prose li::before { background: var(--yellow-500); }

  /* Three standalone "light card" components (About panel, region map
     band, contact form) read var(--paper)/#131316 directly rather than
     going through .sec-white — the token consolidation above deliberately
     stopped defining --paper, so these three get reset here to the same
     dark-surface, light-text treatment as everything else, rather than
     leaving --paper defined (and every retired-but-still-parsed .sec-white
     rule live again, dark-on-light this time). */
  .ab-panel { background: var(--ink-800); color: var(--paper-text-on-ink); }
  .ab-panel h3 { color: var(--paper-text-on-ink); }
  .ab-list li { color: rgba(237, 230, 214, 0.72); border-bottom-color: rgba(237, 230, 214, 0.14); }
  .ab-list li:hover, .ab-list li.on { color: var(--paper-text-on-ink); }
  .ab-col p { color: rgba(237, 230, 214, 0.72); }

  .map-section-white { background: var(--ink-950); color: var(--paper-text-on-ink); }
  .map-section-white .lede { color: rgba(237, 230, 214, 0.72); }
  .map-section-white .bg-map path.region { fill: rgba(237, 230, 214, 0.05); stroke: rgba(237, 230, 214, 0.16); }

  .ct-card { background: var(--ink-800); color: var(--paper-text-on-ink); }
  .ct-card .field label { color: rgba(237, 230, 214, 0.55); }
  .ct-card .field input, .ct-card .field select, .ct-card .field textarea {
    color: var(--paper-text-on-ink); border-bottom-color: rgba(237, 230, 214, 0.18);
    background: rgba(237, 230, 214, 0.05);
  }
  .ct-card .field input::placeholder, .ct-card .field textarea::placeholder { color: rgba(237, 230, 214, 0.4); }
  .ct-card .field option { background: var(--ink-800); color: var(--paper-text-on-ink); }
  .ct-card .btn-gold { background: var(--yellow-500); color: var(--ink-950); }
  .ct-card .btn-gold:hover { color: var(--ink-950); }
  .ct-card .form-note { color: rgba(237, 230, 214, 0.55); }
}

/* ==================================================================
   REDESIGN PASS — composition, emphasis and card rhythm
   ================================================================== */
@layer motion {

  /* --- 0. contrast: yellow-700 measured 2.69:1 on paper, below even the
         3:1 large-text floor. One step down the ramp clears AA body. */
  :root { --yellow-800: #7D6208; }
  .sec-white, .on-paper {
    --brass: var(--yellow-800);
    --yellow: var(--yellow-800);
    --champagne: var(--yellow-800);
  }

  /* --- scroll-scrubbed word reveal ---
     Two blocks sitewide only (marked .scrub-words at generation time):
     the home hero line and the За нас lead statement. Each word's
     brightness tracks scroll position directly (--wp, written per frame
     by the Scroll Engine in relax.js) instead of firing once on entry —
     it un-lights again if the visitor scrolls back up. Every other
     heading keeps the ordinary one-shot mask reveal below. */
  .scrub-words .w { overflow: visible; }
  .scrub-words .w > span {
    transform: none;
    opacity: var(--wp, 0);
    filter: brightness(calc(0.4 + var(--wp, 0) * 0.6));
    transition: none;
    padding-bottom: 0;
  }

  /* --- 1. emphasis: the italic accent word was on every heading. It now
         survives on the hero only; elsewhere the techniques vary. */
  h2.words em { font-style: normal; }

  /* paper sections: a thin rule under the word, no colour shift */
  .sec-white h2.words em {
    color: inherit;
    box-shadow: inset 0 -0.09em 0 var(--yellow-800);
    padding-bottom: 0.04em;
  }
  /* the specialty section instead gets a solid block behind the word */
  .sec-white:nth-of-type(odd) h2.words em {
    box-shadow: none;
    background: var(--yellow-500);
    color: var(--ink-950);
    padding: 0 0.16em;
  }
  /* dark sections keep colour but drop the italic */
  .on-dark h2.words em, .sec-img h2.words em { color: var(--yellow-500); }
  /* hero is the one place the italic stays */
  .hero h1.words em { font-style: italic; color: var(--yellow-500); }

  /* --- 2. stats as real graphic elements, not underlined metadata */
  .sec-yellow .stat b, .stat b {
    font-size: clamp(56px, 8.5vw, 132px);
    line-height: 0.86;
    letter-spacing: -0.045em;
    font-weight: 400;
  }
  .sec-yellow .stat { border-top: 2px solid var(--ink-text-on-paper); padding-top: 14px; }
  .sec-yellow .stat span {
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    opacity: 0.72;
  }

  /* --- 3. За центъра: asymmetric, photo bleeding past the grid edge.
     Desktop only — this unconditional rule was beating the mobile
     single-column collapse (a plain, non-@layer media query elsewhere)
     because @layer motion always wins regardless of media-query
     specificity, so .split stayed a 7fr/5fr grid on phones and the
     bled-edge image overlapped the text column instead of stacking. */
  @media (min-width: 901px) {
    .section.loose .split { grid-template-columns: 7fr 5fr; align-items: center; }
    .section.loose .split-media {
      margin-left: calc(-1 * var(--gutter));
      width: calc(100% + var(--gutter));
      border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    }
    .section.loose .split-media img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
  }

  /* --- 4. photography: stop dimming decent photos outside the hero */
  .sec-white .place img, .sec-white .index-thumb img { filter: none; }
  .place img { filter: saturate(0.98) brightness(0.92); }

  /* --- 5. card rhythm: a distinct shape per content type.
         specialties = wide 16/10 plates (set earlier)
         locations   = tall 3/4 portraits
         teachers    = square */
  .places .place { aspect-ratio: 3 / 4; }
  .places .place.tall, .places .place:last-child { aspect-ratio: 16 / 9; }
  .people-grid .person-photo { aspect-ratio: 1 / 1; }

  /* --- 6. hero quote: drop the card chrome, sit it on the photo */
  .hf-card {
    background: transparent !important;
    border: 0 !important;
    backdrop-filter: none !important;
    padding: 0 !important;
    max-width: 42ch;
  }
  .hf-card img { display: none; }
  .hf-card figcaption p {
    font-family: var(--ff-display);
    font-size: clamp(17px, 1.5vw, 22px);
    line-height: 1.42;
    text-indent: -0.42em;
  }
  .hf-card figcaption p::before {
    content: "\201E";
    font-size: 1.5em;
    line-height: 0;
    color: var(--yellow-500);
  }
  .hf-card figcaption cite {
    display: block; margin-top: 10px;
    font-style: normal; font-size: 12px;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--muted-2);
  }
}

@layer motion {
  /* --yellow-deep was still resolving to yellow-700 on paper (2.69:1). */
  .sec-white, .on-paper { --yellow-deep: var(--yellow-800); }
}

/* ==================================================================
   MICROINTERACTION SYSTEM
   One mechanism per job, defined once here and reused by every
   section. Anything section-specific below references these, it does
   not redefine them. The whole block is inert under
   prefers-reduced-motion: see the final section of this file.
   ================================================================== */

@layer tokens {
  :root {
    /* One container width for the whole site. Every section is a .wrap at
       this width, so their edges line up down the page. */
    --wrap: 1600px;
    --gutter: clamp(24px, 5.2vw, 96px);

    /* CSS equivalents of the GSAP eases the brief specifies */
    --mi-out: cubic-bezier(0.215, 0.61, 0.355, 1);      /* power2.out   */
    --mi-inout: cubic-bezier(0.645, 0.045, 0.355, 1);   /* power2.inOut */
    --mi-back: cubic-bezier(0.34, 1.56, 0.64, 1);       /* back.out(1.2) */
    --mi-card-shadow: 0 22px 48px -26px rgba(0, 0, 0, 0.72);
  }
  .sec-white, .on-paper { --mi-card-shadow: 0 22px 44px -28px rgba(19, 19, 22, 0.45); }
}

@layer motion {

  /* ---------------- page transitions ----------------
     A multi-page site, so the gap between pages is the single most
     visible seam. An internal link wipes the viewport dark, then the
     browser navigates behind the cover; the next page fades its main
     content up from that same dark. */

  #pt {
    position: fixed; inset: 0; z-index: 300; pointer-events: none;
    background: var(--void);
    transform: scaleY(0); transform-origin: bottom center;
    will-change: transform;
  }
  html.pt-leaving #pt {
    transform: scaleY(1);
    transition: transform .26s var(--mi-inout);
  }
  /* returning through the bfcache restores the covered state: uncover it */
  html.pt-arriving #pt {
    transform: scaleY(0); transform-origin: top center;
    transition: transform .3s var(--mi-inout);
  }

  @keyframes mi-page-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
  /* main only, never .page-shell: a lingering transform there would
     become the containing block for the fixed nav */
  main { animation: mi-page-in .5s var(--mi-out) both; }
  html.curtain-on main { animation: none; }

  /* ---------------- BUTTON ----------------
     One hover mechanism sitewide: the fill wipes in from the left
     edge. Nothing else moves except the arrow it already carries. */

  .btn::before { transition: transform .35s var(--mi-out); }
  .btn svg { transition: transform .35s var(--mi-out); }
  .btn { transition: color .35s var(--mi-out), border-color .35s var(--mi-out); }
  .btn:active { transform: scale(.985); }

  /* the primary hero CTA nudges its arrow every few seconds so the eye
     finds it without anything actually moving on the page */
  @keyframes mi-cta-pulse {
    0%, 82%, 100% { transform: translateX(0); }
    88%           { transform: translateX(4px); }
    94%           { transform: translateX(0); }
  }
  .mi-cta-pulse svg { animation: mi-cta-pulse 4s var(--mi-out) infinite; }
  .mi-cta-pulse:hover svg { animation: none; }

  /* ---------------- CARD ----------------
     Image scales inside an overflow-hidden box, the shadow grows, and
     a corner accent draws itself in along the top and left edges.
     [data-mi-card] is the hover root, [data-mi-media] the clipping box;
     they are the same element wherever the card is only a photo. */

  [data-mi-card] { transition: box-shadow .5s var(--mi-out); }
  [data-mi-card]:hover, [data-mi-card]:focus-visible { box-shadow: var(--mi-card-shadow); }

  [data-mi-media] { position: relative; overflow: hidden; }
  [data-mi-media] img { transition: transform .5s var(--mi-out), filter .5s var(--mi-out); }
  [data-mi-card]:hover [data-mi-media] img,
  [data-mi-card]:focus-visible [data-mi-media] img { transform: scale(1.06); }

  .mi-corner {
    position: absolute; inset: 0; z-index: 4; pointer-events: none;
    border-radius: inherit;
  }
  .mi-corner::before, .mi-corner::after {
    content: ""; position: absolute; top: 0; left: 0;
    background: var(--yellow);
  }
  .mi-corner::before {
    width: 34%; height: 2px;
    transform: scaleX(0); transform-origin: left center;
    transition: transform .45s var(--mi-out);
  }
  .mi-corner::after {
    width: 2px; height: 34%;
    transform: scaleY(0); transform-origin: top center;
    transition: transform .45s var(--mi-out) .06s;
  }
  [data-mi-card]:hover .mi-corner::before,
  [data-mi-card]:focus-visible .mi-corner::before { transform: scaleX(1); }
  [data-mi-card]:hover .mi-corner::after,
  [data-mi-card]:focus-visible .mi-corner::after { transform: scaleY(1); }

  /* ---------------- IMAGE REVEAL ----------------
     Clip-path wipe plus a settling scale. Never a flat opacity fade. */

  html.js-rv .imgrv > img, html.js-rv .imgrv > picture > img {
    clip-path: inset(0 0 100% 0);
    transform: scale(1.05);
    transition: clip-path 1s var(--mi-out), transform 1.15s var(--mi-out);
  }
  html.js-rv .imgrv.in > img, html.js-rv .imgrv.in > picture > img {
    clip-path: inset(0 0 0 0);
    transform: scale(1);
  }
  /* the director photo is the hero-weight image of its section, so it
     travels further than the rest */
  html.js-rv .section.loose .split-media.imgrv > img {
    transform: scale(1.11);
    transition-duration: 1.25s, 1.45s;
  }

  /* ---------------- nav ----------------
     Hides on the way down, comes back the moment the visitor scrolls
     up: the menu is available wherever they change their mind. */

  .nav { transition: transform .45s var(--mi-out); }
  html.nav-away .nav { transform: translateY(calc(-100% - 18px)); }
  html.menu-open .nav { transform: none; }

  .brand-mark {
    transition: transform .5s var(--mi-back);
    transform-origin: 50% 50%;
  }
  .brand:hover .brand-mark { transform: scale(1.1) rotate(-9deg); }
  .brand-mark .ring { transition: stroke-dashoffset .7s var(--mi-out); }
  .brand:hover .brand-mark .ring { stroke-dasharray: 123; stroke-dashoffset: 123; }

  /* mobile menu: 40ms between links, per the brief */
  .ul-links li:nth-child(1) a { transition-delay: .14s; }
  .ul-links li:nth-child(2) a { transition-delay: .18s; }
  .ul-links li:nth-child(3) a { transition-delay: .22s; }
  .ul-links li:nth-child(4) a { transition-delay: .26s; }
  .ul-links li:nth-child(5) a { transition-delay: .30s; }
  .nav-toggle i { transition: transform .4s var(--mi-back), opacity .2s var(--mi-out); }


  /* ---------------- scrollbar ----------------- */

  html { scrollbar-width: thin; scrollbar-color: rgba(200, 155, 43, .55) rgba(231, 224, 212, .05); }
  ::-webkit-scrollbar { width: 9px; height: 9px; }
  ::-webkit-scrollbar-track { background: rgba(231, 224, 212, .05); }
  ::-webkit-scrollbar-thumb {
    background: rgba(200, 155, 43, .5); border-radius: 99px;
    border: 2px solid transparent; background-clip: padding-box;
    transition: background .3s var(--mi-out);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--brass); background-clip: padding-box; }

  /* ---------------- footer ----------------
     The underline draws in from the left rather than switching on, and
     the contact rows nudge their icon toward the pointer. */

  .foot-col a {
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1px;
    transition: color .25s var(--mi-out), background-size .4s var(--mi-out);
  }
  .foot-col a:hover { padding-left: 0; background-size: 100% 1px; }

  .mi-ic {
    display: inline-flex; vertical-align: -2px; margin-right: 7px;
    color: var(--yellow); opacity: .55;
    transition: transform .35s var(--mi-back), opacity .3s var(--mi-out);
  }
  .foot-col a:hover .mi-ic { transform: translateX(3px); opacity: 1; }

  /* ---------------- hero ---------------- */

  .mi-quote {
    display: block;
    font-family: var(--ff-display);
    font-size: clamp(38px, 4vw, 58px); line-height: .7;
    color: var(--yellow);
    margin-bottom: 4px;
    transform-origin: left center;
  }

  /* ---------------- trust list ----------------
     The 01-04 markers are back, and they are the hover affordance:
     the number is what grows, the copy never moves. */

  [data-mi-trust] .tnum {
    display: block;
    transition: transform .4s var(--mi-back), color .3s var(--mi-out),
                font-variation-settings .3s var(--mi-out), opacity .3s var(--mi-out);
    transform-origin: left center;
  }
  [data-mi-trust]:hover .tnum {
    transform: scale(1.28);
    font-weight: 600;
    color: var(--yellow);
    opacity: 1;
  }
  .sec-white [data-mi-trust]:hover .tnum { color: var(--yellow-800); }

  /* ---------------- specialty index ----------------
     The category numeral swells behind the row on hover. It sits
     under the content, so nothing it does can hurt legibility. */

  .mi-ghost {
    position: absolute; right: clamp(48px, 7vw, 120px); top: 50%;
    z-index: 0; pointer-events: none;
    font-family: var(--ff-display); font-weight: 600;
    font-size: clamp(56px, 7vw, 104px); line-height: 1;
    color: var(--yellow);
    opacity: 0; transform: translateY(-50%) scale(.72);
    transition: opacity .45s var(--mi-out), transform .55s var(--mi-out);
  }
  .index-row:hover .mi-ghost { opacity: .13; transform: translateY(-50%) scale(1); }
  .sec-white .index-row:hover .mi-ghost { opacity: .1; }
  /* the row content must stay above it */
  .index-row > * { position: relative; z-index: 1; }
  .index-num { position: relative; z-index: 1; }

  /* ---------------- teacher grid, batched reveal ---------------- */

  .mi-hold { opacity: 0; transform: translateY(26px); }
  .people-grid > * {
    transition: opacity .7s var(--mi-out) var(--mi-d, 0s),
                transform .8s var(--mi-out) var(--mi-d, 0s);
  }

  /* ---------------- map: the shared hover state ----------------
     .mi-linked is set on both surfaces at once, so the ring on a card
     and the flare on its dot are literally the same event. */

  .bg-map g.pin circle.dot { transition: transform .35s var(--mi-back), fill .3s var(--mi-out); }
  .bg-map g.pin.mi-linked circle.dot { transform: scale(1.5); fill: var(--yellow); }
  .bg-map g.pin.mi-linked circle.halo { opacity: 1; }

  @keyframes mi-breathe {
    0%, 100% { opacity: .28; transform: scale(1); }
    50%      { opacity: .62; transform: scale(1.22); }
  }
  .bg-map g.pin.mi-idle circle.halo {
    opacity: .28;
    animation: mi-breathe 2.5s var(--mi-inout) infinite;
    animation-delay: var(--mi-delay, 0s);
    transform-origin: center;
  }
  .bg-map g.pin.mi-idle:hover circle.halo,
  .bg-map g.pin.mi-idle.mi-linked circle.halo { animation: none; }

  .place.mi-linked, .region-row.mi-linked, .strip-track a.mi-linked {
    outline: 1px solid var(--yellow);
    outline-offset: 3px;
  }
  .place.mi-linked { transform: scale(1.015); }
  .place { transition: transform .4s var(--mi-out); }

  /* the region panel crossfades rather than snapping to the new text */
  .map-panel { transition: opacity .22s var(--mi-out); }
  .map-panel.swap { opacity: 0; }
  @keyframes mi-line-swap {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
  .map-panel h3 { animation: mi-line-swap .45s var(--mi-out) both; }

  /* ---------------- copy affordance ---------------- */

  .mi-copy {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; margin-left: 7px; vertical-align: -7px;
    border: 1px solid var(--line); border-radius: 7px;
    background: none; color: var(--muted-2); cursor: pointer;
    opacity: 0; transform: translateX(-4px);
    transition: opacity .3s var(--mi-out), transform .3s var(--mi-out),
                color .3s var(--mi-out), border-color .3s var(--mi-out);
  }
  a[data-mi-copy]:hover + .mi-copy,
  .mi-copy:hover, .mi-copy:focus-visible, .mi-copy.ok { opacity: 1; transform: none; }
  .mi-copy:hover { color: var(--yellow); border-color: var(--yellow); }
  .mi-copy.ok { color: var(--yellow); border-color: var(--yellow); }
  .sec-white .mi-copy { border-color: rgba(19, 19, 22, .18); }

  /* ---------------- CTA parallax ---------------- */

  .section.sec-img .bgimg img { will-change: transform; }

  /* ---------------- FAQ ---------------- */

  /* overflow:hidden on the child is load-bearing: it drops the grid
     item's automatic minimum size to 0, which is the only reason the
     0fr track can actually collapse. Do not swap these for
     minmax(0, …) tracks: an explicit 0 min makes the open state
     collapse too, because an fr track in an auto-height grid has no
     free space to distribute. */
  .mi-fa-wrap {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .35s var(--mi-inout);
  }
  .mi-fa-wrap > .fa-body {
    overflow: hidden; min-height: 0;
    opacity: 0;
    transition: opacity .3s var(--mi-out);
    /* the answer's own bottom padding cannot collapse with the track,
       so it would leave a 26px sliver showing when closed. Re-create it
       inside the clipped box instead. */
    padding-bottom: 0;
  }
  .mi-fa-wrap > .fa-body::after { content: ""; display: block; height: 26px; }
  .faq details.mi-open .mi-fa-wrap { grid-template-rows: 1fr; }
  /* the words arrive just behind the opening, not with it */
  .faq details.mi-open .mi-fa-wrap > .fa-body { opacity: 1; transition-delay: .12s; }

  .faq summary::before, .faq summary::after { transition: transform .35s var(--mi-inout), opacity .3s var(--mi-out); }
  .faq details.mi-open summary::before { opacity: 0; transform: translateY(-50%) rotate(90deg); }
  .faq details.mi-open summary::after { transform: rotate(180deg); }

  /* ---------------- filter bar underlay ---------------- */

  .filters { position: relative; }
  .mi-filter-pill {
    position: absolute; top: 0; left: 0; z-index: 0;
    border-radius: 8px; background: rgba(237, 190, 58, .12);
    border: 1px solid var(--yellow);
    opacity: 0; pointer-events: none;
    transition: transform .45s var(--mi-out), width .45s var(--mi-out),
                height .45s var(--mi-out), opacity .3s var(--mi-out);
  }
  .filters > * { position: relative; z-index: 1; }

  /* ---------------- tags read as tags ---------------- */

  .spec-tags span {
    position: relative; overflow: hidden;
    transition: color .3s var(--mi-out), border-color .3s var(--mi-out);
  }
  .spec-tags span::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--yellow);
    transform: scaleX(0); transform-origin: left center;
    transition: transform .35s var(--mi-out);
  }
  .spec-tags span:hover::before { transform: scaleX(1); }
  .spec-tags span:hover { color: #14120A; border-color: var(--yellow); }

  .person-spec {
    background-image: linear-gradient(var(--yellow), var(--yellow));
    background-repeat: no-repeat; background-position: 0 100%;
    background-size: 0% 100%;
    transition: background-size .35s var(--mi-out), color .3s var(--mi-out);
    padding-inline: 2px;
  }
  .person:hover .person-spec { background-size: 100% 100%; color: #14120A; }

  /* ---------------- contact form ----------------
     Floating labels, a border that reports state, a tick that draws
     itself on a valid field, and a submit that shows real progress. */

  .field { position: relative; }
  .field label {
    position: absolute; top: 20px; left: 0; transform-origin: left top;
    pointer-events: none;
    transition: transform .3s var(--mi-out), color .3s var(--mi-out), opacity .3s var(--mi-out);
  }
  .field:focus-within label,
  .field input:not(:placeholder-shown) ~ label,
  .field textarea:not(:placeholder-shown) ~ label,
  .field:has(select) label { transform: translateY(-20px) scale(.92); }
  .field input, .field textarea, .field select { padding-top: 6px; }
  .field textarea ~ label { top: 20px; }

  .field input, .field select, .field textarea {
    transition: border-color .3s var(--mi-out), box-shadow .3s var(--mi-out);
  }
  .field.ok input, .field.ok textarea { border-bottom-color: var(--yellow); }

  .mi-tick {
    position: absolute; right: 2px; bottom: 12px;
    width: 15px; height: 15px; color: var(--yellow);
    opacity: 0; transform: scale(.7);
    transition: opacity .25s var(--mi-out), transform .35s var(--mi-back);
  }
  .field.ok .mi-tick { opacity: 1; transform: none; }
  .mi-tick path {
    stroke-dasharray: 22; stroke-dashoffset: 22;
    transition: stroke-dashoffset .4s var(--mi-out) .08s;
  }
  .field.ok .mi-tick path { stroke-dashoffset: 0; }

  @keyframes mi-spin { to { transform: rotate(360deg); } }
  .mi-spinner {
    width: 14px; height: 14px; border-radius: 50%;
    border: 1.6px solid currentColor; border-top-color: transparent;
    animation: mi-spin .7s linear infinite;
  }
  .form-status.on { animation: mi-line-swap .45s var(--mi-out) both; }
  .mi-sent {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--yellow);
  }

  /* ==================================================================
     LAYOUT PASS
     Specialty cards, a hero on every page, and the map standing on its
     own now that the city cards beside it are gone.
     ================================================================== */

  /* ---------------- specialty cards ----------------
     Photo, name and module tags are legible at rest. Hovering expands
     the card itself (not just a shadow) and opens room under the tags
     for content that only exists in the hover state: the teacher count
     and an explicit "view teachers" action, not a restatement of what
     was already visible. */

  .prog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  @media (max-width: 1180px) { .prog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 620px)  { .prog-grid { grid-template-columns: minmax(0, 1fr); } }

  /* This card is an ink surface sitting inside a paper section, and
     .sec-white flips the text tokens to their ink-on-paper values. Flip
     them back for the card only, so var(--cream) means light again and
     the title does not come out the same colour as body copy on paper. */
  .prog {
    --cream:     var(--paper-text-on-ink);
    --bone:      var(--paper-text-on-ink);
    --yellow:    var(--yellow-500);
    --champagne: var(--yellow-300);
    --muted:     rgba(246, 243, 236, 0.66);
    --muted-2:   rgba(246, 243, 236, 0.44);

    position: relative; display: block; overflow: hidden;
    aspect-ratio: 4 / 5; min-height: 0; padding: 0;
    border: 0; border-radius: 14px; z-index: 1;
    background: var(--ink-950);
    transition: transform .5s var(--mi-out), box-shadow .5s var(--mi-out);
  }
  .prog:hover, .prog:focus-visible {
    transform: translateY(-8px) scale(1.045);
    box-shadow: var(--mi-card-shadow);
    z-index: 3;
  }

  /* the old rule pinned this to a 42% x 62% corner tile, and an explicit
     size beats inset:0, so width and height must be overridden too */
  .prog-img {
    position: absolute; inset: 0; z-index: 0; display: block;
    width: 100%; height: 100%; right: auto; bottom: auto;
    opacity: 1;
    transition: transform .9s var(--mi-out);
  }
  .prog-img img { width: 100%; height: 100%; object-fit: cover; }
  .prog:hover .prog-img { transform: scale(1.07); }

  .prog-shade {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(11,11,12,.52) 0%, rgba(11,11,12,.06) 34%, rgba(11,11,12,.74) 76%, rgba(11,11,12,.94) 100%);
    transition: opacity .5s var(--mi-out);
  }
  .prog:hover .prog-shade { opacity: .92; }

  .prog-body { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 18px; display: block; }
  .prog-title {
    display: block;
    font-family: var(--ff-display); font-weight: 400;
    font-size: clamp(17px, 1.35vw, 21px); line-height: 1.16;
    letter-spacing: -.02em; color: var(--cream);
  }
  .prog-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .prog-tags span {
    font-family: var(--ff-mono); font-size: 9px; letter-spacing: .04em; text-transform: uppercase;
    padding: 4px 9px; border: 1px solid rgba(246, 243, 236, .22); border-radius: 999px;
    color: rgba(246, 243, 236, .7);
  }

  /* 0fr -> 1fr again, so the reveal takes exactly its own height and
     nothing has to be measured in JS */
  .prog-reveal {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .5s var(--mi-out);
  }
  .prog-reveal > * {
    display: block; overflow: hidden; min-height: 0;
    opacity: 0; transition: opacity .4s var(--mi-out);
  }
  .prog:hover .prog-reveal, .prog:focus-visible .prog-reveal { grid-template-rows: 1fr; }
  .prog:hover .prog-reveal > *, .prog:focus-visible .prog-reveal > * { opacity: 1; transition-delay: .1s; }

  .prog-meta {
    margin-top: 12px;
    font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(231, 224, 212, .62);
  }
  .prog-meta b { color: var(--yellow); font-weight: 600; }

  .prog-cta {
    display: flex; align-items: center; gap: 7px; margin-top: 8px;
    font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .04em;
    color: var(--yellow);
  }
  .prog-cta svg { flex: none; transition: transform .35s var(--mi-out); }
  .prog:hover .prog-cta svg, .prog:focus-visible .prog-cta svg { transform: translateX(4px); }

  .prog-rule {
    position: absolute; z-index: 2;
    left: 0; right: 0; bottom: 0; height: 2px; background: var(--yellow);
    transform: scaleX(0); transform-origin: left center;
    transition: transform .55s var(--mi-out);
  }
  .prog:hover .prog-rule, .prog:focus-visible .prog-rule { transform: scaleX(1); }

  /* ---------------- voices: a sticky stack ----------------
     The scroll-driven sticky stack used by Apple and Stripe product
     pages: each card pins at the same offset, the next slides over it,
     and the one underneath drops back in scale and light. Pure CSS
     position:sticky does the pinning, so it still stacks with JS off;
     the scale and dim are driven from the scroll progress in relax.js. */

  .voices { margin-top: clamp(30px, 4vw, 56px); }
  .voice {
    position: sticky;
    top: calc(var(--nav-h) + clamp(24px, 4vw, 60px));
    margin: 0 0 clamp(18px, 2.2vw, 30px);
    /* each card starts a little lower than the one before, so the stack
       shows its edges rather than hiding them exactly behind each other */
    padding-top: calc(var(--i, 0) * clamp(8px, 0.9vw, 14px));
  }
  .voice-inner {
    --cream: var(--paper-text-on-ink);
    --bone:  var(--paper-text-on-ink);
    --yellow: var(--yellow-500);

    position: relative; display: grid;
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
    gap: clamp(20px, 3vw, 48px); align-items: stretch;
    padding: clamp(20px, 2.2vw, 30px);
    border-radius: 16px;
    background: var(--ink-900, #17161A);
    box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .8);
    transform-origin: 50% 0%;
    /* set from JS as the card is overtaken */
    transform: scale(var(--s, 1));
    filter: brightness(var(--b, 1));
    transition: transform .25s linear, filter .25s linear;
  }

  .voice-photo { display: block; overflow: hidden; border-radius: 11px; aspect-ratio: 4 / 5; }
  .voice-photo img {
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(1) brightness(.9);
    transition: transform .8s var(--mi-out), filter .6s var(--mi-out);
  }
  .voice-inner:hover .voice-photo img { transform: scale(1.05); filter: grayscale(0) brightness(1); }

  .voice-body { display: flex; flex-direction: column; justify-content: center; padding-right: clamp(0px, 2vw, 26px); }
  .voice-mark {
    display: block; font-family: var(--ff-display);
    font-size: clamp(48px, 5vw, 78px); line-height: .5; color: var(--yellow);
    margin-bottom: clamp(14px, 1.6vw, 22px);
  }
  .voice-body blockquote {
    margin: 0; border: 0; padding: 0;
    font-family: var(--ff-display); font-weight: 400;
    font-size: clamp(18px, 1.85vw, 30px); line-height: 1.32; letter-spacing: -.022em;
    color: var(--cream);
  }
  .voice-body figcaption { margin-top: clamp(18px, 2vw, 28px); }
  .voice-body figcaption b {
    display: block; font-family: var(--ff-display); font-size: 15px;
    font-weight: 600; color: var(--cream);
  }
  .voice-body figcaption span {
    display: block; margin-top: 4px;
    font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--yellow);
  }
  .voice-go {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(246, 243, 236, .5);
    transition: color .3s var(--mi-out), gap .3s var(--mi-out);
  }
  .voice-inner:hover .voice-go { color: var(--yellow); gap: 13px; }

  @media (max-width: 860px) {
    .voice-inner { grid-template-columns: minmax(0, 1fr); }
    .voice-photo { aspect-ratio: 16 / 10; }
  }

  /* ---------------- layered parallax ----------------
     The ScrollSmoother convention: data-speed under 1 lags behind the
     scroll and reads as further away, over 1 runs ahead and reads as
     nearer. relax.js writes --py; nothing moves without JS. */

  [data-speed] { will-change: transform; }
  [data-speed] { transform: translate3d(0, var(--py, 0px), 0); }

  /* ---------------- scroll-velocity skew ----------------
     Landberg's technique: scroll acceleration drives the distortion, so
     a fast flick bends the grid and it settles back as you stop. */

     The skew goes on the container, not the cards: the cards already
     own their transform for the hover lift and the two would fight. */

  [data-skew] { transform: skewY(var(--sk, 0deg)); transform-origin: 50% 50%; will-change: transform; }

  /* ==================================================================
     ONE TYPE SCALE
     Headings, intros and section heads were drifting between sections.
     Every section head is now eyebrow / heading / one line of copy at
     the same sizes, with the same space under it.
     ================================================================== */

  h2 { font-size: clamp(24px, 2.9vw, 44px); line-height: 1.04; letter-spacing: -.035em; }
  h3 { font-size: clamp(17px, 1.45vw, 22px); line-height: 1.2; }

  .section-head { max-width: 62ch; margin-bottom: clamp(34px, 3.8vw, 60px); }
  .section-head .lede { margin-top: clamp(14px, 1.4vw, 20px); max-width: 60ch; }
  .lede { font-size: clamp(16px, 1.18vw, 18.5px); line-height: 1.68; }
  .eyebrow { margin-bottom: clamp(12px, 1.2vw, 18px); }

  /* three rhythms, not five: the default, a tighter one for strips and a
     looser one for the long-form block */
  .section { padding-block: clamp(64px, 6.4vw, 108px); }
  .section.tight { padding-block: clamp(44px, 4.4vw, 72px); }
  .section.loose { padding-block: clamp(78px, 8vw, 140px); }

  /* ---------------- hero: the masthead ----------------
     Stripping it left it hollow. It reads as a masthead now: a hairline
     and the credential, the headline, two sentences, the actions, then a
     foot that states the network and what the training runs under. */

  .hf-frame {
    min-height: clamp(680px, 96svh, 1080px);
    padding-top: calc(var(--nav-h) + clamp(72px, 9vw, 132px));
    padding-bottom: clamp(40px, 5vw, 76px);
    display: flex; flex-direction: column;
  }
  .hf-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }

  .hf-kicker {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: clamp(10px, 1.2vw, 18px);
    margin-bottom: clamp(20px, 2.4vw, 34px);
    font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
    color: rgba(246, 243, 236, .72);
  }
  .hf-rule { display: block; width: clamp(26px, 4vw, 64px); height: 1px; background: var(--yellow); }
  .hf-sep { display: block; width: 3px; height: 3px; border-radius: 50%; background: rgba(246, 243, 236, .4); }
  .hf-lic b { font-family: var(--ff-mono); color: var(--yellow); font-weight: 500; letter-spacing: .04em; }

  .hero h1 { font-size: clamp(34px, 5.4vw, 82px); line-height: .99; letter-spacing: -.042em; }
  .hf-body .lede {
    margin-top: clamp(20px, 2.2vw, 30px);
    max-width: 54ch; font-size: clamp(16px, 1.28vw, 20px); line-height: 1.62;
    color: rgba(246, 243, 236, .8);
  }
  .hf-body .actions { margin-top: clamp(26px, 3vw, 42px); }

  .hf-foot {
    display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(20px, 3vw, 56px); align-items: end;
    padding-top: clamp(22px, 2.6vw, 36px);
    border-top: 1px solid rgba(246, 243, 236, .16);
  }
  .hf-figs { display: flex; flex-wrap: wrap; gap: 0; }
  .hf-fig { padding-right: clamp(18px, 2.4vw, 40px); margin-right: clamp(18px, 2.4vw, 40px); border-right: 1px solid rgba(246, 243, 236, .16); }
  .hf-fig:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
  .hf-fig b {
    display: block; font-family: var(--ff-display); font-weight: 500;
    font-size: clamp(26px, 2.9vw, 44px); line-height: 1; letter-spacing: -.03em;
    color: var(--cream);
  }
  .hf-fig span {
    display: block; margin-top: 7px;
    font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(246, 243, 236, .56);
  }

  .hf-note {
    display: flex; align-items: flex-start; gap: 14px;
    font-size: 12.5px; line-height: 1.6; color: rgba(246, 243, 236, .56);
    max-width: 46ch;
  }
  .hf-scroll {
    flex: none; display: block; width: 20px; height: 32px; margin-top: 2px;
    border: 1px solid rgba(246, 243, 236, .3); border-radius: 999px;
    position: relative;
  }
  .hf-scroll i {
    position: absolute; left: 50%; top: 7px; width: 2px; height: 6px;
    margin-left: -1px; border-radius: 2px; background: var(--yellow);
    animation: mi-scroll-cue 1.9s var(--mi-inout) infinite;
  }
  @keyframes mi-scroll-cue {
    0%, 100% { transform: translateY(0); opacity: 1; }
    55%      { transform: translateY(11px); opacity: .25; }
  }

  @media (max-width: 900px) {
    .hf-foot { grid-template-columns: minmax(0, 1fr); }
    .hf-fig { padding-right: 16px; margin-right: 16px; }
  }
  .hero-stage .hero-plate.base { position: absolute; inset: 0; opacity: 1; }
  .hero-stage .hero-plate img {
    width: 100%; height: 100%; object-fit: cover; object-position: 62% 42%;
    /* the photograph is bright by design, so it is only lightly settled
       rather than crushed to a dark plate the way the interiors were */
    filter: saturate(1.02) contrast(1.02) brightness(.92);
    transform: none; animation: none;
  }
  /* the scrim is weighted to the left, where the type sits, so the bright
     half of the room stays bright */
  .hero-stage::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background:
      linear-gradient(96deg, rgba(11,11,12,.9) 0%, rgba(11,11,12,.72) 32%, rgba(11,11,12,.22) 62%, rgba(11,11,12,.06) 100%),
      linear-gradient(0deg, rgba(11,11,12,.72) 0%, rgba(11,11,12,0) 46%);
  }
  .hf-body, .hf-foot { position: relative; z-index: 2; }
  .hf-body h1 { max-width: 17ch; }
  .hf-body .lede { max-width: 44ch; }
  .hf-foot { margin-top: clamp(34px, 5vw, 70px); }

  /* ---------------- one container width everywhere ----------------
     Sections used to mix a 1440px .wrap with inline 740px and 940px
     containers, so their left edges did not line up down the page. Every
     section is a full .wrap now, and copy that needs a short measure
     constrains the text rather than the container. */

  .measure { width: 100%; max-width: 760px; }
  .section.cream .measure { max-width: 940px; }

  /* ---------------- hero on every page ---------------- */

  .pg-hero { padding-bottom: clamp(30px, 3.6vw, 52px); }
  .pg-hero > .wrap { position: relative; z-index: 2; }
  .pg-hero .hf-figs, .pg-hero .pf-facts { margin-top: clamp(26px, 3vw, 42px); }
  .pg-hero .fan { justify-content: flex-start; }
  .pg-hero .actions { margin-top: clamp(24px, 3vw, 34px); }
  /* the backdrop drifts a little as the hero settles, so the first thing
     on the page is not a static plate */
  @keyframes mi-hero-settle {
    from { transform: scale(1.1); }
    to   { transform: scale(1.02); }
  }
  .pg-hero .bgimg img { animation: mi-hero-settle 2.4s var(--mi-out) both; }

  /* ---------------- map without the city cards ---------------- */

  .map-section-white .map-stage { grid-template-columns: 1.5fr 1fr; align-items: center; }
  @media (max-width: 1000px) { .map-section-white .map-stage { grid-template-columns: 1fr; } }

  /* ==================================================================
     REDUCED MOTION
     Everything above becomes a static state. No exceptions.
     ================================================================== */

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
      scroll-behavior: auto !important;
    }
    #pt { display: none !important; }
    .scrub-words .w > span { opacity: 1 !important; filter: none !important; }
    main { animation: none; opacity: 1; transform: none; }
    .mi-hold { opacity: 1; transform: none; }
    .mi-corner, .mi-ghost, .mi-quote { display: none; }
    .mi-cta-pulse svg { animation: none; }
    .bg-map g.pin.mi-idle circle.halo { animation: none; opacity: .28; }
    .mi-fa-wrap { transition: none; }
    .mi-copy { opacity: 1; transform: none; }
    .section.sec-img .bgimg img { transform: none !important; }
    .pg-hero .bgimg img { animation: none; transform: none; }
    .prog:hover { transform: none; }
    /* the scroll engine never starts under reduced motion, but the
       custom properties must not leave anything displaced either */
    [data-speed] { transform: none !important; }
    [data-skew]  { transform: none !important; }
    .voice { position: static; padding-top: 0; }
    .voice-inner { transform: none !important; filter: none !important; }
    .hf-scroll i { animation: none; }
  }
}