/* ==========================================================================
   DG FITNESS CLUB — Landing Page Styles
   Brand: Primary Red #CC0000 | Secondary Black #1a1a1a
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --red: #e02b26;
  --red-dark: #a81a16;
  --red-soft: rgba(224, 43, 38, 0.08);
  --black: #1a1a1a;
  --ink: #1c1c1e;
  --muted: #6b6b70;
  --line: #e6e6e8;
  --bg: #ffffff;
  --bg-alt: #f6f6f7;
  --radius: 16px;
  --shadow: 0 8px 30px rgba(17, 17, 17, 0.07);
  --shadow-lg: 0 18px 45px rgba(17, 17, 17, 0.12);
  --container: 1200px;
  /* The header needs more room than the body copy box — logo, eight nav links
     and the CTA don't fit comfortably in 1200px — but still stays contained
     so nothing hugs the screen edge on a wide monitor. */
  --container-header: 1400px;

  /* ----- Motion tokens ----- */
  --e-out:   cubic-bezier(.215, .61, .355, 1);   /* easeOutCubic — default for entrances */
  --e-expo:  cubic-bezier(.16, 1, .3, 1);        /* dramatic hero reveals */
  --e-quart: cubic-bezier(.25, 1, .5, 1);        /* card lifts */
  --e-back:  cubic-bezier(.34, 1.4, .64, 1);     /* icons only, sparingly */

  --d-fast: 150ms;
  --d-base: 250ms;
  --d-card: 350ms;
  --d-media: 600ms;
  --d-reveal: 750ms;
  --d-hero: 1000ms;

  /* Shared reveal transition, composed into rules that need their own
     `transition` too. No var() nested inside — a nested var would be
     substituted against :root, not the element, and silently collapse to
     its fallback. Stagger is applied as a JS-timed delay instead. */
  --t-reveal:
    opacity   var(--d-media)  ease-out,
    translate var(--d-reveal) var(--e-out),
    scale     var(--d-reveal) var(--e-out),
    filter    var(--d-reveal) var(--e-out);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 130px; }

body {
  font-family: 'Poppins', sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; }
ul { list-style: none; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ===== SECTION HEADERS ===== */
.section { padding: 62px 0; }
.section--alt { background: var(--bg-alt); }
/* Warm tint used where white cards need to stand off the page. */
.section--blush { background: #fdf2f2; }

/* ----- Dark band -----
   Breaks up the run of light sections and lets the red read as light rather
   than ink. ::before is the bloom, ::after the dot grid; both decorative, so
   the container is lifted above them. */
.section--dark {
  position: relative;
  background: #0f0f11;
  overflow: hidden;
}
.section--dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 360px at 50% -10%, rgba(224, 43, 38, 0.30), transparent 70%),
    radial-gradient(460px 320px at 102% 105%, rgba(224, 43, 38, 0.16), transparent 70%);
  pointer-events: none;
}
.section--dark::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 78%);
          mask-image: linear-gradient(180deg, #000, transparent 78%);
  pointer-events: none;
}
.section--dark > .container { position: relative; z-index: 1; }

/* Photo-backed dark band. `fixed` is what produces the parallax — the image
   stays put in the viewport while the cards scroll over it. Must come after
   .section--dark, whose `background` shorthand would otherwise reset this. */
.section--photo {
  background-image:
    linear-gradient(rgba(12, 10, 11, 0.8), rgba(12, 10, 11, 0.88)),
    url('images/g4.jpeg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
/* The dot grid competes with the photo, so it's dialled back here. */
.section--photo::after { opacity: 0.4; }

.section--dark .section-header h2 { color: #fff; }
.section--dark .section-header p { color: rgba(255, 255, 255, 0.6); }
/* Anything sitting straight on the band rather than inside a card. */
.section--dark .plan-disclaimer { color: rgba(255, 255, 255, 0.55); }
.section--dark .plan-toggle { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.14); }
.section--dark .plan-toggle button { color: rgba(255, 255, 255, 0.6); }
.section--dark .plan-toggle button.is-active { color: #fff; }
.plan-ask { color: var(--red); font-weight: 600; }
.section--dark .plan-ask { color: #f4544e; }

.section-header { text-align: center; margin-bottom: 38px; }

/* block, not inline-block — h2 below is inline-block, and two inline-blocks
   would sit side by side instead of stacking. */
.section-tag {
  display: block;
  color: var(--red);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 10px;
}

.section-header h2 {
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 800;
  color: var(--black);
  letter-spacing: -0.8px;
  line-height: 1.2;
  position: relative;
  display: inline-block;
}
.section-header h2::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -11px;
  width: 56px; height: 3px;
  border-radius: 999px;
  background: var(--red);
  transform: translateX(-50%);
  transition: transform var(--d-reveal) var(--e-out) 220ms;
}

.section-header p {
  color: var(--muted);
  font-size: 15px;
  max-width: 580px;
  margin: 22px auto 0;
  font-weight: 300;
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.btn--primary {
  background: var(--red);
  color: #fff;
  box-shadow: 0 8px 20px rgba(224, 43, 38, 0.25);
}
.btn--primary:hover { background: var(--red-dark); transform: translateY(-2px); }

.btn--dark { background: var(--black); color: #fff; }
.btn--dark:hover { background: #000; transform: translateY(-2px); }

.btn--ghost { background: transparent; color: var(--black); border-color: #d6d6da; }
.btn--ghost:hover { border-color: var(--red); color: var(--red); }

.btn--light { background: #fff; color: var(--red); }
.btn--light:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,0.2); }

.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.55); }
.btn--outline-light:hover { background: #fff; color: var(--red); }

.btn--block { display: block; width: 100%; text-align: center; }

/* ==========================================================================
   HEADER
   ========================================================================== */
header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: #fff;
  box-shadow: 0 4px 20px rgba(17, 17, 17, 0.08);
  transition: box-shadow var(--d-base) ease;
}

/* Stays pinned in both scroll directions; only the shadow deepens once the
   user is off the top of the page. */
header.is-stuck { box-shadow: 0 6px 28px rgba(17, 17, 17, 0.14); }

/* ----- Scroll progress ----- */
.scroll-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  z-index: 5;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--red), #f4544e, var(--red-dark));
}
@supports (animation-timeline: scroll()) {
  .scroll-progress {
    animation: progress-grow linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Collapse the contact strip once the user is into the page.
   grid 1fr → 0fr animates to the real content height at any screen width,
   unlike max-height which either clips or stalls. */
.top-bar {
  background: var(--black);
  color: #fff;
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--d-card) var(--e-out), opacity var(--d-base) ease;
}
.top-bar__shell { overflow: hidden; min-height: 0; }
header.is-stuck .top-bar { grid-template-rows: 0fr; opacity: 0; }

.top-bar__inner {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.top-bar__contact,
.top-bar__right { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

.top-bar a, .top-bar span {
  color: #f2f2f2;
  font-size: 12.5px;
  font-weight: 500;
}
.top-bar a:hover { color: var(--red); }
.top-bar__contact a i, .top-bar__right b { color: var(--red); margin-right: 6px; font-style: normal; }

.top-bar__social { display: flex; gap: 8px; }
.top-bar__social a {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.2s, transform 0.2s;
}
.top-bar__social a:hover { background: var(--red); transform: translateY(-2px); }
.top-bar__social svg { width: 14px; height: 14px; fill: #fff; }

/* ----- Main nav -----
   The header bars stretch edge to edge, but their contents sit in a centred
   box so the logo and the CTA stay off the screen edges. Both bars share the
   same box, which keeps the phone number aligned over the logo. */
.main-nav .container,
.top-bar__inner {
  max-width: var(--container-header);
  width: 100%;
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 40px);
}

.main-nav nav {
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: min-height var(--d-card) var(--e-out);
}

/* Logo group hard left, CTA hard right, nav takes the space between. */
.main-nav .logo-area { margin-right: auto; }
.main-nav .nav-links { margin-inline: auto; }
.main-nav .nav-cta { margin-left: auto; }
header.is-stuck .main-nav nav { min-height: 74px; }

.logo-area { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.logo-area img {
  width: 74px;
  height: 74px;
  object-fit: contain;
  border-radius: 12px;
  transform-origin: left center;
  transition: transform var(--d-card) var(--e-out);
}
header.is-stuck .logo-area img { transform: scale(0.82); }

.logo-area .brand-name {
  font-size: 20px;
  font-weight: 800;
  color: var(--black);
  letter-spacing: -0.4px;
  line-height: 1.1;
}
.logo-area .brand-name > span:not(.brand-sub) { color: var(--red); }
.logo-area .brand-name .brand-sub {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.nav-links { display: flex; align-items: center; gap: 4px; }

.nav-links a {
  display: block;
  padding: 10px 13px;
  border-radius: 999px;
  color: var(--black);
  font-size: 13.5px;
  font-weight: 600;
  transition: background 0.2s, color 0.2s;
}
.nav-links a:hover,
.nav-links a.active { background: var(--red); color: #fff; }

.nav-cta {
  flex-shrink: 0;
  padding: 12px 24px;
  font-size: 13.5px;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  padding: 12px 10px;
  flex-direction: column;
  justify-content: space-between;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--black);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.2s;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.nav-mobile {
  display: none;
  border-top: 1px solid var(--line);
  background: #fff;
  padding: 12px 0 20px;
}
.nav-mobile.is-open { display: block; }
.nav-mobile a {
  display: block;
  padding: 12px 4px;
  color: var(--black);
  font-size: 15px;
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.nav-mobile a.btn { border-bottom: 0; margin-top: 14px; color: #fff; text-align: center; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  /* Still fills the fold on short screens, but capped so it doesn't grow into
     a full-height billboard on tall ones. */
  min-height: 78vh;
  min-height: min(calc(100svh - 134px), 640px);
  display: flex;
  align-items: center;
  padding: 60px 0;
  background: #0a0a0a;
  overflow: hidden;
  isolation: isolate;
}

/* Parallax image layer — oversized so it can travel without exposing an edge.
   The scrim is angled rather than flat: heavy behind the copy on the left,
   nearly clear on the right so the gym photo actually reads. */
.hero::before {
  content: '';
  position: absolute;
  inset: -12% 0;
  z-index: 0;
  background: linear-gradient(100deg,
                rgba(8, 8, 8, 0.9) 0%,
                rgba(8, 8, 8, 0.78) 34%,
                rgba(8, 8, 8, 0.44) 62%,
                rgba(8, 8, 8, 0.3) 100%),
              url('images/hero.jpeg') center/cover no-repeat;
  transform: translate3d(0, var(--hero-shift, 0px), 0);
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle at 16% 42%, rgba(224, 43, 38, 0.16), transparent 48%);
  pointer-events: none;
}

/* .hero is a flex container, so .container would shrink-to-fit without this. */
.hero .container { position: relative; z-index: 3; width: 100%; }

/* ----- Ambient blurred orbs ----- */
.orbs { position: absolute; inset: 0; z-index: 1; pointer-events: none; contain: paint; }
.orb {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}
/* Kept low-opacity — these are ambient light, not a colour wash. Any higher
   and they flatten the gym photo behind them. */
.orb--red {
  width: 38vw; left: 6vw; top: -18vh; opacity: 0.3;
  background: radial-gradient(circle, #f4544e 0%, rgba(255,30,30,0.35) 55%, transparent 72%);
}
.orb--ember {
  width: 52vw; right: -12vw; top: -26%; opacity: 0.18;
  background: radial-gradient(circle, #f4544e 0%, rgba(255,122,47,0.28) 55%, transparent 72%);
}
.orb--deep {
  width: 46vw; left: 34vw; bottom: -30%; opacity: 0.2;
  background: radial-gradient(circle, #8f1512 0%, rgba(139,0,0,0.3) 55%, transparent 72%);
}

.hero-text { max-width: 720px; }

/* Glass pill rather than a solid red block — the red now reads as a single
   live dot, so the badge sits on the hero art instead of covering it. */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.92);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 16px 8px 13px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.hero-badge__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff3b30;
  box-shadow: 0 0 0 3px rgba(224, 43, 38, 0.22);
}
.hero-badge__sep {
  flex: none;
  width: 1px;
  height: 11px;
  background: rgba(255, 255, 255, 0.22);
}
.hero-badge__years { color: #fff; font-weight: 700; }
.hero-badge__city  { color: rgba(255, 255, 255, 0.72); }

.hero h1 {
  font-size: clamp(34px, 6vw, 62px);
  font-weight: 900;
  color: #fff;
  line-height: 1.08;
  letter-spacing: -1.5px;
  margin-bottom: 14px;
}
.hero h1 em { color: var(--red); font-style: normal; }

/* Masked line reveal — text slides out from behind a hard edge. */
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span { display: block; }

/* ----- Scroll-down indicator ----- */
.scroll-cue {
  position: absolute;
  left: 0; right: 0;
  bottom: 26px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: opacity var(--d-card) ease, transform var(--d-card) ease;
}
.scroll-cue.is-gone { opacity: 0; transform: translateY(12px); pointer-events: none; }
.scroll-cue .chev {
  width: 10px; height: 10px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.hero-tagline {
  font-size: clamp(15px, 2.2vw, 19px);
  color: #fff;
  font-style: italic;
  font-weight: 500;
  margin-bottom: 16px;
  opacity: 0.95;
}

.hero p.hero-desc {
  font-size: 15.5px;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 300;
  max-width: 620px;
  margin-bottom: 32px;
}

.hero-buttons { display: flex; gap: 14px; flex-wrap: wrap; }

/* ===== STATS ===== */
.stats-bar {
  background: var(--black);
  padding: 44px 0;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  text-align: center;
}
.stat-item h3 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  color: var(--red);
  line-height: 1.1;
  /* tabular figures stop the number jittering as digits change during count-up */
  font-variant-numeric: tabular-nums;
}
.stat-item p {
  font-size: 12.5px;
  color: #c6c6cd;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 4px;
  font-weight: 500;
}

/* ==========================================================================
   MARQUEE TICKER
   ========================================================================== */
.marquee-band {
  background: var(--red);
  padding: 16px 0;
  overflow: hidden;
  border-block: 1px solid rgba(255, 255, 255, 0.14);
}
.marquee-band + .marquee-band {
  background: var(--black);
  border-top: 0;
}

.marquee {
  overflow: hidden;
  --gap: 3rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track {
  display: flex;
  gap: var(--gap);
  width: max-content;
  animation: marquee var(--dur, 34s) linear infinite;
  will-change: transform;
}
.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee.is-paused .marquee__track { animation-play-state: paused; }

.marquee__set {
  display: flex;
  align-items: center;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.marquee__set li {
  display: flex;
  align-items: center;
  gap: var(--gap);
  color: #fff;
  font-size: clamp(15px, 2vw, 21px);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee__set li::after {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  flex-shrink: 0;
}
.marquee-band + .marquee-band .marquee__set li { color: #fff; font-weight: 700; }
.marquee-band + .marquee-band .marquee__set li::after { background: var(--red); }

@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ==========================================================================
   ABOUT
   ========================================================================== */
/* Blush wash that fades into the white page, so the section reads as its own
   block without a hard band edge against the section below. */
.section--about { background: linear-gradient(180deg, #fdf2f2 0%, #fff 72%); }

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 62px;
  align-items: stretch;
}

/* The photo sits on a tinted pad, which keeps a sliver of colour framing it
   at every column width. */
.about-media {
  position: relative;
  background: #f9e4e4;
  border-radius: 28px;
  padding: 18px;
}
.about-media img {
  width: 100%;
  height: 100%;
  min-height: 480px;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
}
.about-badge {
  position: absolute;
  right: -14px;
  bottom: 44px;
  background: var(--red);
  color: #fff;
  border-radius: 14px;
  padding: 16px 22px;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.about-badge strong { display: block; font-size: 30px; font-weight: 800; line-height: 1; }
.about-badge span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }

.about-text { align-self: center; }

/* Rule-and-label eyebrow — the left-aligned counterpart to the centred
   .section-tag used by the other sections. */
.about-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--red);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 14px;
}
.about-eyebrow::before {
  content: '';
  width: 32px;
  height: 3px;
  border-radius: 999px;
  background: var(--red);
}

.about-text h2 {
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 800;
  color: var(--black);
  letter-spacing: -1px;
  line-height: 1.15;
  margin-bottom: 18px;
}
.about-text p { color: var(--muted); font-size: 14.8px; margin-bottom: 16px; font-weight: 300; }
/* Needs .about-text to outweigh the element selector on the rule above. */
.about-text .about-lead {
  font-size: 16.5px;
  line-height: 1.75;
  font-weight: 400;
  color: #4a4a50;
}

.about-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 26px;
  margin-top: 26px;
}
/* Flex rather than an absolute ::before, so the tick stays put on items that
   wrap to a second line in the narrow two-column layout. */
.about-features li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.6;
  font-weight: 500;
}
.about-features li::before {
  content: '✓';
  flex: 0 0 24px;
  height: 24px;
  background: var(--red);
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  display: grid;
  place-items: center;
  font-weight: 700;
}

.mission-box {
  margin-top: 26px;
  border-left: 4px solid var(--red);
  background: var(--red-soft);
  padding: 16px 20px;
  border-radius: 0 12px 12px 0;
}
.mission-box strong { display: block; font-size: 13px; color: var(--red); text-transform: uppercase; letter-spacing: 0.08em; }
.mission-box p { margin: 4px 0 0; color: #3d3d42; font-size: 14px; }

.about-cta { margin-top: 28px; }

/* ==========================================================================
   PROGRAMS
   ========================================================================== */
/* Top padding on the grid, not the cards, so the step badges have room to
   overhang the first row without colliding with the section header. */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 54px 22px;
  padding-top: 34px;
}

.service-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 58px 26px 32px;
  text-align: center;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(224, 43, 38, 0.45);
  box-shadow: var(--shadow-lg);
}

/* Numbered badge straddling the card's top edge: a dotted halo ring around a
   solid gradient disc. */
.service-step {
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  width: 68px;
  height: 68px;
  padding: 6px;
  border-radius: 50%;
  background: #fdeaea;
  border: 2px dotted rgba(224, 43, 38, 0.4);
  transition: transform 0.25s;
}
.service-card:hover .service-step { transform: translateX(-50%) scale(1.06); }
.service-step span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--red), #a81a16);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 16px rgba(224, 43, 38, 0.3);
}

.service-label {
  display: inline-block;
  padding: 6px 15px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: var(--red-soft);
  color: var(--red);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.13em;
}
.service-card h3 { font-size: 19px; font-weight: 700; color: var(--black); margin-bottom: 10px; }
.service-card p { color: var(--muted); font-size: 13.8px; line-height: 1.75; font-weight: 300; }

/* ===== WHY CHOOSE US ===== */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* isolation:isolate gives the card its own stacking context so the cursor glow
   can sit at z-index -1 — over the card's background, under its content —
   instead of escaping behind it. */
.why-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 30px 24px 28px;
  text-align: left;
  box-shadow: 0 6px 18px rgba(17, 17, 17, 0.06);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.why-card:hover {
  border-color: rgba(224, 43, 38, 0.55);
  box-shadow: 0 14px 32px rgba(224, 43, 38, 0.14);
}

/* Filament of light draws across the top edge on hover. */
.why-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--red), #f4544e, transparent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.55s var(--e-out);
  pointer-events: none;
}
.why-card:hover::before { transform: scaleX(1); }

/* Outlined rather than filled, so the numeral stays texture and never
   competes with the heading. */
.why-num {
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(17, 17, 17, 0.16);
  transition: -webkit-text-stroke-color 0.35s ease, transform 0.35s var(--e-out);
  pointer-events: none;
}
.why-card:hover .why-num {
  -webkit-text-stroke-color: rgba(224, 43, 38, 0.7);
  transform: scale(1.1);
}

.why-card .why-icon {
  width: 54px; height: 54px;
  margin: 0 0 18px;
  background: linear-gradient(140deg, var(--red), #a81a16);
  border-radius: 16px;
  display: grid; place-items: center;
  box-shadow: 0 8px 18px rgba(224, 43, 38, 0.3);
  transition: box-shadow 0.35s ease;
}
.why-card:hover .why-icon { box-shadow: 0 12px 26px rgba(224, 43, 38, 0.45); }
.why-card .why-icon svg {
  width: 23px; height: 23px;
  stroke: #fff; fill: none; stroke-width: 2;
}

.why-card h4 { font-size: 15px; font-weight: 700; color: var(--black); }
.why-card p {
  font-size: 12.8px;
  color: var(--muted);
  font-weight: 300;
  margin-top: 6px;
}

/* ==========================================================================
   TRAINERS
   ========================================================================== */
.trainers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* The posters are 3:4 artwork that already carries each trainer's name and
   title, so the poster IS the card — no panel underneath repeating it. The
   text still ships in the DOM, revealed over the art on hover. Absolute
   positioning also means a two-line name can't stretch its row. */
.trainer-card {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 20px;
  overflow: hidden;
  background: #14110c;
  box-shadow: 0 10px 30px rgba(17, 17, 17, 0.14);
}
.trainer-card:hover { box-shadow: 0 22px 48px rgba(224, 43, 38, 0.3); }

/* Red rule along the bottom edge — the only resting-state cue that there is
   something to reveal. It hands off to the info panel on hover. */
.trainer-card::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  z-index: 2;
  background: linear-gradient(90deg, var(--red), #a81a16);
  transition: opacity 0.3s ease;
}
.trainer-card:hover::after { opacity: 0; }

.trainer-photo { position: absolute; inset: 0; overflow: hidden; }
.trainer-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform 0.5s var(--e-out);
}
.trainer-card:hover .trainer-photo img { transform: scale(1.05); }

/* Now a direct child of .trainer-card (which is the positioned ancestor), so
   it can be lifted out of flow here and dropped back into flow on mobile
   without the photo's overflow clipping it. */
.trainer-social {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.trainer-social a {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  display: grid; place-items: center;
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.3s ease, transform 0.4s var(--e-out), background 0.2s;
}
.trainer-card:hover .trainer-social a { opacity: 1; transform: none; }
.trainer-card:hover .trainer-social a:nth-child(2) { transition-delay: 70ms; }
.trainer-social a:hover { background: var(--red); }
.trainer-social svg { width: 15px; height: 15px; fill: var(--black); transition: fill 0.2s; }
.trainer-social a:hover svg { fill: #fff; }

.trainer-info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: 34px 18px 22px;
  text-align: center;
  /* Near-solid, with the fade confined to the top ~12% — the posters carry
     their own lettering, and a soft scrim let it bleed through the name. */
  background: linear-gradient(to top,
    rgba(8, 6, 5, 0.985) 0%,
    rgba(8, 6, 5, 0.965) 72%,
    rgba(8, 6, 5, 0.55) 91%,
    rgba(8, 6, 5, 0) 100%);
  transform: translateY(100%);
  transition: transform 0.45s var(--e-out);
}
.trainer-card:hover .trainer-info { transform: translateY(0); }

.trainer-info h3 { color: #fff; font-size: 18px; font-weight: 700; }
/* Gold picks up the lettering in the posters themselves. */
.trainer-info .designation {
  color: #f4544e; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; margin: 3px 0 9px;
}
.trainer-info .details { color: rgba(255, 255, 255, 0.66); font-size: 12.5px; font-weight: 300; line-height: 1.6; }
.trainer-badge {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 5px 15px;
  border-radius: 999px;
  margin-top: 12px;
}

/* No hover to reveal with — the panel just stays open on touch. */
/* Touch, or simply too narrow for an overlay: the hover reveal has no trigger
   and, forced open, the panel covered the poster and clipped the name. Stack
   instead — poster on top, details below in normal flow. */
@media (hover: none), (max-width: 760px) {
  /* Column flex so the info block can stretch and the badge + socials can be
     pinned to the bottom — otherwise cards with longer job titles push their
     badge lower than their neighbours' and the row looks ragged. */
  .trainer-card {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 8px 22px rgba(17, 17, 17, 0.1);
  }
  .trainer-photo { position: relative; inset: auto; aspect-ratio: 3 / 4; flex-shrink: 0; }

  .trainer-info {
    position: relative;
    inset: auto;
    transform: none;
    background: none;
    padding: 16px 14px 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .trainer-info h3 { color: var(--black); font-size: 16.5px; }
  .trainer-info .designation { color: var(--red); font-size: 10.5px; }
  .trainer-info .details { color: var(--muted); font-size: 12px; }
  /* margin-top:auto pins it to the bottom, so badges line up across the row. */
  .trainer-badge { font-size: 10px; padding: 5px 13px; margin-top: auto; align-self: center; }

  /* Back into flow, below the card — they were sitting on the poster and
     covering the trainer's face and name. */
  .trainer-social {
    position: static;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    padding: 0 14px 16px;
  }
  .trainer-social a {
    width: 32px; height: 32px;
    opacity: 1;
    transform: none;
    background: var(--red-soft);
    border: 1px solid rgba(224, 43, 38, 0.25);
  }
  .trainer-social svg { width: 14px; height: 14px; fill: var(--red); }
  .trainer-social a:hover svg { fill: #fff; }
  .trainer-card::after { opacity: 0; }
}

/* ==========================================================================
   MEMBERSHIP
   ========================================================================== */
.plan-toggle {
  display: flex;
  justify-content: center;
  gap: 4px;
  background: #f1f1f3;
  border: 1px solid var(--line);
  padding: 5px;
  border-radius: 999px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 44px;
}
.plan-toggle button {
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  padding: 10px 30px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, box-shadow 0.25s;
}
.plan-toggle button.is-active {
  background: linear-gradient(135deg, var(--red), #a81a16);
  color: #fff;
  box-shadow: 0 6px 16px rgba(224, 43, 38, 0.32);
}

/* Cards stretch to the tallest in the row — a pricing table with ragged
   bottoms reads as broken. */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

/* A lone plan card would sit in the first of three columns — centre it and
   cap the width so it reads as a deliberate single offer. */
.plans-grid.plans-grid--single {
  grid-template-columns: minmax(0, 400px);
  justify-content: center;
}

/* Lift and scale ride on custom properties so the featured card can stay
   scaled up while hovering — a plain `transform` on :hover would drop it. */
.plan-card {
  --lift: 0px;
  --scale: 1;
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 34px 28px 30px;
  display: flex;
  flex-direction: column;
  transform: translateY(var(--lift)) scale(var(--scale));
  transition: transform 0.3s var(--e-quart), box-shadow 0.3s, border-color 0.3s;
}
.plan-card:hover { --lift: -8px; box-shadow: var(--shadow-lg); }

/* Accent rule grows out from the top edge on hover. */
.plan-card::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: calc(100% - 64px);
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--red), #a81a16);
  transform: translateX(-50%) scaleX(0);
  transition: transform 0.45s var(--e-out);
  pointer-events: none;
}
.plan-card:hover::before { transform: translateX(-50%) scaleX(1); }

/* ----- Featured plan fills with the logo red so it reads as the
   recommendation. It used to be near-black, which vanished once this section
   moved onto the dark band. ----- */
.plan-card.is-featured {
  --scale: 1.045;
  z-index: 2;
  background: linear-gradient(160deg, var(--red) 0%, #a81a16 58%, #7a120f 100%);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 26px 58px rgba(224, 43, 38, 0.42);
}
.plan-card.is-featured h3 { color: #fff; }
.plan-card.is-featured .plan-duration { color: rgba(255, 255, 255, 0.62); }
.plan-card.is-featured .plan-price .cur { color: rgba(255, 255, 255, 0.8); }
.plan-card.is-featured .plan-price .amt { color: #fff; }
.plan-card.is-featured .plan-note { color: rgba(255, 255, 255, 0.7); }
.plan-card.is-featured .plan-features { border-top-color: rgba(255, 255, 255, 0.2); }
.plan-card.is-featured .plan-features li { color: rgba(255, 255, 255, 0.92); }
.plan-card.is-featured .plan-features li::before {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.plan-card.is-featured .plan-flag { background: #fff; color: var(--red); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28); }
.plan-card.is-featured::before { background: rgba(255, 255, 255, 0.55); }

.plan-card .plan-flag {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--red), #a81a16);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(224, 43, 38, 0.42);
}

.plan-card h3 { font-size: 20px; font-weight: 700; color: var(--black); }
.plan-card .plan-duration {
  font-size: 11.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 600;
  margin-bottom: 18px;
}
.plan-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 4px;
}
.plan-price .cur { font-size: 21px; font-weight: 700; color: var(--red); }
.plan-price .amt { font-size: 44px; font-weight: 800; color: var(--black); line-height: 1; letter-spacing: -1.8px; }
.plan-note { font-size: 12.5px; color: var(--muted); margin-bottom: 22px; }

.plan-features {
  flex: 1;
  margin-bottom: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.plan-card.is-featured .plan-features { border-top-color: rgba(255, 255, 255, 0.12); }

/* Flex rather than an absolute ::before, so the tick holds position on
   features that wrap to a second line. */
.plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 13.3px;
  color: #45454b;
  padding: 7px 0;
  font-weight: 400;
  line-height: 1.55;
}
.plan-features li::before {
  content: '✓';
  flex: 0 0 19px;
  height: 19px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--red-soft);
  color: var(--red);
  display: grid;
  place-items: center;
  font-size: 10.5px;
  font-weight: 700;
}

.plan-disclaimer {
  text-align: center;
  margin-top: 30px;
  font-size: 13px;
  color: var(--muted);
}
.plan-disclaimer strong { color: var(--red); }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.author-avatar {
  width: 42px; height: 42px;
  background: var(--red-soft);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--red);
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}

/* ----- Testimonials carousel -----
   A scroll-snap track rather than a slider library: native swipe on touch,
   keyboard-scrollable, and the arrows just page it by one track-width. */
/* Side gutters wide enough to hold the arrows clear of the track, so they
   never sit over a card. */
.t-carousel { position: relative; padding-inline: 62px; }

.t-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 44px) / 3);
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 8px 2px 12px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.t-track::-webkit-scrollbar { display: none; }
.t-track:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; border-radius: var(--radius); }

.t-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 6px 18px rgba(17, 17, 17, 0.12);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, opacity 0.2s;
}
.t-nav svg { width: 20px; height: 20px; fill: none; stroke: var(--red); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.t-nav:hover { background: var(--red); border-color: var(--red); }
.t-nav:hover svg { stroke: #fff; }
.t-nav.prev { left: 0; }
.t-nav.next { right: 0; }
/* Kept in the layout when spent, so the track never shifts sideways. */
.t-nav:disabled { opacity: 0.32; cursor: default; }
.t-nav:disabled:hover { background: #fff; border-color: var(--line); }
.t-nav:disabled:hover svg { stroke: var(--red); }

.t-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 26px 24px;
  position: relative;
  scroll-snap-align: start;
  box-shadow: var(--shadow);
}

.t-head { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.t-head h4 { color: var(--black); font-size: 15.5px; font-weight: 700; }
/* Avatar tint cycles so a row of identical initials still reads as three
   different people. */
.t-card:nth-child(3n + 1) .author-avatar { background: var(--red); color: #fff; }
.t-card:nth-child(3n + 2) .author-avatar { background: var(--black); color: #fff; }
.t-card:nth-child(3n + 3) .author-avatar { background: #a81a16; color: #fff; }

.t-stars { color: #f5a623; font-size: 15px; letter-spacing: 2px; margin-bottom: 12px; }
.t-card p { color: #45454b; font-size: 13.8px; line-height: 1.8; font-weight: 300; margin-bottom: 18px; }
.t-meta {
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

/* ==========================================================================
   EVENTS
   ========================================================================== */
.events-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

.event-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(224, 43, 38, 0.4);
  border-radius: 20px;
  padding: 28px 28px 26px 34px;
  display: flex;
  gap: 22px;
  align-items: flex-start;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s var(--e-quart);
}
.event-card:hover {
  border-color: rgba(224, 43, 38, 0.7);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

/* Spine is part of the resting look, not a hover reveal. */
.event-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, var(--red), #a81a16);
}

/* Dark tile so the date reads as a fixture even while it says TBA. */
.event-date {
  background:
    radial-gradient(120px 80px at 50% 0%, rgba(224, 43, 38, 0.55), transparent 72%),
    linear-gradient(160deg, #1a1519, #121016);
  color: #fff;
  border-radius: 16px;
  padding: 16px 14px;
  text-align: center;
  min-width: 86px;
  flex-shrink: 0;
  box-shadow: 0 10px 22px rgba(17, 17, 17, 0.22);
}
.event-date .day { font-size: 24px; font-weight: 800; line-height: 1.1; letter-spacing: -0.5px; }
.event-date .month {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.6); margin-top: 3px;
}

/* Live-dot chip — makes "no date yet" read as pending rather than missing. */
.event-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--red-soft);
  color: var(--red);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 5px 13px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.event-status::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--red);
  animation: event-pulse 2.2s ease-in-out infinite;
}
@keyframes event-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 43, 38, 0.55); }
  70%      { box-shadow: 0 0 0 6px rgba(224, 43, 38, 0); }
}

.event-details h3 { color: var(--black); font-size: 17.5px; font-weight: 700; margin-bottom: 6px; }
.event-details p { color: var(--muted); font-size: 13.2px; font-weight: 300; line-height: 1.7; }

.event-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 15px;
  color: var(--red);
  font-size: 13px;
  font-weight: 600;
}
.event-link span { transition: transform 0.25s var(--e-out); }
.event-card:hover .event-link span { transform: translateX(4px); }

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.gallery-item {
  height: 235px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--line);
  cursor: pointer;
  position: relative;
  background: #eee;
  padding: 0;
  display: block;
  width: 100%;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s; }
.gallery-item::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(224, 43, 38, 0);
  transition: background 0.3s;
}
.gallery-item:hover img { transform: scale(1.09); }
.gallery-item:hover::after { background: rgba(224, 43, 38, 0.18); }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 30px;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 86vh; border-radius: 10px; object-fit: contain; }
.lightbox__close,
.lightbox__nav {
  position: absolute;
  background: rgba(255,255,255,0.14);
  border: 0;
  color: #fff;
  width: 46px; height: 46px;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background 0.2s;
}
.lightbox__close:hover, .lightbox__nav:hover { background: var(--red); }
.lightbox__close { top: 24px; right: 24px; }
.lightbox__nav.prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox__nav.next { right: 24px; top: 50%; transform: translateY(-50%); }

/* ==========================================================================
   FAQ
   ========================================================================== */
/* Full container width — the old 840px cap left a wide empty margin either
   side that read as a layout gap rather than a deliberate measure.
   The counter numbers each row without needing markup for it. */
.faq-list { max-width: none; margin: 0 auto; counter-reset: faq; }

.faq-item {
  counter-increment: faq;
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  margin-bottom: 14px;
  overflow: hidden;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.faq-item:hover { border-color: rgba(224, 43, 38, 0.32); box-shadow: 0 8px 22px rgba(17, 17, 17, 0.07); }
.faq-item.is-open {
  border-color: rgba(224, 43, 38, 0.45);
  background: linear-gradient(180deg, #fdf3f3, #fff 62%);
  box-shadow: 0 12px 30px rgba(224, 43, 38, 0.1);
}

/* Spine on the open row. */
.faq-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--red), #a81a16);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.35s var(--e-out);
}
.faq-item.is-open::before { transform: scaleX(1); }

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--black);
  padding: 20px 70px 20px 24px;
  cursor: pointer;
  position: relative;
  transition: color 0.25s;
}
.faq-item.is-open .faq-q { color: var(--red); }

/* Numeral chip, drawn from the counter above. */
.faq-q::before {
  content: counter(faq, decimal-leading-zero);
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--red);
  background: var(--red-soft);
  padding: 5px 10px;
  border-radius: 8px;
  transition: background 0.25s, color 0.25s;
}
.faq-item.is-open .faq-q::before { background: var(--red); color: #fff; }

/* Circular toggle. The chevron is an inline SVG data URI so the same
   pseudo-element can carry both the disc and the glyph. */
.faq-q::after {
  content: '';
  position: absolute;
  right: 22px; top: 50%;
  width: 34px; height: 34px;
  margin-top: -17px;
  border-radius: 50%;
  background-color: var(--red-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e02b26' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-position: center;
  background-size: 13px;
  background-repeat: no-repeat;
  transition: transform var(--d-card) var(--e-out), background-color 0.25s;
}
.faq-item.is-open .faq-q::after {
  transform: rotate(180deg);
  background-color: var(--red);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* grid-template-rows 0fr → 1fr animates to auto height without measuring. */
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--d-card) var(--e-out);
  contain: layout paint;
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a > .faq-a__inner { overflow: hidden; min-height: 0; }
/* Indented to line up under the question text, past the numeral chip. */
.faq-a p {
  padding: 0 70px 22px 74px;
  color: var(--muted);
  font-size: 14.2px;
  line-height: 1.8;
  font-weight: 300;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--d-base) ease 60ms, transform var(--d-base) ease 60ms;
}
.faq-item.is-open .faq-a p { opacity: 1; transform: none; }
.faq-a p strong { color: var(--ink); font-weight: 600; }

.faq-cta {
  margin-top: 30px;
  padding: 22px 30px;
  border-radius: 16px;
  border: 1px solid rgba(224, 43, 38, 0.18);
  background: linear-gradient(135deg, #fdf2f2, #fff 70%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.faq-cta p { color: var(--ink); font-size: 15px; font-weight: 500; }
.faq-cta p span { display: block; color: var(--muted); font-size: 13px; font-weight: 300; margin-top: 3px; }

/* ==========================================================================
   CTA BAND
   ========================================================================== */
/* A contained panel rather than a full-bleed band — it reads as a deliberate
   closing card instead of another background stripe. The band behind it is a
   deeper black than the panel, so the card still lifts off it. */
.cta-section { padding: 44px 0 54px; background: #fdf2f2; }

.cta-panel {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  padding: 48px 40px 46px;
  text-align: center;
  background:
    radial-gradient(620px 300px at 50% -18%, rgba(224, 43, 38, 0.42), transparent 70%),
    linear-gradient(140deg, #1c1418 0%, #14111a 55%, #2b0f14 100%);
  box-shadow: 0 26px 60px rgba(17, 17, 17, 0.32);
}

/* Concentric rings, top-right. Positioned pseudo-elements paint above in-flow
   content, so the panel's children are lifted to z-index 1 below. */
.cta-panel::before,
.cta-panel::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
.cta-panel::before { width: 340px; height: 340px; top: -76px; right: -66px; }
.cta-panel::after {
  width: 208px; height: 208px; top: -10px; right: 0;
  background: rgba(255, 255, 255, 0.028);
}
.cta-panel > * { position: relative; z-index: 1; }

.cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #f4544e;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 14px;
}
.cta-eyebrow::before {
  content: '';
  width: 32px; height: 3px;
  border-radius: 999px;
  background: #f4544e;
}

.cta-section h2 { font-size: clamp(26px, 4vw, 38px); font-weight: 800; color: #fff; margin-bottom: 12px; letter-spacing: -0.6px; }
.cta-section p { color: rgba(255, 255, 255, 0.72); font-size: 15.5px; margin-bottom: 32px; font-weight: 300; }
.cta-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Gradient pills for the two conversion actions… */
.btn--grad {
  background: linear-gradient(100deg, #a81a16, var(--red));
  color: #fff;
  box-shadow: 0 12px 28px rgba(224, 43, 38, 0.45);
}
.btn--grad:hover { background: linear-gradient(100deg, var(--red), #a81a16); transform: translateY(-2px); }

/* Was amber — the only off-logo fill left on the page. Now a lighter tint of
   the logo red, so it still reads as the second action without a new hue. */
.btn--grad-warm {
  background: linear-gradient(100deg, #f4544e, var(--red));
  color: #fff;
  box-shadow: 0 12px 28px rgba(244, 84, 78, 0.42);
}
.btn--grad-warm:hover { background: linear-gradient(100deg, var(--red), #a81a16); transform: translateY(-2px); }

/* …and quieter glass pills for the two contact shortcuts, so the hierarchy
   survives having four buttons instead of two. */
.btn--glass {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.24);
  color: #fff;
}
.btn--glass:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.45);
  transform: translateY(-2px);
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
/* One card split down the middle: dark details panel butted against the white
   form, no gutter between them. */
.contact-split {
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  border-radius: 26px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}

.contact-aside {
  position: relative;
  overflow: hidden;
  padding: 34px 34px;
  color: #fff;
  background:
    radial-gradient(420px 260px at 8% 0%, rgba(224, 43, 38, 0.42), transparent 70%),
    linear-gradient(165deg, #1c1418 0%, #14111a 55%, #2b0f14 100%);
}
/* Dot texture, fading out down the panel. Decorative, so content is lifted. */
.contact-aside::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.075) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
          mask-image: linear-gradient(180deg, #000, transparent 85%);
  pointer-events: none;
}
.contact-aside > * { position: relative; z-index: 1; }

.contact-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #f4544e;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 12px;
}
.contact-eyebrow::before {
  content: '';
  width: 26px; height: 3px;
  border-radius: 999px;
  background: currentColor;
}
.contact-eyebrow--dark { color: var(--red); }

.contact-aside h3 { color: #fff; font-size: 27px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.2; margin-bottom: 12px; }
.contact-intro { color: rgba(255, 255, 255, 0.62); font-size: 13.8px; font-weight: 300; line-height: 1.75; margin-bottom: 22px; }

.contact-item { display: flex; align-items: center; gap: 14px; padding: 9px 0; }

.contact-icon {
  width: 44px; height: 44px;
  background: linear-gradient(140deg, var(--red), #a81a16);
  border-radius: 13px;
  display: grid; place-items: center;
  flex-shrink: 0;
  box-shadow: 0 8px 18px rgba(224, 43, 38, 0.35);
}
.contact-icon svg { width: 19px; height: 19px; stroke: #fff; fill: none; stroke-width: 2; }

/* Label quiet, value prominent — the value is what people came for. */
.contact-item-text h4 {
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}
.contact-item-text p, .contact-item-text a {
  color: #fff;
  font-size: 13.8px;
  font-weight: 600;
  line-height: 1.55;
  display: block;
}
.contact-item-text a:hover { color: #f4544e; }

.contact-social { display: flex; gap: 10px; margin-top: 24px; }
.contact-social a {
  width: 38px; height: 38px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: grid; place-items: center;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.contact-social a:hover { background: var(--red); border-color: var(--red); transform: translateY(-2px); }
.contact-social svg { width: 16px; height: 16px; fill: #fff; }

.contact-form { background: #fff; padding: 34px 36px; }
.contact-form h3 { color: var(--black); font-size: 27px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 8px; }
.contact-form .form-sub { color: var(--muted); font-size: 13.8px; font-weight: 300; margin-bottom: 26px; }

/* Full width under the card — it was squeezed into the left column before,
   which left a large dead area beneath it. */
.map-embed {
  margin-top: 30px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.map-embed iframe { width: 100%; height: 380px; border: 0; display: block; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-group { margin-bottom: 11px; }
.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #3d3d42;
  margin-bottom: 5px;
}
.form-group label .req { color: var(--red); }

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  background: #fafafb;
  border: 1px solid #dedee2;
  border-radius: 10px;
  padding: 10px 13px;
  color: var(--ink);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 400;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--red); background: #fff; }
.form-group textarea { height: 68px; resize: vertical; }

.form-consent { font-size: 11.8px; color: var(--muted); margin-top: 10px; text-align: center; }
.form-consent a { color: var(--red); }
.form-note { font-size: 13px; color: #157a3a; margin-top: 12px; text-align: center; font-weight: 500; }

/* ==========================================================================
   LEGAL MODAL
   ========================================================================== */
.legal-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px;
}
.legal-modal[hidden] { display: none; }

.legal-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 10, 0.72);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--d-base) ease;
}
.legal-modal.is-open .legal-modal__backdrop { opacity: 1; }

.legal-modal__panel {
  position: relative;
  width: min(860px, 100%);
  /* Definite height, so the iframe's calc() below has something to resolve
     against. svh rather than vh — iOS's toolbars make vh unreliable. */
  height: min(80vh, 720px);
  height: min(80svh, 720px);
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: opacity var(--d-base) ease, transform var(--d-card) var(--e-out);
}
.legal-modal.is-open .legal-modal__panel { opacity: 1; transform: none; }

/* Fixed height, because the iframe's height is calc'd against it. */
.legal-modal__bar {
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
}
.legal-modal__bar h3 { font-size: 17px; font-weight: 700; color: var(--black); }

.legal-modal__close {
  width: 36px; height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--red-soft);
  color: var(--red);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}
.legal-modal__close:hover { background: var(--red); color: #fff; }

/* Explicit height rather than flex:1 — iOS Safari ignores CSS height on
   iframes when it has to derive one, and sizes them to their content instead,
   which collapsed this to nothing. calc() against the panel's definite height
   works everywhere. */
.legal-modal iframe {
  width: 100%;
  height: calc(100% - 62px);
  border: 0;
  display: block;
  background: #fff;
}

@media (max-width: 560px) {
  .legal-modal { padding: 12px; }
  .legal-modal__panel { height: min(88svh, 720px); border-radius: 16px; }
  .legal-modal__bar { height: 54px; padding: 0 14px; }
  .legal-modal__bar h3 { font-size: 15px; }
  .legal-modal iframe { height: calc(100% - 54px); }
}

body.legal-open { overflow: hidden; }

/* Set by the legal pages when they detect they're inside the modal iframe. */
.is-embedded header,
.is-embedded footer,
.is-embedded .float-actions { display: none; }
.is-embedded .legal-page { padding-top: 22px; }
.is-embedded .legal-page h1 { margin-top: 0; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer {
  position: relative;
  background: #0b0b0c;
  padding: 44px 0 24px;
  color: #c6c6cd;
  overflow: hidden;   /* clips the glow — so the CTA panel must sit inside, not overhang */
  isolation: isolate;
}

/* Ambient red glow behind the footer, bleeding off-canvas so it reads as
   light rather than a decorative shape. */
.footer-glow {
  position: absolute;
  z-index: 0;
  top: -30%;
  left: 50%;
  width: min(1100px, 120vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 43, 38, 0.28) 0%, rgba(224, 43, 38, 0.08) 45%, transparent 68%);
  filter: blur(70px);
  pointer-events: none;
}
footer .container { position: relative; z-index: 1; }

/* ----- CTA panel ----- */
.footer-cta {
  position: relative;
  margin-bottom: 40px;
  padding: 30px clamp(24px, 4vw, 52px);
  border-radius: 22px;
  background: linear-gradient(135deg, var(--red) 0%, #a81a16 55%, #6b100d 100%);
  box-shadow: 0 24px 60px -18px rgba(224, 43, 38, 0.55);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  overflow: hidden;
}
.footer-cta::before {
  content: '';
  position: absolute;
  top: -70%; right: -6%;
  width: 380px; aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
.footer-cta__text { position: relative; max-width: 560px; }
.footer-cta__tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 4px 13px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.footer-cta h3 {
  color: #fff;
  font-size: clamp(21px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.2;
}
.footer-cta p {
  color: rgba(255, 255, 255, 0.86);
  font-size: 14.5px;
  font-weight: 300;
  margin-top: 8px;
}
.footer-cta__actions { position: relative; display: flex; gap: 12px; flex-wrap: wrap; }

/* ----- Main grid ----- */
.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.35fr;
  gap: 40px;
  padding-bottom: 32px;
}

.footer-brand__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.footer-brand .footer-logo {
  width: 66px; height: 66px;
  object-fit: contain;
  border-radius: 14px;
  background: #fff;
  padding: 5px;
  flex-shrink: 0;
}
.footer-brand__name {
  font-size: 19px;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.3px;
}
.footer-brand__name em { color: var(--red); font-style: normal; }
.footer-brand__name > span {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a6a6ae;
  margin-top: 3px;
}
.footer-brand p {
  color: #c6c6cd;
  font-size: 13.2px;
  font-weight: 300;
  line-height: 1.8;
  max-width: 330px;
}
.footer-brand .tagline {
  /* The base red only reaches ~4:1 on the near-black footer; this tint clears
     the small-text threshold. */
  color: #f4544e;
  font-style: italic;
  font-size: 12.5px;
  margin-top: 10px;
  font-weight: 400;
}

/* ----- Social pills ----- */
.footer-social { display: flex; gap: 10px; margin-top: 20px; }
.footer-social a {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: background var(--d-base) ease, border-color var(--d-base) ease,
              transform var(--d-base) var(--e-out);
}
.footer-social a:hover {
  background: var(--red);
  border-color: var(--red);
  transform: translateY(-3px);
}
.footer-social svg { width: 16px; height: 16px; fill: #fff; }

/* ----- Link columns ----- */
.footer-col h4 {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 18px;
  position: relative;
  padding-bottom: 11px;
}
.footer-col h4::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 26px; height: 3px;
  border-radius: 999px;
  background: var(--red);
}
/* Scoped away from .footer-contact — those rows are icon + text, not a link
   list, and must not inherit the inline-block / hover-arrow treatment. */
.footer-col ul:not(.footer-contact) li { margin-bottom: 11px; }
.footer-col ul:not(.footer-contact) li a {
  color: #c6c6cd;
  font-size: 13.2px;
  font-weight: 300;
  display: inline-block;
  position: relative;
  padding-left: 0;
  transition: color var(--d-base) ease, padding-left var(--d-base) var(--e-out);
}
/* Arrow slides in from the left on hover */
.footer-col ul:not(.footer-contact) li a::before {
  content: '›';
  position: absolute;
  left: 0;
  opacity: 0;
  color: var(--red);
  font-size: 15px;
  line-height: 1.3;
  transition: opacity var(--d-base) ease;
}
.footer-col ul:not(.footer-contact) li a:hover { color: #fff; padding-left: 15px; }
.footer-col ul:not(.footer-contact) li a:hover::before { opacity: 1; }

/* ----- Visit Us column ----- */
.footer-contact li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.footer-contact svg {
  width: 17px; height: 17px;
  stroke: var(--red);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
  margin-top: 3px;
}
.footer-contact span {
  color: #c6c6cd;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.65;
}
.footer-contact span a {
  display: block;
  color: #c6c6cd;
  transition: color var(--d-base) ease;
}
.footer-contact span a:hover { color: var(--red); }

/* ----- Bottom bar ----- */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-bottom p { color: #a6a6ae; font-size: 12.2px; font-weight: 300; }
.footer-bottom .legal-links a {
  color: #a6a6ae;
  font-size: 12.2px;
  margin-left: 18px;
  transition: color var(--d-base) ease;
}
.footer-bottom .legal-links a:hover { color: var(--red); }

/* ==========================================================================
   FLOATING ACTIONS
   ========================================================================== */
.float-actions {
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 950;
}
.float-actions a, .float-actions button {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 0;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0,0,0,0.22);
  transition: transform 0.2s;
}
.float-actions a:hover, .float-actions button:hover { transform: translateY(-3px); }
.float-wa { background: #25d366; }
.float-call { background: var(--red); }
.float-actions .float-top { background: var(--black); display: none; }
.float-actions .float-top.is-visible { display: grid; }
.float-actions svg { width: 24px; height: 24px; fill: #fff; }
.float-top svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.4; }

/* ==========================================================================
   LEGAL PAGES
   ========================================================================== */
.legal-page { padding: 70px 0 90px; }
.legal-page .container { max-width: 880px; }
.legal-page h1 { font-size: clamp(26px, 4vw, 36px); font-weight: 800; color: var(--black); margin-bottom: 8px; }
.legal-page .updated { color: var(--muted); font-size: 13px; margin-bottom: 32px; }
.legal-page h2 { font-size: 19px; font-weight: 700; color: var(--black); margin: 30px 0 10px; }
.legal-page p, .legal-page li { color: #45454b; font-size: 14.5px; font-weight: 300; margin-bottom: 10px; }
.legal-page ul { padding-left: 22px; list-style: disc; }
.legal-page a { color: var(--red); }

/* ==========================================================================
   MOTION SYSTEM
   Everything here is opt-IN: the safe, static state is the default, and motion
   is only layered on inside `prefers-reduced-motion: no-preference`. If JS
   fails or motion is unwelcome, content is still fully visible.
   ========================================================================== */

/* Safe defaults — never hide content outside the motion block. */
[data-reveal], .reveal { opacity: 1; translate: none; scale: none; }

@media (prefers-reduced-motion: no-preference) {

  /* ----- Scroll reveals -----
     These use the independent `translate` / `scale` properties rather than
     `transform`, so a card's reveal and its hover lift can never overwrite
     each other. --t-reveal is shared so any element that needs its own
     `transition` (cards, which also animate transform on hover) can compose
     it in rather than clobbering it. */
  [data-reveal], .reveal {
    opacity: 0;
    transition: var(--t-reveal);
  }
  [data-reveal="up"],   .reveal { translate: 0 40px; }
  [data-reveal="down"]          { translate: 0 -32px; }
  [data-reveal="left"]          { translate: 48px 0; }
  [data-reveal="right"]         { translate: -48px 0; }
  [data-reveal="scale"]         { scale: .94; }
  [data-reveal="blur"]          { translate: 0 28px; filter: blur(10px); }

  [data-reveal].is-visible, .reveal.is-visible {
    opacity: 1;
    translate: none;
    scale: none;
    filter: none;
  }

  /* ----- Hero entrance ----- */
  .hero h1 .line > span {
    transform: translateY(110%);
    opacity: 0;
    transition: transform 900ms var(--e-expo), opacity 500ms linear;
  }
  .hero-badge,
  .hero-tagline,
  .hero .hero-desc,
  .hero-buttons,
  .scroll-cue {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity var(--d-media) ease-out, transform var(--d-hero) var(--e-out);
  }

  .ready .hero h1 .line > span { transform: translateY(0); opacity: 1; }
  .ready .hero-badge,
  .ready .hero-tagline,
  .ready .hero .hero-desc,
  .ready .hero-buttons,
  .ready .scroll-cue { opacity: 1; transform: none; }

  .ready .hero-badge                 { transition-delay: 80ms; }
  .ready .hero h1 .line:nth-child(1) > span { transition-delay: 180ms; }
  .ready .hero h1 .line:nth-child(2) > span { transition-delay: 270ms; }
  .ready .hero h1 .line:nth-child(3) > span { transition-delay: 360ms; }
  .ready .hero-tagline               { transition-delay: 520ms; }
  .ready .hero .hero-desc            { transition-delay: 620ms; }
  .ready .hero-buttons               { transition-delay: 720ms; }
  .ready .scroll-cue                 { transition-delay: 950ms; }

  /* Slow halo pulse on the badge dot — a heartbeat, not a blink. */
  .hero-badge__dot { animation: badge-pulse 2.4s ease-out infinite; }
  @keyframes badge-pulse {
    0%       { box-shadow: 0 0 0 0 rgba(224, 43, 38, 0.5); }
    70%      { box-shadow: 0 0 0 7px rgba(224, 43, 38, 0); }
    100%     { box-shadow: 0 0 0 0 rgba(224, 43, 38, 0); }
  }

  .scroll-cue .chev { animation: cue-nudge 1.8s cubic-bezier(.4, 0, .2, 1) infinite; }
  @keyframes cue-nudge {
    0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: .55; }
    50%      { transform: rotate(45deg) translate(4px, 4px); opacity: 1; }
  }

  /* ----- Drifting orbs. Mismatched durations so the loops never sync. ----- */
  .orb--red   { animation: drift 26s ease-in-out infinite; }
  .orb--ember { animation: drift 34s ease-in-out infinite reverse; animation-delay: -8s; }
  .orb--deep  { animation: drift 41s ease-in-out infinite; animation-delay: -19s; }
  @keyframes drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    33%  { transform: translate3d(4vw, -3vh, 0) scale(1.08); }
    66%  { transform: translate3d(-3vw, 4vh, 0) scale(.95); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
  }

  /* ----- Card lift. Small things scale more, large things scale less. -----
     --t-reveal is composed in first so these cards keep their staggered
     reveal as well as their hover transition. */
  .service-card, .why-card, .trainer-card, .plan-card, .t-card, .event-card {
    transition: var(--t-reveal),
                transform var(--d-card) var(--e-quart),
                box-shadow var(--d-card) ease,
                background-color var(--d-card) ease,
                border-color var(--d-base) ease;
  }
  /* .plan-card is absent on purpose — it drives its lift through --lift so the
     featured card keeps its scale while hovered. */
  .service-card:hover {
    transform: translateY(-7px);
  }
  .trainer-card:hover { transform: translateY(-6px); }
  .why-card:hover     { transform: translateY(-5px); }

  /* Media zoom is deliberately slower than the card lift — that offset
     creates a sense of parallax inside the card. */
  .trainer-photo img, .gallery-item img, .about-media img {
    transition: transform var(--d-media) var(--e-out);
  }
  .trainer-card:hover .trainer-photo img { transform: scale(1.06); }
  .gallery-item:hover img { transform: scale(1.09); }

  /* Program icon reacts on hover */
  .service-icon {
    transition: transform var(--d-base) var(--e-back), background-color var(--d-base) ease;
  }
  .service-card:hover .service-icon {
    transform: translateY(-3px) rotate(-8deg);
    background: rgba(224, 43, 38, 0.16);
  }
  /* Re-declares the base transition too — a bare `transition: transform`
     here would drop the icon's colour fade set in the WHY CHOOSE US block. */
  .why-card .why-icon {
    transition: transform var(--d-base) var(--e-back),
                background 0.35s ease,
                box-shadow 0.35s ease;
  }
  .why-card:hover .why-icon { transform: scale(1.1) rotate(-6deg); }

  /* ----- Button shine sweep. Sits above the fill and sweeps across the label. ----- */
  .btn { position: relative; overflow: hidden; }
  .btn::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 60%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.42), transparent);
    transform: translateX(-180%) skewX(-20deg);
    transition: transform 650ms var(--e-out);
    pointer-events: none;
    z-index: 1;
  }
  .btn:hover::before, .btn:focus-visible::before { transform: translateX(260%) skewX(-20deg); }
  .btn--ghost::before, .btn--light::before {
    background: linear-gradient(100deg, transparent, rgba(224, 43, 38, 0.18), transparent);
  }

  /* Ripple, injected by JS on pointerdown */
  .ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: rgba(255, 255, 255, 0.4);
    pointer-events: none;
    z-index: 1;
    animation: ripple 550ms var(--e-out) forwards;
  }
  .btn--ghost .ripple, .btn--light .ripple { background: rgba(224, 43, 38, 0.24); }
  @keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

  /* Underline draws in with the section reveal */
  .section-header h2::after { transform: translateX(-50%) scaleX(0); }
  .section-header.is-visible h2::after { transform: translateX(-50%) scaleX(1); }

  /* ----- Float action buttons pulse gently ----- */
  .float-wa { animation: wa-pulse 2.6s ease-in-out infinite; }
  @keyframes wa-pulse {
    0%, 100% { box-shadow: 0 8px 22px rgba(0,0,0,0.22), 0 0 0 0 rgba(37, 211, 102, 0.5); }
    70%      { box-shadow: 0 8px 22px rgba(0,0,0,0.22), 0 0 0 14px rgba(37, 211, 102, 0); }
  }
}

/* Magnetic hover and cursor glow only bind on true pointer devices. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-magnetic] { will-change: transform; }

  .service-card, .plan-card, .why-card { --mx: 50%; --my: 50%; }
  .service-card::after, .plan-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(320px circle at var(--mx) var(--my), rgba(224, 43, 38, 0.09), transparent 62%);
    opacity: 0;
    transition: opacity var(--d-card) ease;
    pointer-events: none;
  }
  .service-card, .plan-card { position: relative; }
  .service-card:hover::after, .plan-card:hover::after { opacity: 1; }

  /* .why-card needs its own rule rather than joining the group above: z-index
     -1 puts the glow under the card's text (it isolates, so it can't sink any
     further), which the group's default stacking doesn't do. */
  .why-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(240px circle at var(--mx) var(--my), rgba(224, 43, 38, 0.13), transparent 64%);
    opacity: 0;
    transition: opacity var(--d-card) ease;
    pointer-events: none;
  }
  .why-card:hover::after { opacity: 1; }
}

/* ==========================================================================
   AMBIENT ICON MOTION
   Always running, not hover-gated. Deliberately small and slow — these play
   continuously, so anything larger reads as a page that won't sit still.
   Each grid is staggered with negative delays so the icons start mid-cycle
   and never move in unison. The reduced-motion backstop below stops them all.
   ========================================================================== */
@keyframes icon-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes icon-glow {
  0%, 100% { box-shadow: 0 8px 18px rgba(224, 43, 38, 0.28); }
  50%      { box-shadow: 0 13px 26px rgba(224, 43, 38, 0.5); }
}
@keyframes ring-spin {
  to { transform: rotate(360deg); }
}

/* Why Us — the glyph bobs inside its tile rather than the tile itself, so it
   can't fight the hover scale/rotate applied to .why-icon. */
.why-card .why-icon svg { animation: icon-bob 4.6s ease-in-out infinite; }
.why-card .why-icon { animation: icon-glow 4.6s ease-in-out infinite; }
.why-grid > :nth-child(2) .why-icon, .why-grid > :nth-child(2) .why-icon svg { animation-delay: -0.55s; }
.why-grid > :nth-child(3) .why-icon, .why-grid > :nth-child(3) .why-icon svg { animation-delay: -1.1s; }
.why-grid > :nth-child(4) .why-icon, .why-grid > :nth-child(4) .why-icon svg { animation-delay: -1.65s; }
.why-grid > :nth-child(5) .why-icon, .why-grid > :nth-child(5) .why-icon svg { animation-delay: -2.2s; }
.why-grid > :nth-child(6) .why-icon, .why-grid > :nth-child(6) .why-icon svg { animation-delay: -2.75s; }
.why-grid > :nth-child(7) .why-icon, .why-grid > :nth-child(7) .why-icon svg { animation-delay: -3.3s; }
.why-grid > :nth-child(8) .why-icon, .why-grid > :nth-child(8) .why-icon svg { animation-delay: -3.85s; }

/* Contact — no hover transform on these tiles, so the tile itself can bob. */
.contact-icon { animation: icon-bob 4.6s ease-in-out infinite, icon-glow 4.6s ease-in-out infinite; }
.contact-item:nth-child(3) .contact-icon { animation-delay: -0.7s, -0.7s; }
.contact-item:nth-child(4) .contact-icon { animation-delay: -1.4s, -1.4s; }
.contact-item:nth-child(5) .contact-icon { animation-delay: -2.1s, -2.1s; }
.contact-item:nth-child(6) .contact-icon { animation-delay: -2.8s, -2.8s; }

/* Programs — the dotted halo moves to a pseudo-element so it can rotate
   without disturbing the badge's own translateX(-50%) centring. */
.service-step { border-color: transparent; }
.service-step::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px dotted rgba(224, 43, 38, 0.45);
  animation: ring-spin 22s linear infinite;
}
.services-grid > :nth-child(even) .service-step::before { animation-direction: reverse; }

/* Global backstop. 0.01ms rather than 0 so transitionend/animationend still fire. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .marquee__track { animation: none !important; }
  .marquee { overflow-x: auto; }
  .scroll-cue { display: none; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .trainers-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 992px) {
  .nav-links, .main-nav .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .top-bar__right { display: none; }
  .top-bar__inner { justify-content: center; }
  /* iOS mishandles background-attachment: fixed — it jitters and mis-scales. */
  .hero, .section--photo { background-attachment: scroll; }
  .hero { min-height: auto; padding: 62px 0; }
  /* Copy runs the full width here, so there's no clear right side to reveal —
     a flat scrim keeps every line legible. */
  .hero::before {
    background: linear-gradient(rgba(8, 8, 8, 0.88), rgba(8, 8, 8, 0.72)),
                url('images/hero.jpeg') center/cover no-repeat;
  }
  .about-grid { grid-template-columns: 1fr; gap: 34px; }
  .about-media { padding: 12px; border-radius: 22px; }
  .about-media img { min-height: 0; height: 340px; }
  .about-badge { right: 16px; bottom: 28px; }
  .services-grid, .plans-grid { grid-template-columns: repeat(2, 1fr); }
  .t-track { grid-auto-columns: calc((100% - 22px) / 2); }
  .contact-split { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .section { padding: 46px 0; }
  .section-header { margin-bottom: 30px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .events-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-item { height: 180px; }
  .about-features { grid-template-columns: 1fr; }
  .main-nav nav { min-height: 76px; }
  .logo-area img { width: 58px; height: 58px; }
  .logo-area .brand-name { font-size: 17px; }
}

@media (max-width: 560px) {
  /* Float buttons go horizontal so they stop covering the footer's last lines */
  .float-actions { flex-direction: row; right: 14px; bottom: 14px; gap: 8px; }
  .float-actions a, .float-actions button { width: 46px; height: 46px; }
  .float-actions svg { width: 21px; height: 21px; }
  footer { padding-bottom: 80px; }

  .services-grid, .plans-grid { grid-template-columns: 1fr; }
  /* One card per page. Side gutters would leave the card too narrow here, so
     the arrows drop below the track as a centred pair instead. */
  .t-track { grid-auto-columns: 100%; }
  .t-carousel { padding-inline: 0; padding-bottom: 64px; }
  .t-nav { top: auto; bottom: 0; transform: none; }
  .t-nav.prev { left: 50%; margin-left: -53px; }
  .t-nav.next { right: 50%; margin-right: -53px; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-bottom .legal-links a { margin: 0 8px; }
  .top-bar__contact { gap: 12px; justify-content: center; }
  .top-bar a, .top-bar span { font-size: 11.5px; }
  .hero-buttons .btn, .cta-buttons .btn { width: 100%; text-align: center; }
  .cta-panel { padding: 44px 20px 40px; border-radius: 22px; }
  .plan-toggle button { padding: 10px 16px; font-size: 12.5px; }
}