/* ==========================================================================
   D Planet — modules: home stage, programme reel, filmstrip, lightbox,
   hours, programme directory, audience cards, reviews, branches, forms, map,
   YouTube player, programme pages, instructors
   ========================================================================== */

/* ==========================================================================
   Home stage
   A dark stage: two follow-spots sweeping from the rig, the ink-smoke layers
   glowing through a screen blend, a ringed "planet" orbit taken from the
   logo, and the dancer rim-lit in cyan and magenta.
   ========================================================================== */
.stage {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--header-h) + 2rem) 0 6.5rem;
  overflow: hidden;
}

.stage__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(40vw 40vw at 72% 58%, rgba(255, 61, 200, .16), transparent 70%),
    radial-gradient(35vw 35vw at 58% 40%, rgba(58, 215, 255, .12), transparent 70%),
    radial-gradient(60vw 40vw at 0% 0%, rgba(138, 92, 255, .10), transparent 70%);
}
/* Faint perspective floor lines the dancer stands on */
.stage__bg::after {
  content: '';
  position: absolute;
  left: -50%; right: -50%; bottom: 0;
  height: 42%;
  background:
    repeating-linear-gradient(90deg, rgba(58, 215, 255, .14) 0 1px, transparent 1px 7vw),
    repeating-linear-gradient(0deg, rgba(255, 61, 200, .12) 0 1px, transparent 1px 3.2rem);
  transform: perspective(600px) rotateX(62deg);
  transform-origin: bottom;
  -webkit-mask: linear-gradient(0deg, rgba(0, 0, 0, .9), transparent 80%);
          mask: linear-gradient(0deg, rgba(0, 0, 0, .9), transparent 80%);
}

/* Follow-spots */
.stage__beam {
  position: absolute;
  top: -12%;
  z-index: -2;
  width: 46vw;
  height: 135%;
  transform-origin: 50% 0;
  mix-blend-mode: screen;
  pointer-events: none;
  clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%);
  opacity: 0;
}
.stage__beam--cyan {
  left: 30%;
  background: linear-gradient(180deg, rgba(58, 215, 255, .5), rgba(58, 215, 255, .06) 60%, transparent 85%);
  --from: -24deg; --to: -6deg;
}
.stage__beam--magenta {
  left: 55%;
  background: linear-gradient(180deg, rgba(255, 61, 200, .55), rgba(255, 61, 200, .06) 60%, transparent 85%);
  --from: 22deg; --to: 4deg;
}
.stage__beam { transform: rotate(var(--from)); }
.is-loaded .stage__beam {
  animation: beamOn 1400ms var(--ease-out) 150ms forwards, beamSway 9s ease-in-out 1500ms infinite alternate;
}
.is-loaded .stage__beam--magenta { animation-delay: 350ms, 1800ms; }

/* The scene: smoke, orbit and dancer, positioned as one block on the right.
   Three owners of `transform`, one per level, so nothing fights: GSAP moves
   the scene on scroll, reveal.js moves each [data-depth] layer with the
   pointer, and CSS animates the image inside each layer on the way in. */
.stage__scene {
  position: absolute;
  right: -2%;
  bottom: 0;
  z-index: -1;
  width: min(64vw, 62rem);
  height: 92%;
}
.stage__layer {
  position: absolute;
  will-change: transform;
}
.stage__layer img { display: block; width: 100%; height: auto; }

.stage__smoke { mix-blend-mode: screen; }
.stage__smoke img { opacity: 0; }
.stage__smoke--back {
  left: -18%;
  top: 18%;
  width: 118%;
  z-index: 0;
}
.stage__smoke--back img { filter: hue-rotate(55deg) saturate(1.6) brightness(.85); }
.stage__smoke--front {
  left: -6%;
  top: 46%;
  width: 104%;
  z-index: 4;
}
.stage__smoke--front img { filter: saturate(1.4) brightness(.8); --o: .7; }
.is-loaded .stage__smoke--back img  { animation: smokeIn 2400ms var(--ease-out) 200ms forwards; }
.is-loaded .stage__smoke--front img { animation: smokeIn 2400ms var(--ease-out) 450ms forwards; }

/* Dancer, rim-lit: cyan from the left, magenta from the right */
.stage__dancer {
  right: 12%;
  bottom: 2%;
  width: min(44%, 27rem);
  z-index: 2;
}
.stage__dancer img {
  opacity: 0;
  filter:
    drop-shadow(-6px 0 14px rgba(58, 215, 255, .55))
    drop-shadow(8px 0 22px rgba(255, 61, 200, .5))
    contrast(1.05);
}
.is-loaded .stage__dancer img { animation: dancerIn 1800ms var(--ease-out) 350ms forwards; }

/* A pool of light on the floor under her feet */
.stage__pool {
  position: absolute;
  right: 6%;
  bottom: -4%;
  width: 60%;
  height: 16%;
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .22), rgba(255, 61, 200, .22) 40%, rgba(58, 215, 255, .12) 65%, transparent);
  filter: blur(6px);
  opacity: 0;
}
.is-loaded .stage__pool { animation: fadeIn 1600ms ease 800ms forwards; }

/* The orbit — the ring from the D Planet logo, circling the dancer. The back
   half passes behind her and the front half in front. */
.stage__orbit-wrap { inset: 0; z-index: 1; pointer-events: none; }
.stage__orbit-wrap--front { z-index: 3; }
.stage__orbit {
  position: absolute;
  left: 64%;
  top: 60%;
  width: 78%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(-14deg) scaleY(.26);
}
/* Only the near half of the front copy shows, so the ring passes in front of
   the dancer below her waist and behind her above it. Negative insets keep
   the glow from being shaved off at the sides. */
.stage__orbit--front { clip-path: inset(50% -25% -25% -25%); }
.stage__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(160, 240, 255, .9);
  box-shadow: 0 0 14px rgba(58, 215, 255, .9), 0 0 40px rgba(58, 215, 255, .5), inset 0 0 14px rgba(58, 215, 255, .8);
  opacity: 0;
}
.stage__ring::after {
  content: '';
  position: absolute;
  top: -9px;
  left: calc(50% - 9px);
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 16px var(--magenta), 0 0 36px var(--magenta), 0 0 60px var(--magenta);
}
.is-loaded .stage__ring { animation: ringOn 1200ms ease 900ms forwards, spin 14s linear 900ms infinite; }

/* Copy */
.stage__copy {
  position: relative;
  z-index: 2;
}
.stage__eyebrow { --d: 150ms; }
.stage__title {
  margin: 0;
  font-size: clamp(2.5rem, 7vw, 7.5rem);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.055em;
  text-transform: uppercase;
}
.stage__title .line { display: block; width: max-content; max-width: 100%; }
.stage__title em {
  display: inline-block;
  margin-right: .5rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: .38em;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: .9em;
  color: var(--magenta);
  text-shadow: 0 0 18px rgba(255, 61, 200, .6);
}
.stage__title .stage__outline {
  font-family: var(--font-outline);
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px var(--cyan);
  filter: drop-shadow(0 0 12px rgba(58, 215, 255, .6));
}
.is-loaded .stage__title .stage__outline { animation: lineUp 1200ms var(--ease-out) 340ms forwards, neonFlickerSoft 2600ms linear 1400ms 1; }
.stage__title .stage__fill {
  background: var(--neon);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stage__tail {
  display: block;
  margin-top: 1.25rem;
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.6vw, 1.375rem);
  font-weight: 300;
  letter-spacing: .02em;
  text-transform: none;
  color: #d9ddeb;
}

.stage__sub,
.stage__tail { text-shadow: 0 1px 14px rgba(5, 6, 11, .9), 0 0 2px rgba(5, 6, 11, .8); }
.stage__cta .btn-ghost {
  background: rgba(5, 6, 11, .45);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.stage__sub {
  max-width: 30rem;
  margin: 1.75rem 0 2.5rem;
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--text);
  --d: 700ms;
}
.stage__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  --d: 850ms;
}

.stage__meta {
  position: absolute;
  left: 0; right: 0; bottom: 1.75rem;
  z-index: 2;
  --d: 1100ms;
}
.stage__meta .container-fluid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.stage__place {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.stage__meta .scroll-cue {
  position: static;
  writing-mode: horizontal-tb;
  flex-direction: row;
}
.stage__meta .scroll-cue::after { width: 3.5rem; height: 1px; transform-origin: left; animation-name: cueSlide; }

@media (min-width: 768px) {
  .stage__copy { padding-left: 2rem; }
  .stage__meta .container-fluid { padding-left: calc(var(--gutter) + 2rem); padding-right: calc(var(--gutter) + 2rem); max-width: none; }
}
@media (min-width: 992px) {
  .stage__copy { max-width: 60%; margin-left: 0; }
}

/* Tablet and phone: the scene fills the frame behind the words */
@media (max-width: 991.98px) {
  .stage { align-items: flex-start; padding-top: calc(var(--header-h) + 2.5rem); }
  .stage__scene { width: 100%; height: 72%; right: -18%; opacity: .75; }
  .stage__dancer { right: 16%; width: 52%; }
  .stage__beam { width: 90vw; }
  .stage__beam--cyan { left: 5%; }
  .stage__beam--magenta { left: 35%; }
}
@media (max-width: 575.98px) {
  .stage { padding-bottom: 5.5rem; }
  .stage__scene { height: 58%; right: -30%; width: 130%; opacity: .6; }
  .stage__title { font-size: clamp(2.3rem, 12.6vw, 3.4rem); }
  .stage__place { display: none; }
  .stage__meta .rating-badge { font-size: .625rem; }
}

/* ==========================================================================
   Programme reel
   On phones and without GSAP it is a swipeable row. On desktop, motion.js
   pins the section and turns vertical scrolling into a sideways camera move.
   ========================================================================== */
.reel {
  position: relative;
  padding: 6rem 0;
}
.reel__intro {
  padding: 0 var(--gutter);
  margin-bottom: 2.5rem;
}
.reel__intro .special-title { margin-bottom: 1.5rem; }
.reel__hint {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin: 1.5rem 0 0;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.reel__hint svg { width: 12px; height: 12px; color: var(--magenta); animation: nudge 1600ms var(--ease-in-out) infinite; }

.reel__cards {
  display: flex;
  gap: 1.25rem;
  padding: 0 var(--gutter) 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--magenta) transparent;
  -webkit-overflow-scrolling: touch;
}

.reel-card {
  position: relative;
  flex: 0 0 min(82vw, 26rem);
  height: min(70vh, 34rem);
  min-height: 26rem;
  scroll-snap-align: start;
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-raised);
  color: var(--text);
}
.reel-card__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
}
.reel-card__media { isolation: isolate; overflow: hidden; }
.reel-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.35) brightness(.55);
  transform: scale(1.08);
  transition: filter 900ms var(--ease), transform 1400ms var(--ease-out);
}
/* Colour grade: the photograph keeps its light, takes the rig's colours */
.reel-card__media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(160deg, var(--cyan), var(--violet) 55%, var(--magenta));
  mix-blend-mode: color;
  opacity: .85;
  transition: opacity 900ms var(--ease);
}
.reel-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(0deg, rgba(5, 6, 11, .97) 10%, rgba(5, 6, 11, .55) 48%, rgba(5, 6, 11, .05) 80%);
}
.reel-card:hover .reel-card__media img { filter: grayscale(0) contrast(1.1) brightness(.65); transform: scale(1); }
.reel-card:hover .reel-card__media::before { opacity: .15; }
.reel-card__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2rem 1.75rem 1.75rem;
}
.reel-card__num {
  position: absolute;
  top: 1.5rem;
  left: 1.75rem;
  font-family: var(--font-outline);
  font-weight: 800;
  font-size: 4.5rem;
  line-height: 1;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .5);
  transition: -webkit-text-stroke-color 500ms, text-shadow 500ms;
}
.reel-card:hover .reel-card__num { -webkit-text-stroke-color: var(--magenta); text-shadow: 0 0 30px rgba(255, 61, 200, .5); }
.reel-card__count {
  position: absolute;
  top: 2.1rem;
  right: 1.75rem;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: #fff;
  padding: .45rem .8rem;
  border: 1px solid var(--line-strong);
  border-radius: 100rem;
  background: rgba(5, 6, 11, .4);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.reel-card__title {
  margin-bottom: .75rem;
  font-size: clamp(1.6rem, 2.4vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.02;
}
.reel-card__blurb { font-size: .9375rem; line-height: 1.6; color: #d4d8e6; margin-bottom: 1.25rem; }
.reel-card__styles {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 1.5rem;
  padding: 0;
}
.reel-card__styles li {
  padding: .3rem .7rem;
  border: 1px solid var(--line-strong);
  border-radius: 100rem;
  font-size: .6875rem;
  letter-spacing: .05em;
  color: #fff;
  background: rgba(255, 255, 255, .04);
}
.reel-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  border: 1px solid var(--line);
  pointer-events: none;
  transition: border-color 500ms, box-shadow 500ms;
}
.reel-card:hover::before { border-color: rgba(255, 61, 200, .6); box-shadow: inset 0 0 40px rgba(255, 61, 200, .15); }

.reel__progress { display: none; }

/* Pinned, sideways mode (desktop with GSAP) */
@media (min-width: 992px) {
  .reel.is-pinned { padding: 0; }
  .reel.is-pinned .reel__pin {
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  .reel.is-pinned .reel__track {
    display: flex;
    align-items: center;
    gap: 4vw;
    width: max-content;
    padding: 0 8vw 0 max(4rem, 6vw);
    will-change: transform;
  }
  .reel.is-pinned .reel__intro {
    flex: 0 0 min(34vw, 30rem);
    padding: 0;
    margin: 0;
  }
  .reel.is-pinned .reel__cards {
    overflow: visible;
    padding: 0;
    gap: 2vw;
  }
  .reel.is-pinned .reel-card {
    flex-basis: min(30vw, 28rem);
    height: min(74vh, 40rem);
  }
  .reel.is-pinned .reel-card:nth-child(even) { transform: translateY(3vh); }
  .reel.is-pinned .reel__progress {
    display: block;
    position: absolute;
    left: max(4rem, 6vw);
    right: max(4rem, 6vw);
    bottom: 3.5vh;
    height: 1px;
    background: var(--line);
  }
  .reel.is-pinned .reel__progress span {
    display: block;
    height: 100%;
    background: var(--neon);
    box-shadow: 0 0 10px rgba(255, 61, 200, .7);
    transform-origin: left;
    transform: scaleX(0);
  }
}

/* ==========================================================================
   Filmstrip — the continuously scrolling gallery band
   ========================================================================== */
.filmstrip-band {
  position: relative;
  padding: 4rem 0;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(50% 80% at 50% 50%, rgba(138, 92, 255, .08), transparent 70%),
    var(--bg-deep);
}
.filmstrip {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 2rem 0;
  -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.filmstrip__track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: marquee 150s linear infinite;
  will-change: transform;
}
.filmstrip:hover .filmstrip__track { animation-play-state: paused; }
.filmstrip__item {
  flex: 0 0 auto;
  width: 18.75rem;
  padding: 0 .5rem;
}
.filmstrip__item .media-tile { border-radius: 16px; }
.filmstrip__item img {
  display: block;
  width: 100%;
  height: 26rem;
  object-fit: cover;
}
.filmstrip__skew { transform-origin: center; will-change: transform; }

/* Wave: alternate tiles ride up and down. reveal.js stamps these classes on
   the originals before duplicating the track, so the alternation stays in
   step across the loop seam. */
.filmstrip__item--up   { transform: translateY(-1.75rem); }
.filmstrip__item--down { transform: translateY(1.75rem); }
.no-js .filmstrip__item:nth-child(odd)  { transform: translateY(-1.75rem); }
.no-js .filmstrip__item:nth-child(even) { transform: translateY(1.75rem); }

@media (max-width: 767.98px) {
  .filmstrip-band { padding: 2.5rem 0; }
  .filmstrip { padding: 1.25rem 0; }
  .filmstrip__item { width: 13rem; }
  .filmstrip__item img { height: 18rem; }
  .filmstrip__item--up   { transform: translateY(-1rem); }
  .filmstrip__item--down { transform: translateY(1rem); }
  .no-js .filmstrip__item:nth-child(odd)  { transform: translateY(-1rem); }
  .no-js .filmstrip__item:nth-child(even) { transform: translateY(1rem); }
}

/* Gallery grid: every tile the same portrait frame, whatever the source */
.gallery-grid > [class*="col-"] { margin-bottom: var(--gutter); }
.gallery-grid .media-tile { border-radius: 16px; aspect-ratio: 3 / 4; }
.gallery-grid .media-tile img { height: 100%; object-fit: cover; }

/* ==========================================================================
   Lightbox
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  background: rgba(3, 4, 8, .94);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 400ms var(--ease), visibility 400ms var(--ease);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__figure {
  max-width: 100%;
  max-height: 100%;
  transform: scale(.92) translateY(20px);
  transition: transform 600ms var(--ease-out);
}
.lightbox.is-open .lightbox__figure { transform: none; }
.lightbox__figure img {
  display: block;
  max-height: 82vh;
  width: auto;
  max-width: 100%;
  border-radius: 14px;
  box-shadow: 0 0 0 1px var(--line), 0 40px 80px rgba(0, 0, 0, .6), 0 0 80px rgba(255, 61, 200, .15);
}
.lightbox__caption {
  color: var(--text);
  text-align: center;
  margin-top: 1.25rem;
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(255, 255, 255, .03);
  color: #fff;
  cursor: pointer;
  line-height: 0;
  transition: border-color 300ms, box-shadow 300ms, color 300ms;
}
.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover { border-color: var(--magenta); box-shadow: var(--glow-magenta); color: var(--magenta); }
.lightbox__close { top: 1.25rem; right: 1.25rem; }
.lightbox__close svg { width: 16px; height: 16px; }
.lightbox__prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__prev svg,
.lightbox__next svg { width: 14px; height: 14px; }

.lightbox__video {
  width: min(100%, 64rem);
  aspect-ratio: 16 / 9;
  background: #000;
}
.lightbox__video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ==========================================================================
   Filter chips
   ========================================================================== */
.timetable__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  justify-content: center;
  margin-bottom: 3.5rem;
}
.filter-group__options { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.filter-chip {
  position: relative;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, .02);
  color: var(--text);
  border-radius: 100rem;
  padding: .7rem 1.35rem;
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  cursor: pointer;
  transition: border-color 300ms, color 300ms, box-shadow 300ms, background 300ms;
}
.filter-chip:hover { color: #fff; border-color: var(--cyan); box-shadow: var(--glow-cyan); }
.filter-chip.is-active {
  color: #fff;
  border-color: transparent;
  background: var(--neon);
  box-shadow: 0 0 22px rgba(255, 61, 200, .45);
}

/* ==========================================================================
   Opening hours grid
   ========================================================================== */
.hours-grid {
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01));
}
.hours-grid__row {
  display: grid;
  grid-template-columns: 12rem repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}
.hours-grid__row:last-child { border-bottom: 0; }
.hours-grid__row--head { background: rgba(255, 255, 255, .03); }
.hours-grid__day,
.hours-grid__branch,
.hours-grid__cell {
  padding: 1.25rem .75rem;
  font-size: .8125rem;
  text-align: center;
}
.hours-grid__day {
  font-weight: 700;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--text-dim);
}
.hours-grid__branch {
  text-align: left;
  padding-left: 1.5rem;
  border-right: 1px solid var(--line);
}
.hours-grid__branch strong {
  display: block;
  font-family: var(--font-display);
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.hours-grid__branch small { display: block; color: var(--magenta); font-size: .75rem; font-family: var(--font-serif); font-style: italic; }
.hours-grid__cell { border-left: 1px solid var(--line); line-height: 1.45; color: #fff; }
.hours-grid__branch + .hours-grid__cell { border-left: 0; }
.hours-grid__cell.is-closed { color: var(--text-faint); }
.hours-grid__cell.is-today,
.hours-grid__day.is-today {
  background: linear-gradient(180deg, rgba(58, 215, 255, .14), rgba(255, 61, 200, .10));
  color: #fff;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(58, 215, 255, .25);
}
.hours-grid__day.is-today { color: var(--cyan); text-shadow: 0 0 12px rgba(58, 215, 255, .6); }
.hours-grid__daylabel { display: none; }

@media (max-width: 991.98px) {
  .hours-grid__row--head { display: none; }
  .hours-grid__row { grid-template-columns: 1fr; }
  .hours-grid__branch { border-right: 0; border-bottom: 1px solid var(--line); text-align: center; padding: 1.25rem; }
  .hours-grid__cell {
    display: flex;
    justify-content: space-between;
    border-left: 0;
    border-bottom: 1px solid var(--line);
    text-align: right;
    padding: .75rem 1.25rem;
  }
  .hours-grid__cell:last-child { border-bottom: 0; }
  .hours-grid__cell br { display: none; }
  .hours-grid__daylabel {
    display: block;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .15em;
    font-size: .6875rem;
    color: var(--text-dim);
  }
}

/* ==========================================================================
   Programme directory
   ========================================================================== */
.programme-list { display: grid; gap: 1.5rem; }
.programme {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 17rem) minmax(0, 1fr);
  align-items: start;
  gap: 2.5rem;
  padding: 2.5rem;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .008));
  scroll-margin-top: calc(var(--header-h) + 1rem);
  transition: border-color 500ms, box-shadow 500ms;
}
.programme:hover { border-color: rgba(255, 61, 200, .35); box-shadow: 0 0 60px -20px rgba(255, 61, 200, .35); }
.programme .circle-media { margin-top: .5rem; }
.programme__name {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 800;
  letter-spacing: -.035em;
  margin-bottom: .75rem;
}
.programme__blurb { margin: 0; color: var(--text); }
.programme__styles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: 1.75rem .75rem;
  align-content: flex-start;
}
.style-tile {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
}
.style-tile .circle-media { --circle: 4.75rem; }
.style-tile__name {
  font-size: .8125rem;
  line-height: 1.3;
  color: var(--text);
  transition: color 300ms;
}
.style-tile:hover .style-tile__name { color: #fff; text-shadow: 0 0 12px rgba(58, 215, 255, .7); }

@media (max-width: 575.98px) {
  .programme__styles { grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); gap: 1.25rem .5rem; }
  .style-tile .circle-media { --circle: 3.9rem; }
  .style-tile__name { font-size: .75rem; }
}
@media (max-width: 991.98px) {
  .programme { grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem 1.75rem; padding: 2rem 1.5rem; }
  .programme__styles { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
  .programme { gap: 1.25rem; }
  .programme .circle-media { --circle: 4.75rem; margin-top: .25rem; }
}

/* ==========================================================================
   Audience cards
   ========================================================================== */
.group-card {
  text-align: center;
  padding: 2.25rem 1rem 2rem;
  height: 100%;
}
.group-card .circle-media {
  --circle: 5.5rem;
  margin-bottom: 1.5rem;
}
.group-card__name {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #fff;
  margin-bottom: .5rem;
}
.group-card p { margin: 0; }
.row > [class*="col-"] > .group-card { margin-bottom: 1.5rem; height: calc(100% - 1.5rem); }

/* ==========================================================================
   Reviews
   ========================================================================== */
.review {
  height: 100%;
  margin: 0;
  padding: 2.5rem 2rem 2rem;
}
.review blockquote {
  position: relative;
  margin: 0 0 1.5rem;
  padding: 0 2.25rem 0 0;
  border: 0;
}
.review blockquote::before {
  content: '\201C';
  position: absolute;
  top: -1.9rem;
  right: 0;
  font-family: var(--font-serif);
  font-size: 7rem;
  line-height: 1;
  background: var(--neon);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: .5;
}
.review blockquote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.55;
  color: #fff;
  margin: 0;
}
.review figcaption {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--cyan);
}
.row > [class*="col-"] > .review { margin-bottom: 1.5rem; height: calc(100% - 1.5rem); }

/* ==========================================================================
   Branch card
   ========================================================================== */
.branch {
  height: 100%;
  padding: 2.5rem;
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.row > [class*="col-"] > .branch { margin-bottom: 1.5rem; height: calc(100% - 1.5rem); }
.branch__name {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.04em;
  margin-bottom: .25rem;
}
.branch__area {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--magenta);
  margin-bottom: 1.5rem;
}
.branch__rows { list-style: none; margin: 1.5rem 0 2rem; padding: 0; }
.branch__rows li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .875rem;
  color: #fff;
}
.branch__rows span:first-child { color: var(--text-dim); }
.branch__rows .is-closed { color: var(--text-faint); }
.branch__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ==========================================================================
   Forms
   ========================================================================== */
.form-row { margin-bottom: 1.5rem; }
.form-label {
  display: block;
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--text-dim);
  margin-bottom: .6rem;
}
input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="password"],
select,
textarea,
.form-control {
  width: 100%;
  padding: 1rem 1.1rem;
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  color: #fff;
  transition: border-color 300ms, box-shadow 300ms, background-color 300ms;
  -webkit-appearance: none;
  appearance: none;
}
textarea { min-height: 9rem; resize: vertical; }
input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  outline: 0;
  border-color: var(--cyan);
  background-color: rgba(58, 215, 255, .05);
  box-shadow: 0 0 0 3px rgba(58, 215, 255, .15), 0 0 24px rgba(58, 215, 255, .2);
}

::placeholder { color: var(--text-faint); }

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%233ad7ff' stroke-width='1.6'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  padding-right: 2.75rem;
}
select option { background: var(--bg-raised); color: #fff; }

.form-error {
  display: block;
  font-size: .75rem;
  color: #ff6b8b;
  margin-top: .4rem;
  min-height: 1rem;
}
input.has-error,
textarea.has-error { border-color: #ff6b8b; box-shadow: 0 0 18px rgba(255, 107, 139, .2); }

.form-note {
  margin-top: 1.25rem;
  padding: 1.1rem 1.35rem;
  background: linear-gradient(90deg, rgba(58, 215, 255, .12), rgba(255, 61, 200, .08));
  border: 1px solid rgba(58, 215, 255, .35);
  border-radius: 12px;
  color: #fff;
  font-size: .875rem;
  display: none;
}
.form-note.is-visible { display: block; }
.form-note.is-error { border-color: rgba(255, 61, 200, .55); background: rgba(255, 61, 200, .1); }

.trial-card { padding: clamp(1.75rem, 4vw, 3rem); }

/* ==========================================================================
   Contact details + map
   ========================================================================== */
.contact-block {
  margin-bottom: 1.25rem;
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .025);
  transition: border-color 400ms, box-shadow 400ms;
}
.contact-block:hover { border-color: rgba(58, 215, 255, .4); box-shadow: 0 0 30px -10px rgba(58, 215, 255, .4); }
.contact-block p:last-child { margin-bottom: 0; }
.contact-block__title {
  display: flex;
  align-items: center;
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #fff;
  margin-bottom: .6rem;
}
.contact-block__title svg { width: 16px; height: 16px; color: var(--magenta); margin-right: .7rem; flex: 0 0 auto; }

.map-embed {
  position: relative;
  width: 100%;
  height: 26rem;
  background: var(--bg-raised);
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--line);
  margin-bottom: 1.5rem;
}
/* Invert the street map to a night map, then pull the hue back round */
.map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: invert(.92) hue-rotate(180deg) saturate(.6) brightness(.9) contrast(1.1);
}
.map-card {
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  background: rgba(5, 6, 11, .82);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  color: var(--text);
  padding: 1.1rem 1.35rem;
  max-width: 17rem;
  font-size: .8125rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .5);
}
.map-card strong { display: block; color: #fff; margin-bottom: .25rem; }
@media (max-width: 575.98px) {
  .map-embed { height: 20rem; }
  .map-card { left: .75rem; right: .75rem; bottom: .75rem; max-width: none; }
}

/* Facility card: the round photo carries the icon as a badge */
.facility-card { padding: 2.5rem 1.75rem 2.25rem; }
.facility-card .circle-media { --circle: 6.5rem; margin-bottom: 1.75rem; }
.row > [class*="col-"] > .facility-card { margin-bottom: 1.5rem; height: calc(100% - 1.5rem); }

/* Fee card: small round photo above the figure */
.price-item .circle-media { margin-bottom: 1.5rem; }

/* ==========================================================================
   YouTube collage — a masonry of wide videos and tall Shorts. Each tile is
   a thumbnail stand-in that becomes the real player, in place, on click.
   ========================================================================== */
.watch__stage { margin-top: 1rem; }
.collage {
  column-count: 2;
  column-gap: .9rem;
}
@media (min-width: 768px)  { .collage { column-gap: 1.25rem; } }
@media (min-width: 1024px) { .collage { column-count: 4; } }

.yt {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 .9rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 18px;
  background: var(--bg-raised);
  isolation: isolate;
  break-inside: avoid;
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .85);
  transition: box-shadow 500ms var(--ease), transform 600ms var(--ease-out);
}
@media (min-width: 768px) { .yt { margin-bottom: 1.25rem; } }
.yt--short { aspect-ratio: 9 / 16; }
.yt:hover { box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .9), 0 0 50px -12px rgba(255, 61, 200, .5); }

/* Neon hairline border */
.yt::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(58, 215, 255, .8), rgba(255, 255, 255, .07) 35%, rgba(255, 255, 255, .07) 65%, rgba(255, 61, 200, .8));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.yt iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.yt__facade {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: #fff;
}
.yt__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.1) brightness(.72);
  transform: scale(1.02);
  transition: transform 1200ms var(--ease-out), filter 700ms var(--ease);
}
.yt__facade:hover .yt__thumb,
.yt__facade:focus-visible .yt__thumb { transform: scale(1.08); filter: saturate(1.2) brightness(.85); }

/* Placeholder tiles carry the site's photo grade */
.yt--soon .yt__thumb { filter: grayscale(1) contrast(1.2) brightness(.5); }
.yt--soon::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(140deg, var(--cyan), var(--violet) 50%, var(--magenta));
  mix-blend-mode: color;
  opacity: .8;
  pointer-events: none;
}
.yt--soon:hover .yt__thumb { transform: scale(1.06); }

.yt__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 1rem;
  text-align: center;
  background: linear-gradient(0deg, rgba(5, 6, 11, .85) 0%, rgba(5, 6, 11, .1) 55%, rgba(5, 6, 11, .3) 100%);
}
.yt__chip {
  position: absolute;
  top: .85rem;
  left: .85rem;
  padding: .3rem .7rem;
  border: 1px solid var(--line-strong);
  border-radius: 100rem;
  background: rgba(5, 6, 11, .55);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #fff;
}
.yt--soon .yt__chip { color: var(--cyan); border-color: rgba(58, 215, 255, .45); }
.yt__play {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  background: var(--neon);
  color: #fff;
  box-shadow: 0 0 24px rgba(255, 61, 200, .6), 0 0 50px rgba(58, 215, 255, .3);
  transition: transform 500ms var(--ease-out), box-shadow 400ms;
}
.yt__play svg { width: 34%; height: 34%; margin-left: 6%; }
.yt__play::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 61, 200, .7);
  animation: pulseRing 2.6s var(--ease-out) infinite;
}
.yt__facade:hover .yt__play,
.yt__facade:focus-visible .yt__play { transform: scale(1.12); box-shadow: 0 0 34px rgba(255, 61, 200, .8), 0 0 70px rgba(58, 215, 255, .4); }
.yt__play.is-idle { background: rgba(255, 255, 255, .08); border: 1px solid var(--line-strong); box-shadow: none; }
.yt__play.is-idle::after { display: none; }
.yt__title {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: .9rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(.8125rem, 1.4vw, 1.0625rem);
  letter-spacing: -.02em;
  line-height: 1.2;
  text-align: left;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .7);
}
@media (max-width: 575.98px) {
  .yt { border-radius: 14px; }
  .yt__play { width: 2.75rem; height: 2.75rem; }
  .yt__chip { top: .6rem; left: .6rem; font-size: .5rem; }
  .yt__title { left: .7rem; right: .7rem; bottom: .6rem; }
  /* The wide tiles are small on a phone: drop the chip, shrink the button */
  .yt:not(.yt--short) .yt__chip { display: none; }
  .yt:not(.yt--short) .yt__play { width: 2.1rem; height: 2.1rem; }
  .yt:not(.yt--short) .yt__overlay { justify-content: flex-start; padding-top: .9rem; }
  .yt:not(.yt--short) .yt__title { font-size: .75rem; }
}

/* ==========================================================================
   Programme pages — sticky class list beside one section per class
   ========================================================================== */
.family { display: grid; gap: 2.5rem; }
@media (min-width: 992px) {
  .family { grid-template-columns: 15rem minmax(0, 1fr); gap: 4rem; align-items: start; }
  .family__nav {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
  }
}
.family__nav-title {
  margin: 0 0 1rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--magenta);
}
.family__nav ol { list-style: none; margin: 0; padding: 0; }
.family__nav a {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: .9rem;
  padding: .55rem 0 .55rem 1rem;
  border-left: 1px solid var(--line);
  font-size: .9375rem;
  color: var(--text-dim);
  transition: color 300ms, border-color 300ms, padding-left 400ms var(--ease-out);
}
.family__nav a span {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .15em;
  color: var(--text-faint);
  transition: color 300ms;
}
.family__nav a:hover { color: #fff; }
.family__nav a.is-active {
  color: #fff;
  padding-left: 1.4rem;
  border-left-color: var(--magenta);
  box-shadow: inset 2px 0 0 var(--magenta);
}
.family__nav a.is-active span { color: var(--cyan); }

/* Phones and tablets: the list becomes a row of chips */
@media (max-width: 991.98px) {
  .family__nav ol { display: flex; flex-wrap: wrap; gap: .5rem; }
  .family__nav a {
    padding: .5rem .9rem;
    border: 1px solid var(--line-strong);
    border-radius: 100rem;
    font-size: .8125rem;
    gap: .5rem;
  }
  .family__nav a.is-active { padding-left: .9rem; box-shadow: none; }
}

.family__list { display: grid; gap: clamp(3rem, 7vw, 6rem); }

.discipline {
  display: grid;
  gap: 2rem;
  align-items: center;
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
@media (min-width: 768px) {
  .discipline { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; }
  .discipline:nth-child(even) .discipline__media { order: 2; }
}
.discipline__media { position: relative; max-width: 24rem; width: 100%; }
.discipline__frame {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 24px;
  isolation: isolate;
  background: var(--bg-raised);
}
.discipline__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.2) brightness(.78);
  transform: scale(1.06);
  transition: filter 900ms var(--ease), transform 1400ms var(--ease-out);
}
.discipline__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, var(--cyan), var(--violet) 50%, var(--magenta));
  mix-blend-mode: color;
  opacity: .75;
  transition: opacity 900ms var(--ease);
}
.discipline__frame::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  border: 1px solid var(--line-strong);
  pointer-events: none;
  transition: border-color 500ms, box-shadow 500ms;
}
.discipline:hover .discipline__frame img { filter: none; transform: scale(1); }
.discipline:hover .discipline__frame::after { opacity: 0; }
.discipline:hover .discipline__frame::before { border-color: rgba(255, 61, 200, .7); box-shadow: inset 0 0 30px rgba(255, 61, 200, .25); }
.discipline__num {
  position: absolute;
  right: -1rem;
  bottom: -2.25rem;
  z-index: 3;
  font-family: var(--font-outline);
  font-weight: 800;
  font-size: clamp(4rem, 8vw, 6.5rem);
  line-height: 1;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--cyan);
  filter: drop-shadow(0 0 10px rgba(58, 215, 255, .5));
  pointer-events: none;
}
@media (max-width: 767.98px) {
  .discipline__num { right: .5rem; bottom: -1.75rem; }
  .discipline:nth-child(even) .discipline__num { left: .5rem; }
}
.discipline:nth-child(even) .discipline__num { right: auto; left: -1rem; -webkit-text-stroke-color: var(--magenta); filter: drop-shadow(0 0 10px rgba(255, 61, 200, .5)); }
.discipline__kicker {
  margin: 0 0 .75rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--magenta);
}
.discipline__title {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1;
}
.discipline__desc { font-size: 1.125rem; font-weight: 300; line-height: 1.65; color: #dfe3f0; margin-bottom: 1.5rem; }
.discipline__facts {
  display: grid;
  gap: 1rem;
  margin: 0 0 1.75rem;
}
@media (min-width: 576px) { .discipline__facts { grid-template-columns: 1fr 1fr; } }
.discipline__facts > div {
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .025);
}
.discipline__facts dt {
  margin-bottom: .35rem;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cyan);
}
.discipline__facts dd { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--text); }
.discipline__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin: 0; }

/* The class a link pointed at pulses once when the page opens on it */
.discipline.is-target .discipline__frame::before { animation: targetPulse 2400ms var(--ease-out) 600ms 2; }
@keyframes targetPulse {
  0%, 100% { border-color: var(--line-strong); box-shadow: none; }
  30%      { border-color: var(--magenta); box-shadow: inset 0 0 40px rgba(255, 61, 200, .45), 0 0 50px rgba(255, 61, 200, .45); }
}

/* Links on to the other programmes */
.family-link {
  position: relative;
  display: block;
  height: 100%;
  min-height: 18rem;
  margin-bottom: 1.5rem;
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
}
.family-link__media { position: absolute; inset: 0; z-index: -1; }
.family-link__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.3) brightness(.5);
  transition: transform 1200ms var(--ease-out), filter 800ms var(--ease);
}
.family-link__media { isolation: isolate; }
.family-link__media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(160deg, var(--cyan), var(--violet) 55%, var(--magenta));
  mix-blend-mode: color;
  opacity: .85;
  transition: opacity 800ms var(--ease);
}
.family-link__media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(0deg, rgba(5, 6, 11, .96) 8%, rgba(5, 6, 11, .35) 60%, rgba(5, 6, 11, .05) 90%);
}
.family-link:hover .family-link__media::before { opacity: .2; }
.family-link:hover .family-link__media img { transform: scale(1.06); filter: grayscale(0) contrast(1.1) brightness(.6); }
.family-link__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: grid;
  gap: .5rem;
  padding: 1.75rem;
}
.family-link__count { font-size: .625rem; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; color: var(--cyan); }
.family-link__name { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; letter-spacing: -.035em; line-height: 1.05; }
.family-link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  border: 1px solid var(--line);
  pointer-events: none;
  transition: border-color 500ms;
}
.family-link:hover::before { border-color: rgba(255, 61, 200, .6); }

/* The class index links each programme and style to its page */
.programme__name a { color: #fff; }
.programme__name a:hover { color: var(--cyan); }
.programme__head .btn-link { margin-top: 1.25rem; }
.programme__styles > li { display: flex; justify-content: center; }
a.style-tile { color: inherit; }

/* ==========================================================================
   Instructors
   ========================================================================== */
.mentor {
  display: grid;
  gap: 2rem;
  padding: clamp(1.75rem, 4vw, 3rem);
  margin-bottom: 1.5rem;
}
.mentor-grid { display: grid; gap: 0 1.5rem; }
@media (min-width: 768px) {
  .mentor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mentor-grid .mentor--featured { grid-column: 1 / -1; }
  .mentor--featured { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); align-items: center; gap: 3.5rem; }
}
.mentor__photo {
  position: relative;
  width: 100%;
  max-width: 18rem;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 25%, rgba(58, 215, 255, .25), transparent 60%),
    radial-gradient(circle at 75% 80%, rgba(255, 61, 200, .28), transparent 60%),
    var(--bg-deep);
  box-shadow: 0 0 0 1px var(--line-strong), 0 0 0 10px rgba(255, 255, 255, .02), 0 0 60px rgba(255, 61, 200, .25);
}
.mentor:not(.mentor--featured) .mentor__photo { max-width: 9rem; }
.mentor__photo img { width: 100%; height: 100%; object-fit: cover; }
/* A slow arc circling the portrait */
.mentor__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--magenta);
  border-right-color: rgba(58, 215, 255, .6);
  animation: spin 9s linear infinite;
  pointer-events: none;
}
.mentor__monogram {
  font-family: var(--font-outline);
  font-weight: 800;
  font-size: clamp(3.5rem, 9vw, 6rem);
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--cyan);
  filter: drop-shadow(0 0 16px rgba(58, 215, 255, .6));
  animation: neonFlickerSoft 5s linear infinite;
}
.mentor__role {
  margin: 0 0 .5rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--magenta);
}
.mentor__name {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1;
}
.mentor__bio { font-size: 1.0625rem; font-weight: 300; line-height: 1.7; color: #dfe3f0; }
.mentor__tags { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; padding: 0; }
.mentor__tags li {
  padding: .35rem .85rem;
  border: 1px solid var(--line-strong);
  border-radius: 100rem;
  font-size: .75rem;
  color: #fff;
  background: rgba(255, 255, 255, .04);
}

/* Teaching pillars — each one a member's words */
.pillar {
  height: calc(100% - 1.5rem);
  margin-bottom: 1.5rem;
  padding: 2.25rem 2rem;
}
.pillar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 1.5rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--cyan);
  box-shadow: inset 0 0 18px rgba(58, 215, 255, .15);
}
.pillar__icon svg { width: 22px; height: 22px; }
.pillar__title { font-size: 1.375rem; font-weight: 800; letter-spacing: -.03em; margin-bottom: .9rem; }
.pillar__quote { font-family: var(--font-serif); font-style: italic; font-size: 1.125rem; line-height: 1.55; color: #fff; }
.pillar__source { font-size: .625rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--cyan); }

/* --------------------------------------------------------------------------
   Admission — QR code to the online form (home and contact)
   The QR card is left white and ungraded: a tinted or dimmed code may not scan.
   -------------------------------------------------------------------------- */
.admission__steps {
  margin: 0 0 1.75rem;
  padding-left: 1.25rem;
  color: var(--text-dim);
}
.admission__steps li { margin-bottom: .5rem; }
.admission__steps li::marker { color: var(--cyan); font-weight: 700; }
.admission__qr {
  position: relative;
  display: block;
  max-width: 24rem;
  margin: 0 auto;
  padding: .75rem;
  border-radius: 1.75rem;
  background: #fff;
  box-shadow: var(--glow-cyan);
  transition: box-shadow 400ms var(--ease), transform 400ms var(--ease);
}
.admission__qr::before {
  content: '';
  position: absolute;
  inset: -3px;
  z-index: -1;
  border-radius: calc(1.75rem + 3px);
  background: var(--neon);
}
.admission__qr:hover { box-shadow: var(--glow-magenta); transform: translateY(-4px); }
.admission__qr img { display: block; width: 100%; height: auto; border-radius: 1.25rem; }
@media (max-width: 767.98px) {
  .admission__qr { max-width: 18rem; margin-top: 2.5rem; }
}

/* --------------------------------------------------------------------------
   Get the app — install the PWA (home)
   -------------------------------------------------------------------------- */
.app-install__qr {
  max-width: 20rem;
  margin: 0 auto;
  padding: 1rem 1rem .9rem;
  border-radius: 1.75rem;
  background: #fff;
  box-shadow: var(--glow-magenta);
  text-align: center;
}
.app-install__qr img { display: block; width: 100%; height: auto; }
.app-install__qr figcaption {
  margin-top: .5rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #05060b;
}
.app-install__platforms {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
}
.app-install__platforms li {
  padding: .35rem .9rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.app-install__help {
  padding: 1rem 1.25rem;
  border: 1px solid rgba(58, 215, 255, .3);
  border-radius: 12px;
  background: var(--neon-soft);
  font-size: .9375rem;
  color: #fff;
}
.app-install__help b { color: var(--cyan); font-weight: 700; }
.app-install__help.is-pulsing { animation: appHelpPulse 900ms var(--ease) 1; }
@keyframes appHelpPulse {
  0% { box-shadow: 0 0 0 0 rgba(58, 215, 255, .6); }
  100% { box-shadow: 0 0 0 14px rgba(58, 215, 255, 0); }
}
.app-install.is-installed .app-install__scan { display: none; }
/* A phone cannot scan its own screen — the button and steps cover it. */
@media (max-width: 767.98px) {
  .app-install__scan { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .app-install__help.is-pulsing { animation: none; }
}

/* --------------------------------------------------------------------------
   Blog — index cards, article hero, article typography
   -------------------------------------------------------------------------- */
.blog-grid > [class*="col-"] { margin-bottom: 1.75rem; }
.blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  color: var(--text);
}
.blog-card:hover { color: var(--text); }
.blog-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 20px 20px 0 0; }
.blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1) brightness(.8);
  transition: filter 500ms var(--ease), transform 700ms var(--ease);
}
.blog-card:hover .blog-card__media img { filter: none; transform: scale(1.04); }
.blog-card__body { display: flex; flex: 1; flex-direction: column; gap: .7rem; padding: 1.5rem 1.5rem 1.75rem; }
.blog-card__meta {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cyan);
}
.blog-card__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--heading);
}
.blog-card__excerpt { flex: 1; font-size: .9375rem; line-height: 1.6; color: var(--text-dim); }

.page-hero--post .page-hero__title {
  max-width: 22ch;
  font-size: clamp(2rem, 4.6vw, 3.9rem);
  line-height: 1.08;
}
.page-hero--post .page-hero__title .line { display: inline; overflow: visible; }
.page-hero--post .page-hero__title .line__in { display: inline; }
.breadcrumb {
  margin-bottom: 1.25rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.breadcrumb a { color: var(--cyan); }
.breadcrumb span[aria-hidden] { margin: 0 .4rem; color: var(--text-faint); }

.prose { font-size: 1.0625rem; line-height: 1.8; color: var(--text); }
.prose__meta {
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.prose h2 {
  margin: 2.75rem 0 1rem;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.2;
}
.prose p, .prose ul, .prose ol { margin: 0 0 1.25rem; }
.prose ul, .prose ol { padding-left: 1.35rem; }
.prose li { margin-bottom: .55rem; }
.prose li::marker { color: var(--cyan); }
.prose strong { color: var(--heading); }
.prose a { color: var(--cyan); text-decoration: underline; text-decoration-color: rgba(58, 215, 255, .4); text-underline-offset: .2em; }
.prose a:hover { color: var(--magenta); text-decoration-color: currentColor; }
.prose table {
  display: block;
  width: 100%;
  margin: 0 0 1.75rem;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: .9375rem;
  line-height: 1.5;
}
.prose th, .prose td { padding: .75rem 1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); white-space: nowrap; }

.prose-aside__box { position: sticky; top: 7rem; padding: 1.75rem; }
.prose-aside__title {
  margin-bottom: 1rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cyan);
}
.prose-aside__box ul { margin: 0 0 1.5rem; padding: 0; list-style: none; }
.prose-aside__box li { padding: .55rem 0; border-bottom: 1px solid var(--line); }
.prose-aside__box li a { color: var(--heading); }
.prose-aside__box li a:hover { color: var(--cyan); }
@media (max-width: 991.98px) {
  .prose-aside { margin-top: 2rem; }
  .prose-aside__box { position: static; }
}