/* ===========================================================
   SixFour Fitness — shared stylesheet
   Brand identity preserved: blue #0c4da2 / navy #003060 / green #5ba672
   Fonts: Montserrat (display) + Nunito (body)
   =========================================================== */

:root {
  --brand-blue: #0c4da2;
  --brand-blue-dark: #0a3f86;
  --brand-navy: #003060;
  --brand-green: #5ba672;
  --brand-green-dark: #4a8c5e;
  --brand-green-text: #3f7e52; /* AA-compliant green for small text on light bg */

  --ink: #1d2733;
  --muted: #54606e;
  --bg: #ffffff;
  --surface: #f4f7fb;
  --surface-2: #eaf1f8;
  --border: #dbe3ec;
  --white: #ffffff;
  --danger: #b3261e; /* AA-compliant error text on light backgrounds */
  --danger-surface: #fdecea;

  --font-display: "Montserrat", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, sans-serif;

  --maxw: 1140px;
  --header-h: 76px;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 3px rgba(16, 42, 73, 0.08);
  --shadow-md: 0 14px 38px -18px rgba(16, 42, 73, 0.45);

  --space-section: clamp(3.5rem, 8vw, 7rem);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-smooth: cubic-bezier(0.45, 0.05, 0.15, 1); /* gentle both ends — for slow state changes */

  /* z-index scale */
  --z-header: 100;
  --z-progress: 150;
  --z-overlay: 200;
  --z-modal: 300;
  /* Above the modal on purpose: a consent choice must never end up buried under
     the prize-draw popup. In practice they cannot collide — the popup is held
     back until consent is answered — but the ordering is the safety net. */
  --z-consent: 400;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; height: auto; }
a { color: var(--brand-blue); text-decoration-thickness: 1px; text-underline-offset: 2px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--brand-navy);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
  font-weight: 700;
}
p { text-wrap: pretty; }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2rem);
}
.section { padding-block: var(--space-section); }
.section--surface { background: var(--surface); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--brand-green-text);
  margin-bottom: 0.75rem;
}
.lede { font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--muted); max-width: 62ch; }
.measure { max-width: 65ch; }

h2.section-title { font-size: clamp(1.9rem, 4.5vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--brand-green);
  --btn-bg-hover: var(--brand-green-dark);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  padding: 0.95rem 1.6rem;
  border-radius: 999px;
  border: 2px solid transparent;
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s var(--ease-out), transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
  box-shadow: var(--shadow-sm);
}
.btn:hover { background: var(--btn-bg-hover); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn--outline {
  background: transparent;
  color: var(--brand-blue);
  border-color: var(--brand-blue);
  box-shadow: none;
}
.btn--outline:hover { background: var(--brand-blue); color: #fff; }
.btn--blue { --btn-bg: var(--brand-blue); --btn-bg-hover: var(--brand-blue-dark); }
.btn--ghost-light {
  background: transparent; color: #fff; border-color: rgba(255,255,255,0.55); box-shadow: none;
}
.btn--ghost-light:hover { background: #fff; color: var(--brand-navy); border-color:#fff; }
.btn--lg { padding: 1.1rem 2rem; font-size: 1.05rem; }

:where(a, button, input, textarea, select):focus-visible {
  outline: 3px solid var(--brand-green);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Scroll progress bar (top of viewport) ---------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  z-index: var(--z-progress);
  background: linear-gradient(90deg, var(--brand-green), var(--brand-blue));
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
  pointer-events: none;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: background-color 0.65s var(--ease-smooth), box-shadow 0.65s var(--ease-smooth),
              border-color 0.65s var(--ease-smooth), backdrop-filter 0.65s var(--ease-smooth);
}

/* Two logos: dark for the solid bar, white for the transparent overlay state */
.nav__logo-light { display: none; }

/* ---- Transparent overlay over a dark hero (set via body.nav-overlay) ---- */
body.nav-overlay .site-header {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}
body.nav-overlay .nav__logo-dark { display: none; }
body.nav-overlay .nav__logo-light { display: block; }
body.nav-overlay .nav__toggle { color: #fff; }
/* when the menu panel is open it's white, so the button must go dark to stay visible */
body.nav-overlay .nav__toggle[aria-expanded="true"] { color: var(--brand-navy); }

/* Once scrolled past the hero, the overlay header becomes the solid bar again */
body.nav-overlay .site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}
body.nav-overlay .site-header.is-scrolled .nav__logo-dark { display: block; }
body.nav-overlay .site-header.is-scrolled .nav__logo-light { display: none; }
body.nav-overlay .site-header.is-scrolled .nav__toggle { color: var(--brand-navy); }

/* link colours for the overlay state (desktop nav only; the mobile panel stays light) */
@media (min-width: 881px) {
  body.nav-overlay .site-header .nav__links a:not(.btn) { color: #fff; }
  body.nav-overlay .site-header .nav__links a:not(.btn)::after { background: #fff; }
  body.nav-overlay .site-header.is-scrolled .nav__links a:not(.btn) { color: var(--brand-navy); }
  body.nav-overlay .site-header.is-scrolled .nav__links a:not(.btn)::after { background: var(--brand-green); }
  body.nav-overlay .site-header.is-scrolled .nav__links a[aria-current="page"]:not(.btn) { color: var(--brand-blue); }
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.7rem;
  transition: padding-block 0.65s var(--ease-smooth);
}
/* Header grows a touch once you start scrolling down */
.site-header.is-scrolled .nav { padding-block: 1.05rem; }
.nav__logo img { height: 44px; width: auto; transition: height 0.65s var(--ease-smooth); }
.site-header.is-scrolled .nav__logo img { height: 50px; }
@media (prefers-reduced-motion: reduce) {
  .site-header, .nav, .nav__logo img { transition: none; }
}
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.6rem);
  list-style: none;
  padding: 0;
}
.nav__links a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.97rem;
  color: var(--brand-navy);
  text-decoration: none;
  padding: 0.4rem 0;
  position: relative;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--brand-green);
  transition: width 0.25s var(--ease-out);
}
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { width: 100%; }
.nav__links a[aria-current="page"] { color: var(--brand-blue); }
.nav__cta { margin-left: 0.5rem; }

.nav__toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.4rem;
  color: var(--brand-navy);
  position: relative;
  z-index: calc(var(--z-overlay) + 1); /* stay tappable above the open menu panel */
}
.nav__toggle svg { width: 28px; height: 28px; }

@media (max-width: 880px) {
  .nav__toggle { display: inline-flex; }
  .nav__links {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(80vw, 320px);
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    background: #fff;
    padding: 5rem 1.75rem 2.5rem;
    box-shadow: -12px 0 40px -20px rgba(0,0,0,0.4);
    transform: translateX(100%);
    transition: transform 0.3s var(--ease-out);
    z-index: var(--z-overlay);
    /* The panel must scroll its own contents. Without this the links overflow the
       fixed box on a short viewport (landscape, small phones, large text settings)
       and render straight onto the hero photo with no background behind them —
       reported by the client 2026-08-06. overscroll-behavior stops the scroll
       chaining to the page underneath once the menu hits its end. */
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* iOS/Android size a fixed inset:0 box to the LARGE viewport, so the bottom of
     the panel sits behind the browser toolbar while it is shown. dvh tracks the
     visible viewport instead, keeping the last link reachable. */
  @supports (height: 100dvh) {
    .nav__links { height: 100dvh; }
  }
  .nav__links.is-open { transform: translateX(0); }
  .nav__cta { margin-left: 0; }
  .nav__backdrop {
    position: fixed; inset: 0; background: rgba(0,32,72,0.4);
    opacity: 0; visibility: hidden; transition: opacity 0.3s;
    z-index: calc(var(--z-overlay) - 1);
  }
  .nav__backdrop.is-open { opacity: 1; visibility: visible; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: linear-gradient(180deg, var(--surface) 0%, #fff 100%);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
.hero__kicker {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--brand-green-dark);
  letter-spacing: 0.01em;
  margin-bottom: 0.9rem;
}
.hero h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); }
.hero__sub { margin-top: 1.25rem; font-size: clamp(1.08rem, 2vw, 1.25rem); color: var(--muted); max-width: 52ch; }
.hero__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.9rem; }
.hero__media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 5;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__badge {
  position: absolute;
  left: 1rem; bottom: 1rem;
  background: rgba(255,255,255,0.95);
  border-radius: var(--radius-sm);
  padding: 0.7rem 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--brand-navy);
  font-size: 0.95rem;
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; gap: 0.55rem;
}
.hero__badge span { color: var(--brand-green-dark); }

@media (max-width: 760px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { aspect-ratio: 3 / 2; max-height: 60vh; }
}

/* ---------- Generic two-column feature row ---------- */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.feature--reverse .feature__media { order: 2; }
.feature__media {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 5 / 4;
}
.feature__media img { width: 100%; height: 100%; object-fit: cover; }
.feature h2 { font-size: clamp(1.7rem, 3.8vw, 2.4rem); }
.feature p + p { margin-top: 1rem; }
.feature .btn { margin-top: 1.6rem; }
@media (max-width: 760px) {
  .feature { grid-template-columns: 1fr; }
  .feature--reverse .feature__media { order: 0; }
  .feature__media { aspect-ratio: 3 / 2; }
}

/* numbered steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; counter-reset: step; }
.step {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
  position: relative;
}
.step__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand-blue);
  color: #fff;
  margin-bottom: 0.9rem;
}
.step h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.step p { color: var(--muted); font-size: 1rem; }

/* checklist */
.checklist { list-style: none; padding: 0; display: grid; gap: 0.85rem; }
.checklist li { display: flex; gap: 0.75rem; align-items: flex-start; }
.checklist svg { flex: 0 0 auto; width: 24px; height: 24px; color: var(--brand-green); margin-top: 2px; }

/* ---------- Stats ---------- */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.5rem; }
.stat { text-align: center; }
.stat__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 5vw, 2.8rem); color: var(--brand-blue); line-height: 1; }
.stat__label { color: var(--muted); margin-top: 0.4rem; font-size: 0.98rem; }

/* ---------- Pricing / offer panel ---------- */
.offer {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: clamp(1.75rem, 4vw, 2.75rem);
}
.offer__price { font-family: var(--font-display); font-weight: 700; color: var(--brand-blue); font-size: clamp(2.2rem, 5vw, 3rem); line-height: 1; }
.offer__price small { font-size: 1rem; color: var(--muted); font-weight: 600; }

/* ---------- Callout (soft cross-sell note) ---------- */
.callout {
  margin-top: 1.75rem;
  padding: 1.1rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand-green);
  border-radius: var(--radius-sm);
}
.callout p { color: var(--muted); font-size: 0.98rem; }
.callout strong { font-family: var(--font-display); color: var(--brand-navy); }
.callout a { font-weight: 700; color: var(--brand-blue); }

/* ---------- CTA band ---------- */
.cta-band {
  background:
    linear-gradient(120deg, var(--brand-navy) 0%, var(--brand-blue) 100%);
  color: #fff;
  text-align: center;
}
.cta-band h2 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.cta-band p { color: rgba(255,255,255,0.85); max-width: 56ch; margin-inline: auto; margin-top: 0.9rem; }
.cta-band .hero__actions { justify-content: center; margin-top: 2rem; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 1.1rem; max-width: 560px; }
.form .field { display: grid; gap: 0.4rem; }
.form label { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--brand-navy); }
.form input, .form textarea, .form select {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  width: 100%;
}
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--brand-blue); outline: 2px solid rgba(12,77,162,0.18); outline-offset: 0; }
.form textarea { min-height: 130px; resize: vertical; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 560px) { .form .row { grid-template-columns: 1fr; } }
.form small { color: var(--muted); }

/* Live Typeform mount (get-started). Reserve space so the async embed doesn't
   collapse the column then jump; the live embed's iframe renders 650px tall. */
.typeform-embed { min-height: 650px; }

/* contact split */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }
.info-list { list-style: none; padding: 0; display: grid; gap: 1.25rem; }
.info-list li { display: flex; gap: 0.9rem; align-items: flex-start; }
.info-list svg { flex: 0 0 auto; width: 24px; height: 24px; color: var(--brand-blue); margin-top: 3px; }
.info-list a { color: var(--ink); text-decoration: none; }
.info-list a:hover { color: var(--brand-blue); }
.info-list strong { font-family: var(--font-display); display: block; color: var(--brand-navy); }
.map-embed { border: 0; width: 100%; height: 320px; border-radius: var(--radius); box-shadow: var(--shadow-sm); }

/* ---------- Footer ---------- */
.site-footer { background: var(--brand-navy); color: rgba(255,255,255,0.8); }
.site-footer a { color: rgba(255,255,255,0.8); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
@media (max-width: 720px) { .footer__grid { grid-template-columns: 1fr; gap: 2rem; } }
.footer__brand img { height: 46px; margin-bottom: 1rem; }
.footer__brand p { color: rgba(255,255,255,0.7); max-width: 36ch; font-size: 0.97rem; }
.footer h4 { color: #fff; font-size: 1.05rem; margin-bottom: 1rem; }
.footer ul { list-style: none; padding: 0; display: grid; gap: 0.6rem; font-size: 0.97rem; }
.footer__social { display: flex; gap: 0.75rem; margin-top: 1rem; }
.footer__social a {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,0.25); border-radius: 50%;
  transition: background 0.2s, border-color 0.2s;
}
.footer__social a:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.5); }
.footer__social svg { width: 20px; height: 20px; }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.14);
  padding-block: 1.4rem;
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem;
  justify-content: space-between; align-items: center;
  font-size: 0.88rem; color: rgba(255,255,255,0.6);
}
.footer__bottom ul { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ---------- Page hero (sub pages) ---------- */
.page-hero { background: linear-gradient(180deg, var(--surface) 0%, #fff 100%); padding-top: var(--header-h); }
.page-hero__inner { padding-block: clamp(2.75rem, 6vw, 4.5rem); max-width: 760px; }
.page-hero h1 { font-size: clamp(2rem, 5vw, 3rem); }
.page-hero p { margin-top: 1rem; font-size: clamp(1.05rem, 2vw, 1.2rem); color: var(--muted); }

/* Image-backed inner-page hero (subtler echo of the homepage hero) */
.page-hero--media {
  position: relative;
  background: var(--brand-navy);
  isolation: isolate;
  overflow: hidden;
  padding-top: var(--header-h);
}

/* anchored sections clear the fixed header when jumped to */
[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }
.page-hero--media .page-hero__bg {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
}
.page-hero--media::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(0, 30, 66, 0.50) 0%, rgba(0, 24, 54, 0.84) 100%),
    linear-gradient(95deg, rgba(0, 32, 72, 0.72) 0%, rgba(0, 32, 72, 0.15) 65%);
}
.page-hero--media .page-hero__inner { padding-block: clamp(3.5rem, 8vw, 6rem); }
.page-hero--media .eyebrow { color: #aee0c0; }
.page-hero--media h1 { color: #fff; }
.page-hero--media p { color: rgba(255, 255, 255, 0.9); }

/* breadcrumb-ish back link */
.muted-link { color: var(--muted); font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; text-decoration: none; }
.muted-link:hover { color: var(--brand-blue); }

/* ---------- Scroll reveal (enhances already-visible default) ---------- */
.reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
  .js .reveal.is-visible { opacity: 1; transform: none; }
}

/* ===========================================================
   Flashy homepage treatments (image-integrated backgrounds)
   =========================================================== */

.nav__logo { display: inline-flex; align-items: center; }

/* "Book a call" nav button: signature blue, slightly larger */
.nav__cta .btn {
  --btn-bg: var(--brand-blue);
  --btn-bg-hover: var(--brand-blue-dark);
  color: var(--btn-fg); /* keep white — beats .nav__links a's navy (higher specificity) in every header state */
  padding: 1rem 1.7rem;
  font-size: 1.05rem;
}

/* Full-bleed hero */
.hero--full {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  background: var(--brand-navy);
  overflow: hidden;
  isolation: isolate;
}
.hero--full .hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero--full .hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero--full::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(0, 28, 64, 0.40) 0%, rgba(0, 22, 52, 0.82) 100%),
    linear-gradient(95deg, rgba(0, 32, 72, 0.72) 0%, rgba(0, 32, 72, 0.08) 60%);
}
.hero--full .hero__inner { padding-block: clamp(3rem, 9vh, 5.5rem); max-width: 660px; }
.hero--full .hero__kicker { color: #cfe0f3; }
.hero--full h1 { color: #fff; font-size: clamp(2.4rem, 6vw, 4rem); letter-spacing: -0.03em; }
.hero--full .hero__sub { color: rgba(255, 255, 255, 0.88); max-width: 48ch; }
.hero--full .hero__actions { margin-top: 2.25rem; }

/* ---------- Showpiece: a framed cinematic photo panel ----------
   Floats inside the page with whitespace around it, so a photograph
   never meets a white section on a hard horizontal line. */
.showpiece {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: clamp(16px, 2.4vw, 30px);
  color: #fff;
  padding: clamp(2.25rem, 5vw, 4.25rem) clamp(1.5rem, 4.5vw, 3.5rem);
  box-shadow: 0 30px 60px -32px rgba(0, 24, 56, 0.55);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(320px, 42vw, 500px);
}
.showpiece__bg {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  transform: scale(1.03);
}
.showpiece::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(0, 18, 42, 0.50) 0%, rgba(0, 15, 36, 0.62) 55%, rgba(0, 13, 32, 0.82) 100%),
    linear-gradient(100deg, rgba(0, 22, 52, 0.60) 0%, rgba(0, 22, 52, 0.30) 60%, rgba(0, 22, 52, 0.18) 100%);
}
.showpiece h2, .showpiece h3 { color: #fff; }
.showpiece__kicker {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  color: #aee0c0;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.showpiece .stat-row { gap: clamp(1.25rem, 3vw, 2.5rem); }
.showpiece .stat { text-align: left; }
.showpiece .stat__num { color: #fff; }
.showpiece .stat__label { color: rgba(255, 255, 255, 0.82); }

/* Testimonial inside a showpiece */
.quote-block { max-width: 60ch; }
.quote-block__stars { color: #f5c451; letter-spacing: 3px; font-size: 1.05rem; margin-bottom: 1.1rem; }
.quote-block blockquote {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.35rem, 3vw, 2.05rem);
  line-height: 1.32;
  color: #fff;
  letter-spacing: -0.01em;
}
.quote-block figcaption {
  margin-top: 1.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}

/* Closing CTA inside a showpiece */
.showpiece--cta h2 { font-size: clamp(1.85rem, 4vw, 2.7rem); max-width: 20ch; }
.showpiece__text {
  margin-top: 0.9rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
  max-width: 54ch;
}
.showpiece--cta .hero__actions { margin-top: 2rem; }

/* ---------- Editorial section header (asymmetric, left-aligned) ---------- */
.section-head {
  display: grid;
  gap: 0.85rem 3rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.section-head__title { font-size: clamp(1.75rem, 4vw, 2.6rem); max-width: 18ch; }
.section-head__note {
  color: var(--muted);
  font-size: clamp(1.02rem, 1.6vw, 1.15rem);
  max-width: 48ch;
}
@media (min-width: 760px) {
  .section-head {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: end;
  }
  .section-head__note { padding-bottom: 0.3rem; }
}

/* ---------- Opening statement (replaces centered eyebrow stack) ---------- */
.statement { display: grid; gap: 1.1rem 4rem; }
.statement__title {
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  color: var(--brand-navy);
  letter-spacing: -0.02em;
}
.statement__body p { color: var(--ink); font-size: clamp(1.06rem, 1.8vw, 1.2rem); }
.statement__body p + p { margin-top: 1rem; color: var(--muted); }
@media (min-width: 820px) {
  .statement { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.95fr); align-items: start; }
}

/* ---------- Reasons list ("this is for you if") — not cards, not icons ---------- */
.reasons {
  list-style: none; padding: 0;
  display: grid; gap: 2rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.reasons li { padding-top: 1.1rem; border-top: 2px solid var(--brand-green); }
.reasons h3 { font-size: 1.2rem; margin-bottom: 0.5rem; color: var(--brand-navy); }
.reasons p { color: var(--muted); }

/* ---------- Ways to train — an editorial directory, not a card grid ---------- */
.ways { list-style: none; padding: 0; display: grid; }
.way {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem 2rem;
  padding: clamp(1.3rem, 3vw, 1.9rem) 0;
  border-top: 1px solid var(--border);
}
.way:last-child { border-bottom: 1px solid var(--border); }
.way h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); color: var(--brand-navy); }
.way p { color: var(--muted); margin-top: 0.35rem; max-width: 60ch; }
.way__link {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--brand-blue);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 0.4rem;
  transition: gap 0.2s var(--ease-out);
}
.way__link:hover { gap: 0.7rem; }
@media (max-width: 540px) {
  .way { grid-template-columns: 1fr; }
}

/* utility */
.text-center { text-align: center; }
.mt-2 { margin-top: 0.5rem; }
.mx-auto { margin-inline: auto; }
.flow > * + * { margin-top: 1.1rem; }
.divider { height: 1px; background: var(--border); border: 0; margin: 0; }
.pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--surface-2); color: var(--brand-blue);
  font-family: var(--font-display); font-weight: 700; font-size: 0.85rem;
  padding: 0.35rem 0.8rem; border-radius: 999px;
}

/* ---------- Legal / long-form prose pages ---------- */
.legal { max-width: 760px; }
.legal__meta { color: var(--muted); font-size: 0.95rem; margin-bottom: 2.5rem; }
.legal h2 {
  font-size: clamp(1.35rem, 3vw, 1.7rem);
  margin-top: 2.75rem;
  scroll-margin-top: 90px;
}
.legal h3 {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  color: var(--ink);
  margin-top: 1.75rem;
}
.legal h2 + p, .legal h3 + p { margin-top: 0.85rem; }
.legal p { margin-top: 1.1rem; color: var(--muted); }
.legal ul, .legal ol { margin-top: 1.1rem; padding-left: 1.4rem; color: var(--muted); }
.legal li + li { margin-top: 0.5rem; }
.legal a { color: var(--brand-blue); }
.legal .legal__note {
  margin-top: 2.5rem; padding: 1rem 1.25rem;
  background: var(--surface); border-left: 3px solid var(--brand-green);
  border-radius: var(--radius-sm); font-size: 0.95rem;
}

/* ---------- Google reviews (Elfsight live widget + static fallback) ---------- */
/* .reviews__live is the Elfsight mount. While empty it has zero height (never
   display:none — Elfsight's lazy IntersectionObserver needs it renderable). Once
   the widget paints, main.js adds .reviews--live to hide the static fallback
   cards so both never show together. */
.reviews--live .reviews__grid { display: none; }
.reviews--live .reviews__live { margin-bottom: 0.5rem; }
.reviews__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.reviews__wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}
.reviews__wordmark span:nth-child(1) { color: #4285f4; }
.reviews__wordmark span:nth-child(2) { color: #ea4335; }
.reviews__wordmark span:nth-child(3) { color: #fbbc05; }
.reviews__wordmark span:nth-child(4) { color: #4285f4; }
.reviews__wordmark span:nth-child(5) { color: #34a853; }
.reviews__wordmark span:nth-child(6) { color: #ea4335; }
.reviews__meta { color: var(--ink); font-size: 1.05rem; }
.reviews__meta strong { font-family: var(--font-display); color: var(--brand-navy); }
.reviews__stars, .review-card__stars { color: #f5c451; letter-spacing: 2px; }
.reviews__grid {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.review-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.4rem 1.4rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.review-card__top { display: flex; align-items: center; gap: 0.8rem; }
.review-card__avatar {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand-blue);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
}
.review-card:nth-child(2) .review-card__avatar { background: var(--brand-green-dark); }
.review-card:nth-child(3) .review-card__avatar { background: var(--brand-navy); }
.review-card__name { font-family: var(--font-display); font-weight: 700; color: var(--brand-navy); font-size: 0.98rem; }
.review-card blockquote { color: var(--ink); font-size: 0.98rem; }
.review-card__source {
  margin-top: auto;
  color: var(--muted);
  font-size: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

/* ---------- Studio photo gallery ---------- */
.gallery {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery li {
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

/* Full-width photo below the gallery. Mirrors .feature__media, but the ratio is
   held at 16/9 across every breakpoint: this carries group shots, and dropping
   to a narrower ratio on phones would crop people off both ends. */
.photo-wide {
  margin-top: 1.5rem;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 16 / 9;
}
.photo-wide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Video frame (poster + play overlay) ---------- */
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 920px;
  margin-inline: auto;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--brand-navy);
  box-shadow: var(--shadow-md);
}
.video-frame__media { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Location line (simple "where we are" cue) ---------- */
.location-line {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-block: 1.5rem;
}
.location-line__text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.6rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.98rem;
}
.location-line__text svg { width: 20px; height: 20px; color: var(--brand-blue); flex: 0 0 auto; }
.location-line__text strong { font-family: var(--font-display); color: var(--brand-navy); }

/* ---------- Class timetable ---------- */
.timetable { margin: 2.25rem auto 0; max-width: 640px; text-align: center; }
.timetable a { display: block; border-radius: var(--radius); }
.timetable a:focus-visible { outline: 3px solid var(--brand-blue); outline-offset: 4px; }
.timetable img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow-md); }
.timetable figcaption {
  max-width: 60ch;
  margin: 1.1rem auto 0;
  color: var(--muted);
  font-size: 0.95rem;
}
.timetable__hint { display: block; margin-top: 0.6rem; font-size: 0.85rem; }

/* ---------- 14-day free pass popup ---------- */
.sf-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: 1.25rem;
}
.sf-modal[hidden] { display: none; }
.sf-modal:not(.is-open) { pointer-events: none; } /* ignore clicks during the fade-out */
.sf-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 24, 54, 0.55); }
.sf-modal__panel {
  position: relative;
  width: min(100%, 460px);
  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: clamp(1.6rem, 5vw, 2.4rem);
}
.sf-modal__close {
  position: absolute;
  top: 0.9rem; right: 0.9rem;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  color: var(--brand-navy);
  cursor: pointer;
}
.sf-modal__close:hover { background: var(--surface-2); }
.sf-modal__close svg { width: 18px; height: 18px; }
.sf-modal__title { margin-top: 0.9rem; font-size: clamp(1.4rem, 4vw, 1.75rem); }
.sf-modal__text { margin-top: 0.6rem; color: var(--muted); }
.sf-modal .form { margin-top: 1.25rem; max-width: none; }
.sf-modal__success {
  margin-top: 1.25rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--brand-green-text); /* AA on --surface (4.53:1); --brand-green-dark is 3.76:1 */
  font-weight: 600;
}
.sf-modal__success[hidden] { display: none; }
/* shown only when ActiveCampaign actually rejects the entry — carries AC's own wording */
.sf-modal__error {
  margin-top: 1.25rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  background: var(--danger-surface);
  color: var(--danger);
  font-weight: 600;
}
.sf-modal__error a { color: inherit; }
.sf-modal__error[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .sf-modal { opacity: 0; transition: opacity 0.25s var(--ease-out); }
  .sf-modal.is-open { opacity: 1; }
  .sf-modal__panel { transform: translateY(12px); transition: transform 0.3s var(--ease-out); }
  .sf-modal.is-open .sf-modal__panel { transform: none; }
}

/* Minimised free-pass tab — appears bottom-right once the popup is dismissed */
.sf-minitab {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: var(--z-overlay);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.15rem;
  /* The tab floats over whatever happens to be behind it, and the page is full of
     green CTAs the same colour — on a small screen it landed on top of "Book a free
     discovery call" and the two merged into one shape (client, 2026-08-06). A white
     ring plus a darker outer edge keeps it readable as a separate, floating control
     against green buttons, white sections and dark photography alike. */
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--brand-green);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  box-shadow: 0 0 0 1px rgba(0, 32, 72, 0.18), var(--shadow-md);
  cursor: pointer;
}
/* ---------- Cookie consent bar (injected by main.js on every page) ----------
   A bottom bar rather than a blocking modal: the visitor can read the site and
   the cookie policy before choosing, which is what "freely given" needs. Accept
   and Decline are the same size and sit side by side — no dark pattern where
   the refusal is a faint link. */
.sf-consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-consent);
  background: var(--white);
  border-top: 1px solid var(--border);
  box-shadow: 0 -14px 38px -18px rgba(16, 42, 73, 0.45);
  padding: 1.15rem clamp(1.1rem, 4vw, 2rem);
}
.sf-consent[hidden] { display: none; }
.sf-consent__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
}
.sf-consent__copy { flex: 1 1 auto; }
.sf-consent__title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--brand-navy);
  font-size: 1.05rem;
}
.sf-consent__text {
  margin-top: 0.3rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 68ch;
}
.sf-consent__actions {
  flex: 0 0 auto;
  display: flex;
  gap: 0.7rem;
}
/* the two choices must stay the same size as each other at every width */
.sf-consent__actions .btn { white-space: nowrap; }
.sf-consent:focus { outline: none; }
@media (max-width: 760px) {
  .sf-consent__inner { flex-direction: column; align-items: stretch; gap: 1rem; }
  .sf-consent__actions .btn { flex: 1 1 0; text-align: center; }
  /* a long policy on a small screen must not push the buttons off-screen */
  .sf-consent { max-height: 70vh; overflow-y: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .sf-consent { transform: translateY(100%); transition: transform 0.4s var(--ease-out); }
  .sf-consent.is-shown { transform: none; }
}

.sf-minitab:hover { background: var(--brand-green-dark); }
.sf-minitab svg { width: 18px; height: 18px; flex: 0 0 auto; }
.sf-minitab[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .sf-minitab {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), background-color 0.2s;
  }
  .sf-minitab.is-shown { opacity: 1; transform: none; }
}