/* ==========================================================================
   MISSION BRAZILIAN JIU JITSU — Design System v3
   Premium White · Bold · Lively · Martial Arts Focused
   Type: Archivo variable (expanded black caps display + clean body)
   Palette: #ffffff base · #0b0b0b ink · #a0a0a0 grey · #9c7f4e accent red
   ========================================================================== */

:root {
  --white: #ffffff;
  --ink: #0b0b0b;
  --black: #000000;
  --grey: #a0a0a0;
  --grey-dim: #6e6e6e;
  --paper: #f7f6f4;                       /* warm light surface */
  --accent: #8a8a8a;                      /* monochrome accent: ticks, lines, stars */
  --accent-dark: #6e6e6e;                 /* darker grey for hovers */
  --brass: #9c7f4e;                       /* brass, reserved for BUTTONS ONLY */
  --on-accent: #1c1710;                   /* engraved dark text on brass buttons */
  --brass-hi: #c8ad77;                    /* light brass, top of the button plate */
  --brass-lo: #8f7446;                    /* deep brass, base of the button plate */
  --hairline: rgba(11, 11, 11, 0.1);
  --hairline-strong: rgba(11, 11, 11, 0.22);
  --hairline-light: rgba(255, 255, 255, 0.16);
  --shadow-soft: 0 10px 30px rgba(11, 11, 11, 0.08), 0 2px 8px rgba(11, 11, 11, 0.05);
  --shadow-lift: 0 24px 50px rgba(11, 11, 11, 0.14), 0 6px 16px rgba(11, 11, 11, 0.08);
  --glow-red: 0 8px 28px rgba(11, 11, 11, 0.35);

  --font: "Archivo", "Arial Narrow", sans-serif;
  --font-display: "Bebas Neue", "Arial Narrow", sans-serif;

  --measure: 36em;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section: clamp(2.4rem, 4.5vw, 4rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fade: 400ms;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background-color: var(--white); }
body {
  font-family: var(--font);
  font-weight: 430;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
/* clean light grid texture — still, quiet */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(11, 11, 11, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 11, 11, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }

::selection { background: var(--accent); color: var(--white); }

/* ---------- Type scale — bold, confident ---------- */
h1, h2, h3, h4 {
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  font-stretch: 115%;
  color: var(--ink);
}

/* Display voice — condensed athletic capitals (fight-poster type) */
.display, .h-xl, .h-lg, .h-md {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-stretch: 100%;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 0.94;
}
.display {
  font-size: clamp(3.1rem, 7.6vw, 6rem);
}
.display em, .h-xl em, .h-lg em, h2 em {
  font-style: normal;
  font-weight: 400;
  color: var(--accent);
}
.h-xl { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
.h-lg { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.h-md { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }

.lede { font-size: clamp(1.04rem, 1.5vw, 1.2rem); line-height: 1.6; max-width: var(--measure); color: var(--grey-dim); }
.body-copy { max-width: var(--measure); color: #2c2c2c; }
.muted { color: var(--grey-dim); }
.on-dark .muted { color: var(--grey); }

/* Label — sharp red tag */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink);
}
.eyebrow::before {
  content: "";
  width: 2.2rem;
  height: 3px;
  background: var(--accent);
}
.on-dark .eyebrow, .hero .eyebrow, .cta-banner .eyebrow, .hero-dark .eyebrow { color: var(--white); }

/* ---------- Layout ---------- */
.container { width: min(100% - 2 * var(--gutter), 78rem); margin-inline: auto; }
.container--narrow { width: min(100% - 2 * var(--gutter), 58rem); margin-inline: auto; }
.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: clamp(1.8rem, 3.6vw, 3rem); position: relative; }
/* the moments that sell get more air */
.section:has(.reviews-slider) { padding-block: clamp(3.6rem, 7vw, 5.8rem); }

/* Surfaces */
.on-paper {
  background: var(--paper);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.on-dark {
  /* matches the hero's stage: near-black + red radial glow */
  background:
    radial-gradient(60% 80% at 10% 0%, rgba(11, 11, 11, 0.12) 0%, rgba(11, 11, 11, 0) 55%),
    radial-gradient(110% 80% at 50% 100%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 60%),
    #131313;
  color: var(--white);
  overflow: hidden;
}

/* ---------- Quiet grid texture on dark stages ---------- */
.on-dark::before, .hero-dark::before, .page-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
}
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--white); }
.on-dark .lede, .on-dark .body-copy { color: rgba(255,255,255,0.78); }

.rule { border: 0; border-top: 1px solid var(--hairline); }

.section-head { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: clamp(1.2rem, 2.4vw, 1.9rem); }
.section-head--split { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 56em) {
  .section-head--split { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: 3rem; }
}

/* ---------- Header / Navigation ---------- */
/* floating glass bar — transparent over the hero, solid once scrolling */
.site-header {
  position: fixed;
  top: clamp(0.6rem, 1.5vw, 1rem);
  left: 50%;
  transform: translateX(-50%);
  width: min(100% - 1.6rem, 74rem);
  z-index: 80;
  background: rgba(17, 17, 17, 0.5);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: background 400ms var(--ease), box-shadow 400ms var(--ease), border-color 400ms var(--ease);
}
.site-header::before {
  content: "";
  display: block;
  height: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(11, 11, 11, 0.2) 60%, transparent 100%);
}
.site-header.is-scrolled {
  background: rgba(17, 17, 17, 0.9);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.nav-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.9rem; }
.brand { display: flex; flex-direction: column; line-height: 1; }
.brand-name {
  font-size: 1.12rem;
  font-weight: 900;
  font-stretch: 120%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.brand-sub {
  font-size: 0.58rem;
  font-weight: 640;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 0.24rem;
}
.nav-links { display: none; align-items: center; gap: 1.7rem; }
.nav-links a {
  font-size: 0.76rem;
  font-weight: 720;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey-dim);
  padding-block: 0.3rem;
  border-bottom: 2px solid transparent;
  transition: color var(--fade) var(--ease), border-color var(--fade) var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.nav-cta {
  display: none;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.62rem 1.1rem;
  color: var(--on-accent);
  background: linear-gradient(180deg, var(--brass-hi) 0%, var(--brass) 55%, var(--brass-lo) 100%);
  border: 1px solid rgba(38, 27, 10, 0.5);
  border-radius: 3px;
  text-shadow: 0 1px 0 rgba(255, 246, 226, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 245, 224, 0.5), inset 0 -1px 0 rgba(36, 25, 8, 0.4), 0 6px 16px rgba(22, 17, 9, 0.26);
  transition: background var(--fade) var(--ease), box-shadow var(--fade) var(--ease), transform var(--fade) var(--ease);
}
.nav-cta:hover { background: linear-gradient(180deg, #d6bd87 0%, #b7985f 55%, #a2854f 100%); box-shadow: inset 0 1px 0 rgba(255, 248, 230, 0.55), 0 9px 22px rgba(22, 17, 9, 0.3); transform: translateY(-1px); }
@media (min-width: 60em) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-block; }
  .nav-toggle { display: none; }
}
/* mobile bar: logo · compact book button · framed menu toggle */
@media (max-width: 59.99em) {
  .site-header .nav-bar { padding: 0.5rem 0.85rem; gap: 0.55rem; }
  .brand-logo { height: 1.5rem; }
  .site-header.is-scrolled .brand-logo { height: 1.35rem; }
  .nav-cta { display: none; }
  .nav-toggle {
    margin-left: auto;
    width: 2.55rem;
    height: 2.55rem;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.05);
    transition: border-color var(--fade) var(--ease), background var(--fade) var(--ease);
  }
  .nav-toggle span { width: 1.1rem; }
  .nav-toggle[aria-expanded="true"] {
    border-color: var(--accent);
    background: rgba(11, 11, 11, 0.15);
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* Mobile menu */
.nav-toggle { display: inline-flex; flex-direction: column; gap: 5px; padding: 0.6rem 0.2rem; }
.nav-toggle span {
  width: 1.5rem;
  height: 2px;
  background: var(--ink);
  transition: transform var(--fade) var(--ease), opacity var(--fade) var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 60em) { .nav-toggle { display: none; } }

.mobile-menu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--fade) var(--ease);
  overflow: hidden;
  background: var(--white);
  border-bottom: 0 solid var(--hairline);
}
.mobile-menu.is-open { grid-template-rows: 1fr; border-bottom-width: 1px; }
.mobile-menu > div { overflow: hidden; }
.mobile-menu ul { padding: 0.5rem var(--gutter) 1.5rem; display: grid; gap: 0.2rem; }
.mobile-menu a {
  display: block;
  padding: 0.9rem 0;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
}
.mobile-menu a[aria-current="page"] { color: var(--accent); }
@media (min-width: 60em) { .mobile-menu { display: none; } }

/* ---------- Floating navbar internals ---------- */
.site-header .nav-bar {
  padding: 0.6rem clamp(1rem, 2vw, 1.4rem);
}
@media (min-width: 60em) {
  .site-header .nav-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  .site-header .brand { justify-self: start; }
  .site-header .nav-links { justify-self: center; }
  .site-header .nav-cta { justify-self: end; }
}
.brand-logo {
  height: 1.9rem;
  width: auto;
  display: block;
  transition: height 400ms var(--ease);
}
.site-header.is-scrolled .brand-logo { height: 1.6rem; }
.site-header .nav-links a {
  color: rgba(255, 255, 255, 0.6);
  border-bottom: 0;
  position: relative;
  padding-block: 0.45rem;
}
/* underline grows from the centre */
.site-header .nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 350ms var(--ease);
}
.site-header .nav-links a:hover { color: var(--white); }
.site-header .nav-links a:hover::after,
.site-header .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.site-header .nav-links a[aria-current="page"] { color: var(--white); }
.site-header .nav-toggle span { background: var(--white); }
.site-header .nav-cta { padding: 0.6rem 1.05rem; }

/* ---------- Fullscreen mobile menu ---------- */
.mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(16, 16, 16, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 6.5rem var(--gutter) 2.2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 350ms var(--ease), visibility 0s linear 350ms;
}
/* cinematic backdrop: faint training photo + red glow + grid */
.mobile-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    radial-gradient(90% 50% at 50% 110%, rgba(11, 11, 11, 0.22) 0%, rgba(11, 11, 11, 0) 60%),
    linear-gradient(rgba(16, 16, 16, 0.93), rgba(16, 16, 16, 0.93)),
    url("../Images/New Image/Adult Matts.webp");
  background-size: 64px 64px, 64px 64px, auto, auto, cover;
  background-position: 0 0, 0 0, center, center, center;
}
/* vertical outlined watermark down the right edge */
.mobile-overlay::after {
  content: "MBJJ";
  position: absolute;
  right: -0.4rem;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  font-size: clamp(5rem, 18vw, 7rem);
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.09);
  pointer-events: none;
}
.mobile-overlay.is-open { opacity: 1; visibility: visible; transition: opacity 350ms var(--ease); }
.mobile-overlay ul { display: grid; gap: 0.15rem; position: relative; counter-reset: mnav; }
.mobile-overlay li {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  counter-increment: mnav;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-block: 0.45rem;
  position: relative;
}
/* arrow slides in on the active row */
.mobile-overlay li::after {
  content: "\2192";
  margin-left: auto;
  align-self: center;
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 250ms var(--ease), transform 250ms var(--ease);
}
.mobile-overlay li:hover::after,
.mobile-overlay li:active::after,
.mobile-overlay li:has([aria-current="page"])::after { opacity: 1; transform: none; }
.mobile-overlay li::before {
  content: counter(mnav, decimal-leading-zero);
  font-size: 0.62rem;
  font-weight: 760;
  letter-spacing: 0.2em;
  color: var(--accent);
  min-width: 1.4rem;
}
.mobile-overlay .m-link {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 8vw, 2.9rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.05;
  color: var(--white);
  display: inline-block;
  padding: 0.1rem 0;
  transition: color var(--fade) var(--ease);
}
.mobile-overlay .m-link:hover { color: var(--accent); }
.mobile-overlay .m-link[aria-current="page"] { color: var(--accent); }
.mobile-overlay li {
  opacity: 0;
  transform: translateX(-26px);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
.mobile-overlay.is-open li { opacity: 1; transform: none; }
.mobile-overlay.is-open li:nth-child(1) { transition-delay: 80ms; }
.mobile-overlay.is-open li:nth-child(2) { transition-delay: 130ms; }
.mobile-overlay.is-open li:nth-child(3) { transition-delay: 180ms; }
.mobile-overlay.is-open li:nth-child(4) { transition-delay: 230ms; }
.mobile-overlay.is-open li:nth-child(5) { transition-delay: 280ms; }
.mobile-overlay.is-open li:nth-child(6) { transition-delay: 330ms; }
.mo-foot {
  position: relative;
  margin-top: auto;
  padding-top: 1.6rem;
  display: grid;
  gap: 0.9rem;
  justify-items: stretch;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 400ms var(--ease) 400ms, transform 400ms var(--ease) 400ms;
}
.mo-foot .btn { width: 100%; justify-content: center; }
.mo-foot .mo-tel { justify-self: center; }
.mobile-overlay.is-open .mo-foot { opacity: 1; transform: none; }
.mo-tel {
  font-size: 0.74rem;
  font-weight: 760;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey);
}
.mo-tel:hover { color: var(--white); }
@media (min-width: 60em) { .mobile-overlay { display: none; } }

/* ---------- Buttons: brass hardware (primary) + monochrome ghosts ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  font-size: 0.8rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.95rem 1.05rem 0.95rem 1.7rem;
  color: var(--on-accent);
  background: linear-gradient(180deg, var(--brass-hi) 0%, var(--brass) 52%, var(--brass-lo) 100%);
  border: 1px solid rgba(38, 27, 10, 0.5);
  border-radius: 3px;
  text-shadow: 0 1px 0 rgba(255, 246, 226, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 224, 0.55),
    inset 0 -1px 0 rgba(36, 25, 8, 0.4),
    0 12px 26px rgba(22, 17, 9, 0.22),
    0 3px 7px rgba(22, 17, 9, 0.16);
  transition: background var(--fade) var(--ease), box-shadow var(--fade) var(--ease), transform var(--fade) var(--ease);
}
.btn:hover {
  background: linear-gradient(180deg, #d6bd87 0%, #b7985f 52%, #a2854f 100%);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 230, 0.6),
    inset 0 -1px 0 rgba(36, 25, 8, 0.45),
    0 18px 38px rgba(22, 17, 9, 0.3),
    0 5px 12px rgba(22, 17, 9, 0.2);
}
.btn:active {
  transform: translateY(0) scale(0.99);
  box-shadow:
    inset 0 2px 4px rgba(28, 18, 6, 0.42),
    inset 0 -1px 0 rgba(255, 245, 224, 0.25),
    0 4px 12px rgba(22, 17, 9, 0.2);
}
/* trailing arrow nested in its own recessed well — the hardware tell */
.btn .arrow {
  display: inline-grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  background: rgba(34, 23, 8, 0.16);
  box-shadow: inset 0 1px 2px rgba(28, 18, 6, 0.32), inset 0 -1px 0 rgba(255, 245, 224, 0.3);
  font-size: 0.95em;
  line-height: 1;
  transition: transform var(--fade) var(--ease), background var(--fade) var(--ease);
}
.btn:hover .arrow { transform: translateX(3px); background: rgba(34, 23, 8, 0.24); }
/* Secondary actions stay monochrome so they never compete with the brass CTA */
.btn--ghost {
  background: var(--white);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  text-shadow: none;
  box-shadow: var(--shadow-soft);
}
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--white); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.btn--light { background: var(--white); color: var(--ink); border: 1.5px solid var(--white); border-radius: 2px; text-shadow: none; box-shadow: 0 10px 28px rgba(22, 17, 9, 0.18); }
.btn--light:hover { background: var(--white); border-color: var(--white); box-shadow: 0 14px 34px rgba(255, 255, 255, 0.22); transform: translateY(-2px); }
.btn--ghost-light {
  background: rgba(255, 255, 255, 0.04);
  color: var(--white);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 2px;
  text-shadow: none;
}
.btn--ghost-light:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.12); box-shadow: none; transform: translateY(-2px); }
/* reset the hardware arrow-well on the monochrome variants */
.btn--ghost .arrow, .btn--light .arrow, .btn--ghost-light .arrow {
  width: auto; height: auto; background: none; box-shadow: none; border-radius: 0;
}
.btn--ghost:hover .arrow, .btn--light:hover .arrow, .btn--ghost-light:hover .arrow { transform: translateX(4px); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 0.3rem;
  transition: gap var(--fade) var(--ease), color var(--fade) var(--ease);
}
.text-link:hover { gap: 1rem; color: var(--accent); }
.on-dark .text-link { color: var(--white); }

/* ---------- Hero — cinematic photo, white drop-off ---------- */
.hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(34rem, 88svh, 52rem);
  color: var(--white);
  isolation: isolate;
  overflow: hidden;
}
.hero--short { min-height: clamp(22rem, 58svh, 34rem); }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.25) contrast(1.08) brightness(0.9);
  animation: hero-settle 1800ms var(--ease) both;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.34) 45%, rgba(0,0,0,0.28) 100%);
}
/* angled white edge into the page */
.hero::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: clamp(2.5rem, 6vw, 5rem);
  background: var(--white);
  clip-path: polygon(0 100%, 100% 100%, 100% 0);
  z-index: 1;
}
@keyframes hero-settle {
  from { transform: scale(1.06); }
  to { transform: scale(1); }
}
.hero-inner { padding-block: clamp(2.8rem, 6vw, 4.5rem); display: grid; gap: 1.2rem; position: relative; z-index: 2; }
.hero-inner h1 { color: var(--white); }
.hero-inner .lede { color: rgba(255,255,255,0.88); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.8rem; }

/* ---------- Homepage hero — elevated split marquee ---------- */
/* same dark split language as the interior pages, scaled up for the marquee:
   copy left, cinematic viewfinder photo right with a diagonal cut + HUD */
.hero-dark--home {
  min-height: clamp(40rem, 95svh, 60rem);
  align-items: center;
}
.hero-dark--home .hd-copy { max-width: 40em; gap: 1.05rem; }
.hero-dark--home .hd-copy h1 { font-size: clamp(3.1rem, 6.6vw, 5.6rem); line-height: 0.9; }
/* feature icons stay a tidy 2x2 inside the narrower copy column */
.hero-dark--home .hd-feats { grid-template-columns: repeat(2, 1fr); margin-top: 1rem; }
.hero-dark--home .hd-copy > *:nth-child(7) { animation-delay: 540ms; }
@media (min-width: 60em) {
  .hero-dark--home .hd-copy { width: 50%; }
  .hero-dark--home .hd-photo { width: 52%; }
}
/* taller marquee photo */
.hero-dark--home .viewfinder { height: clamp(20rem, 72vw, 30rem); }
@media (min-width: 60em) { .hero-dark--home .viewfinder { height: 100%; } }

/* ---------- Homepage hero — dark split with viewfinder photo ---------- */
.hero-dark {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(60% 80% at 12% 0%, rgba(11, 11, 11, 0.14) 0%, rgba(11, 11, 11, 0) 55%),
    radial-gradient(50% 70% at 95% 100%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 60%),
    #131313;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.hero-dark { min-height: clamp(31rem, 82svh, 46rem); display: grid; align-items: center; }
.hero-dark .container { position: static; }
@media (min-width: 60em) {
  /* reserve the right half for the full-bleed photo; keep text clear of the diagonal */
  .hero-dark .hd-copy { max-width: none; width: 48%; padding-right: clamp(2.5rem, 5vw, 5rem); }
}

.hd-copy { display: grid; gap: 1.05rem; max-width: 36em; }
.hd-copy > * { animation: hero-rise 700ms var(--ease) both; }
.hd-copy > *:nth-child(2) { animation-delay: 90ms; }
.hd-copy > *:nth-child(3) { animation-delay: 180ms; }
.hd-copy > *:nth-child(4) { animation-delay: 270ms; }
.hd-copy > *:nth-child(5) { animation-delay: 360ms; }
.hd-copy > *:nth-child(6) { animation-delay: 450ms; }
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

.hero-dark .eyebrow { color: rgba(255, 255, 255, 0.85); letter-spacing: 0.34em; font-size: 0.68rem; }
.hero-dark .eyebrow::before { background: var(--accent); box-shadow: none; }

.hd-copy h1 {
  color: #f3f1ec;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-stretch: 100%;
  font-size: clamp(3.2rem, 7.4vw, 5.8rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.02em;
}
.hd-copy .lede { color: rgba(255, 255, 255, 0.72); font-size: clamp(0.98rem, 1.3vw, 1.1rem); }

/* tagline — italic grotesk, quiet against the poster caps */
.hd-script {
  font-family: var(--font);
  font-style: italic;
  font-weight: 560;
  font-size: clamp(0.98rem, 1.6vw, 1.15rem);
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.04em;
}
.hd-script em { font-style: italic; color: var(--accent); }

.hero-dark .hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.hero-dark .btn { box-shadow: var(--glow-red); }
.hero-dark .btn--ghost-light { border-color: rgba(255, 255, 255, 0.4); }

/* icon feature row */
.hd-feats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem 1.4rem;
  margin-top: 0.8rem;
}
@media (min-width: 48em) { .hd-feats { grid-template-columns: repeat(4, 1fr); } }
.hd-feat { display: flex; align-items: center; gap: 0.7rem; }
.hd-feat .f-icon {
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.04);
}
.hd-feat .f-icon svg { width: 1.05rem; height: 1.05rem; stroke: var(--white); fill: none; stroke-width: 1.6; }
.hd-feat .f-label {
  font-size: 0.62rem;
  font-weight: 760;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
  line-height: 1.45;
}

/* full-bleed cinematic photo — right half, diagonal cut, blended into the dark */
.hd-photo {
  position: relative;
  animation: hero-rise 800ms var(--ease) 250ms both;
  margin-top: 2.5rem;
}
@media (min-width: 60em) {
  .hd-photo {
    position: absolute;
    inset: 0 0 0 auto;
    width: 50%;
    margin-top: 0;
    /* diagonal leans away from the text: never crosses the page midline */
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
  }
}
.viewfinder {
  position: relative;
  overflow: hidden;
  height: clamp(16rem, 60vw, 24rem);
  background: #161616;
}
@media (min-width: 60em) { .viewfinder { height: 100%; } }
.viewfinder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.25) contrast(1.08) brightness(0.88);
}
/* blend the photo's left edge into the hero background + ground it at the bottom */
.viewfinder::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(100deg, rgba(19, 19, 19, 0.9) 0%, rgba(19, 19, 19, 0.25) 22%, rgba(19, 19, 19, 0) 48%),
    linear-gradient(to top, rgba(19, 19, 19, 0.55) 0%, rgba(19, 19, 19, 0) 30%);
}
@media (max-width: 59.99em) {
  .viewfinder::after {
    background: linear-gradient(to top, rgba(19, 19, 19, 0.5) 0%, rgba(19, 19, 19, 0) 35%);
  }
}
/* HUD corner brackets */
.vf-corners {
  position: absolute;
  inset: 0.9rem;
  pointer-events: none;
  background-image:
    linear-gradient(#fff, #fff), linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff), linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff), linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  background-repeat: no-repeat;
  background-size: 20px 2px, 2px 20px, 20px 2px, 2px 20px, 20px 2px, 2px 20px, 20px 2px, 2px 20px;
  background-position:
    top left, top left,
    top right, top right,
    bottom left, bottom left,
    bottom right, bottom right;
  opacity: 0.85;
}
.vf-tag, .vf-geo {
  position: absolute;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
  z-index: 2;
}
.vf-tag { top: 1.5rem; left: 1.7rem; }
.vf-geo { bottom: 1.5rem; right: 1.7rem; text-align: right; line-height: 1.7; }
/* on the diagonal hero photo, keep HUD clear of the cut edge */
@media (min-width: 60em) {
  .hero-dark .vf-tag { left: auto; right: 1.8rem; top: 1.6rem; }
  .hero-dark .vf-corners { inset: 1.1rem 1.1rem 1.1rem calc(10% + 1.1rem); }
}

/* ---------- Homepage viewfinder extras — faint live-feed scanlines + focus reticle ---------- */
.vf-scan {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
  opacity: 0.5;
}
.vf-reticle {
  position: absolute;
  top: 50%; left: 50%;
  width: clamp(3.2rem, 7vw, 4.8rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
  /* four corner L-brackets + a small centre crosshair */
  background-image:
    linear-gradient(#fff, #fff), linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff), linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff), linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff), linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  background-repeat: no-repeat;
  background-size:
    13px 2px, 2px 13px, 13px 2px, 2px 13px,
    13px 2px, 2px 13px, 13px 2px, 2px 13px,
    9px 2px, 2px 9px;
  background-position:
    top left, top left, top right, top right,
    bottom left, bottom left, bottom right, bottom right,
    center, center;
  opacity: 0.7;
}
@media (prefers-reduced-motion: no-preference) {
  .vf-reticle { animation: vf-pulse 3.4s var(--ease) infinite; }
}
@keyframes vf-pulse {
  0%, 100% { opacity: 0.42; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.82; transform: translate(-50%, -50%) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .hd-copy > *, .hd-photo { animation: none; }
}

/* ---------- Hero announcement pill — warm brass "live promo" beacon ---------- */
.hd-announce {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.62rem 1.2rem;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff7ea;
  background: linear-gradient(180deg, rgba(200, 173, 119, 0.28) 0%, rgba(156, 127, 78, 0.2) 100%);
  border: 1px solid var(--brass-hi);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 224, 0.25),
    0 0 0 1px rgba(200, 173, 119, 0.16),
    0 10px 26px rgba(156, 127, 78, 0.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  justify-self: start;
  transition: background var(--fade) var(--ease), box-shadow var(--fade) var(--ease), transform var(--fade) var(--ease);
}
/* pulsing amber "now enrolling" dot */
.hd-announce::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--brass-hi);
  box-shadow: 0 0 10px rgba(200, 173, 119, 0.95), 0 0 4px rgba(255, 255, 255, 0.8);
}
@media (prefers-reduced-motion: no-preference) {
  .hd-announce::before { animation: announce-ping 1.9s ease-in-out infinite; }
}
@keyframes announce-ping {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 173, 119, 0.6), 0 0 8px rgba(200, 173, 119, 0.9); }
  50% { box-shadow: 0 0 0 6px rgba(200, 173, 119, 0), 0 0 11px rgba(200, 173, 119, 0.95); }
}
.hd-announce:hover {
  background: linear-gradient(180deg, rgba(200, 173, 119, 0.42) 0%, rgba(156, 127, 78, 0.32) 100%);
  border-color: var(--brass-hi);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 224, 0.35),
    0 0 0 1px rgba(200, 173, 119, 0.3),
    0 14px 32px rgba(156, 127, 78, 0.42);
  transform: translateY(-1px);
}
.hd-announce .arrow { transition: transform var(--fade) var(--ease); color: var(--brass-hi); }
.hd-announce:hover .arrow { transform: translateX(4px); }

/* ---------- Homepage promo alert bar (top of page) ---------- */
body.promo-on { --promo-h: 2.6rem; }
.promo-bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 65;                 /* under the mobile menu (70) + nav pill (80) */
  height: var(--promo-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0 1rem;
  overflow: hidden;
  white-space: nowrap;
  font-size: clamp(0.55rem, 2.6vw, 0.73rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: linear-gradient(180deg, var(--brass-hi) 0%, var(--brass) 55%, var(--brass-lo) 100%);
  border-bottom: 1px solid var(--brass-lo);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
  transition: filter var(--fade) var(--ease);
}
.promo-bar strong { font-weight: 900; }
.promo-bar:hover { filter: brightness(1.05); }
.promo-bar .promo-dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--on-accent);
}
.promo-bar .promo-arrow { transition: transform var(--fade) var(--ease); }
.promo-bar:hover .promo-arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: no-preference) {
  .promo-bar .promo-dot { animation: promo-pulse 1.9s ease-in-out infinite; }
}
@keyframes promo-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(28, 23, 16, 0.55); }
  50% { box-shadow: 0 0 0 5px rgba(28, 23, 16, 0); }
}
/* drop the floating nav below the bar — homepage only */
body.promo-on .site-header { top: calc(var(--promo-h) + 0.4rem); }
@media (max-width: 30em) {
  body.promo-on { --promo-h: 3.2rem; }   /* room for two lines */
  .promo-bar {
    white-space: normal;
    line-height: 1.18;
    text-wrap: balance;
    font-size: 0.63rem;
    letter-spacing: 0.05em;
    gap: 0.4rem;
    padding: 0 0.7rem;
  }
  .promo-bar .promo-dot { display: none; }
}

/* ---------- Featured event card ---------- */
.event-card {
  display: grid;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-lift);
  background: var(--white);
  overflow: hidden;
}
@media (min-width: 60em) {
  .event-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}
.ev-photo { position: relative; min-height: clamp(14rem, 44vw, 18rem); }
@media (min-width: 60em) { .ev-photo { min-height: 100%; } }
.ev-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.08) contrast(1.06) saturate(1.05);
}
.ev-date {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  background: var(--accent);
  color: var(--white);
  padding: 0.5rem 0.95rem;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  box-shadow: var(--glow-red);
}
.ev-copy {
  padding: clamp(1.8rem, 4vw, 3rem);
  display: grid;
  gap: 1rem;
  align-content: center;
  justify-items: start;
}
.ev-meta { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.ev-meta span {
  font-size: 0.64rem;
  font-weight: 760;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--hairline-strong);
  padding: 0.35rem 0.75rem;
}
.sched-note.static { display: block; }
.mobile-overlay.is-open li:nth-child(7) { transition-delay: 380ms; }

/* ---------- Compact split header for interior pages ---------- */
.hero-dark--page { min-height: clamp(19rem, 46svh, 26rem); }
.hero-dark--page .hd-copy h1 { font-size: clamp(2.6rem, 5.8vw, 4.3rem); }
.hero-dark--page .hd-copy { gap: 0.9rem; }
.hero-dark--page .lede { font-size: clamp(0.94rem, 1.3vw, 1.04rem); }
.hero-dark--page .viewfinder { height: clamp(13rem, 44vw, 18rem); }
@media (min-width: 60em) { .hero-dark--page .viewfinder { height: 100%; } }

/* ============================================================
   Image-free interior hero panels — Classes / Schedule / Contact
   Monochrome HUD "readouts" that replace the photo on the right.
   Shared frame: outlined watermark word + corner brackets + screen
   surface; the foreground content differs per page.
   ============================================================ */
.hd-panel {
  position: relative;
  margin-top: 2rem;
  min-height: clamp(15rem, 52vw, 19rem);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 7px),
    linear-gradient(160deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.008) 60%);
  animation: hero-rise 800ms var(--ease) 250ms both;
}
@media (min-width: 60em) {
  .hd-panel {
    position: absolute;
    inset: 0 0 0 auto;
    width: 50%;
    margin-top: 0;
    min-height: 0;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
  }
  /* give the panel pages a little more vertical room than the photo heroes */
  .hero-dark--page:has(.hd-panel) { min-height: clamp(25rem, 54svh, 31rem); }
}
@media (prefers-reduced-motion: reduce) { .hd-panel { animation: none; } }

/* giant outlined watermark word behind the readout */
.hp-word {
  position: absolute;
  right: 0.04em;
  bottom: -0.16em;
  font-family: var(--font-display);
  font-size: clamp(4rem, 12vw, 8.5rem);
  line-height: 0.8;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.07);
  pointer-events: none;
  white-space: nowrap;
}
/* HUD brackets sized for the panel (override the diagonal-photo insets) */
.hd-panel .vf-corners { inset: 0.85rem; opacity: 0.65; }
@media (min-width: 60em) { .hero-dark .hd-panel .vf-corners { inset: 1.1rem; } }

.hp-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: clamp(1.4rem, 2.6vw, 2rem);
  display: grid;
  align-content: start;
  gap: 0.95rem;
}
@media (min-width: 60em) { .hp-inner { align-content: safe center; } }
@media (min-width: 60em) {
  /* The panel is absolutely positioned to the hero's top edge, so it sits
     beneath the fixed site header. Pad the index content down so the
     "Index · 08 Programs" tag and first programs clear the header. */
  .hd-panel--index .hp-inner { padding-top: clamp(5.25rem, 8.5vw, 5.5rem); }
  /* …and give the panel enough height that all eight programs still fit. */
  .hero-dark--page:has(.hd-panel--index) { min-height: clamp(28rem, 55svh, 32rem); }
}
.hp-tag {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
}

/* --- Classes: numbered program index --- */
.hp-index { display: grid; }
.hp-index li {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  padding: 0.46rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.hp-index li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.hp-index .hp-no {
  flex: none;
  width: 1.5rem;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.hp-index .hp-name {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.5vw, 1.2rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  color: rgba(255, 255, 255, 0.92);
}

/* --- Schedule: weekly density strip --- */
.hp-week {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.55rem;
  align-items: end;
  height: clamp(8rem, 24vw, 11rem);
}
.hp-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  gap: 0.3rem;
  height: 100%;
}
.hp-col .b { height: 0.5rem; background: rgba(255, 255, 255, 0.22); }
.hp-col .b.on { background: rgba(255, 255, 255, 0.92); }
.hp-col i {
  font-style: normal;
  text-align: center;
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
}
.hp-legend {
  display: flex;
  justify-content: space-between;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

/* --- Contact: locator readout --- */
.hp-reticle {
  position: relative;
  width: clamp(2.8rem, 7vw, 3.8rem);
  aspect-ratio: 1;
  margin: 0.1rem 0 0.3rem;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
}
.hp-reticle::before, .hp-reticle::after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.5);
}
.hp-reticle::before { left: 50%; top: -22%; width: 1px; height: 144%; transform: translateX(-50%); }
.hp-reticle::after { top: 50%; left: -22%; height: 1px; width: 144%; transform: translateY(-50%); }
.hp-read { display: grid; gap: 0.7rem; }
.hp-read > div { display: grid; gap: 0.16rem; }
.hp-read .k {
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}
.hp-read .v { font-size: 0.88rem; line-height: 1.4; color: rgba(255, 255, 255, 0.9); }
.hp-read .dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.35rem;
  border-radius: 50%;
  background: #fff;
  vertical-align: baseline;
}
@media (prefers-reduced-motion: no-preference) {
  .hp-read .dot { animation: hp-ping 2s ease-in-out infinite; }
}
@keyframes hp-ping {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55), 0 0 7px rgba(255, 255, 255, 0.8); }
  50% { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0), 0 0 9px rgba(255, 255, 255, 0.9); }
}

/* --- Events: month calendar with a highlighted 5-day camp week --- */
.hp-cal { display: grid; gap: 0.42rem; width: 100%; max-width: 18rem; }
.hp-cal-head, .hp-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.3rem; }
.hp-cal-head i {
  font-style: normal;
  text-align: center;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.42);
}
.hp-cal-grid .c {
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.025);
}
.hp-cal-grid .c.on {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.9);
}
.hp-cal-key {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
}
.hp-cal-key .sw { flex: none; width: 0.7rem; height: 0.7rem; background: rgba(255, 255, 255, 0.9); }

/* ---------- Dark page intro band (Classes / Schedule) ---------- */
.page-intro {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(60% 80% at 10% 0%, rgba(11, 11, 11, 0.13) 0%, rgba(11, 11, 11, 0) 55%),
    #131313;
  padding-block: clamp(2.6rem, 5vw, 4.2rem) clamp(3.2rem, 6vw, 5rem);
}
/* giant outlined watermark word, e.g. CLASSES / SCHEDULE */
.page-intro::after {
  content: attr(data-word);
  position: absolute;
  right: -0.04em;
  bottom: -0.18em;
  font-size: clamp(4.5rem, 13vw, 11rem);
  font-weight: 900;
  font-stretch: 122%;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.09);
  pointer-events: none;
  white-space: nowrap;
}
.page-intro .eyebrow { color: rgba(255, 255, 255, 0.85); }
.page-intro .eyebrow::before { background: var(--accent); box-shadow: none; }
.page-intro h1 {
  color: #f3f1ec;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-stretch: 100%;
  font-size: clamp(2.9rem, 6.8vw, 5.2rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 0.94;
}
.page-intro h1 em { font-style: normal; font-weight: 400; color: var(--accent); }
.page-intro .lede { color: rgba(255, 255, 255, 0.72); }
/* angled white exit edge */
.page-intro .intro-edge {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: clamp(1.8rem, 4vw, 3.2rem);
  background: var(--white);
  clip-path: polygon(0 100%, 100% 100%, 100% 0);
}

/* framing utility — keeps heads/faces near the top of an image visible */
img.obj-top { object-position: 50% 22% !important; }

/* HUD overlays reusable on photo heroes (About / Contact) */
.hero .vf-corners { inset: 1.2rem; z-index: 2; }
.hero .vf-tag { z-index: 3; }
.hero .vf-geo { bottom: clamp(3.4rem, 7vw, 5.8rem); z-index: 3; }
@media (max-width: 40em) {
  .hero .vf-tag, .hero .vf-geo { display: none; }
}

/* ---------- Media / imagery ---------- */
.frame {
  overflow: hidden;
  background: var(--paper);
  position: relative;
  box-shadow: var(--shadow-soft);
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* cinematic base grade — gently desaturated, punchy, natural skin tones */
  filter: grayscale(0.12) contrast(1.09) saturate(1.05) brightness(1.02);
  transition: transform 800ms var(--ease), filter 800ms var(--ease);
}
a.frame:hover img, .card:hover .frame img, .gallery .frame:hover img,
.p-item:hover .frame img, .feature-row:hover .frame img, .program-feature:hover .frame img {
  transform: scale(1.05);
  filter: grayscale(0) contrast(1.1) saturate(1.08) brightness(1.03);
}
.frame--3x4 { aspect-ratio: 3 / 4; }
.frame--4x3 { aspect-ratio: 4 / 3; }
.frame--16x9 { aspect-ratio: 16 / 9; }
.frame--21x9 { aspect-ratio: 21 / 9; }
.frame--square { aspect-ratio: 1 / 1; }
.frame--top img { object-position: top center; }   /* protect faces near top of frame */

.caption {
  margin-top: 0.8rem;
  font-size: 0.7rem;
  font-weight: 720;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--grey);
}

/* ---------- Grids ---------- */
.grid-2 { display: grid; gap: clamp(1.6rem, 3vw, 3rem); }
.grid-3 { display: grid; gap: clamp(1.2rem, 2.5vw, 2rem); }
@media (min-width: 48em) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.program-list { display: grid; gap: clamp(1.6rem, 3vw, 2.2rem) clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 40em) { .program-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .program-list { grid-template-columns: repeat(4, 1fr); } }

/* Premium cards — full-bleed image, number set into the photograph */
.card {
  display: block;
  position: relative;
  background: var(--white);
  border: 1px solid var(--hairline);
  padding: 0 0 1.45rem;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform var(--fade) var(--ease), box-shadow var(--fade) var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.card .frame { box-shadow: none; border: 0; }
.card .num {
  position: absolute;
  top: 0.85rem;
  left: 1.1rem;
  z-index: 2;
  font-size: 0.85rem;
  font-weight: 900;
  font-stretch: 120%;
  letter-spacing: 0.12em;
  color: var(--white);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
  margin: 0;
}
.card h3 { font-size: 1.04rem; margin: 1.05rem 1.25rem 0; }
.card p { font-size: 0.9rem; color: var(--grey-dim); margin: 0.45rem 1.25rem 0; line-height: 1.55; }
.card .text-link { margin: 0.95rem 1.25rem 0; font-size: 0.68rem; }
/* a hairline of red appears beneath the image on hover */
.card .frame::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--fade) var(--ease);
}
.card:hover .frame::after { transform: scaleX(1); }

/* Alternating feature rows (Classes page) */
.feature-row {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3.2rem);
  align-items: center;
  padding-block: clamp(1.8rem, 3.6vw, 3rem);
  border-top: 1px solid var(--hairline);
}
.feature-row:last-of-type { border-bottom: 1px solid var(--hairline); }
@media (min-width: 56em) {
  .feature-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .feature-row--flip .feature-media { order: 2; }
}
.feature-media { position: relative; }
.feature-media::before {
  content: "";
  position: absolute;
  inset: 1.1rem -1.1rem -1.1rem 1.1rem;
  border: 2px solid var(--accent);
  opacity: 0.35;
  pointer-events: none;
}
.feature-row--flip .feature-media::before { inset: 1.1rem 1.1rem -1.1rem -1.1rem; }
.feature-media .frame { box-shadow: var(--shadow-lift); }
.feature-copy { display: grid; gap: 1.1rem; max-width: 36em; }
.feature-copy .meta { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.feature-copy .meta span {
  font-size: 0.66rem;
  font-weight: 760;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--hairline-strong);
  background: var(--white);
  padding: 0.4rem 0.85rem;
}

/* ---------- Facility gallery ---------- */
.gallery { display: grid; gap: clamp(0.7rem, 1.4vw, 1rem); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 56em) {
  .gallery { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 13rem; }
  .gallery .g-wide { grid-column: span 2; }
  .gallery .g-tall { grid-row: span 2; }
  .gallery .frame { height: 100%; }
  .gallery .frame[class*="frame--"] { aspect-ratio: auto; }
}
.gallery .frame:hover img { transform: scale(1.06); }

/* ---------- Pillars — bold numbering ---------- */
.pillars { display: grid; gap: 0; border-top: 1px solid var(--hairline-light); }
@media (min-width: 48em) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillar { padding: clamp(1.3rem, 2.2vw, 1.9rem) 0; border-bottom: 1px solid var(--hairline-light); }
@media (min-width: 48em) {
  .pillar { padding: clamp(1.4rem, 2.4vw, 2.2rem) clamp(1.2rem, 2vw, 2rem); border-bottom: 0; border-left: 1px solid var(--hairline-light); }
  .pillar:first-child { border-left: 0; padding-left: 0; }
}
.pillar .num {
  font-size: 2.6rem;
  font-weight: 900;
  font-stretch: 120%;
  color: var(--accent);
  display: block;
  margin-bottom: 1rem;
  line-height: 1;
}
.pillar h3 { font-size: 1.12rem; margin-bottom: 0.7rem; }
.pillar p { font-size: 0.92rem; color: var(--grey); line-height: 1.6; }
/* pillars on white pages */
.section:not(.on-dark) .pillars { border-top-color: var(--hairline); }
.section:not(.on-dark) .pillar { border-color: var(--hairline); }
.section:not(.on-dark) .pillar p { color: var(--grey-dim); }

/* ---------- Reviews ---------- */
/* ---------- Reviews — auto-scrolling marquee strip ---------- */
.rev-score {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  justify-self: end;
}
.rev-score .stars { color: var(--accent); letter-spacing: 0.28em; font-size: 0.85rem; }
.rev-score span:last-child {
  font-size: 0.68rem;
  font-weight: 760;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey-dim);
}
.rev-score strong { color: var(--ink); font-weight: 800; }
.on-dark .rev-score span:last-child { color: var(--grey); }
.on-dark .rev-score strong { color: var(--white); }

/* full-bleed drifting band, soft-masked at the edges */
.rev-marquee {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  padding-block: 0.5rem;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.rev-track {
  display: flex;
  width: max-content;
  animation: rev-scroll 80s linear infinite;
}
.rev-marquee:hover .rev-track { animation-play-state: paused; }
@keyframes rev-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.rev-set { display: flex; gap: 1.25rem; padding-right: 1.25rem; }
.rev-card {
  position: relative;
  width: clamp(19rem, 28vw, 24rem);
  flex: none;
  background: var(--white);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.4rem, 2.4vw, 1.8rem);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: box-shadow var(--fade) var(--ease), transform var(--fade) var(--ease);
}
.rev-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-4px); }
.rev-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 3rem; height: 3px;
  background: var(--accent);
}
.rev-card .stars { color: var(--accent); letter-spacing: 0.3em; font-size: 0.74rem; }
.rev-card blockquote { font-size: 0.9rem; line-height: 1.6; color: #2c2c2c; flex: 1; }
.rev-card cite {
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 780;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  border-top: 1px solid var(--hairline);
  padding-top: 0.8rem;
}
.on-dark .rev-card { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); border-color: transparent; }
.rev-cta-line { text-align: center; margin-top: clamp(1.4rem, 3vw, 2rem); }
@media (prefers-reduced-motion: reduce) {
  .rev-track { animation: none; }
  .rev-marquee { overflow-x: auto; }
}
.reviews-nav { display: flex; gap: 0.6rem; }
.reviews-nav button {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline-strong);
  font-size: 1.05rem;
  color: var(--ink);
  background: var(--white);
  transition: background var(--fade) var(--ease), color var(--fade) var(--ease), box-shadow var(--fade) var(--ease), border-color var(--fade) var(--ease);
}
.reviews-nav button:hover { background: var(--accent); border-color: var(--accent); color: var(--white); box-shadow: var(--glow-red); }
.on-dark .reviews-nav button { background: transparent; color: var(--white); border-color: var(--hairline-light); }
.on-dark .reviews-nav button:hover { background: var(--accent); border-color: var(--accent); }

/* ---------- Schedule — filterable card grid ---------- */
.filter-drop {
  display: grid;
  gap: 0.5rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.2rem);
  max-width: 24rem;
  /* keep the open dropdown above the timetable columns */
  position: relative;
  z-index: 50;
}
.filter-drop label {
  font-size: 0.66rem;
  font-weight: 780;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--grey-dim);
}
/* program filter chips */
.chip-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.2rem);
}
.chip {
  font-size: 0.68rem;
  font-weight: 780;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.7rem 1.15rem;
  border: 1px solid var(--hairline-strong);
  background: var(--white);
  color: var(--grey-dim);
  cursor: pointer;
  transition: all var(--fade) var(--ease);
}
.chip:hover {
  border-color: var(--ink);
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}
.chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
  box-shadow: var(--glow-red);
}
.week-grid.filtering { animation: sched-fade 350ms var(--ease); }

.fd-label {
  font-size: 0.66rem;
  font-weight: 780;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--grey-dim);
}
/* custom dropdown — fully branded open state */
.dd { position: relative; }
.dd-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--hairline-strong);
  border-left: 4px solid var(--accent);
  padding: 0.95rem 1.1rem;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: border-color var(--fade) var(--ease), box-shadow var(--fade) var(--ease);
}
.dd-btn::after {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translateY(-15%);
  transition: transform var(--fade) var(--ease);
}
.dd-btn:hover { border-color: var(--ink); border-left-color: var(--accent); box-shadow: var(--shadow-lift); }
.dd-btn:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(11, 11, 11, 0.15); }
.dd.open .dd-btn { border-color: var(--ink); border-left-color: var(--accent); }
.dd.open .dd-btn::after { transform: rotate(225deg); }
.dd-list {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--white);
  border: 1px solid var(--hairline-strong);
  border-top: 3px solid var(--accent);
  box-shadow: var(--shadow-lift);
  max-height: 60vh;
  overflow-y: auto;
  display: none;
}
.dd.open .dd-list { display: block; animation: sched-fade 260ms var(--ease); }
.dd-list li {
  padding: 0.8rem 1.1rem;
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey-dim);
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
  transition: background var(--fade) var(--ease), color var(--fade) var(--ease), border-color var(--fade) var(--ease);
}
.dd-list li:last-child { border-bottom: 0; }
.dd-list li:hover, .dd-list li:focus-visible {
  background: var(--paper);
  color: var(--ink);
  border-left-color: var(--accent);
  outline: none;
}
.dd-list li[aria-selected="true"] {
  background: var(--ink);
  color: var(--white);
  border-left-color: var(--accent);
}

/* weekly timetable — departures-board: day label left, class rows right */
.week-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

.day-group {
  display: grid;
  background: var(--white);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: box-shadow var(--fade) var(--ease);
}
@media (min-width: 56em) {
  .day-group { grid-template-columns: 11rem minmax(0, 1fr); }
}
.day-group:hover { box-shadow: var(--shadow-lift); }
.day-group.is-hidden { display: none; }

.day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.9rem 1.2rem;
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    radial-gradient(120% 100% at 0% 0%, rgba(11, 11, 11, 0.18) 0%, rgba(11, 11, 11, 0) 55%),
    #131313;
  background-size: 32px 32px, 32px 32px, auto, auto;
  position: relative;
}
.day-head::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--accent);
}
@media (min-width: 56em) {
  .day-head {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.35rem;
    padding: 1.4rem 1.4rem;
  }
  .day-head::before { width: 3px; height: 100%; }
}
.day-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.4vw, 2.3rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--white);
}
.day-head .day-count {
  font-size: 0.6rem;
  font-weight: 760;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey);
  white-space: nowrap;
}

.class-grid { display: grid; align-content: start; }

.class-card {
  position: relative;
  border-bottom: 1px solid var(--hairline);
  padding: 1rem 1.3rem;
  display: grid;
  gap: 0.35rem;
  transition: background var(--fade) var(--ease);
}
@media (min-width: 44em) {
  .class-card {
    grid-template-columns: 6.8rem minmax(0, 1fr) auto;
    grid-template-areas:
      "time name tags"
      "time note tags";
    column-gap: 1.4rem;
    row-gap: 0.25rem;
    align-items: center;
    padding: 1.05rem 1.5rem;
  }
  .class-card .c-time { grid-area: time; }
  .class-card .c-name { grid-area: name; }
  .class-card .c-note { grid-area: note; }
  .class-card .c-tags { grid-area: tags; margin-top: 0; justify-content: flex-end; }
}
.class-card:last-child { border-bottom: 0; }
/* red line sweeps down the row edge on hover */
.class-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--fade) var(--ease);
}
.class-card:hover { background: var(--paper); }
.class-card:hover::before { transform: scaleY(1); }
.class-card.is-hidden { display: none; }
.class-card .c-time {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1;
  color: var(--ink);
  text-transform: uppercase;
}
/* hairline between the time column and the class details */
@media (min-width: 44em) {
  .class-card::after {
    content: "";
    position: absolute;
    left: 8.6rem;
    top: 22%;
    bottom: 22%;
    width: 1px;
    background: var(--hairline);
  }
}
/* subtle zebra rhythm */
.class-grid .class-card:nth-child(even) { background: rgba(11, 11, 11, 0.018); }
.class-grid .class-card:hover { background: var(--paper); }
.class-card .c-name {
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.3;
}
.class-card .c-note { display: block; font-size: 0.8rem; color: var(--grey-dim); line-height: 1.45; }
.class-card .c-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-top: 0.15rem; }
.class-card .c-tags span {
  font-size: 0.62rem;
  font-weight: 760;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey-dim);
  white-space: nowrap;
}
.class-card .c-tags span + span::before {
  content: "\00B7";
  color: var(--accent);
  margin-right: 0.3rem;
  font-weight: 900;
}
.class-card .c-cat { display: none; }

/* Sunday rest bar */
.day-group--rest p {
  margin: 0;
  padding: 1rem 1.3rem;
  align-self: center;
}
.day-group--rest .day-head { background: var(--paper); }
.day-group--rest .day-head::before { background: var(--accent); }
.day-group--rest .day-head h2 { color: var(--ink); }
.day-group--rest .day-head .day-count { color: var(--grey-dim); }

.sched-note {
  display: none;
  border: 1px dashed var(--hairline-strong);
  background: var(--paper);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  max-width: 44em;
}
.sched-note.is-visible { display: block; animation: sched-fade var(--fade) var(--ease); }
.sched-note h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.sched-note p { font-size: 0.92rem; color: var(--grey-dim); }
.sched-note .text-link { margin-top: 1rem; }
@keyframes sched-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Map / contact ---------- */
.map-shell {
  border: 1px solid var(--hairline);
  background: var(--paper);
  box-shadow: var(--shadow-lift);
}
.map-shell iframe {
  display: block;
  width: 100%;
  height: clamp(20rem, 42vw, 28rem);
  border: 0;
  filter: grayscale(1) contrast(1.02);
}

/* visit band — dark section: info panel beside dark map, arrival strip below */
.visit-grid { display: grid; gap: 1rem; align-items: stretch; }
@media (min-width: 60em) {
  .visit-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.7fr); }
}
.visit-info {
  position: relative;
  display: grid;
  gap: 1.15rem;
  align-content: center;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
}
.visit-info::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 3.5rem; height: 3px;
  background: var(--accent);
  box-shadow: 0 0 14px rgba(11, 11, 11, 0.7);
}
.visit-info .item h3 {
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 780;
  margin-bottom: 0.3rem;
}
.visit-info .item p, .visit-info .item a { font-size: 0.96rem; line-height: 1.5; color: rgba(255, 255, 255, 0.92); }
.visit-info .item a { border-bottom: 1px solid rgba(255, 255, 255, 0.3); transition: border-color var(--fade) var(--ease), color var(--fade) var(--ease); }
.visit-info .item a:hover { border-color: var(--accent); color: var(--accent); }
.visit-map {
  border: 1px solid rgba(255, 255, 255, 0.12);
  min-height: 20rem;
}
.visit-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 20rem;
  border: 0;
  filter: grayscale(1) contrast(1.02);
}
/* arrival strip */
.visit-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
  margin-top: 1rem;
  padding: 1rem clamp(1rem, 2vw, 1.4rem);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
}
.visit-strip .vs-thumb {
  width: 6rem;
  height: 4.2rem;
  flex: none;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.visit-strip .vs-thumb img { width: 100%; height: 100%; object-fit: cover; }
.visit-strip p {
  flex: 1;
  min-width: 16rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--grey);
  margin: 0;
}
.visit-strip p strong { color: var(--white); font-weight: 700; }

/* stronger feature-row hover energy */
.feature-media .frame { transition: box-shadow var(--fade) var(--ease); }
.feature-row:hover .feature-media .frame {
  box-shadow: 0 26px 60px rgba(11, 11, 11, 0.22), 0 0 0 1px rgba(11, 11, 11, 0.35);
}
.contact-card { display: grid; gap: 1.5rem; }
.contact-card .item h3 {
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 780;
  margin-bottom: 0.45rem;
}
.contact-card .item p, .contact-card .item a { font-size: 1.04rem; line-height: 1.55; color: var(--ink); }
.contact-card .item a { border-bottom: 1px solid var(--hairline-strong); transition: border-color var(--fade) var(--ease), color var(--fade) var(--ease); }
.contact-card .item a:hover { border-color: var(--accent); color: var(--accent); }

/* Enquiry panel — dark info / white form split */
.enquiry-panel {
  display: grid;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-lift);
  background: var(--white);
}
@media (min-width: 60em) {
  .enquiry-panel { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}
.ep-info {
  padding: clamp(2rem, 4vw, 3rem);
  display: grid;
  gap: 1.3rem;
  align-content: start;
  border: 0;
}
.ep-info .item h3 {
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 780;
  margin-bottom: 0.35rem;
}
.ep-info .item p, .ep-info .item a { font-size: 0.98rem; line-height: 1.55; color: rgba(255, 255, 255, 0.92); }
.ep-info .item a { border-bottom: 1px solid rgba(255, 255, 255, 0.3); transition: border-color var(--fade) var(--ease), color var(--fade) var(--ease); }
.ep-info .item a:hover { border-color: var(--accent); color: var(--accent); }
.ep-rating {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 1.2rem;
  margin-top: 0.4rem;
}
.ep-rating .stars { color: var(--accent); letter-spacing: 0.28em; font-size: 0.8rem; }
.ep-rating span:last-child {
  font-size: 0.64rem;
  font-weight: 760;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey);
}
.ep-form { padding: clamp(2rem, 4vw, 3rem); }

/* Contact form — editorial underline fields */
.form { display: grid; gap: clamp(1.6rem, 3vw, 2.1rem); }
.form .field { display: grid; gap: 0.4rem; position: relative; }
.form label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.64rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 780;
  transition: color var(--fade) var(--ease);
}
.form .field:focus-within label { color: var(--accent); }
.form label .req { color: var(--accent); margin-left: 0.05rem; }
.form input, .form select, .form textarea {
  font: inherit;
  font-size: 1.02rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(11, 11, 11, 0.32);
  border-left: 4px solid var(--accent);
  background: var(--white);
  color: var(--ink);
  border-radius: 0;
  box-shadow: 0 10px 26px rgba(11, 11, 11, 0.12), 0 2px 6px rgba(11, 11, 11, 0.07);
  transition: border-color var(--fade) var(--ease), background var(--fade) var(--ease), box-shadow var(--fade) var(--ease);
}
.form ::placeholder { color: var(--grey-dim); opacity: 1; }
.form input:hover, .form select:hover, .form textarea:hover {
  border-color: var(--ink);
  border-left-color: var(--accent);
  box-shadow: var(--shadow-lift);
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none;
  border-color: var(--accent);
  border-left-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(11, 11, 11, 0.14), var(--shadow-soft);
}
/* animated red underline on focus */
.form .field::after {
  content: "";
  height: 2px;
  background: var(--accent);
  margin-top: -2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 450ms var(--ease);
  pointer-events: none;
}
.form .field:focus-within::after { transform: scaleX(1); }
/* program select with brand chevron */
.field--select::before {
  content: "";
  position: absolute;
  right: 0.3rem;
  bottom: 1.15rem;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  pointer-events: none;
}
.field--select select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding-right: 2.4rem;
  cursor: pointer;
}
.form textarea { min-height: 7.5rem; resize: vertical; }
/* native select: show the "Choose…" prompt muted until a real option is picked */
.field--select select:has(option[value=""]:checked) { color: var(--grey-dim); }
.form-grid { display: grid; gap: clamp(1.6rem, 3vw, 2.1rem); }
@media (min-width: 40em) { .form-grid { grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 3vw, 2.4rem); } }
/* footer row: reassurance left, action right */
.form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--hairline);
  padding-top: 1.5rem;
  margin-top: 0.2rem;
}
.form-foot p { margin: 0; }

/* ---------- CTA banner — full-bleed cinematic ---------- */
.cta-banner {
  position: relative;
  isolation: isolate;
  color: var(--white);
  overflow: hidden;
}
.cta-bg { position: absolute; inset: 0; z-index: -2; }
.cta-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.35) contrast(1.12) brightness(0.72);
}
/* dark vignette + red floor glow */
.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 70% at 50% 100%, rgba(11, 11, 11, 0.16) 0%, rgba(11, 11, 11, 0) 60%),
    radial-gradient(75% 95% at 50% 50%, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.86) 100%);
}
/* quiet grid over the photo */
.cta-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
}
.cta-banner .inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(4.2rem, 8.5vw, 6.8rem);
  display: grid;
  gap: 1.1rem;
  justify-items: center;
  text-align: center;
}
.cta-banner h2 { color: var(--white); }
.cta-banner h2 em { color: var(--accent); text-shadow: 0 0 40px rgba(11, 11, 11, 0.45); }
.cta-banner .lede { color: rgba(255, 255, 255, 0.85); margin-inline: auto; }
/* centered outlined watermark behind the copy */
.cta-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  font-size: clamp(6.5rem, 17vw, 14rem);
  font-weight: 900;
  font-stretch: 120%;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.08);
  pointer-events: none;
  white-space: nowrap;
}
.cta-note {
  font-size: 0.66rem;
  font-weight: 760;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 0.3rem;
}
.cta-banner .vf-corners { z-index: 2; }
.cta-banner .vf-geo { z-index: 2; }
@media (max-width: 40em) {
  .cta-banner .vf-geo { display: none; }
}

/* accent line, echoing the hero tagline */
.cta-script {
  font-family: var(--font);
  font-style: italic;
  font-weight: 560;
  font-size: clamp(0.98rem, 1.6vw, 1.15rem);
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.04em;
}
.cta-script em { font-style: italic; color: var(--accent); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--white); }
.footer-grid { display: grid; gap: 2rem; padding-block: clamp(2.4rem, 4.5vw, 3.6rem) 2rem; }
@media (min-width: 56em) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 3rem; } }
.site-footer h3 {
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 760;
  margin-bottom: 1.1rem;
}
.site-footer p, .site-footer a, .site-footer li { font-size: 0.9rem; color: rgba(255,255,255,0.75); line-height: 1.85; }
.site-footer a { transition: color var(--fade) var(--ease); }
.site-footer a:hover { color: var(--white); }
.footer-brand .brand-name { color: var(--white); }
.footer-brand .brand-sub { color: var(--accent); }
.footer-brand p { margin-top: 1.2rem; max-width: 24em; color: var(--grey); font-size: 0.88rem; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2rem;
  justify-content: space-between;
  padding-block: 1.4rem;
  border-top: 1px solid var(--hairline-light);
  font-size: 0.7rem;
  font-weight: 640;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-dim);
}

/* ---------- Stats bar ---------- */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--hairline);
  background: var(--white);
  box-shadow: var(--shadow-soft);
}
@media (min-width: 48em) { .stats-bar { grid-template-columns: repeat(4, 1fr); } }
.stat {
  padding: clamp(1.4rem, 2.5vw, 2.2rem) clamp(1rem, 2vw, 1.8rem);
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  text-align: center;
}
.stat:nth-child(2n) { border-right: 0; }
@media (min-width: 48em) {
  .stat { border-bottom: 0; }
  .stat:nth-child(2n) { border-right: 1px solid var(--hairline); }
  .stat:last-child { border-right: 0; }
}
.stat .value {
  display: block;
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  font-weight: 900;
  font-stretch: 120%;
  line-height: 1;
  color: var(--ink);
  text-transform: uppercase;
}
.stat .value em { font-style: normal; color: var(--accent); }
.stat .label {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.66rem;
  font-weight: 760;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grey-dim);
}

/* (marquee retired in the refinement pass) */

/* (Programs section uses the shared .program-list / .card components) */

/* ---------- First visit — numbered steps ---------- */
.steps { display: grid; gap: 1rem; counter-reset: step; }
@media (min-width: 48em) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-bottom: 4px solid var(--ink);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  box-shadow: var(--shadow-soft);
  position: relative;
  transition: transform var(--fade) var(--ease), box-shadow var(--fade) var(--ease), border-color var(--fade) var(--ease);
}
.step:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-bottom-color: var(--accent); }
.step .s-num {
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  background: var(--accent);
  color: var(--white);
  font-size: 0.95rem;
  font-weight: 900;
  font-stretch: 118%;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 100%, 8px 100%);
  margin-bottom: 1.1rem;
}
.step h3 { font-size: 1.05rem; margin-bottom: 0.55rem; }
.step p { font-size: 0.9rem; color: var(--grey-dim); line-height: 1.6; }

/* ---------- Three steps to the mats — cinematic flow ---------- */
.steps-cine { position: relative; overflow: hidden; }
.steps-cine::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(11, 11, 11, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 11, 11, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
}
.steps-cine .container { position: relative; }
/* bento steps grid */
.bento-flow {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 60em) {
  .bento-flow { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 14.5rem; }
  .bt-w2 { grid-column: span 2; }
}
.bt {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: var(--white);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-soft);
  transition: transform var(--fade) var(--ease), box-shadow var(--fade) var(--ease);
}
.bt:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift), 0 0 28px rgba(11, 11, 11, 0.1); }
.bt img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.12) contrast(1.09) saturate(1.05);
  transition: transform 700ms var(--ease), filter 700ms var(--ease);
}
.bt:hover img { transform: scale(1.05); filter: grayscale(0) contrast(1.1) saturate(1.08); }
.bt-photo { min-height: 15rem; }
.bt-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.12) 55%, rgba(0, 0, 0, 0.05) 100%);
}
.bt-body { position: relative; z-index: 2; padding: clamp(1.2rem, 2.4vw, 1.6rem); display: grid; gap: 0.4rem; width: 100%; }
.bt-photo .bt-body h3 { color: var(--white); }
.bt-photo .bt-body p { color: rgba(255, 255, 255, 0.82); }
.bt-body h3 { font-size: 1.2rem; }
.bt-body p { font-size: 0.88rem; color: var(--grey-dim); line-height: 1.55; max-width: 34em; }
.bt-num {
  position: absolute;
  top: 0.8rem;
  right: 1.1rem;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 3.8rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.85);
  transition: color var(--fade) var(--ease), -webkit-text-stroke-color var(--fade) var(--ease);
}
.bt:hover .bt-num { color: var(--accent); -webkit-text-stroke-color: var(--accent); }
.bt-dark {
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    radial-gradient(120% 120% at 0% 100%, rgba(11, 11, 11, 0.18) 0%, rgba(11, 11, 11, 0) 55%),
    #131313;
  background-size: 32px 32px, 32px 32px, auto, auto;
  border-color: rgba(255, 255, 255, 0.12);
  min-height: 12rem;
}
.bt-dark .bt-body h3 { color: var(--white); }
.bt-dark .bt-body p { color: var(--grey); }
.bt-dark .bt-num { -webkit-text-stroke-color: rgba(255, 255, 255, 0.45); }
.bt-cta {
  background: var(--accent);
  border-color: var(--accent);
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem 1.4rem;
  padding: clamp(1.2rem, 2.4vw, 1.6rem);
  box-shadow: var(--glow-red);
  min-height: 10rem;
}
.bt-cta .bt-body { width: auto; flex: 1; min-width: 14rem; padding: 0; }
.bt-cta .bt-body h3 { color: var(--white); }
.bt-cta .bt-body p { color: rgba(255, 255, 255, 0.88); }
.bt-cta .btn { flex: none; }
.bt-cta:hover { box-shadow: var(--glow-red), var(--shadow-lift); }
.sf-tag {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ("The Walk-In" concept retired — styles kept inert below) */
.saga {
  background:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    radial-gradient(80% 50% at 50% 100%, rgba(11, 11, 11, 0.14) 0%, rgba(11, 11, 11, 0) 60%),
    #121212;
  background-size: 64px 64px, 64px 64px, auto, auto;
  color: var(--white);
  overflow: hidden;
}
.saga .eyebrow { color: var(--white); }
.saga-head { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.saga-head h2 { color: var(--white); }

.saga-track {
  position: relative;
  display: grid;
  gap: clamp(4rem, 9vw, 7rem);
}
/* the red spine that draws itself down the journey */
.saga-spine {
  position: absolute;
  left: 50%;
  top: -1rem;
  bottom: 4rem;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent), rgba(11, 11, 11, 0.1));
  box-shadow: 0 0 16px rgba(11, 11, 11, 0.5);
  transform-origin: top;
}
@media (max-width: 59.99em) { .saga-spine { left: 0.4rem; } }

.act {
  position: relative;
  display: grid;
  gap: clamp(1.6rem, 3vw, 3rem);
  align-items: center;
  grid-template-areas: "media" "copy";
}
@media (min-width: 60em) {
  .act { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "copy media"; }
  .act--flip { grid-template-areas: "media copy"; }
  .act--flip .act-copy { justify-self: end; text-align: right; }
  .act--flip .act-kicker { flex-direction: row-reverse; }
}
/* colossal background numeral */
.act-num {
  position: absolute;
  top: 50%;
  transform: translateY(-58%);
  right: -0.06em;
  z-index: 0;
  font-family: var(--font-display);
  font-size: clamp(9rem, 26vw, 20rem);
  line-height: 1;
  letter-spacing: 0;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.1);
  pointer-events: none;
  transition: -webkit-text-stroke-color var(--fade) var(--ease), color var(--fade) var(--ease);
}
.act--flip .act-num { right: auto; left: -0.06em; }
.act--final .act-num { left: 50%; right: auto; transform: translate(-50%, -58%); }
.act:hover .act-num { -webkit-text-stroke-color: rgba(11, 11, 11, 0.45); color: rgba(11, 11, 11, 0.05); }

.act-copy { grid-area: copy; position: relative; z-index: 2; display: grid; gap: 1rem; max-width: 30em; }
.act-kicker {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
}
.act-kicker::before {
  content: "";
  width: 2rem;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(11, 11, 11, 0.7);
}
.act-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.02em;
  color: #f3f1ec;
}
.act-title em { font-style: normal; color: var(--accent); }
.act-title--xl { font-size: clamp(3.2rem, 8vw, 6rem); }
.act-text { font-size: 0.96rem; color: var(--grey); line-height: 1.65; }

/* raw tilted photograph — no card chrome */
.act-media {
  grid-area: media;
  position: relative;
  z-index: 1;
  width: min(26rem, 100%);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  justify-self: end;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 36px 80px rgba(0, 0, 0, 0.6);
  transform: rotate(1.6deg);
  transition: transform 600ms var(--ease), box-shadow 600ms var(--ease);
}
.act--flip .act-media { justify-self: start; transform: rotate(-1.6deg); }
.act:hover .act-media { transform: rotate(0deg); box-shadow: 0 36px 90px rgba(0, 0, 0, 0.65), 0 0 40px rgba(11, 11, 11, 0.18); }
/* red corner bracket */
.act-media::before {
  content: "";
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  width: 1.6rem;
  height: 1.6rem;
  border-top: 3px solid var(--accent);
  border-left: 3px solid var(--accent);
  z-index: 2;
  filter: drop-shadow(0 0 8px rgba(11, 11, 11, 0.6));
}
.act-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.3) contrast(1.12) brightness(0.9);
  transition: filter 600ms var(--ease);
}
.act:hover .act-media img { filter: grayscale(0) contrast(1.1) brightness(0.98); }

/* act three — the climax */
.act--final { grid-template-columns: 1fr; grid-template-areas: "media" "copy"; justify-items: center; text-align: center; }
.act-media--wide {
  width: 100%;
  aspect-ratio: 21 / 8;
  transform: rotate(0deg);
  justify-self: center;
}
.act-media--wide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(17, 17, 17, 0.85) 0%, rgba(17, 17, 17, 0.1) 50%);
}
.act-copy--center { justify-items: center; margin-top: -3.5rem; z-index: 2; max-width: 36em; }
.act--final:hover .act-media--wide { transform: rotate(0deg); }
.act--final .cta-note { color: var(--grey); }

/* scroll-driven storytelling for the saga */
@supports (animation-timeline: view()) {
  .saga-spine {
    animation: spine-grow linear both;
    animation-timeline: view();
    animation-range: entry 10% exit 70%;
  }
  @keyframes spine-grow {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
  }
  .act .act-num {
    animation: num-drift linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  @keyframes num-drift {
    from { transform: translateY(-46%); }
    to { transform: translateY(-70%); }
  }
  .act--final .act-num {
    animation-name: num-drift-center;
  }
  @keyframes num-drift-center {
    from { transform: translate(-50%, -46%); }
    to { transform: translate(-50%, -70%); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .saga-spine, .act .act-num { animation: none; }
}

/* ---------- FAQ ---------- */
.faq-grid { display: grid; gap: clamp(1.8rem, 4vw, 4rem); align-items: start; }
@media (min-width: 60em) {
  .faq-grid { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.5fr); }
  .faq-intro { position: sticky; top: 7rem; }
}
.faq-intro { display: grid; gap: 1rem; }
.faq { display: grid; gap: 0.9rem; }
.faq details {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--ink);
  box-shadow: var(--shadow-soft);
  transition: border-color var(--fade) var(--ease);
}
.faq details[open] { border-left-color: var(--accent); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent);
  transition: transform var(--fade) var(--ease);
  flex: none;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-a { padding: 0 1.4rem 1.3rem; font-size: 0.92rem; color: var(--grey-dim); line-height: 1.65; max-width: 60ch; }

/* ---------- Auto section numbering ---------- */
body { counter-reset: sec; }
.section-head .eyebrow { counter-increment: sec; }
.section-head .eyebrow::after {
  content: "/ " counter(sec, decimal-leading-zero);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--grey);
  margin-left: 0.2rem;
}

/* ---------- CTA shine sweep ---------- */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
  transform: skewX(-20deg);
  transition: left 600ms var(--ease);
  pointer-events: none;
}
.btn:hover::after { left: 130%; }

/* ---------- Benefits grid (icon cards) ---------- */
.benefits {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 44em) { .benefits { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .benefits { grid-template-columns: repeat(3, 1fr); } }
.benefit {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: clamp(1.3rem, 2.4vw, 1.8rem);
  border: 1px solid var(--hairline-light);
  background: rgba(255, 255, 255, 0.03);
  transition: border-color var(--fade) var(--ease), background var(--fade) var(--ease), transform var(--fade) var(--ease);
}
.benefit:hover { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.05); transform: translateY(-4px); }
.benefit .f-icon {
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(11, 11, 11, 0.12);
}
.benefit .f-icon svg { width: 1.1rem; height: 1.1rem; stroke: var(--white); fill: none; stroke-width: 1.6; }
.benefit h3 { font-size: 0.95rem; color: var(--white); margin-bottom: 0.35rem; }
.benefit p { font-size: 0.85rem; color: var(--grey); line-height: 1.55; }

/* ---------- Philosophy mini-list ---------- */
.philo-list { display: grid; gap: 0; border-top: 1px solid var(--hairline); }
.philo-item {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: 1rem 0.2rem;
  border-bottom: 1px solid var(--hairline);
}
.philo-item .p-num {
  font-size: 1.1rem;
  font-weight: 900;
  font-stretch: 120%;
  color: var(--accent);
}
.philo-item h3 { font-size: 1rem; margin-bottom: 0.25rem; }
.philo-item p { font-size: 0.88rem; color: var(--grey-dim); line-height: 1.55; }

/* ---------- Facility feature chips ---------- */
.feat-chips {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: 1fr;
  margin-top: clamp(1.5rem, 3vw, 2.2rem);
}
@media (min-width: 40em) { .feat-chips { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56em) { .feat-chips { grid-template-columns: repeat(4, 1fr); } }
.feat-chip {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--hairline-light);
  background: rgba(255, 255, 255, 0.03);
  transition: border-color var(--fade) var(--ease), background var(--fade) var(--ease);
}
.feat-chip:hover { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.06); }
.feat-chip .f-icon {
  flex: none;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.feat-chip .f-icon svg { width: 1rem; height: 1rem; stroke: var(--white); fill: none; stroke-width: 1.6; }
.feat-chip span:last-child {
  font-size: 0.66rem;
  font-weight: 760;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
}

/* ---------- Free trial booking modal ---------- */
.modal-root {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal-root.open { display: flex; }
.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(14, 14, 14, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.modal-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
  background-size: 64px 64px;
}
.modal-panel {
  position: relative;
  width: min(100%, 36rem);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  background: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6), 0 0 60px rgba(11, 11, 11, 0.18);
  animation: modal-rise 450ms var(--ease) both;
}
@media (min-width: 48em) {
  .modal-panel {
    width: min(100%, 50rem);
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    overflow: hidden;
  }
  .modal-main { overflow-y: auto; max-height: calc(100vh - 2rem); }
}
@keyframes modal-rise {
  from { opacity: 0; transform: translateY(34px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
/* photo side panel */
.modal-side { position: relative; display: none; background: #131313; overflow: hidden; }
@media (min-width: 48em) { .modal-side { display: block; } }
.modal-side img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.3) contrast(1.12) brightness(0.78);
}
.modal-side::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(16, 16, 16, 0.92) 0%, rgba(16, 16, 16, 0.15) 50%, rgba(16, 16, 16, 0.4) 100%),
    radial-gradient(100% 60% at 50% 100%, rgba(11, 11, 11, 0.22) 0%, rgba(11, 11, 11, 0) 60%);
}
.modal-side .vf-corners { inset: 0.8rem; z-index: 2; }
.ms-tag {
  position: absolute;
  top: 1.2rem;
  left: 1.3rem;
  z-index: 2;
  font-size: 0.56rem;
  font-weight: 760;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.ms-word {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  z-index: 2;
  font-family: var(--font-display);
  font-size: 5.5rem;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.22);
  pointer-events: none;
}
.ms-foot {
  position: absolute;
  left: 1.3rem;
  right: 1.3rem;
  bottom: 1.2rem;
  z-index: 2;
  display: grid;
  gap: 0.45rem;
}
.ms-script {
  font-family: var(--font);
  font-style: italic;
  font-weight: 560;
  font-size: 0.95rem;
  color: var(--white);
}
.ms-script em { font-style: italic; color: var(--accent); }
.ms-rating {
  font-size: 0.6rem;
  font-weight: 760;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.modal-head {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.2rem) clamp(1.6rem, 3vw, 2.4rem);
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    radial-gradient(120% 120% at 0% 0%, rgba(11, 11, 11, 0.2) 0%, rgba(11, 11, 11, 0) 55%),
    #131313;
  background-size: 32px 32px, 32px 32px, auto, auto;
  color: var(--white);
  display: grid;
  gap: 0.5rem;
}
.modal-head::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(11, 11, 11, 0.2) 70%, transparent 100%);
}
.modal-head .eyebrow { color: var(--white); }
.modal-head h3 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--white);
}
.modal-head h3 em { font-style: normal; color: var(--accent); }
.modal-head p { font-size: 0.88rem; color: rgba(255, 255, 255, 0.72); }
.modal-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--white);
  font-size: 1.1rem;
  line-height: 1;
  transition: background var(--fade) var(--ease), border-color var(--fade) var(--ease);
}
.modal-close:hover { background: var(--accent); border-color: var(--accent); }
.modal-body { padding: clamp(1.6rem, 3vw, 2.2rem) clamp(1.6rem, 3vw, 2.4rem); }
.modal-body .form { gap: 1.3rem; }
/* program selector — radio cards */
.prog-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.64rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 780;
}
.prog-label::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  background: var(--accent);
  transform: rotate(45deg);
  flex: none;
}
.prog-grid { display: grid; gap: 0.55rem; grid-template-columns: 1fr; }
@media (min-width: 34em) { .prog-grid { grid-template-columns: repeat(2, 1fr); } }
.prog-card {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--hairline-strong);
  border-left: 3px solid var(--accent);
  background: var(--paper);
  padding: 0.75rem 0.9rem;
  font-size: 0.68rem;
  font-weight: 760;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.45;
  cursor: pointer;
  transition: all var(--fade) var(--ease);
}
.prog-card:hover {
  border-color: var(--accent);
  background: rgba(11, 11, 11, 0.06);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(11, 11, 11, 0.15);
}
.prog-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.prog-card:has(input:checked) {
  background: var(--ink);
  border-color: var(--ink);
  border-left-color: var(--accent);
  color: var(--white);
  box-shadow: var(--shadow-soft);
}
.prog-card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.modal-head .vf-corners { inset: 0.7rem; opacity: 0.5; }
/* staggered entrance for head + form */
.modal-root.open .modal-head > .eyebrow,
.modal-root.open .modal-head > h3,
.modal-root.open .modal-head > p {
  animation: hero-rise 550ms var(--ease) both;
}
.modal-root.open .modal-head > h3 { animation-delay: 90ms; }
.modal-root.open .modal-head > p { animation-delay: 180ms; }
.modal-root.open .modal-body { animation: hero-rise 550ms var(--ease) 240ms both; }
/* selected program card punches */
.prog-card:has(input:checked) { animation: prog-punch 260ms var(--ease); }
@keyframes prog-punch {
  0% { transform: scale(0.96); }
  60% { transform: scale(1.025); }
  100% { transform: scale(1); }
}
.modal-body .btn { width: 100%; animation: btn-pulse 2.6s ease-in-out infinite; }
@keyframes btn-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(11, 11, 11, 0); }
  50% { box-shadow: 0 6px 26px rgba(11, 11, 11, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
  .modal-body .btn, .prog-card:has(input:checked) { animation: none; }
  .modal-root.open .modal-head > *, .modal-root.open .modal-body { animation: none; }
}
.modal-note {
  margin-top: 0.9rem;
  text-align: center;
  font-size: 0.74rem;
  color: var(--grey-dim);
}
/* honeypot — visually removed, still in the DOM for bots */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.form-alert {
  margin-top: 0.7rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.form-alert a { color: inherit; border-bottom: 1px solid currentColor; }
/* inline success state shown after a lead form (contact / kids camp) submits */
.form-success {
  border: 1px solid var(--hairline-strong);
  border-top: 3px solid var(--accent);
  background: var(--white);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.6rem, 4vw, 2.6rem);
  text-align: center;
}
.form-success h3 { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 0.5rem; }
.form-success p { color: var(--grey-dim); max-width: 30rem; margin-inline: auto; }
.form-success a { color: var(--accent); border-bottom: 1px solid currentColor; }
/* success state */
.modal-success {
  display: grid;
  gap: 0.9rem;
  justify-items: center;
  text-align: center;
  padding: 1.5rem 0 0.5rem;
}
.modal-success .ms-stars { color: var(--accent); letter-spacing: 0.3em; }
.modal-success h4 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--ink);
}
.modal-success p { font-size: 0.9rem; color: var(--grey-dim); max-width: 26rem; }
body.modal-open { overflow: hidden; }

/* ---------- Modal v2 — full-dark cinematic panel, two-step flow ---------- */
.modal-panel--dark {
  width: min(100%, 42rem);
  background: #131313;
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: block;
  overflow-y: auto;
}
.modal-panel--dark::before {
  content: "";
  position: sticky;
  top: 0;
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(11, 11, 11, 0.2) 70%, transparent 100%);
  z-index: 5;
}
/* faint training photo behind everything */
.modal-bg { position: absolute; inset: 0; pointer-events: none; }
.modal-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.5) contrast(1.1) brightness(0.5);
  opacity: 0.1;
}
/* clean dark wash, no grid — keeps the form perfectly readable */
.modal-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(19, 19, 19, 0.86) 0%, rgba(19, 19, 19, 0.95) 52%, rgba(19, 19, 19, 0.99) 100%);
}
.modal-panel--dark .vf-corners { inset: 0.85rem; z-index: 3; opacity: 0.7; }
.modal-word {
  position: absolute;
  right: -0.06em;
  bottom: -0.16em;
  font-family: var(--font-display);
  font-size: clamp(5rem, 14vw, 8rem);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.08);
  pointer-events: none;
  z-index: 1;
}
.modal-inner { position: relative; z-index: 2; padding: clamp(1.8rem, 4vw, 2.6rem); display: grid; gap: 1.4rem; }
.modal-panel--dark .modal-head { background: none; padding: 0; }
.modal-panel--dark .modal-head::after { display: none; }
.modal-panel--dark .modal-body { padding: 0; }
.modal-panel--dark .modal-close { z-index: 6; }
/* step labels */
.step-tag {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
  font-size: 0.66rem;
  font-weight: 780;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.step-tag span:first-child {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  background: var(--accent);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  box-shadow: 0 0 14px rgba(11, 11, 11, 0.5);
}
.step-tag .req { color: var(--accent); }
/* dark form fields */
.modal-panel--dark .form label { color: rgba(255, 255, 255, 0.9); }
.modal-panel--dark .form .field:focus-within label { color: var(--white); }
/* white fields throughout the modal, matching the class dropdown */
.modal-panel--dark .form input {
  background: var(--white);
  color: var(--ink);
  border: 1px solid rgba(11, 11, 11, 0.32);
  border-left: 4px solid var(--accent);
}
.modal-panel--dark .form input:hover { border-color: var(--ink); border-left-color: var(--accent); }
.modal-panel--dark .form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(11, 11, 11, 0.14), var(--shadow-soft);
}
.modal-panel--dark .form ::placeholder { color: var(--grey-dim); }
/* dark program cards */
.modal-panel--dark .prog-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.16);
  border-left-color: var(--accent);
  color: rgba(255, 255, 255, 0.85);
}
.modal-panel--dark .prog-card:hover {
  background: rgba(11, 11, 11, 0.14);
  border-color: rgba(11, 11, 11, 0.6);
  color: var(--white);
}
.modal-panel--dark .prog-card:has(input:checked) {
  background: var(--accent);
  border-color: var(--accent);
  border-left-color: var(--white);
  color: var(--white);
  box-shadow: 0 6px 24px rgba(11, 11, 11, 0.45);
}
.modal-panel--dark .modal-note { color: var(--grey); }
.modal-panel--dark .modal-success h4 { color: var(--white); }
.modal-panel--dark .modal-success p { color: var(--grey); }

/* ---------- Booking page ---------- */
.book-hero { min-height: clamp(15rem, 36svh, 20rem); }
.book-alert {
  background: var(--accent);
  color: var(--white);
  box-shadow: 0 10px 36px rgba(11, 11, 11, 0.35);
  position: relative;
  z-index: 5;
}
.ba-inner {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-block: 0.95rem;
}
.ba-dot {
  flex: none;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--white);
  animation: ba-pulse 1.4s ease-in-out infinite;
}
@keyframes ba-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); }
  50% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
}
.book-alert p {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.book-alert strong { font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; }

/* progress indicator */
.book-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2.2rem;
  list-style: none;
}
.book-progress li {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.7rem;
  font-weight: 780;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey);
}
.book-progress li span {
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border: 1.5px solid var(--hairline-strong);
  font-weight: 900;
}
.book-progress li.active { color: var(--ink); }
.book-progress li.active span { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 14px rgba(11, 11, 11, 0.3); }
.book-progress li.done { color: var(--ink); }
.book-progress li.done span { background: var(--accent); border-color: var(--accent); color: var(--white); }

/* program selector cards */
.prog-select { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 44em) { .prog-select { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .prog-select { grid-template-columns: repeat(3, 1fr); } }
.ps-card {
  position: relative;
  display: block;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--hairline-strong);
  border-left: 4px solid var(--accent);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  cursor: pointer;
  padding: 1.3rem 3rem 1.4rem 1.4rem;
  transition: transform var(--fade) var(--ease), box-shadow var(--fade) var(--ease), border-color var(--fade) var(--ease), background var(--fade) var(--ease);
}
.ps-card:hover {
  transform: translateY(-4px);
  background: rgba(11, 11, 11, 0.05);
  border-color: var(--accent);
  box-shadow: var(--shadow-lift), 0 0 22px rgba(11, 11, 11, 0.15);
}
/* big outlined index numeral */
.ps-num {
  position: absolute;
  top: -0.4rem;
  right: 0.6rem;
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: 1.1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(11, 11, 11, 0.16);
  pointer-events: none;
  transition: -webkit-text-stroke-color var(--fade) var(--ease), color var(--fade) var(--ease);
}
.ps-card:hover .ps-num { -webkit-text-stroke-color: rgba(11, 11, 11, 0.5); }
.ps-body { display: grid; gap: 0.35rem; }
.ps-name {
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color var(--fade) var(--ease);
}
.ps-desc { font-size: 0.82rem; color: var(--grey-dim); line-height: 1.5; transition: color var(--fade) var(--ease); }
.ps-check {
  position: absolute;
  bottom: 0.9rem;
  right: 0.9rem;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 900;
  box-shadow: 0 0 16px rgba(11, 11, 11, 0.6);
  opacity: 0;
  transform: scale(0.6) rotate(-12deg);
  transition: opacity var(--fade) var(--ease), transform var(--fade) var(--ease);
}
/* selected — slams to the dark stage */
.ps-card[aria-pressed="true"] {
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(11, 11, 11, 0.22) 0%, rgba(11, 11, 11, 0) 55%),
    #131313;
  border-color: var(--accent);
  box-shadow: var(--shadow-lift), 0 0 30px rgba(11, 11, 11, 0.3);
  animation: prog-punch 260ms var(--ease);
}
.ps-card[aria-pressed="true"] .ps-name { color: var(--white); }
.ps-card[aria-pressed="true"] .ps-desc { color: var(--grey); }
.ps-card[aria-pressed="true"] .ps-num { -webkit-text-stroke-color: rgba(11, 11, 11, 0.7); color: rgba(11, 11, 11, 0.08); }
.ps-card[aria-pressed="true"] .ps-check { opacity: 1; transform: scale(1) rotate(0deg); }

/* calendar container */
.cal-wrap { display: grid; gap: 1.4rem; }
.cal-shell {
  position: relative;
  width: min(100%, 62rem);
  margin-inline: auto;
  background: var(--white);
  border: 1px solid var(--hairline-strong);
  border-top: 3px solid var(--accent);
  box-shadow: var(--shadow-lift), 0 0 40px rgba(11, 11, 11, 0.1);
  padding: clamp(0.6rem, 1.5vw, 1.2rem);
}
.cal-shell iframe {
  display: block;
  width: 100%;
  /* Fallback height only — GHL's form_embed.js (iframe-resizer) overrides this
     with the widget's real content height so the page scrolls to the time
     slots and contact form. Kept generous so the flow is reachable even if
     that script is slow/blocked. */
  height: 1200px;
  border: 0;
  background: var(--white);
}
@media (max-width: 44em) { .cal-shell iframe { height: 1850px; } }
.cal-note {
  text-align: center;
  font-size: 0.82rem;
  color: var(--grey-dim);
}
.cal-note a { border-bottom: 1px solid currentColor; }
.cal-wait { text-align: center; padding: clamp(1.5rem, 4vw, 3rem) 0; }

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 750ms var(--ease), transform 750ms var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* editorial image reveal — a slow wipe as the image enters */
.reveal.is-visible .frame:not(.parallax) img,
.frame.reveal.is-visible:not(.parallax) img {
  animation: img-wipe 1100ms var(--ease) 120ms backwards;
}
@keyframes img-wipe {
  from { clip-path: inset(0 100% 0 0); transform: scale(1.08); }
  to { clip-path: inset(0 0 0 0); transform: scale(1); }
}

/* accent line draws itself in */
.reveal .eyebrow::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 700ms var(--ease) 250ms;
}
.reveal.is-visible .eyebrow::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-media img { animation: none; }
  .reveal.is-visible .frame:not(.parallax) img,
  .frame.reveal.is-visible:not(.parallax) img { animation: none; }
  .reveal .eyebrow::before { transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Utilities ---------- */
.stack-sm > * + * { margin-top: 0.75rem; }
.stack-md > * + * { margin-top: 1.2rem; }
.mt-1 { margin-top: 0.9rem; }
.mt-2 { margin-top: 1.5rem; }
.mt-3 { margin-top: 2.2rem; }
.center { text-align: center; }
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: var(--white);
  padding: 0.6rem 1rem;
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* clear the floating navbar at the top of every page */
.hero-dark { padding-top: clamp(6rem, 11vw, 7.5rem); }
body.menu-open { overflow: hidden; }

/* ---------- Mobile optimization ---------- */
/* full-bleed elements (marquee, diagonals) must never cause sideways scroll */
html, body { overflow-x: clip; }

@media (max-width: 40em) {
  /* full-width, easy-tap CTA buttons */
  .hero-actions { width: 100%; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  /* Get Directions button aligns under the heading, not floated right */
  .section-head--split > .btn { justify-self: start !important; }
  /* tighter panel paddings on small screens */
  .visit-info, .ep-info, .ep-form { padding: 1.4rem 1.2rem; }
  /* stack the arrival strip vertically on phones */
  .visit-strip {
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem 1.1rem 1.2rem;
    gap: 0.9rem;
  }
  .visit-strip .vs-thumb { width: 100%; height: 10rem; }
  .visit-strip p { min-width: 0; width: 100%; }
  /* review cards sized for one comfortable card per view */
  .rev-card { width: 82vw; }
  /* timetable rows breathe less on phones */
  .class-card { padding: 0.9rem 1rem; }
  .day-head { padding: 0.8rem 1rem; }
  /* event card meta wraps cleanly */
  .ev-copy { padding: 1.4rem 1.2rem; }
}

/* ==========================================================================
   Scroll-driven animation layer (CSS scroll timelines)
   Elements scrub with the scroll position and reverse on scroll-up.
   Browsers without support gracefully keep the standard reveal system.
   ========================================================================== */
@supports (animation-timeline: view()) {

  /* reading progress bar */
  html::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 200;
    background: var(--accent);
    box-shadow: 0 0 12px rgba(11, 11, 11, 0.7);
    transform-origin: left;
    transform: scaleX(0);
    animation: scrub-progress linear both;
    animation-timeline: scroll();
  }
  @keyframes scrub-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }

  /* every reveal element rises in sync with scroll */
  .reveal {
    transition: none;
    animation: scrub-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 65%;
  }
  @keyframes scrub-rise {
    from { opacity: 0; transform: translateY(56px); }
    to { opacity: 1; transform: none; }
  }

  /* section headings sweep in from the left */
  .section-head.reveal {
    animation-name: scrub-head;
  }
  @keyframes scrub-head {
    from { opacity: 0; transform: translateX(-56px); }
    to { opacity: 1; transform: none; }
  }

  /* cinematic depth: large imagery drifts as it crosses the viewport */
  .cta-bg img {
    animation: scrub-depth linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  .viewfinder img, .ev-photo img {
    animation: scrub-depth-soft linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  @keyframes scrub-depth {
    from { transform: scale(1.16) translateY(-3.5%); }
    to { transform: scale(1.16) translateY(3.5%); }
  }
  @keyframes scrub-depth-soft {
    from { transform: scale(1.1) translateY(-2.5%); }
    to { transform: scale(1.1) translateY(2.5%); }
  }

  /* watermark words slide against the scroll for parallax depth */
  .cta-mark {
    animation: scrub-mark linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  @keyframes scrub-mark {
    from { transform: translate(-44%, -50%); }
    to { transform: translate(-56%, -50%); }
  }
  .page-intro::after {
    animation: scrub-word linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  @keyframes scrub-word {
    from { transform: translateX(3%); }
    to { transform: translateX(-3%); }
  }
}

@media (prefers-reduced-motion: reduce) {
  html::before { animation: none; transform: scaleX(0); }
  .reveal { animation: none; opacity: 1; transform: none; }
  .cta-bg img, .viewfinder img, .ev-photo img { animation: none; transform: none; }
  .cta-mark { animation: none; transform: translate(-50%, -50%); }
  .page-intro::after { animation: none; transform: none; }
}

/* ==========================================================================
   MONOCHROME LOCKDOWN — brass is reserved for buttons only; all else B/W/grey
   ========================================================================== */
/* emphasis words inherit their heading colour, no accent tint */
.display em, .h-xl em, .h-lg em, .h-md em,
h1 em, h2 em, h3 em, h4 em,
.hd-script em, .act-title em, .page-intro h1 em,
.cta-banner h2 em, .cta-script em,
.modal-head h3 em, .ms-script em,
.stat .value em { color: inherit; text-shadow: inherit; }

/* solid number / status badges: crisp ink on light surfaces */
.step .s-num, .chip[aria-pressed="true"], .book-progress li.done span,
.ps-check, .ev-date {
  background: var(--ink); border-color: var(--ink); color: var(--white); box-shadow: none;
}
/* step badge sits on the dark booking modal, keep it light not ink */
.step-tag span:first-child { background: var(--white); color: var(--ink); box-shadow: none; }

/* rating stars: ink on light, white on dark */
.rev-card .stars, .rev-score .stars, .modal-success .ms-stars { color: var(--ink); }
.on-dark .stars, .ep-rating .stars, .ms-rating { color: rgba(255, 255, 255, 0.92); }

/* selected program card inside the dark modal stays legible */
.modal-panel--dark .prog-card:has(input:checked) {
  background: var(--white); border-color: var(--white); color: var(--ink);
}

/* booking alert bar: monochrome */
.book-alert { background: var(--ink); color: var(--white); }