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

.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: 28px; height: 28px;
  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;
  min-height: clamp(34rem, 92vh, 50rem);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--space-2xl) var(--space-3xl);
  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 Train-with-Remi
   below Start Membership 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; }
}
.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;
}