/* 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; }
}

/* ------------------------------------------------------- ways to train ----
   Four equal product cards, shared by the homepage and the training hub. The
   price is deliberately the largest thing in a card, and the four cards are
   identical in structure and weight: no badge, tier or highlight may suggest
   that one way of being coached is better than another. Four across where the
   wrap allows, two across on tablets, one column on phones. */
.plans {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
}

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

.plan__name {
  margin: 0 0 20px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
}

.plan__name a { text-decoration-color: var(--line-strong); }
.plan__name a:hover { text-decoration-color: currentColor; }

.plan__price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 16px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.plan__amount {
  font-size: clamp(2.6rem, 3.6vw, 3.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.plan__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); }

.plan__note {
  margin: 0 0 24px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.plan__actions {
  margin-top: auto;
  display: grid;
  gap: 10px;
  justify-items: start;
}

.plan__actions .btn { width: 100%; }

.plan__more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* One dark action on a light surface, wherever the cards are used. */
.plans .btn--primary { background: #0b0d0f; color: #ffffff; border-color: #0b0d0f; }
.plans .btn--primary:hover { background: #303438; border-color: #303438; }

.plans__help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--line-strong);
}

.plans__help h3 {
  margin: 0 0 8px;
  font-size: clamp(1.25rem, 0.9rem + 1.2vw, 1.75rem);
  letter-spacing: -0.02em;
}

.plans__help p {
  margin: 0;
  max-width: 62ch;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

.v2-plans { background: #ffffff; }
/* The V2 section head already carries the space beneath it. */
.v2-plans .plans { margin-top: 0; }

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

@media (max-width: 39.99em) {
  .plans { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 28px; }
  .plan { padding: 24px 20px; }
  .plan__name { margin-bottom: 16px; }
  .plan__amount { font-size: 3rem; }
  .plans__help { display: block; margin-top: 24px; padding-top: 24px; }
  .plans__help .btn { width: 100%; margin-top: 20px; }
}