/* Physical Performance — design system
   Source file. Edit here, then run `python3 scripts/build.py`, which writes a
   content-hashed copy to site/assets/ and updates every page reference.

   Palette, logo and photography follow the Physical Performance Website Design
   Pack: near-black and charcoal as the dominant environment, white for reading
   surfaces, and the brand blue sampled from the supplied logo as the single
   restrained accent. No JavaScript, no external fonts, no remote assets. */

/* ---------------------------------------------------------------- tokens - */

:root {
  /* Dark environment — the brand's home ground. */
  --ink: #0b0d0f;
  --ink-2: #121619;
  --ink-3: #1a1f23;
  --ink-line: #262c31;

  /* Light reading surfaces. */
  --paper: #ffffff;
  --paper-2: #f3f4f6;
  --line: #e3e5e8;
  --line-strong: #c6cad0;

  /* Text */
  --text: #0d1114;
  --text-muted: #545c64;
  --on-dark: #f2f4f6;
  --on-dark-muted: #a5aeb6;

  /* Brand blue, sampled from the supplied colour logo. */
  --blue: #0d6fc6;
  --blue-hover: #0b5faa;
  --blue-bright: #4ea6f2;
  --blue-deep: #0a5599;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.3125rem;
  --fs-xl: 1.625rem;
  --fs-2xl: clamp(1.65rem, 1.1rem + 2.2vw, 2.5rem);
  --fs-3xl: clamp(2rem, 1.3rem + 2.5vw, 3rem);
  --fs-4xl: clamp(2.25rem, 1.4rem + 3.2vw, 3.75rem);

  /* Display tier. The audit found nothing on the page larger than the hero
     headline, and proposition numerals set smaller than body text. These two
     steps exist so a number or a single word can carry a section on its own. */
  --fs-display: clamp(2rem, 1.2rem + 3.3vw, 4rem);
  --fs-numeral: clamp(5rem, 1rem + 19vw, 15rem);
  --fs-numeral-sm: clamp(2.75rem, 1.4rem + 5.6vw, 5.5rem);

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --section-y: clamp(3rem, 6vw, 5.5rem);

  --wrap: 1240px;
  --wrap-narrow: 720px;
  --gutter: clamp(1.25rem, 5vw, 3rem);

  --radius: 4px;
  --border: 1px solid var(--line);
}

/* ------------------------------------------------------------- elements - */

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

html {
  scroll-behavior: smooth;
  /* Deep enough to clear the sticky header at its tallest, which on a phone is
     the logo row plus the navigation row. */
  scroll-padding-top: 8.5rem;
  -webkit-text-size-adjust: 100%;
}

/* Focus not obscured (WCAG 2.2, 2.4.11): anything that can be reached by
   keyboard is scrolled clear of the sticky header, not under it. */
a, button, summary, [tabindex] { scroll-margin-top: 9rem; }

@media (min-width: 700px) {
  html { scroll-padding-top: 6rem; }
  a, button, summary, [tabindex] { scroll-margin-top: 6.5rem; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--sp-4);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 800;
  font-stretch: 95%;
  text-wrap: balance;
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); letter-spacing: -0.015em; font-weight: 700; }

h4 { font-size: var(--fs-md); letter-spacing: -0.01em; font-weight: 700; }

p, ul, ol { margin: 0 0 var(--sp-4); }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a { color: inherit; text-underline-offset: 0.25em; }
a:hover { text-decoration-thickness: 2px; }

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

.on-dark :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible { outline-color: var(--blue-bright); }

address { font-style: normal; }
img { max-width: 100%; height: auto; display: block; }
hr { border: 0; border-top: var(--border); margin: var(--sp-7) 0; }

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

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

.wrap--narrow { max-width: var(--wrap-narrow); }

/* Below the two-column breakpoint the halves simply stack, so they need their
   own vertical rhythm. */
.grid--2 > * + * { margin-top: var(--sp-8); }

.grid--2 > *,
.split > *,
.compare > li,
.gallery > li,
.contact-actions > li,
.site-footer__grid > * { min-width: 0; }

.band {
  padding-block: var(--section-y);
  background: var(--paper);
  color: var(--text);
}

.band--tight { padding-block: clamp(2.25rem, 5vw, 4rem); }
.band--tint { background: var(--paper-2); }

.band--dark {
  background: var(--ink);
  color: var(--on-dark);
}

.band--dark h1,
.band--dark h2,
.band--dark h3,
.band--dark h4 { color: var(--on-dark); }

.band--dark p,
.band--dark li { color: var(--on-dark-muted); }

.band--charcoal { background: var(--ink-2); color: var(--on-dark); }
.band--charcoal h2, .band--charcoal h3 { color: var(--on-dark); }
.band--charcoal p, .band--charcoal li { color: var(--on-dark-muted); }

.skip {
  position: absolute;
  left: var(--sp-4);
  top: -6rem;
  z-index: 30;
  background: var(--blue);
  color: #fff;
  padding: var(--sp-3) var(--sp-4);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius);
}

.skip:focus { top: var(--sp-3); }

/* ---------------------------------------------------------------- header - */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--ink);
  border-bottom: 1px solid var(--ink-line);
  color: var(--on-dark);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 3.5rem;
  padding-block: var(--sp-2);
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  text-decoration: none;
  flex: none;
}

.brand img {
  width: auto;
  /* The authoritative lockup is stacked, not a single line of type, so it needs
     more height than a wordmark to keep PHYSICAL and the PERFORMANCE bar
     legible. Kept small enough that the header never dominates the first
     screen on a phone. */
  height: 2.25rem;
}

.brand { order: 1; }
.header-cta { order: 2; }

/* Mobile: navigation drops to its own full-width row beneath the logo, and the
   Enquire button stays beside the logo. Five destinations will not fit on one
   line at 320px, so the row becomes an even grid that adds a column as the
   screen widens rather than leaving one item stranded on its own line. */
.nav {
  order: 3;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  border-top: 1px solid var(--ink-line);
}

.nav a:not(.btn) {
  text-decoration: none;
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--on-dark);
  padding-block: 0.6rem;
  border-bottom: 2px solid transparent;
  /* At large text sizes a label breaks rather than pushing the page sideways. */
  overflow-wrap: anywhere;
}

.nav a:not(.btn):hover { border-bottom-color: var(--ink-line); }
.nav a:not(.btn)[aria-current="page"] { border-bottom-color: var(--blue); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 3rem;
  padding: 0.8rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-hover); }

.btn--outline { border-color: var(--line-strong); color: var(--text); }
.btn--outline:hover { border-color: var(--ink); background: var(--paper-2); }

.btn--onDark { border-color: rgba(242, 244, 246, 0.35); color: var(--on-dark); }
.btn--onDark:hover { background: rgba(242, 244, 246, 0.1); border-color: var(--on-dark); }

.btn--sm { min-height: 2.5rem; padding: 0.45rem 1.1rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* ---------------------------------------------------------------- pieces - */

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: var(--blue);
  flex: none;
}

.band--dark .eyebrow,
.band--charcoal .eyebrow,
.closing .eyebrow { color: var(--on-dark); }

.hero .eyebrow { color: var(--on-dark); }

.lead {
  font-size: var(--fs-md);
  color: var(--text-muted);
  max-width: 62ch;
}

.band--dark .lead,
.band--charcoal .lead { color: var(--on-dark-muted); }

.section-head {
  max-width: var(--wrap-narrow);
  margin-bottom: var(--sp-8);
}

.fineprint {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-muted);
}

.band--dark .fineprint,
.band--charcoal .fineprint { color: var(--on-dark-muted); }

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

/* Small screens: the photograph runs full width at the top and the type sits on
   solid ink beneath it, so contrast does not depend on what is behind the
   words. The audit found the portrait crop putting the flag wall directly
   behind the headline; separating the two solves the composition instead of
   darkening the picture until it stops being a picture. */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--on-dark);
  isolation: isolate;
  overflow: hidden;
}

.hero__media { position: relative; }

.hero__media img {
  width: 100%;
  height: clamp(11rem, 28vh, 18rem);
  object-fit: cover;
  object-position: center 40%;
}

/* Only the last quarter of the image is graded, so it meets the ink panel
   without a hard seam and the rest of the frame keeps its colour. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 28%;
  background: linear-gradient(to bottom, rgba(11, 13, 15, 0) 0%, rgba(11, 13, 15, 1) 100%);
}

.hero__inner { width: 100%; padding-block: var(--sp-6) var(--sp-7); }

/* Interior pages open on the same composition at a shorter height, so the
   photograph is present without pushing the page content off the screen. */
.hero--compact .hero__media img { height: clamp(9rem, 24vh, 14rem); }
.hero--compact h1 { font-size: var(--fs-3xl); max-width: 18ch; }

.hero .eyebrow { margin-bottom: var(--sp-5); color: var(--on-dark); }

.hero h1 {
  font-size: var(--fs-4xl);
  line-height: 0.96;
  letter-spacing: -0.045em;
  color: var(--on-dark);
  max-width: 15ch;
  margin-bottom: var(--sp-5);
}


.hero__note {
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--on-dark-muted);
  max-width: 44ch;
}

.hero .btn-row .btn { flex: 1 1 100%; }

/* ------------------------------------------------------------ page heads - */

.page-head {
  position: relative;
  background: var(--ink);
  color: var(--on-dark);
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.page-head h1 { color: var(--on-dark); max-width: 17ch; }
.page-head .lead { color: var(--on-dark-muted); margin-top: var(--sp-5); }

/* ------------------------------------------------------------- statement - */

.statement {
  font-size: clamp(1.6rem, 1rem + 2.6vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 800;
  font-stretch: 95%;
  max-width: 22ch;
  margin: 0 0 var(--sp-6);
  text-wrap: balance;
}

.statement em { font-style: normal; color: var(--blue); }
.band--dark .statement em { color: var(--blue-bright); }

/* -------------------------------------------------------------- services - */

.service {
  display: grid;
  gap: var(--sp-4);
  padding-block: var(--sp-6);
  border-top: var(--border);
  align-items: start;
}

.band--dark .service { border-top-color: var(--ink-line); }

.service__index {
  margin-bottom: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--blue);
}

.band--dark .service__index { color: var(--blue-bright); }

.service h2,
.service > div > h3 {
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin-bottom: var(--sp-4);
}

.service h2 a,
.service h3 a { text-decoration-color: var(--line-strong); }
.service h2 a:hover,
.service h3 a:hover { text-decoration-color: currentColor; }

.service__more {
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
}

.service__more a { text-decoration-thickness: 2px; }

.service__body > * + * { margin-top: var(--sp-4); }

.service__cap {
  display: inline-block;
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--blue);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: var(--radius);
}

/* --------------------------------------------------------------- figures - */

.figure {
  margin: 0;
  background: var(--ink);
}

.figure img { width: 100%; }

.figure figcaption {
  padding: var(--sp-4) 0 0;
  font-size: var(--fs-sm);
  color: var(--on-dark-muted);
}

.figure--full img {
  max-height: 78vh;
  object-fit: cover;
}

.figure--full figcaption {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--sp-4) var(--sp-6);
}

/* A contained figure inside a reading section, rather than another full-width
   band. */


.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.split__media img {
  width: 100%;
  border-radius: var(--radius);
}

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

.gallery {
  display: grid;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gallery figure { margin: 0; }

.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}

.gallery figcaption {
  padding-top: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--on-dark-muted);
}

/* ----------------------------------------------------------------- lists - */

.ticks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-3);
  color: var(--text-muted);
}

.ticks li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  min-width: 0;
}

/* A long address or email inside a tick must wrap rather than widen the page. */
.ticks li > * { min-width: 0; overflow-wrap: anywhere; }

.ticks + p,
.ticks + .btn-row,
.address + .btn-row { margin-top: var(--sp-5); }

.ticks li::before {
  content: "";
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  background: var(--blue);
  transform: translateY(-0.1rem);
}

.band--dark .ticks,
.band--charcoal .ticks { color: var(--on-dark-muted); }

.band--dark .ticks li::before,
.band--charcoal .ticks li::before { background: var(--blue-bright); }

/* --------------------------------------------------------------- address - */

.address {
  font-style: normal;
  font-size: var(--fs-md);
  line-height: 1.55;
  font-weight: 600;
  margin: 0 0 var(--sp-5);
  overflow-wrap: anywhere;
}

.band--dark .address,
.band--charcoal .address { color: var(--on-dark); }

.address--compact {
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.7;
  margin-top: var(--sp-4);
  margin-bottom: 0;
}

/* A single confirmed fact, given the weight one deserves. */
.fact {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
  margin: 0 0 var(--sp-2);
  padding-top: var(--sp-4);
  border-top: var(--border);
}

.band--dark .fact,
.band--charcoal .fact { border-top-color: var(--ink-line); }

.fact__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.band--dark .fact__label,
.band--charcoal .fact__label { color: var(--on-dark-muted); }

.fact__value {
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.band--dark .fact__value,
.band--charcoal .fact__value { color: var(--on-dark); }

/* --------------------------------------------------------------- journey - */

/* The four commercial stages. Deliberately styled unlike .process, so the
   enquiry sequence and the coaching method never read as the same thing. */
.journey {
  display: grid;
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.journey > li {
  counter-increment: step;
  display: grid;
  /* minmax(0, 1fr), not 1fr: a bare fr track is sized from max-content when the
     row itself is being measured, which would widen the whole page. */
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-4);
  /* Equal-height columns must not push the label away from its text. */
  align-content: start;
  min-width: 0;
}

.journey > li::before {
  content: counter(step, decimal-leading-zero);
  grid-row: span 2;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  font-size: var(--fs-sm);
  font-weight: 800;
}

.band--dark .journey > li::before,
.band--charcoal .journey > li::before { border-color: var(--blue-bright); }

.journey__stage {
  margin: 0;
  font-size: var(--fs-md);
  letter-spacing: -0.01em;
}

.journey p { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }

/* Where the sequence is the whole point of the section it can run wider. */
.journey--wide { gap: var(--sp-6); }

.band--dark .journey p,
.band--charcoal .journey p { color: var(--on-dark-muted); }

/* ------------------------------------------------------------- comparison - */

.compare {
  display: grid;
  gap: var(--sp-5);
  margin: 0 0 var(--sp-5);
  padding: 0;
  list-style: none;
}

.compare > li { border-left: 3px solid var(--blue); padding-left: var(--sp-4); }

.band--dark .compare > li,
.band--charcoal .compare > li { border-left-color: var(--blue-bright); }

.compare h3 {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}

.compare p { margin: 0; color: var(--text-muted); }

.band--dark .compare p,
.band--charcoal .compare p { color: var(--on-dark-muted); }

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

.faq { display: grid; gap: var(--sp-3); }

.faq__item {
  border: var(--border);
  border-radius: var(--radius);
  background: var(--paper);
}

.band--tint .faq__item { background: var(--paper); }

.faq__item summary {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  min-height: 3rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary::before {
  content: "+";
  flex: none;
  font-size: var(--fs-lg);
  line-height: 1;
  color: var(--blue);
}

.faq__item[open] summary::before { content: "\2212"; }

.faq__answer {
  padding: 0 var(--sp-5) var(--sp-5);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* --------------------------------------------------------------- contact - */

.contact-actions {
  display: grid;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-actions > li { display: flex; }

.contact-card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  justify-content: center;
  min-height: 6rem;
  padding: var(--sp-5);
  background: var(--ink-2);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.contact-card:hover { border-color: var(--blue); background: var(--ink-3); }

.contact-card__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue-bright);
}

.contact-card__value {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--on-dark);
  overflow-wrap: anywhere;
}

.contact-card__value--email { font-size: var(--fs-md); }

.contact-card__note {
  font-size: var(--fs-sm);
  color: var(--on-dark-muted);
}

.info-block {
  border: var(--border);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--paper);
}

.info-block h3 { margin-bottom: var(--sp-4); }

.info-block dl {
  margin: 0;
  display: grid;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
}

.info-block dt {
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.info-block dd { margin: var(--sp-1) 0 0; }
.info-block dd a { display: inline-block; padding-block: var(--sp-1); }

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

.site-footer {
  background: var(--ink-2);
  color: var(--on-dark-muted);
  padding-block: var(--sp-9) var(--sp-7);
  font-size: var(--fs-sm);
  line-height: 1.7;
  border-top: 1px solid var(--ink-line);
}

.site-footer__grid { display: grid; gap: var(--sp-6) var(--sp-5); }

.site-footer h2 {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark);
  margin-bottom: var(--sp-4);
}

.site-footer a {
  color: var(--on-dark);
  text-decoration-color: var(--ink-line);
  overflow-wrap: anywhere;
}
.site-footer a:hover { text-decoration-color: var(--blue-bright); }

/* A closing brand moment: the real monogram at a size where it reads, and one
   line of voice, before the utility columns. */
.site-footer__brand {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 4vw, 2.5rem);
  padding-bottom: var(--sp-7);
  margin-bottom: var(--sp-7);
  border-bottom: 1px solid var(--ink-line);
}

.site-footer__mark {
  height: clamp(3rem, 10vw, 5rem);
  width: auto;
  flex: none;
}

.site-footer__line {
  margin: 0;
  max-width: 30ch;
  font-size: clamp(1.05rem, 0.9rem + 1vw, 1.6rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--on-dark);
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}

.site-footer__hours {
  margin-top: var(--sp-4);
  color: var(--on-dark);
  font-weight: 600;
}

.site-footer__base {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--ink-line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  justify-content: space-between;
  font-size: var(--fs-xs);
}

/* ----------------------------------------------------------------- prose - */

.prose { max-width: 68ch; }
.prose h1 { margin-bottom: var(--sp-5); }

.prose h2 {
  font-size: var(--fs-xl);
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: var(--border);
}

.prose h3 { margin-top: var(--sp-6); }
.prose p, .prose li { color: var(--text-muted); }
.prose li { margin-bottom: var(--sp-2); }
.prose address { margin-bottom: var(--sp-4); }
.prose .lead { color: var(--text); font-size: var(--fs-md); }

.notfound { padding-block: clamp(3rem, 10vw, 7rem); }
.notfound__more { margin-top: var(--sp-8); }


/* ═══════════════════════════════════════════════════════ display type ══ */

/* One word, one number or one short line, carrying a whole section. */
.display {
  font-size: var(--fs-display);
  line-height: 0.94;
  letter-spacing: -0.045em;
  font-weight: 800;
  font-stretch: 95%;
  margin: 0 0 var(--sp-6);
  text-wrap: balance;
}

.muted { color: var(--on-dark-muted); }

.display em { font-style: normal; color: var(--blue-bright); }
.band .display em { color: var(--blue-deep); }


/* ═══════════════════════════════════════════════════ image dividers ══ */

/* Full-bleed photographic strip. The audit found the site's most colourful
   assets rendered at 274px; these run edge to edge instead. */
.divider {
  position: relative;
  display: block;
  margin: 0;
  background: var(--ink);
  overflow: hidden;
}

.divider img {
  width: 100%;
  height: clamp(9rem, 22vw, 20rem);
  object-fit: cover;
  object-position: center;
}

.divider figcaption {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--sp-4) var(--gutter) var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--on-dark-muted);
}

/* ══════════════════════════════════════════════ the six-person figure ══ */

/* Replaces the icon diagram the audit flagged as clip-art. Type and real
   photography only — no glyph people. */


.six__figure { display: flex; align-items: flex-start; gap: clamp(1rem, 3vw, 2rem); }

.six__numeral {
  font-size: clamp(5.5rem, 2rem + 12vw, 10rem);
  line-height: 0.72;
  letter-spacing: -0.07em;
  font-weight: 800;
  font-stretch: 90%;
  color: var(--on-dark);
  margin: 0;
}

.six__rule { display: grid; gap: var(--sp-2); padding-top: 0.6rem; }

.six__numeral--light { color: var(--text); }



.six__rule span {
  display: block;
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark);
  border-left: 3px solid var(--blue-bright);
  padding-left: var(--sp-3);
  overflow-wrap: anywhere;
}

.six__rule--light span { color: var(--text); border-left-color: var(--blue); }

/* ═══════════════════════════════════════════════════ closing moment ══ */

.closing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink);
  color: var(--on-dark);
  padding-block: clamp(4rem, 8vw, 7rem);
}

.closing__media { position: absolute; inset: 0; z-index: -2; }
.closing__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }

.closing::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to right, rgba(11, 13, 15, 0.95) 0%,
              rgba(11, 13, 15, 0.82) 40%, rgba(11, 13, 15, 0.18) 75%, rgba(11, 13, 15, 0.08) 100%);
}

.closing .display { max-width: 18ch; line-height: 1.05; }
.closing .lead { color: var(--on-dark); max-width: 46ch; }

.closing__alt {
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--on-dark);
}

.closing__alt a { color: var(--on-dark); }

/* ═════════════════════════════════════════════════════ practical ══ */

/* The address as a destination rather than a letterhead. */
.address--display {
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.4rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.fact--display .fact__value {
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.fact--display { display: grid; gap: var(--sp-2); }

/* A compact restatement for interior pages, so the full practical chapter is
   not repeated identically on every page. */
.practical-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3) var(--sp-6);
  padding-block: var(--sp-6);
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
}

.practical-strip dl { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); margin: 0; }
.practical-strip div { display: flex; align-items: baseline; gap: var(--sp-3); }

.practical-strip dt {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}

.practical-strip dd { margin: 0; font-weight: 700; color: var(--on-dark); }


@media (min-width: 48em) and (max-width: 55.99em) {
  .hero::after {
    background:
      linear-gradient(to right, rgba(11, 13, 15, 0.97) 0%, rgba(11, 13, 15, 0.96) 52%,
                      rgba(11, 13, 15, 0.9) 64%, rgba(11, 13, 15, 0.45) 80%,
                      rgba(11, 13, 15, 0.12) 96%),
      linear-gradient(to top, rgba(11, 13, 15, 0.5) 0%, rgba(11, 13, 15, 0.2) 40%,
                      rgba(11, 13, 15, 0.24) 62%, rgba(11, 13, 15, 0.66) 100%);
  }
}

/* ------------------------------------------------------------ breakpoints */

/* From 360px all five destinations fit on one row at a slightly tighter label
   size, which saves about 40px of a short phone screen. */
@media (min-width: 22.5em) {
  .nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: var(--sp-2);
  }

  .nav a:not(.btn) { font-size: 0.6875rem; letter-spacing: 0.02em; }
}

@media (min-width: 26em) {
  .nav a:not(.btn) { font-size: var(--fs-xs); letter-spacing: 0.04em; }
  .nav { column-gap: var(--sp-3); }
}

@media (min-width: 26em) {
  .brand img { height: 2.5rem; }
  .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 40em) {
  .hero .btn-row .btn { flex: 0 0 auto; }



  .journey--wide { grid-template-columns: repeat(2, 1fr); column-gap: var(--sp-7); }
  .contact-actions { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
}

/* From here the hero becomes a single overlaid composition: the photograph
   fills the frame and the type sits inside a directional scrim confined to the
   left of it, so the right of the room keeps its full colour. */
@media (min-width: 48em) {
  .hero {
    display: block;
    min-height: clamp(30rem, 72vh, 42rem);
  }

  .hero__media { position: absolute; inset: 0; z-index: -2; }
  .hero__media img { height: 100%; }
  .hero__media::after { display: none; }

  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(to right, rgba(11, 13, 15, 0.97) 0%, rgba(11, 13, 15, 0.86) 32%,
                      rgba(11, 13, 15, 0.65) 46%, rgba(11, 13, 15, 0.1) 66%,
                      rgba(11, 13, 15, 0.02) 92%),
      linear-gradient(to top, rgba(11, 13, 15, 0.5) 0%, rgba(11, 13, 15, 0.12) 40%,
                      rgba(11, 13, 15, 0.12) 72%, rgba(11, 13, 15, 0.34) 100%);
  }

  .hero__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: clamp(30rem, 72vh, 42rem);
    padding-block: var(--sp-9) var(--sp-8);
  }

  .hero h1 { max-width: 13ch; }
  .hero__note { max-width: 39ch; font-size: 1rem; color: var(--on-dark); }
  .hero .btn-row .btn { flex: 0 0 auto; }

  .hero--compact { min-height: clamp(22rem, 52vh, 30rem); }
  .hero--compact .hero__inner { min-height: clamp(22rem, 52vh, 30rem); }
  .hero--compact .hero__media img { height: 100%; }
  .hero--compact h1 { max-width: 17ch; }
}

@media (min-width: 56em) {
  .grid--2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 5vw, 4rem); }
  .grid--2 > * + * { margin-top: 0; }
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-media { grid-template-columns: 1.15fr 0.85fr; }
  .service { grid-template-columns: 8rem 1fr 1.2fr; gap: var(--sp-7); padding-block: var(--sp-7); }
  .contact-actions { grid-template-columns: repeat(3, 1fr); }
  .journey--wide { grid-template-columns: repeat(4, 1fr); }
  .site-footer__grid { grid-template-columns: 1.6fr 0.9fr 1.1fr 1.1fr; gap: var(--sp-7); }
  .gallery { grid-template-columns: repeat(4, 1fr); }






  .statement em { white-space: nowrap; }
}

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

/* Scroll-linked reveals, using the CSS-only view timeline. Everything is
   layered on top of a fully visible, fully usable page: browsers without
   support simply show the content, and nothing here is required to read or
   operate the site. No JavaScript, so the content security policy is
   untouched. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 26%;
    }
  }
}

/* Movement only. Nothing fades, so text is fully legible at every point in the
   animation and in any browser that resolves the timeline differently. */
@keyframes reveal-in {
  from { translate: 0 1.75rem; }
  to { translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .reveal { animation: none !important; translate: none !important; }

}

@media print {
  .site-header, .skip, .btn, .hero__media, .figure, .gallery, .divider, .closing__media,
  .site-footer__mark { display: none !important; }
  .faq__answer { display: block !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .band, .hero, .page-head { padding-block: 1rem; background: #fff; color: #000; }
  .hero::after { display: none; }
  .band--dark, .band--charcoal, .site-footer, .page-head { background: #fff; color: #000; }
  .band--dark p, .band--charcoal p, .site-footer, .page-head .lead { color: #000; }
  .hero h1, .page-head h1 { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* ------------------------------------------------------- V2.1 refinement
   The facility carries the visual identity. Three display moments (hero,
   individual-training proposition and facility); other headings are quieter.
   Shared components apply to the homepage and all supporting pages. */
:root { --radius: 0; }
.btn { letter-spacing: .04em; padding: .7rem 1.25rem; }
.btn--primary { background: #ffffff; color: #0b0d0f; border-color: #ffffff; }
.btn--primary:hover { background: #dfe1e3; color: #0b0d0f; border-color: #dfe1e3; }
.band:not(.on-dark) .btn--primary,
.v2-joining .btn--primary { background: #0b0d0f; color: #ffffff; border-color: #0b0d0f; }
.band:not(.on-dark) .btn--primary:hover,
.v2-joining .btn--primary:hover { background: #303438; }
.site-header__inner { min-height: 68px; padding-block: 6px; gap: 24px; }
.brand img { height: 54px; width: auto; }
.header-cta { font-size: .6875rem; letter-spacing: .035em; min-height: 44px; padding: .55rem .9rem; }
.nav { margin-left: auto; }
.nav a:not(.btn) { min-height: 44px; display: flex; align-items: center; font-size: .6875rem; letter-spacing: .05em; }
/* V2.2: one explicit desktop row. Equal outer tracks centre the compact
   navigation between the original logo and consultation action. Below the
   threshold, the approved two-row mobile/tablet treatment is unchanged. */
/* The one-row desktop header switches on a PIXEL width, deliberately not an
   em. A media-query em resolves against the browser's own default font-size
   setting, not this stylesheet, so `56em` is 896px only for a reader who has
   left that setting at 16px. Anyone who has raised it pushed the threshold
   past their actual window and got the two-row phone header on a maximised
   desktop browser. A pixel threshold is the same width in every browser.
   700px is measured, not guessed: the row renders at full size (61px tall,
   whole consultation button, nothing wrapped) from 700px up, which leaves
   real tolerance under the 782px review window for sidebars and chrome. */
@media (min-width: 700px) {
  .site-header__inner {
    /* Tracks sized to their contents, so the logo's column costs the width of
       a logo. The equal-track version below centres the navigation on the page
       but makes the 94px logo reserve as much room as the 174px button, and
       that spare ~80px is exactly what pushed the row off a 782px window. */
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 60px;
    padding-block: 3px;
    gap: 12px;
  }
  .brand { justify-self: start; }
  .brand:focus-visible { outline-offset: 0; }
  .nav {
    order: 2;
    width: auto;
    margin: 0;
    min-width: 0;
    display: flex;
    justify-content: center;
    gap: clamp(8px, 1.2vw, 18px);
    border-top: 0;
  }
  .nav a:not(.btn) { padding-block: .6rem; }
  .header-cta { order: 3; justify-self: end; max-width: 100%; }
}

/* From 1000px the page is wide enough to afford the approved composition
   exactly as signed off: equal outer tracks, so the navigation is centred on
   the page rather than in the space between the logo and the button, at the
   original spacing. Below this the row keeps every element, spacing down. */
@media (min-width: 1000px) {
  .site-header__inner {
    grid-template-columns: minmax(94px, 1fr) minmax(0, auto) minmax(min-content, 1fr);
    gap: 24px;
  }
  .nav { gap: clamp(16px, 1.6vw, 20px); }
}
.v2-home { --wrap: 1440px; background: #ffffff; color: #141414; }
.v2-home figure { margin: 0; }
.v2-home figcaption { font-size: .75rem; line-height: 1.5; padding-top: 10px; color: #626262; }
.v2-home p { max-width: 60ch; }
.v2-label { font-size: .6875rem; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; margin-bottom: 18px; }
.v2-title { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: clamp(2rem, 3.2vw, 3.25rem); line-height: 1.08; font-weight: 700; letter-spacing: -.04em; text-wrap: balance; margin-bottom: 32px; }
.v2-title span { color: #686868; }
.v2-proposition .v2-title, .v2-facility .v2-title { font-size: clamp(2.1rem, 4vw, 3.8rem); text-transform: uppercase; line-height: 1.02; }
.v2-lead { font-size: clamp(1.2rem, 1.65vw, 1.5rem); line-height: 1.45; letter-spacing: -.02em; }
.v2-section { padding-block: clamp(52px, 6.5vw, 96px); }
.v2-dark { background: #101112; color: #f7f7f7; }
.v2-dark .v2-title span { color: #b0b0b0; }
.v2-section-head { display: flex; justify-content: space-between; gap: 48px; align-items: end; margin-bottom: 36px; }
.v2-section-head > p { max-width: 40ch; color: #5b5b5b; margin-bottom: 0; font-size: .9375rem; }
.v2-dark .v2-section-head > p { color: #bababa; }
.v2-section-head .v2-title { margin-bottom: 0; }
.v2-link { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; font-size: .875rem; text-underline-offset: 6px; }
.v2-link span { text-decoration: none; font-size: 1.125rem; }
.v2-hero { color: #f7f7f7; position: relative; min-height: clamp(600px, 54vw, 760px); background: #111; isolation: isolate; display: flex; }
.v2-hero__media, .v2-final__media { position: absolute; inset: 0; z-index: -2; }
.v2-hero__media picture, .v2-hero__media img,
.v2-final__media picture, .v2-final__media img { width: 100%; height: 100%; object-fit: cover; }
.v2-hero__media img { object-position: 50% 55%; }
.v2-hero::before, .v2-final::before { content: ""; position: absolute; inset: 0; z-index: -1; }
.v2-hero::before { background: linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.48) 24%, rgba(0,0,0,.06) 42%, rgba(0,0,0,.3) 57%, rgba(0,0,0,.88) 76%, rgba(0,0,0,.96)); }
.v2-hero__inner { display: flex; flex-direction: column; padding-block: 34px 32px; }
.v2-hero h1 { text-transform: uppercase; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: clamp(3rem, 6.8vw, 6.75rem); line-height: .92; letter-spacing: -.055em; font-weight: 700; text-wrap: initial; margin-bottom: 160px; }
.v2-hero__bottom { margin-top: auto; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 32px; }
.v2-hero__lead { font-size: clamp(1.2rem, 1.7vw, 1.6rem); line-height: 1.4; letter-spacing: -.02em; }
.v2-home .v2-hero__disciplines { max-width: none; font-size: .75rem; line-height: 1.8; color: #dedede; }
.v2-hero__disciplines a, .v2-hero__disciplines span { display: inline-block; }
.v2-hero__disciplines a { text-decoration-color: #999; text-underline-offset: 3px; }
.v2-hero__action > p { font-size: .75rem; color: #dedede; margin-top: 14px; }
.v2-proof { background: #101112; color: #f7f7f7; padding-block: 30px; border-top: 1px solid #3b3b3b; }
.v2-proof dl { display: grid; grid-template-columns: 1fr 1fr 1.2fr 1.3fr; margin-block: 0; }
.v2-proof dl > div { display: flex; flex-direction: column-reverse; padding-inline: 24px; border-left: 1px solid #464646; gap: 10px; }
.v2-proof dl > div:first-child { border-left: 0; padding-left: 0; }
.v2-proof dt { font-size: .6875rem; letter-spacing: .025em; color: #bebebe; }
.v2-proof dd { font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1; letter-spacing: -.04em; margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.v2-proof dl > div:last-child dd { font-size: clamp(1.65rem, 2.8vw, 2.5rem); }
.v2-proposition { background: #fff; }
.v2-proposition__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.v2-proposition__grid img { width: 100%; aspect-ratio: 1.45; object-fit: cover; }
.v2-proposition__copy > p:not(.v2-lead) { font-size: 1rem; color: #5b5b5b; }
.v2-proposition__copy .v2-link { margin-top: 8px; }
.v2-proposition__personal { border-top: 1px solid #ccc; padding-top: 20px; margin-top: 20px; }
.v2-system { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; margin: 40px 0 24px; }
.v2-system li { position: relative; border-top: 1px solid #666; padding: 26px 28px 16px 0; }
.v2-system li::before { content: ""; position: absolute; top: -3px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.v2-system li:not(:last-child)::after { content: "→"; position: absolute; right: 12px; top: -15px; color: #aaa; background: #101112; padding-inline: 4px; }
.v2-system h3 { font-size: 1.125rem; text-transform: uppercase; letter-spacing: .025em; }
.v2-system p { font-size: .9375rem; color: #bcbcbc; max-width: 28ch; }
.v2-facility { background: #eeeeec; }
.v2-facility__wide { position: relative; }
.v2-facility__wide img { width: 100%; max-height: 750px; aspect-ratio: 2; object-fit: cover; }
.v2-facility__wide figcaption { position: absolute; left: var(--gutter); bottom: 20px; background: #101112; color: #fff; padding: 8px 12px; font-size: .6875rem; }
.v2-facility__details { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; align-items: start; margin-top: 40px; }
.v2-disciplines { list-style: none; padding: 0; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.55; letter-spacing: -.02em; }
.v2-facility__details figure { margin: 0; }
.v2-facility__details img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 55%; }
.v2-facility__details figcaption { margin-top: 12px; }
.v2-amenities { display: flex; flex-wrap: wrap; justify-content: space-between; list-style: none; gap: 16px 28px; border-top: 1px solid #bbb; padding: 24px 0 0; margin: 36px 0 0; font-size: .875rem; }
/* Two photographic in-gym offers. The small-group column has more explanation;
   personal training has its own substantial image and heading. Remote is a row. */
.v2-offers { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px 40px; margin-top: 36px; align-items: start; }
.v2-offers > article { min-width: 0; }
.v2-offers__primary > picture, .v2-offers__personal > picture { display: block; }
.v2-offers__primary img, .v2-offers__personal img { width: 100%; height: 340px; object-fit: cover; object-position: 50% 58%; }
.v2-offers__personal { padding-top: 36px; }
.v2-offers__personal img { height: 304px; }
/* Homepage: both services read as equal-height landscape banners on one
   baseline. The training hub keeps the portrait panels above. */
.v2-offers--wide { grid-template-columns: 1fr 1fr; }
.v2-offers--wide .v2-offers__personal { padding-top: 0; }
.v2-offers--wide .v2-offers__primary img, .v2-offers--wide .v2-offers__personal img {
  height: auto; aspect-ratio: 16 / 9; object-position: 50% 60%;
}
.v2-offers__copy { padding-top: 24px; }
.v2-offers__copy .v2-label { color: #bcbcbc; margin-bottom: 14px; }
.v2-offers__copy h3 { font-size: clamp(1.8rem, 2.8vw, 2.65rem); line-height: 1.05; letter-spacing: -.035em; max-width: 16ch; }
.v2-offers__personal h3 { font-size: clamp(1.75rem, 2.6vw, 2.5rem); }
.v2-offers a { text-decoration: none; }
.v2-offers .v2-link { text-decoration: underline; }
.v2-offers a:hover { text-decoration: underline; text-underline-offset: 6px; }
.v2-offers__copy .v2-lead { font-size: 1.125rem; color: #f7f7f7; }
.v2-offers__copy > p:not(.v2-label):not(.v2-lead) { color: #bcbcbc; font-size: .9375rem; max-width: 48ch; }
.v2-offers__remote { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.2fr auto; align-items: center; gap: 24px; border-top: 1px solid #555; padding-top: 28px; }
.v2-offers__remote .v2-label { margin-bottom: 8px; color: #bcbcbc; }
.v2-offers__remote h3 { font-size: 1.4rem; margin: 0; }
.v2-offers__remote > p { font-size: .9375rem; color: #bcbcbc; margin: 0; }
.v2-offers__capability { margin-top: 24px; color: #bcbcbc; }
.v2-capability__intro { color: #5b5b5b; font-size: 1rem; }
.v2-capability__grid { display: grid; grid-template-columns: 1fr 1.45fr; gap: 56px; align-items: center; margin-top: 36px; }
.v2-capability ul { list-style: none; padding: 0; margin: 0; }
.v2-capability li { font-size: clamp(1.4rem, 2.3vw, 2.1rem); font-weight: 600; line-height: 1.2; letter-spacing: -.025em; border-bottom: 1px solid #ccc; padding-block: 12px; }
.v2-capability li:first-child { border-top: 1px solid #ccc; }
.v2-capability .fineprint { margin-top: 20px; max-width: 46ch; }
.v2-capability img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 55%; }
.v2-technology__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.v2-technology .v2-title { margin-bottom: 0; }
.v2-technology__grid > div:last-child > p:not(.v2-lead) { color: #bcbcbc; font-size: .9375rem; }
.v2-data-line { display: flex; flex-wrap: wrap; gap: 12px; font-size: .75rem; padding-top: 20px; margin-top: 24px; border-top: 1px solid #666; }
.v2-community { background: #e9e6df; }
.v2-community__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: center; }
.v2-community__grid img { width: 100%; aspect-ratio: 1.75; object-fit: cover; object-position: center 60%; }
.v2-community__grid > div > p:not(.v2-lead) { color: #55534f; font-size: 1rem; }
.v2-journey { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 36px; }
.v2-journey li { display: block; border-top: 1px solid #aaa; padding: 24px 28px 0 0; }
.v2-journey li::before { content: counter(step, decimal-leading-zero); border: 0; width: auto; height: auto; display: block; color: #555; font-size: 2.25rem; letter-spacing: -.04em; line-height: 1; margin-bottom: 24px; }
.v2-journey h3 { font-size: 1.125rem; }
.v2-journey p { font-size: .875rem; color: #626262; max-width: 26ch; }
.v2-final { color: #f7f7f7; position: relative; isolation: isolate; padding-block: clamp(100px, 10vw, 144px); }
.v2-final::before { background: linear-gradient(90deg, rgba(0,0,0,.91), rgba(0,0,0,.82) 38%, rgba(0,0,0,.15) 75%); }
.v2-final .v2-title { font-size: clamp(2.2rem, 3.8vw, 3.75rem); max-width: 20ch; }
.v2-final .v2-lead { font-size: 1.0625rem; margin-bottom: 24px; }
.v2-location { padding-block: 20px; background: #101112; color: #ccc; border-top: 1px solid #444; }
.v2-location .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.v2-location p { margin: 0; font-size: .8125rem; }
.v2-home :focus-visible { outline-color: #555; }
.v2-home .on-dark :focus-visible { outline-color: #fff; }
#consultation { scroll-margin-top: 88px; }
@media (max-width: 70em) {
  .v2-proposition__grid, .v2-community__grid { gap: 32px; }
  .v2-offers { gap: 28px; }
  .v2-offers__remote { grid-template-columns: 1fr 1.5fr; }
  .v2-offers__remote > a { grid-column: 2; justify-self: start; }
  .v2-capability__grid, .v2-technology__grid { gap: 36px; }
}
/* Header only: the mirror of the 800px rule above, so the two-row treatment
   and the one-row treatment hand over at exactly the same width. The page
   rules below keep their own em breakpoint, which is untouched. */
@media (max-width: 699.98px) {
  .site-header { position: relative; }
  .site-header__inner { gap: 4px 20px; padding-block: 6px 0; }
  .brand img { height: 48px; }
  .nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
  .nav a:not(.btn) { justify-content: center; font-size: .6875rem; letter-spacing: .025em; }
}

@media (max-width: 55.99em) {
  .v2-hero { min-height: 690px; }
  .v2-hero__bottom { grid-template-columns: 1fr; gap: 20px; }
  .v2-hero__action { display: flex; align-items: center; gap: 24px; }
  .v2-hero__action > p { margin: 0; }
  .v2-proof dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 0; }
  .v2-proof dl > div:nth-child(odd) { border: 0; padding-left: 0; }
  .v2-section-head { gap: 28px; align-items: start; }
  .v2-section-head > p { max-width: 30ch; }
  .v2-proposition__grid { grid-template-columns: 1.15fr 1fr; gap: 28px; }
  .v2-system { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 0; }
  .v2-system p { max-width: 32ch; }
  .v2-facility__details { grid-template-columns: 1fr 1fr; gap: 28px; }
  .v2-facility__details > div { grid-column: 1 / -1; }
  .v2-disciplines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v2-offers { grid-template-columns: 1.1fr 1fr; gap: 24px; }
  .v2-offers__primary img { height: 280px; }
  .v2-offers__personal img { height: 244px; }
  .v2-offers__copy h3 { font-size: 1.8rem; }
  .v2-technology__grid { grid-template-columns: 1fr; gap: 28px; }
  .v2-community__grid { grid-template-columns: 1.2fr 1fr; gap: 28px; }
  .v2-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 0; }
  .v2-location .wrap { flex-wrap: wrap; }
}
@media (max-width: 39.99em) {
  .v2-label { font-size: .6875rem; letter-spacing: .08em; margin-bottom: 18px; }
  .v2-title { font-size: clamp(1.8rem, 7vw, 2.4rem); margin-bottom: 26px; }
  .v2-proposition .v2-title, .v2-facility .v2-title { font-size: clamp(1.85rem, 7.4vw, 2.8rem); }
  /* Text has its own lower ground. The central photo remains largely ungraded. */
  .v2-hero { min-height: 0; }
  .v2-hero__inner { padding-top: 24px; padding-bottom: 28px; }
  .v2-hero h1 { font-size: clamp(2.35rem, 9.3vw, 3.7rem); margin-bottom: 220px; }
  .v2-hero__media { bottom: auto; height: 360px; }
  .v2-hero__media img { object-position: 50% 52%; }
  .v2-hero::before { bottom: auto; height: 361px; background: linear-gradient(180deg, rgba(0,0,0,.8), rgba(0,0,0,.55) 31%, rgba(0,0,0,.04) 52%, rgba(0,0,0,.08) 75%, #111); }
  .v2-hero__lead { font-size: 1.125rem; }
  .v2-home .v2-hero__disciplines { max-width: none; font-size: .75rem; max-width: 42ch; }
  .v2-hero__action { display: block; }
  .v2-hero__action .btn { width: 100%; }
  .v2-hero__action > p { margin-top: 14px; font-size: .75rem; }
  .v2-proof { padding-block: 26px; }
  .v2-proof dl { gap: 24px 0; }
  .v2-proof dd { font-size: 2.2rem; }
  .v2-proof dl > div:last-child dd { font-size: clamp(1.4rem, 5.6vw, 2rem); }
  .v2-proof dt { font-size: .6875rem; }
  .v2-proof dl > div { padding-right: 0; padding-left: 16px; }
  .v2-section-head { display: block; margin-bottom: 28px; }
  .v2-section-head > p { margin-top: 20px; max-width: 42ch; }
  .v2-proposition__grid { grid-template-columns: 1fr; gap: 24px; }
  .v2-proposition__grid img { aspect-ratio: 1.2; }
  .v2-system { grid-template-columns: 1fr; margin-top: 32px; gap: 0; }
  .v2-system li { border-top: 0; border-left: 1px solid #777; padding: 0 0 28px 24px; margin-left: 4px; }
  .v2-system li:last-child { padding-bottom: 0; }
  .v2-system li::before { top: 6px; left: -3px; }
  .v2-system li:not(:last-child)::after { content: "↓"; left: -9px; right: auto; top: auto; bottom: 8px; padding: 0; }
  .v2-system p { max-width: 38ch; }
  .v2-facility__wide img { aspect-ratio: 1.05; max-height: none; }
  .v2-facility__wide figcaption { bottom: 14px; font-size: .625rem; }
  .v2-facility__details { gap: 20px; margin-top: 28px; grid-template-columns: 1fr 1fr; }
  .v2-facility__details > div:first-child { grid-column: 1 / -1; }
  .v2-disciplines { grid-template-columns: 1fr 1fr; font-size: 1.125rem; gap: 8px; }
  .v2-facility__details img { aspect-ratio: 3 / 2; }
  .v2-amenities { display: grid; grid-template-columns: 1fr 1fr; font-size: .8125rem; margin-top: 28px; gap: 16px; }
  .v2-offers { grid-template-columns: 1fr; margin-top: 28px; gap: 32px; }
  .v2-offers__primary img { height: auto; aspect-ratio: 1.15; }
  .v2-offers__personal { padding-top: 0; border-top: 1px solid #555; }
  .v2-offers__personal img { height: auto; aspect-ratio: 1.35; margin-top: 28px; }
  .v2-offers--wide .v2-offers__primary img, .v2-offers--wide .v2-offers__personal img { aspect-ratio: 16 / 9; }
  .v2-offers--wide .v2-offers__personal img { margin-top: 28px; }
  .v2-offers__copy { padding-top: 20px; }
  .v2-offers__copy h3 { font-size: 2rem; }
  .v2-offers__remote { display: block; padding-top: 24px; }
  .v2-offers__remote > p { margin-block: 16px 8px; }
  .v2-capability__grid { grid-template-columns: 1fr; gap: 24px; margin-top: 28px; }
  .v2-capability li { font-size: 1.4rem; padding-block: 10px; }
  .v2-capability img { aspect-ratio: 3 / 2; }
  .v2-data-line { gap: 8px; font-size: .6875rem; }
  .v2-community__grid { grid-template-columns: 1fr; gap: 24px; }
  .v2-community__grid img { aspect-ratio: 1.4; }
  .v2-joining .v2-section-head .btn { margin-top: 20px; }
  .v2-journey { margin-top: 28px; gap: 28px 0; }
  .v2-journey li { padding: 18px 18px 0 0; }
  .v2-journey li::before { font-size: 2rem; margin-bottom: 20px; }
  .v2-journey h3 { font-size: 1rem; }
  .v2-journey p { font-size: .8125rem; }
  .v2-final { padding-block: 220px 48px; }
  .v2-final .v2-title { font-size: 2rem; }
  .v2-final::before { background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.12) 26%, rgba(0,0,0,.88) 48%, #111); }
  .v2-final .v2-lead { font-size: 1rem; }
  .v2-final__media img { object-position: 50% 30%; }
  .v2-location .wrap { display: grid; gap: 8px; }
  .closing::after { background: rgba(11,13,15,.82); }
  .six__rule span { font-size: .875rem; letter-spacing: .025em; }
  .hero--compact .hero__media img { height: 220px; }
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__grid > div { grid-column: 1 / -1; }
  .hero__note { font-size: .9375rem; }
}
/* The five-across navigation row is set in equal columns, so the widest label
   decides the floor. APPROACH at the 11px label size needs about 66px, which a
   column only reaches from roughly 369px. Below that the tighter label size
   keeps the row on one line instead of letting one word wrap and add a third
   of a row's height to the header. This one stays in em on purpose, unlike the
   one-row switch above: it exists to stop TEXT wrapping, so it has to move
   when the reader enlarges their default font. The desktop switch governs a
   fixed-pixel logo and button, so it must not. */
@media (max-width: 23.125em) {
  .site-header__inner { gap: 4px 12px; }
  .header-cta { font-size: .625rem; padding-inline: .6rem; }
  .nav { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 4px; }
  .nav a:not(.btn) { font-size: .625rem; min-width: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-home *, .header-cta { transition: none; animation: none; }
}

/* --------------------------------------------------- pricing: the options -
   Four equal coaching options. The reading order is the point: service, who it
   suits, price, inclusions, actions. The price is unambiguous but it is not the
   first thing the eye lands on, because a customer choosing a coaching format
   needs to know which format fits them before the number means anything.

   Nothing here may rank the four. No badge, no highlighted column, no tier
   colour: identical border, identical background, identical weight, identical
   pair of actions. Four across where the wrap allows, two across on tablets,
   one column on phones. */
.options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.option {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 28px 24px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
}

/* Equal cards have to look equal. A three-line proposition in one card was
   pushing its price a line below the others, so the four bands — service, fit,
   price, inclusions, actions — share their rows across the whole list. Browsers
   without subgrid keep the flex column above, which stacks correctly and simply
   does not align band to band. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 40em) {
    .options { grid-template-rows: repeat(5, auto); }
    .option {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 5;
    }
    .option__actions { align-content: end; }
  }
}

.band--tint .option { background: var(--paper); }

.option__head { margin-bottom: var(--sp-5); }

.option__name {
  margin: 0 0 var(--sp-2);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
}

.option__proposition {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.4;
  letter-spacing: -0.015em;
  font-weight: 600;
}

.option__fit {
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}

.option__fit p:last-child {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.option__fit-label {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Clear, tabular and calm — deliberately a step below the display tier. */
.option__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin: 0 0 var(--sp-5);
}

.option__amount {
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.option__unit,
.fact__unit {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.band--dark .fact__unit,
.band--charcoal .fact__unit { color: var(--on-dark-muted); }

.option__includes {
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.option__includes li {
  position: relative;
  padding-left: var(--sp-5);
  margin-bottom: var(--sp-2);
}

.option__includes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  background: var(--blue);
  flex: none;
}

.option__actions {
  margin-top: auto;
  display: grid;
  gap: var(--sp-2);
}

.option__actions .btn {
  width: 100%;
  font-size: var(--fs-xs);
  padding-inline: var(--sp-2);
}

/* Four across only where four cards are genuinely comfortable. Below the
   existing 70em breakpoint the longest action label, VIEW PERSONAL TRAINING,
   started wrapping and made one card's actions a line deeper than the other
   three; two across at that width reads better than four cramped ones. The
   threshold sits just above the stylesheet's existing 70em turn, at the
   measured width where the longest label stops wrapping rather than at a round
   number that leaves a twenty-pixel window where it still does. */

/* ------------------------------------------------ pricing: the comparison -
   Delivery differences only. Every cell states what an option is rather than
   what it withholds, so the table can never read as manufactured scarcity. */
.delivery {
  overflow-x: auto;
  margin-bottom: var(--sp-5);
  border: 1px solid var(--line-strong);
  background: var(--paper);
}

.delivery__table {
  width: 100%;
  min-width: 46rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
  text-align: left;
}

.delivery__table th,
.delivery__table td {
  padding: var(--sp-4);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.5;
}

.delivery__table thead th {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}

.delivery__table tbody th {
  font-weight: 700;
  color: var(--text);
  width: 12rem;
}

.delivery__table td { color: var(--text-muted); }
.delivery__table tbody tr:last-child th,
.delivery__table tbody tr:last-child td { border-bottom: 0; }

.options__help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5) var(--sp-9);
}

.options__help h2 { margin: 0 0 var(--sp-3); }
.options__help p { margin: 0; max-width: 62ch; color: var(--text-muted); }

.v2-joining__pricing { margin-top: 28px; }

@media (max-width: 71.5em) {
  .options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 39.99em) {
  .options { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .option { padding: 24px 20px; }
  .delivery__table { min-width: 40rem; }
  .options__help { display: block; }
  .options__help .btn { width: 100%; margin-top: var(--sp-5); }
}

/* Six primary destinations rather than five. Two consequences, both measured.

   Desktop: the one-row header still switches on at 700px, but six labels no
   longer fit the middle track at that width at the original size — CONTACT
   wrapped to a second line. Between the switch and 1000px the row now uses a
   tighter label size and gap, which fits six labels with room to spare and
   leaves the 700px threshold, and its tolerance under the 782px review window,
   exactly where it was.

   Phone: the row keeps equal columns down to the width where the longest label
   (APPROACH) still fits one, then folds to two rows of three rather than
   letting a word wrap. Both rules keep the 44px targets. */
@media (min-width: 700px) and (max-width: 999.98px) {
  .nav { gap: clamp(6px, 0.9vw, 12px); }
  .nav a:not(.btn) { font-size: .625rem; letter-spacing: .03em; }
}

@media (max-width: 699.98px) {
  .nav { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 30em) {
  .nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 23.125em) {
  .nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ------------------------------------------------------- legal documents ----
   Long-form documents in the site's own voice rather than a legal template.
   They reuse .page-head and .prose; these add the document furniture: version
   and date, a contents list, the plain-English summary at the top of the Terms,
   and the FAQ groupings. */
.doc-meta {
  margin: 0 0 var(--sp-7);
  padding-bottom: var(--sp-4);
  border-bottom: var(--border);
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.doc-contents {
  margin: 0 0 var(--sp-8);
  padding: var(--sp-5) var(--sp-6);
  background: var(--paper-2);
  border-left: 3px solid var(--blue);
}

.doc-contents__label {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.doc-contents ul {
  display: grid;
  gap: var(--sp-2) var(--sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.doc-contents li { margin: 0; }

.doc-contents a {
  display: inline-block;
  padding-block: 0.2rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}

@media (min-width: 40em) {
  .doc-contents ul { grid-template-columns: 1fr 1fr; }
}

/* The plain-English summary that opens the Terms. Prominent on purpose: a
   consumer should meet the important terms before the detailed ones. */
.key-terms {
  margin: 0 0 var(--sp-8);
  padding: var(--sp-6);
  background: var(--ink);
  color: var(--on-dark);
}

.key-terms h2 {
  margin-top: 0;
  color: var(--on-dark);
}

.key-terms p { color: var(--on-dark-muted); }
.key-terms .ticks { color: var(--on-dark-muted); }
.key-terms .ticks li::before { background: var(--blue-bright); }
.key-terms strong { color: var(--on-dark); }

/* FAQ groups. The accordions themselves reuse .faq / .faq__item / .faq__answer. */
.faq-group { margin-bottom: var(--sp-8); }
.faq-group:last-child { margin-bottom: 0; }
.faq-group > h2 { margin-bottom: var(--sp-5); }

/* Five footer columns rather than four, now that the legal set has its own.
   The address column keeps the extra width the four-column rule gave it: the
   training address is eight lines and squeezing it to a fifth of the row wraps
   every one of them. Below 56em the existing two-column and stacked rules are
   unchanged, and the three <nav> columns flow into them. */
@media (min-width: 56em) {
  .site-footer__grid { grid-template-columns: 1.5fr 0.85fr 1fr 1.15fr 1.05fr; }
}