/* Loveland Athletic Club — the Forge design (see DESIGN.md at the project root).
   A dark page where content sits in deliberate frames: panels on near-black, full-width bands
   that step between two blacks, and photo bands only where they earn it. The white comparison
   table and the Google review cards are the two bright things. Phone and tablet rules are at
   the bottom. No build step: this file is served as-is. */

:root {
  --ink: #16181a;
  --ink-deep: #0f1112;
  --white: #fff;
  --red: #b0121a;
  --red-hover: #c4141d;
  --pink: #e0a1a4;
  --green: #2f9e5b;
  --text-2: #5c6065;
  --on-dark: #f2f1ef;
  --on-dark-2: #a9acb0;
  --on-dark-3: #8d9095;
  --s1: #1b1e20;
  --s2: #232629;
  --line: rgba(0, 0, 0, .12);
  --line-dark: rgba(255, 255, 255, .13);
  --r-panel: 10px;
  --r-photo: 6px;
  --r-btn: 6px;
  --display: 'Archivo Black', system-ui, sans-serif;
  --condensed: 'Archivo', system-ui, sans-serif;
  --body: Barlow, system-ui, sans-serif;
  --gutter: 32px;
  --tp: 80px;
  --concrete: #e9e8e6;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body { margin: 0; background: var(--ink); font-family: var(--body); color: var(--on-dark); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, figure { margin: 0; }
button, input, textarea { font: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 30; padding: 12px 16px; border-radius: var(--r-btn); background: var(--white); color: var(--ink); font: 600 15px/1 var(--body); }
.skip-link:focus { top: 12px; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.sec { padding-top: 112px; }

/* ---------- type ---------- */

.label { display: inline-block; font: 700 13px/1 var(--body); letter-spacing: .24em; text-transform: uppercase; color: #d6d5d3; }
.h2 { font: 400 clamp(28px, 3.4vw, 40px)/1.02 var(--display); text-transform: uppercase; text-wrap: balance; color: #fff; }
.h3 { font: 400 22px/1.1 var(--display); text-transform: uppercase; color: #fff; }
.lede { font: 400 18px/1.6 var(--body); color: var(--on-dark-2); max-width: 540px; text-wrap: pretty; }
.head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px; }
.head > div { display: flex; flex-direction: column; gap: 16px; }
.head--row { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 24px 32px; flex-wrap: wrap; }
.hint { font: 500 15px/1.3 var(--body); color: var(--on-dark-2); }
.kicker { display: inline-flex; align-items: center; gap: 12px; font: 700 12px/1 var(--body); letter-spacing: .26em; text-transform: uppercase; color: #d6d5d3; }
.kicker::before { content: ""; width: 28px; height: 3px; background: var(--red); }

/* ---------- buttons: slightly rounded, sentence case, no glow ---------- */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 24px; border-radius: var(--r-btn); border: 0; cursor: pointer; font: 600 16px/1 var(--body); white-space: nowrap; transition: background .2s, transform .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-1px); }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-hover); }
.btn-ghost { background: rgba(255,255,255,.06); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); }
.btn-line { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); }
.btn-line:hover { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); }
.btn-sm { padding: 12px 18px; font-size: 15px; }
.arr { display: inline-block; flex: none; width: 1em; height: 1em; vertical-align: -.12em; transition: transform .25s var(--ease); }
.ui-ic { display: block; width: 16px; height: 16px; margin: auto; }
.btn:hover .arr, .link-arrow:hover .arr { transform: translateX(4px); }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; font: 600 16px/1 var(--body); color: #fff; background: linear-gradient(var(--red), var(--red)) no-repeat 0 100% / 0 2px; transition: background-size .3s var(--ease); }
.link-arrow:hover { background-size: 100% 2px; }

/* ---------- header: logo left, links and the pass on the right ---------- */

.site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 34px; background: var(--ink); color: var(--on-dark); position: sticky; top: 0; z-index: 20; }
.brand { display: flex; align-items: center; }
.brand img { display: block; height: 52px; width: auto; }
.header-left { display: flex; align-items: center; gap: 22px; }
.header-social, .nav-panel-social { display: flex; gap: 6px; }
.header-social a, .nav-panel-social a { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-btn); border: 1px solid var(--line-dark); color: var(--on-dark-2); transition: border-color .2s, color .2s; }
.header-social a:hover, .nav-panel-social a:hover { border-color: var(--red); color: #fff; }
.header-social .ico, .nav-panel-social .ico { width: 16px; height: 16px; }
.nav-panel-social { display: none; }
.header-right { display: flex; align-items: center; gap: 2px; }
.site-nav { display: flex; align-items: center; gap: 2px; }
.site-nav a { padding: 12px 11px; white-space: nowrap; font: 600 13px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-2); transition: color .2s; }
.site-nav a:hover { color: #fff; }
.site-nav a[aria-current="page"] { color: #fff; }
.nav-cta { margin-left: 12px; padding: 12px 18px; font-size: 14px; }
.nav-cta-short { display: none; }
.nav-toggle, .site-nav .nav-panel-cta { display: none; }
.nav-toggle { position: relative; width: 44px; height: 44px; margin-left: 6px; padding: 0; cursor: pointer; border: 0; border-radius: var(--r-btn); background: transparent; color: #fff; }
.nav-toggle i { position: absolute; left: 11px; right: 11px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .32s cubic-bezier(.2,.8,.2,1), opacity .2s; }
.nav-toggle i:nth-child(1) { top: 15px; }
.nav-toggle i:nth-child(2) { top: 21px; }
.nav-toggle i:nth-child(3) { top: 27px; }
.nav-open .nav-toggle i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle i:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- home hero: the headline is the hero; full-color photo, text at the foot ---------- */

.hero { position: relative; min-height: min(84vh, 780px); overflow: hidden; display: flex; align-items: flex-end; background: var(--ink); }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 40%; }
.hero-chalk { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,11,12,.35) 0%, rgba(10,11,12,.2) 40%, rgba(10,11,12,.86) 100%), linear-gradient(90deg, rgba(10,11,12,.55) 0%, rgba(10,11,12,0) 60%); }
.hero-inner { position: relative; width: 100%; padding-top: 96px; padding-bottom: 64px; display: flex; flex-direction: column; gap: 26px; }
.hero-title { font: 400 clamp(40px, 6vw, 88px)/.9 var(--display); text-transform: uppercase; color: #fff; max-width: 13ch; text-wrap: balance; }
.hero-row { display: flex; flex-direction: column; align-items: flex-start; gap: 36px; }
/* one rhythm down the hero: eyebrow, 20px, headline, 32px, text, 36px, buttons */
.hero-inner > .hero-title { margin-top: -6px; }
.hero-inner > .hero-row { margin-top: 6px; }
.hero:has(+ .stats-band) .hero-title { max-width: none; }
.hero-copy { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 14px; max-width: 600px; }
/* a soft shade only behind the body text, so it reads over the bright parts of the photo;
   it fades out well before its edges, so there is no visible box */
.hero-copy::before { content: ""; position: absolute; inset: -70px -120px -22px -90px; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(10,11,12,.5) 0%, rgba(10,11,12,.38) 45%, rgba(10,11,12,.16) 75%, rgba(10,11,12,0) 100%); }
.hero-lede { text-shadow: 0 1px 14px rgba(10,11,12,.55); }
.hero-lede { font: 400 19px/1.6 var(--body); color: #f2f1ef; max-width: 48ch; text-wrap: pretty; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; }
/* the hero settles in once on load */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hero-inner > *, .page-hero-inner > * { animation: rise .8s var(--ease) both; }
.hero-inner > :nth-child(2), .page-hero-inner > :nth-child(2) { animation-delay: .08s; }
.hero-inner > :nth-child(3), .page-hero-inner > :nth-child(3) { animation-delay: .18s; }

/* ---------- inner-page hero: a dark band with the title ---------- */

.page-hero { position: relative; isolation: isolate; background: var(--ink-deep); color: var(--on-dark); border-bottom: 3px solid var(--red); }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10,11,12,.9) 0%, rgba(10,11,12,.58) 100%), var(--photo, linear-gradient(var(--ink-deep), var(--ink-deep))); }
.page-hero-inner { padding-top: 96px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 22px; }
.page-title { font: 400 clamp(36px, 5.6vw, 72px)/.95 var(--display); text-transform: uppercase; color: #fff; max-width: 16ch; text-wrap: balance; overflow-wrap: break-word; }
.page-lede { font: 400 18px/1.6 var(--body); color: var(--on-dark-2); max-width: 620px; text-wrap: pretty; }

/* ---------- the four features: one white card, half over the hero photo ----------
   The hero is cut short enough that header + hero + the whole card fit the first screen
   (header about 76px, the card hangs about 55px below the photo). */

.hero:has(+ .stats-band) { min-height: clamp(520px, calc(100svh - 150px), 780px); padding-bottom: 72px; }
.stats-band { position: relative; z-index: 2; margin-top: -56px; padding: 0 var(--gutter); background: linear-gradient(transparent 56px, var(--ink-deep) 56px); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1200px; margin: 0 auto; padding: 18px 8px; border-radius: var(--r-panel); background: #fff; color: var(--ink); box-shadow: 0 30px 60px -24px rgba(0,0,0,.6); }
.stat { display: flex; align-items: center; gap: 14px; padding: 2px 22px; }
.stat + .stat { border-left: 1px solid rgba(0,0,0,.1); }
.stat-ic { flex: none; width: 34px; height: 34px; color: var(--red); }
.stat div { display: flex; flex-direction: column; gap: 4px; }
.stat b { font: 400 clamp(19px, 1.7vw, 24px)/1 var(--display); }
.stat span { font: 500 14px/1.3 var(--body); color: var(--text-2); }
/* short laptop screens (1366x768): a smaller headline keeps the card above the fold */
@media (max-height: 820px) and (min-width: 901px) {
  .hero:has(+ .stats-band) .hero-title { font-size: clamp(40px, 5.2vw, 70px); }
  .hero:has(+ .stats-band) .hero-inner { padding-top: 48px; gap: 18px; }
}

/* ---------- gallery page: blocks of one big photo and two stacked, every photo whole ----------
   Each photo is a Home-style card with a fixed 52px name bar, and blocks have a 20px gap, so the
   big column is widened by 1.5 x 72px: then a whole 3:2 photo on the left lines up exactly with
   two whole 3:2 photos stacked on the right, name bars included. Nothing is cropped. */

.gal-jump { background: var(--s1); border-bottom: 1px solid var(--line-dark); }
.gal-jump .wrap { display: flex; align-items: center; gap: 8px 22px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
.gal-jump span { font: 700 12px/1 var(--body); letter-spacing: .24em; text-transform: uppercase; color: var(--on-dark-3); }
.gal-jump a { font: 600 15px/1 var(--body); color: var(--on-dark); padding: 6px 0; background: linear-gradient(var(--red), var(--red)) no-repeat 0 100% / 0 2px; transition: background-size .3s var(--ease); }
.gal-jump a:hover { background-size: 100% 2px; }
.gal-area { scroll-margin-top: 80px; }
.gal { display: flex; flex-direction: column; gap: 28px; }
.gal-block { display: grid; grid-template-columns: calc((100% - 128px) * 2 / 3 + 108px) 1fr; gap: 20px; align-items: start; }
.gal-block--flip { grid-template-columns: 1fr calc((100% - 128px) * 2 / 3 + 108px); }
.gal-block--flip > .gal-ph { order: 2; }
.gal-stack { display: flex; flex-direction: column; gap: 20px; }
.gal-row { display: grid; gap: 20px; }
.gal-row--4 { grid-template-columns: repeat(4, 1fr); }
.gal-row--2 { grid-template-columns: 1fr 1fr; }
.gal-row--1 { grid-template-columns: minmax(0, 66%); justify-content: center; }
.gal-ph { margin: 0; }
.gal-ph .tile { aspect-ratio: 3 / 2; }
.gal-ph figcaption { box-sizing: border-box; height: 52px; padding: 16px 18px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 16px/20px var(--display); text-transform: uppercase; color: #fff; }
.sec-inside .head--row { align-items: center; }

/* ---------- what's inside: photo cards with a title under each ---------- */

.photo-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.photo-card { border-radius: var(--r-panel); overflow: hidden; background: var(--s1); transition: transform .3s ease, box-shadow .3s ease; }
.photo-card:hover { transform: translateY(-4px); box-shadow: 0 20px 36px -22px rgba(0,0,0,.5); }
.photo-card .tile { border-radius: 0; }
.photo-card b { display: block; padding: 16px 18px; font: 400 16px/1.2 var(--display); text-transform: uppercase; color: #fff; }

/* ---------- photo tiles and the lightbox ---------- */

.tile { position: relative; display: block; width: 100%; aspect-ratio: 4/3; margin: 0; padding: 0; border: 0; overflow: hidden; cursor: zoom-in; border-radius: var(--r-photo); background: var(--s1); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile::after { content: ""; position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2316181a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 3H13v3.5M13 3 9 7M6.5 13H3V9.5M3 13l4-4'/%3E%3C/svg%3E") center / 16px no-repeat; color: var(--ink); font-size: 15px; opacity: 0; transform: scale(.85); transition: opacity .25s, transform .25s; }
.tile:hover::after, .tile:focus-visible::after { opacity: 1; transform: none; }
.tile--empty { cursor: default; background: repeating-linear-gradient(135deg, #2a2d30 0 10px, #24272a 10px 20px); }
.tile--empty::after { display: none; }
.lightbox { position: fixed; inset: 0; z-index: 50; padding: 40px; cursor: zoom-out; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: rgba(10,10,11,.92); backdrop-filter: blur(6px); }
.lightbox img { max-width: 86vw; max-height: 78vh; border-radius: var(--r-photo); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.lightbox-cap { font: 500 15px/1.3 var(--body); color: #d6d5d3; text-align: center; }

/* ---------- the owner ---------- */

.owner { display: grid; grid-template-columns: 1fr 1.3fr; overflow: hidden; border-radius: var(--r-panel); background: rgba(22,24,26,.62); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(16px) saturate(1.2); }
.owner-photo { position: relative; min-height: 440px; background: repeating-linear-gradient(135deg, #2a2d30 0 10px, #24272a 10px 20px); }
.owner-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.owner-text { padding: 56px 56px 52px; display: flex; flex-direction: column; gap: 20px; justify-content: center; }
.owner-sign { font: 600 16px/1.3 var(--body); color: #fff; }
.owner-sign span { display: block; margin-top: 4px; font-weight: 500; color: var(--on-dark-3); }

/* ---------- membership comparison: clean light table, the featured plan outlined in red ---------- */

.seg { display: inline-flex; padding: 5px; gap: 4px; border-radius: var(--r-btn); background: rgba(255,255,255,.08); margin-bottom: 24px; max-width: 100%; overflow-x: auto; }
.seg button { border: 0; cursor: pointer; padding: 12px 20px; border-radius: 4px; background: transparent; color: var(--on-dark-2); font: 600 15px/1 var(--body); white-space: nowrap; }
.seg button[aria-selected="true"] { background: var(--white); color: var(--ink); }
/* The comparison table sits on the power-rack photo, blurred and darkened enough that every
   label, tick and dash keeps its contrast over the brightest part of the photo. */
.yes, .no { display: inline-block; width: 20px; height: 20px; vertical-align: middle; }
.cell-note { font: 700 14px/1.3 var(--body); color: var(--pink); }

/* ---------- events ---------- */

.events { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.event { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-panel); background: var(--s1); transition: transform .3s, box-shadow .3s; }
.event:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -24px rgba(0,0,0,.3); }
.event-top { display: flex; align-items: center; gap: 16px; padding: 24px 26px 0; }
.date { flex: none; width: 64px; padding: 10px 0; border-radius: var(--r-btn); background: var(--red); color: #fff; text-align: center; }
.date b { display: block; font: 900 30px/.9 var(--condensed); font-stretch: 75%; }
.date span { display: block; margin-top: 4px; font: 700 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; }
.event-meta { font: 600 14px/1.4 var(--body); color: var(--on-dark-3); }
.event-body { flex: 1; padding: 18px 26px 26px; display: flex; flex-direction: column; gap: 10px; }
.event h3 { font: 400 20px/1.1 var(--display); text-transform: uppercase; color: #fff; }
.event p { font: 400 16px/1.5 var(--body); color: var(--on-dark-2); }
.tag { align-self: flex-start; margin-top: auto; padding: 6px 12px; border-radius: 4px; background: rgba(224,161,164,.14); color: var(--pink); font: 600 13px/1 var(--body); white-space: nowrap; }

/* ---------- dark bands: full width, edge to edge ---------- */

.band-dark { margin-top: 0; padding: var(--tp) 0; background: var(--ink-deep); color: var(--on-dark); }

/* ---------- reviews: one row of equal Google-style cards that slides along ---------- */

.rv-rating { display: inline-flex; align-items: center; gap: 10px; font: 500 16px/1 var(--body); color: var(--on-dark-2); }
.rv-rating b { font: 400 20px/1 var(--display); color: #fff; }
.rv-rating:hover { color: #fff; }
/* the stars fill to the rating: 4.4 lights four and two-fifths of the fifth */
.rv-stars { font-size: 20px; letter-spacing: 2px; background: linear-gradient(90deg, #fbbc04 calc(var(--r) / 5 * 100%), rgba(255,255,255,.22) 0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rv-track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.rv-track::-webkit-scrollbar { display: none; }
.rv-track:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.rw { margin: 0; padding: 22px 22px 22px; border-radius: var(--r-panel); background: #fff; color: #3c4043; display: flex; flex-direction: column; gap: 12px; }
.rv-track .rw { flex: 0 0 calc((100% - 28px) / 3); height: 314px; scroll-snap-align: start; }
.rv-track .rw.has-more { cursor: pointer; }
.rw-head { display: flex; align-items: center; gap: 12px; }
.rw q { quotes: none; font: 400 16px/1.55 var(--body); color: #3c4043; }
.rv-track .rw q { flex: none; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
.stars { color: #fbbc04; letter-spacing: 2px; }
.rw .stars { font-size: 17px; }
.rw-more { align-self: flex-start; margin-top: auto; padding: 0; border: 0; background: none; cursor: pointer; font: 600 15px/1 var(--body); color: #1a73e8; }
.rw-more:hover { text-decoration: underline; }
.g-mark { flex: none; width: 20px; height: 20px; margin-left: auto; }
.rv-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 22px; }
.rv-foot .btn .g-mark { width: 18px; height: 18px; margin: 0; }
.rv-arrows { display: flex; gap: 8px; }
.rv-btn { width: 46px; height: 46px; border: 0; border-radius: var(--r-btn); background: rgba(255,255,255,.06); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); font: 600 20px/1 var(--body); cursor: pointer; }
.rv-btn:hover { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); }
.rv-btn:disabled { opacity: .35; cursor: default; }
.rv-dialog { width: min(600px, calc(100% - 32px)); max-height: calc(100% - 48px); padding: 0; border: 0; border-radius: var(--r-panel); background: transparent; overflow: auto; }
.rv-dialog::backdrop { background: rgba(10,11,12,.72); }
.rv-dialog .rw { padding: 28px; }
.rv-dialog q { font-size: 17px; }
.rv-dialog-cut { margin: 0; font: 500 14px/1.4 var(--body); color: #70757a; }
.rv-dialog-actions { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.rv-dialog-actions .btn-line { color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.2); }
.avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 600 17px/1 var(--body); }
.who { font: 600 15px/1.25 var(--body); color: #202124; font-style: normal; }
.who span { display: block; margin-top: 2px; font: 400 13px/1.2 var(--body); color: #70757a; }

/* ---------- the free 3-day pass: one step, glass on a full-width photo ---------- */

.pass { position: relative; overflow: hidden; margin-top: 0; padding: 72px 0; background: var(--ink); color: var(--on-dark); border-top: 1px solid var(--line-dark); }
.pass > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.pass::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,17,18,.9) 0%, rgba(15,17,18,.7) 45%, rgba(15,17,18,.35) 100%); }
.pass--strip { padding: 64px 0; }
.pass-strip { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
.pass-strip > div:first-child { display: flex; flex-direction: column; gap: 14px; }
.pass-strip-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.form-noscript { margin: 0; font: 400 15px/1.5 var(--body); color: var(--on-dark-2); }
/* one centered glass card: the heading, email, name and phone, the text consent, the button,
   then the goals and a note folded away. The section keeps its height; only the card is tall.
   The form markup comes from site.js. */
.pass:not(.pass--strip) { min-height: 615px; display: flex; align-items: center; padding: 40px 0; }
.pass:not(.pass--strip)::after { background: rgba(15,17,18,.76); }
.pass-solo { position: relative; z-index: 1; width: 100%; }
.pass-card { max-width: 540px; margin: 0 auto; padding: 48px 40px 40px; text-align: center; border-radius: var(--r-panel); background: rgba(22,24,26,.62); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(12px) saturate(1.2); }
.pass-card .h2 { margin: 0 0 24px; color: #fff; }
.pf { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.pf .consent { margin: 4px 0; gap: 6px; }
.pf .btn-advance { align-self: stretch; padding: 18px; font-size: 18px; }
.pf .btn-advance[aria-disabled="true"] { background: var(--red); color: #fff; }
.pf .btn-advance:hover { background: var(--red-hover); }
.pf-more summary { list-style: none; cursor: pointer; margin-top: 6px; display: inline-flex; gap: 8px; align-items: center; font: 600 15px/1 var(--body); color: var(--on-dark-2); }
.pf-more summary::-webkit-details-marker { display: none; }
.pf-more summary::before { content: ""; flex: none; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23e0a1a4' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M8 3v10M3 8h10'/%3E%3C/svg%3E") center / contain no-repeat; }
.pf-more summary::before { transition: transform .2s; }
.pf-more[open] summary::before { transform: rotate(45deg); }
.pf-more-body { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.pf--sent { gap: 16px; }
.pf-foot { display: flex; justify-content: center; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { margin: 0; padding: 9px 13px; cursor: pointer; white-space: nowrap; border-radius: 4px; border: 1.5px solid var(--line-dark); background: transparent; color: var(--on-dark); font: 600 14px/1 var(--body); transition: background .2s, border-color .2s; }
.chip:hover { border-color: rgba(255,255,255,.4); }
.chip[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; }
.fields { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field { width: 100%; min-width: 0; margin: 0; padding: 14px 16px; border-radius: var(--r-btn); border: 1.5px solid var(--line-dark); background: rgba(255,255,255,.06); color: #fff; font: 400 15px/1.2 var(--body); outline: none; transition: border-color .2s; }
.field--note { resize: vertical; min-height: 64px; line-height: 1.45; }
.field::placeholder { color: var(--on-dark-3); }
.field:focus-visible { border-color: var(--pink); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.consent { display: flex; flex-direction: column; gap: 10px; }
.consent-row { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font: 600 15px/1.4 var(--body); color: #fff; }
.consent-row.is-off { color: var(--on-dark-3); cursor: not-allowed; }
.consent-row input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--red); cursor: inherit; }
.consent-fine { margin: 0; font: 400 12px/1.5 var(--body); color: var(--on-dark-2); }
.consent-fine b { color: #fff; font-weight: 600; }
.consent-fine a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--red); }
.send-error { margin: 0; font: 600 15px/1.45 var(--body); color: #ffb4b8; }
.btn-again, .btn-advance { margin: 0; cursor: pointer; padding: 14px 22px; border-radius: var(--r-btn); font: 600 15px/1 var(--body); }
.btn-again { background: transparent; color: #fff; border: 1.5px solid var(--line-dark); }
.btn-advance { align-self: flex-start; border: 0; background: var(--red); color: #fff; }
.btn-advance[aria-disabled="true"] { background: rgba(255,255,255,.08); color: var(--on-dark-3); }
.sent-body { display: flex; flex-direction: column; gap: 8px; padding: 28px 24px 8px; }
.sent-title:focus { outline: none; }
.sent-title { font: 400 26px/1.05 var(--display); text-transform: uppercase; }
.sent-text { font: 400 16px/1.5 var(--body); color: var(--on-dark-2); }
.summary { margin: 0; padding: 0; display: flex; flex-direction: column; }
.summary div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line-dark); }
.summary dt { font: 600 13px/1.4 var(--body); color: var(--on-dark-3); }
.summary dd { margin: 0; font: 500 15px/1.4 var(--body); }

/* ---------- visit ---------- */

.visit { display: grid; grid-template-columns: 1fr 1.5fr; gap: 14px; }
.visit-card { border-radius: var(--r-panel); padding: 36px 34px; background: var(--s1); display: flex; flex-direction: column; gap: 22px; }
.visit-card .h2 { font-size: clamp(24px, 3vw, 32px); }
.visit-card .lede { font-size: 16px; }
.visit-card .btn { align-self: flex-start; }
.facts { margin: 0; display: flex; flex-direction: column; }
.facts div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line-dark); }
.facts dt { font: 500 15px/1.3 var(--body); color: var(--on-dark-3); }
.facts dd { margin: 0; font: 600 15px/1.3 var(--body); text-align: right; color: #fff; }
.map { position: relative; min-height: 420px; border-radius: var(--r-panel); overflow: hidden; background: var(--s1); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- FAQ: two columns of question cards ---------- */

.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.faq details { border-radius: var(--r-panel); background: var(--s1); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px; font: 600 18px/1.3 var(--body); color: #fff; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23e0a1a4' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M8 3v10M3 8h10'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 22px 20px; font: 400 16px/1.6 var(--body); color: var(--on-dark-2); }

/* ---------- footer: dark, white logo, the red line on top ---------- */

.site-footer { margin-top: 0; padding: 40px 0 48px; background: var(--ink); color: var(--on-dark-3); border-top: 3px solid var(--red); }
.site-footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 24px 40px; flex-wrap: wrap; font: 500 14px/1.4 var(--body); }
.footer-logo { display: block; height: 80px; width: auto; }
.footer-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.footer-links { display: flex; gap: 22px; }
.footer-links a { color: var(--on-dark-2); border-bottom: 1px solid transparent; }
.footer-links a:hover { color: #fff; border-bottom-color: var(--red); }

/* ---------- inner pages: plan cards, Open 24/7, training, programs ---------- */

/* The one membership: one photo under a left-to-right wash, the headline and buttons, a glass list */
.sec.sec-band.sec-member { --band-bg: linear-gradient(90deg, rgba(15,17,18,.92) 0%, rgba(15,17,18,.7) 50%, rgba(15,17,18,.45) 100%), var(--photo); padding-top: 120px; padding-bottom: 120px; }
.member-grid { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 64px; align-items: center; }
.member-title { font: 400 clamp(40px, 6vw, 84px)/.95 var(--display); text-transform: uppercase; color: #fff; text-wrap: balance; }
.member-title em { font-style: normal; color: var(--red-hover); }
.member-copy .lede { margin-top: 22px; max-width: 520px; font-size: 19px; color: var(--on-dark); }
/* every button in a pair is the same width */
.cta-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: min(100%, 460px); margin-top: 32px; }
.member-fine { margin-top: 16px; font: 500 15px/1.5 var(--body); color: var(--on-dark-2); }
.member-card { padding: 36px; border-radius: var(--r-panel); background: rgba(15,17,18,.6); backdrop-filter: blur(14px); border: 1px solid var(--line-dark); }
.member-card .label { display: block; margin-bottom: 20px; }
.member-card ul { list-style: none; margin: 0; padding: 0; }
.member-card li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line-dark); font: 600 18px/1.2 var(--body); color: #fff; }
.member-card li:first-child { border-top: 0; }
.member-card .tick { flex: none; width: 20px; height: 20px; color: #6fd39a; }

/* Amenities: three equal white cards, a photo on each */
/* Memberships: free + membership + free, over the floor from above */
/* Memberships opens on a short band: the dumbbell photo under an even dim, the title centred */
.m-open { position: relative; isolation: isolate; overflow: hidden; background: var(--ink-deep); border-bottom: 3px solid var(--red); text-align: center; }
.m-open::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(10,11,12,.62), rgba(10,11,12,.62)), url("img/gallery-dumbbells-heavy.jpg") center 50% / cover; }
.m-open-inner { display: grid; justify-items: center; gap: 14px; padding-top: 80px; padding-bottom: 80px; }
.m-open-title { font: 400 clamp(40px, 5vw, 64px)/.95 var(--display); text-transform: uppercase; color: #fff; text-wrap: balance; }
.m-open-title em { font-style: normal; color: var(--red); }
.m-open-lede { font: 500 19px/1.4 var(--body); color: #ecebe9; max-width: 40ch; }
.join { position: relative; padding: 64px 0 104px; background: var(--ink-deep); }
/* the membership 20% larger; the free cards inset top and bottom beside it */
.join-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; max-width: 1000px; margin: 0 auto; }
/* the plus: a white disc sitting fully inside the gap (it never touches a card), the cross drawn so it is dead centre */
.join-plus { position: absolute; z-index: 2; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; font-size: 0;
  background: linear-gradient(var(--red), var(--red)) center / 12px 3px no-repeat, linear-gradient(var(--red), var(--red)) center / 3px 12px no-repeat, #fff; }
.join-plus:nth-of-type(1) { left: calc((100% - 80px) / 3.2 + 20px); }
.join-plus:nth-of-type(2) { left: calc((100% - 80px) / 3.2 * 2.2 + 60px); }
.join-card { display: flex; flex-direction: column; border-radius: var(--r-panel); overflow: hidden; background: var(--s2);
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 24px 48px -16px rgba(0,0,0,.85); transition: transform .4s var(--ease); }
.join-body { display: flex; flex-direction: column; gap: 8px; padding: 20px 24px 24px; }
.join-card h3 { font: 400 24px/1 var(--display); text-transform: uppercase; color: #fff; }
.join-body > p { font: 500 16px/1.45 var(--body); color: var(--on-dark-2); }
.join-free { margin: 48px 0; }
.join-free .join-ph { position: relative; flex: 1; min-height: 190px; background: var(--s1) center / cover; }
.join-free .join-ph::after { content: ""; position: absolute; inset: 0; background: rgba(15,17,18,.3); }
.join-big { position: absolute; z-index: 1; left: 22px; bottom: 18px; font: 400 52px/.85 var(--display); text-transform: uppercase; color: #fff; }
.join-main { box-shadow: 0 0 0 2px var(--red), 0 30px 60px -18px rgba(0,0,0,.9); }
.join-band { padding: 14px 24px; background: var(--red); font: 700 13px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: #fff; text-align: center; }
.join-main .join-ph { aspect-ratio: 16 / 8; background: var(--s1) center 45% / cover; }
.join-main .join-body { gap: 14px; padding: 28px 34px 32px; }
.join-main h3 { font-size: 36px; }
.join-ticks { list-style: none; margin: 0; padding: 0; }
.join-ticks li { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.09); font: 600 17px/1.25 var(--body); color: #fff; }
.join-ticks li:first-child { border-top: 0; }
.join-ticks li::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(95,208,141,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236fd39a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / 14px no-repeat; }
.join-foot { display: grid; justify-items: center; margin-top: 40px; text-align: center; }
.join-foot .cta-pair { margin-top: 0; }

/* the keyfob band: small, the round fob beside one line */
.sec.sec-band.sec-fob { --tp: 56px; }
.fob-strip { display: flex; align-items: center; justify-content: center; gap: 36px; }
.fob { flex: none; width: 132px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 18px 40px -14px rgba(0,0,0,.8); transform: rotate(-8deg); }
.fob img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fob-strip .lede { margin-top: 10px; font-size: 18px; color: var(--on-dark); }

/* Amenities: one sliding row of white cards on concrete, three and a peek on a laptop */
.head > .am-chips { display: flex; flex-direction: row; gap: 8px; }
.am-chip { min-width: 104px; padding: 11px 16px; border: 0; border-radius: var(--r-btn); background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.12);
  font: 600 15px/1 var(--body); cursor: pointer; transition: background .2s, color .2s; }
.am-chip:hover { box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.35); }
.am-chip[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.am-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 60px) / 3.3); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; padding-bottom: 6px; }
.am-track::-webkit-scrollbar { display: none; }
.am-card { display: flex; flex-direction: column; scroll-snap-align: start; border-radius: var(--r-panel); overflow: hidden; background: #fff; box-shadow: 0 1px 0 var(--line); }
.am-ph { aspect-ratio: 4 / 3; background: #d8d6d2 center / cover; }
.am-body { padding: 22px 24px 26px; }
.am-area { display: block; margin-bottom: 8px; font: 700 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.am-card h3 { font: 400 24px/1.05 var(--display); text-transform: uppercase; color: var(--ink); }
.am-card p { margin-top: 8px; font: 500 17px/1.45 var(--body); color: var(--text-2); }
.am-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; }
.am-btn { width: 46px; height: 46px; border: 0; border-radius: var(--r-btn); background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.15);
  font: 600 20px/1 var(--body); cursor: pointer; }
.am-btn:hover { box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.45); }
.am-btn:disabled { opacity: .35; cursor: default; }
.am-count { font: 600 15px/1 var(--body); color: var(--text-2); }

.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.plan-card { border-radius: var(--r-panel); background: var(--s1); padding: 30px 28px; display: flex; flex-direction: column; gap: 14px; box-shadow: inset 0 0 0 2px transparent; transition: transform .3s, box-shadow .3s; }
.plan-card.is-featured { background: var(--s2); box-shadow: inset 0 0 0 2px var(--red); }
.plan-kicker { align-self: flex-start; font: 700 11px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-3); }
.plan-card.is-featured .plan-kicker { padding: 6px 10px; border-radius: 3px; background: var(--red); color: #fff; letter-spacing: .16em; }
.plan-name { font: 400 26px/1 var(--display); text-transform: uppercase; color: #fff; }
.plan-price { font: 700 15px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--pink); }
.plan-body { font: 400 16px/1.55 var(--body); color: var(--on-dark-2); }
.plan-items { list-style: none; margin: 0; padding: 14px 0 0; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line-dark); flex: 1; }
.plan-items li { display: flex; gap: 10px; font: 500 15px/1.4 var(--body); color: var(--on-dark); }
.plan-items li::before { content: ""; flex: none; width: 14px; height: 8px; margin-top: 5px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg) translate(1px, -2px); }
.plan-card .btn { align-self: stretch; margin-top: 6px; }
/* Open 24/7: a photo band with the big headline left and what's included in a glass card */
.tick { flex: none; width: 18px; height: 18px; color: #7fd49f; }
.split { display: grid; grid-template-columns: 1.1fr 1fr; overflow: hidden; border-radius: var(--r-panel); background: var(--s1); }
.split-media { position: relative; min-height: 460px; }
.split-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split-text { padding: 56px; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.split-text .btn { align-self: flex-start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.trainer { border-radius: var(--r-panel); overflow: hidden; background: var(--s1); }
.trainer-photo { aspect-ratio: 4/5; background: repeating-linear-gradient(135deg, #2a2d30 0 10px, #24272a 10px 20px); }
.trainer-text { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.trainer-role { font: 700 11px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--pink); }
.trainer-name { font: 400 18px/1.15 var(--display); text-transform: uppercase; color: #fff; }
.trainer-focus { font: 500 15px/1.4 var(--body); color: var(--on-dark-2); }
.prog-list { border-radius: var(--r-panel); background: var(--s1); overflow: hidden; }
.prog-row { display: grid; grid-template-columns: 240px 1fr auto; align-items: center; gap: 24px; padding: 24px 28px; }
.prog-row + .prog-row { border-top: 1px solid var(--line-dark); }
.prog-name { font: 400 18px/1.15 var(--display); text-transform: uppercase; color: #fff; }
.prog-body { font: 400 16px/1.55 var(--body); color: var(--on-dark-2); }
.prog-row .tag { margin: 0; align-self: center; }
.desk { border-radius: var(--r-panel); background: var(--s1); border: 1px solid var(--line-dark); color: var(--on-dark); padding: 44px 44px; display: flex; justify-content: space-between; align-items: center; gap: 24px 40px; flex-wrap: wrap; }
.desk .h2 { font-size: clamp(24px, 3vw, 32px); }
.desk .lede { margin-top: 12px; }
.sec-intro { margin: -12px 0 28px; }
.desk-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

/* ---------- call buttons, the phone bar and social icons ---------- */

.ico { flex: none; width: 18px; height: 18px; }
.nav-call { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; padding: 10px 12px; border-radius: var(--r-btn); color: #fff; font: 600 14px/1 var(--body); white-space: nowrap; }
.nav-call:hover { color: var(--pink); }
.nav-call > span { display: inline-flex; }
.nav-call-short { display: none !important; }
.site-nav .nav-panel-call { display: none; }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.btn .ico { width: 17px; height: 17px; }
.hint a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--red); }
.visit-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.footer-contact { display: flex; flex-direction: column; gap: 6px; color: var(--on-dark-2); }
.footer-contact a:hover { color: #fff; }
.footer-phone { color: #fff; font: 400 22px/1.1 var(--display); letter-spacing: .01em; }
.footer-social { display: flex; gap: 8px; }
.footer-social a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-btn); border: 1px solid var(--line-dark); color: #fff; transition: border-color .2s, color .2s; }
.footer-social a:hover { border-color: var(--red); color: var(--pink); }
.tabbar { display: none; }
@media (max-width: 1279px) { .nav-call-num { display: none !important; } .nav-call-short { display: inline-flex !important; } }

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

.rv { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s var(--ease); }
.rv.in { opacity: 1; transform: none; }
/* ---------- community: the featured event, the calendar, personal records, socials ---------- */


/* ---------- legal pages: one calm column of text ---------- */

.prose { max-width: 720px; display: flex; flex-direction: column; gap: 16px; }
.prose .lede { max-width: none; margin-bottom: 12px; }
.prose .h3 { margin-top: 20px; }
.prose p { font: 400 17px/1.65 var(--body); color: var(--on-dark-2); }

/* ---------- full-width bands: a section whose background runs edge to edge ----------
   Add sec-band to a .wrap.sec and give it a --band-bg. Photo bands use a dark wash over the photo. */

.sec.sec-band { position: relative; isolation: isolate; margin-top: 0; padding-top: var(--tp); padding-bottom: var(--tp); }
.sec-band::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--band-bg); }
.ph-barbell { --photo: url("img/barbell.jpg") center 40% / cover; }
.ph-main-floor { --photo: url("img/main-floor.jpg") center / cover; }

.ph-sled-turf { --photo: url("img/sled-turf.jpg") center / cover; }
.ph-front-desk { --photo: url("img/front-desk.jpg") center / cover; }
.ph-kettlebells { --photo: url("img/kettlebells.jpg") center / cover; }
.ph-sauna { --photo: url("img/sauna.jpg") center / cover; }
.ph-sign { --photo: url("img/sign.jpg") center / cover; }
.ph-power-racks { --photo: url("img/power-racks.jpg") center / cover; }
/* A photo band's photo is a layer of its own (.band-photo, templates.mjs `bandBg`), so the gym can
   swap it in the CMS; the band's ::before is the darkening over it, 76% unless the band says (--dim,
   0 to .9). The layer sits under the ::before, both inside the band's own stacking context. Opened for
   editing, a band that may take a photo carries the layer whatever its tone, hidden unless it is on
   its photo, so a photo can be tried on it. */
.sec-photo { --band-bg: rgba(15,17,18, var(--dim, .76)); }
.band-photo { display: none; position: absolute; z-index: -2; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background-position: center; background-size: cover; background-repeat: no-repeat; }
.sec-photo > .band-photo { display: block; }
.sec-deep { --band-bg: var(--ink-deep); }
.sec-ink { --band-bg: var(--ink); }
.sec-redline::after { content: ""; position: absolute; top: 0; left: 50%; width: 100vw; height: 3px; transform: translateX(-50%); background: var(--red); }
.sec-visit { --band-bg: var(--ink); }

/* a section on light concrete: dark text, white panels (Memberships and Events on Home) */

.sec-light { --band-bg: var(--concrete); }
.sec-light :focus-visible { outline-color: var(--red); }
.sec-light .h2 { color: var(--ink); }
.sec-light .label { color: var(--text-2); }
.sec-light .lede, .sec-light .hint { color: var(--text-2); }
.sec-light .btn-line { color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.2); }
.sec-light .event { background: #fff; }
.sec-light .event h3 { color: var(--ink); }
.sec-light .event p, .sec-light .event-meta { color: var(--text-2); }
.sec-light .tag { background: rgba(176,18,26,.08); color: var(--red); }
.sec-light .owner { background: #fff; border: 0; backdrop-filter: none; box-shadow: 0 24px 44px -26px rgba(0,0,0,.4); }
.sec-light .owner-photo { background: repeating-linear-gradient(135deg, #e3e1de 0 10px, #dcdad6 10px 20px); }
.sec-light .owner-sign { color: var(--ink); }
.sec-light .owner-sign span { color: var(--text-2); }
.sec-light .seg { background: rgba(0,0,0,.06); }
.sec-light .seg button { color: var(--text-2); }
.sec-light .seg button[aria-selected="true"] { background: #fff; color: var(--ink); }

/* inner-page parts on light concrete */

.sec-light .h3 { color: var(--ink); }
.sec-light .plan-card, .sec-light .split, .sec-light .trainer, .sec-light .prog-list { background: #fff; }
.sec-light .plan-card.is-featured { background: #fcf1f1; }
.sec-light .plan-kicker { color: var(--text-2); }
.sec-light .plan-name { color: var(--ink); }
.sec-light .plan-card.is-featured .plan-name { color: var(--red); }
.sec-light .plan-price { color: var(--red); }
.sec-light .plan-body, .sec-light .trainer-focus, .sec-light .prog-body { color: var(--text-2); }
.sec-light .plan-items { border-top-color: var(--line); }
.sec-light .plan-items li { color: var(--ink); }
.sec-light .trainer-photo, .sec-light .owner-photo { background: repeating-linear-gradient(135deg, #e3e1de 0 10px, #dcdad6 10px 20px); }
.sec-light .trainer-role { color: var(--red); }
.sec-light .trainer-name, .sec-light .prog-name { color: var(--ink); }
.sec-light .prog-row + .prog-row { border-top-color: var(--line); }
.sec-light .desk { background: var(--ink); border: 0; }
.sec-light .desk .h2 { color: #fff; }
.sec-light .desk .lede, .sec-light .desk .hint { color: var(--on-dark-2); }
.sec-light .prose p { color: #3c4045; }

/* the FAQ sits on a photo with glass cards, the way the pass form does */

.sec-faq .faq details { background: rgba(22,24,26,.62); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(12px) saturate(1.2); }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .photo-card:hover, .plan-card:hover, .event:hover, .btn:hover { transform: none; }
  .hero-inner > *, .page-hero-inner > * { animation: none; }
}

/* ---------- tablet and phone ---------- */

@media (max-width: 1040px) {
  .site-header { padding: 14px 16px; }
  .brand img { height: 44px; }
  .header-social { display: none; }
  .nav-cta { order: -1; margin: 0 4px 0 0; padding: 0 14px; height: 38px; font-size: 14px; }
  .nav-cta-long { display: none; }
  .nav-cta-short { display: inline; }
  .nav-call { width: 44px; height: 44px; margin-left: 0; padding: 0; justify-content: center; }
  .nav-call > span { display: none; }
  .nav-call .ico { width: 20px; height: 20px; }
  .site-nav .nav-panel-social { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
  .site-nav .nav-panel-social a { width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-dark); }
  .site-nav .nav-panel-call { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; padding: 16px; border-radius: var(--r-btn); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); color: #fff; letter-spacing: 0; text-transform: none; font: 600 16px/1 var(--body); }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .tabbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: rgba(15,17,18,.9); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border-top: 1px solid var(--line-dark); }
  .tab { position: relative; display: grid; justify-items: center; align-content: center; gap: 6px; height: 58px; color: var(--on-dark-3); font: 600 11px/1 var(--body); -webkit-tap-highlight-color: transparent; transition: color .2s, transform .15s; }
  .tab svg { width: 27px; height: 27px; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
  .tab:active { transform: scale(.94); }
  .tab[aria-current="page"] { color: #fff; }
  .tab[aria-current="page"] svg { transform: translateY(-1px); }
  html.nav-lock { overflow: hidden; }
  .nav-toggle { display: block; }
  .site-nav { display: flex; position: fixed; inset: 0; z-index: -1; flex-direction: column; align-items: stretch; padding: 96px 24px calc(96px + env(safe-area-inset-bottom)); overflow-y: auto; background: var(--ink-deep); visibility: hidden; opacity: 0; transition: opacity .28s ease, visibility 0s .28s; }
  .site-header.nav-open .site-nav { visibility: visible; opacity: 1; transition: opacity .28s ease; }
  .site-nav > * { opacity: 0; transform: translateY(14px); transition: opacity .3s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
  .nav-open .site-nav > * { opacity: 1; transform: none; }
  .nav-open .site-nav > :nth-child(1) { transition-delay: .04s; }
  .nav-open .site-nav > :nth-child(2) { transition-delay: .08s; }
  .nav-open .site-nav > :nth-child(3) { transition-delay: .12s; }
  .nav-open .site-nav > :nth-child(4) { transition-delay: .16s; }
  .nav-open .site-nav > :nth-child(5) { transition-delay: .2s; }
  .nav-open .site-nav > :nth-child(6) { transition-delay: .24s; }
  .nav-open .site-nav > :nth-child(n+7) { transition-delay: .3s; }
  .site-nav a { padding: 11px 0; border: 0; font: 400 30px/1.05 var(--display); letter-spacing: 0; color: #fff; }
  .site-nav a[aria-current="page"] { color: var(--red); border: 0; }
  .site-nav .nav-panel-cta { display: block; margin-top: auto; padding: 17px; text-align: center; border-radius: var(--r-btn); background: var(--red); color: #fff; border: 0; letter-spacing: 0; text-transform: none; font: 600 16px/1 var(--body); }
  .photo-cards { grid-template-columns: 1fr 1fr; }
  .gal-block, .gal-block--flip { grid-template-columns: 1fr; }
  .gal-block--flip > .gal-ph { order: 0; }
  .gal-stack { flex-direction: row; }
  .gal-stack > .gal-ph { flex: 1; min-width: 0; }
  .gal-row--4 { grid-template-columns: 1fr 1fr; }
  .rv-track .rw { flex-basis: calc((100% - 14px) / 2); }
  .plan-grid, .grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .sec.sec-band.sec-member { padding-top: 72px; padding-bottom: 72px; }
  .m-open-inner { padding-top: 56px; padding-bottom: 56px; }
  .m-open-lede { font-size: 17px; }
  .join { padding: 40px 0 72px; }
  .join-row { grid-template-columns: 1fr; gap: 12px; }
  .join-main { order: 1; } .join-row > .join-plus:nth-of-type(1) { order: 2; } .join-free:first-child { order: 3; } .join-row > .join-plus:nth-of-type(2) { order: 4; } .join-free:last-child { order: 5; }
  .join-plus { position: static; margin: 0; justify-self: center; }
  .join-main h3 { font-size: 34px; }
  .join-main .join-body { padding: 24px 22px 26px; }
  /* the free cards become short rows: photo left, words right */
  .join-free { flex-direction: row; margin: 0; }
  .join-free .join-ph { flex: none; width: 44%; min-height: 136px; }
  .join-big { left: 14px; font-size: 34px; }
  .join-free .join-body { justify-content: center; padding: 16px 18px; }
  .join-free h3 { font-size: 20px; }
  .join-free .join-body > p { font-size: 15px; }
  .sec.sec-band.sec-fob { --tp: 44px; }
  .fob-strip { gap: 20px; justify-content: flex-start; }
  .fob { width: 92px; }
  .member-grid { grid-template-columns: 1fr; gap: 24px; }
  .head > .am-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .am-chip { min-width: 0; }
  .am-track { grid-auto-columns: 82%; gap: 12px; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 6px; scroll-padding: 0 var(--gutter); }
  .am-body { padding: 18px 18px 22px; }
  .am-card h3 { font-size: 21px; }
  .am-card p { font-size: 16px; }
  .cta-pair { width: 100%; }
  .member-card { padding: 24px; }
  :root { --gutter: 16px; --tp: 56px; }
  .sec { padding-top: 80px; }
  .hero { min-height: min(78vh, 640px); }
  .hero-inner { padding-top: 72px; padding-bottom: 40px; gap: 20px; }
  .hero-title { max-width: none; }
  .page-hero-inner { padding-top: 64px; padding-bottom: 48px; gap: 18px; }
  .hero:has(+ .stats-band) { min-height: 0; padding-bottom: 40px; }
  .hero:has(+ .stats-band) .hero-inner { padding-top: 32px; padding-bottom: 24px; gap: 16px; }
  .stats-band { margin-top: -40px; background: linear-gradient(transparent 40px, var(--ink-deep) 40px); }
  .stats { grid-template-columns: 1fr 1fr; padding: 8px 4px; }
  .stat { padding: 11px 12px; gap: 10px; }
  .stat-ic { width: 28px; height: 28px; }
  .stat b { font-size: 16px; }
  .stat div { min-width: 0; }
  .stat span { font-size: 14px; }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid rgba(0,0,0,.1); }
  .owner, .split { grid-template-columns: 1fr; }
  .owner-photo { min-height: 280px; }
  .split-media { min-height: 260px; }
  .owner-text, .split-text { padding: 32px 24px; }
  .plan-head small { display: none; }
  .plan-head b { font-size: 14px; }
  .yes, .no { width: 24px; height: 24px; }
  .cell-note { font-size: 12px; }
  .events, .plan-grid { grid-template-columns: 1fr; }
  .rv-track .rw { flex-basis: 86%; }
  .rv-track { margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); scroll-padding: 0 var(--gutter); }
  .pass { padding: 56px 0 16px; }
  .pass--strip { padding: 48px 0; }
  .pass-strip-actions, .pass-strip-actions .btn { width: 100%; }
  .visit { grid-template-columns: 1fr; gap: 28px; }
  .pass:not(.pass--strip) { min-height: 0; }
  .pass-card { padding: 28px 20px; }
  .field-row { grid-template-columns: 1fr; }
  .map { min-height: 320px; }
  .faq { grid-template-columns: 1fr; }
  .prog-row { grid-template-columns: 1fr; gap: 10px; padding: 20px 18px; }
  .footer-side { align-items: flex-start; }
  .prog-row .tag { justify-self: start; }
  .desk { padding: 32px 24px; }
}
@media (max-width: 520px) {
  .gal-stack, .gal-row--2 { flex-direction: column; grid-template-columns: 1fr; }
  .gal-row--4 { grid-template-columns: 1fr; }
  .gal-row--1 { grid-template-columns: 1fr; }
  .gal-jump .wrap { flex-wrap: nowrap; overflow-x: auto; }
  .gal-jump a { white-space: nowrap; }
  .photo-cards, .grid-3 { grid-template-columns: 1fr; }
  .trainer-photo { aspect-ratio: 16/10; }
  .page-title { font-size: 28px; }
}

/* ---------- Community: featured slot, calendar, PR board, socials ---------- */
/* Community page sketch (sandbox only). Rides on the live site.css; everything here is cm-*. */

/* ---------- The post: one at a time above the calendar, only while one is up ---------- */
.po { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; margin-bottom: 64px; padding: 28px; border-radius: var(--r-panel); background: var(--s2); }
.po--words { grid-template-columns: 1fr; padding: 36px 40px; }
.po-img { width: auto; aspect-ratio: auto; background: none; }
.po-img img { position: static; display: block; object-fit: contain; width: auto; height: auto; max-height: 380px; max-width: min(46vw, 520px); }
.po h2 { font: 400 clamp(28px, 3.4vw, 44px)/1 var(--display); text-transform: uppercase; color: #fff; text-wrap: balance; }
.po p { margin-top: 14px; max-width: 48ch; font: 400 18px/1.5 var(--body); color: #e4e3e0; }
.po .btn { margin-top: 24px; }
@media (max-width: 800px) {
  .po { grid-template-columns: 1fr; gap: 22px; margin-bottom: 44px; padding: 18px; }
  .po--words { padding: 26px 22px; }
  .po-img { justify-self: center; }
  .po-img img { max-width: 100%; max-height: 420px; }
  .po .btn { width: 100%; }
}


/* ---------- Calendar ---------- */
.sec.cm-open { padding-top: 72px; padding-bottom: 96px; }
.cm-cal { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px; align-items: start; margin-top: 44px; }
.cm-month { padding: 26px 26px 22px; border-radius: var(--r-panel); background: #fff; color: var(--ink); }
.cm-month-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.cm-month-head h3 { margin: 0; font: 400 22px/1 var(--display); text-transform: uppercase; }
.cm-month-nav { display: flex; gap: 6px; }
.cm-month-nav button { width: 38px; height: 38px; border: 0; border-radius: var(--r-btn); background: var(--concrete); color: var(--ink); font: 700 18px/1 var(--body); cursor: pointer; }
[hidden].cm-podium, .cm-month[hidden] { display: none; }
.cm-month-nav button:disabled { opacity: .35; cursor: default; }
.cm-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.cm-grid .dow { padding-bottom: 8px; font: 700 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.cm-day { position: relative; aspect-ratio: 1; display: grid; place-items: center; border: 0; border-radius: var(--r-btn); background: transparent; font: 600 15px/1 var(--body); color: var(--ink); }
.cm-day.out { visibility: hidden; }
.cm-day.past { color: #a3a5a8; }
.cm-day.today { box-shadow: inset 0 0 0 1.5px var(--ink); }
.cm-day.has { background: rgba(176,18,26,.1); color: var(--red); font-weight: 700; cursor: pointer; }
.cm-day.has:hover, .cm-day.has.on { background: var(--red); color: #fff; }
.cm-day.has.past { background: #f0efed; color: #a3a5a8; }
.cm-month-key { display: flex; gap: 16px; margin-top: 16px; font: 500 13px/1 var(--body); color: var(--text-2); }
.cm-month-key i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -2px; border-radius: 3px; background: rgba(176,18,26,.16); }
.cm-month-key i.t { background: none; box-shadow: inset 0 0 0 1.5px var(--ink); }

.cm-list { display: flex; flex-direction: column; gap: 12px; }
.cm-ev { display: grid; grid-template-columns: 64px 1fr auto; gap: 20px; align-items: center; padding: 20px 22px; border-radius: var(--r-panel); background: var(--s2); color: #fff; transition: box-shadow .2s; }
.cm-ev .date { width: auto; padding: 0; background: none; }
.cm-ev .date b { font-size: 40px; }
.cm-ev .date span { color: var(--pink); letter-spacing: .16em; }
.cm-ev.on { box-shadow: inset 0 0 0 1.5px var(--red); }
.cm-ev h3 { margin: 0 0 4px; font: 400 19px/1.1 var(--display); text-transform: uppercase; color: #fff; }
.cm-ev-meta { display: block; font: 600 14px/1.3 var(--body); color: var(--on-dark-2); }
.cm-add { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: var(--r-btn); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.26); color: #fff; font: 600 14px/1 var(--body); white-space: nowrap; }
.cm-add:hover { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); }
.cm-add svg { width: 15px; height: 15px; }
.cm-list-foot { font: 500 14px/1.4 var(--body); color: var(--on-dark-2); padding: 4px 2px 0; }
.cm-list-foot a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- PR board ---------- */
.cm-pr-intro { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
.cm-stat { padding: 20px 22px; border-radius: var(--r-panel); background: var(--s1); box-shadow: inset 0 0 0 1px var(--line-dark); }
.cm-stat b { display: block; font: 400 30px/1 var(--display); color: #fff; }
.cm-stat span { display: block; margin-top: 8px; font: 500 14px/1.3 var(--body); color: var(--on-dark-2); }

.cm-panel { border-radius: var(--r-panel); background: var(--s1); box-shadow: inset 0 0 0 1px var(--line-dark); }
.cm-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding: 18px 22px; border-bottom: 1px solid var(--line-dark); }
.cm-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 8px; background: var(--ink-deep); }
.cm-seg button { padding: 10px 14px; border: 0; border-radius: 5px; background: transparent; color: var(--on-dark-2); font: 600 14px/1 var(--body); cursor: pointer; }
.cm-seg button[aria-pressed="true"] { background: #fff; color: var(--ink); }
.cm-legend { display: flex; gap: 16px; flex-wrap: wrap; font: 500 14px/1 var(--body); color: var(--on-dark-2); }
.cm-legend span { display: inline-flex; align-items: center; gap: 7px; }
.cm-legend i { width: 10px; height: 10px; border-radius: 50%; }

.cm-chart { position: relative; padding: 14px 18px 10px 6px; }
.cm-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.cm-chart .grid line { stroke: rgba(255,255,255,.07); }
.cm-chart .axis text { fill: var(--on-dark-3); font: 500 12px var(--body); }
.cm-chart .axis-title { fill: var(--on-dark-2); font: 600 12px var(--body); letter-spacing: .06em; }
.cm-chart .ref { stroke: rgba(255,255,255,.22); stroke-dasharray: 4 5; }
.cm-chart .ref-label { fill: var(--on-dark-3); font: 600 12px var(--body); }
.cm-chart circle.dot { stroke: var(--s1); stroke-width: 2; transition: r .12s, opacity .2s; }
.cm-chart circle.dot.dim { opacity: .18; }
.cm-chart circle.hit { fill: transparent; cursor: pointer; }
.cm-tip { position: absolute; z-index: 3; pointer-events: none; min-width: 180px; padding: 12px 14px; border-radius: 8px; background: #fff; color: var(--ink); box-shadow: 0 12px 32px rgba(0,0,0,.4); font: 500 13px/1.45 var(--body); opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s; }
.cm-tip.on { opacity: 1; transform: none; }
.cm-tip b { display: block; font: 700 15px/1.2 var(--body); margin-bottom: 4px; }
.cm-tip .big { font: 400 22px/1 var(--display); margin: 2px 0 6px; }
.cm-tip span { color: var(--text-2); }
.cm-chart-note { padding: 0 22px 18px; font: 500 13px/1.4 var(--body); color: var(--on-dark-3); }

.cm-board { margin-top: 24px; }
.cm-board .cm-controls input { flex: 1 1 200px; max-width: 280px; padding: 12px 14px; border: 0; border-radius: var(--r-btn); background: var(--ink-deep); color: #fff; font: 500 15px/1 var(--body); box-shadow: inset 0 0 0 1px var(--line-dark); }
.cm-board .cm-controls input::placeholder { color: var(--on-dark-3); }
.cm-filters { display: flex; gap: 10px 12px; flex-wrap: wrap; align-items: center; }
.cm-count { font: 500 14px/1 var(--body); color: var(--on-dark-2); }

/* Top three: a podium of cards, then everyone else as ranked rows */
.cm-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 22px 22px 6px; }
.cm-top { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border-radius: var(--r-panel); background: var(--s2); box-shadow: inset 0 0 0 1px var(--line-dark); }
.cm-top:first-child { background: linear-gradient(160deg, rgba(176,18,26,.32), rgba(176,18,26,.08) 70%), var(--s2); box-shadow: inset 0 0 0 1px rgba(176,18,26,.6); }
.cm-top .rk { font: 700 12px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-2); }
.cm-top b { font: 400 34px/1 var(--display); color: #fff; margin-top: 6px; }
.cm-top .nm { font: 700 17px/1.2 var(--body); color: #fff; }
.cm-top .sub { font: 500 13px/1.3 var(--body); color: var(--on-dark-2); }

.cm-rows { list-style: none; margin: 0; padding: 10px 22px 8px; }
.cm-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 180px 96px; gap: 16px; align-items: center; padding: 14px 4px; border-top: 1px solid var(--line-dark); }
.cm-row:first-child { border-top: 0; }
.cm-row .rk { font: 400 18px/1 var(--display); color: var(--on-dark-3); text-align: center; }
.cm-row .who b { display: block; font: 700 16px/1.2 var(--body); color: #fff; }
.cm-row .who span { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font: 500 13px/1.2 var(--body); color: var(--on-dark-2); }
.cm-row .who i, .cm-top .sub i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; }
.cm-ratio { display: flex; align-items: center; gap: 10px; font: 600 13px/1 var(--body); color: var(--on-dark-2); }
.cm-ratio s { position: relative; flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); text-decoration: none; }
.cm-ratio s::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 2px; background: rgba(255,255,255,.55); }
.cm-row .wt { font: 400 20px/1 var(--display); color: #fff; text-align: right; white-space: nowrap; }
.cm-empty { padding: 28px 26px; font: 500 15px/1.4 var(--body); color: var(--on-dark-2); }
.cm-more { display: flex; justify-content: center; padding: 6px 22px 22px; }
.cm-more:empty { display: none; }
.cm-more button { padding: 12px 20px; border: 0; border-radius: var(--r-btn); background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); font: 600 15px/1 var(--body); cursor: pointer; }
.cm-more button:hover { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); }
.cm-pr-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 22px; border-top: 1px solid var(--line-dark); font: 500 15px/1.4 var(--body); color: var(--on-dark-2); }
.cm-pr-cta b { color: #fff; }
.cm-sample { display: inline-block; margin-left: 10px; padding: 5px 9px; border-radius: 4px; background: rgba(255,255,255,.08); font: 600 12px/1 var(--body); color: var(--on-dark-2); vertical-align: middle; }

/* The gym's own poster in the slot instead of text: shown whole, over a blurred copy of itself */

/* ---------- Socials ---------- */
.cm-social { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cm-soc { display: flex; flex-direction: column; gap: 16px; padding: 28px; border-radius: var(--r-panel); background: #fff; color: var(--ink); transition: transform .2s, box-shadow .2s; }
.cm-soc:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,.12); }
.cm-soc-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--r-btn); background: var(--ink); color: #fff; }
.cm-soc-icon svg { width: 24px; height: 24px; }
.cm-soc h3 { margin: 0; font: 400 22px/1.1 var(--display); text-transform: uppercase; }
.cm-soc p { margin: 0; font: 400 15px/1.5 var(--body); color: var(--text-2); }
.cm-soc-go { margin-top: auto; font: 600 15px/1 var(--body); color: var(--red); }


@media (max-width: 900px) {
  .cm-cal { grid-template-columns: 1fr; }
  .cm-social { grid-template-columns: 1fr; }
  .cm-pr-intro { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cm-ev { grid-template-columns: 56px 1fr; }
  .sec.cm-open { padding-top: 48px; padding-bottom: 64px; }
  .cm-ev .cm-add { grid-column: 2; justify-self: start; }
  .cm-month { padding: 20px 16px 18px; }
  .cm-podium { grid-template-columns: 1fr; padding: 16px 16px 4px; }
  .cm-rows { padding: 6px 16px 4px; }
  .cm-row { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; }
  .cm-ratio { display: none; }
  .cm-controls { padding: 16px; }
  .cm-chart { padding-right: 10px; }
}

@media (max-width: 420px) { .cta-pair { grid-template-columns: 1fr; } }
PE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gallery hero sketch: the gym map</title>
<meta name="description" content="Photos of Loveland Athletic Club: the weight floor, racks, Matrix, Cybex and Hammer Strength machines, turf, cardio, the recovery room and the lobby.">
<meta name="robots" content="noindex, nofollow">
<meta name="theme-color" content="#16181a">
<link rel="icon" href="/assets/img/logo-icon.png?v=ae861fee" type="image/png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo+Black&amp;family=Archivo:wdth,wght@62..125,800..900&amp;family=Barlow:wght@400;500;600;700&amp;display=swap">
<link rel="stylesheet" href="/assets/site.css?v=b9f1fb2a">
<script src="/assets/site.js?v=8ce34f56" defer></script>
</head>
<body class="page-gallery">
<a class="skip-link" href="#main">Skip to content</a>
<header class="site-header" id="site-header">
  <div class="header-left">
    <a class="brand" href="/">
      <img src="/assets/img/logo-light.png?v=03e968de" alt="Loveland Athletic Club" width="1161" height="598">
    </a>
    <nav class="header-social" aria-label="Social"><a href="https://www.instagram.com/lovelandathleticclub/" data-social="instagram" aria-label="Instagram" target="_blank" rel="noopener"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1.2" fill="currentColor" stroke="none"/></svg></a>
<a href="https://www.facebook.com/LovelandAthleticClub" data-social="facebook" aria-label="Facebook" target="_blank" rel="noopener"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"><path d="M14 8h3V4h-3c-2.8 0-4 1.8-4 4.3V10H7v4h3v8h4v-8h3l1-4h-4V8.6c0-.4.3-.6.6-.6z"/></svg></a>
<a href="https://www.google.com/search?q=Loveland+Athletic+Club&amp;ludocid=191272268436534911#lrd=0x87695378076914f9:0x2a7891d5f8af67f,1" data-social="google" aria-label="Google" target="_blank" rel="noopener"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M20 12a8 8 0 1 1-2.4-5.7"/><path d="M20 12h-7"/></svg></a></nav>
  </div>
  <div class="header-right">
    <nav class="site-nav" id="site-nav" aria-label="Main">
      <a href="/">Home</a>
<a href="/membership">Memberships</a>
<a href="/training">Personal Training</a>
<a href="/gallery" aria-current="page">Gallery</a>
<a href="/community">Community</a>
<a href="/staff">Staff</a>
      <a class="nav-panel-cta" href="/#lac-form">Free 3-day pass</a>
      <a class="nav-panel-call" href="tel:+19706634009" data-where="menu"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2"/></svg><span>Call 970-663-4009</span></a>
      <div class="nav-panel-social"><a href="https://www.instagram.com/lovelandathleticclub/" data-social="instagram" aria-label="Instagram" target="_blank" rel="noopener"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1.2" fill="currentColor" stroke="none"/></svg></a>
<a href="https://www.facebook.com/LovelandAthleticClub" data-social="facebook" aria-label="Facebook" target="_blank" rel="noopener"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"><path d="M14 8h3V4h-3c-2.8 0-4 1.8-4 4.3V10H7v4h3v8h4v-8h3l1-4h-4V8.6c0-.4.3-.6.6-.6z"/></svg></a>
<a href="https://www.google.com/search?q=Loveland+Athletic+Club&amp;ludocid=191272268436534911#lrd=0x87695378076914f9:0x2a7891d5f8af67f,1" data-social="google" aria-label="Google" target="_blank" rel="noopener"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M20 12a8 8 0 1 1-2.4-5.7"/><path d="M20 12h-7"/></svg></a></div>
    </nav>
    <a class="nav-call" href="tel:+19706634009" data-where="header"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2"/></svg><span><span class="nav-call-num">970-663-4009</span><span class="nav-call-short">Call</span></span></a>
    <a class="btn btn-red nav-cta" href="/#lac-form">Free 3-day pass</a>
    <button class="nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav">Menu</button>
  </div>
</header>
<main id="main">
<style>
/* Sketch: the Gallery opener as a map of the gym. Flat floor plan by default; 3D loads only when asked. */
.gmap { background: var(--ink-deep); color: var(--on-dark); border-bottom: 3px solid var(--red); padding: 120px 0 56px; }
.gmap-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.gmap-head .page-title { margin: 6px 0 8px; }
.gmap-head .page-lede { margin: 0; }
.gmap-head .page-actions { margin-top: 20px; }
.gmap-view { display: flex; gap: 4px; padding: 4px; background: var(--s1); border: 1px solid var(--line-dark); border-radius: var(--r-panel); flex: none; }
.gmap-view button { width: 120px; height: 40px; border: 0; border-radius: var(--r-btn); background: none; color: var(--on-dark-2); font: 600 15px var(--body); cursor: pointer; }
.gmap-view button:hover { color: var(--on-dark); }
.gmap-view button[aria-pressed="true"] { background: var(--red); color: #fff; }
.gmap-stage { position: relative; border-radius: var(--r-panel); overflow: hidden; background: #131517; border: 1px solid var(--line-dark); }
.gmap-stage svg { display: block; width: 100%; height: auto; }
.gmap-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--ink-deep); }
.gmap-stage iframe[hidden] { display: none; }
.gmap-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--on-dark-2); font-weight: 600; pointer-events: none; }
.gmap-loading[hidden] { display: none; }
.gm-floor { fill: #1d2023; }
.gm-wall { stroke: #8d9095; stroke-linecap: square; fill: none; }
.gm-gap { stroke: #1d2023; stroke-linecap: butt; }
.gm-win { stroke: #5b6f7c; stroke-linecap: butt; }
.gm-area rect { fill: #262a2d; stroke: rgba(255,255,255,.16); stroke-width: .07; transition: fill .15s, stroke .15s; }
.gm-area.turf rect { fill: #24432f; stroke: rgba(120,190,140,.35); }
.gm-area text { fill: var(--on-dark-2); font-family: var(--body); font-weight: 700; text-anchor: middle; dominant-baseline: middle; pointer-events: none; transition: fill .15s; }
.gm-area text.n { font-weight: 500; fill: var(--on-dark-3); }
.gm-area.go { cursor: pointer; outline: none; }
.gm-area.go text { fill: var(--on-dark); }
.gm-area.go:hover rect, .gm-area.go:focus-visible rect { fill: rgba(176,18,26,.32); stroke: var(--red); }
.gm-area.go.on rect { fill: rgba(176,18,26,.5); stroke: #e04048; }
.gm-area.quiet rect { fill: none; stroke: none; }
.gm-area.quiet text { fill: #6d7176; font-weight: 600; }
.gm-door { fill: var(--red); }
.gm-door-t { fill: var(--on-dark-2); font-family: var(--body); font-weight: 600; text-anchor: middle; dominant-baseline: middle; }
.gmap-hint { margin: 14px 0 0; color: var(--on-dark-3); font-size: 14px; }
/* The photos for one area. */
.gmap-photos { position: absolute; top: 16px; right: 16px; width: min(460px, 46%); display: flex; flex-direction: column; border-radius: var(--r-panel); overflow: hidden; background: var(--s1); box-shadow: 0 14px 40px rgba(0,0,0,.55); }
.gmap-photos[hidden] { display: none; }
.gmap-photos.left { right: auto; left: 16px; }
.gmap-photos figure { margin: 0; aspect-ratio: 3 / 2; background: #0c0d0e; }
.gmap-photos img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gp-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.gp-bar h2 { margin: 0; font: 400 16px/1.2 var(--display); text-transform: uppercase; }
.gp-bar p { margin: 4px 0 0; color: var(--on-dark-2); font-size: 14px; }
.gp-nav { display: flex; gap: 6px; flex: none; }
.gp-nav button { width: 40px; height: 40px; border: 1px solid var(--line-dark); border-radius: var(--r-btn); background: var(--s2); color: var(--on-dark); font-size: 22px; line-height: 1; cursor: pointer; }
.gp-nav button:hover { border-color: rgba(255,255,255,.35); }
.gp-nav button[disabled] { opacity: .35; cursor: default; }
.gp-thumbs { display: flex; gap: 6px; padding: 0 16px 16px; overflow-x: auto; }
.gp-thumbs button { flex: none; width: 64px; height: 44px; padding: 0; border: 2px solid transparent; border-radius: 4px; overflow: hidden; background: var(--s2); cursor: pointer; opacity: .6; }
.gp-thumbs button.on { border-color: var(--red); opacity: 1; }
.gp-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 600px) { .gmap-view { display: none; } }
@media (max-width: 860px) {
  .gmap { padding: 96px 0 40px; }
  .gmap-head { flex-direction: column; align-items: stretch; }
  .gmap-photos { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 82vh; border-radius: var(--r-panel) var(--r-panel) 0 0; z-index: 60; }
}

/* ---------- Staff: the owner's card, then photo cards for the desk and any trainers ---------- */
.staff-owner { display: grid; grid-template-columns: 5fr 7fr; background: #fff; border-radius: var(--r-panel); overflow: hidden; box-shadow: 0 24px 44px -26px rgba(0,0,0,.4); }
.staff-owner-photo { min-height: 520px; background-size: cover; background-position: center; }
.staff-owner-text { padding: 48px 52px; display: flex; flex-direction: column; gap: 16px; justify-content: center; color: var(--ink); }
.staff-owner-name { font: 400 44px/1.05 var(--display); text-transform: uppercase; color: var(--ink); }
.staff-quote { font: 500 19px/1.55 var(--body); color: var(--text-2); border-left: 3px solid var(--red); padding-left: 18px; max-width: 560px; }
.staff-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.staff-facts span { text-align: center; padding: 12px 8px; border-radius: 6px; background: var(--concrete); font: 700 14px/1.2 var(--body); color: var(--ink); }
.staff-role { font: 700 12px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); }
.staff-head { margin: 64px 0 22px; }
.staff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.staff-card { background: #fff; border-radius: var(--r-panel); overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; }
.staff-card:hover { transform: translateY(-4px); box-shadow: 0 20px 36px -22px rgba(0,0,0,.35); }
.staff-photo { aspect-ratio: 4/5; background-size: cover; background-position: center; }
.staff-photo--none { display: grid; place-items: center; background: #1b1e20; }
.staff-photo--none img { width: 38%; opacity: .22; }
.staff-text { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 7px; }
.staff-name { font: 400 22px/1.1 var(--display); text-transform: uppercase; color: var(--ink); }
.staff-line { font: 500 16px/1.45 var(--body); color: var(--text-2); }
@media (max-width: 860px) {
  .staff-owner { grid-template-columns: 1fr; }
  .staff-owner-photo { min-height: 0; aspect-ratio: 560/620; }
  .staff-owner-text { padding: 28px 24px 32px; }
  .staff-owner-name { font-size: 36px; }
  .staff-grid { grid-template-columns: 1fr 1fr; }
  .staff-head { margin-top: 48px; }
}
@media (max-width: 520px) {
  .staff-grid { grid-template-columns: 1fr; }
  .staff-facts { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .staff-card, .staff-card:hover { transition: none; transform: none; } }

/* ---------- Training: Jay's title band, the free first session, the ladder of three ways to train ---------- */
/* Plain black band: Jay's photo is the picture. It hangs out of the band into the next one. */
.tj-hero { position: relative; z-index: 2; }
.tj-hero .wrap { position: relative; }
.tj-hero .page-hero-inner { min-height: 500px; justify-content: center; padding-right: 480px; }
.tj-hero .page-title { font-size: clamp(44px, 6.6vw, 92px); line-height: .9; max-width: none; }
.tj-photo { position: absolute; right: var(--gutter, 32px); top: 76px; width: 420px; aspect-ratio: 343 / 494; border-radius: var(--r-panel); overflow: hidden; box-shadow: 0 40px 70px -30px rgba(0,0,0,.75); }
.tj-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sec.tj-first-band { padding-top: 96px; padding-bottom: 96px; }
.tj-first { padding-right: 480px; }
.tj-first .h2 { color: var(--ink); font-size: clamp(34px, 4.6vw, 60px); line-height: .96; max-width: 11ch; }
.tj-first .h2 em { display: block; font-style: normal; color: var(--red); }
.tj-first p { margin-top: 22px; max-width: 38ch; font: 500 21px/1.4 var(--body); color: var(--ink); }
.tj-first .btn { margin-top: 30px; }
/* The ladder: plan cards with level bottoms and rising tops; the heading sits in the gap they leave. */
.tj-ladder { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: end; }
.tj-ladder .plan-card:nth-of-type(1) { min-height: 340px; }
.tj-ladder .plan-card:nth-of-type(2) { min-height: 418px; }
.tj-ladder .plan-card:nth-of-type(3) { min-height: 496px; }
.tj-ladder > .h2 { position: absolute; left: 0; top: 0; width: calc((100% - 28px) / 3); padding-right: 12px; }
.tj-ladder .plan-name, .pg-grid .plan-name, .pg-check .plan-name { font-size: 30px; }

/* ---------- Programs: a title, three plan cards, one check-ins row ---------- */
.sec.pg-band { padding-top: 88px; padding-bottom: 96px; }
.pg-title { font: 400 clamp(36px, 5vw, 64px)/.95 var(--display); text-transform: uppercase; color: #fff; }
.pg-sub { margin-top: 16px; font: 400 19px/1.5 var(--body); color: var(--on-dark-2); }
.pg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 48px; }
.pg-check { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; margin-top: 14px; padding: 30px 28px; border-radius: var(--r-panel); background: var(--s1); }
.pg-check .plan-name { margin: 12px 0 10px; }
.pg-check .plan-price { margin-bottom: 10px; }
.pg-check-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pg-check-actions .btn { justify-content: center; min-width: 190px; }

/* ---------- Booking: what, which day, what time of day, then request ---------- */
.sec.bk-band { padding-top: 72px; padding-bottom: 96px; }
.bk-title { font: 400 clamp(32px, 4.4vw, 56px)/.95 var(--display); text-transform: uppercase; color: #fff; }
.bk-sub { margin: 14px 0 36px; font: 400 19px/1.5 var(--body); color: var(--on-dark-2); }
.bk { display: grid; grid-template-columns: 5fr 7fr; gap: 28px; align-items: start; }
.bk-types { display: grid; gap: 12px; }
.bk-type { display: block; width: 100%; text-align: left; cursor: pointer; border: 0; padding: 24px 26px; border-radius: var(--r-panel); background: var(--s1); color: var(--on-dark); box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .2s, background .2s; }
.bk-type b { display: block; font: 400 24px/1 var(--display); text-transform: uppercase; color: #fff; }
.bk-type span { display: block; margin-top: 10px; font: 400 17px/1.4 var(--body); color: var(--on-dark-2); }
.bk-type em { float: right; font: 700 12px/1 var(--body); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: #5fd08a; }
.bk-type:hover { box-shadow: inset 0 0 0 2px rgba(255,255,255,.18); }
.bk-type[aria-pressed="true"] { background: var(--s2); box-shadow: inset 0 0 0 2px var(--red); }
.bk-call { margin-top: 22px; font: 500 16px/1.5 var(--body); color: var(--on-dark-2); }
.bk-call a { display: inline-flex; align-items: center; gap: 6px; color: #fff; border-bottom: 1px solid rgba(255,255,255,.4); }
.bk-call .ico { width: 15px; height: 15px; }
.bk-cal { padding: 28px; border-radius: var(--r-panel); background: #fff; color: var(--ink); }
.bk-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.bk-cal-head b { font: 400 22px/1 var(--display); text-transform: uppercase; }
.bk-nav { display: flex; gap: 6px; }
.bk-nav button { width: 38px; height: 38px; cursor: pointer; border: 1.5px solid rgba(0,0,0,.18); border-radius: var(--r-btn); background: #fff; color: var(--ink); font-size: 17px; line-height: 1; }
.bk-nav button:disabled { opacity: .3; cursor: default; }
.bk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.bk-grid span { padding: 6px 0; text-align: center; font: 700 11px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.bk-grid button, .bk-grid u { aspect-ratio: 1 / .78; display: grid; place-items: center; border: 0; border-radius: 6px; font: 600 16px/1 var(--body); text-decoration: none; }
.bk-grid u { color: #b9bbbe; }
.bk-grid button { cursor: pointer; background: #eeedeb; color: var(--ink); }
.bk-grid button:hover { background: #dedcd9; }
.bk-grid button[aria-pressed="true"] { background: var(--red); color: #fff; }
.bk-times { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(0,0,0,.12); }
.bk-times button { cursor: pointer; padding: 13px 0; border-radius: 6px; border: 1.5px solid rgba(0,0,0,.18); background: #fff; color: var(--ink); font: 600 15px/1 var(--body); }
.bk-times button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.bk-form { display: grid; gap: 14px; margin-top: 22px; }
.bk-sum { font: 600 17px/1.35 var(--body); color: var(--ink); }
.bk-sum small { display: block; font: 500 14px/1.4 var(--body); color: var(--text-2); }
.bk-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bk-field { width: 100%; min-width: 0; padding: 14px 16px; border-radius: var(--r-btn); border: 1.5px solid rgba(0,0,0,.18); background: #fff; color: var(--ink); font: 400 16px/1.2 var(--body); outline: none; }
.bk-field:focus-visible { border-color: var(--ink); }
.bk-field::placeholder { color: var(--text-2); }
.bk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.bk-form .btn { justify-content: center; }
.bk-msg { font: 500 15px/1.4 var(--body); color: var(--red); }
.bk-msg:empty { display: none; }
.bk-sent { padding: 40px 8px; text-align: center; }
.bk-sent b { display: block; font: 400 28px/1 var(--display); text-transform: uppercase; }
.bk-sent p { margin-top: 14px; font: 500 17px/1.5 var(--body); color: var(--text-2); }

@media (max-width: 1000px) {
  .tj-hero .page-hero-inner, .tj-first { padding-right: 0; }
  .tj-hero .page-hero-inner { min-height: 0; }
  .tj-hero .wrap { display: flex; flex-direction: column; gap: 8px; padding-bottom: 0; }
  .tj-photo { position: static; width: min(100%, 420px); margin: 0 0 -90px; }
  .sec.tj-first-band { padding-top: 140px; padding-bottom: 72px; }
  .tj-ladder { grid-template-columns: 1fr; }
  .tj-ladder .plan-card:nth-of-type(n) { min-height: 0; }
  .tj-ladder > .h2 { position: static; width: auto; margin-bottom: 14px; order: -2; }
  .tj-ladder .plan-card.is-featured { order: -1; }
  .pg-grid, .pg-check, .pg-check-actions { grid-template-columns: 1fr; }
  .sec.pg-band { padding-top: 56px; padding-bottom: 64px; }
  .bk { grid-template-columns: 1fr; }
  .bk-cal { padding: 18px; }
  .bk-times { grid-template-columns: repeat(2, 1fr); }
  .sec.bk-band { padding-top: 48px; padding-bottom: 64px; }
}
@media (max-width: 520px) { .bk-fields { grid-template-columns: 1fr; } }

/* ---------- phones: the app-like pass ---------- */

@media (max-width: 1040px) {
  .site-nav a { font-size: clamp(22px, 6.6vw, 30px); }
  .tab { align-content: end; padding-bottom: 7px; }
}

@media (max-width: 640px) {
  /* Photo sets become one swipe row with the next photo peeking, like Amenities and Reviews. */
  .photo-cards, .gal { display: flex; flex-direction: row; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); scroll-padding: 0 var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .photo-cards::-webkit-scrollbar, .gal::-webkit-scrollbar { display: none; }
  .gal-block, .gal-stack, .gal-row { display: contents; }
  .photo-card, .gal-ph { flex: 0 0 84%; min-width: 0; scroll-snap-align: start; }
  .bk-grid button, .bk-grid u { aspect-ratio: 1; min-height: 40px; }
}

@media (max-width: 640px) {
  /* Button pairs are the same width (Even sizing). */
  .hero-actions, .page-actions { display: grid; grid-template-columns: 1fr; }
  .hero-actions .btn, .page-actions .btn { width: 100%; }
  .visit-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .visit-actions .btn { width: 100%; padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 640px) {
  .cm-pr-cta .btn, .staff-owner-text .btn { display: flex; justify-content: center; width: 100%; }
}

/* ---------- phones: the staff are one swipe row, like the photo sets ---------- */
@media (max-width: 640px) {
  .staff-grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; scroll-padding: 0 var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
  .staff-grid::-webkit-scrollbar { display: none; }
  .staff-card { flex: 0 0 78%; min-width: 0; scroll-snap-align: start; }
}

/* the address under the Home hero's buttons: a link to directions */
.hero-where { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: -2px; font: 600 16px/1.2 var(--body); color: #fff; }
.hero-where .pin { flex: none; width: 18px; height: 18px; color: var(--red); }
.hero-where span { text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 4px; transition: text-decoration-color .2s ease; }
.hero-where:hover span { text-decoration-color: #fff; }
@media (max-width: 640px) { .sec-inside .head--row { flex-direction: column; align-items: stretch; } .sec-inside .head--row .btn { width: 100%; } }

/* ---------- polish: quiet motion everywhere. Quick, eased, never bouncy ---------- */

/* one page fades into the next; the header and the phone bar hold still */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .18s ease both; }
::view-transition-new(root) { animation: vt-in .32s ease both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
@media (min-width: 1041px) { .site-header { view-transition-name: site-header; } }
@media (max-width: 1040px) { .tabbar { view-transition-name: tabbar; } }

/* the header lifts off the page once it scrolls */
.site-header { transition: background .3s ease, box-shadow .3s ease; }
.site-header.scrolled { box-shadow: 0 1px 0 var(--line-dark), 0 14px 30px -18px rgba(0,0,0,.9); }
@media (min-width: 1041px) {
  .site-header.scrolled { background: rgba(22,24,26,.84); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); }
}

/* buttons press in; everything you can tap answers */
.btn { transition: background .2s ease, transform .2s var(--ease), box-shadow .2s ease; }
.btn:active { transform: scale(.975); transition-duration: .08s; }
.seg button, .chip, .cm-day, .cm-add, .faq summary, .site-footer a { transition: background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease; }
.field { transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.field:focus-visible { background: rgba(255,255,255,.09); box-shadow: 0 0 0 3px rgba(224,161,164,.16); }
@media (hover: none) {
  .photo-card, .staff-card, .plan-card, .cm-soc, .cm-ev, .bk-type { transition: transform .18s var(--ease); }
  .photo-card:active, .staff-card:active, .plan-card:active, .cm-soc:active, .cm-ev:active, .bk-type:active { transform: scale(.985); }
}

/* a row of cards arrives one card after another */
.rv.rv-kids { opacity: 1; transform: none; transition: none; }
.rv-kids > * { opacity: 0; translate: 0 22px; transition: opacity .6s ease, translate .7s var(--ease) !important; transition-delay: calc(var(--i, 0) * 90ms) !important; }
.rv-kids.in > * { opacity: 1; translate: none; }

/* a question eases open */
.faq details { transition: background .2s ease, border-color .2s ease; }
.faq summary:hover { color: var(--pink); }
.faq summary::after { transition: transform .3s var(--ease); }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: hidden; opacity: 0; transition: block-size .36s var(--ease), opacity .3s ease, content-visibility .36s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; opacity: 1; }
}

/* an enlarged photo and a full review arrive, they don't pop */
@keyframes fade-in { from { opacity: 0; } }
@keyframes zoom-in { from { opacity: 0; transform: scale(.96); } }
.lightbox { animation: fade-in .25s ease both; }
.lightbox img { animation: zoom-in .35s var(--ease) both; }
.rv-dialog[open] { animation: zoom-in .3s var(--ease) both; }
.rv-dialog::backdrop { animation: fade-in .25s ease both; }

/* links inside a page glide to their section */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .btn:active, .photo-card:active, .staff-card:active, .plan-card:active, .cm-soc:active, .cm-ev:active, .bk-type:active { transform: none; }
  .lightbox, .lightbox img, .rv-dialog[open], .rv-dialog::backdrop { animation: none; }
  .faq details::details-content { transition: none; }
}

/* ---------- polish, round two: things that change in place arrive softly ---------- */
@keyframes rise-sm { from { opacity: 0; translate: 0 10px; } }
#cm-list > .cm-ev, .cm-podium > *, .cm-rows > * { animation: rise-sm .45s var(--ease) both; }
#cm-list > .cm-ev:nth-child(2), .cm-podium > :nth-child(2), .cm-rows > :nth-child(2) { animation-delay: .06s; }
#cm-list > .cm-ev:nth-child(3), .cm-podium > :nth-child(3), .cm-rows > :nth-child(3) { animation-delay: .12s; }
.cm-rows > :nth-child(4) { animation-delay: .16s; }
.cm-rows > :nth-child(5) { animation-delay: .2s; }
.cm-rows > :nth-child(n+6) { animation-delay: .24s; }
.cm-chart circle.dot { animation: fade-in .5s ease both; }
.gmap-photos:not([hidden]) { animation: rise-sm .35s var(--ease) both; }
.pf--sent, .bk-sent { animation: zoom-in .45s var(--ease) both; }
.rv-btn, .gmap-view button, .am-chips button { transition: background .2s ease, color .2s ease, box-shadow .2s ease, opacity .2s ease, transform .15s var(--ease); }
.rv-btn:active:not(:disabled) { transform: scale(.94); }
@media (prefers-reduced-motion: reduce) {
  #cm-list > .cm-ev, .cm-podium > *, .cm-rows > *, .cm-chart circle.dot, .gmap-photos:not([hidden]), .pf--sent, .bk-sent { animation: none; }
  .rv-btn:active:not(:disabled) { transform: none; }
}