/* ═══════════════════════════════════════════════
   BOX IT UP FITNESS CENTRE — Suva, Fiji
   Fight red · charcoal · steel · amber
   ═══════════════════════════════════════════════ */

:root {
  --bg: #07090d;
  --bg-soft: #0d1117;
  --panel: #11161d;
  --line: rgba(255, 255, 255, 0.08);
  --text: #f2f4f6;
  --muted: #9aa3ad;
  --pink: #e0362a;
  --pink-soft: #ff6b57;
  --green: #969eab;
  --green-deep: #0e6b41;
  --yellow: #ffb020;
  --blue: #565b66;
  --font-display: "Anton", Impact, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--bg); }
html.has-smoother { overflow: hidden; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--pink); color: #fff; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
em { font-style: normal; }

/* ── Buttons ─────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.9rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
  will-change: transform;
}
.btn--solid {
  background: var(--pink);
  color: #fff;
  box-shadow: 0 8px 30px rgba(224, 54, 42, 0.35);
}
.btn--solid:hover { background: var(--pink-soft); box-shadow: 0 12px 40px rgba(224, 54, 42, 0.5); }
.btn--ghost {
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { border-color: var(--pink); color: var(--pink-soft); }
.btn--lg { padding: 1.1rem 2.5rem; font-size: 1.05rem; }

/* ── Preloader: fight-night load-in ──────── */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.preloader__slats {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 0;
}
.preloader__slats span {
  flex: 1;
  background: var(--bg);
  border-right: 1px solid rgba(255, 255, 255, 0.025);
}
.preloader__slats span:last-child { border-right: 0; }
.preloader__inner { position: relative; z-index: 2; text-align: center; }
.preloader__logo { width: clamp(72px, 12vw, 104px); margin: 0 auto 1.8rem; }
.preloader__logo img, .preloader__logo svg { width: 100%; height: auto; display: block; }
.preloader__brand {
  font-family: var(--font-display);
  font-size: clamp(3rem, 10vw, 6rem);
  line-height: 1;
  letter-spacing: 0.05em;
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding-bottom: 0.06em; /* keep descender-free glyph feet unclipped on slam */
}
.preloader__brand span { display: inline-block; }
.preloader__brand .gap { width: 0.32em; }
.preloader__brand span:nth-last-child(-n + 2) { color: var(--pink); }
.preloader__tag {
  margin-top: 1rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.preloader__count {
  position: absolute;
  right: clamp(1rem, 4vw, 3rem);
  bottom: clamp(0.8rem, 3vw, 1.8rem);
  z-index: 2;
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 14vw, 10rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.22);
  font-variant-numeric: tabular-nums;
}
.preloader__count i {
  font-style: normal;
  font-size: 0.35em;
  -webkit-text-stroke: 1.5px rgba(224, 54, 42, 0.75);
  margin-left: 0.06em;
}
.preloader__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.06);
}
.preloader__bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--pink);
  transform: scaleX(0);
  transform-origin: left;
  box-shadow: 0 0 18px rgba(224, 54, 42, 0.8);
}

/* ── Nav ─────────────────────────────────── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Must outrank .mobmenu (200): .nav is a stacking context, so the burger's
     own z-index can't lift it above the overlay from the inside. Without
     this the close button is visible but not tappable. */
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding: 1.1rem clamp(1.2rem, 4vw, 3.5rem);
  transition: background 0.4s, backdrop-filter 0.4s, padding 0.4s, border-color 0.4s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(7, 9, 13, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--line);
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}
.nav__logo { display: flex; align-items: center; gap: 0.7rem; }
.nav__logo-mark { width: 38px; height: 38px; display: block; }
.nav__logo-mark svg { width: 100%; height: 100%; }
.nav__logo-text {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
}
.nav__logo-text em { color: var(--pink); }
.nav__links { display: flex; gap: 2rem; margin-left: auto; }
.nav__links a {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--muted);
  position: relative;
  transition: color 0.3s;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 2px;
  background: var(--pink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav__links a:hover { color: var(--text); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }.nav__cta { padding: 0.6rem 1.5rem; font-size: 0.88rem; }
.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px;
  min-width: 44px;   /* comfortable touch target */
  min-height: 44px;
  align-items: center;
  margin-left: auto;
  z-index: 210;
}
.nav__burger span {
  width: 26px;
  height: 2px;
  background: var(--text);
  transition: transform 0.35s, opacity 0.35s;
}
.nav__burger.is-open {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
}
.nav__burger.is-open span { height: 3px; background: #fff; }
.nav__burger.is-open span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }

/* ── Mobile menu ─────────────────────────── */
.mobmenu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(7, 9, 13, 0.97);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 2rem calc(3rem + env(safe-area-inset-bottom));
  clip-path: circle(0% at calc(100% - 44px) 36px);
  pointer-events: none;
  overflow-y: auto; /* short landscape phones can still reach every link */
}
.mobmenu.is-open { pointer-events: auto; }
.mobmenu__links { display: flex; flex-direction: column; gap: 0.4rem; }
.mobmenu__links a {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 10vw, 4rem);
  letter-spacing: 0.04em;
  color: var(--text);
  transition: color 0.3s;
}
.mobmenu__links a:hover { color: var(--pink); }
.mobmenu__foot { margin-top: 3rem; color: var(--muted); font-size: 0.9rem; }

/* ── Hero ────────────────────────────────── */
/* The hero content fills exactly one screen at every size, so the stats band
   always begins below the fold. Previously the section was min-height:100svh
   with the stats inside it, which overflowed on anything short — a 1440x900
   laptop clipped the band mid-tile, and phones showed it peeking under the
   CTAs. svh (not vh) keeps this stable under mobile browser chrome. */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 clamp(1.2rem, 4vw, 3.5rem);
  overflow: hidden;
}
.hero__content--fold {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 7rem;    /* clears the fixed nav */
  padding-bottom: 5rem; /* room for the scroll cue */
}
.hero__bg {
  position: absolute;
  inset: 0;
  height: 100svh;
  bottom: auto;
  overflow: hidden;
  z-index: 0;
}
.hero__bg img {
  position: absolute;
  inset: -4%;                 /* overscan for the slow Ken Burns drift */
  width: 108%;
  height: 108%;
  object-fit: cover;
  /* portrait crew photo: on landscape screens only the vertical crop moves —
     75% keeps the band of faces in view rather than the ceiling */
  object-position: center 75%;
  filter: contrast(1.05) saturate(1.04) brightness(0.96);
  will-change: transform;
}
.hero__vignette {
  position: absolute;
  inset: 0;
  height: 100svh;
  bottom: auto;
  z-index: 1;
  pointer-events: none;
  background:
    /* protect the headline on the left, let the boxer breathe on the right */
    linear-gradient(100deg, var(--bg) 6%, rgba(7, 9, 13, 0.82) 34%, rgba(7, 9, 13, 0.35) 58%, transparent 78%),
    linear-gradient(to bottom, rgba(7, 9, 13, 0.55), transparent 26%, transparent 60%, var(--bg) 99%);
}
.hero__content { position: relative; z-index: 2; max-width: 1200px; }
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 11vw, 9.5rem);
  line-height: 0.96;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-bottom: 2.5rem;
}
.hero__line { display: block; overflow: hidden; }
.hero__line--accent { color: var(--pink); }
.hero__line--outline {
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.85);
}
.hero__ctas { display: flex; gap: 1rem; flex-wrap: wrap; }.hero__stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  margin: 0 calc(clamp(1.2rem, 4vw, 3.5rem) * -1);
}
/* Number and "+" share a line; the label wraps underneath. */
.stat {
  background: rgba(7, 9, 13, 0.6);
  backdrop-filter: blur(10px);
  padding: 1.6rem clamp(1rem, 3vw, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  align-content: flex-start;
}
.stat__label { flex-basis: 100%; }
.stat__num, .stat__plus {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  display: inline;
}
.stat__num--text { color: var(--pink); }
.stat .stat__num { display: inline-block; }
.stat__plus { color: var(--pink); }
.stat__label {
  font-size: 0.82rem;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 0.3rem;
}
.hero__scrollhint {
  position: absolute;
  top: calc(100svh - 5rem);
  right: clamp(1.2rem, 4vw, 3.5rem);
  z-index: 2;
  width: 26px;
  height: 44px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  display: flex;
  justify-content: center;
  padding-top: 8px;
}
.hero__scrollhint span {
  width: 4px;
  height: 9px;
  border-radius: 2px;
  background: var(--pink);
  animation: scrollhint 1.8s ease-in-out infinite;
}
@keyframes scrollhint {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* ── Sections (shared) ───────────────────── */
.section { padding: clamp(5rem, 10vw, 9rem) clamp(1.2rem, 4vw, 3.5rem); position: relative; }
.section__head { max-width: 1200px; margin: 0 auto 3.5rem; }
.section__eyebrow {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 1.2rem;
}
.section__title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6.5vw, 5.2rem);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.section__title em { color: var(--pink); }
.section__sub { color: var(--muted); margin-top: 1.2rem; max-width: 540px; }

/* ── About ───────────────────────────────── */
.about { background: var(--bg); }
.about__grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.about__lead { font-size: 1.35rem; font-weight: 600; line-height: 1.5; margin-bottom: 1.4rem; }
.about__text p:not(.about__lead) { color: var(--muted); margin-bottom: 1.2rem; }
.about__text strong { color: var(--text); }
.about__badges { display: flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }
.badge-card {
  border: 1px solid rgba(224, 54, 42, 0.35);
  background: linear-gradient(145deg, rgba(224, 54, 42, 0.12), rgba(224, 54, 42, 0.03));
  border-radius: 8px;
  padding: 1.1rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.badge-card__big {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--text);
  letter-spacing: 0.06em;
}.about__visual { display: grid; gap: 1.2rem; }
.about__card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.8rem;
  transition: border-color 0.35s, transform 0.35s;
}
.about__card:hover { border-color: rgba(224, 54, 42, 0.5); }
.about__card svg { width: 38px; height: 38px; color: var(--pink); margin-bottom: 1rem; }
.about__card--2 svg { color: var(--yellow); }
.about__card--3 svg { color: var(--green); }
.about__card h3 { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: 0.04em; margin-bottom: 0.4rem; text-transform: uppercase; }
.about__card p { color: var(--muted); font-size: 0.95rem; }
.about__card--2 { margin-left: 2.5rem; }

/* ── About collage (real gym photos) ─────── */
.about__collage {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: auto auto;
  gap: 1.1rem;
}
.collage__item {
  position: relative;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
}
.collage__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* unify mixed phone photos: deepen contrast, calm highlights */
  filter: contrast(1.07) saturate(1.08) brightness(0.93);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s;
}
.collage__item:hover img { transform: scale(1.045); filter: contrast(1.07) saturate(1.15) brightness(1); }
.collage__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7, 9, 13, 0.75), transparent 45%);
  pointer-events: none;
}
.collage__item figcaption {
  position: absolute;
  left: 1rem;
  bottom: 0.85rem;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.collage__item figcaption::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: var(--pink);
  margin-right: 8px;
  vertical-align: middle;
}
.collage__item--main { grid-row: 1 / 3; min-height: 420px; }
.collage__item--b { aspect-ratio: 16 / 11; }
.collage__item--c { aspect-ratio: 16 / 11; }
/* Photos graded in Photoshop already carry the look — the CSS filter above
   would stack on top of it and crush them. */
.collage__item img[data-graded] { filter: none; }
.collage__item:hover img[data-graded] { filter: saturate(1.08) brightness(1.05); }

/* ── Rounds: how a BoxFit hour runs ───────── */
.rounds__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2.2rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.round__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
  margin-bottom: 1.4rem;
  /* contain the blend layers below so they grade the clip, not the page */
  isolation: isolate;
}
.round__media video,
.round__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The clips are flat, fluorescent-lit phone footage. sepia+hue-rotate is
     the one way CSS can pull the green cast out and warm the midtones; the
     rest deepens it to sit with the Photoshop-graded stills. */
  filter: contrast(1.22) saturate(1.08) brightness(0.9) sepia(0.1) hue-rotate(-7deg);
}
/* already graded in Photoshop — don't stack the base filter on top */
.round__media img[data-graded] { filter: none; }
/* Split tone + grain. The grain is doing real work beyond taste: it breaks up
   the compression blocking these low-bitrate clips carry, and matches the
   grain baked into the stills. */
.round__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: 0.75;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E"),
    linear-gradient(to bottom, rgba(255, 168, 84, 0.34) 0%, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 68%, rgba(52, 116, 152, 0.26) 100%);
  background-size: 160px 160px, cover;
  background-repeat: repeat, no-repeat;
}
.round__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1; /* above ::before, below the round number */
  /* vignette pulls the eye off the soft, compressed corners */
  background:
    linear-gradient(to top, rgba(7, 9, 13, 0.78), transparent 55%),
    radial-gradient(ellipse at 50% 42%, transparent 48%, rgba(7, 9, 13, 0.42) 100%);
  pointer-events: none;
}
.round__num {
  position: absolute;
  left: 1rem;
  bottom: 0.7rem;
  z-index: 2;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--pink);
}
/* Finisher picker — the coaching form's chips, sized down for a card */
.round__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.round__time {
  color: var(--pink);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0.4rem 0 0.9rem;
}
.round__copy { color: var(--muted); max-width: 38ch; }
.rounds__note {
  margin-top: clamp(2rem, 4vw, 3rem);
  color: var(--muted);
  font-size: 0.95rem;
}
.rounds__note::before { content: "→ "; color: var(--pink); }

/* ── Gallery: inside the gym ──────────────── */
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.gallery__item {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
}
/* The bag corridor gets the wide slot: no aspect-ratio, so it stretches to the
   row height its portrait neighbour sets, and `cover` crops away the ceiling
   and the empty floor — leaving the run of bags and the mural. */
.gallery__item--wide { grid-column: span 2; aspect-ratio: auto; }
/* Absolute, so this portrait source can't drive the row height. The cell takes
   the height its portrait neighbour sets and `cover` crops to fill it. */
.gallery__item--wide img { position: absolute; inset: 0; }
.gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.gallery__item:hover img { transform: scale(1.05); }
.gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7, 9, 13, 0.8), transparent 48%);
  pointer-events: none;
}
.gallery__item figcaption {
  position: absolute;
  left: 1rem;
  bottom: 0.9rem;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.gallery__item figcaption::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: var(--pink);
  margin-right: 8px;
  vertical-align: middle;
}

/* ── Cinematic band (full-bleed parallax photo) ── */
.cinematic {
  position: relative;
  height: clamp(420px, 78vh, 760px);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.cinematic__media {
  position: absolute;
  inset: -14% 0;        /* overscan so the parallax shift never reveals an edge */
  z-index: 0;
}
.cinematic__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;   /* keep the boxer in frame as it narrows */
  filter: contrast(1.06) saturate(1.05) brightness(0.92);
}
.cinematic__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--bg) 4%, rgba(7, 9, 13, 0.72) 32%, rgba(7, 9, 13, 0.15) 62%, transparent 80%),
    linear-gradient(to bottom, var(--bg), transparent 18%, transparent 82%, var(--bg));
}
.cinematic__content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(1.2rem, 4vw, 3.5rem);
}
.cinematic__kicker {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 1rem;
}
.cinematic__title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 8vw, 6.5rem);
  line-height: 0.96;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.cinematic__title em {
  color: transparent;
  -webkit-text-stroke: 2px var(--pink);
}
.cinematic__link {
  display: inline-block;
  margin-top: 1.6rem;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  color: var(--text);
  border-bottom: 2px solid var(--pink);
  padding-bottom: 3px;
  transition: color 0.3s;
}
.cinematic__link:hover { color: var(--pink-soft); }

/* ── Programs ────────────────────────────── */
.programs { background: var(--bg-soft); }
.programs__list { max-width: 1200px; margin: 0 auto; border-top: 1px solid var(--line); }
.program {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 2rem;
  align-items: center;
  padding: 2.2rem 1rem;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: padding-left 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: default;
}
.program::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(224, 54, 42, 0.09), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.program:hover { padding-left: 2rem; }
.program:hover::before { opacity: 1; }
.program__index {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.35);
}
.program:hover .program__index { -webkit-text-stroke-color: var(--pink); }
.program__name {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.4rem;
  transition: color 0.3s;
}
.program:hover .program__name { color: var(--pink); }
.program__body p { color: var(--muted); max-width: 640px; font-size: 0.98rem; }
.program__tag {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  border: 1px solid rgba(150, 158, 171, 0.4);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  white-space: nowrap;
}

/* ── Schedule ────────────────────────────── */
.schedule { background: var(--bg); }
.schedule__table {
  max-width: 1200px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel);
}
.schedule__row {
  display: grid;
  grid-template-columns: 1.2fr 1.6fr 0.9fr 0.9fr;
  gap: 1rem;
  padding: 1.4rem 1.8rem;
  border-bottom: 1px solid var(--line);
  align-items: center;
  font-size: 0.98rem;
  color: var(--muted);
  transition: background 0.3s;
}
.schedule__row:last-child { border-bottom: 0; }
.schedule__row:not(.schedule__row--head):hover { background: rgba(224, 54, 42, 0.05); }
.schedule__row--head {
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
}
.schedule__class {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  color: var(--text);
  text-transform: uppercase;
}
.schedule__closed { color: rgba(154, 163, 173, 0.5); font-style: italic; }
.schedule__note {
  max-width: 1200px;
  margin: 1.6rem auto 0;
  color: var(--muted);
  font-size: 0.95rem;
}
.schedule__note::before { content: "→ "; color: var(--pink); }

/* ── Breaker (video reel) ────────────────── */
/* ── Pricing ─────────────────────────────── */
.pricing { background: var(--bg-soft); }
.pricing__grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.1rem;
  align-items: stretch;
}
.price {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color 0.35s, transform 0.35s, box-shadow 0.35s;
  transform-style: preserve-3d;
}
.price:hover { border-color: rgba(224, 54, 42, 0.5); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); }
.price h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}
.price__amount {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4vw, 3.4rem);
  line-height: 1;
  margin-bottom: 1.4rem;
}
.price__amount sup { font-size: 0.45em; color: var(--pink); margin-right: 2px; }
.price ul { flex: 1; display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 1.6rem; }
.price ul li { font-size: 0.92rem; color: var(--muted); padding-left: 1.3rem; position: relative; }
.price ul li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 800; }
.price .btn { width: 100%; }
.price--featured {
  background: linear-gradient(170deg, rgba(224, 54, 42, 0.16), var(--panel) 55%);
  border-color: var(--pink);
  box-shadow: 0 0 50px rgba(224, 54, 42, 0.18);
}
.price--featured h3 { color: var(--pink-soft); }
.price__flag {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--pink);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.35rem 1rem;
  border-radius: 999px;
  white-space: nowrap;
}
.pricing__dropin {
  max-width: 1280px;
  margin: 2.2rem auto 0;
  text-align: center;
  color: var(--muted);
  border: 1px dashed rgba(255, 176, 32, 0.4);
  border-radius: 8px;
  padding: 1.2rem;
  background: rgba(255, 176, 32, 0.04);
}
.pricing__dropin strong { color: var(--yellow); }
/* ── Contact ─────────────────────────────── */
.contact { background: var(--bg-soft); }
.contact__grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.contact__block {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 2rem;
  transition: border-color 0.35s;
}
.contact__block:hover { border-color: rgba(224, 54, 42, 0.45); }
.contact__block h3 {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--pink);
  margin-bottom: 1.1rem;
}
.contact__big { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.3; letter-spacing: 0.03em; text-transform: uppercase; }
/* two phone lines sit as one stacked pair, not two paragraphs */
.contact__big + .contact__big { margin-top: 0.25rem; }
.contact__big a:hover { color: var(--pink-soft); }
.contact__block > p:not(.contact__big) { color: var(--muted); font-size: 0.98rem; }
.contact__link {
  display: inline-block;
  margin-top: 1.2rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
  border-bottom: 2px solid var(--pink);
  padding-bottom: 2px;
  transition: color 0.3s;
}
.contact__link:hover { color: var(--pink-soft); }

/* ── Footer ──────────────────────────────── */
.footer {
  background: var(--bg);
  padding: clamp(5rem, 10vw, 8rem) clamp(1.2rem, 4vw, 3.5rem) 2rem;
  border-top: 1px solid var(--line);
}
.footer__cta {
  max-width: 1200px;
  margin: 0 auto 5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.footer__title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 8vw, 6.5rem);
  line-height: 0.98;
  text-transform: uppercase;
}
.footer__title em { color: var(--pink); }
.footer__bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--muted);
}
.footer__bottom a { border-bottom: 1px solid var(--pink); transition: color 0.3s; }
.footer__bottom a:hover { color: var(--pink-soft); }

/* ── Coaching page ───────────────────────── */
.nav__links a.is-current { color: var(--pink-soft); }
.chero {
  position: relative;
  min-height: 82vh;
  display: flex;
  align-items: center;
  padding: 8rem clamp(1.2rem, 4vw, 3.5rem) 4rem;
  overflow: hidden;
}
.chero__bg { position: absolute; inset: 0; z-index: 0; }
.chero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: contrast(1.06) saturate(0.9) brightness(0.62);
}
.chero__vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, var(--bg) 4%, rgba(7, 9, 13, 0.85) 36%, rgba(7, 9, 13, 0.35) 62%, rgba(7, 9, 13, 0.15) 80%),
    linear-gradient(to bottom, rgba(7, 9, 13, 0.6), transparent 30%, transparent 62%, var(--bg) 99%);
}
.chero__content {
  position: relative; z-index: 2; max-width: 1200px; width: 100%; margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
/* Contained rather than used as the backdrop — the source is 900px wide, so
   stretching it full-bleed would upscale ~1.6x and go soft. The ring photo
   stays behind it for depth. */
.chero__portrait {
  position: relative;
  margin: 0;
  justify-self: end;
  width: 100%;
  max-width: 400px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}
.chero__portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
}
.chero__portrait::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7, 9, 13, 0.85), transparent 42%);
  pointer-events: none;
}
.chero__portrait figcaption {
  position: absolute;
  left: 1rem; bottom: 0.9rem;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}
.chero__portrait figcaption em { color: var(--pink-soft); font-style: normal; }
/* Whole portrait is a "book with this coach" link */
.chero__pick { position: absolute; inset: 0; z-index: 3; }
.chero__pick:focus-visible { outline: 2px solid var(--pink-soft); outline-offset: -4px; border-radius: 12px; }
.chero__portrait img { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.chero__portrait:hover img { transform: scale(1.03); }
/* Two coaches side by side; the second sits lower so the pair reads as a
   composed spread rather than a grid of ID photos. */
.chero__coaches {
  justify-self: end;
  width: 100%;
  max-width: 540px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  align-items: start;
}
.chero__coaches .chero__portrait { max-width: none; justify-self: stretch; }
.chero__coaches .chero__portrait:nth-child(2) { margin-top: clamp(1.5rem, 4vw, 3.5rem); }
.chero__title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 9vw, 7.5rem);
  line-height: 0.98;
  text-transform: uppercase;
  margin: 0.6rem 0 1.4rem;
}
.chero__title em { color: transparent; -webkit-text-stroke: 2px var(--pink); }
.chero__sub { max-width: 520px; color: var(--muted); font-size: 1.08rem; }
.chero__sub strong { color: var(--text); }
.chero__ctas { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 2.2rem; }
.chero__note { color: var(--muted); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; }

.coffer { background: var(--bg-soft); }
.coffer__grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem;
}
.coffer__card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.8rem;
  transition: border-color 0.3s;
}
.coffer__card:hover { border-color: rgba(224, 54, 42, 0.5); }
.coffer__num {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--pink);
  display: block;
  margin-bottom: 0.7rem;
}
.coffer__card h3 { font-family: var(--font-display); font-size: 1.35rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.5rem; }
.coffer__card p { color: var(--muted); font-size: 0.96rem; }
.coffer__steps {
  max-width: 1200px; margin: 2.5rem auto 0;
  display: flex; gap: 1rem; flex-wrap: wrap;
}
.coffer__step {
  flex: 1; min-width: 220px;
  display: flex; align-items: center; gap: 0.9rem;
  border: 1px dashed rgba(224, 54, 42, 0.35);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.95rem;
}
.coffer__step i {
  font-family: var(--font-display);
  font-style: normal;
  color: var(--pink);
  font-size: 1.2rem;
}

.cbook { background: var(--bg); }
.cform { max-width: 760px; margin: 0 auto; }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cform .field { margin-bottom: 1.3rem; }
.cform .field > label {
  display: block;
  font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.cform__hint { text-transform: none; letter-spacing: 0; font-weight: 500; opacity: 0.7; }
.cform input, .cform textarea {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.9rem 1rem;
  color: var(--text);
  font: inherit;
  outline: none;
  transition: border-color 0.25s;
  resize: vertical;
}
.cform input:focus, .cform textarea:focus { border-color: var(--pink); }
.chips { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.chip {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.15s;
}
.chip:active { transform: scale(0.96); }
/* Coach picker: chips with a face, so people pick a person not a name */
.coachpick__opt { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.35rem 1.1rem 0.35rem 0.35rem; }
.coachpick__opt img { width: 2.2rem; height: 2.2rem; border-radius: 50%; object-fit: cover; object-position: center 20%; }
.chip.is-on {
  border-color: var(--pink);
  color: #fff;
  background: rgba(224, 54, 42, 0.18);
}
.cform__alt { margin-top: 0.7rem; }
.cform__sent {
  margin-top: 0.9rem; text-align: center; font-weight: 700;
  color: var(--text);
  background: rgba(224, 54, 42, 0.12);
  border: 1px solid rgba(224, 54, 42, 0.45);
  border-radius: 10px; padding: 0.9rem 1rem;
}
.cform__sent[hidden] { display: none; }
.cform .btn[hidden] { display: none; }
.cform__foot { color: var(--muted); font-size: 0.85rem; margin-top: 0.9rem; text-align: center; }
.btn--block { width: 100%; }

/* Coaching teaser on the landing page */
.coachtease { background: var(--bg); }
.coachtease__inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.coachtease__sub { color: var(--muted); margin: 1.3rem 0 2rem; max-width: 480px; }
.coachtease__sub strong { color: var(--text); }
.coachtease__visual { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.coachtease__visual img {
  display: block; width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover;
  filter: contrast(1.07) saturate(1.05) brightness(0.9);
}
/* Coach portrait: already lit and graded as a studio shot, and it's a 4:5
   portrait — the section's landscape crop and filter would both fight it. */
.coachtease__visual--portrait img { aspect-ratio: 4 / 5; filter: none; }
.coachtease__badge {
  position: absolute; left: 1rem; bottom: 1rem;
  background: rgba(7, 9, 13, 0.72);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.coachtease__badge em { color: var(--pink-soft); font-style: normal; }
.coachtease__duo {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(0.75rem, 1.6vw, 1.1rem); align-items: start;
}
.coachtease__duo .coachtease__visual { display: block; }
.coachtease__duo .coachtease__visual:nth-child(2) { margin-top: clamp(1.5rem, 4vw, 3rem); }
/* Paired portraits: caption sits on a gradient like the coaching page,
   not in a pill, so a name that wraps never covers the photo. */
.coachtease__duo .coachtease__visual::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(7, 9, 13, 0.85), transparent 42%);
}
.coachtease__duo .coachtease__badge {
  z-index: 2; left: 0.9rem; right: 0.9rem; bottom: 0.8rem;
  background: none; border: 0; border-radius: 0; padding: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  font-family: var(--font-display); font-weight: 400;
  font-size: 0.95rem; line-height: 1.2; letter-spacing: 0.08em;
}
/* Small phones: each portrait is ~160px wide; the heading already says
   coach, so the name alone carries the caption. */
@media (max-width: 600px) {
  .coachtease__duo .coachtease__badge { left: 0.7rem; right: 0.7rem; bottom: 0.65rem; font-size: 0.78rem; }
  .coachtease__duo .coachtease__badge em,
  .chero__coaches .chero__portrait figcaption em { display: none; }
}

/* Shared: coaching form validation message */
.error { color: var(--pink-soft); font-size: 0.92rem; margin-top: 0.9rem; text-align: center; }

@media (max-width: 900px) {
  .coffer__grid { grid-template-columns: 1fr; }
  .chero__content { grid-template-columns: 1fr; gap: 2.5rem; }
  .chero__portrait { justify-self: start; max-width: 300px; }
  .chero__coaches { justify-self: stretch; max-width: 520px; }
  .chero__coaches .chero__portrait figcaption { left: 0.7rem; right: 0.7rem; bottom: 0.65rem; font-size: 0.78rem; line-height: 1.25; }
  .cform__row { grid-template-columns: 1fr; }
  .coachtease__inner { grid-template-columns: 1fr; }
}

/* ── Responsive ──────────────────────────── */
/* Large tablets / small laptops */
@media (max-width: 1180px) {
  .rounds__grid { grid-template-columns: repeat(2, 1fr); }
  .pricing__grid { grid-template-columns: repeat(3, 1fr); }
  .price--featured { grid-column: span 1; }
}
/* iPad portrait & small tablets */
@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .about__grid { grid-template-columns: 1fr; }
  .about__card--2 { margin-left: 0; }

  /* Bottom-weighted on touch sizes: centring left the block high under the
     nav (190px above vs 254px below) and ran the headline across the boxer's
     face. Anchoring low clears his face, kills the dead space above the cue,
     and puts the CTAs where the thumb already is. */
  .hero__content--fold {
    justify-content: flex-end;
    padding-top: 6rem;
    padding-bottom: 7rem;  /* clears the scroll cue */
  }
  .hero__scrollhint { left: 50%; right: auto; transform: translateX(-50%); }
  .program { grid-template-columns: 48px 1fr; row-gap: 0.7rem; }
  .program__tag { grid-column: 2; justify-self: start; }
  .about__collage { grid-template-columns: 1fr 1fr; }
  .collage__item--main { grid-column: 1 / -1; grid-row: auto; min-height: 0; aspect-ratio: 16 / 10; }
  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .rounds__grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .round { display: grid; grid-template-columns: 200px 1fr; column-gap: 1.6rem; align-items: start; }
  .round__media { grid-row: 1 / 4; margin-bottom: 0; aspect-ratio: 3 / 4; }
  .round__copy { max-width: none; }
  .contact__grid { grid-template-columns: 1fr; }
  .schedule__row { grid-template-columns: 1.1fr 1.4fr 0.7fr 0.7fr; gap: 0.7rem; padding: 1.3rem 1.2rem; font-size: 0.88rem; }
  .schedule__class { font-size: 1.02rem; }
  .pricing__grid { grid-template-columns: repeat(2, 1fr); }
}
/* Portrait screens show the crew photo's full height, so object-position
   can't lift the group clear of the bottom-weighted headline — they'd sit
   right behind it under a band of empty ceiling. Raise the image box instead
   and fade its lower edge into the page. Portrait only: landscape phones crop
   vertically and object-position already does the job there. */
@media (max-width: 900px) and (orientation: portrait) {
  .hero__bg img {
    top: -30%;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  }
}
/* Phones & phablets: schedule stacks into per-class cards,
   day labels come from data-label so no column is lost */
@media (max-width: 700px) {
  .schedule__row--head { display: none; }
  .schedule__row { grid-template-columns: 1fr; gap: 0.3rem; }
  .schedule__class { margin-bottom: 0.25rem; }
  .schedule__row > div[data-label]::before {
    content: attr(data-label);
    display: inline-block;
    min-width: 5.4em;
    margin-right: 0.6rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text);
    opacity: 0.55;
  }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .pricing__grid { grid-template-columns: 1fr; }
  .hero__ctas .btn { flex: 1 1 100%; }
  .stat { padding: 1.2rem 1rem; }
  .section__head { margin-bottom: 2.4rem; }
  .program { grid-template-columns: 1fr; padding: 1.8rem 0.5rem; }
  .program:hover { padding-left: 0.5rem; }
  .program__index { display: none; }
  .program__tag { grid-column: 1; }
  .about__collage { grid-template-columns: 1fr; }
  .collage__item--b, .collage__item--c { aspect-ratio: 16 / 10; }
  .gallery__grid { grid-template-columns: 1fr; }
  .round { grid-template-columns: 1fr; }
  .round__media { grid-row: auto; margin-bottom: 1.2rem; aspect-ratio: 4 / 5; }
  .gallery__item--wide { grid-column: span 1; aspect-ratio: 16 / 10; }
  .footer__cta .btn { width: 100%; }
  .contact__block { padding: 1.5rem; }
  .about__lead { font-size: 1.2rem; }
}
/* Small phones */
@media (max-width: 400px) {
  .stat__num, .stat__plus { font-size: 1.5rem; }
  .btn--lg { padding: 1rem 1.7rem; font-size: 0.98rem; }
  .mobmenu__foot { font-size: 0.8rem; }
}

/* Touch devices: backdrop-filter blur is re-composited on every scrolled
   frame and is the main mobile FPS killer — swap for more-opaque solids. */
@media (hover: none) and (pointer: coarse) {
  .nav.is-scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(7, 9, 13, 0.95); }
  .stat { backdrop-filter: none; background: rgba(7, 9, 13, 0.82); }
  .btn--ghost { backdrop-filter: none; background: rgba(20, 24, 30, 0.5); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}