/* ==========================================================================
   Strength2Strength
   Design tokens, base styles, layout and page sections.
   See DESIGN_RULES.md and BRIEF.md before changing anything here.
   ========================================================================== */

/* Tokens ------------------------------------------------------------------ */

:root {
  /* Brand */
  --navy: #030027;  /* Oxford Blue */
  --lime: #abeb0a;  /* Spring Bud */
  --air-force: #50808e;  /* Air Force Blue */
  --celeste: #adfcf9;    /* Celeste */
  --white-smoke: #f5f5f5;  /* White Smoke (value to confirm) */
  --white: #ffffff;

  /* Derived from navy, so there is one family of neutrals rather than many greys */
  --surface: #f2f2f5;        /* light sections, hero, placeholders */
  --surface-strong: #e6e6eb; /* secondary buttons on light backgrounds */
  --border: #d1d1d8;         /* rules on light backgrounds */
  --border-light: #d1d1d8;   /* same, kept fixed inside navy contexts */
  --text: var(--navy);
  --text-muted: #494763;     /* 8.9:1 on white */
  --navy-raised: #0e0c35;    /* placeholders on navy */
  --navy-rule: #2c2a4c;      /* rules on navy */
  --navy-card: #0c0a33;      /* cards sitting on navy */
  --on-navy-muted: #c0bfc9;  /* 11.2:1 on navy */
  --slate: #9d9cc4;          /* small labels on navy, 7.7:1 */

  /* Type */
  /* One family: Archivo. Headings use its condensed width in heavy capitals. */
  --font-display: "Archivo", "Arial Narrow", sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;

  --step--1: 0.875rem;                                /* 14px  small print */
  --step-0: 1rem;                                     /* 16px  body */
  --step-1: 1.125rem;                                 /* 18px  lead, h3 */
  --step-2: clamp(2rem, 1.3rem + 2.4vw, 3.25rem);    /* h2: section headings */
  --step-3: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);    /* large h2 */
  --step-4: clamp(2.125rem, 1.6rem + 2vw, 3.25rem);   /* h1 */

  /* Space: one scale, used everywhere */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: clamp(3rem, 2rem + 2.8vw, 4.75rem);   /* gaps within sections; tightens on phones */
  --s-9: clamp(5rem, 3rem + 6vw, 9.5rem);      /* section padding (not hero or header) */

  /* Grid */
  --page-max: 68rem;                              /* 1088px */
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);  /* page side margin */
  --col-gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);

  --radius: 0; /* square corners throughout */
  --radius-card: 16px; /* member stories and team portraits */
  --header-h: 4rem;
  --measure: 36em;

  --focus: var(--navy);
}

/* Base -------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 5rem; /* clears the sticky header for in-page links */
}

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
}

img,
video,
iframe {
  display: block;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

h1,
h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 68%;
  line-height: 1;
  text-transform: uppercase;
  word-spacing: 0.08em; /* condensed capitals close up between words */
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-2); }

h3 {
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.3;
}

p,
li {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -10rem;
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  background: var(--lime);
  color: var(--navy);
  font-weight: 700;
}

.skip-link:focus {
  top: var(--s-4);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Navy context: anything inside inherits light text and a lime focus ring */
.on-navy {
  --focus: var(--lime);
  --text-muted: var(--on-navy-muted);
  --border: var(--navy-rule);
  background: var(--navy);
  color: var(--white);
}

/* Layout ------------------------------------------------------------------ */

.container {
  width: 100%;
  max-width: calc(var(--page-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 12-column grid shared by every section */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
}

.grid > * {
  grid-column: 1 / -1;
}

.lead {
  font-size: var(--step-1);
  line-height: 1.55;
}

.muted {
  color: var(--text-muted);
}

.intro {
  max-width: var(--measure);
}

.intro > * + * {
  margin-top: var(--s-4);
}

/* Buttons and links ------------------------------------------------------- */

/* Pill buttons with uppercase, tracked labels. The primary action (the free
   trial) carries an arrow in an inset disc; secondary buttons are outlines. */
.btn {
  --sweep: var(--lime);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  min-height: 2.75rem;
  padding: 0.25rem 1.375rem;
  border: 1px solid var(--navy);
  border-radius: 999px;
  font: 500 0.8125rem/1.2 var(--font-body);
  letter-spacing: 0.08em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.35s, border-color 0.35s;
}

/* Hover: a fill sweeps in from the bottom-left corner */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--sweep);
  clip-path: circle(0% at 0% 100%);
  transition: clip-path 0.45s cubic-bezier(.2,.7,.2,1);
}

.btn:hover::before,
.btn:focus-visible::before {
  clip-path: circle(150% at 0% 100%);
}

.btn:hover,
.btn:focus-visible {
  border-color: var(--sweep);
  color: var(--navy);
}

.btn__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-right: -1.125rem; /* sits inset from the pill's right edge */
  border-radius: 50%;
  transition: background-color 0.35s, color 0.35s;
}

.btn__icon svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* "Get started" (the free trial) is the only primary action on the site.
   Navy and white do the work; lime marks it through the arrow disc. */
.btn--primary {
  background: var(--navy);
  color: var(--white);
}

.btn--primary .btn__icon {
  background: var(--lime);
  color: var(--navy);
}

/* Once the button fills lime, the disc flips to navy so the arrow stays visible */
.btn--primary:hover .btn__icon,
.btn--primary:focus-visible .btn__icon {
  background: var(--navy);
  color: var(--lime);
}

.btn--secondary {
  background: transparent;
  color: var(--navy);
}

.on-navy .btn--primary {
  border-color: var(--white);
  background: var(--white);
  color: var(--navy);
}

.on-navy .btn--secondary {
  border-color: rgb(255 255 255 / 0.6);
  color: var(--white);
}

/* Navy-context buttons need the same hover colours at higher specificity */
.on-navy .btn:hover,
.on-navy .btn:focus-visible {
  border-color: var(--sweep);
  color: var(--navy);
}

/* On a lime background the sweep is white instead */
.closing .btn {
  --sweep: var(--white);
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn::before,
  .btn__icon {
    transition: none;
  }
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* A plain text link used for secondary routes out of a section */
.link {
  display: inline-block;
  padding-block: var(--s-2);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.5em;
}

.link:hover {
  text-decoration-color: currentColor;
}

.on-navy .link:hover {
  color: var(--white);
}

/* Media and placeholders --------------------------------------------------
   Every image/video slot is a .media frame with a fixed ratio. To add the
   real asset, replace the .ph element with an <img> or <video>; the frame
   keeps the layout and the asset is cropped to fit.                       */

.media {
  position: relative;
  aspect-ratio: var(--ratio, 16 / 9);
  overflow: hidden;
  background: var(--surface);
}

.media > img,
.media > video,
.media > iframe {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

/* Placeholder follows the print convention for an empty picture box:
   a ruled frame with diagonals, labelled with what belongs there. */
.ph {
  position: absolute;
  inset: 0;
  border: 1px solid var(--border);
  background:
    linear-gradient(to top right, transparent calc(50% - 0.5px), var(--border) calc(50% - 0.5px), var(--border) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to bottom right, transparent calc(50% - 0.5px), var(--border) calc(50% - 0.5px), var(--border) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}

.on-navy .media {
  background: var(--navy-raised);
}

.ph__label {
  position: absolute;
  left: var(--s-3);
  top: var(--s-3);
  max-width: calc(100% - 1.5rem);
  padding: var(--s-1) var(--s-2);
  background: var(--white);
  color: var(--navy);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
}

.on-navy .ph__label {
  background: var(--navy);
  color: var(--white);
  outline: 1px solid var(--navy-rule);
}

/* Content still to be confirmed by the client. Delete the class once the
   real text is in place. Search the HTML for "tbc" to find every instance. */
.tbc {
  /* Marker only: wraps sample or unconfirmed text so it can be found
     (search the HTML for "tbc"). Deliberately unstyled. */
}

/* Header ------------------------------------------------------------------
   Oxford Blue bar aligned to the page grid: brand left, navigation and the
   Get started button right. */

.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  border-bottom: 1px solid var(--navy-rule);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-right: auto;
  text-decoration: none;
}

.brand img {
  width: 1.75rem;
  height: auto;
}

.brand__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  font-stretch: 68%;
  line-height: 1;
  text-transform: uppercase;
}

.site-nav > ul {
  display: flex;
  gap: var(--s-5);
  padding: 0;
  list-style: none;
}

.nav-item {
  display: flex;
  align-items: center;
}

.site-nav > ul > li > a,
.nav-item > a,
.nav-trigger {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: var(--s-2) 0;
  border: 0;
  background: none;
  color: var(--white);
  font: 400 1.0625rem var(--font-body);
  text-decoration: none;
  cursor: pointer;
}

/* Hover and current page: brighten to white, no underline */
.site-nav > ul > li > a:hover,
.site-nav > ul > li > a[aria-current="page"],
.nav-item > a:hover,
.nav-item > a[aria-current="page"],
.has-mega:hover .nav-item > a,
.has-mega.is-open .nav-item > a,
.nav-trigger:hover,
.nav-trigger[aria-expanded="true"] {
  color: var(--lime);
}

/* The chevron is its own small button beside the link */
.nav-trigger {
  padding: var(--s-2) 0.25rem;
}

.nav-trigger__chevron {
  width: 0.875rem;
  height: 0.875rem;
}

.nav-trigger[aria-expanded="true"] .nav-trigger__chevron {
  transform: rotate(180deg);
}

/* Mega menu ---------------------------------------------------------------
   Opens under the header: section links with an icon and a one-line
   description on the left, a free-week feature on the right. */

.mega {
  display: none;
}

.has-mega.is-open .mega,
html:not(.js) .has-mega:hover .mega,
html:not(.js) .has-mega:focus-within .mega {
  display: grid;
}

.mega__links {
  padding: 0;
  list-style: none;
}

.mega__link {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  column-gap: var(--s-4);
  padding: var(--s-3);
  color: var(--navy);
  text-decoration: none;
}

.mega__link svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--air-force);
}

.mega__link strong {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
}

.mega__link span span {
  display: block;
  margin-top: 0.125rem;
  color: var(--text-muted);
  font-size: var(--step--1);
  line-height: 1.4;
}

.mega__link:hover {
  background: var(--white-smoke);
}

.mega__link:hover strong {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.mega__feature {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 22rem; /* room for the neon sign above the text */
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
}

.mega__feature img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
}

.mega__feature::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgb(3 0 39 / 0.9) 0%, rgb(3 0 39 / 0.45) 40%, rgb(3 0 39 / 0.05) 70%, rgb(3 0 39 / 0) 100%);
}

.mega__feature-text {
  display: grid;
  justify-items: start;
  gap: var(--s-2);
  padding: var(--s-5);
}

.mega__feature strong {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  font-stretch: 68%;
  line-height: 1;
  text-transform: uppercase;
}

/* Heading and button only, so the sign stays visible */
.mega__feature-text > span:not(.btn) {
  display: none;
}

.mega__feature .btn {
  margin-top: var(--s-3);
}

@media (min-width: 72.01rem) {
  /* A light panel inside the navy header: reset the navy-context tokens */
  .mega {
    --text-muted: #494763;
    --focus: var(--navy);
    color: var(--navy);
    position: absolute;
    top: 100%;
    left: 50%;
    width: min(60rem, calc(100% - 2rem));
    transform: translateX(-50%);
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: var(--s-6);
    padding: var(--s-6);
    border: 1px solid var(--surface-strong);
    background: var(--white);
    box-shadow: 0 12px 32px rgb(3 0 39 / 0.12); /* real elevation over the page */
  }

  .mega__links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: var(--s-2) var(--s-4);
  }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.site-header .btn {
  min-height: 2.5rem;
  font-size: 0.75rem;
}

.site-header .btn__icon {
  width: 2rem;
  height: 2rem;
}

.nav-toggle {
  display: none;
}

@media (max-width: 72rem) {
  .site-header__inner {
    flex-wrap: wrap;
    gap: var(--s-3);
  }

  .js .nav-toggle {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0 var(--s-4);
    border: 1px solid rgb(255 255 255 / 0.6);
    border-radius: 999px;
    background: none;
    color: inherit;
    font: 500 0.75rem var(--font-body);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .site-nav {
    order: 3;
    width: 100%;
  }

  .js .site-nav {
    display: none;
  }

  /* Open: a full-height navy panel under the header, scrollable, with the
     actions pinned to the bottom */
  .js .site-nav.is-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--nav-top, var(--header-h));
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 49;
    overflow-y: auto;
    padding: var(--s-4) var(--gutter) calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
    background: var(--navy);
  }

  .site-nav > ul {
    flex-direction: column;
    gap: 0;
    margin: 0;
  }

  .site-nav > ul > li + li {
    border-top: 1px solid var(--navy-rule);
  }

  .site-nav > ul > li > a,
  .nav-item > a {
    width: 100%;
    padding-block: var(--s-4);
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 1.4rem + 2vw, 2.5rem);
    font-weight: 700;
    font-stretch: 68%;
    line-height: 1;
    text-transform: uppercase;
    word-spacing: 0.08em;
  }

  .nav-item {
    flex-wrap: wrap;
  }

  /* The coaching sub-pages are always listed; no chevron to tap */
  .nav-trigger {
    display: none;
  }

  .has-mega .mega {
    display: block;
    width: 100%;
    padding: 0 0 var(--s-4);
  }

  .mega__links {
    display: grid;
    gap: var(--s-1);
    margin: 0;
  }

  .mega__link {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--s-2) 0;
    color: var(--on-navy-muted);
  }

  .mega__link svg,
  .mega__link span span,
  .mega__feature {
    display: none;
  }

  .mega__link strong {
    font-size: 1.0625rem;
    font-weight: 400;
  }

  .mega__link:hover,
  .mega__link:focus-visible {
    background: none;
    color: var(--lime);
  }

  .site-nav__foot {
    display: grid;
    gap: var(--s-3);
    margin-top: auto;
    padding-top: var(--s-6);
  }

  .site-nav__foot .btn {
    width: 100%;
    min-height: 3.25rem;
  }

  .site-nav__foot .btn--primary {
    border-color: var(--lime);
    background: var(--lime);
    color: var(--navy);
    --sweep: var(--white);
  }

  .site-nav__call {
    justify-self: center;
    padding: var(--s-2);
    color: var(--white);
    font-weight: 500;
    text-decoration: none;
  }

  .site-nav__addr {
    text-align: center;
    color: var(--on-navy-muted);
    font-size: var(--step--1);
  }

  .nav-open {
    overflow: hidden;
  }
}

/* Wide screens never show the panel footer */
@media (min-width: 72.01rem) {
  .site-nav__foot {
    display: none;
  }
}

@media (max-width: 30rem) {
  .brand__name {
    display: none;
  }

  .site-header .btn {
    padding-inline: var(--s-4);
  }

  .site-header .btn__icon {
    display: none;
  }
}


/* Hero --------------------------------------------------------------------
   Navy band with the coaching photo behind it. The photo is mirrored so its
   blurred side sits behind the text, and a navy fade keeps the text legible.
   On narrower screens the photo sits above the text instead. */

/* Hero and trust bar together fill the screen below the sticky header */
.first-screen {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--header-h) - 1px);
  min-height: calc(100svh - var(--header-h) - 1px);
}

.hero-band {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}

.hero__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  max-height: min(26rem, 34vh);
  width: 100%;
}

.hero__photo img,
.hero__photo video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
}

.hero__photo video {
  object-position: 50% 40%;
}

/* Legibility scrim: fades the photo into the navy text area */
.hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to bottom, rgb(3 0 39 / 0) 55%, var(--navy) 100%);
}

/* Air Force Blue rising softly from the bottom of the whole hero, over the
   photo and its navy fade but beneath the text */
.hero-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(to top, rgb(80 128 142 / 0.38) 0%, rgb(80 128 142 / 0.12) 35%, rgb(80 128 142 / 0) 65%);
  pointer-events: none;
}

.hero {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center; /* text sits in the middle of whatever height is left */
  padding-block: var(--s-5) var(--s-8);
}

.hero__text {
  max-width: 40rem;
}

.hero__place {
  margin-bottom: var(--s-5);
  color: var(--slate);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 11em;
  font-size: clamp(2.625rem, min(1.4rem + 4.4vw, 8.4vh), 5.25rem); /* also scales with screen height so the first screen fits */
  line-height: 0.95;
}

.hero .lead {
  max-width: 30em;
  margin-top: var(--s-5);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
}

.hero .actions {
  margin-top: var(--s-7);
}

/* Member rating: three member headshots, stars and one short line.
   Replace assets/img/member-1..3.jpg with real members' photos (with their
   permission). */
.rating {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: var(--s-5);
}

.rating__faces {
  display: flex;
  flex: none;
  padding: 0;
  list-style: none;
}

.rating__faces img {
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--navy);
  border-radius: 50%;
  object-fit: cover;
}

.rating__faces li + li {
  margin-left: -0.5rem;
}

.rating__stars {
  display: flex;
  gap: 2px;
  color: var(--white);
}

.rating__stars svg {
  width: 0.8125rem;
  height: 0.8125rem;
}

.rating__text {
  margin-top: 0.1875rem;
  font-size: 0.8125rem;
  line-height: 1.2;
}

@media (min-width: 60rem) {
  .hero__photo {
    position: absolute;
    inset: 0 0 0 auto;
    width: 72%;
    max-height: none;
    aspect-ratio: auto;
    z-index: -1;
  }

  .hero__photo::after {
    left: -2px; /* covers the sub-pixel edge of the photo */
    background: linear-gradient(to right, var(--navy) 0%, var(--navy) 6%, rgb(3 0 39 / 0.8) 26%, rgb(3 0 39 / 0.15) 58%, rgb(3 0 39 / 0.1) 100%);
  }

  .hero {
    padding-block: clamp(2rem, 6vh, 4rem);
  }
}

/* Trust bar: four short reasons to believe, on solid Spring Bud with Oxford
   Blue text (14.2:1). */
.trust {
  background: var(--lime);
  color: var(--navy);
}

.trust__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--s-5);
  padding: 0;
  list-style: none;
}

.trust__item {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  column-gap: var(--s-3);
  align-items: start;
  padding-block: var(--s-4);
}

.trust__item svg {
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.0625rem;
}

.trust__item h3 {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
}

.trust__item p {
  margin-top: 0.125rem;
  font-size: 0.8125rem;
  line-height: 1.35;
}

@media (min-width: 64rem) {
  .trust__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 var(--col-gap);
  }

  .trust__item {
    padding-block: var(--s-5);
  }
}

/* Reassurance ---------------------------------------------------------------
   Heading and intro, then what a new member can expect as a list: navy icon
   badge, title and description per row; a tall photo alongside on wide
   screens. */

.reassure-band {
  padding-block: var(--s-9);
  background: var(--white-smoke);
}

.reassure {
  row-gap: var(--s-7);
}

.reassure h2 {
  max-width: 12em;
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem);
}

.reassure .lead {
  max-width: 28em;
  margin-top: var(--s-5);
  color: var(--text-muted);
}

.expect-list {
  display: grid;
  gap: var(--s-6);
  padding: 0;
  list-style: none;
}

/* Each point reads as a list row: icon left, title and description right */
.expect-item {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: var(--s-5);
  align-items: start;
}

.expect-item h3,
.expect-item p {
  grid-column: 2;
}

.expect-item__icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--lime); /* the logo's pairing */
}

.expect-item__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.expect-item h3 {
  margin-top: 0.5rem;
  font-size: var(--step-1);
  font-weight: 500;
}

.expect-item p {
  max-width: 26em;
  margin-top: var(--s-2);
  color: var(--text-muted);
}

.reassure__media {
  --ratio: 4 / 3;
}

@media (min-width: 60rem) {
  .reassure {
    grid-template-rows: auto 1fr;
    row-gap: var(--s-8);
  }

  .reassure__intro { grid-column: 1 / span 6; grid-row: 1; }
  .expect-list { grid-column: 1 / span 6; grid-row: 2; align-self: start; }

  .reassure__media {
    grid-column: 8 / -1;
    grid-row: 1 / span 2;
    aspect-ratio: auto;
    min-height: 100%;
  }
}

/* Small group coaching ------------------------------------------------------
   Photo-led split: a tall photo carrying the session video's play button,
   beside the heading and the six points as a numbered list. */

.explain-band {
  padding-block: var(--s-9);
}

.explain {
  display: grid;
  gap: var(--s-7) var(--col-gap);
  align-items: center;
}

.explain__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--navy);
}

.explain__photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

.explain__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: var(--s-4);
  padding: var(--s-5);
  border: 0;
  background: linear-gradient(to top, rgb(3 0 39 / 0.55), rgb(3 0 39 / 0) 40%);
  color: var(--white);
  cursor: pointer;
}

.explain__play .play-disc {
  width: 4rem;
  height: 4rem;
  background: var(--lime);
  color: var(--navy);
}

.explain__play:hover .play-disc,
.explain__play:focus-visible .play-disc {
  background: var(--white);
}

.explain__play:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: -3px;
}

.explain__play-label {
  padding-bottom: 1.2rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.explain__lede {
  max-width: 32em;
  margin-top: var(--s-4);
  color: var(--text-muted);
}

.explain__list {
  margin-top: var(--s-6);
  padding: 0;
  list-style: none;
}

.explain__list li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--s-3);
  padding-block: var(--s-4);
  border-top: 1px solid var(--border);
}

.explain__list li:last-child {
  border-bottom: 1px solid var(--border);
}

.explain__n {
  padding-top: 0.2rem;
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.explain__list h3 {
  font-size: 1.0625rem;
  font-weight: 600;
}

.explain__list p {
  margin-top: var(--s-1);
  color: var(--text-muted);
  font-size: var(--step--1);
}

.explain__body .link {
  margin-top: var(--s-5);
}

@media (max-width: 63.99rem) {
  .explain__photo {
    width: min(100%, 20rem);
    margin-inline: auto;
    aspect-ratio: 3 / 4;
  }
}

@media (min-width: 64rem) {
  .explain {
    grid-template-columns: 5fr 6fr;
    align-items: stretch;
  }

  /* Photo runs the full height of the text column */
  .explain__photo {
    aspect-ratio: auto;
    min-height: 32rem;
  }

  .explain__photo > img {
    position: absolute;
    inset: 0;
  }
}

/* Comparison: this, not that ------------------------------------------------
   Oxford Blue band. Each row pairs the
   typical-gym version (small, struck through) with ours (large, lime words). */

.contrast {
  padding-block: var(--s-9);
}

.contrast__head {
  text-align: center;
}

.contrast__head h2 {
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem);
}

.contrast__head p {
  margin-inline: auto;
  max-width: 34em;
  margin-top: var(--s-4);
  color: var(--on-navy-muted);
}

.contrast__list {
  margin-top: var(--s-7);
  padding: 0;
  list-style: none;
}

.contrast__list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-2);
  padding-block: var(--s-5);
  border-top: 1px solid var(--navy-rule);
}

.contrast__list li:last-child {
  border-bottom: 1px solid var(--navy-rule);
}

.contrast__not {
  color: var(--slate);
}

.contrast__not span {
  margin-right: var(--s-1);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contrast__not s {
  text-decoration-thickness: 1px;
}

.contrast__this {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem);
  font-weight: 700;
  font-stretch: 68%;
  line-height: 1;
  text-transform: uppercase;
  word-spacing: 0.08em;
}

.contrast__this em {
  color: var(--lime);
  font-style: normal;
}

/* Hover reveal: a photo pops up over the row and follows the pointer along
   it. Mouse/trackpad only; touch screens keep the plain list. */
.contrast__pop {
  display: none;
}

@media (hover: hover) and (min-width: 60rem) {
  .contrast__list li {
    position: relative;
  }

  .contrast__pop {
    --ratio: 4 / 3;
    position: absolute;
    top: 50%;
    left: var(--x, 75%);
    z-index: 2;
    display: block;
    width: 15rem;
    background: var(--white-smoke);
    box-shadow: 0 16px 40px rgb(3 0 39 / 0.45);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.92);
    transition: opacity 0.2s, transform 0.25s cubic-bezier(.2,.7,.2,1);
  }

  .contrast .contrast__pop {
    background: var(--white-smoke);
  }

  .contrast__pop .ph {
    --border: var(--border-light);
  }

  .contrast .contrast__pop .ph__label {
    background: var(--white);
    color: var(--navy);
    outline: 0;
  }

  .contrast__list li:hover .contrast__pop {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@media (hover: hover) and (min-width: 60rem) and (prefers-reduced-motion: reduce) {
  .contrast__pop {
    transition: none;
  }
}

@media (min-width: 60rem) {
  .contrast__list li {
    grid-template-columns: 5fr 7fr;
    align-items: baseline;
    column-gap: var(--col-gap);
  }

  .contrast__not {
    text-align: right;
  }
}

/* Shared section parts --------------------------------------------------- */

/* Heading and intro on the left, an action on the right */
/* Section headings sit centred, wide, with the lede and any button below */
.section-head {
  display: grid;
  justify-items: center;
  gap: var(--s-5);
  text-align: center;
}

.section-head > div {
  max-width: 52rem;
}

.section-head h2 {
  max-width: 18em;
  margin-inline: auto;
}

.section-head p {
  max-width: 38em;
  margin: var(--s-4) auto 0;
  color: var(--text-muted);
}

/* Navy circle with lime content: step numbers and icons */
.badge {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--lime);
  font-weight: 600;
}

.badge svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* How it works ------------------------------------------------------------
   Heading, intro and button on the left; the three steps down the right,
   each an icon badge with a tracked capital title and a line of text. */

.steps-band {
  padding-block: var(--s-9);
}

.steps-split {
  display: grid;
  gap: var(--s-7) var(--col-gap);
  align-items: start;
}

.steps-split__intro p {
  max-width: 30em;
  margin-top: var(--s-5);
  color: var(--text-muted);
  font-size: var(--step-1);
}

.steps-split__intro .actions {
  margin-top: var(--s-6);
}

.steps {
  display: grid;
  gap: var(--s-7);
  padding: 0;
  list-style: none;
}

.steps li {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: var(--s-5);
  align-items: center;
}

.steps h3 {
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.steps p {
  grid-column: 1 / -1;
  max-width: 32em;
  margin-top: var(--s-3);
  color: var(--text-muted);
  font-size: var(--step-1);
}

@media (min-width: 64rem) {
  .steps-split {
    grid-template-columns: 6fr 5fr;
  }

  .steps-split__intro {
    position: sticky;
    top: calc(var(--header-h) + var(--s-6));
  }
}

/* Member stories ----------------------------------------------------------
   One featured member in a rounded card, then three photo cards with the
   story title over the image. Rounded corners are used only in this section
   (client's choice) to give the stories a softer, personal feel. */

.stories-band {
  padding-block: var(--s-9);
}

.feature-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--s-7);
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--white-smoke);
}

.feature-story__media {
  position: relative;
  aspect-ratio: 3 / 4;
}

.feature-story__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 30%;
}

.feature-story__body {
  display: flex;
  flex-direction: column;
  padding: var(--s-6) var(--s-5);
}

.feature-story__label {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.feature-story blockquote {
  margin: var(--s-4) 0 0;
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
  line-height: 1.4;
}

.feature-story__name {
  margin-top: var(--s-5);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  font-stretch: 68%;
  line-height: 1;
  text-transform: uppercase;
}

.feature-story__facts {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: var(--s-4) var(--s-6);
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
}

.feature-story__facts dt {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.feature-story__facts dd {
  margin-top: var(--s-1);
  font-weight: 500;
}

.feature-story .actions {
  margin-top: var(--s-6);
}

@media (max-width: 30rem) {
  .feature-story__facts {
    grid-template-columns: auto auto;
  }

  .feature-story__facts > div:last-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 60rem) {
  .feature-story {
    grid-template-columns: 5fr 6fr;
  }

  .feature-story__media {
    aspect-ratio: auto;
    min-height: 100%;
  }

  .feature-story__body {
    justify-content: center;
    padding: var(--s-8) var(--s-7);
  }
}

/* Story cards: photo with title, line and link over a navy fade. Each story
   is a video; the play button covers the card and the link sits above it. */
.story-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-4);
  padding: 0;
  list-style: none;
}

.story-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 27rem; /* grows to fit the quote on narrow screens */
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-card);
  background: var(--navy);
  color: var(--white);
}

.story-card > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(.2,.7,.2,1);
}

.story-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgb(3 0 39 / 0.95) 0%, rgb(3 0 39 / 0.7) 45%, rgb(3 0 39 / 0) 75%);
  pointer-events: none;
}

/* Full-card play button with the disc in the top-right corner */
.story-card__play {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--s-4);
  border: 0;
  background: none;
  cursor: pointer;
}

.play-disc {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: rgb(3 0 39 / 0.55);
  color: var(--white);
  transition: background-color 0.3s, color 0.3s;
}

.play-disc svg {
  width: 1.375rem;
  height: 1.375rem;
  margin-left: 0.15rem;
}

.story-card__play:hover .play-disc,
.story-card__play:focus-visible .play-disc {
  background: var(--lime);
  color: var(--navy);
}

.story-card__play:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: -3px;
}

.story-card__text {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: start;
  gap: var(--s-2);
  padding: var(--s-5);
  pointer-events: none;
}

.story-card__quote {
  margin: 0;
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
  font-weight: 500;
  line-height: 1.3;
  text-wrap: pretty;
}

.story-card__who {
  color: var(--on-navy-muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.story-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-3);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  pointer-events: auto;
}

.story-card__cta .btn__icon {
  width: 2rem;
  height: 2rem;
  margin-right: 0;
  background: var(--lime);
  color: var(--navy);
}

.story-card__cta:hover .btn__icon {
  background: var(--white);
}

.story-card:hover > img {
  transform: scale(1.04);
}

/* The featured story's photo is playable too */
.feature-story__media .story-card__play {
  z-index: 1;
}

/* Self-hosted clips: a <video> sits behind its poster frame and play button.
   All clips are portrait; the frame crops a little off the top and bottom
   (poster and playback alike) rather than showing black bars. */
.clip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

.story-card > .clip {
  z-index: -2;
}

.is-playing > .clip {
  z-index: 2;
}

.is-playing::before,
.is-playing > .story-card__text {
  display: none;
}

/* Once playing, the video fills the card or photo */
.story-video {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.stories__more {
  display: flex;
  justify-content: center;
  margin-top: var(--s-7);
}

@media (min-width: 60rem) {
  .story-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .story-card {
    min-height: 0;
    aspect-ratio: 3 / 4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-card > img,
  .play-disc {
    transition: none;
  }

  .story-card:hover > img {
    transform: none;
  }
}

/* Meet our team ------------------------------------------------------------
   Large rounded portraits with name, role and qualifications beneath,
   three across on desktop. */

.team-band {
  padding-block: var(--s-9);
  background: var(--white-smoke);
}

.team {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-7) var(--col-gap);
  margin-top: var(--s-8);
  padding: 0;
  list-style: none;
}

.member__photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--surface-strong);
}

.member__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member h3 {
  margin-top: var(--s-5);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  font-stretch: 68%;
  line-height: 1;
  text-transform: uppercase;
}

/* Role and years: one small meta line under the name */
.member__role {
  margin-top: var(--s-3);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.member__years::before {
  content: "·";
  margin-inline: 0.5em;
  color: var(--air-force);
}

/* The coach's own words: the one larger line on the card */
.member__quote {
  margin: var(--s-5) 0 0;
  padding-left: var(--s-4);
  border-left: 2px solid var(--lime);
}

.member__quote p {
  color: var(--navy);
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
  font-weight: 500;
  line-height: 1.35;
}

.member__bio {
  margin-top: var(--s-4);
  color: var(--text-muted);
  font-size: var(--step--1);
  line-height: 1.6;
}

/* Qualifications: small print at the foot of the card */
/* Qualifications as small outlined pills */
.member__quals {
  margin: var(--s-4) 0 0;
  padding: var(--s-3) 0 0;
  border-top: 1px solid var(--border);
  list-style: none;
}

.member__quals span {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.member__quals li {
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

@media (min-width: 40rem) {
  .team {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .team {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* FAQ --------------------------------------------------------------------- */

.faq-band {
  padding-block: var(--s-9);
  background: var(--white-smoke);
}

.faq {
  row-gap: var(--s-6);
}

.faq__intro p {
  max-width: 26em;
  margin-top: var(--s-4);
  color: var(--text-muted);
}

.faq__intro .link {
  margin-top: var(--s-5);
}

/* Each question is its own white card */
.faq-list {
  display: grid;
  gap: var(--s-3);
}

.faq-list details {
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: 0 1px 2px rgb(3 0 39 / 0.04), 0 0.75rem 1.75rem rgb(3 0 39 / 0.05);
}

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-5) var(--s-5);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

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

/* Thin plus that becomes a minus when open */
.faq-list summary::after {
  content: "";
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  background:
    linear-gradient(var(--navy), var(--navy)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--navy), var(--navy)) center / 1.5px 100% no-repeat;
  transition: transform 0.25s;
}

.faq-list details[open] summary::after {
  background: linear-gradient(var(--navy), var(--navy)) center / 100% 1.5px no-repeat;
}

.faq-list summary:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: -2px;
  border-radius: var(--radius-card);
}

.faq-list details > div {
  max-width: var(--measure);
  padding: 0 var(--s-5) var(--s-5);
  color: var(--text-muted);
}

@media (min-width: 40rem) {
  .faq-list summary {
    padding: var(--s-5) var(--s-6);
  }

  .faq-list details > div {
    padding: 0 var(--s-6) var(--s-6);
  }
}

@media (min-width: 60rem) {
  .faq { align-items: start; }
  .faq__intro { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + var(--s-6)); }
  .faq__answers { grid-column: 7 / -1; }
}

/* Visit ------------------------------------------------------------------- */

.visit-band {
  padding-block: var(--s-9);
}

.visit {
  row-gap: var(--s-7);
}

.visit__list {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-6);
  padding: 0;
  list-style: none;
}

.visit__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-5);
}

.visit__list h3 {
  margin-top: 0.125rem;
  font-size: 1rem;
  font-weight: 600;
}

.visit__list address,
.visit__list p {
  margin-top: var(--s-1);
  color: var(--text-muted);
  font-style: normal;
}

.visit__info .actions {
  align-items: center;
  gap: var(--s-5);
  margin-top: var(--s-6);
}

@media (min-width: 60rem) {
  .visit__info { grid-column: 1 / span 5; align-self: center; }
  .visit__map { grid-column: 7 / -1; }
}

/* Map licence credit, kept small in the corner */
.visit__map {
  position: relative;
}

.map-credit {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 2px 6px;
  background: rgb(255 255 255 / 0.85);
  color: var(--navy);
  font-size: 0.6875rem;
  text-decoration: none;
}

/* Closing call to action -------------------------------------------------- */

/* Instagram ----------------------------------------------------------------
   Six square tiles; the latest posts once a feed is connected. */

.insta-band {
  padding-block: var(--s-9);
}

.insta__follow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  text-transform: none;
  letter-spacing: 0;
}

.insta__follow svg {
  width: 1.125rem;
  height: 1.125rem;
}

.insta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
  margin-top: var(--s-7);
  padding: 0;
  list-style: none;
}

.insta a {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 0.75rem;
  background: var(--surface-strong);
}

.insta img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
}

.insta a:hover img {
  transform: scale(1.05);
}

/* Small play mark on video posts */
.insta a.is-video::after {
  content: "";
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  border-style: solid;
  border-width: 0.45rem 0 0.45rem 0.75rem;
  border-color: transparent transparent transparent var(--white);
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.5));
}

@media (min-width: 48rem) {
  .insta {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--s-3);
  }
}

.closing {
  padding-block: var(--s-9);
  background: var(--lime);
  color: var(--navy);
  text-align: center;
}

.closing h2 {
  max-width: 14em;
  margin-inline: auto;
}

/* "Get ..." with the second line cycling through what members want. All
   words share one grid cell, so the heading never changes height. */
.rotator {
  display: grid;
  justify-items: center;
  font-size: clamp(2.5rem, 1.4rem + 4.4vw, 5.5rem);
}

.rotator__words {
  display: grid;
}

.rotator__word {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 0.45s, transform 0.55s cubic-bezier(.2,.7,.2,1);
}

.rotator__word.is-active {
  opacity: 1;
  transform: none;
}

.rotator__word.is-leaving {
  opacity: 0;
  transform: translateY(-0.4em);
}

@media (prefers-reduced-motion: reduce) {
  .rotator__word {
    transition: none;
  }
}

.closing p {
  max-width: 30em;
  margin: var(--s-4) auto 0;
}

.closing .actions {
  justify-content: center;
  margin-top: var(--s-6);
}

/* Footer ------------------------------------------------------------------
   Brand and contact left, two link columns right; a "Find us" band with the
   address and social links; then the legal line and studio credit. */

.site-footer {
  padding-block: var(--s-8) var(--s-6);
  --rule: rgb(173 252 249 / 0.35); /* Celeste, softened */
}

.footer__top {
  display: grid;
  gap: var(--s-7) var(--col-gap);
  padding-bottom: var(--s-7);
  border-bottom: 1px solid var(--rule);
}

.footer__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
}

.footer__brand img {
  width: 2.25rem;
  height: auto;
}

.footer__brand span {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  font-stretch: 68%;
  line-height: 1;
  text-transform: uppercase;
}

.footer__contact address {
  display: grid;
  justify-items: start;
  gap: var(--s-1);
  margin-top: var(--s-6);
  font-size: var(--step-1);
  font-style: normal;
}

.footer__contact address a,
.footer__links a {
  color: var(--on-navy-muted);
  text-decoration: none;
}

.footer__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: var(--s-6) var(--s-8);
}

.footer__links ul {
  display: grid;
  gap: var(--s-2);
  padding: 0;
  list-style: none;
  font-size: var(--step-1);
}

.footer__contact address a:hover,
.footer__links a:hover,
.footer__base a:hover,
.footer__social a:hover {
  color: var(--white);
}

.footer__find {
  padding-block: var(--s-6) var(--s-7);
  border-bottom: 1px solid var(--rule);
}

.footer__find h2 {
  font-size: 1.75rem;
}

.footer__find-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4) var(--s-6);
  margin-top: var(--s-4);
}

.footer__find address {
  color: var(--on-navy-muted);
  font-style: normal;
}

.footer__social {
  display: flex;
  gap: var(--s-3);
  padding: 0;
  list-style: none;
}

.footer__social a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--on-navy-muted);
}

.footer__social svg {
  width: 1.5rem;
  height: 1.5rem;
}

.footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-5);
  padding-top: var(--s-5);
  color: var(--on-navy-muted);
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
}

.footer__base ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  padding: 0;
  list-style: none;
}

.footer__base a {
  color: inherit;
  text-decoration: none;
}

.footer__credit {
  margin-left: auto;
}

.footer__credit a {
  color: var(--white);
}

@media (min-width: 48rem) {
  .footer__top {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@media (max-width: 47.99rem) {
  .footer__credit {
    flex-basis: 100%;
    margin-left: 0;
  }
}

/* WhatsApp ---------------------------------------------------------------- */

.whatsapp {
  position: fixed;
  right: var(--s-4);
  bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 3.25rem;
  padding: 0 1.375rem 0 1rem;
  border-radius: 999px;
  background: #15803d; /* a proper green that still passes contrast with white text */
  color: var(--white);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  box-shadow: 0 6px 18px rgb(3 0 39 / 0.25); /* floats over the page */
  transition: background-color 0.2s;
}

.whatsapp svg {
  width: 1.625rem;
  height: 1.625rem;
}

.whatsapp:hover {
  background: #166534;
  color: var(--white);
}

.whatsapp:focus-visible {
  outline-color: var(--navy);
}

/* Leave room so the floating button never covers the footer's last line */
.site-footer {
  padding-bottom: calc(var(--s-6) + 4rem);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ==========================================================================
   Small Group Coaching page
   ========================================================================== */

/* Current section in the header */
/* What it is: four open points, no boxes */
.sgc-define {
  padding-block: var(--s-9);
}

.sgc-define__inner {
  row-gap: var(--s-7);
  align-items: start;
}

.sgc-define__intro p {
  max-width: 30em;
  margin-top: var(--s-5);
  color: var(--text-muted);
  font-size: var(--step-1);
}

.sgc-define__intro .link {
  margin-top: var(--s-5);
}

.sgc-points {
  display: grid;
  gap: var(--s-7) var(--col-gap);
  padding: 0;
  list-style: none;
}

.sgc-points h3 {
  margin-top: var(--s-5);
  font-size: var(--step-1);
  font-weight: 500;
}

.sgc-points p {
  margin-top: var(--s-2);
  color: var(--text-muted);
}

@media (min-width: 40rem) {
  .sgc-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .sgc-define__intro { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + var(--s-6)); }
  .sgc-points { grid-column: 7 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Not a fitness class: two panels on navy, crosses vs lime ticks, each
   ending in a stat strip. Fine rules frame the panels. */
.vs {
  padding-block: var(--s-9);
  --vs-rule: rgb(173 252 249 / 0.35);
}

.vs__head {
  display: grid;
  gap: var(--s-5) var(--col-gap);
  align-items: end;
}

.vs__head > p {
  max-width: 30em;
  color: var(--on-navy-muted);
}

.vs__panels {
  display: grid;
  margin-top: var(--s-8);
  border-top: 1px solid var(--vs-rule);
}

.vs__panel {
  display: flex;
  flex-direction: column;
  padding-top: var(--s-7);
}

.vs__panel h3 {
  padding-inline: var(--s-5);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 500;
  line-height: 1.2;
}

.vs__panel h3 em {
  font-style: normal;
  color: var(--slate);
}

.vs__panel--yes h3 em {
  color: var(--lime);
}

.vs__panel ul {
  display: grid;
  gap: var(--s-4);
  flex: 1;
  align-content: start;
  margin-top: var(--s-6);
  padding: 0 var(--s-5) var(--s-7);
  list-style: none;
}

.vs__panel li {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  font-size: var(--step-1);
}

.vs__panel--no li {
  color: var(--on-navy-muted);
}

.vs-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid currentColor;
}

.vs-mark svg {
  width: 0.875rem;
  height: 0.875rem;
}

.vs-mark--no {
  color: var(--slate);
}

.vs-mark--yes {
  color: var(--lime);
}

/* Stat strip at the foot of each panel */
.vs__stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: auto;
  padding: var(--s-5);
  border-top: 1px solid var(--vs-rule);
}

.vs__stat strong {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 700;
  font-stretch: 68%;
  line-height: 1;
}

.vs__stat span {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: right;
}

.vs__panel--no .vs__stat {
  background: rgb(157 156 196 / 0.12);
  color: var(--on-navy-muted);
}

.vs__panel--yes .vs__stat {
  background: rgb(171 235 10 / 0.14);
  color: var(--lime);
}

@media (max-width: 59.99rem) {
  .vs__panel + .vs__panel {
    border-top: 1px solid var(--vs-rule);
  }
}

@media (min-width: 60rem) {
  .vs__head {
    grid-template-columns: 7fr 5fr;
  }

  .vs__panels {
    grid-template-columns: 1fr 1fr;
  }

  .vs__panel + .vs__panel {
    border-left: 1px solid var(--vs-rule);
  }
}

/* A session: five numbered steps on a line, video below */
.sgc-session {
  padding-block: var(--s-9);
}

.sgc-session .section-head p {
  color: var(--on-navy-muted);
}

.track {
  display: grid;
  gap: var(--s-6);
  margin-top: var(--s-8);
  padding: 0;
  list-style: none;
}

.track li {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: var(--s-5);
  align-content: start;
}

.track__n {
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--lime);
  color: var(--navy);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.track h3 {
  margin-top: 0.55rem;
  font-size: var(--step-1);
  font-weight: 500;
}

.track p {
  grid-column: 2;
  margin-top: var(--s-2);
  color: var(--on-navy-muted);
}

/* Connecting line */
.track li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 3.25rem;
  bottom: calc(-1 * var(--s-6) + 0.5rem);
  left: 1.375rem;
  border-left: 1px solid var(--navy-rule);
}

/* Session clip: portrait, phone-shaped, sits beside the steps on wide screens */
.sgc-session__video {
  position: relative;
  width: min(100%, 20rem);
  aspect-ratio: 9 / 16;
  margin: var(--s-8) auto 0;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--navy-raised);
}


@media (min-width: 64rem) {
  .sgc-session__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: var(--s-8) var(--col-gap);
    align-items: center;
    margin-top: var(--s-8);
  }

  .track {
    max-width: 34rem;
    margin-top: 0;
  }

  .sgc-session__video {
    width: 100%;
    margin: 0;
  }
}

/* Adapted to you: text left, tall photo right */
.sgc-adapt {
  padding-block: var(--s-9);
}

.sgc-adapt__inner {
  display: grid;
  gap: var(--s-7) var(--col-gap);
  align-items: stretch;
}

.sgc-adapt__lede {
  max-width: 32em;
  margin-top: var(--s-5);
  color: var(--text-muted);
  font-size: var(--step-1);
}

.sgc-adapt__list {
  margin-top: var(--s-7);
  padding: 0;
  list-style: none;
}

.sgc-adapt__list li {
  padding-block: var(--s-5);
  border-top: 1px solid var(--border);
}

.sgc-adapt__list li:last-child {
  border-bottom: 1px solid var(--border);
}

.sgc-adapt__list h3 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  font-stretch: 68%;
  line-height: 1;
  text-transform: uppercase;
}

.sgc-adapt__list p {
  margin-top: var(--s-2);
  color: var(--text-muted);
}

.sgc-adapt__photo {
  position: relative;
  min-height: 22rem;
  overflow: hidden;
  border-radius: var(--radius-card);
}

.sgc-adapt__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 64rem) {
  .sgc-adapt__inner {
    grid-template-columns: 6fr 5fr;
  }
}

/* Who it's for + goals: two columns on White Smoke */
.sgc-for {
  padding-block: var(--s-9);
  background: var(--white-smoke);
}

.sgc-for__inner {
  row-gap: var(--s-8);
}

.sgc-for h2 {
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
}

.sgc-for__inner > div > p {
  max-width: 28em;
  margin-top: var(--s-4);
  color: var(--text-muted);
}

.sgc-quotes {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-6);
  padding: 0;
  list-style: none;
}

.sgc-quotes li {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  font-weight: 500;
  line-height: 1.3;
}

.sgc-goals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4) var(--s-5);
  margin-top: var(--s-6);
  padding: 0;
  list-style: none;
}

.sgc-goals li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--step-1);
  font-weight: 500;
}

.badge--sm {
  width: 2rem;
  height: 2rem;
}

.badge--sm svg {
  width: 1rem;
  height: 1rem;
}

.sgc-for__goals .link {
  margin-top: var(--s-6);
}

@media (min-width: 64rem) {
  .sgc-for__who { grid-column: 1 / span 6; }
  .sgc-for__goals { grid-column: 8 / -1; }
}

@media (max-width: 30rem) {
  .sgc-goals { grid-template-columns: minmax(0, 1fr); }
}

/* How to start: centred heading, five outlined step cards on navy, CTA below */
.start {
  padding-block: var(--s-9);
}

.start__head {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

.start__head p {
  margin-top: var(--s-4);
  color: var(--on-navy-muted);
  font-size: var(--step-1);
}

.start-steps {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-8);
  padding: 0;
  list-style: none;
}

.start-step {
  display: flex;
  flex-direction: column;
  padding: var(--s-6) var(--s-5);
  border: 1px solid rgb(173 252 249 / 0.4); /* Celeste, softened */
  border-radius: var(--radius-card);
}

.start-step__n {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 700;
  font-stretch: 68%;
  line-height: 1;
  color: var(--lime);
}

.start-step h3 {
  margin-top: var(--s-5);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}

.start-step p {
  margin-top: var(--s-3);
  color: var(--on-navy-muted);
}

.start__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--s-8);
}

/* Tablet: three on the first row, two centred on the second */
@media (min-width: 48rem) {
  .start-steps {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .start-step {
    grid-column: span 2;
  }

  .start-step:nth-child(4),
  .start-step:nth-child(5) {
    grid-column: span 3;
  }
}

@media (min-width: 75rem) {
  .start-steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .start-step,
  .start-step:nth-child(4),
  .start-step:nth-child(5) {
    grid-column: auto;
  }
}

/* ==========================================================================
   Success Stories page
   ========================================================================== */

/* Story hero: the featured member's film beside their story headline */
.story-hero {
  padding-block: var(--s-8) var(--s-9);
}

.story-hero__inner {
  row-gap: var(--s-7);
  align-items: center;
}

.story-hero h1 {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem);
  font-weight: 400;
  line-height: 1;
  color: var(--on-navy-muted);
}

/* The member's own words carry the weight */
.story-hero h1 strong {
  font-weight: 700;
  color: var(--white);
}

.story-hero__quote {
  max-width: 30em;
  margin: var(--s-6) 0 0;
  padding-left: var(--s-5);
  border-left: 3px solid var(--lime);
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.4;
}

.story-hero__name {
  margin-top: var(--s-4);
  color: var(--on-navy-muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.story-hero .actions {
  margin-top: var(--s-6);
}

.story-hero__film {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--navy-raised);
}

.story-hero__film > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-hero__film .play-disc {
  width: 4rem;
  height: 4rem;
  background: var(--lime);
  color: var(--navy);
}

.story-hero__film .story-card__play {
  align-items: center;
  justify-content: center;
}

@media (max-width: 63.99rem) {
  .story-hero__film {
    width: min(100%, 20rem);
    margin-inline: auto;
    order: -1;
  }
}

@media (min-width: 64rem) {
  .story-hero__text { grid-column: 1 / span 7; }
  .story-hero__film { grid-column: 8 / -1; }

  .story-hero {
    padding-block: var(--s-9);
  }
}

/* More member stories: ruled rows with photo, then before/coaching/now */
.stories-more {
  padding-block: var(--s-9);
  background: var(--white-smoke);
}

.story-rows {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-8);
  padding: 0;
  list-style: none;
}

/* Each story is a white card: video left, name as the heading, then the arc */
.story-row {
  display: grid;
  gap: var(--s-5) var(--col-gap);
  padding: var(--s-5);
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: 0 1px 2px rgb(3 0 39 / 0.04), 0 1rem 2.5rem rgb(3 0 39 / 0.06);
}

.story-row__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--navy);
}

.story-row__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-row__who {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.story-row__name {
  margin-top: var(--s-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 68%;
  font-size: clamp(2.5rem, 1.6rem + 3.2vw, 4.5rem);
  line-height: 0.95;
  text-transform: uppercase;
  word-spacing: 0.08em;
}

.story-row__title {
  max-width: 30em;
  margin-top: var(--s-4);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 500;
  line-height: 1.35;
}

.story-row__arc {
  display: grid;
  gap: var(--s-4) var(--s-5);
  margin-top: var(--s-5);
}

.story-row__arc dt {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.story-row__arc dd {
  margin-top: var(--s-1);
  color: var(--text-muted);
  font-size: var(--step--1);
}

@media (min-width: 40rem) {
  .story-row__arc {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .story-row {
    grid-template-columns: 4fr 8fr;
    align-items: center;
  }
}

/* Enquiry form on navy */
.enquire {
  padding-block: var(--s-9);
}

.enquire__inner {
  row-gap: var(--s-7);
  align-items: center;
}

.enquire__intro p {
  max-width: 28em;
  margin-top: var(--s-5);
  color: var(--on-navy-muted);
}

.enquire__alt a {
  color: var(--white);
}

/* The enquiry form: a white card with soft, rounded fields. Shared by the
   Get Started page (on White Smoke) and the Success Stories band (on navy). */
.form-card {
  padding: var(--s-6) var(--s-5);
  border-radius: var(--radius-card);
  background: var(--white);
  color: var(--navy);
  box-shadow: 0 1.25rem 3rem rgb(3 0 39 / 0.08);
}

.form-card__fields {
  display: grid;
  gap: var(--s-5) var(--s-4);
}

.field label {
  display: block;
  margin-bottom: var(--s-2);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--navy);
}

.field__req {
  color: var(--air-force);
}

.field__optional {
  color: var(--text-muted);
  font-weight: 400;
}

.field input,
.field textarea {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--white);
  color: var(--navy);
  font: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}

.field input:hover,
.field textarea:hover {
  border-color: var(--slate);
}

.field input:focus-visible,
.field textarea:focus-visible {
  outline: 0;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgb(3 0 39 / 0.12);
}

.field input:user-invalid {
  border-color: #b42318;
}

.field textarea {
  min-height: 7rem;
  resize: vertical;
}

/* Goal chips: pill toggles instead of a column of boxes */
.chips {
  margin: var(--s-5) 0 0;
  padding: 0;
  border: 0;
}

.chips legend {
  margin-bottom: var(--s-3);
  font-size: var(--step--1);
  font-weight: 500;
}

.chips__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  font-size: var(--step--1);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.chip input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.chip:hover {
  border-color: var(--slate);
}

.chip:has(input:checked) {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--white);
}

.chip:has(input:focus-visible) {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

.enquiry__actions {
  margin-top: var(--s-6);
}

.enquiry__note,
.enquiry__status {
  margin-top: var(--s-4);
  color: var(--text-muted);
  font-size: var(--step--1);
}

.enquiry__status:empty {
  display: none;
}

.enquiry__status a {
  color: var(--navy);
}

@media (min-width: 40rem) {
  .form-card {
    padding: var(--s-7) var(--s-6);
  }

  .form-card__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field--wide {
    grid-column: 1 / -1;
  }
}

@media (min-width: 64rem) {
  .enquire__intro { grid-column: 1 / span 5; }
  .enquire .form-card { grid-column: 7 / -1; }
}

/* ==========================================================================
   About page
   ========================================================================== */

/* Hero: headline left, the gym and team video right */
.about-hero {
  padding-block: var(--s-8) var(--s-9);
}

.about-hero__inner {
  row-gap: var(--s-7);
  align-items: center;
}

.about-hero h1 {
  font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.5rem);
}

.about-hero .lead {
  max-width: 30em;
  margin-top: var(--s-5);
  color: var(--on-navy-muted);
}

.about-hero .actions {
  margin-top: var(--s-6);
}

.about-hero__film {
  position: relative;
  width: min(100%, 20rem);
  margin-inline: auto;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--navy-raised);
}

.about-hero__film > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 64rem) {
  .about-hero { padding-block: var(--s-9); }
  .about-hero__text { grid-column: 1 / span 7; }
  .about-hero__film { grid-column: 8 / -1; width: 100%; }
}

/* The problem: heading left, two paragraphs right */
.problem {
  padding-block: var(--s-9);
}

.problem__inner {
  row-gap: var(--s-6);
  align-items: start;
}

.problem__copy {
  display: grid;
  gap: var(--s-5);
  font-size: var(--step-1);
  color: var(--text-muted);
}

@media (min-width: 64rem) {
  .problem__inner > h2 { grid-column: 1 / span 5; }
  .problem__copy { grid-column: 7 / -1; }
}

/* What to expect from every coach: six large words, each with one line */
.values {
  padding-block: var(--s-9);
}

.values__inner {
  row-gap: var(--s-7);
  align-items: start;
}

.values__intro p {
  max-width: 26em;
  margin-top: var(--s-4);
  color: var(--on-navy-muted);
}

.values__list {
  display: grid;
  gap: var(--s-6) var(--col-gap);
  padding: 0;
  list-style: none;
}

.values__list li {
  padding-top: var(--s-4);
  border-top: 1px solid var(--navy-rule);
}

.values__list h3 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  font-weight: 700;
  font-stretch: 68%;
  line-height: 1;
  text-transform: uppercase;
  color: var(--lime);
}

.values__list p {
  margin-top: var(--s-2);
  color: var(--on-navy-muted);
}

@media (min-width: 40rem) {
  .values__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .values__intro { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + var(--s-6)); }
  .values__list { grid-column: 6 / -1; }
}

/* Environment: wide photo or video */
.place {
  padding-block: var(--s-9);
}

.place__media {
  position: relative;
  aspect-ratio: 21 / 9;
  margin-top: var(--s-8);
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--navy);
}

.place__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.place__media .story-card__play {
  align-items: center;
  justify-content: center;
}

.place__media .play-disc {
  width: 4.5rem;
  height: 4.5rem;
  background: var(--white);
  color: var(--navy);
}

@media (max-width: 47.99rem) {
  .place__media { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   Location page
   ========================================================================== */

.loc-hero {
  padding-block: var(--s-8) var(--s-9);
}

.loc-hero__inner {
  row-gap: var(--s-7);
  align-items: center;
}

.loc-hero h1 {
  font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.5rem);
}

.loc-hero .lead {
  max-width: 30em;
  margin-top: var(--s-5);
  color: var(--on-navy-muted);
}

.loc-hero .actions {
  margin-top: var(--s-6);
}

.loc-hero__map {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--navy-raised);
}

.loc-hero__map > a {
  display: block;
  height: 100%;
}

.loc-hero__map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 64rem) {
  .loc-hero { padding-block: var(--s-9); }
  .loc-hero__text { grid-column: 1 / span 6; }
  .loc-hero__map { grid-column: 7 / -1; }
}

/* Address, contact and arrival as icon rows */
.loc-details {
  padding-block: var(--s-9);
}

.loc-details__inner {
  row-gap: var(--s-7);
  align-items: start;
}

.loc-details__intro p {
  max-width: 26em;
  margin-top: var(--s-4);
  color: var(--text-muted);
}

.loc-list {
  display: grid;
  gap: var(--s-6);
  padding: 0;
  list-style: none;
}

.loc-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-5);
}

.loc-list h3 {
  margin-top: 0.125rem;
  font-size: var(--step-1);
  font-weight: 500;
}

.loc-list address,
.loc-list p {
  max-width: 30em;
  margin-top: var(--s-2);
  color: var(--text-muted);
  font-style: normal;
}

.loc-list p a {
  color: var(--navy);
}

.loc-list .link {
  margin-top: var(--s-3);
}

@media (min-width: 64rem) {
  .loc-details__intro { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + var(--s-6)); }
  .loc-list { grid-column: 6 / -1; }
}

/* ==========================================================================
   Get Started page
   ========================================================================== */

.gs {
  padding-block: var(--s-8) var(--s-9);
  background: var(--white-smoke);
}

.gs__inner {
  row-gap: var(--s-7);
  align-items: start;
}

.gs .hero__place {
  color: var(--text-muted);
}

.gs h1 {
  font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem);
}

.gs .lead {
  max-width: 32em;
  margin-top: var(--s-5);
  color: var(--text-muted);
}

/* Reassurance ticks under the intro */
.ticks {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-6);
  padding: 0;
  list-style: none;
}

.ticks li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.gs__sub {
  margin-top: var(--s-7);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.gs__alt {
  margin-top: var(--s-6);
  color: var(--text-muted);
}

.gs__alt a {
  color: var(--navy);
}

.gs__steps {
  max-width: 28em;
  margin-top: var(--s-4);
  padding: 0;
  list-style: none;
  counter-reset: gs;
}

.gs__steps li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--s-3);
  padding-block: var(--s-3);
  border-top: 1px solid var(--border);
  counter-increment: gs;
}

.gs__steps li::before {
  content: counter(gs, decimal-leading-zero);
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  padding-top: 0.2rem;
}

@media (min-width: 64rem) {
  .gs { padding-block: var(--s-9); }
  .gs__intro { grid-column: 1 / span 6; }
  .gs__form { grid-column: 7 / -1; }
}

/* ==========================================================================
   Legal pages: privacy and cookie policies. A readable single column.
   ========================================================================== */

.legal {
  padding-block: var(--s-8) var(--s-9);
}

.legal__inner {
  max-width: 46rem;
}

.legal__head .hero__place {
  color: var(--text-muted);
}

.legal__head h1 {
  font-size: clamp(2.25rem, 1.4rem + 3vw, 3.5rem);
}

.legal__dates {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-6);
  margin-top: var(--s-5);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--border);
}

.legal__dates dt {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.legal__dates dd {
  margin: var(--s-1) 0 0;
  font-weight: 500;
}

.legal__body {
  margin-top: var(--s-6);
  color: var(--text-muted);
}

.legal__body > * + * {
  margin-top: var(--s-4);
}

.legal__body h2 {
  margin-top: var(--s-7);
  color: var(--navy);
  font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem);
}

.legal__body h3 {
  margin-top: var(--s-6);
  color: var(--navy);
  font-size: var(--step-1);
  font-weight: 500;
}

.legal__body ol,
.legal__body ul {
  padding-left: 1.25rem;
}

.legal__body li + li {
  margin-top: var(--s-1);
}

.legal__body a {
  color: var(--navy);
}

/* Cookie tables scroll sideways on small screens rather than squashing */
.legal__table {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
}

.legal__table table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--step--1);
}

.legal__table th,
.legal__table td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.legal__table tr:last-child td {
  border-bottom: 0;
}

.legal__table th {
  background: var(--white-smoke);
  color: var(--navy);
  font-weight: 500;
}

.legal__table td:nth-child(2) {
  white-space: nowrap;
}

.legal__table code {
  color: var(--navy);
  font-size: 0.8125rem;
  word-break: break-all;
}

/* Copy pass: supporting elements for the new homepage copy */
.rating__text--offer {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.reassure__intro .lead + .lead {
  margin-top: var(--s-4);
}

.faq-list details > div p + p {
  margin-top: var(--s-3);
}

.faq-list details > div a {
  color: var(--navy);
}

.visit__lede {
  max-width: 32em;
  margin-top: var(--s-4);
  color: var(--text-muted);
}

.visit__list address {
  line-height: 1.6;
}

.closing__eyebrow {
  font-size: 0.8125rem !important;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.closing .closing__title {
  max-width: none;
  margin-top: var(--s-3);
  font-size: clamp(2.5rem, 1.4rem + 4.4vw, 5.5rem);
}

/* Copy pass: Small Group Coaching page */
.sgc-define__intro p + p,
.sgc-adapt__lede + .sgc-adapt__lede,
.sgc-for__inner > div > p + p {
  margin-top: var(--s-4);
}

.track p + p {
  margin-top: var(--s-2);
}

.sgc-for__close {
  margin-top: var(--s-6) !important;
}

.sgc-goals li > div {
  display: grid;
  gap: var(--s-1);
}

.sgc-goals li strong {
  font-weight: 500;
}

.sgc-goals li span:not(.badge) {
  color: var(--text-muted);
  font-size: var(--step--1);
  line-height: 1.5;
}

.closing .closing__eyebrow + h2 {
  margin-top: var(--s-3);
}

.closing p + p {
  margin-top: var(--s-3);
}

.sgc-goals li {
  align-items: flex-start;
}

/* Session section: heading lines up with the steps; the video starts at the
   top of the steps and stays in view while they scroll past */
.sgc-session .section-head {
  justify-items: start;
  text-align: left;
}

.sgc-session .section-head h2,
.sgc-session .section-head p {
  margin-inline: 0;
}

@media (min-width: 64rem) {
  .sgc-session__layout {
    grid-template-columns: minmax(0, 1fr) 24rem;
    align-items: start;
  }

  .sgc-session .track {
    max-width: 38rem;
  }

  .sgc-session__video {
    position: sticky;
    top: calc(var(--header-h) + var(--s-6));
  }
}

/* Who it's for: thought cards */
.sgc-who,
.sgc-goals-band {
  padding-block: var(--s-9);
}

.sgc-goals-band {
  background: var(--white-smoke);
}

.sgc-who .section-head p + p {
  margin-top: var(--s-3);
}

.thought-cards {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-7);
  padding: 0;
  list-style: none;
}

.thought-cards li {
  padding: var(--s-6) var(--s-5) var(--s-5);
  border-radius: var(--radius-card);
  background: var(--white-smoke);
}

.thought-cards__mark {
  display: block;
  height: 2.25rem;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
}

.thought-cards p {
  margin-top: var(--s-2);
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
  font-weight: 500;
  line-height: 1.35;
}

.sgc-who__close {
  max-width: 36em;
  margin: var(--s-7) auto 0;
  color: var(--text-muted);
  text-align: center;
}

/* Goals: photo cards with the title over a navy fade */
.goal-cards {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-7);
  padding: 0;
  list-style: none;
}

.goal-cards li {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 20rem;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-card);
  background: var(--navy);
  color: var(--white);
}

.goal-cards img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(.2,.7,.2,1);
}

.goal-cards li:hover img {
  transform: scale(1.04);
}

.goal-cards li::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgb(3 0 39 / 0.95), rgb(3 0 39 / 0.55) 50%, rgb(3 0 39 / 0.05));
}

.goal-cards div {
  padding: var(--s-5);
}

.goal-cards h3 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  font-stretch: 68%;
  line-height: 1;
  text-transform: uppercase;
}

.goal-cards p {
  margin-top: var(--s-2);
  color: var(--on-navy-muted);
  font-size: var(--step--1);
  line-height: 1.5;
}

.goal-cards__more {
  display: flex;
  justify-content: center;
  margin-top: var(--s-7);
}

@media (min-width: 40rem) {
  .thought-cards,
  .goal-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .thought-cards,
  .goal-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Landing page (paid traffic): dark throughout, one action, the form on the page
   ========================================================================== */

.lp {
  background: var(--navy);
}

.lp-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--navy);
  border-bottom: 1px solid var(--navy-rule);
}

.lp-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--header-h);
}

.lp-header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

.lp-header__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--white);
  font-weight: 500;
  text-decoration: none;
}

.lp-header__phone svg {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--lime);
}

.lp-header__phone:hover {
  color: var(--lime);
}

@media (max-width: 39.99rem) {
  .lp-header__phone span {
    display: none;
  }

}

/* Hero */
.lp-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: 1;
  display: flex;
  align-items: center;
  padding-block: var(--s-7) var(--s-8);
  background:
    radial-gradient(60rem 30rem at 80% 10%, rgb(80 128 142 / 0.22), transparent 60%),
    var(--navy);
}

.lp-hero__inner {
  display: grid;
  gap: var(--s-7) var(--col-gap);
  align-items: center;
  width: 100%;
}

.lp-hero h1 {
  font-size: clamp(2.25rem, 1.3rem + 3.6vw, 4.25rem);
  line-height: 0.98;
}

.lp-hero .lead {
  max-width: 34em;
  margin-top: var(--s-5);
  color: var(--on-navy-muted);
}

.lp-hero .actions {
  margin-top: var(--s-6);
}

.lp-micro {
  margin-top: var(--s-3);
  color: var(--on-navy-muted);
  font-size: var(--step--1);
}

.lp-hero .rating {
  margin-top: var(--s-5);
}

.lp-hero__film,
.lp-proof__film,
.lp-visit__film {
  position: relative;
  width: min(100%, 22rem);
  margin-inline: auto;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--navy-raised);
}

.lp-hero__film .story-card__play,
.lp-proof__film .story-card__play {
  align-items: center;
  justify-content: center;
}

.lp-hero__film .play-disc,
.lp-proof__film .play-disc {
  width: 4.5rem;
  height: 4.5rem;
  background: var(--lime);
  color: var(--navy);
}

@media (min-width: 64rem) {
  .lp-hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .lp-hero__film {
    width: 100%;
    max-width: 24rem;
    margin-inline: auto 0;
  }
}

/* Recognition and story */
.lp-story {
  padding-block: var(--s-9);
}

.lp-story__inner {
  display: grid;
  gap: var(--s-8) var(--col-gap);
}

.lp-story__intro p {
  max-width: 34em;
  margin-top: var(--s-4);
  color: var(--on-navy-muted);
}

.lp-story__intro p:last-child {
  color: var(--white);
  font-weight: 500;
}

.lp-steps {
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--navy-rule);
}

.lp-steps li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  column-gap: var(--s-4);
  padding-block: var(--s-6);
  border-bottom: 1px solid var(--navy-rule);
}

.lp-steps__n {
  grid-row: span 3;
  color: var(--lime);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  font-stretch: 68%;
  line-height: 1;
}

.lp-steps__label {
  color: var(--slate);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lp-steps h3 {
  margin-top: var(--s-2);
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.3;
}

.lp-steps li p:last-child {
  margin-top: var(--s-2);
  color: var(--on-navy-muted);
  font-size: var(--step--1);
}

@media (min-width: 64rem) {
  .lp-story__inner {
    grid-template-columns: 5fr 6fr;
    align-items: start;
  }

  .lp-story__intro {
    position: sticky;
    top: calc(var(--header-h) + var(--s-7));
  }
}

/* Second member */
.lp-proof {
  padding-block: var(--s-9);
  background: var(--navy-raised);
}

.lp-proof__inner {
  display: grid;
  gap: var(--s-7) var(--col-gap);
  align-items: center;
}

.lp-proof__quote {
  margin: 0;
}

.lp-proof__quote blockquote {
  margin: 0;
}

.lp-proof__quote blockquote p {
  font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem);
  font-weight: 500;
  line-height: 1.2;
}

.lp-proof__quote figcaption {
  margin-top: var(--s-5);
  color: var(--on-navy-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lp-proof__quote .btn {
  margin-top: var(--s-6);
}

@media (min-width: 64rem) {
  .lp-proof__inner {
    grid-template-columns: 5fr 7fr;
  }

  .lp-proof__film {
    width: 100%;
    max-width: 22rem;
    margin-inline: 0 auto;
  }
}

/* First visit */
.lp-visit {
  padding-block: var(--s-9);
}

.lp-visit__inner {
  display: grid;
  gap: var(--s-7) var(--col-gap);
  align-items: center;
}

.lp-visit__list {
  margin-top: var(--s-6);
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--navy-rule);
}

.lp-visit__list li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--s-3);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--navy-rule);
}

.lp-visit__list li > span {
  color: var(--lime);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding-top: 0.2rem;
}

.lp-visit__list h3 {
  font-size: var(--step-1);
  font-weight: 500;
}

.lp-visit__list p {
  margin-top: var(--s-1);
  color: var(--on-navy-muted);
  font-size: var(--step--1);
}

@media (min-width: 64rem) {
  .lp-visit__inner {
    grid-template-columns: 7fr 5fr;
  }

  .lp-visit__film {
    width: 100%;
    max-width: 22rem;
    margin-inline: auto 0;
  }
}

/* Form */
.lp-form {
  padding-block: var(--s-9);
  background:
    radial-gradient(50rem 26rem at 10% 0%, rgb(171 235 10 / 0.08), transparent 60%),
    var(--navy-raised);
  scroll-margin-top: var(--header-h);
}

.lp-form__inner {
  display: grid;
  gap: var(--s-7) var(--col-gap);
  align-items: start;
}

.lp-form__lede {
  max-width: 34em;
  margin-top: var(--s-4);
  color: var(--on-navy-muted);
}

.lp-form .form-card {
  margin-top: var(--s-6);
}

.form-card__fields--one {
  grid-template-columns: minmax(0, 1fr) !important;
  margin-top: var(--s-5);
}

.lp-form .enquiry__note a {
  color: var(--navy);
}

.lp-form__alt {
  margin-top: var(--s-5);
  color: var(--on-navy-muted);
}

.lp-form__alt a {
  color: var(--white);
  font-weight: 500;
}

.lp-next {
  padding: var(--s-6) var(--s-5);
  border: 1px solid var(--navy-rule);
  border-radius: var(--radius-card);
}

.lp-next h3 {
  font-size: var(--step-1);
  font-weight: 500;
}

.lp-next ol {
  margin-top: var(--s-4);
  padding: 0;
  list-style: none;
  counter-reset: next;
}

.lp-next li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  padding-block: var(--s-3);
  border-top: 1px solid var(--navy-rule);
  color: var(--on-navy-muted);
  counter-increment: next;
}

.lp-next li::before {
  content: counter(next, decimal-leading-zero);
  color: var(--lime);
  font-size: 0.8125rem;
  font-weight: 600;
  padding-top: 0.15rem;
}

.lp-next__quote {
  margin-top: var(--s-6);
  padding-left: var(--s-4);
  border-left: 2px solid var(--lime);
}

.lp-next__quote p {
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.3;
}

.lp-next__quote span {
  display: block;
  margin-top: var(--s-2);
  color: var(--on-navy-muted);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (min-width: 64rem) {
  .lp-form__inner {
    grid-template-columns: 7fr 4fr;
  }

  .lp-next {
    position: sticky;
    top: calc(var(--header-h) + var(--s-6));
    margin-top: 9.5rem;
  }
}

/* FAQ on dark */
.lp-faq {
  padding-block: var(--s-9);
}

.lp-faq__inner {
  max-width: 50rem;
}

.lp-faq h2 {
  text-align: center;
}

.lp-faq .faq-list {
  margin-top: var(--s-7);
}

.lp-faq .faq-list details {
  background: var(--navy-raised);
  box-shadow: none;
  border: 1px solid var(--navy-rule);
}

.lp-faq .faq-list summary {
  color: var(--white);
}

.lp-faq .faq-list summary::after {
  background:
    linear-gradient(var(--lime), var(--lime)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--lime), var(--lime)) center / 1.5px 100% no-repeat;
}

.lp-faq .faq-list details[open] summary::after {
  background: linear-gradient(var(--lime), var(--lime)) center / 100% 1.5px no-repeat;
}

.lp-faq .faq-list summary:focus-visible {
  outline-color: var(--lime);
}

.lp-faq .faq-list details > div {
  color: var(--on-navy-muted);
}

.lp-faq__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-4) var(--s-6);
  margin-top: var(--s-7);
}

/* Footer */
.lp-footer {
  padding-block: var(--s-6) calc(var(--s-6) + 5rem);
  border-top: 1px solid var(--navy-rule);
  color: var(--on-navy-muted);
  font-size: var(--step--1);
}

.lp-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3) var(--s-6);
}

.lp-footer address {
  font-style: normal;
}

.lp-footer ul {
  display: flex;
  gap: var(--s-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-footer a {
  color: var(--on-navy-muted);
}

/* Mobile CTA bar */
.lp-bar {
  display: none;
}

@media (max-width: 47.99rem) {
  .lp-bar {
    position: fixed;
    inset: auto 0 0;
    z-index: 45;
    display: flex;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
    background: rgb(3 0 39 / 0.94);
    border-top: 1px solid var(--navy-rule);
    backdrop-filter: blur(8px);
    transform: translateY(110%);
    transition: transform 0.3s cubic-bezier(.2,.7,.2,1);
  }

  .lp-bar.is-visible {
    transform: none;
  }

  .lp-bar .btn {
    flex: 1;
    justify-content: space-between;
  }

  .lp-bar__call {
    display: none;
    flex: none;
    place-items: center;
    width: 3rem;
    border: 1px solid var(--navy-rule);
    border-radius: 999px;
    color: var(--lime);
  }

  .lp-bar__call svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  /* On phones WhatsApp lives in the bar, so the floating button never covers the form */
  .lp .whatsapp {
    display: none;
  }

  .lp-bar__wa {
    background: #15803d;
    border-color: #15803d !important;
    color: var(--white) !important;
  }
}

/* The form card is white inside the dark page, so its button goes back to navy */
.lp .form-card .btn--primary {
  background: var(--navy);
  color: var(--white);
}

/* Location: a map in the "see where you're going" panel */
.loc-map {
  position: relative;
}

.loc-map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Landing page: homepage sections shown in the dark theme.
   .lp-dark sections take the navy tokens; .lp-alt alternates to the raised navy. */
.lp .lp-dark,
.lp .lp-alt {
  background: var(--navy);
  color: var(--white);
}

.lp .lp-alt {
  background: var(--navy-raised);
}

.lp .lp-dark h2,
.lp .lp-dark h3 {
  color: var(--white);
}

/* Navy badges and icons would vanish on navy, so they flip to lime */
.lp .lp-dark .badge,
.lp .lp-dark .expect-item__icon {
  background: var(--lime);
  color: var(--navy);
}

.lp .feature-story {
  background: var(--navy);
}

.lp .lp-alt .feature-story {
  background: var(--navy);
  border: 1px solid var(--navy-rule);
}

.lp .feature-story__facts {
  border-color: var(--navy-rule);
}

.lp .member__photo {
  background: var(--navy);
}

.lp .member__quals,
.lp .member__quals li {
  border-color: var(--navy-rule);
}

.lp .lp-dark .link {
  color: var(--white);
}

/* FAQ cards on dark */
.lp .lp-faq-home .faq-list details {
  background: var(--navy-raised);
  border: 1px solid var(--navy-rule);
  box-shadow: none;
}

.lp .lp-faq-home .faq-list summary {
  color: var(--white);
}

.lp .lp-faq-home .faq-list summary::after {
  background:
    linear-gradient(var(--lime), var(--lime)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--lime), var(--lime)) center / 1.5px 100% no-repeat;
}

.lp .lp-faq-home .faq-list details[open] summary::after {
  background: linear-gradient(var(--lime), var(--lime)) center / 100% 1.5px no-repeat;
}

.lp .lp-faq-home .faq-list details > div a {
  color: var(--white);
}

/* The lime closing band keeps its own navy buttons inside the dark page */
.lp .closing .btn--primary {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--white);
}

.lp .closing .btn--secondary {
  border-color: var(--navy);
  color: var(--navy);
}

/* Landing page shade rhythm: navy and raised navy strictly alternate */
.lp .lp-proof {
  background: var(--navy);
}

.lp .sgc-session {
  background: var(--navy-raised);
}

.lp .lp-form {
  background:
    radial-gradient(50rem 26rem at 10% 0%, rgb(171 235 10 / 0.08), transparent 60%),
    var(--navy);
}

/* ==========================================================================
   Landing variant 3 ("own pace"): pull quote, for-you list, session split,
   three member cards and a photo first-visit block
   ========================================================================== */

.lp-pull {
  padding-block: var(--s-8);
  text-align: center;
}

.lp-pull figure {
  max-width: 46rem;
  margin: 0 auto;
}

.lp-pull blockquote {
  margin: 0;
}

.lp-pull blockquote p {
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.25rem);
  font-weight: 500;
  line-height: 1.25;
}

.lp-pull figcaption {
  margin-top: var(--s-4);
  color: var(--on-navy-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lp-for {
  padding-block: var(--s-9);
}

.lp-for h2 {
  text-align: center;
}

.lp-for__list {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-7);
  padding: 0;
  list-style: none;
}

.lp-for__list li {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--navy-rule);
  border-radius: var(--radius-card);
  background: var(--navy);
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.3;
}

.lp-for__tick {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--lime);
  color: var(--navy);
}

.lp-for__tick svg {
  width: 1.125rem;
  height: 1.125rem;
}

.lp-for__close {
  max-width: 28em;
  margin: var(--s-7) auto 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  font-weight: 700;
  font-stretch: 68%;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
}

@media (min-width: 40rem) {
  .lp-for__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .lp-for__list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lp-for__list li {
    flex-direction: column;
    align-items: flex-start;
    font-size: 1.0625rem;
  }
}

.lp-show {
  padding-block: var(--s-9);
}

.lp-show__inner {
  display: grid;
  gap: var(--s-7) var(--col-gap);
  align-items: center;
}

.lp-show__film {
  position: relative;
  width: min(100%, 22rem);
  margin-inline: auto;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--navy-raised);
}

.lp-show__lede {
  margin-top: var(--s-4);
  color: var(--on-navy-muted);
}

.lp-show__cards {
  display: grid;
  gap: var(--s-3);
  margin: var(--s-6) 0;
  padding: 0;
  list-style: none;
}

.lp-show__cards li {
  padding: var(--s-5);
  border: 1px solid var(--navy-rule);
  border-radius: var(--radius-card);
  background: var(--navy-raised);
}

.lp-show__cards h3 {
  font-size: var(--step-1);
  font-weight: 500;
}

.lp-show__cards p {
  margin-top: var(--s-2);
  color: var(--on-navy-muted);
  font-size: var(--step--1);
}

@media (min-width: 64rem) {
  .lp-show__inner {
    grid-template-columns: 5fr 7fr;
  }

  .lp-show__film {
    width: 100%;
    max-width: 24rem;
    margin-inline: 0 auto;
  }
}

.lp-members {
  padding-block: var(--s-9);
}

.lp-members__list {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-7);
  padding: 0;
  list-style: none;
}

.lp-members__list li {
  overflow: hidden;
  border: 1px solid var(--navy-rule);
  border-radius: var(--radius-card);
  background: var(--navy);
}

.lp-members__film {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--navy-raised);
}

.lp-members__text {
  padding: var(--s-5);
}

.lp-members__who {
  font-weight: 600;
}

.lp-members__who span {
  display: block;
  margin-top: var(--s-1);
  color: var(--lime);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lp-members__text blockquote {
  margin: var(--s-4) 0 0;
}

.lp-members__text blockquote p {
  color: var(--on-navy-muted);
  line-height: 1.55;
}

@media (min-width: 48rem) {
  .lp-members__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.lp-visit__photo {
  overflow: hidden;
  border-radius: var(--radius-card);
}

.lp-visit__photo img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.lp-next__ticks {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding: 0;
  list-style: none;
}

.lp-next__ticks li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--navy-rule);
  color: var(--on-navy-muted);
}

.lp-next__ticks svg {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.15rem;
  color: var(--lime);
}

.lp-closing__quote {
  max-width: 30em;
  margin: 0 auto var(--s-5) !important;
  font-size: var(--step-1);
  font-weight: 500;
}

.lp-closing__quote span {
  display: block;
  margin-top: var(--s-2);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lp-next__ticks li {
  grid-template-columns: none;
  counter-increment: none;
}

.lp-next__ticks li::before {
  content: none;
}

.lp .lp-form--raised {
  background:
    radial-gradient(50rem 26rem at 10% 0%, rgb(171 235 10 / 0.08), transparent 60%),
    var(--navy-raised);
}

/* Hero offer line under the buttons */
.hero__offer {
  margin-top: var(--s-3);
  color: var(--on-navy-muted);
  font-size: var(--step--1);
}

/* Confirmation page */
.thanks {
  padding-block: var(--s-7);
  background: var(--white-smoke);
}

.thanks__inner {
  max-width: 44rem;
}

.thanks__label {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.thanks .coach-row {
  margin-top: var(--s-4);
  gap: var(--s-3);
}

.thanks .coach-row li {
  grid-template-columns: 4rem minmax(0, 1fr);
  padding: var(--s-3) var(--s-4);
}

.thanks .coach-row img {
  width: 4rem;
  height: 4rem;
}

.thanks .coach-row h3 {
  font-size: 1.375rem;
}

/* Stories sit right under, compact enough to share the first screen */
.thanks ~ .gs-stories {
  padding-block: var(--s-6);
}

.thanks ~ .gs-stories .section-head h2 {
  font-size: var(--step-1);
}

.thanks ~ .gs-stories .story-scroller {
  margin-top: var(--s-5);
}

.thanks ~ .gs-stories .story-card {
  min-height: 22rem;
}

@media (min-width: 64rem) {
  .thanks__text { grid-column: 1 / span 6; }
  .thanks__coaches { grid-column: 8 / -1; }
  .thanks .coach-row { grid-template-columns: minmax(0, 1fr); }
}

.thanks__badge {
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--s-4);
}

.thanks__badge svg {
  width: 1.5rem;
  height: 1.5rem;
}

.thanks h1 {
  margin-top: var(--s-3);
  font-size: clamp(2.25rem, 1.4rem + 3vw, 3.5rem);
}

.thanks .lead {
  margin-top: var(--s-5);
  color: var(--text-muted);
}

.thanks .lead a {
  color: var(--navy);
  font-weight: 500;
}

.thanks__steps {
  margin-top: var(--s-7);
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border);
}

.thanks__steps li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--s-3);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--border);
}

.thanks__steps li > span {
  padding-top: 0.2rem;
  color: var(--air-force);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.thanks__steps h2 {
  font-size: var(--step-1);
  font-weight: 500;
}

.thanks__steps p {
  margin-top: var(--s-1);
  color: var(--text-muted);
  font-size: var(--step--1);
}

.thanks__alt {
  margin-top: var(--s-6);
  color: var(--text-muted);
}

.thanks__alt a {
  color: var(--navy);
}

/* The homepage enquiry band's intro links */
.enquire__intro .hero__place {
  margin-bottom: var(--s-3);
}

/* "or" divider with a WhatsApp button, under the enquiry forms */
.or-wa {
  margin-top: var(--s-6);
  text-align: center;
}

.or-wa__rule {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  color: var(--on-navy-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.or-wa__rule::before,
.or-wa__rule::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--navy-rule);
}

.btn--wa {
  gap: var(--s-3);
  margin-top: var(--s-5);
  width: 100%;
  min-height: 3.5rem;
  border-color: #15803d;
  background: #15803d;
  color: var(--white);
  --sweep: #166534;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.btn--wa svg {
  width: 1.375rem;
  height: 1.375rem;
}

.on-navy .btn--wa:hover,
.on-navy .btn--wa:focus-visible,
.btn--wa:hover,
.btn--wa:focus-visible {
  border-color: #166534;
  color: var(--white);
}

/* Form card refinements: a navy, full-width submit button, a consent
   checkbox above it, and the homepage "or" block kept to the intro's text width */
.form-card .btn--primary,
.on-navy .form-card .btn--primary {
  width: 100%;
  min-height: 3.5rem;
  border-color: var(--navy);
  background: var(--navy);
  color: var(--white);
}

.form-card .btn--primary .btn__icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-right: -0.5rem;
}

.on-navy .form-card .btn--primary:hover,
.on-navy .form-card .btn--primary:focus-visible {
  border-color: var(--lime);
  color: var(--navy);
}

.enquiry__actions {
  margin-top: var(--s-5);
}

.enquiry__note {
  text-align: center;
}

.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  align-items: start;
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
}

.consent input {
  width: 1.375rem;
  height: 1.375rem;
  margin: 0.1em 0 0;
  accent-color: var(--navy);
  cursor: pointer;
}

.consent label {
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--navy);
  cursor: pointer;
}

.consent label a {
  color: var(--navy);
}

.consent input:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

.enquire__intro .or-wa {
  max-width: 28em;
  text-align: left;
}

/* The intro's paragraph width rule would otherwise narrow the OR line */
.enquire__intro .or-wa__rule {
  max-width: none;
  margin-top: 0;
}

/* Get Started: WhatsApp under the form, on White Smoke rather than navy */
.gs .or-wa__rule {
  color: var(--text-muted);
}

.gs .or-wa__rule::before,
.gs .or-wa__rule::after {
  border-color: var(--border);
}

/* Get Started: member stories in a swipeable row under the form */
.gs-stories {
  padding-block: var(--s-9);
  background: var(--white);
}

.story-scroller {
  margin-top: var(--s-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.story-scroller::-webkit-scrollbar {
  display: none;
}

.story-scroller:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: -2px;
}

.story-cards--scroll {
  display: flex;
  gap: var(--s-4);
  width: max-content;
  max-width: none;
  margin: 0;
  padding-inline: max(var(--gutter), calc((100vw - var(--page-max)) / 2));
}

.story-cards--scroll .story-card {
  flex: none;
  width: min(22rem, 80vw);
  scroll-snap-align: start;
}

.story-cards--scroll::after {
  content: "";
  flex: none;
  width: 1px;
}

/* Landing heroes: the session loop sits far back, mostly navy, for movement only */
.lp-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.lp-hero__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  opacity: 0.16;
  filter: saturate(0.7);
  transition: opacity 0.6s;
}

/* While a story plays in the hero, the loop fades out and the gradient stays */
.lp-hero.is-watching .lp-hero__bg video {
  opacity: 0;
}

.lp-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(3 0 39 / 0.2) 0%, rgb(3 0 39 / 0.55) 60%, var(--navy) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .lp-hero__bg { display: none; }
}

/* The landing-page bar's WhatsApp button shares the WhatsApp type style */
.lp .lp-bar__wa {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* Slim announcement bar above the header */
.announce {
  background: var(--lime);
  color: var(--navy);
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.announce p {
  margin: 0;
  padding: 0.3rem var(--gutter);
  line-height: 1.3;
}

@media (max-width: 40rem) {
  .announce {
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
  }
}

/* Thank-you page: compact coach row */
.thanks-coaches {
  padding-block: var(--s-9);
  background: var(--white-smoke);
}

.coach-row {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-6);
  padding: 0;
  list-style: none;
}

.coach-row li {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4);
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: 0 1px 2px rgb(3 0 39 / 0.04), 0 0.75rem 1.75rem rgb(3 0 39 / 0.05);
}

.coach-row img {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 20%;
}

.coach-row h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 68%;
  font-size: 1.75rem;
  line-height: 1;
  text-transform: uppercase;
}

.coach-row p {
  margin-top: var(--s-1);
  color: var(--text-muted);
  font-size: var(--step--1);
}

.coach-row q {
  display: block;
  margin-top: var(--s-2);
  font-weight: 500;
  color: var(--navy);
}

@media (min-width: 48rem) {
  .coach-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* About: Darragh’s video, the featured-story layout on white */
.founder {
  padding-block: 0 var(--s-8);
}

.founder .feature-story {
  margin-top: 0;
}

.founder h2 {
  margin-top: var(--s-3);
  font-size: var(--step-2);
}

/* The founder's video block is taller than the homepage feature: the video
   keeps more of its portrait frame and the text gets room beside it */
@media (min-width: 64rem) {
  .founder .feature-story__media {
    min-height: 40rem;
  }

  .founder .feature-story__body {
    padding-block: var(--s-8);
  }
}

.founder__why {
  max-width: 34em;
  margin-top: var(--s-5);
  color: var(--text-muted);
}

/* Thank-you page: three stories in a centred row on wide screens, a swipe row below that */
@media (min-width: 64rem) {
  .thanks ~ .gs-stories .story-scroller {
    margin-top: 0;
    overflow: visible;
  }

  .thanks ~ .gs-stories .story-cards--scroll {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    max-width: calc(var(--page-max) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .thanks ~ .gs-stories .story-cards--scroll .story-card {
    width: auto;
  }

  .thanks ~ .gs-stories .story-cards--scroll::after {
    display: none;
  }
}

/* ==========================================================================
   Timetable: one card per day; a row of seven on wide screens, a swipe row
   on phones that opens on today
   ========================================================================== */
.tt {
  padding-block: var(--s-8) var(--s-9);
  background: var(--white-smoke);
}

.tt__head {
  max-width: 44rem;
}

.tt__head h1 {
  font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem);
}

.tt__head .lead {
  margin-top: var(--s-4);
  color: var(--text-muted);
}

.tt-key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin: var(--s-5) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--step--1);
  color: var(--text-muted);
}

.tt-key__item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.tt-key__item::before {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 4px;
}

.tt-key__item--sgpt::before { background: var(--navy); }
.tt-key__item--group::before { background: var(--lime); }

.tt-scroller {
  margin-top: var(--s-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.tt-scroller::-webkit-scrollbar { display: none; }

.tt-scroller:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: -2px;
}

.tt-week {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(15rem, 78vw);
  gap: var(--s-3);
  margin: 0;
  padding: 0 var(--gutter) var(--s-2);
  list-style: none;
}

.tt-day {
  scroll-snap-align: start;
  scroll-margin-inline: var(--gutter);
  padding: var(--s-4);
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: 0 1px 2px rgb(3 0 39 / 0.04), 0 0.75rem 1.75rem rgb(3 0 39 / 0.05);
}

.tt-day.is-today {
  outline: 2px solid var(--navy);
}

.tt-day__name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 1.5rem;
}

.tt-day.is-today .tt-day__name::after {
  content: "Today";
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.tt-day__list {
  display: grid;
  gap: var(--s-2);
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
}

.tt-session {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  align-items: center;
  gap: var(--s-2);
  padding: 0.55rem 0.75rem;
  border-radius: 0.625rem;
  font-size: 0.875rem;
}

.tt-session time {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tt-session--sgpt {
  background: var(--navy);
  color: var(--white);
}

.tt-session--group {
  background: var(--lime);
  color: var(--navy);
}

.tt-day__closed {
  margin-top: var(--s-4);
  color: var(--text-muted);
}

.tt__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
}

.tt__foot p {
  max-width: 34em;
  color: var(--text-muted);
}

/* Wide screens: the whole week in one row, inside the page width */
@media (min-width: 80rem) {
  .tt-scroller {
    overflow: visible;
  }

  .tt-week {
    grid-auto-flow: row;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    max-width: calc(var(--page-max) + 2 * var(--gutter));
    margin-inline: auto;
  }

  .tt-session {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.125rem;
  }
}

@media (min-width: 80rem) {
  /* Seven narrow columns: the outline marks today, so the label goes */
  .tt-day.is-today .tt-day__name::after {
    display: none;
  }

  .tt-day {
    padding: var(--s-3);
  }

  .tt-session {
    padding: 0.5rem 0.625rem;
    font-size: 0.8125rem;
    line-height: 1.3;
  }
}

/* Cookie banner: a small navy card bottom-left on wide screens, full width on
   phones. Accept and Reject look the same, so neither is pushed. */
.cookie-banner {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 60; /* above the WhatsApp button and the landing-page bar */
  display: grid;
  gap: var(--s-3);
  padding: var(--s-5) max(var(--gutter), env(safe-area-inset-right, 0px)) calc(var(--s-5) + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px));
  border-top: 1px solid var(--navy-rule);
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 -0.75rem 2rem rgb(3 0 39 / 0.25);
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner__title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  font-stretch: 68%;
  line-height: 1;
  text-transform: uppercase;
}

.cookie-banner__text {
  max-width: 34em;
  color: var(--on-navy-muted);
  font-size: var(--step--1);
}

.cookie-banner__text a {
  color: var(--white);
}

.cookie-banner__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}

.cookie-banner .btn {
  min-height: 3rem;
}

@media (min-width: 48rem) {
  .cookie-banner {
    right: auto;
    bottom: var(--s-4);
    left: var(--s-4);
    width: min(26rem, calc(100vw - 2 * var(--s-4)));
    padding: var(--s-5);
    border: 1px solid var(--navy-rule);
    border-radius: var(--radius-card);
  }
}

/* "Cookie settings" in the footers: a button that reads as one of the links */
.cookie-link {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.cookie-link:hover,
.cookie-link:focus-visible {
  color: var(--white);
}

/* Phones: every button in the page content runs the full width of its column,
   and button pairs stack. The header's Get started and Menu stay compact. */
@media (max-width: 39.99rem) {
  main .actions {
    flex-direction: column;
    align-items: stretch;
  }

  main .btn {
    width: 100%;
  }
}

/* 404: the quick links under the buttons */
.nf-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  margin: var(--s-6) 0 0;
  padding: var(--s-5) 0 0;
  border-top: 1px solid var(--border);
  list-style: none;
}

.nf-links a {
  color: var(--navy);
  font-weight: 500;
}