/* Layout — grid, sections, hero, nav */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

.section {
  padding-block: var(--space-section);
  position: relative;
}

/* Per-section scroll anchor adjustments. Negative scroll-margin-top lets the
   anchor land slightly past the section padding so the actual content
   (cards, photos, form) is in view, not just the section head.
   Each section is tuned individually to avoid "peek" of adjacent sections.
   #about kept for /about.html sub-page — same full-viewport panel behavior.
   v=18: #gym recalibrated — when the H2 + lead were removed in v=17 the old
   -60/-30 became too aggressive (content landed too high). Setting it to 0
   matches the perceived center of the other pages now that #gym's section
   head is just the "The Facility" eyebrow. */
#contact {
  scroll-margin-top: -60px;
}
#gym {
  /* v=23: pull the scroll a touch aggressive so the tour-band above
     doesn't peek as a sliver at the top of the viewport. */
  scroll-margin-top: -20px;
}
#about {
  scroll-margin-top: -80px;
}
#membership {
  scroll-margin-top: -10px;
}
#training {
  scroll-margin-top: -100px;
}
@media (max-width: 720px) {
  #contact {
    scroll-margin-top: -30px;
  }
  #gym {
    scroll-margin-top: -10px;
  }
  #about {
    scroll-margin-top: -40px;
  }
  #membership {
    /* v=36: overridden at runtime by main.js, which measures the real
       section-top -> first-tier-card distance and writes it here as an
       inline style so the mobile anchor lands on the Day Pass card rather
       than on the section copy. It can't be a constant — the H2 and lead
       rewrap across the mobile range, moving the card 480-690px down.
       This value is the fallback if that script doesn't run. */
    scroll-margin-top: -5px;
  }
  #training {
    scroll-margin-top: -50px;
  }
}

/* About is treated as a full-viewport panel — focused storytelling moment,
   no peek into adjacent sections when anchored. */
#about {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Tentacle background layer — sits behind all content within the section's
   stacking context. Faded and softly blurred so the source-image grain
   doesn't show through; reads as ambient atmosphere, not artwork. */
#about::before {
  content: "";
  position: absolute;
  /* Negative inset prevents the blur halo from showing a hard edge at the
     section boundary. */
  inset: -16px;
  z-index: -1;
  background-image: url("/assets/images/about-bg-1280w.webp?v=9");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.015;
  filter: blur(3px);
  pointer-events: none;
}
@media (min-width: 1280px) {
  #about::before {
    background-image: url("/assets/images/about-bg-1920w.webp?v=9");
  }
}
@media (max-width: 720px) {
  #about::before {
    background-image: url("/assets/images/about-bg-800w.webp?v=9");
    opacity: 0.0125;
    filter: blur(2.5px);
  }
}
/* v=17: #gym is the only section with two carousels stacked, so we trim
   its block padding to keep both carousels inside one viewport. */
.section--gym {
  padding-block: var(--space-xl);
  /* v=31: fill the viewport so #contact below doesn't peek above the
     fold when anchored. Center content so short viewports stay tidy. */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.section--surface { background: var(--color-surface); }
.section--inset {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.section-head {
  display: grid;
  gap: var(--space-s);
  margin-bottom: var(--space-2xl);
  max-width: 56rem;
}
/* Compact head — eyebrow only, used in #gym section per v=17 operator
   request to fit both carousels in the same viewport. Drops the H2 +
   lead and tightens the bottom margin to a fraction of the default. */
.section-head--compact {
  margin-bottom: var(--space-m);
  gap: 0;
}
.section-head__lead { color: var(--color-text-muted); font-size: var(--step-1); max-width: var(--container-prose); }

/* ---------- Top nav ---------- */
.topnav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: hsl(0 0% 4% / 0.72);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid hsl(195 10% 30% / 0.2);
}
.topnav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  height: 4.5rem;
}
.topnav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--color-text);
  text-decoration: none;
  font-weight: var(--weight-bold);
  font-size: var(--step-0);
  letter-spacing: -0.01em;
  line-height: 1;
}
.topnav__brand:hover { color: var(--color-text); }
.topnav__brand-mark {
  width: 40px; height: 40px;
  flex: none;
}
.topnav__brand-text strong { display: block; }
.topnav__brand-text small {
  display: block;
  font-size: 0.65rem;
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.topnav__links {
  display: none;
  gap: clamp(1rem, 2vw, 2rem);
  list-style: none;
  margin: 0; padding: 0;
}
.topnav__links a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-weight: var(--weight-semi);
  font-size: var(--step--1);
  letter-spacing: 0.01em;
  padding: var(--space-2xs) 0;
  position: relative;
}
.topnav__links a::after {
  content: ""; position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--color-action);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform var(--dur-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .topnav__links a:hover { color: var(--color-text); }
  .topnav__links a:hover::after { transform: scaleX(1); }
}
/* Active section: same expanded underline + color as hover, but persistent
   while the matched section is in view. JS sets aria-current="location". */
.topnav__links a[aria-current="location"] { color: var(--color-text); }
.topnav__links a[aria-current="location"]::after { transform: scaleX(1); }
/* Compound selector .btn.topnav__cta beats .btn alone in specificity —
   without it, .btn { display: inline-flex } from components.css (loaded
   after layout.css) overrides this hide rule and the CTA leaks onto mobile. */
.btn.topnav__cta {
  display: none;
  /* v=17: ~0.75x vs the standard .btn so it sits naturally in the topnav rhythm */
  padding: 0.5rem 1rem;
  min-height: 36px;
  font-size: 0.85rem;
  letter-spacing: 0;
}
@media (min-width: 1080px) {
  .topnav__links { display: flex; }
  .btn.topnav__cta { display: inline-flex; }
}

.topnav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.topnav__toggle[aria-expanded="true"] { background: var(--color-surface-raised); }
@media (min-width: 1080px) {
  .topnav__toggle { display: none; }
}

/* Mobile drawer */
.mobile-drawer {
  position: fixed;
  inset: 4.5rem 0 0 0;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  padding: var(--space-l) var(--page-pad) var(--space-2xl);
  transform: translateY(-100%);
  transition: transform var(--dur-base) var(--ease-out);
  z-index: calc(var(--z-sticky) - 1);
  overflow-y: auto;
}
.mobile-drawer[data-open="true"] { transform: translateY(0); }
.mobile-drawer ul { list-style: none; padding: 0; margin: 0 0 var(--space-l); }
.mobile-drawer li { margin: 0; border-bottom: 1px solid var(--color-border); }
.mobile-drawer a {
  display: block;
  padding: var(--space-m) 0;
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--step-1);
  font-weight: var(--weight-semi);
}
@media (min-width: 1080px) {
  .mobile-drawer { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  /* v=35: hero + stats strip should end exactly at the viewport bottom on a
     tall screen. The subtrahend is the strip's own height (224px = 14rem at
     >=1440px, MEASURED), not the 6rem guess it replaces, and the 46rem ceiling
     is raised to 64rem so the hero can actually grow to fill. On shorter
     screens the hero's content (~980px) exceeds this min-height anyway, so
     those viewports are unchanged. Exact fill is only achievable where the
     strip is 224px; at 1280px it is 193px and ~31px of hero is over-allocated,
     which is invisible because content dominates there. The extra 73px is the
     sticky .topnav, which sits in flow above the hero and must come out of the
     budget too (MEASURED: topnav h=73, hero top=73). */
  min-height: clamp(28rem, calc(100svh - 14rem - 73px), 80rem);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  overflow: hidden;
  /* v=34: bottom padding reduced from --space-3xl (64→128px fluid) to
     --space-2xl (64px). The walk-through CTA moved into .hero__actions in
     KP-002, adding ~56px of content height; the old fluid bottom padding then
     pushed the stats strip well below the fold on desktop (MEASURED: hero
     1055px tall in a 900px viewport). Top padding and min-height unchanged,
     so no anchor offset moves. */
  padding-block: var(--space-2xl) var(--space-2xl);
  background: var(--color-bg);
}
/* Mobile only: shrink hero ~5vh so the bottom-anchored content sits a touch
   higher on the screen. Desktop is restored by the min-width: 760px block below. */
@media (max-width: 759.98px) {
  .hero {
    /* v=17: trimmed from 87vh → 75vh so the stats strip peeks at bottom.
       v=18: top padding zeroed (was var(--space-2xl) = 64px) and bottom
       padding reduced so all hero content fits in viewport on phones. */
    min-height: clamp(28rem, 75vh, 42rem);
    padding-block: 0 var(--space-l);
  }
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Mobile: 80% pulls Remi (far-right of image) in toward center.
     Desktop override below at min-width 760px keeps the established 78%. */
  object-position: 80% center;
  opacity: 0.85;
}
.hero__bg::after {
  /* Layered gradient — left fade for legibility, bottom fade into next section */
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(95deg, hsl(0 0% 4% / 0.95) 0%, hsl(0 0% 4% / 0.7) 35%, hsl(0 0% 4% / 0.2) 60%, transparent 80%),
    linear-gradient(180deg, hsl(0 0% 4% / 0.4) 0%, transparent 30%, transparent 70%, hsl(0 0% 4% / 0.95) 100%);
}
.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
  align-items: end;
  width: 100%;
}
.hero__content {
  max-width: 38rem;
}
@media (min-width: 760px) {
  .hero__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; }
  .hero__bg img { object-position: 78% center; }
}
.hero__eyebrow {
  font-size: var(--step--1);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-action);
  font-weight: var(--weight-semi);
  margin-bottom: var(--space-m);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}
.hero__eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: currentColor;
}
.hero h1 {
  font-size: clamp(2.5rem, 1.8rem + 4.5vw, 5.25rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-m);
}
.hero h1 em {
  font-style: normal;
  color: var(--color-action);
}
.hero__lead {
  font-size: var(--step-1);
  color: var(--color-text);
  max-width: 36rem;
  margin-bottom: var(--space-l);
  line-height: 1.5;
}
/* v=18: stacked column at every breakpoint (operator wanted the training CTA
   below the membership CTA on web too). On desktop the buttons size to content
   so they don't span uncomfortably wide. */
.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
  margin-bottom: var(--space-m);
}
.hero__actions .btn { width: 100%; max-width: 22rem; }
@media (min-width: 760px) {
  .hero__actions .btn { width: auto; max-width: none; min-width: 14rem; }
}
/* v=34: the last element in the hero column carries a trailing margin that
   stacks on top of the hero's own bottom padding — pure dead space. Zeroing it
   removes 24px between the trust line and the stats strip with no visual cost. */
.hero__content > :last-child { margin-bottom: 0; }
/* v=32: .btn is nowrap by default, and "Request a Training Consultation" (31
   chars) overruns both of these rows on a narrow screen — measured at 372px of
   button in a 360px viewport on /about, and overhanging the hero's text column
   by up to 24px in the 760–815px band where the grid narrows that column.
   These two rows stack their buttons vertically, so a wrapped label costs no
   layout. Deliberately NOT behind a media query: `normal` only *permits*
   wrapping, the label already fits on one line from ~816px up, and a breakpoint
   tuned to today's string would silently break the next time a label is edited.
   .page-cta__actions is /about's CTA row — flex-wrap wraps *between* its
   buttons but cannot wrap *within* one, so it needs this as much as the hero. */
.hero__actions .btn,
.page-cta__actions .btn { white-space: normal; }
/* KP-002 (R10): centre the label. .hero__actions holds two <a class="btn"> and
   one <button class="btn">; a <button> gets text-align:center from the UA
   stylesheet while an <a> inherits text-align:start, so the two anchors' labels
   sat flush-left inside a centred button box. Invisible while every label was
   one short line — the wrap added above made it obvious on the consultation
   button. Set here rather than on one button so both element types agree and a
   future fourth CTA inherits it. No desktop change: a single-line label is a
   shrink-to-fit flex item, so text-align has nothing to distribute.
   (/about is already correct — .page-cta sets text-align:center on the block.) */
.hero__actions .btn { text-align: center; }
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s) var(--space-m);
  font-size: var(--step--1);
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
}
.hero__trust strong { color: var(--color-text); font-weight: var(--weight-semi); }
.hero__trust .star { color: var(--color-action); margin-right: 2px; }

/* ---------- Marquee strip ---------- */
.strip {
  border-block: 1px solid var(--color-border);
  background: var(--color-bg);
  padding-block: var(--space-xl);
}
.strip__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-m);
  align-items: center;
}
.strip__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}
.strip__item dt {
  font-size: var(--step--1);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: var(--weight-semi);
}
.strip__item dd {
  margin: 0;
  font-size: var(--step-2);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  color: var(--color-text);
  line-height: 1.1;
}

/* ---------- Two-col text + media ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: start;
}
@media (min-width: 880px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-3xl); }
  .split--reverse > :first-child { order: 2; }
}
.split__media figure { margin: 0; }
.split__media img {
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-2);
}
.split__media figcaption {
  margin-top: var(--space-s);
  font-size: var(--step--1);
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
}

/* ---------- Photo strip ---------- */
.photo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
}
@media (min-width: 720px) {
  .photo-grid {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto auto;
    gap: var(--space-m);
  }
  .photo-grid__main {
    grid-row: 1 / span 2;
  }
}
.photo-grid figure { margin: 0; position: relative; }
.photo-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-2);
}
.photo-grid__main img { aspect-ratio: 4 / 5; }
.photo-grid__side img { aspect-ratio: 4 / 3; }

/* ---------- Pricing grid ---------- */
.tiers {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
}
@media (min-width: 720px) {
  .tiers { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
  .tiers { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Page-head section (sub-page hero, lightweight) ---------- */
.section--page-head {
  padding-block: clamp(4rem, 4rem + 3vw, 7rem) var(--space-2xl);
}
.section-head--centered {
  margin-inline: auto;
  text-align: center;
}
.section-head--centered .section-head__lead {
  margin-inline: auto;
}

/* ---------- Owners grid (about page) ---------- */
.owners-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
}
@media (min-width: 720px) {
  .owners-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Training prices grid ---------- */
.training-prices {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
  margin-top: var(--space-l);
}
@media (min-width: 520px) {
  .training-prices { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Sticky mobile CTA bar (under 1080px) ---------- */
.mobile-cta-bar {
  display: none;
}
@media (max-width: 1079.98px) {
  .mobile-cta-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-overlay);
    display: flex;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--page-pad);
    padding-bottom: calc(var(--space-2xs) + env(safe-area-inset-bottom, 0px));
    background: hsl(0 0% 4% / 0.92);
    backdrop-filter: saturate(150%) blur(12px);
    -webkit-backdrop-filter: saturate(150%) blur(12px);
    border-top: 1px solid hsl(195 10% 30% / 0.3);
    transform: translateY(0);
    transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
  }
  .mobile-cta-bar[data-hidden="true"] {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
  }
  .mobile-cta-bar .btn {
    flex: 1 1 0;
    min-height: 44px;
    padding: 0.6rem 0.75rem;
    font-size: var(--step--1);
    white-space: nowrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-cta-bar { transition: none; }
}

/* ---------- Footer ---------- */
.footer {
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-2xl) var(--space-l);
  font-size: var(--step--1);
  color: var(--color-text-muted);
}
.footer__top {
  display: grid;
  gap: var(--space-2xl);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-2xl);
}
@media (min-width: 720px) {
  .footer__top { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-l); }
}
.footer h4 {
  font-size: var(--step--1);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--space-m);
  font-weight: var(--weight-semi);
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: var(--space-2xs); }
.footer a {
  color: var(--color-text-muted);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .footer a:hover { color: var(--color-text); }
}
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-l);
  border-top: 1px solid var(--color-border);
}
.footer__tagline {
  font-style: italic;
  color: var(--color-action);
  letter-spacing: 0.01em;
}