/* ============================================================
   Downtown Fitness — "COME ON IN"
   Fjalla One does all display, always caps. Source Sans Pro for
   every sub-line and body. Red enters at the door, not before.
   ============================================================ */

:root {
  --black: #000000;
  --ink: #161616;
  --red: #C72828;
  --red-hot: #EB3D3D;
  --g1: #A4A4A4;
  --g2: #E2E2E2;
  --cream: #F7F7F7;
  --display: 'Fjalla One', 'Arial Narrow', 'Helvetica Neue Condensed', Impact, 'Helvetica Neue', Arial, sans-serif;
  --body: 'Source Sans Pro', 'Source Sans 3', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --gutter: clamp(24px, 6vw, 96px);
  /* Display ramp, x1.32. Every headline picks a step; no bespoke clamps.
     Red rule: --red is a GROUND and dim stroke (planes, fills, watermark stroke).
     --red-hot is INK ON DARK and the lit state — small type on #0A0A0A needs 4.5:1,
     and #C72828 gives 3.55:1 while #EB3D3D gives 5.06:1. */
  --d1: clamp(26px, 3vw, 40px);
  --d2: clamp(32px, 4vw, 56px);
  --d3: clamp(34px, 5vw, 76px);
  --d4: clamp(38px, 6.4vw, 100px);
  --d5: clamp(40px, 8vw, 132px);
  --d6: clamp(44px, 9.4vw, 168px);
  --track-small: 0.12em;
  --track-large: -0.01em;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--black);
  color: var(--cream);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.45;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--gutter); top: -60px; z-index: 50; padding: 10px 14px; background: var(--red); color: var(--cream); font-family: var(--display); text-transform: uppercase; letter-spacing: var(--track-small); text-decoration: none; }
.skip:focus { top: 12px; outline: 3px solid var(--cream); }

/* Focus states: visible everywhere, never removed */
:focus-visible { outline: 3px solid var(--red-hot); outline-offset: 3px; }

/* JS / no-JS gates */
.no-js .js-only { display: none !important; }
.js .no-js-only { display: none !important; }
/* WE'RE OPEN flag (film.js CONFIG.WE_ARE_OPEN). html.closed shows the closed line instead. */
.closed-line { display: none; }
.closed .closed-line { display: inline; }
.closed .open-line { display: none; }

/* ------------------------------------------------------------
   Display type
   ------------------------------------------------------------ */
.beat h2, .lid-band h2, .room h3, .specials h2, .reviews h2, .visit h2, .sheet h2 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--track-large);
  line-height: 0.92;
}

/* Buttons */
.btn {
  display: inline-block;
  font-family: var(--display);
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: var(--track-small);
  line-height: 1;
  padding: 18px 28px;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: transform .15s ease, background-color .2s ease, color .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn-red { background: var(--red); color: var(--cream); border-color: var(--red); }
.btn-red:hover { background: #A61F1F; border-color: #A61F1F; }
.btn-ink { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn-ink:hover { background: var(--black); }
.btn-outline-cream { background: transparent; color: var(--cream); border-color: var(--cream); }
.btn-outline-cream:hover { background: var(--cream); color: var(--red); }
.btn-xl { font-size: 26px; padding: 24px 40px; }

/* ------------------------------------------------------------
   CHROME — fixed header
   ------------------------------------------------------------ */
.chrome {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 16px var(--gutter);
  color: var(--cream);                       /* inside: white; also the default when the sampled top strip is dark */
  transition: color .2s ease, background-color .3s ease, opacity .2s ease;
}
.chrome[data-zone="lot"] { opacity: 0; visibility: hidden; }   /* the sign on the building is the logo */
.chrome[data-zone="out"].on-light { color: var(--ink); }        /* pale sky: near-black chrome, no red */
.chrome.past { background: var(--black); color: var(--cream); }  /* below the hero: a black bar under white chrome */
.no-js .chrome { opacity: 1; visibility: visible; background: var(--black); color: var(--cream); }

/* No plate: the mark carries its own white ring, so it reads on black, on ink and
   on a bright video frame alike. A plate reads as a sticker stuck on the page. */
.wordmark { display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; }
.wordmark:hover { opacity: .85; }

/* The header floats over footage that runs bright (sky) to dark (interior). A permanent
   top scrim gives the mark, the nav and the pill one consistent ground, so none of them
   depends on the luminance sampler having run yet. It lifts once the bar goes solid. */
.chrome::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 210%; z-index: -1;
  background: linear-gradient(to bottom, rgba(0,0,0,.60) 0%, rgba(0,0,0,.26) 58%, rgba(0,0,0,0) 100%);
  pointer-events: none; transition: opacity .3s ease; }
.chrome.past::before { opacity: 0; }

.nav { display: flex; align-items: center; gap: 22px; }
.nav a { font-family: var(--display); font-size: 13px; text-transform: uppercase; letter-spacing: var(--track-small); text-decoration: none; }
.nav a:not(.pill):hover { text-decoration: underline; text-underline-offset: 4px; }

.pill {
  display: inline-flex; align-items: center;
  border: 1.5px solid currentColor; border-radius: 999px;
  padding: 7px 13px 6px;
  background: transparent; color: inherit;
  white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.pill .clock { font-variant-numeric: tabular-nums; min-width: 5.2ch; }
.pill-sep { margin: 0 .38em; }                  /* flex items trim edge whitespace — space the dot explicitly */
/* Red enters the interface at the door, not before. */
.chrome[data-zone="in"] .pill, .chrome.past .pill, .no-js .pill { background: var(--red); border-color: var(--red); color: var(--cream); }
.closed .pill { background: var(--ink); border-color: var(--ink); color: var(--cream); }

/* ------------------------------------------------------------
   THE HERO — a real video, plays once, holds the last frame
   ------------------------------------------------------------ */
.hero {
  position: relative;
  height: 100vh; height: 100svh;
  overflow: hidden;
  background: var(--ink);                    /* the box behind the poster; the poster if the file is missing */
  contain: strict;
}
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;   /* 16:9 cover-fit, centre-cropped on portrait */
  background: var(--ink);
}

.band { position: absolute; left: 0; right: 0; opacity: 0; pointer-events: none; will-change: opacity; }
.band-light { bottom: 0; height: 58vh; background: linear-gradient(to top, rgba(247,247,247,.86) 0%, rgba(247,247,247,.62) 38%, rgba(247,247,247,0) 100%); }
.band-dark  { bottom: 0; height: 64vh; background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 42%, rgba(0,0,0,0) 100%); }
.band-top   { top: 0; height: 24vh; background: linear-gradient(to bottom, rgba(0,0,0,.88) 0%, rgba(0,0,0,.45) 50%, rgba(0,0,0,0) 100%); }

/* Play affordance — only when autoplay is refused */
.play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 14px;
  padding: 16px 24px 15px;
  background: var(--cream); color: var(--ink); border: 0; border-radius: 999px;
  font-family: var(--display); font-size: 15px; text-transform: uppercase; letter-spacing: var(--track-small);
  cursor: pointer; z-index: 3;
}
.play[hidden] { display: none; }               /* author display beats the UA [hidden] rule — restate it */
.play-icon { font-size: 13px; color: var(--red); }
.play:hover { background: #fff; }

/* Beats — copy over the video */
.beat {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 9vh;
  opacity: 0; pointer-events: none;
  will-change: opacity, transform;
  z-index: 2;
}
.beat h2 { max-width: 12ch; margin: 0 0 .3em; }
.beat p { font-family: var(--body); font-size: 19px; line-height: 1.35; max-width: 32ch; margin: 0; }
.beat-out { color: var(--ink); }
.beat-out h2 { font-size: clamp(44px, 9vw, 150px); }
.beat-in { color: var(--cream); }
.beat-in h2 { font-size: clamp(40px, 8vw, 132px); }
/* Inside, every headline carries the 4px red rule above it — the first red on the page. */
.beat-in h2::before { content: ''; display: block; width: 88px; height: 4px; background: var(--red); margin-bottom: .32em; }
.beat-first h2 { font-size: clamp(64px, 12vw, 210px); }   /* YOU'RE IN. — the largest type on the site */

.beat-lot {
  left: 0; right: 0; bottom: 6vh; text-align: center;
  font-family: var(--display); font-size: 14px; text-transform: uppercase; letter-spacing: var(--track-small);
  color: var(--ink); opacity: 1;                          /* visible before JS: the poster is the first frame */
}

.beat-finale { left: var(--gutter); right: var(--gutter); bottom: 8vh; text-align: center; }
.beat-finale h2 { max-width: none; margin: 0 auto .35em; font-size: clamp(40px, 8.8vw, 150px); }
.beat-finale .clock { display: inline-block; min-width: 6.9ch; text-align: center; }
.beat-finale h2::before { display: none; }
.beat-finale .hot { color: var(--red-hot); font-variant-numeric: tabular-nums; }
.beat-finale .btn { margin: 6px 0 14px; }
.beat-finale .addr { font-size: 14px; max-width: none; opacity: .92; }
.beat-finale .addr a { text-decoration: none; }
.beat-finale .addr a:hover { text-decoration: underline; }

/* Reduced motion / no JS / autoplay refused: the poster + the finale copy on its dark band */
.no-js .beat-lot { display: none; }
.no-js .beat-finale, .no-js .band-dark { opacity: 1 !important; pointer-events: auto; }
.no-js .chrome .pill { background: var(--red); }

/* ------------------------------------------------------------
   AFTER THE HERO
   ------------------------------------------------------------ */
.seam-anchor { position: relative; height: 0; }

.lid-band { background: var(--black); color: var(--cream); padding: 18vh var(--gutter); text-align: center; }
.lid-band h2 { font-size: clamp(34px, 7vw, 120px); }

/* Rooms */
.rooms { background: var(--black); }
.room { position: relative; min-height: 70vh; display: flex; align-items: flex-end; overflow: hidden; }
.room-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* a full-height solid gradient so the copy block always sits on dark, whatever the still */
.room-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.66) 38%, rgba(0,0,0,.22) 70%, rgba(0,0,0,0) 100%); }
.room-copy { position: relative; z-index: 1; padding: 8vh var(--gutter) 8vh; color: var(--cream); max-width: 100%; }
.room-tag { display: block; font-family: var(--display); font-size: 13px; text-transform: uppercase; letter-spacing: var(--track-small); color: var(--cream); margin-bottom: 14px; }
.room h3 { font-size: clamp(36px, 6vw, 104px); }
.room h3::before { content: ''; display: block; width: 88px; height: 4px; background: var(--red-hot); margin-bottom: .32em; }
.room p { font-size: 19px; max-width: 32ch; margin: .6em 0 0; color: var(--g2); }
.room-type { background: var(--ink); min-height: 56vh; }
.room-sauna { background: var(--black); }

.amenities {
  list-style: none; margin: 0; padding: 40px var(--gutter);
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  font-family: var(--display); font-size: 14px; text-transform: uppercase; letter-spacing: var(--track-small); color: var(--g1);
  border-top: 1px solid rgba(255,255,255,.1);
}
.amenities li::before { content: '·'; margin-right: 12px; color: var(--red); }

/* GYM SPECIALS! — the banner's own idiom */
.specials { background: var(--red); color: var(--cream); padding: 12vh var(--gutter) 12vh; }
.specials h2 { font-size: clamp(56px, 12vw, 220px); }
.specials .lead { font-size: 22px; max-width: 34ch; margin: .8em 0 2.4em; }
.offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; max-width: 1000px; }
.offer { background: rgba(0,0,0,.18); padding: 28px; border-radius: 2px; }
.offer h3 { font-family: var(--display); font-size: 30px; text-transform: uppercase; letter-spacing: var(--track-large); margin: 10px 0 8px; }
.offer p { margin: 0; color: rgba(247,247,247,.92); }
.offer-placeholder { border: 2px dashed rgba(247,247,247,.7); background: transparent; }
.offer-flag { display: inline-block; font-family: var(--display); font-size: 12px; text-transform: uppercase; letter-spacing: var(--track-small); background: var(--cream); color: var(--red); padding: 5px 9px 4px; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }

/* 4.7★ */
.reviews { background: var(--ink); color: var(--cream); padding: clamp(72px,9vw,132px) var(--gutter); }
.rating { font-family: var(--display); line-height: 1; margin-bottom: 20px; }
.rating-num { font-size: clamp(90px, 16vw, 260px); letter-spacing: -.02em; }
.rating-star { font-size: clamp(40px, 7vw, 120px); color: var(--red-hot); vertical-align: top; margin-left: .06em; }
.reviews h2 { font-size: var(--d4); max-width: 14ch; }
.reviews p { margin-top: 28px; font-size: 19px; }
.text-link { color: var(--cream); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; text-decoration-color: var(--red-hot); }
.text-link:hover { color: var(--red-hot); }

/* VISIT */
.visit { background: var(--cream); color: var(--ink); padding: 12vh var(--gutter); }
.visit-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 6vw; align-items: stretch; }
.visit h2 { font-size: var(--d4); }
.visit-lead { font-size: 24px; margin: .6em 0 1.6em; }
.visit address { font-style: normal; font-size: 22px; line-height: 1.35; margin-bottom: 36px; }
.visit address a { display: block; text-decoration: none; }
.visit address a:hover { text-decoration: underline; text-underline-offset: 5px; }
.addr-link { margin-bottom: 14px; }
.tel-link { font-family: var(--display); font-size: 34px; text-transform: uppercase; letter-spacing: var(--track-large); }
.tagline { display: flex; align-items: center; gap: 22px; margin-top: 44px; font-size: 17px; color: #444; }
.badge { width: 150px; height: auto; }
.visit-map { min-height: 380px; background: var(--g2); }
.visit-map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }

/* Footer */
.foot { background: var(--black); color: var(--g1); padding: 8vh var(--gutter) 10vh; text-align: center; }
.badge-foot { width: 190px; margin: 0 auto 26px; filter: invert(1); }   /* white badge on black */
.foot-line { font-family: var(--display); font-size: 15px; text-transform: uppercase; letter-spacing: var(--track-small); color: var(--cream); margin: 0 0 10px; }
.foot-line a, .foot-sub a { text-decoration: none; }
.foot-line a:hover, .foot-sub a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot-sub { font-size: 14px; margin: 0; }

/* Mobile sticky bar (shown after the hero, mobile only) */
.mbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  display: none; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--black); color: var(--cream);
  transform: translateY(110%); transition: transform .3s ease;
}
.mbar.show { transform: translateY(0); }
.mbar-status { font-family: var(--display); font-size: 13px; text-transform: uppercase; letter-spacing: var(--track-small); white-space: nowrap; }
.mbar .btn { padding: 14px 20px; font-size: 16px; }

/* The two-button sheet */
.sheet { border: 0; padding: 0; margin: auto auto 0; width: 100%; max-width: 100%; background: transparent; color: var(--ink); }
.sheet::backdrop { background: rgba(0,0,0,.6); }
.sheet-inner { background: var(--cream); padding: 28px 22px calc(22px + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; display: grid; gap: 12px; }
.sheet h2 { font-size: 40px; }
.sheet-sub { margin: -4px 0 8px; color: #444; font-size: 16px; }
.sheet .btn { text-align: center; font-size: 20px; padding: 20px; }
.sheet-close { background: none; border: 0; font-family: var(--display); font-size: 14px; text-transform: uppercase; letter-spacing: var(--track-small); color: #444; padding: 12px; cursor: pointer; }
@media (min-width: 769px) { .sheet { max-width: 420px; margin: auto; } .sheet-inner { border-radius: 8px; } }

/* Reveal entrances (GSAP, once) — only when html.motion is set by film.js */
.motion .reveal { opacity: 0; transform: translateY(24px); }

/* ------------------------------------------------------------
   Portrait / mobile — beats laid out separately for the centre-cropped frame
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  body { font-size: 17px; }
  .chrome { padding: 14px 5vw; gap: 12px; }
  .nav { gap: 14px; }
  .nav a:not(.pill) { display: none; }          /* on a phone the pill is the nav */
  .pill { font-size: 12px; padding: 7px 11px 6px; }

  .beat { bottom: 11vh; }
  .beat p { font-size: 17px; max-width: 30ch; }
  .beat-out h2 { font-size: 14vw; max-width: none; }
  .beat-in h2 { font-size: 13vw; max-width: none; }
  .beat-first h2 { font-size: 18vw; }
  .beat-finale h2 { font-size: 12.5vw; }
  .beat-finale { bottom: 9vh; }
  .band-light { height: 62vh; }
  .band-dark { height: 68vh; }

  .room { min-height: 62vh; }
  .room h3 { font-size: 11vw; }
  .visit-grid { grid-template-columns: 1fr; gap: 40px; }
  .visit-map { min-height: 300px; }
  .btn-xl { font-size: 22px; padding: 20px 30px; }
  .mbar { display: flex; }
  .foot { padding-bottom: calc(10vh + 72px); }   /* room for the bar */
}

/* Reduced motion: no transitions to speak of; the hero is the poster + finale copy (film.js) */
@media (prefers-reduced-motion: reduce) {
  .btn, .pill, .chrome, .mbar { transition: none; }
}

/* ============================= THE OPENING (the still push, GPU-only) */
.pre{position:absolute;inset:0;overflow:hidden;background:#161616;opacity:.999} /* .999: the video below stays "visible" to the compositor, so its visible-playback re-init (~360ms) fires under the still, not after the cut */
.pre img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;transform:scale(1);transform-origin:50% 42%;will-change:transform}
.hero-video{transform:translateZ(0)} /* promoted from first paint: no layer promotion stall at the handoff */
.hero.film .pre img{will-change:auto}
.hero.pre-run .pre img{transition:transform 6.8s cubic-bezier(.25,.1,.5,1);transform:scale(1.10)}
.hero.film .pre{opacity:0;transition:opacity .55s ease .05s;pointer-events:none} /* smooth hand-off into the film */
html.static .pre img{transform:none}

/* Below-fold sections raster only when approached: kills the one-time whole-page
   tile storm (~350ms GPU task) that otherwise lands ~1s after the hero cut. */
/* content-visibility removed: the GPU tile storm it guarded against was actually the
   video occlusion re-init (fixed via .pre opacity .999), and auto-sizing was reserving
   wrong heights = scroll jump. Sections raster normally now. */


/* ============================================================
   PHIVE VOLUME, LINDSEY STREET VOICE — 2026-09-06 rebuild
   One claim, one button, the name at fascia size. Flat black,
   signal red, cream. No cards, no icons, no gradients as decoration.
   ============================================================ */

/* Chrome is on from the first paint now (the claim is, too). Pale sky → ink chrome. */
.chrome[data-zone="lot"] { opacity: 1; visibility: visible; }
.chrome[data-zone="lot"].on-light { color: var(--ink); }
.wordmark img { display: block; height: 40px; width: auto; flex: none; max-width: none; }   /* flex + the global max-width:100% collapses an auto-width image to 0 */
.wordmark { align-items: center; }
.pill-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red-hot); display: inline-block; margin-right: 8px; }
.chrome[data-zone="in"] .pill-dot, .chrome.past .pill-dot { background: var(--cream); }

/* THE CLAIM — static over the hero, on its own solid band (never text-shadow over video). */
.band-claim { bottom: 0; height: 78vh; opacity: 1; background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.66) 34%, rgba(0,0,0,.28) 62%, rgba(0,0,0,0) 100%); }
.claim {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 25vh; z-index: 3;
  color: var(--cream); display: flex; flex-direction: column; gap: 26px; max-width: 1000px;
}
.claim h1 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: var(--track-large); line-height: .92; font-size: var(--d4); margin: 0; text-wrap: balance; }
.claim-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.claim-addr { margin: 0; font-size: 17px; color: var(--g2); }
.claim-addr a { text-decoration: none; }
.claim-addr a:hover { text-decoration: underline; text-underline-offset: 4px; }
.claim-addr .hot { color: var(--red-hot); font-variant-numeric: tabular-nums; }

/* THE NAME — one static line at fascia size, cut by the frame edge the way a sign is. No motion. */
.ticker { position: absolute; left: 0; right: 0; bottom: 2vh; z-index: 2; overflow: hidden; pointer-events: none; }
.ticker-track { display: flex; white-space: nowrap; width: max-content; }
.ticker-track span { font-family: var(--display); text-transform: uppercase; letter-spacing: var(--track-large); line-height: 1; font-size: clamp(48px, 8.5vw, 132px); color: var(--red); padding-left: var(--gutter); }

/* The walk-in ends: the film fades to flat black and the claim sits on a calm ground. */
/* The film settles on the doorway rather than on black: the page keeps a face,
   and the claim keeps its scrim. */
/* The walk stops at the end of the cardio aisle and the page returns to the front
   of the building: the SAME storefront plate it opened on, still pushed in. No new
   asset, and the hero reads as a round trip rather than a dead end. */
.hero.done .hero-video { opacity: 0; transition: opacity 1.6s ease; }
.hero.done .pre { opacity: 1; transition: opacity 1.6s ease; }

/* ---- quiet motion. Everything here is small, once, and off under reduced motion. ---- */
@media (prefers-reduced-motion: no-preference) {
  [data-rise] { opacity: 0; transform: translate3d(0, 14px, 0);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
  [data-rise].risen { opacity: 1; transform: none; }
  .pill-dot { animation: breathe 2.8s ease-in-out infinite; }
  @keyframes breathe { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.82); } }
}
.no-js [data-rise] { opacity: 1; transform: none; }

/* the nav underline grows from the left */
.nav a:not(.pill) { position: relative; }
.nav a:not(.pill)::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.nav a:not(.pill):hover::after, .nav a:not(.pill):focus-visible::after { transform: scaleX(1); }

/* the strip lifts the frame you are looking at, instead of scaling it out of its box */
.strip img { filter: brightness(.86); transition: filter .45s ease; }
.strip img:hover { filter: brightness(1.02); }

/* roll call: the row you point at steps toward you */
.roll-row { transition: transform .35s cubic-bezier(.22,.61,.36,1), border-color .35s ease; }
.roll-row:hover { transform: translateX(8px); border-top-color: #4A4A4A; }
.roll-row .roll-no { transition: color .35s ease; }
.roll-row:hover .roll-no { color: var(--red-hot); }

/* buttons lift a little on hover */
.btn { will-change: transform; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }

/* ---- ASK THE DESK — the assistant panel ---- */
.desk { position: fixed; right: 20px; bottom: 20px; z-index: 40; display: flex;
  flex-direction: column; align-items: flex-end; gap: 12px; }
.desk-btn { display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: var(--display); font-size: 15px; text-transform: uppercase; letter-spacing: var(--track-small);
  color: var(--cream); background: var(--red); border: 2px solid var(--red); border-radius: 999px;
  padding: 13px 20px 12px 16px; box-shadow: 0 10px 30px rgba(0,0,0,.45);
  transition: background-color .25s ease, transform .25s ease; }
.desk-btn:hover { background: #A61F1F; border-color: #A61F1F; transform: translateY(-2px); }
.desk-ico { display: grid; place-items: center; width: 20px; height: 20px; }
.desk-ico svg { width: 20px; height: 20px; }
.desk.is-open .desk-btn-txt { display: none; }
.desk.is-open .desk-btn { padding: 13px 16px 12px; }

.desk-panel { width: min(370px, calc(100vw - 40px)); background: var(--ink); color: var(--cream);
  border: 1px solid #2E2E2E; border-radius: 6px; padding: 16px 16px 14px;
  box-shadow: 0 24px 70px rgba(0,0,0,.65); order: -1; display: flex; flex-direction: column; gap: 10px; }
.desk-panel[hidden] { display: none; }
.desk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.desk-logo { height: 32px; width: auto; max-width: none; }
.desk-close { background: none; border: 0; color: var(--g1); font-size: 26px; line-height: 1;
  cursor: pointer; padding: 0 4px; }
.desk-close:hover { color: var(--cream); }
.desk-sub { margin: 0; font-size: 13px; line-height: 1.4; color: var(--g1); }
.desk-sub a { color: var(--red-hot); }

.desk-log { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto;
  padding: 6px 2px; scrollbar-width: thin; }
.desk-msg { max-width: 86%; padding: 10px 13px; border-radius: 12px; font-size: 15px; line-height: 1.45;
  white-space: pre-wrap; animation: deskin .28s ease both; }
@keyframes deskin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .desk-msg { animation: none; } }
.desk-bot { align-self: flex-start; background: #242424; border-bottom-left-radius: 3px; }
.desk-you { align-self: flex-end; background: var(--red); color: var(--cream); border-bottom-right-radius: 3px; }
.desk-msg.is-thinking { color: var(--g1); font-style: italic; }
.desk-msg.is-err { background: #2A1414; }
.desk-callnow { display: inline-block; margin-top: 6px; color: var(--red-hot); font-family: var(--display);
  text-transform: uppercase; letter-spacing: var(--track-small); font-size: 14px; }

.desk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.desk-chip { cursor: pointer; background: transparent; color: var(--g2); border: 1px solid #3A3A3A;
  border-radius: 999px; padding: 7px 12px; font: 13px/1.2 var(--body);
  transition: border-color .2s ease, color .2s ease, background-color .2s ease; }
.desk-chip:hover { border-color: var(--cream); color: var(--cream); background: #202020; }

.desk-form { display: flex; align-items: center; gap: 8px; border-top: 1px solid #2E2E2E; padding-top: 10px; }
.desk-input { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; color: var(--cream);
  font: 15px/1.3 var(--body); padding: 8px 2px; }
.desk-input:focus { outline: none; }
.desk-input::placeholder { color: #7E7E7E; }
.desk-send { flex: none; width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer;
  background: var(--red); color: var(--cream); border: 0; border-radius: 50%;
  transition: background-color .2s ease, opacity .2s ease; }
.desk-send:hover { background: #A61F1F; }
.desk-send:disabled { opacity: .45; cursor: default; }
.desk-send svg { width: 17px; height: 17px; }

/* ---- FAQ ---- */
.faq { background: var(--ink); color: var(--cream); padding: clamp(72px,9vw,120px) var(--gutter);
  display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(32px,5vw,80px); align-items: start; }
.faq h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase;
  letter-spacing: var(--track-large); line-height: .92; font-size: var(--d3); margin: 0; }
.faq-list { border-top: 1px solid #2E2E2E; }
.faq-item { border-bottom: 1px solid #2E2E2E; }
.faq-item summary { cursor: pointer; list-style: none; padding: 20px 34px 20px 0; position: relative;
  font-family: var(--display); text-transform: uppercase; letter-spacing: var(--track-small);
  font-size: clamp(17px,1.6vw,21px); transition: color .25s ease; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--red-hot); }
.faq-item summary::after { content: ''; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg); transition: transform .3s ease; }
.faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-item[open] summary { color: var(--red-hot); }
.faq-item p { margin: 0 0 22px; color: var(--g2); font-size: 17px; line-height: 1.55; max-width: 56ch; }
.faq-item a { color: var(--cream); text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--red-hot); }

/* ---- reviews as cards (the shape Circle liked on 21st.dev, native) ---- */
.rv { background: #FFFFFF; border: 1px solid #E4E0DC; border-radius: 10px; padding: 22px 22px 20px;
  box-shadow: 0 10px 30px rgba(15,15,17,.06); border-top: 1px solid #E4E0DC;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease; }
.rv:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(15,15,17,.12); }

@media (max-width: 900px) {
  .faq { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .desk { right: 14px; bottom: calc(72px + env(safe-area-inset-bottom)); }
  .desk-btn-txt { display: none; }
  .desk-btn { padding: 14px; }
  .desk-log { max-height: 40vh; }
}

/* PROOF — four numbers on the fascia red. */
.proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--red); color: var(--cream); }
.proof-cell { display: flex; align-items: baseline; gap: 12px; padding: 26px var(--gutter); border-right: 1px solid rgba(0,0,0,.25); }
.proof-cell:last-child { border-right: 0; }
.proof-num { font-family: var(--display); font-size: var(--d2); line-height: 1; font-variant-numeric: tabular-nums; }
.proof-lbl { font-family: var(--display); font-size: 13px; text-transform: uppercase; letter-spacing: var(--track-small); }

/* THE FLOOR — the roll call. */
.kicker { font-family: var(--display); font-size: 13px; text-transform: uppercase; letter-spacing: var(--track-small); color: var(--red-hot); margin: 0 0 18px; }
.floor { background: var(--black); color: var(--cream); padding: clamp(72px, 9vw, 120px) var(--gutter) 40px; }
.floor-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 36px; }
.floor h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: var(--track-large); font-size: var(--d1); color: var(--g1); }
.floor-sub { margin: 0; font-family: var(--display); font-size: 13px; text-transform: uppercase; letter-spacing: var(--track-small); color: var(--g1); }
.roll { list-style: none; margin: 0; padding: 0; }
.roll-row { display: grid; grid-template-columns: 80px 1fr 420px; gap: 24px; align-items: baseline; padding: 26px 0; border-top: 1px solid #2A2A2A; }
.roll-row:last-child { border-bottom: 1px solid #2A2A2A; }
.roll-no { font-family: var(--display); font-size: 18px; letter-spacing: var(--track-small); color: var(--red-hot); }
.roll-name { font-family: var(--display); text-transform: uppercase; letter-spacing: var(--track-large); line-height: .92; font-size: var(--d3); }
.roll-sub { color: var(--g1); font-size: 17px; max-width: 42ch; }

/* THE STRIP — a seamless marquee of the real rooms (sections.js builds the track). */
.strip { background: var(--black); padding: 40px 0 clamp(72px, 9vw, 120px); display: flex; overflow-x: auto; scrollbar-width: none; }   /* no JS: a plain horizontal scroll; sections.js switches it to a marquee */
.strip, .strip-track { display: flex; gap: 8px; flex: none; }
.strip img { height: clamp(220px, 36vh, 440px); width: auto; flex: none; object-fit: cover; display: block; }

/* TRAINING */
.train { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; background: var(--black); color: var(--cream); padding: 0 var(--gutter) clamp(72px, 9vw, 120px); }
.train-photo { overflow: hidden; }
.train-photo img { width: 100%; height: clamp(320px, 52vh, 620px); object-fit: cover; display: block; }
.train-copy { position: relative; max-width: 560px; }
.train-rule { display: block; width: 88px; height: 4px; background: var(--red); margin-bottom: 26px; }
.train h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: var(--track-large); line-height: .92; font-size: var(--d4); margin: 0 0 .35em; }
.train p { font-size: 19px; color: var(--g2); max-width: 44ch; margin: 0 0 1.4em; }

/* REVIEWS */
.reviews { background: var(--cream); color: var(--ink); padding: clamp(72px, 9vw, 120px) var(--gutter); }
.reviews-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 48px; }
.reviews h2 { font-size: var(--d4); max-width: 14ch; }
.reviews .text-link { color: var(--red); white-space: nowrap; font-family: var(--display); font-size: 13px; text-transform: uppercase; letter-spacing: var(--track-small); text-decoration: none; }
.reviews .text-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.rv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.rv { margin: 0; border-top: 3px solid var(--ink); padding-top: 22px; display: flex; flex-direction: column; gap: 16px; }
.rv-stars { color: var(--red); letter-spacing: .1em; font-size: 16px; }
.rv p { margin: 0; font-size: 19px; line-height: 1.4; }
.rv footer { font-family: var(--display); font-size: 12px; text-transform: uppercase; letter-spacing: var(--track-small); color: #5A5654; }

/* WHY WEST LINDSEY */
.why { display: grid; grid-template-columns: 1fr 1fr; background: var(--ink); color: var(--cream); }
.why-photo img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; display: block; }
.why-copy { padding: clamp(56px, 7vw, 96px) var(--gutter); display: flex; flex-direction: column; justify-content: center; }
.why h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: var(--track-large); line-height: .92; font-size: var(--d3); margin: 0 0 .4em; max-width: 12ch; }
.why p { font-size: 19px; color: var(--g2); max-width: 44ch; margin: 0 0 1.2em; }
.why-tag { color: var(--g1); font-size: 17px; }

/* VISIT + JOIN — one section, two halves. */
.visit { background: var(--black); color: var(--cream); padding: clamp(72px, 9vw, 120px) var(--gutter); display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 5vw, 72px); align-items: start; }
.visit h2 { font-size: var(--d6); color: var(--red); margin-bottom: .3em; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 32px; margin: 0 0 40px; max-width: 640px; }
.facts div { display: flex; flex-direction: column; gap: 6px; }
.facts dt { font-family: var(--display); font-size: 12px; text-transform: uppercase; letter-spacing: var(--track-small); color: var(--g1); }
.facts dd { margin: 0; font-size: 21px; line-height: 1.4; }
.facts dd a { text-decoration: none; }
.facts dd a:hover { text-decoration: underline; text-underline-offset: 5px; }
.facts .tel-link { font-family: var(--display); font-size: 26px; letter-spacing: var(--track-large); }
.facts-big { display: block; font-family: var(--display); text-transform: uppercase; font-size: var(--d2); line-height: .92; }
.facts-sub { display: block; color: var(--g1); font-size: 16px; margin-top: 4px; }
.visit-map { background: var(--ink); min-height: 300px; }
.visit-map iframe { width: 100%; height: 100%; min-height: 300px; border: 0; display: block; filter: grayscale(1) contrast(1.05); }

.join { background: var(--ink); padding: clamp(28px, 3vw, 40px); }
.lead { display: grid; gap: 20px; }
.lead h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: var(--track-large); line-height: .92; font-size: var(--d2); margin: 0 0 6px; }
.lead-row { display: grid; gap: 6px; }
.lead label { font-family: var(--display); font-size: 12px; text-transform: uppercase; letter-spacing: var(--track-small); color: var(--g1); }
.lead .opt { color: var(--g1); text-transform: none; letter-spacing: 0; font-family: var(--body); }
.lead input, .lead select { width: 100%; height: 52px; background: transparent; border: 0; border-bottom: 2px solid var(--g1); color: var(--cream); font: 17px/1.2 var(--body); padding: 0 2px; border-radius: 0; }
.lead select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--g1) 50%), linear-gradient(135deg, var(--g1) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 10px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.lead select option { color: var(--ink); }
.lead input:focus:not(:focus-visible), .lead select:focus:not(:focus-visible) { outline: none; }
.lead input:focus, .lead select:focus { border-bottom-color: var(--cream); border-bottom-width: 3px; }
.lead [aria-invalid="true"] { border-bottom-color: var(--red-hot); }
.lead input::placeholder { color: #8E8E8E; }
.lead .btn-xl { width: 100%; text-align: center; margin-top: 6px; }
.lead-note { margin: 0; color: var(--g1); font-size: 15px; }
.lead-done, .lead-err { margin: 0; font-size: 17px; }
.lead-done { color: var(--cream); font-family: var(--display); text-transform: uppercase; letter-spacing: var(--track-small); }
.lead-err { color: var(--red-hot); }
.lead[data-state="sent"] .lead-row, .lead[data-state="sent"] .btn-xl, .lead[data-state="sent"] .lead-note { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* FOOTER — the tagline as a marquee on red (sections.js drives #marq), then the facts. */
.foot { background: var(--black); color: var(--g1); padding: 0 0 8vh; text-align: center; }
.clock { font-variant-numeric: tabular-nums; }
.proof-num { min-width: 2.2ch; }
.floor h2, .train h2, .reviews h2, .why h2, .lead h3, .visit h2 { text-wrap: balance; }
.roll-sub, .train p, .why p, .rv p, .facts dd { text-wrap: pretty; }
.marq-wrap { background: var(--red); color: var(--cream); overflow: hidden; padding: 14px 0; }
.marq { display: flex; justify-content: center; padding: 0 var(--gutter); }
.marq span { font-family: var(--display); text-transform: uppercase; letter-spacing: var(--track-large); font-size: var(--d2); line-height: 1; text-align: center; }
.foot-inner { padding: 6vh var(--gutter) 0; }

/* Mobile */
@media (max-width: 900px) {
  .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-cell { padding: 18px 5vw; }
  .proof-cell:nth-child(2n) { border-right: 0; }
  .proof-cell:nth-child(-n+2) { border-bottom: 1px solid rgba(0,0,0,.25); }
  .roll-row { grid-template-columns: 36px 1fr; gap: 6px 10px; padding: 18px 0; }
  .roll-sub { grid-column: 2; }
  .train, .why, .visit { grid-template-columns: 1fr; }
  .train-photo img { height: 46vh; }
  .why-photo img { min-height: 0; height: 52vh; }
  .reviews-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .rv-grid { grid-template-columns: 1fr; gap: 32px; }
  .facts { grid-template-columns: 1fr; gap: 18px; }
  .floor-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 768px) {
  .claim { bottom: 22vh; gap: 18px; }
  .claim h1 { font-size: 13.5vw; }
  .claim-actions { flex-direction: column; align-items: stretch; }
  .claim-actions .btn { text-align: center; }
  .claim-addr { font-size: 15px; }
  .ticker { bottom: 1.5vh; }
  .ticker-track span { font-size: 13vw; }
  .band-claim { height: 84vh; }
  .visit-map { min-height: 240px; }
  .visit-map iframe { min-height: 240px; }
  .nav .pill { display: inline-flex; min-height: 44px; }
  .wordmark img { height: 32px; }   /* lives HERE: the base .wordmark img rule is later in the file and media queries add no specificity */
  .sheet-close { min-height: 44px; }
  .claim-addr a, .foot-sub a { display: inline-block; padding: 10px 0; }
  .foot { padding-bottom: calc(10vh + 72px); }   /* room for the sticky bar; must sit after the .foot base rule */
}

/* dev contract: ?flat pins the hero to 900px so one tall headless capture shows the whole page */
html.flat .hero { height: 900px; }
html.flat .chrome { position: absolute; }
html.flat .strip img { height: 300px; }
html.flat .train-photo img, html.flat .why-photo img { height: 380px; min-height: 0; }


/* ============================================================
   MOBILE PASS (2026-09-09). Lives at the END of the file on purpose:
   media queries add no specificity, so a phone rule only wins if
   nothing later in the file restates the same selector.
   ============================================================ */
@media (max-width: 768px) {
  .hero { height: 100svh; }
  .claim { bottom: 13vh; gap: 14px; left: 5vw; right: 5vw; }
  .claim h1 { font-size: 11.6vw; line-height: .9; }
  .claim-actions { gap: 10px; }
  .claim-actions .btn-xl { font-size: 19px; padding: 17px 22px; }
  .claim-addr { font-size: 14px; line-height: 1.5; }
  .claim-addr .clock, .claim-addr a { white-space: nowrap; }
  .band-claim { height: 90vh; }
  .ticker { bottom: 1.2vh; }
  .ticker-track span { font-size: 10.5vw; padding-left: 5vw; }
  .why-photo img { height: 46vh; min-height: 0; }
  .faq { padding: 56px 5vw; }
  .faq h2 { font-size: 11vw; }
  .faq-item summary { font-size: 16px; padding: 16px 30px 16px 0; }
  .reviews, .visit, .train, .floor { padding-left: 5vw; padding-right: 5vw; }
  .rv-grid { gap: 18px; }
  /* the desk button sits low until the sticky bar appears, then rides above it */
  .desk { bottom: 18px; right: 14px; }
  .mbar.show ~ .desk { bottom: calc(74px + env(safe-area-inset-bottom)); }
  .desk-panel { width: calc(100vw - 28px); }
}

/* MOBILE HERO (2026-09-09 pass 2). The portrait crop put the fascia sign dead centre and the
   claim straight under it, so sign, headline and banner all stacked. Lift the plate so the sign
   sits in the top third, park the claim in the bottom third over the dark lot, deepen the band,
   give the status its own line, and drop the ticker: cut to two words with a button on it, it
   was noise, not a signature. */
@media (max-width: 768px) {
  /* a landscape plate cover-fit to a portrait box already fills the height, so object-position-y is inert;
     zoom it a little and lift it with the individual translate property (never transform: the push animates that) */
  .pre img { height: 124%; translate: 0 -12%; }
  .band-claim { height: 92vh; background: linear-gradient(to top, rgba(0,0,0,.96) 0%, rgba(0,0,0,.78) 34%, rgba(0,0,0,.42) 62%, rgba(0,0,0,0) 100%); }
  .claim { bottom: 6vh; gap: 16px; }
  .claim h1 { font-size: 11vw; }
  .claim-addr { font-size: 14px; line-height: 1.45; }
  .claim-addr .js-only { display: block; margin-top: 4px; color: var(--cream); }
  .ticker { display: none; }
  .desk { bottom: 18px; }
  .claim-addr .sep { display: none; }
}

/* ---- FROM THE OWNER ---- */
.owner { background: var(--cream); color: var(--ink); padding: clamp(72px,9vw,120px) var(--gutter);
  display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px,6vw,96px); align-items: start;
  border-top: 1px solid #E4E0DC; }
.owner-photo { margin: 0; position: sticky; top: 90px; }
.owner-photo img { width: 100%; height: auto; display: block; border-radius: 6px; }
.owner-photo figcaption { margin-top: 12px; font-family: var(--display); font-size: 12px; text-transform: uppercase;
  letter-spacing: var(--track-small); color: #5A5654; }
.owner h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: var(--track-large);
  line-height: .92; font-size: var(--d4); margin: 0 0 .45em; }
.owner-quote { margin: 0; padding-left: 22px; border-left: 4px solid var(--red); }
.owner-quote p { margin: 0 0 1em; font-size: clamp(17px,1.5vw,20px); line-height: 1.55; max-width: 58ch; }
.owner-quote em { font-style: normal; text-transform: uppercase; font-family: var(--display); letter-spacing: var(--track-small); }
.owner-cta { font-family: var(--display); text-transform: uppercase; letter-spacing: var(--track-small); font-size: clamp(19px,1.8vw,24px) !important; }
.owner-quote footer { margin-top: 18px; font-family: var(--display); font-size: 13px; text-transform: uppercase;
  letter-spacing: var(--track-small); color: #5A5654; }
.owner-quote .sep { margin: 0 .4em; }

/* ---- SOCIAL, in the footer ---- */
.social { list-style: none; margin: 0 0 22px; padding: 0; display: flex; justify-content: center; gap: 14px; }
.social a { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--cream); color: var(--ink); transition: background-color .25s ease, color .25s ease, transform .25s ease; }
.social a:hover, .social a:focus-visible { background: var(--red); color: var(--cream); transform: translateY(-2px); }
.social svg { width: 22px; height: 22px; }

@media (max-width: 900px) {
  .owner { grid-template-columns: 1fr; }
  .owner-photo { position: static; max-width: 420px; }
}
@media (max-width: 768px) {
  .owner { padding: 56px 5vw; }
}

/* ---- PHONE HERO SEQUENCE: storefront push -> doorway drift -> back to the storefront ---- */
.pre2 { position: absolute; inset: 0; opacity: 0; pointer-events: none; overflow: hidden; }
.pre2 img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; display: block; }
@media (max-width: 768px) {
  .pre2 { transition: opacity 1.5s ease; }
  .pre2 img { transform: scale(1); transform-origin: 50% 45%; transition: transform 8.5s cubic-bezier(.25,.1,.5,1); }
  .hero.m2 .pre2 { opacity: 1; }
  .hero.m2 .pre2 img { transform: scale(1.09); }
  .hero.m3 .pre2 { opacity: 0; transition: opacity 1.8s ease; }
  .hero.m3 .pre2 img { transform: scale(1.09); transition: none; }
}
html.static .pre2 { display: none; }

/* ---- THE MENU BUTTON ---- */
.nav-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px;
  background: none; border: 0; color: inherit; cursor: pointer; font-family: var(--display);
  font-size: 13px; text-transform: uppercase; letter-spacing: var(--track-small); }
.nav-bars { display: grid; gap: 4px; width: 20px; }
.nav-bars i { display: block; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform .3s ease, opacity .2s ease; }
.nav-open .nav-bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-bars i:nth-child(2) { opacity: 0; }
.nav-open .nav-bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---- THE PANEL ---- */
.nav-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.66); opacity: 0;
  transition: opacity .35s ease; }
.nav-open .nav-scrim { opacity: 1; }
/* the page must not scroll behind an open panel; the gutter is reserved so nothing shifts */
html { scrollbar-gutter: stable; }
.nav-open body { overflow: hidden; }
.nav-scrim[hidden] { display: none; }
.nav-open .nav-scrim[hidden] { display: block; }

.sidenav { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(380px, 86vw);
  background: var(--black); color: var(--cream); border-left: 3px solid var(--red);
  transform: translate3d(100%,0,0); visibility: hidden;
  transition: transform .42s cubic-bezier(.4,0,.2,1), visibility 0s linear .42s;
  overflow-y: auto; overscroll-behavior: contain; }
.nav-open .sidenav { transform: translate3d(0,0,0); visibility: visible; transition-delay: 0s, 0s; }
.sidenav-in { display: flex; flex-direction: column; gap: 26px; padding: 20px 26px calc(30px + env(safe-area-inset-bottom)); min-height: 100%; }
.sidenav-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sidenav-eyebrow { font-family: var(--display); font-size: 12px; text-transform: uppercase;
  letter-spacing: var(--track-small); color: var(--g1); }
.sidenav-close { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px;
  background: none; border: 0; color: var(--cream); cursor: pointer; }
.sidenav-close svg { width: 22px; height: 22px; }
.sidenav-close:hover { color: var(--red-hot); }

.sidenav-list { list-style: none; margin: 0; padding: 0; }
.sidenav-list a { display: flex; align-items: baseline; gap: 14px; padding: 13px 0;
  border-bottom: 1px solid #232323; text-decoration: none; color: var(--cream);
  font-family: var(--display); font-size: clamp(24px,5.4vw,30px); text-transform: uppercase;
  letter-spacing: var(--track-large); line-height: 1; transition: color .2s ease, padding-left .25s ease; }
.sidenav-list li:first-child a { border-top: 1px solid #232323; }
.sidenav-list a:hover, .sidenav-list a:focus-visible { color: var(--red-hot); padding-left: 8px; }
.sidenav-list a.here { color: var(--red-hot); }
.sn-i { font-size: 12px; letter-spacing: var(--track-small); color: var(--g1); }
.sidenav-list a.here .sn-i { color: var(--red-hot); }

.sidenav-foot { margin-top: auto; display: flex; flex-direction: column; gap: 18px; }
.sn-lbl { display: block; font-family: var(--display); font-size: 11px; text-transform: uppercase;
  letter-spacing: var(--track-small); color: var(--g1); margin-bottom: 4px; }
.sidenav-call { text-decoration: none; color: var(--cream); }
.sn-num { font-family: var(--display); font-size: 27px; letter-spacing: var(--track-large); }
.sidenav-call:hover .sn-num { color: var(--red-hot); }
.sidenav-line { display: block; padding: 4px 0; text-decoration: none; color: var(--g2); font-size: 16px; }
.sidenav-line:hover { color: var(--cream); }
.sidenav-hours { margin: 0; color: var(--g2); font-size: 15px; }
.sidenav-hours .clock { font-variant-numeric: tabular-nums; }
.sidenav-social { list-style: none; margin: 4px 0 0; padding: 0; display: flex; gap: 12px; }
.sidenav-social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: #191919; color: var(--cream); transition: background-color .25s ease, color .25s ease; }
.sidenav-social a:hover, .sidenav-social a:focus-visible { background: var(--red); }
.sidenav-social svg { width: 20px; height: 20px; }

@media (max-width: 768px) {
  .nav-toggle-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .sidenav, .nav-scrim, .nav-bars i, .sidenav-list a { transition: none; }
}

/* ============================================================
   2026-09-16 OWNER PASS: at-a-glance band, personal training up top,
   meet our team, staffed hours. Kept at the END (see mobile pass note).
   ============================================================ */
.badges { background: var(--black); color: var(--cream); border-bottom: 1px solid #232323; padding: 22px var(--gutter); }
.badges ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 0; }
.badges li { font-family: var(--display); font-size: clamp(14px, 1.3vw, 18px); text-transform: uppercase; letter-spacing: var(--track-small); display: flex; align-items: center; }
.badges li + li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red-hot); margin: 0 clamp(14px, 1.6vw, 26px); }

.train { padding-top: clamp(72px, 9vw, 120px); }
.train h2 { font-size: var(--d4); max-width: 13ch; }
.train-list { list-style: none; margin: 0 0 1.8em; padding: 0; display: grid; gap: 12px; }
.train-list li { position: relative; padding-left: 30px; font-size: 18px; color: var(--cream); }
.train-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 16px; height: 3px; background: var(--red-hot); }
.train p.train-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.train-cta .btn-xl { font-size: 20px; padding: 18px 28px; }
html.flat .train-photo img { height: 520px; }

.team { background: var(--black); color: var(--cream); padding: clamp(72px, 9vw, 120px) var(--gutter); }
.team-head { max-width: 760px; margin-bottom: 48px; }
.team h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: var(--track-large); line-height: .92; font-size: var(--d4); margin: 0 0 .35em; }
.team-sub { color: var(--g2); font-size: 19px; margin: 0; }
.team-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 360px)); gap: clamp(20px, 3vw, 40px); }
.team-photo { aspect-ratio: 4 / 5; max-width: 100%; background: var(--ink); border: 1px dashed #3A3A3A; display: grid; place-items: center; margin-bottom: 18px; overflow: hidden; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-photo span { font-family: var(--display); font-size: var(--d5); color: #2E2E2E; line-height: 1; }
.team-card h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: var(--track-large); font-size: var(--d1); margin: 0 0 4px; }
.team-role { margin: 0; font-family: var(--display); font-size: 13px; text-transform: uppercase; letter-spacing: var(--track-small); color: var(--red-hot); }

.facts-hours { display: block; font-size: 19px; color: var(--g2); }
.facts-hours b { font-family: var(--display); font-weight: 400; font-size: 26px; letter-spacing: var(--track-large); color: var(--cream); margin-left: 6px; }
.facts .desk-now { display: block; margin-top: 6px; color: var(--red-hot); font-size: 17px; }
.sidenav-hours { line-height: 1.5; }
.sidenav-hours .desk-now { color: var(--red-hot); }

@media (max-width: 900px) {
  .badges ul { justify-content: flex-start; }
}
@media (max-width: 768px) {
  .badges { padding: 18px 5vw; }
  .badges ul { flex-direction: column; gap: 8px; }
  .badges li::before, .badges li + li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--red-hot); margin: 0 12px 0 0; }
  .train { padding-top: 56px; }
  .train-cta .btn { flex: 1 1 100%; text-align: center; }
  .team { padding: 56px 5vw; }
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .team-card h3 { font-size: 22px; }
  .claim h1 { font-size: 12vw; }
}
/* the full name now fits the width instead of bleeding off mid-word */
.ticker-track span { font-size: clamp(40px, 5.2vw, 96px); }
.badges li { font-size: clamp(13px, 1.1vw, 16px); }
@media (min-width: 769px) { .badges li + li::before { margin: 0 clamp(12px, 1.2vw, 20px); } }
@media (max-width: 768px) { .claim h1 { font-size: 10.4vw; } }

/* 2026-09-16 SEO/GEO + load pass */
.why-facts { font-size: 17px !important; color: var(--g1) !important; border-left: 3px solid var(--red); padding-left: 16px; }
.team-photo-empty { border-style: solid; border-color: #262626; grid-template-rows: 1fr auto; padding: 24px; gap: 12px; }
.team-photo-empty img { width: 55%; height: auto; object-fit: contain; align-self: end; justify-self: center; opacity: .5; }
.team-photo-empty span { font-family: var(--display); font-size: 12px; text-transform: uppercase; letter-spacing: var(--track-small); color: var(--g1); align-self: start; }
.strip-wrap { position: relative; background: var(--black); }
.strip-ctl { position: absolute; right: var(--gutter); top: 12px; z-index: 2; display: flex; gap: 8px; }
@media (min-width: 769px) { .strip { padding-top: 76px; } }
.strip-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid #3A3A3A; background: var(--black); color: var(--cream); font-size: 20px; cursor: pointer; transition: background-color .2s ease, border-color .2s ease; }
.strip-btn:hover:not(:disabled) { background: var(--red); border-color: var(--red); }
.strip-btn:disabled { opacity: .35; cursor: default; }
.strip { scroll-snap-type: x proximity; }
.strip img { scroll-snap-align: start; }
@media (max-width: 768px) {
  .strip-ctl { display: none; }
  .team-photo-empty { padding: 14px; }
  .team-photo-empty span { font-size: 11px; text-align: center; }
}

/* the reserved box: a lazy photo that has not arrived keeps its shape instead of collapsing to alt text */
.strip img { background: #111; color: transparent; }
@media (min-width: 1000px) {
  .team { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(40px, 5vw, 96px); align-items: center; }
  .team-head { margin-bottom: 0; }
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* audit 2026-09-16: section kickers lost to .train p / .why p (more specific) and rendered 19px grey */
.train .kicker, .why .kicker, .owner .kicker, .team .kicker { font-size: 13px; color: var(--red-hot); margin: 0 0 18px; max-width: none; }
.owner .kicker { color: var(--red); }   /* red-hot on cream is 3.7:1; the deeper red is 5.2:1 */
.why .why-tag { font-size: 17px; color: var(--g1); }

/* ============================================================
   SUBPAGES (2026-09-16): the eight search pages built by build_pages.py
   ============================================================ */
.subpage { background: var(--black); color: var(--cream); }
.pg { padding: 120px var(--gutter) 0; }
.pg-crumbs ol { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--display); font-size: 12px; text-transform: uppercase; letter-spacing: var(--track-small); color: var(--g1); }
.pg-crumbs li + li::before { content: "/"; margin-right: 6px; color: #6A6A6A; }
.pg-crumbs a { color: var(--g2); text-decoration: none; }
.pg-crumbs a:hover { color: var(--red-hot); }
.pg-hero { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; padding-bottom: clamp(48px, 6vw, 88px); border-bottom: 1px solid #232323; }
.pg-hero.has-photo { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.pg-hero h1 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: var(--track-large); line-height: .92; font-size: var(--d4); margin: 0 0 .4em; text-wrap: balance; }
.pg-lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--g2); max-width: 58ch; margin: 0 0 28px; }
.pg-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.pg-cta .btn-xl { font-size: 20px; padding: 18px 28px; }
.pg-photo { margin: 0; }
.pg-photo img { width: 100%; height: auto; max-height: 72vh; object-fit: cover; display: block; border-radius: 6px; }
.pg-facts { padding: clamp(48px, 6vw, 88px) 0; border-bottom: 1px solid #232323; }
.pg-facts h2.kicker { margin-bottom: 24px; }
.pg-facts .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; margin: 0; }
.pg-facts .facts dd { font-size: 19px; }
.pg-facts .facts .js-only { grid-column: 1 / -1; border-top: 1px solid #232323; padding-top: 20px; }
.pg-map { margin-top: 36px; min-height: 320px; background: var(--ink); }
.pg-map iframe { width: 100%; min-height: 320px; border: 0; display: block; filter: grayscale(1) contrast(1.05); }
.pg-body { padding: clamp(48px, 6vw, 88px) 0; max-width: 760px; }
.pg-body h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: var(--track-large); line-height: .95; font-size: var(--d2); margin: 1.4em 0 .5em; }
.pg-body h2:first-child { margin-top: 0; }
.pg-body p { font-size: 19px; line-height: 1.6; color: var(--g2); margin: 0 0 1em; }
.pg-faq { margin: 0 calc(-1 * var(--gutter)); }
.pg-rel { padding: clamp(48px, 6vw, 88px) 0; }
.pg-rel h2.kicker { margin-bottom: 20px; }
.pg-rel ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pg-rel a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 22px; background: var(--ink); border: 1px solid #262626; text-decoration: none; color: var(--cream); transition: border-color .2s ease; }
.pg-rel a:hover { border-color: var(--red); }
.pg-rel a > span:first-child { font-family: var(--display); font-size: 24px; text-transform: uppercase; letter-spacing: var(--track-large); line-height: 1; }
.pg-rel-d { font-size: 14px; color: var(--g1); }
.foot-pages ul { list-style: none; margin: 0 auto 36px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; max-width: 900px; }
.foot-pages a { display: inline-block; padding: 6px 0; font-family: var(--display); font-size: 14px; text-transform: uppercase; letter-spacing: var(--track-small); color: var(--g2); text-decoration: none; }
.foot-pages a:hover { color: var(--red-hot); }
.sidenav-more { list-style: none; margin: -8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.sidenav-more a { display: block; padding: 9px 0; color: var(--g2); text-decoration: none; font-size: 15px; line-height: 1.25; }
.sidenav-more a:hover { color: var(--red-hot); }
.roll-sub .text-link, .train-copy .text-link, .why-copy .text-link { font-size: 16px; white-space: nowrap; }
@media (max-width: 900px) {
  .pg-hero.has-photo { grid-template-columns: 1fr; }
  .pg-photo { order: -1; }
  .pg-photo img { max-height: 50vh; }
  .pg-facts .facts { grid-template-columns: 1fr 1fr; }
  .pg-rel ul { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .pg { padding: 92px 5vw 0; }
  .pg-hero h1 { font-size: 10.5vw; }
  .pg-cta .btn { flex: 1 1 100%; text-align: center; }
  .pg-facts .facts { grid-template-columns: 1fr; }
  .pg-faq { margin: 0 -5vw; }
  .subpage .foot { padding-bottom: 10vh; }
}

.pg-photo-inline { max-width: 560px; margin: 8px 0 1.4em; }
.pg-photo-inline img { max-height: none; }
@media (min-width: 769px) { .badges li { font-size: clamp(12px, 1vw, 15px); } .badges li + li::before { margin: 0 clamp(10px, 1vw, 16px); } }

/* visual pass 2026-09-16 */
.facts-solo b { margin-left: 0; }
.train p.train-more { margin: 18px 0 0; }
.pg-body h2 { line-height: 1.02; }
.pg-hero h1 { line-height: .96; }

summary.by-pointer:focus-visible { outline: none; }

/* subpage H1: long words ("NATIONALLY CERTIFIED", "HIGH-PRESSURE") ran off the edge between ~700
   and ~1000px. Size to the column, never past it. */
.pg-hero h1 { font-size: clamp(34px, 5vw, 92px); overflow-wrap: break-word; }
@media (max-width: 900px) { .pg-hero h1 { font-size: 8.4vw; } }
@media (max-width: 768px) { .pg-hero h1 { font-size: 9.6vw; } }