/* ==========================================================================
   Darius Skliaudys — Muay Thai & MMA, Barking
   Design language: fight poster meets documentary editorial.
   Ink + gold + warm chalk. One accent. No gradients-as-decoration.
   ========================================================================== */

:root {
  /* Ink */
  --ink:        #0A0A0B;
  --ink-1:      #101012;
  --ink-2:      #17171A;
  --ink-3:      #222226;

  /* Chalk — warm off-white, never pure #fff (reads cheaper and glares) */
  --chalk:      #F2EEE6;
  --chalk-70:   rgba(242, 238, 230, 0.70);
  --chalk-52:   rgba(242, 238, 230, 0.52);
  --chalk-32:   rgba(242, 238, 230, 0.32);
  --chalk-14:   rgba(242, 238, 230, 0.14);
  --chalk-08:   rgba(242, 238, 230, 0.08);

  /* The single accent — the gym's own vivid yellow, kept hot.
     An earlier, muted #E9B949 read as tired on a black ground; combat sport
     needs the colour to have some voltage in it. */
  --gold:       #FFC01E;
  --gold-hot:   #FFD24D;
  --gold-deep:  #E09600;
  --gold-08:    rgba(255, 192, 30, 0.09);
  --gold-20:    rgba(255, 192, 30, 0.22);
  --gold-40:    rgba(255, 192, 30, 0.42);

  /* Used once, for a KO. Scarcity is the point. */
  --blood:      #D8402A;

  --shell:      min(1240px, 100% - 2.5rem);
  --shell-tight: min(880px, 100% - 2.5rem);

  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

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

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--chalk);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; }

::selection { background: var(--gold); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

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

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.92;
  margin: 0;
  /* Anton has deep descenders; without this the 'y' in Skliaudys clips. */
  padding-bottom: 0.06em;
}

/* Capped by height as well as width: on a 900px-tall laptop a 9.5rem headline
   plus the claim and CTAs does not fit, and the top of the block gets eaten. */
.h-hero    { font-size: clamp(3rem, min(11vw, 13.5vh), 8rem); }
.h-section { font-size: clamp(2.4rem, 6.5vw, 5.25rem); }
.h-sub     { font-size: clamp(1.5rem, 3.2vw, 2.25rem); }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::before {
  content: '';
  width: 2rem;
  height: 1px;
  background: var(--gold);
  flex: none;
}

.lede {
  font-size: clamp(1.0625rem, 1.9vw, 1.3125rem);
  line-height: 1.6;
  color: var(--chalk-70);
  max-width: 62ch;
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.gold { color: var(--gold); }

/* ------------------------------------------------------- layout -------- */

section { position: relative; }

.shell       { width: var(--shell); margin-inline: auto; }
.shell-tight { width: var(--shell-tight); margin-inline: auto; }

.pad     { padding-block: clamp(5rem, 11vw, 9.5rem); }
.pad-sm  { padding-block: clamp(3.5rem, 7vw, 5.5rem); }

.rule { height: 1px; background: var(--chalk-14); border: 0; margin: 0; }

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

.btn {
  --btn-bg: linear-gradient(175deg, var(--gold-hot) 0%, var(--gold) 46%, var(--gold-deep) 100%);
  --btn-fg: var(--ink);
  --btn-edge: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.0625rem 2rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--btn-edge);
  border-radius: 2px;
  cursor: pointer;
  box-shadow: 0 6px 18px -10px var(--gold-40);
  transition: transform 0.25s var(--ease), filter 0.25s var(--ease),
              color 0.25s var(--ease), box-shadow 0.25s var(--ease),
              border-color 0.25s var(--ease);
  will-change: transform;
}
.btn:hover {
  transform: translateY(-2px);
  filter: saturate(1.12) brightness(1.06);
  box-shadow: 0 16px 38px -12px rgba(255, 192, 30, 0.55);
}
.btn:active { transform: translateY(0); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--chalk);
  --btn-edge: var(--chalk-32);
  box-shadow: none;
}
.btn--ghost:hover {
  border-color: var(--gold);
  background: var(--gold-08);
  color: var(--gold);
  filter: none;
  box-shadow: none;
}

.btn--block { width: 100%; }

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

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.125rem max(1.25rem, calc((100vw - 1240px) / 2));
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease),
              backdrop-filter 0.35s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav[data-stuck='true'] {
  background: rgba(10, 10, 11, 0.86);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom-color: var(--chalk-14);
}

.nav__brand {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.nav__brand span { color: var(--gold); }

.nav__links {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.nav__links a {
  color: var(--chalk-70);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.nav__links a:hover { color: var(--chalk); }

@media (max-width: 980px) { .nav__links { display: none; } }
@media (max-width: 560px) { .nav .btn { padding: 0.8125rem 1.125rem; font-size: 0.8125rem; } }

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

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  /* Top padding clears the fixed nav. Without it, on a short laptop viewport
     the eyebrow slides up underneath the nav links. */
  padding-top: clamp(6rem, 12vh, 9rem);
  padding-bottom: clamp(2rem, 5vw, 4rem);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* The video carries its own poster — the same hero still — so the element is
   never an empty black rectangle while it buffers, and there is no JS gate
   that can fail and leave the hero blank. It simply plays over the top. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  z-index: 1;
  /* Grade is baked into the encode, so this only corrects it: a touch of
     saturation back, because the gym's yellow is the brand colour and the
     encode had pulled it flat, and the scrim below already guarantees the
     headline stays readable without dimming the footage further. */
  filter: brightness(0.98) saturate(1.22);
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Portrait source (3:4) in a landscape frame crops hard. 42% keeps Darius
     himself in shot rather than only the graffiti above him. */
  object-position: 50% 42%;
  filter: grayscale(0.28) contrast(1.06) brightness(0.82);
  transform: scale(1.06);
  animation: heroDrift 26s var(--ease) infinite alternate;
}
@keyframes heroDrift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.13) translate3d(0, -1.4%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__media img { animation: none; transform: scale(1.06); }
}

/* Two stacked scrims: a vertical one for text legibility at the bottom,
   and a warm vignette so the photo doesn't look flatly dimmed. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;              /* must sit above the video layer, not just the photo */
  background:
    radial-gradient(120% 80% at 50% 10%, transparent 20%, rgba(10,10,11,0.55) 100%),
    linear-gradient(to bottom,
      rgba(10,10,11,0.72) 0%,
      rgba(10,10,11,0.30) 32%,
      rgba(10,10,11,0.72) 68%,
      var(--ink) 99%);
}

.hero__inner { position: relative; z-index: 1; }

.hero h1 { margin-bottom: 1.5rem; }
.hero h1 em {
  font-style: normal;
  display: block;
  color: var(--gold);
}

/* Letter-by-letter reveal. Letters are plain text in the markup and visible
   by default — the animation is gated on html.js so that a failure to run
   scripts can never leave the headline blank. */
.ltr { display: inline-block; white-space: pre; }

html.js .hero h1 .ltr {
  opacity: 0;
  transform: translateY(0.5em) rotate(1.5deg);
  animation: letterIn 0.66s var(--ease) forwards;
  animation-delay: calc(var(--i) * 32ms + 150ms);
}
@keyframes letterIn {
  to { opacity: 1; transform: none; }
}

/* The gold line lands last and gets a brief flare, so the eye finishes on
   the word that matters. */
html.js .hero h1 em .ltr { animation-name: letterInHot; }
@keyframes letterInHot {
  0%   { opacity: 0; transform: translateY(0.5em) rotate(1.5deg); }
  60%  { opacity: 1; transform: none; text-shadow: 0 0 26px rgba(255,192,30,0.55); }
  100% { opacity: 1; transform: none; text-shadow: 0 0 0 rgba(255,192,30,0); }
}

@media (prefers-reduced-motion: reduce) {
  html.js .hero h1 .ltr { opacity: 1; transform: none; animation: none; }
}

.hero__claim {
  font-size: clamp(1.0625rem, 2.1vw, 1.375rem);
  line-height: 1.5;
  color: var(--chalk-70);
  max-width: 46ch;
  margin: 0 0 2.25rem;
}
.hero__claim strong { color: var(--chalk); font-weight: 600; }

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-bottom: 2.5rem;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  color: var(--chalk-52);
  border-top: 1px solid var(--chalk-14);
  padding-top: 1.25rem;
}
.hero__meta b { color: var(--chalk); font-weight: 600; }

/* ------------------------------------------------- credential rail ----- */

.rail {
  background: var(--ink-1);
  border-block: 1px solid var(--chalk-14);
  overflow: hidden;
}
.rail__track {
  display: flex;
  gap: 3.5rem;
  padding-block: 1.125rem;
  width: max-content;
  animation: railScroll 46s linear infinite;
}
.rail:hover .rail__track { animation-play-state: paused; }
@keyframes railScroll { to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .rail__track { animation: none; } }

.rail__item {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  white-space: nowrap;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chalk-70);
}
.rail__item::after {
  content: '';
  width: 5px; height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
  flex: none;
}

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

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--chalk-14);
  border: 1px solid var(--chalk-14);
}
.stat {
  background: var(--ink);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.stat__n {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  line-height: 0.9;
  color: var(--gold);
  display: block;
  margin-bottom: 0.625rem;
}
.stat__l {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--chalk-52);
  letter-spacing: 0.02em;
}

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

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.split--wide-left { grid-template-columns: 1.15fr 0.85fr; }
@media (max-width: 900px) {
  .split, .split--wide-left { grid-template-columns: 1fr; }
}

.frame {
  position: relative;
  overflow: hidden;
  background: var(--ink-2);
}
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--tall { aspect-ratio: 3 / 4; }
.frame--wide { aspect-ratio: 4 / 3; }

/* A hairline gold edge instead of a border — reads as craft, not chrome. */
.frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--chalk-14);
  pointer-events: none;
}

.frame__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1.25rem 1.125rem;
  background: linear-gradient(to top, rgba(10,10,11,0.92), transparent);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--chalk-70);
}

/* --------------------------------------------------- record table ------ */

.record {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}
.record caption {
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chalk-52);
  padding-bottom: 1rem;
}
.record th {
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chalk-32);
  padding: 0 0.75rem 0.75rem 0;
  border-bottom: 1px solid var(--chalk-14);
  white-space: nowrap;
}
.record td {
  padding: 0.8125rem 0.75rem 0.8125rem 0;
  border-bottom: 1px solid var(--chalk-08);
  vertical-align: top;
  color: var(--chalk-70);
}
.record tr:hover td { background: var(--chalk-08); }
.record td:first-child { padding-left: 0.5rem; }

.res {
  display: inline-block;
  min-width: 1.5rem;
  font-weight: 700;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  padding: 0.125rem 0.375rem;
  border-radius: 2px;
}
.res--w { background: var(--gold); color: var(--ink); }
.res--l { background: var(--chalk-14); color: var(--chalk-52); }
.res--d { background: transparent; color: var(--chalk-32); border: 1px solid var(--chalk-14); }

.record__op { color: var(--chalk); font-weight: 500; }
.record__note {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--gold);
  letter-spacing: 0.01em;
  margin-top: 0.25rem;
}

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

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

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
  gap: 1.25rem;
}

.card {
  background: var(--ink-1);
  border: 1px solid var(--chalk-14);
  padding: clamp(1.5rem, 3vw, 2.125rem);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.card:hover { border-color: var(--gold-40); transform: translateY(-3px); }
.card__n {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--gold);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 1rem;
}
.card h3 { font-size: 1.25rem; margin-bottom: 0.75rem; letter-spacing: 0; }
.card p { color: var(--chalk-70); font-size: 0.9375rem; margin: 0; line-height: 1.6; }

/* -------------------------------------------------------- gallery ------ */

.mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}
.mosaic > * { overflow: hidden; background: var(--ink-2); }
.mosaic img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s var(--ease), filter 0.5s var(--ease);
  filter: grayscale(0.15) contrast(1.03);
}
.mosaic > *:hover img { transform: scale(1.05); filter: grayscale(0) contrast(1.06); }
.m-tall  { grid-row: span 2; aspect-ratio: 3 / 4.2; }
.m-wide  { grid-column: span 2; aspect-ratio: 2 / 1; }
.m-sq    { aspect-ratio: 1; }
@media (max-width: 820px) {
  .mosaic { grid-template-columns: repeat(2, 1fr); }
  .m-wide { grid-column: span 2; }
}

/* --------------------------------------------------------- video ------- */

.reels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
}
.reel {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--chalk-14);
}
.reel video {
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.05) saturate(0.94);
}
.reel__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 3rem 1rem 1rem;
  background: linear-gradient(to top, rgba(10,10,11,0.94), transparent);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--chalk-70);
}

/* ------------------------------------------------------- pricing ------- */

/* The free class sits above the ladder, not inside it — it is the way in,
   not a tier you weigh against the others. */
.offer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  margin-bottom: 1.75rem;
  padding: clamp(1.5rem, 3vw, 2.125rem);
  border: 1px solid var(--gold-40);
  background:
    radial-gradient(120% 180% at 0% 0%, var(--gold-08), transparent 60%),
    var(--ink-1);
}
.offer__main { flex: 1 1 22rem; }
.offer__flag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.75rem;
}
.offer__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  letter-spacing: 0;
  line-height: 1.05;
  margin: 0 0 0.75rem;
}
.offer__sub {
  margin: 0;
  color: var(--chalk-70);
  font-size: 0.9375rem;
  max-width: 52ch;
}
@media (max-width: 640px) { .offer .btn { width: 100%; } }

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ink-1);
  border: 1px solid var(--chalk-14);
  padding: clamp(1.75rem, 3vw, 2.25rem);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.plan:hover { border-color: var(--chalk-32); }

.plan--feature {
  border-color: var(--gold);
  background: linear-gradient(180deg, var(--gold-08), transparent 45%), var(--ink-1);
}
.plan--feature:hover { border-color: var(--gold); transform: translateY(-4px); }

.plan__flag {
  position: absolute;
  top: 0; right: clamp(1.75rem, 3vw, 2.25rem);
  transform: translateY(-50%);
  background: var(--gold);
  color: var(--ink);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.375rem 0.75rem;
  border-radius: 2px;
}

.plan__name {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.375rem;
  letter-spacing: 0;
  margin-bottom: 0.375rem;
}
.plan__blurb {
  font-size: 0.875rem;
  color: var(--chalk-52);
  margin: 0 0 1.5rem;
  min-height: 2.6em;
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  margin-bottom: 0.375rem;
}
.plan__price b {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.25rem);
  font-weight: 400;
  line-height: 0.9;
}
.plan__price span { font-size: 0.875rem; color: var(--chalk-52); }

.plan__sub {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--gold);
  margin-bottom: 0.5rem;
  min-height: 1.2em;
}
.plan__was {
  font-size: 0.8125rem;
  color: var(--chalk-32);
  margin-bottom: 1.5rem;
  min-height: 1.4em;
}
.plan__was s { text-decoration-color: var(--chalk-32); }

.plan__list {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: grid;
  gap: 0.6875rem;
  font-size: 0.875rem;
  color: var(--chalk-70);
  flex: 1;
}
/* Bullet is positioned, NOT a grid/flex child. With `display:grid` on the li,
   every inline node inside it (each <b>, each text run) becomes its own grid
   item and the line shatters into columns — which is exactly what happened
   to "Twice a week — £55 a month". */
.plan__list li {
  position: relative;
  padding-left: 1.125rem;
}
.plan__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px; height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
}

.plan__note {
  font-size: 0.75rem;
  color: var(--chalk-32);
  margin: 0.875rem 0 0;
  text-align: center;
}

/* ------------------------------------------------------ schedule ------- */

.slots { display: grid; gap: 1px; background: var(--chalk-14); border: 1px solid var(--chalk-14); }
.slot {
  background: var(--ink);
  display: grid;
  grid-template-columns: minmax(120px, 0.5fr) minmax(140px, 0.6fr) 1fr;
  gap: 1rem;
  padding: 1.375rem clamp(1rem, 2.5vw, 1.75rem);
  align-items: baseline;
}
.slot__day {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.375rem;
  letter-spacing: 0;
}
.slot__time { font-family: var(--font-mono); color: var(--gold); font-size: 0.9375rem; }
.slot__what { color: var(--chalk-52); font-size: 0.9375rem; }
@media (max-width: 640px) {
  .slot { grid-template-columns: 1fr 1fr; row-gap: 0.375rem; }
  .slot__what { grid-column: 1 / -1; }
}

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

.faq { border-top: 1px solid var(--chalk-14); }
.faq details {
  border-bottom: 1px solid var(--chalk-14);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.5rem 3rem 1.5rem 0;
  position: relative;
  font-size: clamp(1rem, 2vw, 1.1875rem);
  font-weight: 600;
  transition: color 0.2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--gold); }
.faq summary::after {
  content: '';
  position: absolute;
  right: 0.5rem; top: 50%;
  width: 13px; height: 13px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq p {
  margin: 0;
  padding: 0 3rem 1.75rem 0;
  color: var(--chalk-70);
  max-width: 72ch;
}

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

.form { display: grid; gap: 1.125rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.125rem; }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }

.field { display: grid; gap: 0.5rem; }
.field label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chalk-52);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--ink-2);
  border: 1px solid var(--chalk-14);
  border-radius: 2px;
  color: var(--chalk);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.9375rem 1rem;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.field textarea { resize: vertical; min-height: 6.5rem; }
.field input::placeholder, .field textarea::placeholder { color: var(--chalk-32); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--ink-3);
}
.field select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--gold) 50%),
    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.75rem;
}
.field select option { background: var(--ink-2); color: var(--chalk); }

.form__msg {
  font-size: 0.875rem;
  padding: 0.875rem 1rem;
  border-radius: 2px;
  display: none;
}
.form__msg[data-state='ok'] {
  display: block;
  background: var(--gold-08);
  border: 1px solid var(--gold-40);
  color: var(--gold);
}
.form__msg[data-state='err'] {
  display: block;
  background: rgba(216, 64, 42, 0.1);
  border: 1px solid rgba(216, 64, 42, 0.4);
  color: #F09383;
}

.form__legal { font-size: 0.75rem; color: var(--chalk-32); margin: 0; }
.form__legal a { color: var(--chalk-52); }

.referred {
  display: none;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--gold);
  background: var(--gold-08);
  border: 1px solid var(--gold-20);
  border-radius: 2px;
  padding: 0.625rem 0.875rem;
}
.referred[data-on='true'] { display: flex; }

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

.foot {
  background: var(--ink-1);
  border-top: 1px solid var(--chalk-14);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.foot__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 3rem;
}
@media (max-width: 780px) { .foot__grid { grid-template-columns: 1fr; gap: 2rem; } }
.foot h4 {
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chalk-32);
  margin: 0 0 1rem;
  font-weight: 600;
}
.foot a { color: var(--chalk-70); text-decoration: none; }
.foot a:hover { color: var(--gold); }
.foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; font-size: 0.9375rem; }
.foot__bottom {
  border-top: 1px solid var(--chalk-14);
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--chalk-32);
}

/* --------------------------------------------------- sticky cta -------- */

.dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 55;
  display: none;
  gap: 0.625rem;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  background: rgba(10, 10, 11, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--chalk-14);
  transform: translateY(110%);
  transition: transform 0.35s var(--ease);
}
.dock[data-on='true'] { transform: translateY(0); }
.dock .btn { flex: 1; padding: 0.9375rem 1rem; font-size: 0.8125rem; }
@media (max-width: 780px) { .dock { display: flex; } body { padding-bottom: 0; } }

/* -------------------------------------------------------- reveal ------- */

/* Gated on html.js — set by an inline script in <head>. If JS never runs, or
   throws before the observer is wired, the page must still be fully visible.
   Hiding content by default and revealing it with JS is how a whole site
   silently disappears. */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
html.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; }
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: var(--ink);
  padding: 0.75rem 1.25rem;
  z-index: 100;
  font-weight: 700;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }