/* ==========================================================================
   Q Fitness — Babcock Ranch, FL
   Design language adapted from the Showcase Strength & Fitness reference build.
   Licensed reference fonts (Robofan, Acumin Pro, Bebas Neue Pro, Ethnocentric)
   are replaced with open-licensed Google equivalents: Anton, Bebas Neue,
   Montserrat. Swap --brand + the logo when the client delivers brand assets.
   ========================================================================== */

/* Palette sampled from the Q Fitness badge: crimson field, navy field,
   chrome lettering, gold talons. Neutrals carry a navy bias so the ground
   belongs to the logo rather than being generic black. */
:root {
  --brand: #d21f16;
  --brand-hi: #f24a40;
  --brand-deep: #8f1610;

  --navy: #0c254a;
  --navy-hi: #1b3f74;
  --gold: #e0a52e;
  --silver: #c3c7cb;

  --bg: #1b2130;
  --bg-deep: #141926;
  --surface: #232b3b;
  --surface-2: #1d2431;
  --line: #3d475c;

  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.82);
  --faint: rgba(255, 255, 255, 0.62);

  --display: "Anton", "Arial Narrow", sans-serif;
  --sub: "Bebas Neue", "Arial Narrow", sans-serif;
  --body: "Montserrat", system-ui, -apple-system, sans-serif;

  --wrap: 1440px;
  --gutter: clamp(20px, 5vw, 60px);
  --section-y: clamp(64px, 9vw, 130px);
  --h2: clamp(40px, 7vw, 80px);

  /* Riveted-plate corner brackets for .plan cards — one small metal
     wedge + bolt per corner, baked as its own SVG since a background
     gradient can't draw the angled plate shape. */
  --corner-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cpath d='M0 0 H56 L0 56 Z' fill='%23454c56'/%3E%3Cpath d='M0 0 H56 L0 56 Z' fill='none' stroke='%23000' stroke-opacity='0.4' stroke-width='1.5'/%3E%3Cpath d='M2 2 H40 L2 40 Z' fill='none' stroke='white' stroke-opacity='0.08' stroke-width='1'/%3E%3Ccircle cx='18' cy='18' r='8' fill='%236b727d' stroke='%231a1d22' stroke-width='1.5'/%3E%3Ccircle cx='16' cy='16' r='3' fill='white' fill-opacity='0.25'/%3E%3Cline x1='14' y1='18' x2='22' y2='18' stroke='%231a1d22' stroke-width='1.6'/%3E%3Cline x1='18' y1='14' x2='18' y2='22' stroke='%231a1d22' stroke-width='1.6'/%3E%3C/svg%3E");
  --corner-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cpath d='M56 0 H0 L56 56 Z' fill='%23454c56'/%3E%3Cpath d='M56 0 H0 L56 56 Z' fill='none' stroke='%23000' stroke-opacity='0.4' stroke-width='1.5'/%3E%3Cpath d='M54 2 H16 L54 40 Z' fill='none' stroke='white' stroke-opacity='0.08' stroke-width='1'/%3E%3Ccircle cx='38' cy='18' r='8' fill='%236b727d' stroke='%231a1d22' stroke-width='1.5'/%3E%3Ccircle cx='40' cy='16' r='3' fill='white' fill-opacity='0.25'/%3E%3Cline x1='34' y1='18' x2='42' y2='18' stroke='%231a1d22' stroke-width='1.6'/%3E%3Cline x1='38' y1='14' x2='38' y2='22' stroke='%231a1d22' stroke-width='1.6'/%3E%3C/svg%3E");
  --corner-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cpath d='M0 56 H56 L0 0 Z' fill='%23454c56'/%3E%3Cpath d='M0 56 H56 L0 0 Z' fill='none' stroke='%23000' stroke-opacity='0.4' stroke-width='1.5'/%3E%3Cpath d='M2 54 H40 L2 16 Z' fill='none' stroke='white' stroke-opacity='0.08' stroke-width='1'/%3E%3Ccircle cx='18' cy='38' r='8' fill='%236b727d' stroke='%231a1d22' stroke-width='1.5'/%3E%3Ccircle cx='16' cy='40' r='3' fill='white' fill-opacity='0.25'/%3E%3Cline x1='14' y1='38' x2='22' y2='38' stroke='%231a1d22' stroke-width='1.6'/%3E%3Cline x1='18' y1='34' x2='18' y2='42' stroke='%231a1d22' stroke-width='1.6'/%3E%3C/svg%3E");
  --corner-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cpath d='M56 56 H0 L56 0 Z' fill='%23454c56'/%3E%3Cpath d='M56 56 H0 L56 0 Z' fill='none' stroke='%23000' stroke-opacity='0.4' stroke-width='1.5'/%3E%3Cpath d='M54 54 H16 L54 16 Z' fill='none' stroke='white' stroke-opacity='0.08' stroke-width='1'/%3E%3Ccircle cx='38' cy='38' r='8' fill='%236b727d' stroke='%231a1d22' stroke-width='1.5'/%3E%3Ccircle cx='40' cy='40' r='3' fill='white' fill-opacity='0.25'/%3E%3Cline x1='34' y1='38' x2='42' y2='38' stroke='%231a1d22' stroke-width='1.6'/%3E%3Cline x1='38' y1='34' x2='38' y2='42' stroke='%231a1d22' stroke-width='1.6'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------- base ---- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--brand-hi); text-decoration: none; }
a:hover { color: #fff; }

h1, h2, h3, h4, h5 { margin: 0; font-weight: normal; }

p { margin: 0 0 1.2em; }

ul { margin: 0; padding: 0; }

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

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--wide { max-width: 1600px; }
.wrap--tight { max-width: 1100px; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand);
  color: #fff;
  padding: 12px 20px;
  z-index: 999;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Houses <symbol> icon defs referenced elsewhere via <use> — never rendered directly. */
.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Honeypot field on the contact form — invisible to real visitors and AT, present for bots. */
.form__hp { display: none; }

.form__status { margin-top: 12px; font-size: 14px; }
.form__status:empty { display: none; }
.form__status[data-tone="error"] { color: #ff9b95; }
.form__status[data-tone="ok"] { color: var(--gold); }

/* ---------------------------------------------------------- typography ---- */

.h1 {
  font-family: var(--display);
  font-size: clamp(42px, 8vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.5px;
  text-transform: uppercase;
}

.h2 {
  font-family: var(--display);
  font-size: var(--h2);
  line-height: 0.98;
  letter-spacing: -0.4px;
  text-transform: uppercase;
  margin-bottom: 0.5em;
}

.h3 {
  font-family: var(--display);
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.05;
  text-transform: uppercase;
}

.h4 {
  font-family: var(--sub);
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.accent { color: var(--brand-hi); }

.eyebrow {
  font-family: var(--body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--brand-hi);
  margin: 0 0 18px;
}

.lede {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 300;
  line-height: 1.45;
  color: var(--muted);
}

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

/* The angled red label block — reference site used a 46px arrow sprite; this
   rebuilds it as a clipped pseudo-element so no image asset is required. */
.tab {
  position: relative;
  display: inline-block;
  background: var(--brand);
  color: #fff;
  font-family: var(--body);
  font-weight: 700;
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1.2;
  text-transform: uppercase;
  padding: 15px 26px 16px;
  margin-bottom: 26px;
  max-width: calc(100% - 40px);
}
.tab::after {
  content: "";
  position: absolute;
  top: 0;
  right: -38px;
  width: 38px;
  height: 100%;
  background: var(--brand);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* ------------------------------------------------------------- buttons ---- */

.btn {
  display: inline-block;
  font-family: var(--body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #fff;
  background: var(--brand);
  border: 2px solid var(--brand);
  padding: 18px 46px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn:hover,
.btn:focus-visible { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }

.btn--ghost { background: transparent; border-color: #fff; }
.btn--ghost:hover { background: #fff; border-color: #fff; color: var(--bg); }

/* ----------------------------------------------- gradient CTA buttons ----- */
/* Ported from a shadcn/React "gradient-button" component into plain CSS so it
   runs on this no-build static site: animated radial-gradient fill + gradient
   border, driven by registered @property custom properties. */
@property --pos-x { syntax: '<percentage>'; initial-value: 11.14%; inherits: false; }
@property --pos-y { syntax: '<percentage>'; initial-value: 140%; inherits: false; }
@property --spread-x { syntax: '<percentage>'; initial-value: 150%; inherits: false; }
@property --spread-y { syntax: '<percentage>'; initial-value: 180.06%; inherits: false; }
@property --color-1 { syntax: '<color>'; initial-value: #000; inherits: false; }
@property --color-2 { syntax: '<color>'; initial-value: #08012c; inherits: false; }
@property --color-3 { syntax: '<color>'; initial-value: #4e1e40; inherits: false; }
@property --color-4 { syntax: '<color>'; initial-value: #70464e; inherits: false; }
@property --color-5 { syntax: '<color>'; initial-value: #88394c; inherits: false; }
@property --border-angle { syntax: '<angle>'; initial-value: 20deg; inherits: true; }
@property --border-color-1 { syntax: '<color>'; initial-value: hsla(340, 75%, 60%, 0.2); inherits: true; }
@property --border-color-2 { syntax: '<color>'; initial-value: hsla(340, 75%, 40%, 0.75); inherits: true; }
@property --stop-1 { syntax: '<percentage>'; initial-value: 37.35%; inherits: false; }
@property --stop-2 { syntax: '<percentage>'; initial-value: 61.36%; inherits: false; }
@property --stop-3 { syntax: '<percentage>'; initial-value: 78.42%; inherits: false; }
@property --stop-4 { syntax: '<percentage>'; initial-value: 89.52%; inherits: false; }
@property --stop-5 { syntax: '<percentage>'; initial-value: 100%; inherits: false; }

.gradient-button {
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 11px;
  min-width: 132px;
  padding: 16px 36px;
  font-family: var(--body);
  font-size: 16px;
  line-height: 19px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  background: radial-gradient(
    var(--spread-x) var(--spread-y) at var(--pos-x) var(--pos-y),
    var(--color-1) var(--stop-1),
    var(--color-2) var(--stop-2),
    var(--color-3) var(--stop-3),
    var(--color-4) var(--stop-4),
    var(--color-5) var(--stop-5)
  );
  transition:
    --pos-x 0.5s, --pos-y 0.5s, --spread-x 0.5s, --spread-y 0.5s,
    --color-1 0.5s, --color-2 0.5s, --color-3 0.5s, --color-4 0.5s, --color-5 0.5s,
    --border-angle 0.5s, --border-color-1 0.5s, --border-color-2 0.5s,
    --stop-1 0.5s, --stop-2 0.5s, --stop-3 0.5s, --stop-4 0.5s, --stop-5 0.5s;
}
.gradient-button::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(var(--border-angle), var(--border-color-1), var(--border-color-2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.gradient-button:hover {
  --pos-x: 0%;
  --pos-y: 91.51%;
  --spread-x: 120.24%;
  --spread-y: 103.18%;
  --color-1: #c96287;
  --color-2: #c66c64;
  --color-3: #cc7d23;
  --color-4: #37140a;
  --color-5: #000;
  --border-angle: 190deg;
  --border-color-1: hsla(340, 78%, 90%, 0.1);
  --border-color-2: hsla(340, 75%, 90%, 0.6);
  --stop-1: 0%;
  --stop-2: 8.8%;
  --stop-3: 21.44%;
  --stop-4: 71.34%;
  --stop-5: 85.76%;
}
.gradient-button-variant {
  --color-1: #000022;
  --color-2: #1f3f6d;
  --color-3: #469396;
  --color-4: #f1ffa5;
  --border-angle: 200deg;
  --border-color-1: hsla(320, 75%, 90%, 0.6);
  --border-color-2: hsla(320, 50%, 90%, 0.15);
}
.gradient-button-variant:hover {
  --pos-x: 0%;
  --pos-y: 95.51%;
  --spread-x: 110.24%;
  --spread-y: 110.2%;
  --color-1: #000020;
  --color-2: #f1ffa5;
  --color-3: #469396;
  --color-4: #1f3f6d;
  --color-5: #000;
  --stop-1: 0%;
  --stop-2: 10%;
  --stop-3: 35.44%;
  --stop-4: 71.34%;
  --stop-5: 90.76%;
  --border-angle: 210deg;
  --border-color-1: hsla(320, 75%, 90%, 0.2);
  --border-color-2: hsla(320, 50%, 90%, 0.75);
}

.btn--sm { padding: 13px 28px; font-size: 13px; letter-spacing: 1.4px; }

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

/* -------------------------------------------------------------- header ---- */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 10, 11, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.header__inner {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 24px;
  min-height: 84px;
}

/* The badge lockup plus seven nav items is a tight fit on laptops: shed the
   strapline and tighten the nav before anything is forced off the edge. */
@media (max-width: 1400px) {
  .nav__list { gap: 16px; }
  .nav__list a { font-size: 12.5px; letter-spacing: 1.1px; }
}

@media (max-width: 1300px) {
  .logo__tag { display: none; }
  .nav__list { gap: 13px; }
  .nav__list a { font-size: 12px; letter-spacing: 0.8px; }
  .btn--sm { padding: 12px 20px; font-size: 12px; letter-spacing: 1px; }
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  flex: 0 0 auto;
}
.logo:hover { color: #fff; }

.logo__mark {
  width: 54px;
  height: 54px;
  object-fit: contain;
  flex: 0 0 auto;
}

.logo__text { display: flex; flex-direction: column; gap: 3px; }

.logo__word {
  font-family: var(--display);
  font-size: 23px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* the badge's own strapline, set in chrome to echo the lettering */
.logo__tag {
  font-family: var(--body);
  font-weight: 600;
  font-size: 8.5px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--silver);
  white-space: nowrap;
}

@media (max-width: 420px) {
  .logo__mark { width: 44px; height: 44px; }
  .logo__word { font-size: 19px; }
  .logo__tag { font-size: 7.5px; letter-spacing: 1.6px; }
}

.nav { margin-left: auto; }

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  list-style: none;
}

.nav__list a {
  display: inline-block;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #fff;
  padding: 10px 2px;
  border-bottom: 2px solid transparent;
}
.nav__list a:hover { color: var(--brand-hi); }
.nav__list a[aria-current="page"] {
  color: var(--brand-hi);
  border-bottom-color: var(--brand);
}

.nav__cta { flex: 0 0 auto; }

/* nav CTA as supplied artwork: a real link, image as the visible surface.
   Height matches .logo__mark so the dumbbell and Q badge read as one lockup. */
.btn-art {
  display: inline-flex;
  align-items: center;
  height: 54px;
}
.btn-art__img {
  display: block;
  height: 54px;
  width: auto;
  max-height: 54px;
  user-select: none;
  -webkit-user-drag: none;
}
.btn-art:hover .btn-art__img,
.btn-art:focus-visible .btn-art__img { filter: brightness(1.14); }

@media (max-width: 1300px) {
  .btn-art { height: 54px; }
}

.nav-toggle {
  display: none;
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--line);
  color: #fff;
  width: 46px;
  height: 44px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  position: relative;
}
.nav-toggle span::before,
.nav-toggle span::after { content: ""; position: absolute; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }

/* ---------------------------------------------------------- day-pass bar -- */

.daybar {
  background: var(--brand);
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.6px;
}
.daybar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
  padding-block: 12px;
}
.daybar a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
  display: inline-block;
  padding-block: 11px;
  margin-block: -11px;
}
.daybar a:hover { color: var(--bg); }

/* ---------------------------------------------------------------- hero ---- */

.hero {
  position: relative;
  background: var(--bg-deep);
  overflow: hidden;
}

/* -------------------------------------------------- waving-flag hero ------ */
/* Homepage variant: a spec-correct US flag waves on <canvas> behind the copy,
   a lifter sits on the right, and a scrim keeps the white/gold type legible. */
.hero--flag { isolation: isolate; }
.hero__flag {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}
.hero__athlete {
  position: absolute;
  right: -3%;
  top: 0;
  width: min(58vw, 880px);
  height: 100%;
  object-fit: cover;
  object-position: 55% 38%;
  z-index: 1;
  filter: brightness(0.5) contrast(1.12) saturate(0.6);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 100%);
  pointer-events: none;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6,8,13,0.9) 0%, rgba(6,8,13,0.66) 40%, rgba(6,8,13,0.2) 66%, rgba(12,37,74,0.32) 100%),
    linear-gradient(180deg, rgba(6,8,13,0.3) 0%, transparent 26%, rgba(6,8,13,0.5) 76%, rgba(6,8,13,0.8) 100%);
}
.hero--flag .hero__inner { z-index: 3; }
@media (max-width: 1100px) {
  .hero__athlete { width: 100%; right: 0; opacity: 0.8;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 76%);
    mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 76%); }
}

/* gold accent on the hero headline word(s) */
.hero__gold { color: var(--gold); }

/* grand-opening countdown */
.hero__countdown { margin: 26px 0 34px; max-width: 640px; }

/* --- "Grand Opening" header with red rules + stars --- */
.clock-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  font-family: var(--sub);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-size: 15px;
  color: #fff;
  white-space: nowrap;
}
.clock-head span { display: flex; align-items: center; gap: 12px; }
.clock-head span::before,
.clock-head span::after { content: "\2605"; color: var(--brand-hi); font-size: 12px; }
.clock-head::before,
.clock-head::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--brand)); }
.clock-head::after { background: linear-gradient(90deg, var(--brand), transparent); }

/* --- the barbell: plates row with weight-plate ends --- */
.clock {
  position: relative;
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 0 34px;                 /* room for the weight-plate ends */
}
/* stacked weight plates on each end of the bar */
.clock::before,
.clock::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 78%;
  border-radius: 8px;
  background:
    linear-gradient(180deg, #3a3d43 0%, #191b1f 50%, #0a0b0d 100%);
  border: 1px solid #000;
  box-shadow:
    -12px 0 0 -2px #202227, -12px 0 0 -1px #000,
    inset 2px 0 3px rgba(255,255,255,0.08);
}
.clock::before { left: -34px; }
.clock::after  { right: -34px;
  box-shadow: 12px 0 0 -2px #202227, 12px 0 0 -1px #000, inset -2px 0 3px rgba(255,255,255,0.08); }

/* each unit = a beveled-octagon plate with a red glow behind it */
.clock .cell {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 12px 6px 14px;
  text-align: center;
  background: linear-gradient(160deg, #26282d 0%, #16171b 55%, #0c0d10 100%);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -8px 16px rgba(0,0,0,0.6);
}
/* red glow slots between plates */
.clock .cell:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -8px;
  top: 14%;
  width: 8px;
  height: 72%;
  background: radial-gradient(closest-side, rgba(230,62,53,0.9), rgba(230,62,53,0.15) 70%, transparent);
  filter: blur(1px);
}
.clock .cell span {
  display: block;
  font-family: var(--sub);
  letter-spacing: 0.2em;
  font-size: 12px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  margin-bottom: 6px;
}
/* short red underline beneath each label */
.clock .cell span::after {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  margin: 5px auto 0;
  background: var(--brand-hi);
}
.clock .cell b {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1;
  color: #f4f4f2;
  text-shadow: 0 2px 4px rgba(0,0,0,0.7);
}

/* --- "November 2026" footer with red rules --- */
.clock-note {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 16px 34px 0;
  font-family: var(--sub);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-size: 13px;
  color: rgba(255,255,255,0.78);
  white-space: nowrap;
}
.clock-note::before,
.clock-note::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, rgba(176,26,19,0.7)); }
.clock-note::after { background: linear-gradient(90deg, rgba(176,26,19,0.7), transparent); }
.clock .now {
  font-family: var(--display);
  font-size: 34px;
  color: var(--gold);
  letter-spacing: 1px;
  margin: 0;
}

/* -------------------------------------------------- Q&A video link card --- */
/* Horizontal (16:9) card that links out to the Facebook video — no Facebook
   SDK, so it stays fast and never breaks. Swap for a self-hosted <video> if
   the real file lands. */
.videocard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  aspect-ratio: 16 / 9;
  max-width: 900px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(6,8,13,0.82), rgba(6,8,13,0.9)),
    url("../q-fitness-hero/flag-ripple.png") center/cover no-repeat,
    var(--bg-deep);
  color: #fff;
  text-align: center;
  transition: border-color .2s ease, transform .2s ease;
}
.videocard:hover { border-color: var(--brand-hi); color: #fff; transform: translateY(-2px); }
.videocard__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  padding-left: 4px;
  transition: background .2s ease, transform .2s ease;
}
.videocard:hover .videocard__play { background: var(--brand-deep); transform: scale(1.05); }
.videocard__label {
  font-family: var(--sub);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 16px;
}

/* The brand's own artwork splits red lightning left, blue right, on black.
   Rebuilt here as layered gradients so the hero belongs to the same world. */
.hero__media {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 100% at 0% 45%, rgba(176, 26, 19, 0.55), transparent 62%),
    radial-gradient(70% 100% at 100% 55%, rgba(27, 63, 116, 0.6), transparent 62%),
    radial-gradient(90% 70% at 50% 0%, rgba(255, 255, 255, 0.05), transparent 55%),
    linear-gradient(100deg, #06080d 0%, #0b0f18 50%, #06080d 100%);
}

/* a slow charge in the two edge glows — never a flicker, never a distraction */
@media (prefers-reduced-motion: no-preference) {
  .hero__media { animation: hero-charge 9s ease-in-out infinite; }
}

@keyframes hero-charge {
  0%, 100% { filter: saturate(1) brightness(1); }
  50% { filter: saturate(1.22) brightness(1.1); }
}
.hero__media::after {
  /* diagonal texture stand-in until the facility photo lands */
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.035) 0 2px,
    transparent 2px 26px
  );
}

.hero__inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(28px, 3.5vw, 84px);
  max-width: 780px;
}

/* the badge fills the right of the hero on wide screens; the copy owns
   the full width below 1100px, where the badge would crowd it */
.hero__badge {
  position: absolute;
  right: 3vw;
  top: 50%;
  transform: translateY(-50%);
  width: min(36vw, 430px);
  height: auto;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.65));
}

@media (max-width: 1100px) {
  .hero__badge { display: none; }
}

/* corner ribbon teasing the grand-opening event, matching the clip-path
   language of .tab so it reads as part of the same brand system */
.gopen-ribbon {
  position: absolute;
  top: 28px;
  right: -64px;
  z-index: 3;
  transform: rotate(38deg);
  background: var(--gold);
  color: var(--bg-deep);
  font-family: var(--body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 8px 70px;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
.gopen-ribbon:hover { background: #d9a53c; color: var(--bg-deep); }

@media (max-width: 1100px) {
  .gopen-ribbon { top: 16px; right: -70px; font-size: 11px; padding: 7px 80px; }
}
@media (max-width: 640px) {
  .gopen-ribbon { display: none; }
}

.hero--flag .eyebrow {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12pt;
  margin-bottom: 10px;
}

.hero--flag .h1 {
  font-size: clamp(32px, 7.2vw, 64pt);
  margin-bottom: 8px;
}
.hero__line { display: block; white-space: nowrap; }
@media (max-width: 480px) {
  .hero--flag .h1 { font-size: clamp(28px, 11vw, 40px); }
}

.hero__claim {
  font-weight: 700;
  font-size: clamp(16px, 1.8vw, 20px);
  letter-spacing: 0.2px;
  color: var(--gold);
  margin: 0 0 14px;
}

.hero--flag .hero__sub {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.22em;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(15px, 1.55vw, 20pt);
  line-height: 1.2;
  margin-bottom: 16px;
}
.hero__sub-line {
  display: block;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .hero__sub-line { white-space: normal; }
}

.ticks { list-style: none; margin: 0 0 34px; }
.ticks li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 10px;
  font-weight: 500;
  font-size: 17px;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 18px;
  height: 10px;
  border-left: 3px solid var(--brand-hi);
  border-bottom: 3px solid var(--brand-hi);
  transform: rotate(-45deg);
}

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

/* ------------------------------------------ supplied countdown/CTA artwork */
/* The barbell countdown and Sign Up/See Memberships plates are the exact
   supplied PNGs. Live text and real links sit on top at measured positions
   so the countdown keeps ticking and the buttons stay real, focusable links. */
.hero__kit {
  width: min(100%, 400px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 8px 0 12px;
}
.hero__countdown--art {
  position: relative;
  width: 100%;
  max-width: none;
  aspect-ratio: auto;
  margin: 0;
}
.hero__countdown--art .clock-head {
  margin: 0 0 6px;
  width: 100%;
  font-size: 12px;
  letter-spacing: 0.28em;
  color: #f2f2f2;
}
.hero__countdown--art .clock-note {
  margin: 6px 0 0;
  width: 100%;
  font-size: 12px;
  letter-spacing: 0.28em;
  color: #f2f2f2;
}
.countdown-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 800 / 179;
  container-type: inline-size;
}
.hero__actions--art {
  position: relative;
  width: 100%;
  max-width: none;
  aspect-ratio: 800 / 139;
  margin-top: 0;
}
.countdown-art,
.cta-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.clock.clock--art {
  position: absolute;
  inset: 0;
  margin: 0;
  display: block;
  pointer-events: none;
}
.clock.clock--art::before,
.clock.clock--art::after,
.clock.clock--art .cell::after { content: none; }

.clock.clock--art .cell {
  position: absolute;
  top: 34%;
  height: 48%;
  min-width: 0;
  padding: 0;
  display: grid;
  place-items: center;
  background: none;
  clip-path: none;
  box-shadow: none;
}
.clock.clock--art .cell:nth-child(1) { left: 14.9%; width: 12%; }
.clock.clock--art .cell:nth-child(2) { left: 33.9%; width: 12%; }
.clock.clock--art .cell:nth-child(3) { left: 52.9%; width: 12%; }
.clock.clock--art .cell:nth-child(4) { left: 72.3%; width: 12%; }

/* Label state: no confirmed date (or manual open flag) — the digit plates are
   hidden and a single centered label takes the stage. flag-hero.js toggles
   .is-label; the markup ships with it set, since no-date is the default. */
.countdown-stage.is-label .countdown-art { visibility: hidden; }
.clock.clock--art .now {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(22px, 9cqw, 40px);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

.clock.clock--art .cell b {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(18px, 8.2cqw, 34px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: #f4f4f2;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

.hero__actions--art .art-hit {
  position: absolute;
  z-index: 2;
  top: 8%;
  height: 84%;
  border-radius: 4px;
}
.hero__actions--art .art-hit--signup { left: 1%; width: 45.5%; }
.hero__actions--art .art-hit--memberships {
  left: 52.5%;
  width: 46.5%;
  display: grid;
  place-items: center;
}
.art-hit__label {
  font-family: var(--body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.7);
  white-space: nowrap;
}
.hero__actions--art .art-hit:hover,
.hero__actions--art .art-hit:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
  background: rgba(255, 255, 255, 0.06);
}

/* ------------------------------------------------------- inner banners ---- */

.banner {
  position: relative;
  background:
    linear-gradient(115deg, rgba(6,8,13,0.93) 0%, rgba(10,13,20,0.86) 52%, rgba(12,37,74,0.6) 100%),
    url("../q-fitness-hero/flag-ripple.png") center 30% / cover no-repeat,
    #0a0a0b;
  padding-block: clamp(28px, 3.4vw, 52px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 120% at 85% 30%, rgba(194, 12, 12, 0.22), transparent 62%);
}
.banner > .wrap { position: relative; z-index: 2; }
.banner .h1 { font-size: clamp(30px, 4.4vw, 46px); }

/* First section under a .banner, on the six inner pages (memberships, training,
   the-gym, coaches, community, contact) — compact so the banner + intro headline
   fit one screen without scrolling. */
.section--intro { padding-block: clamp(24px, 3vw, 44px); }
.section--intro .h2 { font-size: clamp(26px, 3.6vw, 42px); margin-bottom: 0.4em; }
.section--intro .lede { font-size: clamp(15px, 1.3vw, 18px); }
.section--intro .tab { margin-bottom: 16px; }
.section--intro .split { align-items: start; }

/* The community page's opening line is framed as a quote — it's the
   thesis the whole page backs up, not just a heading. Kept compact so
   "What's coming up" still lands on screen without scrolling. */
.section--intro:has(.intro-quote) { padding-block: clamp(16px, 2vw, 28px); }
.intro-quote { margin: 0; padding: 0; border: 0; }
.intro-quote__mark {
  display: block;
  color: var(--brand-hi);
  font-family: Georgia, serif;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 0.5;
  margin-bottom: 0;
}
.intro-quote .h2 { margin-bottom: 6px; }
.section--intro:has(.intro-quote) .lede {
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.35;
  margin-bottom: 0;
}

.crumbs {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--faint);
}
.crumbs a { color: #fff; }
.crumbs span { margin-inline: 8px; }

/* --------------------------------------------------------- photo slots ---- */

/* Every image on the site is a labelled slot until photo day. Replacing one is
   a straight swap: <figure class="shot">…</figure>  ->  <img src alt>. */
.shot {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  background:
    linear-gradient(135deg, rgba(194, 12, 12, 0.12), transparent 55%),
    linear-gradient(#1a1a1e, #101013);
  display: grid;
  place-content: center;
  text-align: center;
  padding: 24px;
  gap: 10px;
}
.shot::before {
  content: "PHOTO";
  position: absolute;
  top: 0;
  left: 0;
  background: var(--brand);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 5px 10px;
}
.shot figcaption {
  font-size: 13px;
  line-height: 1.5;
  color: var(--faint);
  letter-spacing: 0.4px;
  max-width: 26ch;
  margin-inline: auto;
}
.shot--wide { aspect-ratio: 16 / 9; }
.shot--tall { aspect-ratio: 3 / 4; max-width: 480px; }
.shot--square { aspect-ratio: 1 / 1; }

/* A slot that's been filled with a real photograph. No dashed border and no
   "PHOTO" tag — the image carries its own ratio via width/height. */
.photo { margin: 0; }
.photo img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
}
.photo figcaption {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--faint);
  letter-spacing: 0.4px;
}

/* "Guess who" coach placeholder — a deliberate, fun stand-in rather than a
   flat "to be confirmed", for slots where neither name nor face is set yet.
   Click/tap or Enter/Space flips the card; main.js toggles aria-pressed and
   swaps aria-hidden between faces so screen readers only see one side. */
.flip {
  margin: 0;
}
.flip--compact { max-width: 260px; }
.flip__card {
  display: block;
  width: 100%;
  margin: 0 0 22px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  perspective: 1200px;
}
.flip__card:focus-visible .flip__inner {
  outline: 2px solid var(--brand-hi);
  outline-offset: 4px;
}
.flip__inner {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.flip__card[aria-pressed="true"] .flip__inner { transform: rotateY(180deg); }

.flip__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.flip__face--front {
  border: 1px dashed rgba(255, 255, 255, 0.22);
  background:
    linear-gradient(135deg, rgba(194, 12, 12, 0.16), transparent 60%),
    linear-gradient(#1a1a1e, #101013);
}
.flip__face--back {
  border: 1px solid var(--brand);
  background: linear-gradient(#231619, #171114);
  transform: rotateY(180deg);
}

/* Poster artwork. When the file is present it covers the whole face and the
   drawn fallback below is hidden; if the file is missing, main.js removes the
   broken <img>, :has() stops matching, and the drawn version comes back. */
/* The posters are finished compositions — the headline sits at the very top
   and the call to action at the very bottom — so they must never be cropped.
   `contain` shows the whole thing; the frame colour is sampled from the
   artwork's own border so any letterboxing reads as part of the poster. */
.flip__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* portrait, matching the front poster's 4:5 */
.flip__inner:has(.flip__art) { aspect-ratio: 4 / 5; }

.flip__face--front:has(.flip__art) { background: #51043c; }
.flip__face--back:has(.flip__art) { background: #280121; }

.flip__fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.flip__face:has(.flip__art) .flip__fallback { display: none; }
/* the poster is its own frame — drop the card's padding and border so the
   artwork meets the edges instead of sitting inside a 1px inset */
.flip__face:has(.flip__art) { padding: 0; border: 0; }

.flip__tag {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--brand);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 5px 10px;
}
.flip__silhouette {
  position: relative;
  width: 84px;
  height: 92px;
  margin-bottom: 16px;
}
.flip__head,
.flip__shoulders {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--brand-deep), #08090c);
}
.flip__head {
  top: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
}
.flip__shoulders {
  bottom: 0;
  width: 84px;
  height: 54px;
  border-radius: 42px 42px 0 0;
}
.flip__q {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--display);
  font-size: 24px;
  color: var(--brand-hi);
  text-shadow: 0 0 12px var(--brand-hi), 0 0 26px rgba(224, 38, 28, 0.6);
}
.flip__title {
  font-family: var(--display);
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #fff;
}
.flip__hint {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--faint);
}
.flip__twist {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brand-hi);
  margin-bottom: 8px;
}
.flip__face--back .flip__title { margin-bottom: 10px; }
.flip__desc {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.flip h3 {
  font-family: var(--display);
  font-size: 26px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 0;
}

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

/* ------------------------------------------------------ locker reveal ---- */
/* A gym-locker door that unlocks to reveal the Grand Opening party details.
   Same "click to reveal" spirit as .flip, built the same way: real <button>,
   CSS transforms, deterministic markup — no image assets, no dependencies. */

.locker { max-width: 300px; margin: 0; }

.locker__stage {
  position: relative;
  aspect-ratio: 1 / 1;
  perspective: 1400px;
}

.locker__inside {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 22px;
  overflow: hidden;
  border: 1px solid var(--brand);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(224, 38, 28, 0.28), transparent 60%),
    linear-gradient(100deg, transparent 40%, rgba(120, 170, 255, 0.14) 50%, transparent 60%),
    linear-gradient(80deg, transparent 42%, rgba(255, 255, 255, 0.1) 50%, transparent 58%),
    linear-gradient(#0a1020, #05070d);
}

.locker__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--brand-hi);
  margin: 0 0 6px;
}
.locker__headline {
  font-family: var(--display);
  font-size: clamp(26px, 4vw, 34px);
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 8px;
}
.locker__tagline {
  font-family: var(--sub);
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 18px;
}
.locker__meta {
  display: grid;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--silver);
  margin: 0;
}
.locker__meta dd { margin: 0; }

.locker__confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.locker__confetti span {
  position: absolute;
  top: -8%;
  width: 8px;
  height: 14px;
  border-radius: 1px;
  opacity: 0;
}
.locker.is-confetti .locker__confetti span {
  animation: locker-confetti-fall 1.15s ease-in forwards;
}
@keyframes locker-confetti-fall {
  0% { opacity: 1; transform: translateY(0) rotate(0deg); }
  100% { opacity: 0; transform: translateY(230px) rotate(340deg); }
}

.locker__door {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 26px),
    linear-gradient(155deg, #4a5160, #262b34 45%, #14171c);
  box-shadow: inset 0 0 0 6px rgba(0, 0, 0, 0.35), inset 0 0 30px rgba(0, 0, 0, 0.5);
  transform-origin: left center;
  backface-visibility: hidden;
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.locker__door:focus-visible {
  outline: 3px solid var(--brand-hi);
  outline-offset: -6px;
}
.locker.is-open .locker__door { transform: rotateY(-100deg); }

/* The locked face is a single supplied graphic (party-intel-unlock.webp)
   rather than coded text/icons — it already bakes in the tag, headline
   and CTA. A brief flash fills the same beat the old dial-spin used to,
   while the door itself still does the actual swing-open reveal. */
.locker__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.locker__door:has(.locker__art) { padding: 0; border: 0; }
.locker.is-unlocking .locker__art { animation: locker-art-flash 0.55s ease; }
@keyframes locker-art-flash {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.04); filter: brightness(1.3); }
}

.locker__replay {
  display: none;
  margin-top: 14px;
  background: none;
  border: 1px solid var(--brand-hi);
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 10px 16px;
  cursor: pointer;
}
.locker__replay:hover { background: var(--brand-hi); }
.locker.is-open .locker__replay { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  .locker__door { transition: none; }
  .locker__art { animation: none !important; }
  .locker__confetti span { animation: none !important; opacity: 0; }
}

/* ------------------------------------------------------------- columns ---- */

.grid { display: grid; gap: clamp(24px, 3vw, 40px); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}
.split--flip > *:first-child { order: 2; }

/* --------------------------------------------------- problem/agitation ---- */

.versus { background: var(--bg-deep); }

.versus__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  margin-top: 46px;
}

.vcard {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: clamp(26px, 3vw, 42px);
}
.vcard--them { opacity: 0.78; }
.vcard--us { border-color: var(--brand); background: linear-gradient(#25181a, #1a1113); }

.vcard h3 {
  font-family: var(--sub);
  font-size: 30px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.vcard--us h3 { color: var(--brand-hi); }

.vlist { list-style: none; }
.vlist li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}
.vlist li::before {
  position: absolute;
  left: 0;
  top: -1px;
  font-weight: 700;
  font-size: 18px;
}
.vcard--them .vlist li::before { content: "\00d7"; color: var(--faint); }
.vcard--us .vlist li::before { content: "\2713"; color: var(--brand-hi); }
.vcard--us .vlist li { color: #fff; }

/* --------------------------------------------------------------- steps ---- */

.steps { counter-reset: step; }

.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 3vw, 46px);
  align-items: start;
  padding-block: clamp(26px, 3vw, 44px);
  border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }

.step__num {
  font-family: var(--display);
  font-size: clamp(56px, 10vw, 140px);
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 2px var(--brand);
  letter-spacing: -2px;
}

.step h3 { margin-bottom: 10px; }
.step p { margin: 0; color: var(--muted); font-size: 17px; }

/* ------------------------------------------------------------- pricing ---- */

.plans { align-items: stretch; }

/* Riveted-plate card treatment: a metal bolt at each corner and a fine
   grain texture (background-image layers, no extra markup) over the
   surface color. */
.plan {
  position: relative;
  border: 2px solid var(--line);
  background-color: var(--surface);
  background-image:
    var(--corner-tl), var(--corner-tr), var(--corner-bl), var(--corner-br),
    repeating-conic-gradient(rgba(255, 255, 255, 0.025) 0% 25%, transparent 0% 50%),
    linear-gradient(100deg, transparent 40%, rgba(120, 170, 255, 0.06) 50%, transparent 60%);
  background-position: top left, top right, bottom left, bottom right, 0 0, 0 0;
  background-size: 46px 46px, 46px 46px, 46px 46px, 46px 46px, 4px 4px, auto;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat;
  padding: clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.plan:hover {
  transform: translateY(-6px);
  border-color: var(--brand-hi);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}
.plan > * { position: relative; z-index: 1; }

/* Community hero rate ribbon — a notched banner inset near the top,
   like the "Most popular" one below but sitting inside the card — plus
   a faint ghost shield-and-plate watermark low in the corner. */
.plan--hero::before {
  content: "\2605  Community hero rate  \2605";
  position: absolute;
  top: 22px;
  left: 22px;
  z-index: 2;
}
.plan--hero::after {
  content: "";
  position: absolute;
  right: -14px;
  bottom: -10px;
  width: 62%;
  max-width: 150px;
  aspect-ratio: 130 / 285;
  background-image: url("../img/plan-prop-shield35.webp");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom right;
  pointer-events: none;
}
.plan--hero h3 { margin-top: 40px; }

.plan--feature {
  border-color: var(--brand);
  background-color: transparent;
  background-image:
    var(--corner-tl), var(--corner-tr), var(--corner-bl), var(--corner-br),
    repeating-conic-gradient(rgba(255, 255, 255, 0.025) 0% 25%, transparent 0% 50%),
    linear-gradient(#231619, #171114);
  background-position: top left, top right, bottom left, bottom right, 0 0, 0 0;
  background-size: 46px 46px, 46px 46px, 46px 46px, 46px 46px, 4px 4px, auto;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat;
  box-shadow: 0 0 0 1px var(--brand), 0 0 30px rgba(224, 38, 28, 0.45), 0 0 70px rgba(224, 38, 28, 0.15);
  position: relative;
}
.plan--feature:hover {
  box-shadow: 0 0 0 1px var(--brand-hi), 0 0 34px rgba(224, 38, 28, 0.6), 0 0 80px rgba(224, 38, 28, 0.2),
    0 16px 36px rgba(0, 0, 0, 0.35);
}
.plan--feature::before {
  content: "\2605  Most popular  \2605";
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
/* Barbell up top with a big 45lb ghost plate behind the lower half —
   two separate background-image layers stacked on the one
   pseudo-element this card has left after the ribbon takes ::before. */
.plan--feature::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/plan-prop-barbell.webp"), url("../img/plan-prop-plate45.webp");
  background-repeat: no-repeat, no-repeat;
  background-position: top 20px center, bottom -20px right -10px;
  background-size: min(100%, 280px) auto, min(72%, 190px) auto;
  pointer-events: none;
}
.plan--feature h3 { margin-top: 68px; }

/* Founding Family — a brighter, real-prop pair of plates and a dumbbell
   on the right, since this card has no ribbon eating the top space. */
.plan--family::after {
  content: "";
  position: absolute;
  top: 20px;
  right: -16px;
  width: 54%;
  max-width: 165px;
  aspect-ratio: 215 / 235;
  background-image: url("../img/plan-prop-plates-dumbbell.webp");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top right;
  pointer-events: none;
}

/* shared ribbon look for the two banners above */
.plan--hero::before,
.plan--feature::before {
  background: var(--brand);
  color: #fff;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 8px 22px;
  white-space: nowrap;
  clip-path: polygon(0 50%, 10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

/* the feature card sits permanently a touch forward, like the source reference —
   only above the breakpoint where .grid--3 is actually three columns side by side */
@media (min-width: 901px) {
  .plan--feature { transform: scale(1.03); }
  .plan--feature:hover { transform: scale(1.03) translateY(-6px); }
}

.plan h3 {
  font-family: var(--sub);
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 6px;
  /* two lines' worth, so the prices align across cards whatever the plan is called */
  min-height: 2.1em;
}

@media (max-width: 900px) {
  .plan h3 { min-height: 0; }
  .plan--hero h3 { margin-top: 34px; }
  .plan--feature h3 { margin-top: 68px; }
}

.plan__price {
  font-family: var(--display);
  font-size: clamp(46px, 5vw, 64px);
  line-height: 1;
  margin-bottom: 4px;
}
.plan__price small {
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  color: var(--faint);
  letter-spacing: 0.5px;
}

.plan__terms {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--brand-hi);
  margin-bottom: 22px;
}

.plan__list { list-style: none; margin-bottom: 28px; }
.plan__list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 11px;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.5;
}
.plan__list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--brand-hi);
  font-weight: 700;
}

.plan .btn { margin-top: auto; }

/* --------------------------------------------------------- icon cards ----- */

.icard {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: clamp(28px, 3vw, 44px);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.icard:hover {
  border-color: var(--brand);
  background: linear-gradient(#231619, #171114);
  transform: translateY(-3px);
}
.icard h3 {
  font-family: var(--display);
  font-size: 26px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 10px;
}
.icard:hover h3 { color: var(--brand-hi); }
.icard p { margin: 0; color: var(--muted); font-size: 16px; }

.icard__glyph {
  width: 56px;
  height: 56px;
  border: 2px solid var(--brand);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 22px;
  margin-bottom: 22px;
  color: var(--brand-hi);
}

/* ------------------------------------------------------- testimonials ----- */

.quotes { background: var(--bg-deep); overflow: hidden; }

.quotes__head {
  position: relative;
  display: inline-block;
  background: var(--brand);
  padding: 14px 40px 10px 0;
  margin-bottom: 40px;
}
.quotes__head::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 0;
  width: 100vw;
  height: 100%;
  background: var(--brand);
}
.quotes__head .h2 { margin: 0; }

.slider { position: relative; }
.slide { display: none; max-width: 720px; }
.slide.is-active { display: block; animation: fade 0.35s ease; }

@keyframes fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.slide blockquote {
  margin: 0 0 34px;
  font-weight: 600;
  font-style: italic;
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.55;
}

.slide__who { display: flex; align-items: center; gap: 16px; }

.slide__letter {
  flex: 0 0 auto;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: #fff;
  color: var(--brand);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 32px;
}

.slide__name {
  font-family: var(--sub);
  font-size: 30px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  line-height: 1.1;
}
.slide__name small {
  display: block;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.6px;
  color: var(--faint);
  margin-top: 4px;
}

.quote-card {
  min-height: 420px;
  padding: 34px;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(194, 12, 12, 0.22), transparent 48%),
    linear-gradient(160deg, #202024, #101013 72%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
}
.quote-card::after {
  content: "Q FITNESS";
  position: absolute;
  top: 24px;
  right: -16px;
  color: rgba(255, 255, 255, 0.08);
  font-family: var(--display);
  font-size: 58px;
  letter-spacing: 2px;
  transform: rotate(90deg);
  transform-origin: top right;
}
.quote-card__mark {
  position: absolute;
  top: 24px;
  left: 30px;
  color: var(--brand-hi);
  font-family: Georgia, serif;
  font-size: 96px;
  line-height: 0.8;
}
.quote-card__label {
  margin: 0 0 14px;
  color: var(--brand-hi);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.quote-card__title {
  margin: 0;
  color: #fff;
  font-family: var(--display);
  font-size: clamp(34px, 4vw, 52px);
  line-height: 0.98;
  text-transform: uppercase;
}
.quote-card__rule {
  width: 54px;
  height: 3px;
  margin: 24px 0 16px;
  background: var(--brand);
}
.quote-card__note {
  max-width: 28ch;
  margin: 0;
  color: var(--faint);
  font-size: 12px;
  line-height: 1.5;
}

.slider__nav { display: flex; gap: 14px; margin-top: 44px; }
.slider__nav button {
  width: 52px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--line);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.slider__nav button:hover { background: var(--brand); border-color: var(--brand); }

/* ----------------------------------------------------------------- faq ---- */

.faq { border-top: 1px solid var(--line); }

.faq__item { border-bottom: 1px solid var(--line); }

.faq__q {
  width: 100%;
  background: transparent;
  border: 0;
  color: #fff;
  text-align: left;
  font-family: var(--body);
  font-weight: 600;
  font-size: clamp(17px, 1.8vw, 21px);
  padding: 26px 46px 26px 0;
  cursor: pointer;
  position: relative;
}
.faq__q::after {
  content: "+";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 26px;
  color: var(--brand-hi);
  line-height: 1;
}
.faq__q[aria-expanded="true"]::after { content: "\2013"; }
.faq__q:hover { color: var(--brand-hi); }

.faq__a {
  display: none;
  padding: 0 60px 28px 0;
  color: var(--muted);
  max-width: 80ch;
}
.faq__a.is-open { display: block; }
.faq__a p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ cta band ---- */

.cta {
  background:
    radial-gradient(80% 130% at 20% 50%, rgba(194, 12, 12, 0.4), transparent 60%),
    linear-gradient(100deg, #0a0a0b, #1b1b20);
  border-block: 1px solid rgba(255, 255, 255, 0.08);
}
.cta .h2 { margin-bottom: 18px; }
.cta__inner { max-width: 760px; }

/* -------------------------------------------------------------- forms ----- */

.form { display: grid; gap: 20px; }

.field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 8px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: #fff;
  font-family: var(--body);
  font-size: 16px;
  padding: 14px 16px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--brand);
  outline: none;
}
.field textarea { min-height: 150px; resize: vertical; }

.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.form__note { font-size: 13px; color: var(--faint); }

/* ------------------------------------------------------------- footer ----- */

.footer {
  background: var(--bg-deep);
  padding-top: clamp(56px, 7vw, 100px);
  border-top: 3px solid var(--brand);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.3fr 1.2fr;
  gap: clamp(28px, 4vw, 60px);
}

.footer h4 {
  font-family: var(--sub);
  font-size: 30px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.footer__links { list-style: none; }
.footer__links li { margin-bottom: 2px; }
.footer__links a { color: #fff; font-size: 16px; display: inline-block; padding-block: 11px; }
.footer__links a:hover { color: var(--brand-hi); }

.footer address {
  font-style: normal;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}
.footer address a { color: #fff; }

.social { display: flex; gap: 14px; margin-top: 20px; }
.social a {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: #fff;
}
.social a:hover { background: var(--brand); border-color: var(--brand); }
.social svg { display: block; }

.footer__map {
  border: 8px solid rgba(255, 255, 255, 0.06);
  aspect-ratio: 16 / 10;
  background: linear-gradient(#15151a, #0c0c10);
  display: grid;
  place-content: center;
  text-align: center;
  padding: 20px;
  font-size: 13px;
  color: var(--faint);
}

.footer__map:has(iframe) { padding: 0; }
.footer__map iframe { width: 100%; height: 100%; border: 0; display: block; }

.copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: clamp(40px, 5vw, 70px);
  padding-block: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  font-size: 14px;
  color: var(--faint);
}

/* -------------------------------------------------------- floor plan ----- */

.floorplan { margin: 0; }

/* the plan needs width to stay readable, so it scrolls in its own box
   rather than forcing the page sideways */
.floorplan__scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  background: var(--bg-deep);
  padding: clamp(12px, 2vw, 24px);
}

/* the plan drawing, with the hotspot layer sized to it */
/* capped at the drawing's native 1067px — stretching past that only softens it.
   Below 860px the box scrolls instead, so the baked-in labels stay readable. */
.floorplan__plan {
  position: relative;
  width: 100%;
  min-width: 860px;
  max-width: 1067px;
  margin-inline: auto;
  line-height: 0;
}

.floorplan__img {
  display: block;
  width: 100%;
  height: auto;
}

/* Each zone is placed as a percentage of the drawing, so the hotspots stay
   put however wide the image renders. Coordinates live on the element. */
.fp-item {
  position: absolute;
  left: var(--l);
  top: var(--t);
  width: var(--w);
  height: var(--h);
  margin: 0;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: background-color 0.18s ease, border-color 0.18s ease,
              box-shadow 0.18s ease;
}

.fp-item:hover,
.fp-item:focus-visible,
.fp-item.is-active {
  background: rgba(224, 38, 28, 0.22);
  border-color: var(--brand-hi);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 22px rgba(224, 38, 28, 0.35);
}
.fp-item:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* the number sits quietly on the drawing until you reach for it */
.fp-item__no {
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 1;
  min-width: 20px;
  padding: 1px 4px;
  font-family: var(--display);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.5px;
  color: var(--silver);
  background: rgba(6, 8, 13, 0.72);
  border: 1px solid rgba(195, 199, 203, 0.45);
  transition: color 0.18s ease, background-color 0.18s ease,
              border-color 0.18s ease;
}
/* where the top-left corner would cover the drawing's own labels */
.fp-item--no-low .fp-item__no { top: auto; bottom: 3px; }

.fp-item:hover .fp-item__no,
.fp-item:focus-visible .fp-item__no,
.fp-item.is-active .fp-item__no {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand-hi);
}

.floorplan__legend {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  border: 1px solid var(--line);
  border-top: 0;
  background: var(--surface);
  padding: 20px 24px;
  min-height: 118px;
}

.floorplan__legend .fp-key {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 2px solid var(--brand);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 17px;
  color: var(--brand-hi);
}

/* Swaps to a matching equipment glyph as you hover/tap/tab through the plan
   above — a real inventory, not just a description of one. */
.floorplan__legend .fp-icon {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border: 1px solid var(--line);
  background: var(--bg-deep);
  display: grid;
  place-items: center;
  color: var(--silver);
}
.floorplan__legend .fp-icon svg { width: 30px; height: 30px; }

.floorplan__legend h3 {
  font-family: var(--sub);
  font-size: 26px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.floorplan__legend p { margin: 0; color: var(--muted); font-size: 15px; }
.floorplan__legend .fp-size {
  display: inline-block;
  margin-left: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--faint);
}

@media (max-width: 640px) {
  .floorplan__legend { padding: 16px; gap: 14px; }
  .floorplan__legend .fp-key { width: 36px; height: 36px; font-size: 14px; }
  .floorplan__legend .fp-icon { width: 42px; height: 42px; }
  .floorplan__legend .fp-icon svg { width: 22px; height: 22px; }
}

.floorplan figcaption {
  margin-top: 14px;
  font-size: 13px;
  color: var(--faint);
}

/* ------------------------------------------------- household calculator -- */

.calc {
  border: 1px solid var(--brand);
  background: linear-gradient(150deg, #21131a, #10151f 60%);
  padding: clamp(26px, 4vw, 48px);
}

.calc__people {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 30px;
}

.calc__people button {
  flex: 0 0 auto;
  min-width: 62px;
  padding: 14px 18px;
  background: transparent;
  border: 1px solid var(--line);
  color: #fff;
  font-family: var(--display);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.calc__people button:hover { border-color: var(--brand-hi); }
.calc__people button[aria-pressed="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.calc__out {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  border-top: 1px solid var(--line);
  padding-top: 26px;
}

.calc__total {
  font-family: var(--display);
  font-size: clamp(52px, 8vw, 84px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.calc__total small {
  font-family: var(--body);
  font-size: 16px;
  font-weight: 600;
  color: var(--faint);
  letter-spacing: 0.5px;
}

.calc__each {
  font-size: 15px;
  color: var(--muted);
  width: 100%;
  margin: 0;
}
.calc__each strong { color: var(--brand-hi); }

/* -------------------------------------------------------- plan preview --- */

/* Reuses .calc's frame; only the output layout is bespoke. */
.plan-builder__picks button { min-width: auto; padding: 14px 22px; font-family: var(--body); font-size: 13px; letter-spacing: 0.4px; text-transform: none; }

.plan-builder__out {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  border-top: 1px solid var(--line);
  padding-top: 26px;
  margin-top: 26px;
}
.plan-builder__out h3 { margin-bottom: 10px; }
.plan-builder__out p { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0; }

@media (max-width: 640px) {
  .plan-builder__out { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------- scroll reveal -- */

/* Scoped to .js so that if the script never runs — blocked, errored, old
   browser — the content is simply visible rather than stuck at opacity 0. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .js .reveal.is-in { opacity: 1; transform: none; }
}

/* --------------------------------------------------------- legal doc ----- */

.legal { max-width: 78ch; }

.legal h2 {
  font-family: var(--sub);
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--brand-hi);
  margin: 2.2em 0 0.7em;
}
.legal h2:first-of-type { margin-top: 0; }

.legal h3 {
  font-family: var(--body);
  font-weight: 700;
  font-size: 17px;
  margin: 1.6em 0 0.4em;
}

.legal p { color: var(--muted); }

.legal ol {
  list-style: upper-alpha;
  padding-left: 1.6em;
  margin: 0 0 1.4em;
  color: var(--muted);
}
.legal ol li { margin-bottom: 0.9em; padding-left: 0.4em; }

.legal .attest {
  border: 1px solid var(--brand);
  background: rgba(176, 26, 19, 0.1);
  padding: 22px 24px;
  color: #fff;
  font-weight: 600;
  margin-top: 2em;
}

/* --------------------------------------------------------- utilities ----- */

.stack > * + * { margin-top: 1.1em; }
.center { text-align: center; }
.mb-0 { margin-bottom: 0; }
.mt-lg { margin-top: clamp(30px, 4vw, 56px); }

/* Alternating section ground — every other block sits on the deeper black. */
.section--deep { background: var(--bg-deep); }

/* Readable measure for intro paragraphs. */
.measure { max-width: 60ch; }

.split--top { align-items: start; }

/* Photo slots stacked above card copy. */
.icard > .shot,
.icard > .photo { margin-bottom: 22px; }

.footer__map--lg { aspect-ratio: 4 / 3; }

.contact-address {
  font-style: normal;
  font-size: 17px;
  line-height: 1.8;
}
.contact-address strong,
.strong-white { color: #fff; }

/* Contact card — the same waving-flag texture as the homepage hero,
   behind the address and hours, so the page opens on brand immediately. */
.contact-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  padding: clamp(24px, 3vw, 34px);
}
.contact-card__flag {
  position: absolute;
  inset: 0;
  background-image: url("../q-fitness-hero/flag-ripple.png");
  background-size: cover;
  background-position: center;
  opacity: 0.5;
}
.contact-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, rgba(6,8,13,0.95), rgba(6,8,13,0.86) 55%, rgba(194,12,12,0.3));
}
.contact-card__body { position: relative; z-index: 1; }
.contact-card .contact-address a { color: var(--brand-hi); }

/* Entrance reference photo + map, side by side. */
.locate-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
.locate-grid__photo { margin: 0; display: flex; flex-direction: column; }
.locate-grid__photo img { flex: 1; object-fit: cover; }
.locate-grid__map.footer__map--lg {
  aspect-ratio: auto;
  min-height: 220px;
  height: 100%;
  display: block;
}
@media (max-width: 900px) {
  .locate-grid { grid-template-columns: 1fr; }
}

.note {
  border-left: 3px solid var(--brand);
  background: rgba(194, 12, 12, 0.08);
  padding: 18px 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 80ch;
}

/* ------------------------------------------------------- responsive ------- */

@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .nav-toggle { display: flex; }

  .nav {
    position: fixed;
    inset: 84px 0 auto 0;
    background: var(--bg-deep);
    border-bottom: 1px solid var(--line);
    display: none;
    margin: 0;
  }
  .nav.is-open { display: block; }
  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px var(--gutter) 26px;
  }
  .nav__list a {
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 15px;
  }
  .nav__cta { display: none; }

  .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .split, .versus__cols { grid-template-columns: 1fr; }
  .split--flip > *:first-child { order: 0; }
  .step { grid-template-columns: 1fr; gap: 8px; }
  .form__row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .grid--4 { grid-template-columns: 1fr; }
  .btn { padding: 16px 30px; width: 100%; text-align: center; }
  .hero__actions { flex-direction: column; }
  .footer__grid { grid-template-columns: 1fr; }
  .slide__letter { width: 60px; height: 60px; font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}