/*
 * Everybody Fitness — main stylesheet
 *
 * Structure:
 *   1. Custom properties (brand colors, fonts, spacing)
 *   2. Modern CSS reset
 *   3. Base typography
 *   4. Layout helpers
 *   5. Buttons
 *   6. Accessibility helpers
 */

/* ==========================================================================
   1. Custom properties (design tokens)
   These are reusable variables. Change a color here and it updates
   everywhere it's used (e.g. var(--color-primary)).
   ========================================================================== */
:root {
	/* Brand colors */
	--color-primary:      #C41230; /* Brand red */
	--color-primary-dark: #9F0E26; /* Hover / active state */
	--color-black:        #000000;
	--color-charcoal:     #1A1A1A; /* Heading text */
	--color-body:         #374151; /* Body text */
	--color-muted:        #6B7280; /* Secondary / meta text */
	--color-border:       #E5E5E5;
	--color-bg-alt:       #F5F5F5; /* Alternate section background */
	--color-white:        #FFFFFF;

	/* Font stacks. Inter and Montserrat fall back to system fonts
	   until the self-hosted font files are added. */
	--font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-heading: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Spacing and layout */
	--container-max: 1200px;
	--container-pad: 1.25rem;
	--radius:        4px;

	/* Hero */
	--hero-accent-bar-width: 60px; /* Length of the small red bar in the hero. */
}

/* ==========================================================================
   2. Modern CSS reset
   Strips default browser styling so we start from a clean, predictable base.
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	min-height: 100vh;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

ul,
ol {
	list-style: none;
	padding: 0;
}

a {
	color: inherit;
	text-decoration: none;
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   3. Base typography
   ========================================================================== */
body {
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--color-body);
	background-color: var(--color-white);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-charcoal);
}

h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.25rem; }

p {
	margin-bottom: 1rem;
}

a {
	color: var(--color-primary);
	transition: color 0.2s ease;
}

a:hover,
a:focus {
	color: var(--color-primary-dark);
}

/* Visible focus outline for keyboard users (accessibility). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* ==========================================================================
   4. Layout helpers
   ========================================================================== */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */
.button,
button,
input[type="submit"] {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
	color: var(--color-white);
	background-color: var(--color-primary);
	border: 2px solid var(--color-primary);
	border-radius: var(--radius);
	cursor: pointer;
	text-align: center;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.button:hover,
.button:focus,
button:hover,
button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
	color: var(--color-white);
	background-color: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
}

/* Outline / secondary button variant. */
.button--outline {
	color: var(--color-primary);
	background-color: transparent;
}

.button--outline:hover,
.button--outline:focus {
	color: var(--color-white);
	background-color: var(--color-primary);
}

/* ==========================================================================
   6. Accessibility helpers
   ========================================================================== */

/* Visually hide content but keep it available to screen readers. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Skip link becomes visible when focused via keyboard. */
.skip-link:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 1000;
	width: auto;
	height: auto;
	padding: 0.75rem 1rem;
	clip: auto;
	color: var(--color-white);
	background-color: var(--color-primary);
	border-radius: var(--radius);
}


/* ==========================================================================
   Section 8: Hero (v1.4.0 — rotating headline, video-ready)
   ----------------------------------------------------------------------------
   Bold, centered hero. A photo (swappable for a video) fills the background;
   the headline contains one word that rotates on a timer (see Section 9 in
   main.js). Written mobile-first; @media blocks scale type up.

   Quick-tweak spots:
     .hero min-height ............ overall hero height
     .hero__rotator-word ......... the big red rotating word
     The word LIST lives in main.js (Section 9), not here.
   ========================================================================== */

/* The section is the positioning context for the absolute background. */
.hero {
	position: relative;
	display: flex;
	align-items: center;     /* Vertical centering. */
	justify-content: center; /* Horizontal centering. */
	min-height: 85vh;        /* Mobile height. */
	padding: 64px 0;
	overflow: hidden;
	background-color: var(--color-black); /* Fallback before the photo loads. */
}

/* --- Background layer (photo/video + overlay) --- */
.hero__background {
	position: absolute;
	inset: 0;       /* Fills the whole hero. */
	z-index: 0;
}

/* The photo or video. object-fit: cover fills the area without distortion. */
.hero__media {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Looping hero background video (v2.9.0). Sits behind the overlay + content. */
.hero-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
}

/* Dark gradient for text contrast: darker top & bottom, lighter middle. */
.hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1; /* Above the video. */
	background: linear-gradient(
		180deg,
		rgba( 0, 0, 0, 0.6 ) 0%,
		rgba( 0, 0, 0, 0.4 ) 50%,
		rgba( 0, 0, 0, 0.75 ) 100%
	);
}

/* --- Foreground content --- */
.hero__content {
	position: relative;
	z-index: 2; /* Above the overlay + video. */
	width: 100%;
	max-width: 1200px;
	padding-inline: 24px; /* Mobile side padding. */
	text-align: center;
}

/* --- 1. Eyebrow with flanking red lines --- */
.hero__eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-bottom: 40px;
}

.hero__eyebrow-line {
	width: 40px;
	height: 2px;
	background-color: var(--color-primary);
}

.hero__eyebrow-text {
	font-family: var(--font-body);
	font-size: 11px; /* Mobile. */
	font-weight: 800;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--color-white);
}
/* v2.23.0 — red accent on "24/7 · 365" only; inherits weight/letter-spacing/uppercase, color-only change. */
.hero__eyebrow-accent { color: #E24B4A; }

/* --- 2. Headline with rotating word --- */
.hero__title {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-bottom: 32px;
	font-family: var(--font-heading);
	line-height: 1;
	letter-spacing: -0.025em;
	color: var(--color-white);
	text-align: center;
}

/* The fixed first line ("A gym for"). */
.hero__title-static {
	font-size: 32px; /* Mobile. */
	font-weight: 600;
	color: rgba( 255, 255, 255, 0.9 );
}

/* Container for the rotating word. Reserves vertical space so the layout
   doesn't jump as the word changes. */
.hero__title-rotator {
	position: relative;
	display: block;
	min-height: 1em; /* Matches the rotating word's line height. */
}

/* The changing word itself — biggest, heaviest, brand red. */
.hero__rotator-word {
	display: inline-block;
	font-size: 56px; /* Mobile. */
	font-weight: 900;
	color: var(--color-primary);
	/* JS toggles opacity/transform; CSS animates the change. */
	transition: opacity 0.4s ease, transform 0.4s ease;
}

/* --- 3. Subhead --- */
.hero__subhead {
	max-width: 680px;
	margin: 0 auto 40px;
	font-family: var(--font-body);
	font-size: 16px; /* Mobile. */
	font-weight: 400;
	line-height: 1.5;
	color: rgba( 255, 255, 255, 0.85 );
}

/* --- 4. CTAs: one solid button + one text link --- */
.hero__ctas {
	/* Mobile: stacked and centered. */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

.hero__cta {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 18px 44px;
	border-radius: var(--radius); /* 4px */
	transition: all 0.25s ease;
}

/* Primary CTA — solid red. */
.hero__cta--primary {
	color: var(--color-white);
	background-color: var(--color-primary);
	border: 2px solid var(--color-primary);
}

.hero__cta--primary:hover,
.hero__cta--primary:focus {
	color: var(--color-white);
	background-color: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
	transform: translateY( -2px );
	box-shadow: 0 10px 24px rgba( 0, 0, 0, 0.3 );
}

/* Secondary CTA — plain text link with an arrow. */
.hero__cta-link {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-white);
}

/* Underline only the text (via a bottom border on the inner text span trick:
   here we underline the whole link minus the arrow using border on hover). */
.hero__cta-link .hero__cta-arrow {
	margin-left: 8px;
	transition: transform 0.2s ease;
}

.hero__cta-link:hover,
.hero__cta-link:focus {
	color: var(--color-white);
}

/* Underline appears under the text on hover. */
.hero__cta-link:hover,
.hero__cta-link:focus {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* The arrow itself never gets underlined and slides right on hover. */
.hero__cta-link .hero__cta-arrow {
	text-decoration: none;
	display: inline-block;
}

.hero__cta-link:hover .hero__cta-arrow,
.hero__cta-link:focus .hero__cta-arrow {
	transform: translateX( 4px );
}

/* --- Tablet: 768px and up --- */
@media (min-width: 768px) {

	.hero {
		min-height: 90vh;
	}

	.hero__content {
		padding-inline: 48px;
	}

	.hero__eyebrow-text {
		font-size: 12px;
	}

	.hero__title-static {
		font-size: 48px;
	}

	.hero__rotator-word {
		font-size: 88px;
	}

	.hero__subhead {
		font-size: 18px;
	}

	/* Button + text link side-by-side, vertically centered. */
	.hero__ctas {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 32px;
	}
}

/* --- Desktop: 1024px and up --- */
@media (min-width: 1024px) {

	.hero {
		min-height: 100vh;
	}

	.hero__title-static {
		font-size: 64px;
	}

	.hero__rotator-word {
		font-size: 120px;
	}

	.hero__subhead {
		font-size: 20px;
	}
}

/* --- Reduced motion: keep the word swap instant, no slide/fade transform --- */
@media (prefers-reduced-motion: reduce) {
	.hero__rotator-word {
		transition: none;
	}
	.hero__cta--primary:hover,
	.hero__cta--primary:focus {
		transform: none;
	}
}

/* ==========================================================================
   Section 10: Shared homepage helpers (section headers + outline button)
   Reused by several sections below so the styling stays consistent.
   ========================================================================== */

/* Centered eyebrow + heading used above most sections. */
.section-head {
	max-width: 800px;
	margin: 0 auto 56px;
	text-align: center;
}

.section-head__eyebrow {
	margin-bottom: 16px;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.section-head__title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 28px; /* Mobile. */
	font-weight: 800;
	line-height: 1.1;
	color: var(--color-charcoal);
}

/* Light variants for sections on a dark background. */
.section-head__eyebrow--light {
	color: rgba( 255, 255, 255, 0.8 );
}

.section-head__title--light {
	color: var(--color-white);
}

/* Outline button (used by "View All Classes"). */
.btn-outline {
	display: inline-block;
	padding: 18px 44px;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-primary);
	background-color: transparent;
	border: 2px solid var(--color-primary);
	border-radius: var(--radius);
	transition: all 0.25s ease;
}

.btn-outline:hover,
.btn-outline:focus {
	color: var(--color-white);
	background-color: var(--color-primary);
}

@media (min-width: 768px) {
	.section-head__title {
		font-size: 36px;
	}
}

@media (min-width: 1024px) {
	.section-head__title {
		font-size: 48px;
	}
}

/* ==========================================================================
   Section 11: Brand Statement (homepage Section A)
   ========================================================================== */
.brand-statement {
	padding: 70px 24px; /* Mobile. */
	background-color: var(--color-black); /* Flat dark (no photo). */
}

.brand-statement__inner {
	max-width: 1100px;
	margin: 0 auto;
	text-align: center;
}

.brand-statement__line {
	display: block;
	width: 60px;
	height: 1px;
	margin: 0 auto 32px;
	background-color: var(--color-primary);
}

.brand-statement__title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 28px; /* Mobile. */
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--color-white);
}

.brand-statement__text {
	max-width: 720px;
	margin: 32px auto 0;
	font-family: var(--font-body);
	font-size: 18px; /* Mobile. */
	font-weight: 400;
	line-height: 1.6;
	color: rgba( 255, 255, 255, 0.7 );
}

@media (min-width: 768px) {
	.brand-statement { padding: 100px 32px; }
	.brand-statement__title { font-size: 40px; }
	.brand-statement__text { font-size: 20px; }
}

@media (min-width: 1024px) {
	.brand-statement { padding: 140px 32px; }
	.brand-statement__title { font-size: 56px; }
}

/* ==========================================================================
   Section 12: Why Everybody Fitness — value props (homepage Section B)
   ========================================================================== */
.value-props {
	padding: 80px 24px; /* Mobile. */
	background-color: var(--color-white);
}

.value-props__inner {
	max-width: 1280px;
	margin: 0 auto;
}

/* Extra space below this header per spec. */
.value-props .section-head {
	margin-bottom: 72px;
}

.value-props__grid {
	display: grid;
	grid-template-columns: 1fr; /* Mobile: single column. */
	grid-auto-rows: 1fr;        /* All rows equal height. */
	align-items: stretch;       /* Cards fill their row. */
	gap: 24px;                  /* Mobile gap. */
	margin: 0;
	padding: 0;
	list-style: none;
}

.value-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 24px; /* Mobile. */
	text-align: center;
}

/* Fixed-height icon area so different icon shapes don't shift the layout. */
.value-card__icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80px;
}

.value-card__icon {
	display: block;
	width: 56px;
	height: 56px;
	color: var(--color-primary); /* SVG uses currentColor for the stroke. */
}

.value-card__title {
	min-height: 1.5em; /* Keeps descriptions aligned across cards. */
	margin: 16px 0 12px;
	font-family: var(--font-heading);
	font-size: 24px;
	font-weight: 800;
	color: var(--color-charcoal);
}

.value-card__body {
	max-width: 30ch; /* Stops text from running ultra-wide on big cards. */
	margin: 0 auto;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--color-body);
}

@media (min-width: 768px) {
	.value-props { padding: 80px 32px; }
	.value-props__grid { grid-template-columns: repeat(2, 1fr); } /* 2x2. */
}

@media (min-width: 1024px) {
	.value-props { padding: 120px 32px; }
	.value-props__grid {
		grid-template-columns: repeat(4, 1fr); /* 4 across. */
		gap: 32px;
	}
	.value-card { padding: 32px; } /* Desktop padding. */
}

/* ==========================================================================
   Section 13: Pricing / $24 offer (homepage Section C)
   ========================================================================== */
.offer {
	padding: 70px 24px; /* Mobile. */
	background-color: var(--color-primary);
}

.offer__inner {
	display: grid;
	grid-template-columns: 1fr; /* Mobile: stacked (price first, details below). */
	gap: 48px;
	max-width: 1200px;
	margin: 0 auto;
}

/* Shared eyebrow for both columns. */
.offer__eyebrow {
	display: block;
	margin: 0 0 16px;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: rgba( 255, 255, 255, 0.8 );
}

/* --- Left column: price anchor (centered) --- */
.offer__left {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.offer__original {
	font-family: var(--font-heading);
	font-size: 32px;
	font-weight: 700;
	line-height: 1;
	text-decoration: line-through;
	color: rgba( 255, 255, 255, 0.6 );
}

.offer__amount-wrap {
	display: flex;
	align-items: flex-start; /* "$" sits at the top of the number. */
	justify-content: center;
	margin-top: 8px;
	color: var(--color-white);
}

.offer__currency {
	font-family: var(--font-heading);
	font-size: clamp( 40px, 6vw, 70px ); /* ~50% of the number. */
	font-weight: 700;
	line-height: 1;
}

.offer__amount {
	font-family: var(--font-heading);
	font-size: clamp( 80px, 12vw, 140px ); /* Impactful but no longer dominating. */
	font-weight: 900;
	line-height: 0.85;
}

.offer__period {
	margin-top: 8px;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 500;
	color: rgba( 255, 255, 255, 0.8 );
}

.offer__divider {
	width: 70px;
	height: 1px;
	margin: 24px 0;
	background-color: rgba( 255, 255, 255, 0.4 );
}

.offer__monthly {
	margin: 0;
	font-family: var(--font-body);
	font-size: 19px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--color-white);
}

.offer__monthly strong {
	font-weight: 800;
}

.offer__trust {
	margin: 16px 0 0;
	font-family: var(--font-body);
	font-size: 13px;
	font-style: italic;
	color: rgba( 255, 255, 255, 0.7 );
}

/* --- Right column: what's included + CTA --- */
.offer__right {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}

.offer__details-title {
	margin: 0 0 24px;
	font-family: var(--font-heading);
	font-size: 28px;
	font-weight: 800;
	line-height: 1.1;
	color: var(--color-white);
}

.offer__list {
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

.offer__list-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 12px;
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-white);
}

.offer__check {
	flex: none;
	margin-top: 2px;
	color: var(--color-white);
}

.offer__cta {
	display: inline-block;
	padding: 20px 48px;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-primary);
	background-color: var(--color-white);
	border-radius: var(--radius);
	transition: all 0.25s ease;
}

.offer__cta:hover,
.offer__cta:focus {
	color: var(--color-primary);
	background-color: var(--color-bg-alt);
	transform: translateY( -2px );
	box-shadow: 0 12px 32px rgba( 0, 0, 0, 0.2 );
}

.offer__cta-note {
	margin: 12px 0 0;
	font-family: var(--font-body);
	font-size: 13px;
	color: rgba( 255, 255, 255, 0.7 );
}

@media (min-width: 1024px) {
	.offer { padding: 100px 32px; }
	.offer__inner {
		grid-template-columns: 1fr 1fr; /* Balanced 50 / 50. */
		align-items: center;
		gap: 64px;
	}
}

/* ==========================================================================
   Section 14: Amenities carousel (homepage Section D)
   Dark section; 12 photo cards on a horizontal scroll-snap track.
   Mobile: 1.5 cards visible + dot indicators.
   Tablet: ~2.5 cards + arrows. Desktop: 4 cards + arrows.
   ========================================================================== */
.amenities {
	padding: 80px 0; /* Mobile. */
	background-color: #0A0A0A; /* Dark section. */
}

.amenities__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding-inline: 24px;
}

/* Carousel wrapper — relative so the arrows can sit at its edges. */
.carousel {
	position: relative;
}

/* The horizontal scrolling track. */
.carousel__track {
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 0 0 4px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	scrollbar-width: none; /* Firefox: hide scrollbar. */
	cursor: grab; /* Draggable hint. */
}

.carousel__track::-webkit-scrollbar { display: none; } /* WebKit: hide scrollbar. */

.carousel__track.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	scroll-snap-type: none; /* Free drag while held. */
}

.carousel__track:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 4px;
}

/* Card. Mobile = ~1.5 cards visible (peek the next one). */
.amenity-card {
	position: relative;
	flex: 0 0 66%;
	scroll-snap-align: start;
	aspect-ratio: 4 / 5;
	min-height: 420px; /* Mobile: identical card heights (not aspect-ratio alone). */
	border-radius: 8px;
	overflow: hidden; /* Clips the hover zoom. */
}

.amenity-card__link {
	display: block;
	width: 100%;
	height: 100%;
	color: inherit;
}

.amenity-card__media {
	position: absolute;
	inset: 0;
	background-color: var(--color-charcoal); /* Shows while the photo loads. */
}

.amenity-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 400ms ease-out;
}

.amenity-card:hover .amenity-card__img,
.amenity-card:focus-within .amenity-card__img {
	transform: scale( 1.05 );
}

/* Dark gradient (darkest at the bottom) so the caption stays readable.
   On the card, so it does NOT zoom with the photo. */
.amenity-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.85 ) 0%, rgba( 0, 0, 0, 0.2 ) 100% );
	pointer-events: none;
}

/* Content is anchored by a fixed TOP (not bottom) so the title + tagline
   always START at the same Y position across every card, regardless of how
   many lines the title wraps to. */
.amenity-card__content {
	position: absolute;
	top: 62%;
	right: 24px;
	left: 24px;
	z-index: 2; /* Above the gradient. */
}

.amenity-card__title {
	/* min-height reserves space for up to 2 lines, so single-line titles
	   still leave the tagline starting at the same Y across all cards. */
	min-height: 2.6em;
	margin: 0 0 6px;
	font-family: var(--font-heading);
	font-size: 22px;
	font-weight: 800;
	line-height: 1.1;
	color: var(--color-white);
}

/* Red accent bar under the title — animates in on card hover.
   The space (8px margin + 2px bar) is reserved at rest, so only the WIDTH
   animates; no vertical layout shift on hover. */
.amenity-card__title::after {
	content: "";
	display: block;
	width: 0;
	height: 2px;
	margin-top: 8px;
	background: var(--color-primary);
	transition: width 0.4s ease-out;
}

.amenity-card:hover .amenity-card__title::after,
.amenity-card:focus-within .amenity-card__title::after {
	width: 48px;
}

/* Respect reduced motion: show no animated bar growth. */
@media (prefers-reduced-motion: reduce) {
	.amenity-card__title::after {
		transition: none;
	}
}

.amenity-card__tagline {
	margin: 0;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: rgba( 255, 255, 255, 0.9 );
}

/* Brand-gradient fallback if a slot has no photo (looks intentional). */
.amenity-card.placeholder .amenity-card__media {
	background: linear-gradient( 135deg, var(--color-primary) 0%, #0A0A0A 100% );
}

/* Dot indicators (mobile only); JS fills these in. */
.carousel__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 20px;
}

.carousel__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.3 );
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.carousel__dot.is-active {
	background: var(--color-primary);
	transform: scale( 1.3 );
}

.amenities__cta-wrap {
	margin-top: 40px;
	text-align: center;
}

/* Carousel nav arrows — Unicode chars, solid red → inverts on hover.
   Visible on ALL screen sizes (no media query hides them); swipe/drag/dots
   remain parallel input methods. (.carousel already has position: relative.) */
.carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: none;
	background-color: #C41230;
	color: #FFFFFF;
	font-size: 32px;
	font-weight: 700;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 10;
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.4 );
	transition: all 0.3s ease;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	padding: 0 0 4px 0;
}

.carousel__arrow--prev {
	left: 16px;
}

.carousel__arrow--next {
	right: 16px;
}

.carousel__arrow:hover {
	background-color: #FFFFFF;
	color: #C41230;
	transform: translateY( -50% ) scale( 1.1 );
	box-shadow: 0 6px 16px rgba( 0, 0, 0, 0.5 );
}

.carousel__arrow:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 2px;
}

.carousel__arrow.is-hidden {
	opacity: 0;
	pointer-events: none;
}

/* --- Tablet: 768px+ — hide dots, ~2.5 cards --- */
@media (min-width: 768px) {
	.amenities { padding: 100px 0; }
	.amenity-card { flex-basis: calc( ( 100% - 16px ) / 2.5 ); }

	.carousel__dots { display: none; }
}

/* --- Desktop: 1024px+ — 4 cards visible --- */
@media (min-width: 1024px) {
	.amenities { padding: 120px 0; }
	.amenity-card {
		flex-basis: calc( ( 100% - 3 * 16px ) / 4 );
		min-height: 480px; /* Taller, identical card heights on desktop. */
	}
}

/* Reduced motion: no zoom, no smooth auto-scroll. */
@media (prefers-reduced-motion: reduce) {
	.amenity-card__img { transition: none; }
	.amenity-card:hover .amenity-card__img,
	.amenity-card:focus-within .amenity-card__img { transform: none; }
	.carousel__track { scroll-behavior: auto; }
}

/* ==========================================================================
   Section 15: Classes spotlight (homepage Section E)
   ========================================================================== */
.classes {
	padding: 80px 24px; /* Mobile. */
	background-color: var(--color-bg-alt); /* Light — rhythm break between dark sections. */
}

.classes__inner {
	max-width: 1280px;
	margin: 0 auto;
}

/* Section subhead under the H2. */
.classes__subhead {
	max-width: 640px;
	margin: 16px auto 0;
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--color-body);
}

/* Mobile: single column. Tablet/desktop grids set in media queries. */
.classes__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Typography-first card (no photo). */
.class-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 340px; /* Keeps the grid balanced + lets short cards show the bottom-pinned note. */
	overflow: hidden; /* Keeps the top accent bar inside the rounded corners. */
	background-color: var(--color-white);
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.08 );
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Red accent bar across the top. */
.class-card__bar {
	display: block;
	height: 5px;
	background-color: var(--color-primary);
}

.class-card__body {
	display: flex;
	flex-direction: column;
	flex: 1; /* Fill the card so the note can pin to the bottom. */
	padding: 24px; /* Mobile; widened on desktop. */
}

.class-card__name {
	margin: 0 0 8px;
	font-family: var(--font-heading);
	font-size: 24px;
	font-weight: 800;
	line-height: 1.15;
	color: var(--color-charcoal);
}

.class-card__tagline {
	margin: 0 0 20px;
	font-family: var(--font-body);
	font-size: 15px;
	font-style: italic;
	color: var(--color-muted);
}

.class-card__label {
	margin: 0 0 8px;
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.class-card__types {
	margin: 0 0 20px;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--color-body);
}

.class-card__note {
	margin: 0;
	margin-top: auto; /* Pin to the bottom of the card, regardless of content above. */
	padding-top: 16px;
	font-family: var(--font-body);
	font-size: 12px;
	font-style: italic;
	line-height: 1.4;
	color: var(--color-muted);
}

/* CTA below the grid. */
.classes__cta-wrap {
	margin-top: 48px;
	text-align: center;
}

.classes__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 18px 44px;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-white);
	background-color: var(--color-primary);
	border-radius: var(--radius);
	transition: all 0.25s ease;
}

.classes__cta:hover,
.classes__cta:focus {
	color: var(--color-white);
	background-color: var(--color-primary-dark);
	transform: translateY( -2px );
	box-shadow: 0 12px 32px rgba( 0, 0, 0, 0.2 );
}

.classes__cta-arrow {
	transition: transform 0.2s ease;
}

.classes__cta:hover .classes__cta-arrow,
.classes__cta:focus .classes__cta-arrow {
	transform: translateX( 4px );
}

.classes__cta-note {
	margin: 16px 0 0;
	font-family: var(--font-body);
	font-size: 13px;
	font-style: italic;
	color: var(--color-muted);
}

/* --- Tablet: 2 columns --- */
@media (min-width: 768px) {
	.classes { padding: 80px 32px; }
	.classes__grid { grid-template-columns: repeat(2, 1fr); }
	.class-card__body { padding: 36px; }
}

/* Hover lift only on devices with a real pointer. */
@media (hover: hover) and (min-width: 768px) {
	.class-card:hover {
		transform: translateY( -4px );
		box-shadow: 0 14px 36px rgba( 0, 0, 0, 0.12 );
	}
}

/* --- Desktop: 3 columns --- */
@media (min-width: 1024px) {
	.classes { padding: 120px 32px; }
	.classes__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   Section 16: Member stories / testimonials (homepage Section F)
   ========================================================================== */
.testimonials {
	padding: 80px 24px; /* Mobile. */
	background-color: #101012; /* Dark block — matches the location-page reviews section (v2.21.10). */
	color: #fff;
}

.testimonials__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.testimonials__grid {
	display: grid;
	grid-template-columns: 1fr; /* Mobile: single column. */
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.testimonial-card {
	position: relative;
	padding: 40px 32px;
	background-color: var(--color-bg-alt);
	border-radius: var(--radius);
}

/* Big decorative opening quote mark. */
.testimonial-card__quote {
	position: absolute;
	top: 24px;
	left: 24px;
	color: var(--color-primary);
	opacity: 0.3;
}

.testimonial-card__stars {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 4px;
	margin-bottom: 24px;
	color: var(--color-primary); /* Star SVGs fill with currentColor. */
}

.testimonial-card__quote-text {
	position: relative;
	z-index: 1;
	margin: 0 0 32px;
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--color-charcoal);
}

.testimonial-card__name {
	margin: 0;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 700;
	color: var(--color-charcoal);
}

.testimonial-card__location {
	margin: 4px 0 0;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-muted);
}

@media (min-width: 768px) {
	.testimonials { padding: 80px 32px; }
}

@media (min-width: 1024px) {
	.testimonials { padding: 120px 32px; }
	.testimonials__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   Section 17: How to join — 3 steps (homepage Section G)
   ========================================================================== */
.steps {
	padding: 80px 24px; /* Mobile. */
	background-color: var(--color-black);
}

.steps__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.steps .section-head {
	margin-bottom: 72px;
}

.steps__grid {
	display: grid;
	grid-template-columns: 1fr; /* Mobile: stacked. */
	gap: 48px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.step__number {
	display: block;
	font-family: var(--font-heading);
	font-size: 64px; /* Mobile. */
	font-weight: 900;
	line-height: 1;
	color: var(--color-primary);
	opacity: 0.5;
}

.step__title {
	margin: 16px 0 12px;
	font-family: var(--font-heading);
	font-size: 28px;
	font-weight: 800;
	color: var(--color-white);
}

.step__desc {
	margin: 0;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: rgba( 255, 255, 255, 0.75 );
}

@media (min-width: 768px) {
	.steps { padding: 80px 32px; }
	.steps__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 64px;
	}
}

@media (min-width: 1024px) {
	.steps { padding: 120px 32px; }
	.step__number { font-size: 96px; }
}

/* ==========================================================================
   Section 18: Final CTA band (homepage Section H)
   ========================================================================== */
.final-cta {
	padding: 70px 24px; /* Mobile. */
	background-color: #0A0A0A; /* Flat dark (no photo) — red button pops against it. */
}

.final-cta__inner {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}

.final-cta__eyebrow {
	margin: 0 0 16px;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--color-primary); /* Red eyebrow on the dark background. */
}

.final-cta__title {
	margin: 0 0 32px;
	font-family: var(--font-heading);
	font-size: 40px; /* Mobile. */
	font-weight: 800;
	line-height: 1.1;
	color: var(--color-white);
}

.final-cta__subhead {
	max-width: 600px;
	margin: 0 auto 48px;
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
	color: rgba( 255, 255, 255, 0.9 );
}

.final-cta__btn {
	display: inline-block;
	padding: 22px 52px;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-white);
	background-color: var(--color-primary); /* Red button, white text — pops on dark. */
	border-radius: var(--radius);
	transition: all 0.25s ease;
}

.final-cta__btn:hover,
.final-cta__btn:focus {
	color: var(--color-white);
	background-color: var(--color-primary-dark);
	transform: translateY( -2px );
	box-shadow: 0 12px 32px rgba( 0, 0, 0, 0.4 );
}

@media (min-width: 1024px) {
	.final-cta { padding: 100px 32px; }
	.final-cta__title { font-size: 56px; }
}

/* ==========================================================================
   Section 19: Enhanced footer (homepage Section I — used site-wide)
   ========================================================================== */
.site-footer {
	padding: 60px 0 24px; /* Mobile. */
	background-color: var(--color-black);
	color: var(--color-white);
	border-top: 3px solid var(--color-primary); /* Brand-red seam between Final CTA and footer. */
}

.site-footer__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding-inline: 24px;
}

.site-footer__columns {
	display: grid;
	grid-template-columns: 1fr; /* Mobile: stacked. */
	gap: 40px;
}

/* Column 1 — brand. */
.footer-brand__name {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 24px;
	font-weight: 800;
	color: var(--color-white);
}

.footer-brand__tagline {
	max-width: 240px;
	margin: 16px 0 0;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: rgba( 255, 255, 255, 0.6 );
}

.footer-social {
	display: flex;
	gap: 16px;
	margin-top: 24px;
}

.footer-social a {
	display: inline-flex;
	color: rgba( 255, 255, 255, 0.7 );
	transition: color 0.2s ease;
}

.footer-social a:hover,
.footer-social a:focus {
	color: var(--color-white);
}

/* Column headings. */
.footer-col__head {
	margin: 0 0 24px;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--color-white);
}

.footer-links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-links li {
	margin-bottom: 12px;
}

.footer-links a {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 400;
	color: rgba( 255, 255, 255, 0.7 );
	transition: color 0.2s ease;
}

.footer-links a:hover,
.footer-links a:focus {
	color: var(--color-white);
}

.footer-contact {
	display: flex;
	flex-direction: column;
	font-style: normal; /* Reset <address> italics. */
}

.footer-contact a {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.8;
	color: rgba( 255, 255, 255, 0.7 );
	transition: color 0.2s ease;
}

.footer-contact a:hover,
.footer-contact a:focus {
	color: var(--color-white);
}

/* Bottom bar. */
.site-footer__bottom {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 48px;
	padding: 32px 0 0;
	border-top: 1px solid rgba( 255, 255, 255, 0.1 );
}

.site-footer__copyright {
	margin: 0;
	font-family: var(--font-body);
	font-size: 13px;
	color: rgba( 255, 255, 255, 0.5 );
}

.footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.footer-legal a {
	font-family: var(--font-body);
	font-size: 13px;
	color: rgba( 255, 255, 255, 0.5 );
	transition: color 0.2s ease;
}

.footer-legal a:hover,
.footer-legal a:focus {
	color: var(--color-white);
}

@media (min-width: 768px) {
	.site-footer__columns {
		grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet. */
	}
}

@media (min-width: 1024px) {
	.site-footer {
		padding: 80px 0 32px;
	}
	.site-footer__columns {
		grid-template-columns: 1.6fr 1fr 1fr 1.2fr; /* 4 columns; brand wider. */
		gap: 48px;
	}
	.site-footer__bottom {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* ==========================================================================
   Section 20: Promo Bar + Navigation Header
   ----------------------------------------------------------------------------
   Three stacked layers live at the top of every page:
     • .promo-bar  — red strip with the $24 offer
     • .site-header — sticky navigation (logo / menu / CTA buttons)
   Mobile-first: below 1024px the menu collapses into a hamburger drawer.

   Sticky note: on phones (<768px) the long promo text wraps to two lines,
   so the promo bar is left in normal flow (it scrolls away) and the nav
   sticks to the very top. From 768px up the promo is one line and both
   layers stick (promo at top:0, nav just below it at top:44px).
   ========================================================================== */

/* ---- Layer 1: Promo bar ---- */
.promo-bar {
	position: relative; /* Positioning context for the dismiss × (v2.21.25). */
	background-color: var(--color-primary);
	box-shadow: 0 1px 0 rgba( 0, 0, 0, 0.1 );
}

.promo-bar__inner {
	display: flex;
	flex-wrap: wrap; /* Allow wrap on small phones. */
	align-items: center;
	justify-content: center;
	gap: 6px 16px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 10px 24px;
}

.promo-bar__text {
	font-family: var(--font-body);
	font-size: 13px; /* Mobile. */
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--color-white);
	text-align: center;
}

.promo-bar__cta {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-white);
}

.promo-bar__arrow {
	display: inline-block;
	margin-left: 4px;
	transition: transform 0.2s ease;
}

.promo-bar__cta:hover,
.promo-bar__cta:focus {
	color: var(--color-white);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.promo-bar__cta:hover .promo-bar__arrow,
.promo-bar__cta:focus .promo-bar__arrow {
	transform: translateX( 4px );
}

/* ---- Layer 2: Sticky navigation ---- */
.site-header {
	position: static; /* Stickiness now lives on the .site-sticky wrapper (v2.21.25). */
	z-index: 999;
	height: 64px; /* Mobile. */
	/* Dark nav so the black-background logo blends in seamlessly. */
	background-color: #0A0A0A;
	-webkit-backdrop-filter: blur( 4px );
	backdrop-filter: blur( 4px );
	border-bottom: 1px solid rgba( 255, 255, 255, 0.08 );
	transition: box-shadow 0.2s ease, border-color 0.2s ease,
		-webkit-backdrop-filter 0.2s ease, backdrop-filter 0.2s ease;
}

/* Added by JavaScript once the page is scrolled past 50px. */
.site-header.is-scrolled {
	border-bottom-color: rgba( 255, 255, 255, 0.15 );
	box-shadow: 0 2px 12px rgba( 0, 0, 0, 0.4 );
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: 1280px;
	height: 100%;
	margin: 0 auto;
	padding: 0 24px;
}

/* Zone 1: logo. */
.site-logo-text {
	font-family: var(--font-heading);
	font-size: 16px; /* Mobile. */
	font-weight: 900;
	letter-spacing: -0.01em;
	color: var(--color-white); /* White text on the dark nav. */
	white-space: nowrap;
	transition: color 0.2s ease;
}

.site-logo-text:hover,
.site-logo-text:focus {
	color: var(--color-primary);
}

/* Uploaded custom logo (black background blends into the dark nav). */
.custom-logo {
	display: block;
	max-height: 56px; /* Fits comfortably in the 80px desktop nav. */
	width: auto;
	height: auto;
}

/* Zone 2: navigation — MOBILE drawer by default. */
.primary-nav {
	position: absolute;
	top: 100%; /* Drops down just below the nav bar. */
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	background-color: #0A0A0A; /* Dark drawer to match the nav. */
	border-bottom: 1px solid rgba( 255, 255, 255, 0.08 );
	/* Hidden until the hamburger is tapped. */
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transition: max-height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}

/* JS adds .is-open to <body> when the drawer is open. */
.is-open .primary-nav {
	max-height: calc( 100vh - 64px );
	overflow-y: auto;
	opacity: 1;
	visibility: visible;
}

.primary-nav__list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-nav__list a {
	display: block;
	min-height: 56px;
	padding: 16px 24px;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 600;
	color: var(--color-white); /* White on the dark drawer. */
	border-bottom: 1px solid rgba( 255, 255, 255, 0.08 );
}

.primary-nav__list a:hover,
.primary-nav__list a:focus {
	color: var(--color-primary);
}

/* CTAs at the bottom of the mobile drawer. */
.primary-nav__cta {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px;
}

.primary-nav__cta .btn-nav {
	width: 100%;
}

/* Shared nav button styles. */
.btn-nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border: 2px solid transparent;
	border-radius: var(--radius);
	transition: all 0.2s ease;
}

.btn-nav--outline {
	color: var(--color-white);
	background-color: transparent;
	border-color: var(--color-white);
}

.btn-nav--outline:hover,
.btn-nav--outline:focus {
	color: var(--color-black);
	background-color: var(--color-white);
}

.btn-nav--primary {
	color: var(--color-white);
	background-color: var(--color-primary);
	border-color: var(--color-primary);
}

.btn-nav--primary:hover,
.btn-nav--primary:focus {
	color: var(--color-white);
	background-color: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
}

/* Hamburger toggle (mobile). */
.menu-toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 10px;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.menu-toggle__bar {
	display: block;
	width: 100%;
	height: 2px;
	background-color: var(--color-white); /* White bars on the dark nav. */
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.25s ease;
	transform-origin: center;
}

/* Hamburger morphs into an X when open. */
.is-open .menu-toggle__bar:nth-child(1) { transform: translateY( 7px ) rotate( 45deg ); }
.is-open .menu-toggle__bar:nth-child(2) { opacity: 0; }
.is-open .menu-toggle__bar:nth-child(3) { transform: translateY( -7px ) rotate( -45deg ); }

/* Zone 3: CTA buttons. */
.site-header__actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* On mobile, hide Free Trial and shrink Join Now. */
.site-header__free-trial {
	display: none;
}

.site-header__actions .btn-nav--primary {
	padding: 10px 18px;
	font-size: 11px;
}

/* ---- 768px+: promo bar becomes a single sticky line ---- */
@media (min-width: 768px) {

	.promo-bar {
		position: relative; /* sticky now handled by .site-sticky */
		height: 44px;
	}

	.promo-bar__inner {
		flex-wrap: nowrap;
		height: 100%;
		padding: 0 24px;
	}

	.promo-bar__text {
		font-size: 14px;
	}

	.site-header {
		top: 44px; /* Sit directly below the promo bar. */
	}
}

/* ---- 1024px+: full desktop navigation ---- */
@media (min-width: 1024px) {

	.site-header {
		height: 80px;
	}

	.site-logo-text {
		font-size: 18px;
	}

	/* No hamburger on desktop. */
	.menu-toggle {
		display: none;
	}

	/* Nav becomes a centered horizontal row. */
	.primary-nav {
		position: static;
		flex: 1;
		flex-direction: row;
		justify-content: center;
		max-height: none;
		overflow: visible;
		opacity: 1;
		visibility: visible;
		background: transparent;
		border-bottom: 0;
	}

	.primary-nav__list {
		flex-direction: row;
		gap: 4px;
	}

	.primary-nav__list a {
		min-height: 0;
		padding: 8px 16px;
		font-size: 13px;
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		border-bottom: 2px solid transparent;
	}

	/* Active page gets a red underline. */
	.primary-nav__list .current-menu-item > a,
	.primary-nav__list .current_page_item > a {
		color: var(--color-primary);
		border-bottom-color: var(--color-primary);
	}

	/* Drawer CTAs are hidden on desktop (Zone 3 shows them instead). */
	.primary-nav__cta {
		display: none;
	}

	/* Show both desktop CTAs at full size. */
	.site-header__free-trial {
		display: inline-flex;
	}

	.site-header__actions .btn-nav--primary {
		padding: 12px 24px;
		font-size: 12px;
	}
}

/* ==========================================================================
   Section 21: Animations (Tier 1 — subtle, premium)
   ----------------------------------------------------------------------------
   Initial "hidden" classes are added by JavaScript (see main.js Section 11),
   so if JS is off, nothing is hidden — content always shows. All motion is
   disabled for visitors who prefer reduced motion.
   ========================================================================== */

/* Animation 1: section scroll reveal. */
.ebf-reveal {
	opacity: 0;
	transform: translateY( 24px );
	transition:
		opacity 600ms cubic-bezier( 0.16, 1, 0.3, 1 ),
		transform 600ms cubic-bezier( 0.16, 1, 0.3, 1 );
	will-change: opacity, transform;
}

.ebf-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

/* Animation 2: card stagger (transition-delay set inline by JS). */
.ebf-reveal-child {
	opacity: 0;
	transform: translateY( 16px );
	transition:
		opacity 500ms cubic-bezier( 0.16, 1, 0.3, 1 ),
		transform 500ms cubic-bezier( 0.16, 1, 0.3, 1 );
	will-change: opacity, transform;
}

.ebf-reveal-child.is-revealed-child {
	opacity: 1;
	transform: none;
}

/* Reduced motion: everything visible instantly, no transitions. */
@media (prefers-reduced-motion: reduce) {
	.ebf-reveal,
	.ebf-reveal-child {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ==========================================================================
   Section 22: Loyalty Teaser ($15/month)
   Light-gray section that breaks up the dark sections around it.
   ========================================================================== */
.loyalty-teaser-section {
	padding: 70px 24px; /* Mobile. */
	background-color: var(--color-bg-alt);
}

.loyalty-teaser__inner {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}

.loyalty-teaser__eyebrow {
	margin: 0 0 20px;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.loyalty-teaser__title {
	margin: 0 0 24px;
	font-family: var(--font-heading);
	font-size: 28px; /* Mobile. */
	font-weight: 800;
	line-height: 1.1;
	color: var(--color-charcoal);
}

.loyalty-teaser__body {
	max-width: 720px;
	margin: 0 auto 40px;
	font-family: var(--font-body);
	font-size: 18px; /* Mobile. */
	font-weight: 400;
	line-height: 1.6;
	color: var(--color-body);
}

/* Text link with arrow (not a button). */
.loyalty-teaser__cta {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-primary);
	border-bottom: 2px solid transparent;
}

.loyalty-teaser__arrow {
	display: inline-block;
	margin-left: 8px;
	transition: transform 0.2s ease;
}

.loyalty-teaser__cta:hover,
.loyalty-teaser__cta:focus {
	color: var(--color-primary);
	border-bottom-color: var(--color-primary);
}

.loyalty-teaser__cta:hover .loyalty-teaser__arrow,
.loyalty-teaser__cta:focus .loyalty-teaser__arrow {
	transform: translateX( 4px );
}

/* --- Tablet: 768px+ --- */
@media (min-width: 768px) {
	.loyalty-teaser__title { font-size: 40px; }
	.loyalty-teaser__body { font-size: 20px; }
}

/* --- Desktop: 1024px+ --- */
@media (min-width: 1024px) {
	.loyalty-teaser-section { padding: 100px 24px; }
	.loyalty-teaser__title { font-size: 56px; }
}

/* ==========================================================================
   Section 23: Brand Statement CTA (white outline button)
   Added in v2.6.0 — sits below the Brand Statement subhead.
   ========================================================================== */
.brand-statement__cta {
	margin-top: 48px;
	text-align: center;
}

.btn--outline-white {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 18px 40px;
	background: transparent;
	border: 2px solid var(--color-white);
	color: var(--color-white);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	border-radius: var(--radius);
	text-decoration: none;
	transition: all 250ms ease;
}

.btn--outline-white:hover,
.btn--outline-white:focus {
	background: var(--color-white);
	color: var(--color-black);
}

.btn--outline-white:hover .btn__arrow,
.btn--outline-white:focus .btn__arrow {
	transform: translateX( 4px );
}

.btn__arrow {
	display: inline-block;
	transition: transform 200ms ease;
}

/* ==========================================================================
   Section 24: Classes Page (/classes — page-classes.php)
   All selectors scoped under .classes-page so nothing affects the homepage.
   ========================================================================== */

.classes-page__container {
	max-width: 1200px;
	margin: 0 auto;
	padding-inline: 24px;
}

.classes-page__container--narrow {
	max-width: 820px;
}

/* Shared eyebrow + button + prose width for the page. */
.classes-page__eyebrow {
	margin: 0 0 16px;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.classes-page__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 18px 44px;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-white);
	background-color: var(--color-primary);
	border-radius: var(--radius);
	transition: all 0.25s ease;
}

.classes-page__btn:hover,
.classes-page__btn:focus {
	color: var(--color-white);
	background-color: var(--color-primary-dark);
	transform: translateY( -2px );
	box-shadow: 0 12px 32px rgba( 0, 0, 0, 0.25 );
}

.classes-page__btn-arrow {
	transition: transform 0.2s ease;
}

.classes-page__btn:hover .classes-page__btn-arrow,
.classes-page__btn:focus .classes-page__btn-arrow {
	transform: translateX( 4px );
}

/* --- Section 1: Hero strip --- */
.classes-page__hero {
	display: flex;
	align-items: center;
	min-height: 440px;
	padding: 80px 0;
	background-color: #0A0A0A;
	text-align: center;
}

.classes-page__hero .classes-page__container {
	width: 100%;
}

.classes-page__hero-title {
	margin: 0 0 20px;
	font-family: var(--font-heading);
	font-size: clamp( 34px, 6vw, 64px );
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--color-white);
}

.classes-page__hero-subhead {
	max-width: 700px;
	margin: 0 auto 36px;
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6;
	color: rgba( 255, 255, 255, 0.85 );
}

/* --- Section 2: category grid (6 cards) --- */
.classes-page__categories {
	padding: 80px 0; /* Mobile. */
	background-color: var(--color-bg-alt);
}

.classes-page__cat-head {
	margin-bottom: 40px;
}

.classes-page__cat-title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: clamp( 28px, 4vw, 44px );
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--color-charcoal);
}

.classes-page__category-grid {
	display: grid;
	grid-template-columns: 1fr; /* Mobile. */
	gap: 24px;
}

.classes-page__category-card {
	display: flex;
	flex-direction: column;
	overflow: hidden; /* Keeps the top accent bar inside the rounded corners. */
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 10px;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.classes-page__category-card:hover {
	transform: translateY( -4px );
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.08 );
}

.classes-page__card-bar {
	display: block;
	height: 4px;
	background-color: var(--color-primary);
}

.classes-page__card-body {
	display: flex;
	flex-direction: column;
	flex: 1; /* Let the availability/link area sit toward the bottom. */
	padding: 28px;
}

.classes-page__card-title {
	margin: 0 0 8px;
	font-family: var(--font-heading);
	font-size: 23px;
	font-weight: 800;
	line-height: 1.15;
	color: var(--color-charcoal);
}

.classes-page__card-tagline {
	margin: 0 0 16px;
	font-family: var(--font-body);
	font-size: 15px;
	font-style: italic;
	color: var(--color-muted);
}

.classes-page__card-classes {
	margin: 0 0 20px;
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.7;
	color: var(--color-body);
}

/* Class names (reused on the cards). Tier-1 hook kept for future linking. */
.classes-page__class-name {
	font-weight: 600;
}

.classes-page__class-name--tier1 {
	/* Styled identically for now; hook reserved for red link + hover later. */
}

.classes-page__class-sep {
	color: var(--color-muted);
}

.classes-page__card-availability {
	margin: auto 0 16px; /* Pushes toward the bottom of the card. */
	font-family: var(--font-body);
	font-size: 12px;
	font-style: italic;
	color: var(--color-muted);
}

/* Single centered button below the category grid (replaces per-card links). */
.classes-page__cat-cta {
	margin-top: 48px;
	text-align: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}
/* Secondary (outline) button — used for the "Full class directory" CTA. */
.classes-page__btn--outline {
	background-color: transparent;
	color: var(--color-charcoal);
	box-shadow: inset 0 0 0 1.5px var(--color-charcoal);
}
.classes-page__btn--outline:hover,
.classes-page__btn--outline:focus {
	background-color: var(--color-charcoal);
	color: var(--color-white);
}

/* Tablet: 2 columns. Desktop: 3 columns. */
@media (min-width: 768px) {
	.classes-page__category-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.classes-page__category-grid { grid-template-columns: repeat(3, 1fr); }
}

/* --- Class directory list (by category) — used on /classes (Full directory
   button target) and the Class Directory template (/classes/directory) --- */
.classes-page__directory { padding: 56px 0 96px; } /* v2.25.1 — more breathing room before the footer (was 8px) */
/* v2.25.1 — chunkier "VIEW FULL SCHEDULE" CTA, scoped to /classes/directory only (base .classes-page__btn is 18px 44px / 15px and stays put on /classes). */
.classes-page__directory .classes-page__btn { padding: 22px 56px; font-size: 16px; }
.classes-page__dir-cat { padding: 30px 0; border-top: 1px solid var(--color-border); }
.classes-page__dir-cat:first-of-type { border-top: 0; }
.classes-page__dir-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.classes-page__dir-num { font-family: var(--font-heading); font-weight: 800; font-size: 13px; letter-spacing: 0.1em; color: var(--color-primary); }
.classes-page__dir-title { font-family: var(--font-heading); font-size: 22px; font-weight: 800; letter-spacing: -0.01em; color: var(--color-charcoal); }
.classes-page__dir-rows { display: grid; grid-template-columns: 1fr; gap: 0 40px; }
.classes-page__dir-row { padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.classes-page__dir-name { display: block; font-family: var(--font-body); font-weight: 700; font-size: 15px; color: var(--color-charcoal); }
/* Marquee links: uniform with plain names at rest; quiet response on hover only. */
.classes-page__dir-link { color: var(--color-charcoal); text-decoration: none; transition: color 0.14s ease; }
.classes-page__dir-link:hover { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.classes-page__dir-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 2px; }
.classes-page__dir-arrow { display: inline-block; color: var(--color-primary); opacity: 0; transform: translateX(-3px); transition: opacity 0.14s ease, transform 0.14s ease; }
.classes-page__dir-link:hover .classes-page__dir-arrow { opacity: 1; transform: translateX(0); }
.classes-page__dir-desc { display: block; margin-top: 2px; font-family: var(--font-body); font-size: 13.5px; line-height: 1.5; color: var(--color-muted); }

@media (min-width: 768px) {
	.classes-page__dir-rows { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.classes-page__dir-link,
	.classes-page__dir-arrow { transition: none; }
}

/* --- Section 7b: Value-props band (dark, separates cards from FAQ) --- */
.classes-page__valueprops {
	background-color: #0A0A0A;
	color: #fff;
	padding: 56px 0; /* Mobile. */
}
.classes-page__vp-eyebrow {
	margin: 0 0 26px;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #9aa0a8;
	text-align: center;
}
.classes-page__vp-grid {
	display: grid;
	grid-template-columns: 1fr; /* Mobile: stacked. */
	gap: 28px;
}
.classes-page__vp { text-align: center; }
.classes-page__vp-label {
	margin: 0 0 6px;
	font-family: var(--font-heading);
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: #fff;
}
.classes-page__vp-label--accent { color: var(--color-primary); }
.classes-page__vp-detail {
	margin: 0;
	font-family: var(--font-body);
	font-size: 14.5px;
	line-height: 1.5;
	color: #b9bdc2;
}

@media (min-width: 720px) {
	.classes-page__valueprops { padding: 72px 0; }
	.classes-page__vp-grid { grid-template-columns: repeat(4, 1fr); gap: 0; }
	/* Thin vertical dividers between the four props (stat-band style). */
	.classes-page__vp { padding: 4px 28px; position: relative; }
	.classes-page__vp + .classes-page__vp::before {
		content: "";
		position: absolute;
		left: 0;
		top: 12%;
		bottom: 12%;
		width: 1px;
		background: rgba(255, 255, 255, 0.14);
	}
}

/* --- Section 8: FAQ accordion (CSS-only, no JS) --- */
.classes-page__faq {
	padding: 80px 0; /* Mobile. */
	background-color: var(--color-bg-alt);
}
/* Two-column: sticky rail (left) + card accordion (right). */
.classes-page__faq-grid { display: grid; grid-template-columns: 2fr 3fr; gap: 56px; align-items: start; }
.classes-page__faq-rail { position: sticky; top: 24px; }
.classes-page__faq-title {
	margin: 12px 0 0;
	font-family: var(--font-heading);
	font-size: clamp( 28px, 4vw, 44px );
	font-weight: 800;
	line-height: 1.1;
	color: var(--color-charcoal);
}

/* Cards */
.classes-page__faq-list { display: flex; flex-direction: column; gap: 12px; }
.classes-page__faq-item {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 14px;
	transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease;
}
.classes-page__faq-item:hover { transform: translateY(-2px); border-color: #dcdce0; box-shadow: 0 6px 20px rgba(16, 16, 18, 0.06); }
/* Open card = brand red with white text. */
.classes-page__faq-item.is-open { background: var(--color-primary); border-color: var(--color-primary); }
.classes-page__faq-item.is-open:hover { border-color: var(--color-primary); box-shadow: 0 8px 24px rgba(196, 18, 48, 0.22); }
.classes-page__faq-item-h { margin: 0; }
.classes-page__faq-q {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	text-align: left;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 20px 22px;
	font-family: var(--font-heading);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-charcoal);
	transition: color 0.2s ease;
}
.classes-page__faq-item.is-open .classes-page__faq-q { color: #fff; }
.classes-page__faq-q:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; border-radius: 14px; }
.classes-page__faq-item.is-open .classes-page__faq-q:focus-visible { outline-color: #fff; }
/* + icon → rotates 45° to × on open (white when open). */
.classes-page__faq-icon { position: relative; flex: 0 0 18px; width: 18px; height: 18px; transition: transform 0.25s ease; }
.classes-page__faq-icon::before,
.classes-page__faq-icon::after { content: ""; position: absolute; background-color: var(--color-primary); border-radius: 2px; transition: background-color 0.2s ease; }
.classes-page__faq-icon::before { left: 50%; top: 1px; width: 2px; height: 16px; transform: translateX(-50%); }
.classes-page__faq-icon::after { top: 50%; left: 1px; height: 2px; width: 16px; transform: translateY(-50%); }
.classes-page__faq-item.is-open .classes-page__faq-icon { transform: rotate(45deg); }
.classes-page__faq-item.is-open .classes-page__faq-icon::before,
.classes-page__faq-item.is-open .classes-page__faq-icon::after { background-color: #fff; }
/* Answer: max-height animated; JS measures real height. Open fallback (no JS)
   uses max-height:none so a long answer is never clipped. */
.classes-page__faq-a { overflow: hidden; max-height: 0; transition: max-height 0.3s ease; }
.classes-page__faq-item.is-open .classes-page__faq-a { max-height: none; }
.classes-page__faq-a-inner { padding: 0 22px 20px; font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--color-body); transition: color 0.2s ease; }
.classes-page__faq-item.is-open .classes-page__faq-a-inner { color: rgba(255, 255, 255, 0.92); }

@media (prefers-reduced-motion: reduce) {
	.classes-page__faq-item,
	.classes-page__faq-icon,
	.classes-page__faq-a { transition: none; }
	.classes-page__faq-item:hover { transform: none; }
}
@media (max-width: 900px) {
	.classes-page__faq-grid { grid-template-columns: 1fr; gap: 28px; }
	.classes-page__faq-rail { position: static; top: auto; }
}

/* --- Section 9: Final CTA --- */
.classes-page__cta {
	padding: 80px 0; /* Mobile. */
	background-color: #0A0A0A;
	text-align: center;
}

.classes-page__cta-title {
	margin: 0 0 20px;
	font-family: var(--font-heading);
	font-size: clamp( 32px, 5vw, 52px );
	font-weight: 800;
	line-height: 1.1;
	color: var(--color-white);
}

.classes-page__cta-subhead {
	max-width: 600px;
	margin: 0 auto 36px;
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
	color: rgba( 255, 255, 255, 0.85 );
}

.classes-page__cta-note {
	margin: 24px 0 0;
	font-family: var(--font-body);
	font-size: 14px;
}

.classes-page__cta-note a {
	color: rgba( 255, 255, 255, 0.75 );
	transition: color 0.2s ease;
}

.classes-page__cta-note a:hover,
.classes-page__cta-note a:focus {
	color: var(--color-white);
}

/* --- Tablet / desktop spacing --- */
@media (min-width: 768px) {
	.classes-page__categories,
	.classes-page__faq,
	.classes-page__cta { padding: 100px 0; }
}

@media (min-width: 1024px) {
	.classes-page__categories,
	.classes-page__faq,
	.classes-page__cta { padding: 120px 0; }
}


/* ==========================================================================
   Section 25: Schedule Page (/schedule — page-schedule.php)
   Hero + CTA (dark) reuse the shared helpers below. The scheduler frame
   (.schedule-page__scheduler) is ported from the approved SPENGA-style mockup.
   All selectors scoped under .schedule-page.
   ========================================================================== */

.schedule-page__container {
	max-width: 1200px;
	margin: 0 auto;
	padding-inline: 24px;
}

.schedule-page__eyebrow {
	margin: 0 0 16px;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.schedule-page__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 18px 44px;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-white);
	background-color: var(--color-primary);
	border: 0;
	border-radius: var(--radius);
	cursor: pointer;
	transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.schedule-page__btn:hover,
.schedule-page__btn:focus {
	color: var(--color-white);
	background-color: var(--color-primary-dark);
	transform: scale( 1.02 );
	box-shadow: 0 10px 28px rgba( 0, 0, 0, 0.25 );
}

/* --- Hero (unchanged) --- */
.schedule-page__hero {
	display: flex;
	align-items: center;
	min-height: 380px;
	padding: 70px 0;
	background-color: #0A0A0A;
	text-align: center;
}

.schedule-page__hero .schedule-page__container { width: 100%; }

.schedule-page__hero-title {
	margin: 0 0 20px;
	font-family: var(--font-heading);
	font-size: clamp( 30px, 5vw, 56px );
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--color-white);
}

.schedule-page__rotator {
	display: inline-block;
	min-width: 3.5ch;
	color: var(--color-primary);
	transition: opacity 0.25s ease;
}

.schedule-page__hero-subhead {
	max-width: 640px;
	margin: 0 auto;
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.6;
	color: rgba( 255, 255, 255, 0.85 );
}

/* ============ SCHEDULER FRAME (ported from approved mockup) ============ */
.schedule-page__scheduler {
	--sched-ink: #101012;
	--sched-muted: #6b7280;
	--sched-muted2: #9aa0a8;
	--sched-line: #ededf0;
	--sched-line-dark: #2a2a2e;
	--c-strength: #C41230;
	--c-mind: #3f7d6e;
	--c-cardio: #d8742a;
	--c-cycling: #b8852a;
	--c-aqua: #2f7fb5;
	--c-specialty: #6b5b95;
	max-width: 1120px;
	margin: 0 auto;
	padding: 40px 20px;
	font-family: var(--font-body);
	color: var(--sched-ink);
}

/* Scoped reset: stop the global red <button>/<select> style (Section 5) from
   bleeding into the scheduler controls. Scoped to .schedule-page__scheduler so
   site-wide buttons (JOIN NOW, nav, CTAs) are untouched. The specific
   .sched-* rules below then layer the real styling on top. */
.schedule-page__scheduler button,
.schedule-page__scheduler select {
	-webkit-appearance: none;
	appearance: none;
	font-family: var(--font-body);
}

.schedule-page__scheduler button {
	width: auto;
	margin: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: inherit;
	text-align: left;
}

.sched-frame {
	display: grid;
	grid-template-columns: 300px 1fr;
	background: #fff;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 1px 0 rgba( 0, 0, 0, 0.04 ), 0 24px 60px -28px rgba( 0, 0, 0, 0.28 );
}

/* Left: location column */
.sched-locpane {
	background: var(--sched-ink);
	color: #fff;
	padding: 30px 24px;
}

.sched-locpane .sched-eyebrow {
	margin: 0 0 6px;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-primary);
	font-weight: 700;
}

.sched-locpane h2 {
	margin: 0 0 22px;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 23px;
	line-height: 1.1;
	letter-spacing: -0.01em;
	/* Explicit light colour overrides the global h2 charcoal rule so the
	   "Choose a location" heading is readable on the dark panel (B1). */
	color: #fff;
}

.sched-loclist { display: flex; flex-direction: column; gap: 2px; }

.sched-locbtn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	text-align: left;
	cursor: pointer;
	background: transparent;
	border: 0;
	color: #cfcfd4;
	font-family: var(--font-body);
	font-size: 14.5px;
	font-weight: 500;
	padding: 11px 12px;
	border-radius: 10px;
	transition: background 0.14s ease, color 0.14s ease;
}

.sched-locbtn .sub { font-size: 11.5px; color: var(--sched-muted2); font-weight: 400; }
.sched-locbtn:hover { background: var(--sched-line-dark); color: #fff; }
.sched-locbtn.is-active { background: var(--color-primary); color: #fff; }
.sched-locbtn.is-active .sub { color: rgba( 255, 255, 255, 0.8 ); }
.sched-locbtn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.sched-locbtn .count {
	font-size: 11px;
	font-weight: 600;
	color: var(--sched-muted2);
	background: rgba( 255, 255, 255, 0.07 );
	border-radius: 20px;
	padding: 2px 8px;
	min-width: 24px;
	text-align: center;
}

.sched-locbtn.is-active .count { background: rgba( 0, 0, 0, 0.18 ); color: #fff; }

.sched-locpane .note {
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid var(--sched-line-dark);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--sched-muted2);
}
.sched-locpane .note .note-link {
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.sched-locpane .note .note-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.sched-locpane .note .note-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 3px; }
/* v2.21.81 — childcare callout: bold, prominent box in the dark location pane. Explicit color = global a{} opt-out. */
.sched-locpane .note--childcare {
	border-top: 0;
	padding: 14px 16px;
	border-left: 3px solid var(--color-primary);
	background: rgba(255, 255, 255, 0.06);
	border-radius: 10px;
	font-size: 14.5px;
	font-weight: 700;
	color: #fff;
}

/* Mobile location/type filters (hidden on desktop) */
.sched-locmobile { display: none; }
.sched-locmobile .mlabel {
	display: block;
	margin-bottom: 7px;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sched-muted);
	font-weight: 700;
}
.sched-locmobile .typewrap { display: block; }
.sched-locmobile select { width: 100%; font-size: 15px; padding: 13px 38px 13px 14px; }

/* Right: schedule panel */
.sched-pane { padding: 30px 30px 36px; min-width: 0; }

.sched-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.sched-head .typewrap { margin-top: -5px; }
.sched-head h1 {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 25px;
	letter-spacing: -0.015em;
}

.typewrap { position: relative; }
.typeselect {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	font-family: var(--font-body);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--sched-ink);
	background: #fff;
	border: 1.5px solid var(--sched-line);
	border-radius: 10px;
	padding: 9px 34px 9px 14px;
	transition: border-color 0.14s;
}
.typeselect:hover { border-color: #d4d4d8; }
.typeselect:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba( 196, 18, 48, 0.15 ); }
.typewrap::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 50%;
	width: 7px;
	height: 7px;
	border-right: 2px solid var(--sched-muted);
	border-bottom: 2px solid var(--sched-muted);
	transform: translateY( -65% ) rotate( 45deg );
	pointer-events: none;
}

/* Week strip */
.sched-monthrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 24px 0 8px;
}
.sched-monthrow .month { font-family: var(--font-heading); font-weight: 700; font-size: 16px; }
.sched-weeknav { display: flex; gap: 6px; }
.sched-weeknav button {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	border: 1.5px solid var(--sched-line);
	background: #fff;
	cursor: pointer;
	color: var(--sched-ink);
	font-size: 15px;
	line-height: 1;
	display: grid;
	place-items: center;
	transition: border-color 0.14s, background 0.14s;
}
.sched-weeknav button:hover { border-color: #d4d4d8; background: #fafafa; }
.sched-weeknav button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.sched-weekstrip { display: grid; grid-template-columns: repeat( 7, 1fr ); gap: 6px; }
.sched-day {
	display: flex;
	flex-direction: column;
	align-items: center; /* Centers the weekday letter + circle within the cell. */
	border: 0;
	background: transparent;
	cursor: pointer;
	border-radius: 12px;
	padding: 9px 0 11px;
	text-align: center;
	transition: background 0.14s;
}
.sched-day:hover { background: #f1f1f3; }
.sched-day:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.sched-day .dow { font-size: 11px; font-weight: 600; color: var(--sched-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.sched-day .num {
	display: flex;
	align-items: center;     /* Dead-center the digit vertically (no line-height hack). */
	justify-content: center; /* ...and horizontally — 1 or 2 digits alike. */
	box-sizing: border-box;  /* Keep circle size identical across default/selected/today. */
	margin-top: 6px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	transition: background 0.14s, color 0.14s, box-shadow 0.14s;
}
.sched-day.is-active .num { background: var(--color-primary); color: #fff; }
.sched-day.is-active .dow { color: var(--sched-ink); }
.sched-day.is-today:not(.is-active) .num { box-shadow: inset 0 0 0 1.5px var(--color-primary); color: var(--color-primary); }

/* Day heading + count + print */
.sched-dayhead {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 24px 0 4px;
	flex-wrap: wrap;
	padding-top: 20px;
	border-top: 1px solid var(--sched-line);
}
.sched-dayhead h3 { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 18px; }
.sched-dayhead .count { font-size: 13.5px; color: var(--sched-muted); }
.sched-print {
	margin-left: auto;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-family: var(--font-body);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--sched-muted);
}
.sched-print:hover { color: var(--sched-ink); text-decoration: underline; }
.sched-dropnote { margin: 2px 0 18px; font-size: 12.5px; color: var(--sched-muted); }
.sched-dropnote b { color: var(--sched-ink); font-weight: 600; }

/* Class rows */
.sched-list { display: flex; flex-direction: column; }
.sched-cls {
	display: grid;
	grid-template-columns: 84px 1fr auto;
	gap: 18px;
	align-items: start;
	padding: 17px 0 17px 16px;
	border-bottom: 1px solid var(--sched-line);
	position: relative;
}
.sched-cls::before {
	content: "";
	position: absolute;
	left: 0;
	top: 18px;
	bottom: 18px;
	width: 3px;
	border-radius: 3px;
	background: var( --accent, #ccc );
}
.sched-cls:last-child { border-bottom: 0; }
.sched-cls[data-category="strength"]     { --accent: var(--c-strength); }
.sched-cls[data-category="mind-body"]    { --accent: var(--c-mind); }
.sched-cls[data-category="cardio-dance"] { --accent: var(--c-cardio); }
.sched-cls[data-category="cycling"]      { --accent: var(--c-cycling); }
.sched-cls[data-category="aqua"]         { --accent: var(--c-aqua); }
.sched-cls[data-category="specialty"]    { --accent: var(--c-specialty); }

.sched-cls .time .t { font-family: var(--font-body); font-weight: 700; font-size: 15.5px; }
.sched-cls .time .d { font-size: 12.5px; color: var(--sched-muted); margin-top: 2px; }
.sched-cls .main .name { font-family: var(--font-heading); font-weight: 700; font-size: 16.5px; letter-spacing: -0.01em; }
/* Class-name link (B2) — subtle; only present when the class page is live. */
.sched-cls .main .name .sched-cls-link { color: inherit; text-decoration: none; }
.sched-cls .main .name .sched-cls-link:hover { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--accent); }
.sched-cls .main .name .sched-cls-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.sched-cls .main .inst { font-size: 13.5px; color: var(--sched-muted); margin-top: 3px; }
.sched-cls .meta { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.sched-cls .meta .loc { font-size: 13px; color: var(--sched-ink); font-weight: 500; }
.sched-cls .meta .tag {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 20px;
	color: var( --accent, #666 );
	background: color-mix( in srgb, var( --accent, #666 ) 11%, #fff );
}

/* Hide the location label when a specific gym is selected. */
.sched-list.is-hideloc .sched-cls .meta .loc { display: none; }

.sched-empty { padding: 48px 0; text-align: center; color: var(--sched-muted); }
.sched-empty .big { margin-bottom: 6px; font-family: var(--font-heading); font-weight: 700; font-size: 16px; color: var(--sched-ink); }
.sched-empty button {
	margin-top: 14px;
	background: var(--color-primary);
	color: #fff;
	border: 0;
	border-radius: 10px;
	padding: 10px 18px;
	font-weight: 600;
	font-family: var(--font-body);
	cursor: pointer;
	font-size: 13.5px;
}

/* --- Footer CTA (unchanged) --- */
.schedule-page__cta {
	padding: 80px 0;
	background-color: #0A0A0A;
	text-align: center;
}
.schedule-page__cta-title {
	margin: 0 0 20px;
	font-family: var(--font-heading);
	font-size: clamp( 30px, 5vw, 52px );
	font-weight: 800;
	line-height: 1.1;
	color: var(--color-white);
}
.schedule-page__cta-subhead {
	max-width: 600px;
	margin: 0 auto 36px;
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.5;
	color: rgba( 255, 255, 255, 0.85 );
}

@media (min-width: 768px) {
	.schedule-page__cta { padding: 100px 0; }
}
@media (min-width: 1024px) {
	.schedule-page__cta { padding: 120px 0; }
}

/* --- Scheduler responsive (≤820px) --- */
@media (max-width: 820px) {
	.schedule-page__scheduler { padding: 0; }
	.sched-frame { grid-template-columns: 1fr; border-radius: 0; box-shadow: none; }
	.sched-locpane { display: none; }
	.sched-locmobile { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 18px 18px 0; }
	.sched-head .typewrap { display: none; }
	.sched-pane { padding: 18px 18px 30px; }
	.sched-head h1 { font-size: 21px; }
	.sched-cls { grid-template-columns: 72px 1fr; gap: 12px; }
	.sched-cls .meta { grid-column: 2; text-align: left; align-items: flex-start; margin-top: 9px; flex-direction: row; gap: 10px; }
	.sched-day .num { width: 34px; height: 34px; font-size: 15px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.schedule-page__rotator,
	.sched-locbtn,
	.sched-day,
	.sched-day .num,
	.sched-weeknav button,
	.typeselect { transition: none; }
}

/* Print: just the schedule list */
@media print {
	.schedule-page__hero,
	.schedule-page__cta,
	.sched-locpane,
	.sched-locmobile,
	.sched-monthrow,
	.sched-weekstrip,
	.sched-print { display: none; }
	.sched-frame { grid-template-columns: 1fr; box-shadow: none; }
}

/* ==========================================================================
   Section 26: Class Detail page (/classes/[slug] — template-class-detail.php)
   Redesign ported from everybody-fitness-class-page-REDESIGN.html. All
   selectors scoped under .class-detail. Brand red accent throughout, supplied
   via the inline --cd-accent / --cd-accent-tint on the wrapper. The page
   alternates full-bleed dark / red / light bands for visual rhythm.
   ========================================================================== */
.class-detail {
	--cd-accent: #C41230;
	--cd-accent-tint: #fbe9ec;
	--cd-red-deep: #9F0E26;
	--cd-ink: #101012;
	--cd-ink2: #17181b;
	--cd-muted: #6b7280;
	--cd-line: #e9e9ec;
	--cd-bg: #f6f6f7;
	color: var(--cd-ink);
	font-family: var(--font-body);
	line-height: 1.55;
}
.class-detail .wrap { max-width: 1140px; margin: 0 auto; padding: 0 28px; }
.class-detail .cd-wrap--narrow { max-width: 820px; }
.class-detail h1,
.class-detail h2,
.class-detail h3 {
	font-family: var(--font-heading);
	letter-spacing: -0.02em;
	line-height: 1.05;
	margin: 0;
	color: var(--cd-ink);
}
.class-detail .cd-eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--cd-accent);
}
.class-detail .cd-band-h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; margin: 12px 0 0; }

/* --- Buttons --- */
.class-detail .cd-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: var(--cd-accent);
	color: #fff;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 15px;
	padding: 15px 28px;
	border-radius: 12px;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}
.class-detail .cd-btn:hover { background: var(--color-primary-dark); transform: translateY(-1px); }
.class-detail .cd-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.class-detail .cd-btn .cd-ar { transition: transform 0.15s ease; }
.class-detail .cd-btn:hover .cd-ar { transform: translateX(3px); }
.class-detail .cd-btn--ghost { background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.45); color: #fff; }
.class-detail .cd-btn--ghost:hover { background: rgba(255, 255, 255, 0.1); }
.class-detail .cd-btn--onred { background: #fff; color: var(--cd-accent); }
.class-detail .cd-btn--onred:hover { background: var(--cd-ink); color: #fff; }

/* --- 1. HERO — dark, full-width typographic --- */
.class-detail .cd-hero { position: relative; overflow: hidden; background: var(--cd-ink); color: #fff; }
/* Full-bleed photo layer (with baked-in dark, bottom-weighted overlay for AA
   text contrast). Sits below the red glow + content; dark bg shows if it fails. */
.class-detail .cd-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: var(--cd-ink);
	background-size: cover;
	background-position: center 35%;
	background-repeat: no-repeat;
	background-attachment: scroll;
}
.class-detail .cd-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: radial-gradient(110% 90% at 88% -10%, rgba(196, 18, 48, 0.34), transparent 55%);
}
.class-detail .cd-hero-inner { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; padding: 104px 0 96px; text-align: center; }
.class-detail .cd-hero .cd-eyebrow { color: #ff5e78; margin-bottom: 20px; display: block; }
.class-detail .cd-hero__title { font-size: clamp(56px, 9vw, 120px); font-weight: 900; line-height: 0.92; color: #fff; }
.class-detail .cd-tagline { font-style: italic; font-size: 23px; color: #cfd2d6; margin: 22px 0 16px; font-family: var(--font-body); }
.class-detail .cd-stat { font-size: 15px; color: #9aa0a8; margin: 0 0 32px; }
.class-detail .cd-stat b { color: #fff; font-weight: 600; }
.class-detail .cd-cta-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* --- 2. STAT BAND — full-bleed red --- */
.class-detail .cd-statband { background: var(--cd-accent); color: #fff; }
.class-detail .cd-statband__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 36px 28px; text-align: center; }
.class-detail .cd-statband__n { font-family: var(--font-heading); font-weight: 800; font-size: clamp(30px, 4vw, 46px); line-height: 1; }
.class-detail .cd-statband__l { font-size: 13px; letter-spacing: 0.04em; color: #ffd5dc; margin-top: 8px; }
.class-detail .cd-statband__item--sep { position: relative; }
.class-detail .cd-statband__item--sep::before { content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; width: 1px; background: rgba(255, 255, 255, 0.25); }

/* --- 3. WHAT TO EXPECT — light, 2-col split (photo left, copy right) --- */
.class-detail .cd-split { padding: 84px 0; }
.class-detail .cd-split__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.class-detail .cd-split__copy h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; margin: 14px 0 18px; }
.class-detail .cd-split__copy p { font-size: 17px; color: #34373c; margin: 0 0 15px; max-width: 52ch; }

/* --- Reusable "photo coming soon" placeholder --- */
.class-detail .cd-photo-todo {
	border-radius: 18px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-align: center;
	padding: 20px;
}
.class-detail .cd-photo-todo--light {
	aspect-ratio: 5 / 4;
	border: 2px dashed #d9d9de;
	background: repeating-linear-gradient(135deg, #f3f3f5 0 14px, #ececef 14px 28px);
	color: #9aa0a8;
}
/* Real "What to expect" photo — fills the same slot as the placeholder. */
.class-detail .cd-split__img {
	width: 100%;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	border-radius: 18px;
	display: block;
}
.class-detail .cd-photo-todo__ico {
	width: 46px; height: 46px; border-radius: 12px;
	display: grid; place-items: center; font-size: 22px;
	background: #e7e7ea; color: #9aa0a8;
}
.class-detail .cd-photo-todo__lbl { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.class-detail .cd-photo-todo__sub { font-size: 12px; color: #8c9197; }

/* --- 4. BENEFITS — dark full-bleed band, numbered cards --- */
.class-detail .cd-benefits-band { background: var(--cd-ink); color: #fff; padding: 84px 0; }
.class-detail .cd-benefits-band .cd-eyebrow { color: #ff5e78; }
.class-detail .cd-benefits-band .cd-band-h2 { color: #fff; margin-bottom: 40px; }
.class-detail .cd-bgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.class-detail .cd-bcard {
	background: var(--cd-ink2);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 16px;
	padding: 26px;
	transition: transform 0.15s ease, border-color 0.15s ease;
}
.class-detail .cd-bcard:hover { transform: translateY(-3px); border-color: rgba(196, 18, 48, 0.5); }
.class-detail .cd-bcard__num { font-family: var(--font-heading); font-weight: 800; color: var(--cd-accent); font-size: 15px; letter-spacing: 0.1em; }
.class-detail .cd-bcard p { margin: 14px 0 0; font-size: 16px; color: #e7e8ea; line-height: 1.5; }

/* --- 5. PACK LIGHT + AVAILABLE AT — light band, 2-col duo --- */
.class-detail .cd-duo { background: var(--cd-bg); padding: 80px 0; }
.class-detail .cd-duo__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.class-detail .cd-duo__h2 { font-size: 26px; font-weight: 800; margin: 12px 0 20px; }
.class-detail .cd-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.class-detail .cd-chip {
	background: #fff;
	border: 1px solid var(--cd-line);
	border-radius: 999px;
	padding: 10px 17px;
	font-size: 14.5px;
	font-weight: 500;
}
/* Location chips: light-red tint + deep-red bold text + faint red border so it
   reads intentional/branded rather than flat pink. */
.class-detail .cd-chip--loc {
	background: var(--cd-accent-tint);
	border-color: rgba(196, 18, 48, 0.16);
	color: var(--cd-red-deep);
	font-weight: 700;
}

/* --- 6. SCHEDULE — white band; week strip + accordion --- */
.class-detail .cd-sched { padding: 84px 0; scroll-margin-top: 24px; }
.class-detail .cd-sched .cd-band-h2 { margin-bottom: 22px; }

/* --- 7. FAQ — light accordion band --- */
.class-detail .cd-faq-band { background: var(--cd-bg); padding: 80px 0; }
/* Two-column: sticky rail (left) + card accordion (right). */
.class-detail .cd-faq-grid { display: grid; grid-template-columns: 2fr 3fr; gap: 56px; align-items: start; }
.class-detail .cd-faq-rail { position: sticky; top: 24px; }
.class-detail .cd-faq-rail .cd-band-h2 { margin: 12px 0 0; }

/* Cards */
.class-detail .cd-faq-list { display: flex; flex-direction: column; gap: 12px; }
.class-detail .cd-faq-item {
	background: #fff;
	border: 1px solid var(--cd-line);
	border-radius: 14px;
	transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease;
}
.class-detail .cd-faq-item:hover { transform: translateY(-2px); border-color: #dcdce0; box-shadow: 0 6px 20px rgba(16, 16, 18, 0.06); }
/* Open card = brand red with white text (closed cards stay white). */
.class-detail .cd-faq-item.is-open { background: var(--cd-accent); border-color: var(--cd-accent); }
.class-detail .cd-faq-item.is-open:hover { border-color: var(--cd-accent); box-shadow: 0 8px 24px rgba(196, 18, 48, 0.22); }
.class-detail .cd-faq-item.is-open .cd-faq-q { color: #fff; }
.class-detail .cd-faq-item.is-open .cd-faq-a__inner { color: rgba(255, 255, 255, 0.92); }
.class-detail .cd-faq-item.is-open .cd-faq-icon::before,
.class-detail .cd-faq-item.is-open .cd-faq-icon::after { background: #fff; }
.class-detail .cd-faq-item.is-open .cd-faq-q:focus-visible { outline-color: #fff; }
.class-detail .cd-faq-item__h { margin: 0; }
.class-detail .cd-faq-q {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	text-align: left;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 20px 22px;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 17px;
	color: var(--cd-ink);
	line-height: 1.3;
	transition: color 0.2s ease;
}
.class-detail .cd-faq-q:focus-visible { outline: 2px solid var(--cd-accent); outline-offset: -2px; border-radius: 14px; }
/* + icon → rotates 45° to × on open (built from two bars). */
.class-detail .cd-faq-icon { position: relative; flex: 0 0 18px; width: 18px; height: 18px; transition: transform 0.25s ease; }
.class-detail .cd-faq-icon::before,
.class-detail .cd-faq-icon::after { content: ""; position: absolute; background: var(--cd-accent); border-radius: 2px; transition: background 0.2s ease; }
.class-detail .cd-faq-icon::before { left: 50%; top: 1px; width: 2px; height: 16px; transform: translateX(-50%); }
.class-detail .cd-faq-icon::after { top: 50%; left: 1px; height: 2px; width: 16px; transform: translateY(-50%); }
.class-detail .cd-faq-item.is-open .cd-faq-icon { transform: rotate(45deg); }
/* Answer: max-height animated; JS measures real height. Open fallback (no JS)
   uses max-height:none so a long answer is never clipped. */
.class-detail .cd-faq-a { overflow: hidden; max-height: 0; transition: max-height 0.3s ease; }
.class-detail .cd-faq-item.is-open .cd-faq-a { max-height: none; }
.class-detail .cd-faq-a__inner { padding: 0 22px 20px; color: #34373c; font-size: 16px; line-height: 1.6; max-width: 60ch; transition: color 0.2s ease; }

@media (prefers-reduced-motion: reduce) {
	.class-detail .cd-faq-item,
	.class-detail .cd-faq-icon,
	.class-detail .cd-faq-a { transition: none; }
	.class-detail .cd-faq-item:hover { transform: none; }
}

@media (max-width: 900px) {
	.class-detail .cd-faq-grid { grid-template-columns: 1fr; gap: 28px; }
	.class-detail .cd-faq-rail { position: static; top: auto; }
}

/* --- 8. RELATED — dark full-bleed band, image / "photo soon" cards --- */
.class-detail .cd-related-band { background: var(--cd-ink); color: #fff; padding: 84px 0; }
.class-detail .cd-related-band .cd-eyebrow { color: #ff5e78; }
.class-detail .cd-related-band .cd-band-h2 { color: #fff; margin-bottom: 36px; }
.class-detail .cd-rgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.class-detail .cd-rcard {
	aspect-ratio: 4 / 3;
	border-radius: 16px;
	position: relative;
	overflow: hidden;
	text-decoration: none;
	color: #fff;
	background: linear-gradient(135deg, #26282c, #16181a);
	border: 1px solid rgba(255, 255, 255, 0.08);
	display: block;
}
.class-detail .cd-rcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.72)); }
.class-detail .cd-rcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.class-detail .cd-rcard__todo {
	position: absolute; top: 12px; left: 12px; z-index: 2;
	font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
	color: #8a9097; border: 1px dashed rgba(255, 255, 255, 0.25); border-radius: 6px; padding: 3px 7px;
}
.class-detail .cd-rcard__label {
	position: absolute; left: 18px; bottom: 16px; z-index: 2;
	font-family: var(--font-heading); font-weight: 800; font-size: 20px;
}
.class-detail a.cd-rcard { transition: transform 0.15s ease; }
.class-detail a.cd-rcard:hover { transform: translateY(-3px); }
.class-detail a.cd-rcard:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* --- 9. FINAL CTA — full-bleed red --- */
.class-detail .cd-final { background: var(--cd-accent); color: #fff; text-align: center; padding: 88px 0; }
.class-detail .cd-final h2 { color: #fff; font-size: clamp(30px, 4.5vw, 52px); font-weight: 900; margin-bottom: 16px; }
.class-detail .cd-final p { max-width: 54ch; margin: 0 auto 28px; font-size: 18px; color: #ffe2e7; }

/* --- Responsive --- */
@media (max-width: 820px) {
	.class-detail .cd-bgrid,
	.class-detail .cd-rgrid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
	.class-detail .cd-split__grid,
	.class-detail .cd-duo__grid { grid-template-columns: 1fr; gap: 32px; }
	.class-detail .cd-hero-inner { padding: 72px 0 64px; }
	.class-detail .cd-split,
	.class-detail .cd-benefits-band,
	.class-detail .cd-duo,
	.class-detail .cd-faq-band,
	.class-detail .cd-related-band { padding-top: 60px; padding-bottom: 60px; }
}
@media (max-width: 680px) {
	.class-detail .cd-statband__grid { grid-template-columns: 1fr; gap: 20px; }
	.class-detail .cd-statband__item--sep::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.class-detail .cd-btn,
	.class-detail .cd-btn .cd-ar,
	.class-detail .cd-bcard,
	.class-detail a.cd-rcard { transition: none; }
	.class-detail .cd-btn:hover,
	.class-detail .cd-bcard:hover,
	.class-detail a.cd-rcard:hover { transform: none; }
}

/* ==========================================================================
   CLASSES mega-menu (header). Panel is moved by JS into the "Classes" nav
   <li> (inside .primary-nav__list), so anchor rules are scoped under
   .primary-nav__list to override the base nav-link styles. Mobile-first: the
   panel sits in the dark drawer; >=1024px it becomes a floating white dropdown.
   ========================================================================== */
.ebf-mega { display: none; }
.primary-nav__list .has-mega.is-mega-open > .ebf-mega { display: block; }

/* --- Mobile (drawer) --- */
.ebf-mega__h { display: none; }
.ebf-mega__links { list-style: none; margin: 0; padding: 0; }
/* v2.22.1 — Mobile amenities order: Tanning → 2nd (under Childcare). Mobile-only; desktop grid (min-width:1024px) keeps source/Batch-12 order. */
@media (max-width: 1023px) {
	.ebf-mega__links { display: flex; flex-direction: column; }
	.ebf-mega__links > li { order: 2; }
	.ebf-mega__links > li:first-child { order: 0; }      /* Childcare stays 1st */
	.ebf-mega__links > li.ebf-am--tanning { order: 1; }  /* Tanning → 2nd */
}
.primary-nav__list .ebf-mega__links a {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-height: 0;
	padding: 12px 24px 12px 40px;
	font-size: 14.5px;
	font-weight: 600;
	color: #fff;
	text-transform: none;
	letter-spacing: 0;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.08 );
}
.primary-nav__list .ebf-mega__links a:hover,
.primary-nav__list .ebf-mega__links a:focus { color: var(--color-primary); }
.ebf-mega__cat { font-size: 11px; font-weight: 500; color: rgba( 255, 255, 255, 0.5 ); }
.primary-nav__list .ebf-mega__viewall {
	display: block;
	min-height: 0;
	padding: 13px 24px 13px 40px;
	color: var(--color-primary);
	font-weight: 700;
	font-size: 14px;
	text-transform: none;
	letter-spacing: 0;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.08 );
}
.ebf-mega__label { display: none; }
.ebf-mega__cards { display: none; } /* photo cards omitted on mobile */
.primary-nav__list .ebf-mega__sched {
	display: block;
	min-height: 0;
	padding: 13px 24px 13px 40px;
	text-transform: none;
	letter-spacing: 0;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.08 );
}
.ebf-mega__sched-t { display: block; color: #fff; font-weight: 700; font-size: 14px; }
.ebf-mega__sched-s { display: block; color: rgba( 255, 255, 255, 0.55 ); font-size: 12.5px; margin-top: 2px; }
.primary-nav__list .ebf-mega__sched:hover .ebf-mega__sched-t { color: var(--color-primary); }

/* --- Desktop (>=1024): floating white dropdown --- */
@media (min-width: 1024px) {
	.primary-nav__list .has-mega { position: relative; }
	.ebf-mega {
		position: absolute;
		top: calc( 100% + 10px );
		left: 0;
		width: 720px;
		max-width: calc( 100vw - 56px );
		background: #fff;
		border-top: 3px solid var(--color-primary);
		border-radius: 0 0 14px 14px;
		box-shadow: 0 24px 60px rgba( 0, 0, 0, 0.28 );
		z-index: 200;
		/* Shared min-height so the Classes and Amenities panels render at the
		   same depth; content top-aligned, with clean bottom padding. */
		min-height: 360px;
	}
	.ebf-mega__inner { display: grid; grid-template-columns: 1.1fr 1.3fr; gap: 36px; padding: 26px 30px 30px; align-items: start; }
	.ebf-mega__h {
		display: block;
		font-family: var(--font-body);
		font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
		color: var(--color-muted); margin: 0 0 14px;
	}
	.ebf-mega__links { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(5, auto); gap: 2px 16px; }
	/* v2.22.7 — Locations menu has 8 items → 4+4 columns (Englewood under Fairborn). Scoped to #ebf-locations-mega so amenities (5+4) and classes are untouched. */
	#ebf-locations-mega .ebf-mega__links { grid-template-rows: repeat(4, auto); }
	.primary-nav__list .ebf-mega__links a {
		display: block;
		padding: 9px 12px;
		border: 0;
		border-left: 3px solid transparent;
		border-radius: 9px;
		color: var(--color-charcoal);
		font-size: 15px;
		font-weight: 600;
	}
	.primary-nav__list .ebf-mega__links a:hover,
	.primary-nav__list .ebf-mega__links a:focus { background: var(--color-bg-alt); border-left-color: var(--color-primary); color: var(--color-charcoal); }
	.ebf-mega__name { display: block; }
	.ebf-mega__cat { display: block; color: var(--color-muted); font-size: 12px; font-weight: 500; margin-top: 1px; }
	.primary-nav__list .ebf-mega__viewall {
		grid-column: 1 / -1;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin-top: 12px;
		padding: 0;
		border: 0;
		color: var(--color-primary);
		font-weight: 700;
		font-size: 14px;
	}
	.primary-nav__list .ebf-mega__viewall:hover { text-decoration: underline; }
	.ebf-mega__col--feature { display: flex; flex-direction: column; }
	.ebf-mega__label {
		display: block;
		font-family: var(--font-body);
		font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
		color: var(--color-muted); margin: 0 0 14px;
	}
	.ebf-mega__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
	.ebf-mega__card {
		position: relative;
		aspect-ratio: 4 / 3;
		border-radius: 12px;
		overflow: hidden;
		background-color: #16181b;
		background-size: cover;
		background-position: center;
		text-decoration: none;
		color: #fff;
		display: block;
		transition: transform 0.15s ease;
	}
	.ebf-mega__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, transparent 40%, rgba( 0, 0, 0, 0.66 ) ); }
	.ebf-mega__card:hover { transform: translateY( -2px ); }
	.ebf-mega__card-nm { position: absolute; left: 12px; bottom: 10px; z-index: 2; font-family: var(--font-heading); font-weight: 800; font-size: 16px; }
	.primary-nav__list .ebf-mega__sched {
		margin-top: auto;
		padding: 14px 16px;
		border: 1px solid var(--color-border);
		border-radius: 12px;
		background: var(--color-bg-alt);
		transition: background 0.15s ease, border-color 0.15s ease;
	}
	.primary-nav__list .ebf-mega__sched:hover { background: #fff; border-color: var(--color-primary); }
	.ebf-mega__sched-t { color: var(--color-charcoal); }
	.ebf-mega__sched-s { color: var(--color-muted); }
	.primary-nav__list .ebf-mega__sched:hover .ebf-mega__sched-t { color: var(--color-primary); }
}
@media (prefers-reduced-motion: reduce) {
	.ebf-mega__card { transition: none; }
	.ebf-mega__card:hover { transform: none; }
}

/* ==========================================================================
   Section 27: Amenities — detail template (.amenity-detail) + index
   (.amenities-page). Ported from amenity-detail-mockup.html; mirrors the class
   detail page treatment (dark hero, red stat band, dark benefits, red-open FAQ
   accordion, red final CTA). Uses brand tokens; full-bleed bands.
   ========================================================================== */
.amenity-detail, .amenities-page { --am-tint: #fbe9ec; }
.amenity-detail .wrap, .amenities-page .wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; }
.amenity-detail h1, .amenity-detail h2, .amenity-detail h3,
.amenities-page h1, .amenities-page h2, .amenities-page h3 { font-family: var(--font-heading); letter-spacing: -0.02em; margin: 0; }
.am-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-primary); }

/* Buttons */
.am-btn { display: inline-flex; align-items: center; gap: 9px; background: var(--color-primary); color: #fff; font-family: var(--font-body); font-weight: 700; font-size: 15px; padding: 15px 30px; border-radius: 11px; text-decoration: none; transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease; }
.am-btn:hover { background: var(--color-primary-dark); transform: translateY(-1px); }
.am-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.am-btn--ghost { background: transparent; border: 1.5px solid rgba(255,255,255,0.55); color: #fff; }
.am-btn--ghost:hover { background: rgba(255,255,255,0.1); }
.am-btn--onred { background: #fff; color: var(--color-primary); }
.am-btn--onred:hover { background: #0A0A0A; color: #fff; }

/* 1. Dark centered hero */
.am-hero { background: #0A0A0A; color: #fff; text-align: center; padding: 84px 0 78px; }
.am-hero .am-eyebrow { color: #ff5d72; }
.am-hero__title { font-size: clamp(40px, 6vw, 68px); font-weight: 900; margin: 14px 0 18px; color: #fff; }
.am-hero__sub { color: #cfd2d6; max-width: 54ch; margin: 0 auto 30px; font-size: 18px; line-height: 1.6; }

/* 2. Red stat band */
.am-stats { background: var(--color-primary); color: #fff; }
.am-stats__in { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 1080px; margin: 0 auto; }
.am-stat { padding: 30px 24px; text-align: center; border-right: 1px solid rgba(255,255,255,0.18); }
.am-stat:last-child { border-right: 0; }
.am-stat__n { font-family: var(--font-heading); font-weight: 900; font-size: 28px; line-height: 1.15; }
.am-stat__l { font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.9; margin-top: 5px; }

/* 3. What it is (2-col) */
.am-what { padding: 72px 0; }
.am-what__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.am-what__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; display: block; }
.am-photo-todo { aspect-ratio: 4 / 3; border: 2px dashed #d6d6db; border-radius: 16px; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; color: #9aa0a8; font-size: 13px; background: #fafafa; text-align: center; padding: 20px; }
.am-photo-todo__ico { font-size: 26px; }
.am-photo-todo__lbl { font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 12px; }
.am-what__copy h2 { font-size: clamp(26px, 3.5vw, 38px); font-weight: 800; margin-bottom: 16px; }
.am-what__copy p { color: #444; font-size: 16.5px; line-height: 1.6; margin: 0 0 14px; }

/* 4. Dark benefits band */
.am-benefits { background: #101012; color: #fff; padding: 104px 0 72px; } /* v2.25.2 — more top breathing room above "Why members love it" (top 72→104; bottom + cards unchanged) */
.am-benefits__h { text-align: center; font-size: clamp(26px, 3.5vw, 38px); font-weight: 800; margin-bottom: 70px; color: #fff; } /* light override — global h2 is dark charcoal (v2.21.90); v2.25.5 — final heading-to-cards gap 70px (dialed in live via Additional CSS, now baked into the theme) */
.am-bgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.am-bcard { background: #17191d; border-radius: 14px; padding: 26px 24px; border-top: 3px solid var(--color-primary); }
.am-bcard__n { font-family: var(--font-heading); font-weight: 900; color: var(--color-primary); font-size: 15px; }
.am-bcard h3 { font-size: 18px; font-weight: 700; margin: 8px 0; color: #fff; }
.am-bcard p { color: #b9bcc2; font-size: 14.5px; margin: 0; line-height: 1.55; }

/* 5. Available at */
.am-avail { padding: 56px 0; text-align: center; }
.am-avail h2 { font-size: clamp(26px, 3.5vw, 36px); font-weight: 800; margin-bottom: 8px; }
.am-avail__sub { color: var(--color-muted); margin: 0 0 18px; font-size: 16px; }
.am-hours { display: inline-block; background: var(--am-tint); color: var(--color-primary-dark); border-radius: 10px; padding: 11px 18px; font-size: 14.5px; margin: 0 0 18px; }
.am-locs { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 760px; margin: 0 auto; }
.am-loc { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--color-border); border-radius: 11px; padding: 13px 20px; text-decoration: none; color: #101012; font-weight: 600; font-size: 15px; background: #fff; transition: border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease; }
.am-loc:hover { border-color: var(--color-primary); color: var(--color-primary-dark); box-shadow: 0 6px 18px rgba(0,0,0,0.06); }
.am-loc:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.am-loc::after { content: "\2192"; color: var(--color-primary); opacity: 0.5; transition: opacity 0.14s ease, transform 0.14s ease; }
.am-loc:hover::after { opacity: 1; transform: translateX(2px); }

/* 6. FAQ — two-col sticky rail + red-open native-details accordion */
.am-faq { background: var(--color-bg-alt); padding: 74px 0; }
.am-faq__grid { display: grid; grid-template-columns: 0.82fr 1.4fr; gap: 50px; align-items: start; }
.am-faq__rail { position: sticky; top: 30px; }
.am-faq__h { font-size: clamp(26px, 3.2vw, 34px); font-weight: 800; margin: 12px 0 0; }
.am-acc { display: flex; flex-direction: column; gap: 14px; }
.am-acc__item { border: 1px solid var(--color-border); border-radius: 14px; background: #fff; overflow: hidden; transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease; }
.am-acc__item summary { list-style: none; cursor: pointer; padding: 20px 24px; font-family: var(--font-heading); font-weight: 700; font-size: 16.5px; color: #101012; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.am-acc__item summary::-webkit-details-marker { display: none; }
.am-acc__item summary::after { content: "+"; color: var(--color-primary); font-size: 24px; font-weight: 400; line-height: 1; flex-shrink: 0; }
.am-acc__item[open] { background: var(--color-primary); border-color: var(--color-primary); box-shadow: 0 14px 34px rgba(196,18,48,0.20); }
.am-acc__item[open] summary { color: #fff; }
.am-acc__item[open] summary::after { content: "\00d7"; color: #fff; }
.am-acc__item summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 6px; }
.am-acc__item[open] summary:focus-visible { outline-color: #fff; }
.am-acc__a { padding: 0 24px 22px; color: #444; font-size: 15px; line-height: 1.65; }
.am-acc__item[open] .am-acc__a { color: #fff; }

/* 7. Red final CTA */
.am-cta { background: var(--color-primary); color: #fff; text-align: center; padding: 74px 0; }
.am-cta h2 { font-size: clamp(28px, 4vw, 44px); font-weight: 900; margin-bottom: 14px; color: #fff; }
.am-cta p { font-size: 17px; opacity: 0.95; margin: 0 auto 26px; max-width: 50ch; line-height: 1.6; }

/* ---- /amenities index ---- */
.amenities-page__hero { background: #0A0A0A; color: #fff; text-align: center; padding: 72px 0 60px; }
.amenities-page__hero .am-eyebrow { color: #ff5d72; }
.amenities-page__title { font-size: clamp(36px, 5.5vw, 60px); font-weight: 900; margin: 14px 0 16px; color: #fff; }
.amenities-page__sub { color: #cfd2d6; max-width: 60ch; margin: 0 auto; font-size: 17px; line-height: 1.6; }
.amenities-page__grid-wrap { padding: 60px 0 12px; }
.amenities-page__group { font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); margin: 0 0 22px; }
.amenities-page__group:not(:first-child) { margin-top: 56px; }
/* Flex (not grid) so a trailing "orphan" card (e.g. the 5th "every location" card)
   centers instead of hanging left. --am-card-h is the single tunable card size. (v2.21.56) */
.amenities-page__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.amenities-page__grid .am-card { flex: 0 1 100%; }
.am-card { position: relative; display: flex; align-items: flex-end; min-height: var(--am-card-h, 260px); border-radius: 16px; overflow: hidden; text-decoration: none; color: #fff; background-color: #16181b; background-size: cover; background-position: center; transition: transform 0.16s ease, box-shadow 0.16s ease; }
.am-card:link, .am-card:visited, .am-card:hover, .am-card:focus, .am-card:focus-visible, .am-card:active { color: #fff; }
.am-card--branded { background-image: linear-gradient(150deg, #2b2e33, #0A0A0A); }
.am-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.15) 30%, rgba(0,0,0,0.82)); }
.am-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,0.26); }
.am-card:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.am-card__badge { position: absolute; top: 14px; left: 14px; z-index: 2; max-width: calc(100% - 28px); background: var(--color-primary); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.3; text-transform: uppercase; padding: 4px 10px; border-radius: 6px; }
.am-card__body { position: relative; z-index: 2; padding: 20px 22px; }
.am-card__name { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 22px; }
.am-card__sum { display: block; margin-top: 5px; font-size: 14px; color: rgba(255,255,255,0.88); line-height: 1.5; }
.amenities-page__also { margin: 30px 0 0; padding-top: 22px; border-top: 1px solid var(--color-border); font-size: 15px; color: var(--color-body); }
.amenities-page__cta { background: var(--color-primary); color: #fff; text-align: center; padding: 70px 0; margin-top: 56px; }
.amenities-page__cta h2 { font-size: clamp(28px, 4vw, 44px); font-weight: 900; margin-bottom: 14px; color: #fff; }
.amenities-page__cta p { font-size: 17px; opacity: 0.95; margin: 0 auto 26px; max-width: 50ch; }

/* Responsive */
@media (min-width: 640px) {
	.amenities-page__grid .am-card { flex: 0 1 calc(50% - 10px); }
}
@media (min-width: 1024px) {
	.amenities-page__grid .am-card { flex: 0 1 calc(25% - 15px); }
}
@media (max-width: 820px) {
	.am-what__grid { grid-template-columns: 1fr; gap: 28px; }
	.am-bgrid { grid-template-columns: 1fr; }
	.am-faq__grid { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 700px) {
	.am-stats__in { grid-template-columns: 1fr; }
	.am-stat { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.18); }
	.am-stat:last-child { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.am-btn, .am-loc, .am-loc::after, .am-card, .am-acc__item { transition: none; }
	.am-btn:hover, .am-card:hover { transform: none; }
}

/* ==========================================================================
   Shared scheduler component (.ebf-sched*) — used on class detail + location
   detail pages. Ported from the original .class-detail .cd-* scheduler styles
   (values preserved); standalone namespace so it works outside .class-detail.
   ========================================================================== */
.ebf-sched {
	--cd-accent: #C41230;
	--cd-ink: #101012;
	--cd-muted: #6b7280;
	--cd-line: #e9e9ec;
	--cd-bg: #f6f6f7;
	padding: 72px 0;
	scroll-margin-top: 24px;
	color: var(--cd-ink);
	font-family: var(--font-body);
}
.ebf-sched .wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; }
.ebf-sched__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cd-accent); }
.ebf-sched__h { font-family: var(--font-heading); font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; letter-spacing: -0.01em; margin: 12px 0 0; color: var(--cd-ink); }
.ebf-sched__note { background: var(--cd-accent-tint, #fbe9ec); border-radius: 12px; padding: 14px 18px; font-size: 14.5px; color: var(--color-primary-dark); margin: 18px 0 0; }
.ebf-sched__note b { font-weight: 700; }
.ebf-sched__disclaimer { font-size: 13px; color: var(--cd-muted); margin: 10px 0 22px; }

/* Week nav (no "This week" reset). */
.ebf-sched__weeknav { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 0 0 18px; }
.ebf-sched__arrow { flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; background: #fff; border: 1.5px solid var(--cd-line); border-radius: 10px; color: var(--cd-ink); cursor: pointer; transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease; }
.ebf-sched__arrow:hover:not(:disabled) { border-color: var(--cd-accent); color: var(--cd-accent); }
.ebf-sched__arrow:focus-visible { outline: 2px solid var(--cd-accent); outline-offset: 2px; }
.ebf-sched__arrow:disabled { opacity: 0.35; cursor: default; }
.ebf-sched__weekcenter { text-align: center; min-width: 220px; }
.ebf-sched__range { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 18px; color: var(--cd-ink); }
.ebf-sched__weeklabel { display: block; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cd-muted); margin-top: 3px; }

/* Filter chips (sit directly above the day tiles). */
.ebf-sched__filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 18px; }
.ebf-sched__chip { background: #fff; border: 1px solid var(--cd-line); border-radius: 999px; padding: 8px 16px; font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--cd-ink); cursor: pointer; transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease; }
.ebf-sched__chip:hover { border-color: var(--cd-accent); color: var(--cd-accent); }
.ebf-sched__chip:focus-visible { outline: 2px solid var(--cd-accent); outline-offset: 2px; }
.ebf-sched__chip.is-active { background: var(--cd-accent); border-color: var(--cd-accent); color: #fff; }

/* Day tiles. */
.ebf-sched__week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin: 0 0 26px; }
.ebf-sched__day { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 11px 0 10px; background: #fff; border: 1.5px solid var(--cd-line); border-radius: 12px; font-family: var(--font-body); cursor: pointer; transition: border-color 0.14s ease, background 0.14s ease; }
.ebf-sched__daylbl { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cd-muted); }
.ebf-sched__daynum { font-family: var(--font-heading); font-weight: 800; font-size: 17px; line-height: 1; color: var(--cd-ink); }
.ebf-sched__daydot { width: 6px; height: 6px; border-radius: 50%; background: var(--cd-accent); }
.ebf-sched__day:hover { border-color: var(--cd-accent); }
.ebf-sched__day:focus-visible { outline: 2px solid var(--cd-accent); outline-offset: 2px; }
.ebf-sched__day.is-active { background: var(--cd-accent); border-color: var(--cd-accent); }
.ebf-sched__day.is-active .ebf-sched__daylbl,
.ebf-sched__day.is-active .ebf-sched__daynum { color: #fff; }
.ebf-sched__day.is-active .ebf-sched__daydot { background: #fff; }
.ebf-sched__day.is-today:not(.is-active) { border-color: var(--cd-accent); box-shadow: inset 0 0 0 1px var(--cd-accent); }
.ebf-sched__day.is-holiday:not(.is-active) .ebf-sched__daydot { background: #c9a23a; }
.ebf-sched__day.is-empty { opacity: 0.4; cursor: default; }
.ebf-sched__day.is-empty .ebf-sched__daydot { background: #c9c9cf; }

/* Panels. */
.ebf-sched__panels { margin: 0 0 22px; }
.ebf-sched__panel { display: none; }
.ebf-sched__panel.is-open { display: block; }
.ebf-sched__panelh { font-size: 15px; font-weight: 700; color: var(--cd-ink); margin: 0 0 8px; font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.06em; }
.ebf-sched__paneldate { color: var(--cd-muted); font-weight: 600; }
.ebf-sched__holiday { background: var(--cd-accent-tint, #fbe9ec); border-radius: 12px; padding: 14px 18px; font-size: 14.5px; color: var(--color-primary-dark); margin: 4px 0 6px; }
@media (prefers-reduced-motion: no-preference) {
	.ebf-sched__panel.is-open { animation: ebf-sched-fade 0.18s ease; }
	@keyframes ebf-sched-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}
.ebf-sched__row { display: grid; grid-template-columns: 96px 1fr auto; gap: 16px; align-items: center; padding: 15px 0 15px 15px; border-bottom: 1px solid var(--cd-line); position: relative; }
.ebf-sched__row::before { content: ""; position: absolute; left: 0; top: 15px; bottom: 15px; width: 3px; border-radius: 3px; background: var(--cd-accent); }
.ebf-sched__t { font-weight: 700; font-size: 15px; }
.ebf-sched__nm { font-weight: 600; }
.ebf-sched__nm small { display: block; color: var(--cd-muted); font-weight: 400; font-size: 13px; margin-top: 2px; }
.ebf-sched__loc { color: var(--cd-muted); font-size: 13.5px; text-align: right; }
.ebf-sched__row.is-cancelled .ebf-sched__t,
.ebf-sched__row.is-cancelled .ebf-sched__nm,
.ebf-sched__row.is-cancelled .ebf-sched__loc { text-decoration: line-through; color: var(--cd-muted); }
.ebf-sched__row.is-cancelled::before { background: var(--cd-muted); }
.ebf-sched__cancel { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; color: var(--color-primary-dark); background: var(--cd-accent-tint, #fbe9ec); border-radius: 5px; padding: 2px 7px; }
.ebf-sched__btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-family: var(--font-body); font-weight: 700; font-size: 15px; color: #fff; background: var(--cd-ink); text-decoration: none; border-radius: 12px; padding: 14px 24px; transition: background 0.15s ease; }
.ebf-sched__btn:hover { background: #000; }
.ebf-sched__btn:focus-visible { outline: 2px solid var(--cd-accent); outline-offset: 3px; }

@media (max-width: 520px) {
	.ebf-sched__week { gap: 5px; }
	.ebf-sched__day { padding: 9px 0; gap: 6px; border-radius: 10px; }
	.ebf-sched__daylbl { font-size: 11px; letter-spacing: 0.02em; }
	.ebf-sched__row { grid-template-columns: 80px 1fr; }
	.ebf-sched__loc { grid-column: 2; text-align: left; margin-top: 2px; }
}

/* ==========================================================================
   Section 28: Locations — detail template (.location-detail) + index
   (.locations-page). Ported from location-detail-mockup.html; reuses brand
   tokens + the shared .ebf-sched* scheduler. Full-bleed red NAP band + CTA.
   ========================================================================== */
.location-detail, .locations-page { --loc-tint: #fbe9ec; }
.location-detail .wrap, .locations-page .wrap { max-width: 1100px; margin: 0 auto; padding: 0 28px; }
.location-detail h1, .location-detail h2, .location-detail h3,
.locations-page h1, .locations-page h2, .locations-page h3 { font-family: var(--font-heading); letter-spacing: -0.02em; margin: 0; }
.loc-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-primary); }

/* Buttons */
.loc-btn { display: inline-flex; align-items: center; gap: 9px; background: var(--color-primary); color: #fff; font-family: var(--font-body); font-weight: 700; font-size: 15px; padding: 14px 28px; border-radius: 11px; text-decoration: none; border: 0; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease; }
.loc-btn:hover { background: var(--color-primary-dark); transform: translateY(-1px); }
/* Lock the hero primary CTA label white across all link states — the global
   a:hover/a:focus { color: --color-primary-dark } (0,1,1) otherwise beats
   .loc-btn's resting #fff and turns the text red-on-red after a click.
   Scoped to .loc-hero and excludes the ghost button (v2.21.16). */
.loc-hero .loc-btn:not(.loc-btn--ghost),
.loc-hero .loc-btn:not(.loc-btn--ghost):link,
.loc-hero .loc-btn:not(.loc-btn--ghost):visited,
.loc-hero .loc-btn:not(.loc-btn--ghost):hover,
.loc-hero .loc-btn:not(.loc-btn--ghost):focus,
.loc-hero .loc-btn:not(.loc-btn--ghost):active { color: #fff; }
.loc-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.loc-btn--ghost { background: rgba(0, 0, 0, 0.30); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border: 2px solid #fff; color: #fff; font-weight: 600; } /* legible over dark + bright hero photos (v2.21.13) */
.loc-btn--ghost:hover { background: #fff; color: #111; border-color: #fff; }
.loc-btn--dark { background: #0A0A0A; }
.loc-btn--dark:hover { background: #000; }
.loc-btn--onred { background: #fff; color: var(--color-primary); }
.loc-btn--onred:hover { background: #0A0A0A; color: #fff; }

/* 1. Hero (centered, photo bg) */
.location-detail .loc-hero { position: relative; min-height: 520px; display: flex; align-items: center; background-color: #0A0A0A; background-image: linear-gradient(120deg, #2a2d33, #111316); background-size: cover; background-position: center; color: #fff; text-align: center; padding: 90px 0; }
.location-detail .loc-hero__in { width: 100%; }
.location-detail .loc-hero__in { position: relative; z-index: 2; }
.location-detail .loc-crumb { font-size: 13px; color: #cfd2d6; margin-bottom: 14px; }
.location-detail .loc-crumb a { color: #cfd2d6; text-decoration: none; }
.location-detail .loc-crumb a:hover { color: #fff; }
.location-detail .loc-hero__title { font-size: clamp(44px, 7vw, 76px); font-weight: 900; line-height: 1; color: #fff; margin-bottom: 16px; }
.location-detail .loc-hero__desc { color: #cfd2d6; font-size: 18px; max-width: 54ch; margin: 0 auto 28px; }
.location-detail .loc-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* 2. NAP band (red) */
.loc-nap { background: var(--color-primary); color: #fff; }
.loc-nap__in { display: grid; grid-template-columns: repeat(3, 1fr); }
.loc-nap__item { padding: 20px 24px; border-right: 1px solid rgba(255, 255, 255, 0.22); display: flex; flex-direction: column; gap: 3px; text-align: center; align-items: center; }
.loc-nap__item:last-child { border-right: 0; }
.loc-nap__l { font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); }
.loc-nap__v { font-size: 16px; font-weight: 600; }
.loc-nap__v a { color: #fff; text-decoration: none; }

/* Sections */
.loc-block { padding: 72px 0; }
.loc-sechead { margin-bottom: 32px; }
.loc-sechead--center { text-align: center; }
.loc-sechead h2 { font-size: clamp(26px, 3.6vw, 40px); font-weight: 800; margin-top: 8px; }
.loc-sechead p { color: var(--color-muted); font-size: 16px; margin: 8px 0 0; }

/* 3. Amenities — gray section, optional featured spotlight, richer grid.
   Scoped under .location-detail so the alternating backgrounds always win. */
.location-detail .loc-amenities-sec { background: #fff; } /* v2.25.0 — white section behind colored cards */
/* Featured spotlight (unique amenity) */
.loc-featured { display: grid; grid-template-columns: 1.1fr 0.9fr; border-radius: 20px; overflow: hidden; margin-bottom: 18px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.10); background: #fff; text-decoration: none; color: var(--color-charcoal); }
.loc-featured__img { position: relative; min-height: 230px; background-color: #0c0d0f; background-image: linear-gradient(120deg, #1f2226, #0c0d0f); background-size: cover; background-position: center; }
.loc-featured__tag { position: absolute; top: 16px; left: 16px; background: var(--color-primary); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; }
.loc-featured__body { padding: 34px 36px; display: flex; flex-direction: column; justify-content: center; }
.loc-featured__body h3 { font-size: 26px; font-weight: 800; margin-bottom: 10px; }
.loc-featured__body p { color: #444; font-size: 15.5px; margin: 0 0 18px; }
.loc-featured__link { color: var(--color-primary); font-weight: 700; }
.loc-featured:hover .loc-featured__link { text-decoration: underline; }
.loc-featured:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
@media (max-width: 780px) { .loc-featured { grid-template-columns: 1fr; } }

.loc-amgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* v2.25.0 — cards are brand RED with white text; lead tile is BLACK. Every color
   is explicit, so the cards opt out of the global a{} red-link + button{} rules. */
.loc-am { position: relative; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--color-primary); border-radius: 16px; padding: 22px; text-decoration: none; color: #fff; background: var(--color-primary); transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease; }
.loc-am:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); box-shadow: 0 12px 30px rgba(196, 18, 48, 0.28); transform: translateY(-3px); }
.loc-am:focus-visible { outline: 2px solid var(--color-primary-dark); outline-offset: 2px; }
.loc-am--uniq { border-color: var(--color-primary); background: var(--color-primary); } /* folded into the red treatment; the badge denotes uniqueness */
.loc-am__icon { display: inline-flex; margin-bottom: 2px; color: #fff; }
.loc-am__icon svg { width: 24px; height: 24px; display: block; }
.loc-am__badge { position: absolute; top: 12px; right: 12px; background: #fff; color: var(--color-primary); font-size: 10px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; } /* white pill / red text — legible on red cards */
.loc-am__badge--rare { background: #111; color: #fff; }
.loc-am__name { font-weight: 700; font-size: 15.5px; padding-right: 70px; color: #fff; }
.loc-am__sub { font-size: 13px; color: #ffd2d5; } /* red-tint sublabel — legible on red */
.loc-am__arrow { color: #fff; font-weight: 700; margin-top: 4px; font-size: 14px; } /* white arrow on red */
/* "Open 24/7 365" / hours lead tile → BLACK with a red clock icon + red accents. */
.loc-am--247 { background: #111; border-color: #111; color: #fff; }
.loc-am--247 .loc-am__name { color: #fff; font-weight: 800; padding-right: 22px; }
.loc-am--247 .loc-am__icon { color: var(--color-primary); } /* red icon on the black tile */
.loc-am--247:hover { background: #000; border-color: #000; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28); }

/* 4. Media zone (dark) — shared by the tour video (.loc-tour) AND the photo
   carousel wrapper (.loc-media--dark), so all 8 locations get one identical
   black zone under the NAP band. Single source of truth: a video swap needs
   no layout change. (v2.25.0) */
.location-detail .loc-tour,
.location-detail .loc-media--dark { background: #101012; color: #fff; text-align: center; }
.location-detail .loc-tour { padding: 72px 0; }
/* Carousel wrapper takes its 72px height from the inner .loc-block; keep the
   block transparent so the wrapper's black shows through, and flip the carousel
   heading/eyebrow to the dark-zone treatment. */
.location-detail .loc-media--dark .loc-block { background: transparent; }
.location-detail .loc-media--dark .loc-sechead h2 { color: #fff; }
.location-detail .loc-media--dark .loc-eyebrow { color: #ff5d72; }
/* Carousel dots sit on black now — lighten the inactive ones; keep active red. */
.location-detail .loc-media--dark .locgal__dot { background: rgba(255, 255, 255, 0.28); }
.location-detail .loc-media--dark .locgal__dot.is-active { background: var(--color-primary); }
.loc-tour h2 { font-size: clamp(26px, 3.6vw, 40px); font-weight: 800; color: #fff; } /* light override — global h2 is dark charcoal (v2.21.12) */
.loc-tour p { color: #b9bcc2; margin: 8px auto 30px; max-width: 50ch; }
.loc-player { display: block; width: 100%; max-width: 920px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #0c0d0f; border: 1px solid rgba(255, 255, 255, 0.1); }
/* "Walkthrough coming soon" placeholder (when a location has no video yet). */
.loc-player--soon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: linear-gradient(120deg, #1f2226, #0c0d0f); }
.loc-player__glyph { position: relative; width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); }
.loc-player__glyph::after { content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent rgba(255, 255, 255, 0.45); }
.loc-player__soon { color: #9aa0a6; font-size: 14px; letter-spacing: 0.04em; }
/* Click-to-play Vimeo facade (v2.21.11) — same box as .loc-player */
.tour-video { position: relative; background-color: #0d0e10; background-position: center; background-size: cover; background-repeat: no-repeat; cursor: pointer; }
.tour-video::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 1; }
.tour-video__play { position: absolute; inset: 0; margin: auto; width: 74px; height: 74px; border: 0; border-radius: 50%; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; transition: transform 0.15s, background 0.15s; outline: none; -webkit-tap-highlight-color: transparent; }
.tour-video__play:hover { transform: scale(1.06); background: var(--color-primary-dark); }
.tour-video__play:focus { outline: none; }
.tour-video__play:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } /* keyboard-only branded ring, not the UA blue (v2.21.12) */
.tour-video__icon { font-size: 26px; margin-left: 4px; line-height: 1; }
.tour-video__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }

/* 5. Schedule fallback */
.loc-sched-fallback .loc-fallback { background: var(--loc-tint); color: var(--color-primary-dark); border-radius: 12px; padding: 16px 20px; font-size: 15px; margin: 0 0 22px; max-width: 60ch; }
.loc-sched-fallback .loc-fallback a { color: var(--color-primary-dark); font-weight: 700; }

/* 6. Reviews */
/* Dark testimonials section (scoped so the bg always wins). */
.location-detail .loc-reviews { background: #101012; color: #fff; }
.loc-reviews .loc-sechead h2 { color: #fff; }
.loc-reviews .loc-eyebrow { color: #ff5d72; }
/* Reviews carousel (.revcar) — one verbatim Google review at a time */
.revcar { position: relative; max-width: 820px; margin: 0 auto; display: flex; align-items: stretch; gap: 10px; }
.revcar__viewport { flex: 1; overflow: hidden; }
.revcar__track { position: relative; }
.revslide { display: none; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 34px 36px; background: #17191d; text-align: center; }
.revslide--on { display: block; }
.revslide__stars { letter-spacing: 3px; font-size: 17px; margin-bottom: 16px; }
.revslide__stars .revslide__on { color: #ffc83d; }
.revslide__stars .revslide__off { color: rgba(255, 255, 255, 0.22); }
.revslide__q { font-size: 16px; color: #e7e9ec; line-height: 1.65; margin: 0 auto; max-width: 640px; }
.revslide__q.is-clamped { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.revslide__more { margin: 12px auto 0; background: none; border: 0; padding: 0; color: #ff5d72; font-weight: 700; font-size: 13.5px; cursor: pointer; font-family: inherit; }
.revslide__more:hover { text-decoration: underline; }
.revslide__by { font-size: 13px; color: #9aa0a6; font-weight: 600; margin-top: 20px; }
.revslide__sub { color: #c9ccd1; } /* homepage: club tag next to the reviewer name */
.revslide__src { color: #ff5d72; }
/* Centered circle — padding:0 + flex override the global button rule (padding
   0.75rem 1.5rem) that was pushing the glyph off-centre, across all states (v2.21.24). */
.revcar__nav { flex: 0 0 auto; align-self: center; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.04); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.revcar__nav:hover, .revcar__nav:focus { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.revcar__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.revcar__dots { position: absolute; left: 0; right: 0; bottom: -34px; display: flex; justify-content: center; gap: 8px; }
.revcar__dot { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: rgba(255, 255, 255, 0.25); cursor: pointer; transition: background 0.15s, transform 0.15s; }
.revcar__dot.is-active { background: var(--color-primary); transform: scale(1.25); }

/* 7. Map — large 2-column joined block */
.loc-maprow { display: grid; grid-template-columns: 1.6fr 1fr; border-radius: 20px; overflow: hidden; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.10); border: 1px solid var(--color-border); }
.loc-map { min-height: 360px; background: #eef0f2; }
.loc-map iframe { display: block; width: 100%; height: 100%; min-height: 360px; }
.loc-mapinfo { padding: 38px; display: flex; flex-direction: column; justify-content: center; }
.loc-info { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 18px; }
.loc-info__k { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); min-width: 70px; padding-top: 2px; }
.loc-info__v { font-weight: 600; }
.loc-info__v a { color: var(--color-charcoal); text-decoration: none; }

/* 8. Final CTA (red) — shared by detail + index */
.loc-cta { background: var(--color-primary); color: #fff; text-align: center; padding: 74px 0; }
.loc-cta h2 { font-size: clamp(28px, 4vw, 46px); font-weight: 900; color: #fff; margin-bottom: 14px; }
.loc-cta p { font-size: 17px; opacity: 0.95; margin: 0 auto 26px; max-width: 52ch; }

/* ---- /locations index ---- */
.locations-page__hero { background: #0A0A0A; color: #fff; text-align: center; padding: 72px 0 60px; }
.locations-page__title { font-size: clamp(34px, 5vw, 58px); font-weight: 900; color: #fff; margin: 14px 0 16px; }
.locations-page__sub { color: #cfd2d6; max-width: 60ch; margin: 0 auto; font-size: 17px; }
.locations-page__grid-wrap { padding: 60px 0; }
.locations-page__grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
/* Aligned location cards (fixed-height zones so every row lines up). */
.card { position: relative; height: 430px; border-radius: 16px; overflow: hidden; display: block; text-decoration: none; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); }
.card__photo { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: #0d0e10; }
.card__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.02) 30%, rgba(0, 0, 0, 0.55) 64%, rgba(0, 0, 0, 0.9) 100%); }
.card__dist { position: absolute; top: 14px; right: 14px; background: #fff; color: #0A0A0A; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; z-index: 2; display: none; }
.card__dist.show { display: block; }
.card__closest { position: absolute; top: 14px; left: 14px; background: #fff; color: var(--color-primary); font-size: 11px; font-weight: 800; letter-spacing: 0.04em; padding: 5px 11px; border-radius: 999px; z-index: 3; display: none; }
.card.is-closest { outline: 3px solid var(--color-primary); outline-offset: -3px; }
.card.is-closest .card__closest { display: block; }
.card__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; color: #fff; }
.card__name { font-family: var(--font-heading); font-weight: 800; font-size: 22px; line-height: 1.12; min-height: 50px; display: flex; align-items: flex-end; }
.card__city { font-size: 13px; color: rgba(255, 255, 255, 0.78); margin-top: 5px; text-transform: uppercase; letter-spacing: 0.08em; }
.card__rule { height: 1px; background: rgba(255, 255, 255, 0.22); margin: 13px 0; }
.card__line { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.92); }
.card__line .ic { width: 15px; flex: 0 0 15px; margin-top: 2px; opacity: 0.85; }
.card__addr { min-height: 39px; }
.card__phone { margin-top: 8px; }
.card__cta { margin-top: 16px; font-weight: 600; font-size: 14px; color: #fff; display: inline-flex; align-items: center; gap: 7px; }
.card__cta .ar { color: var(--color-primary); }
.card:focus-visible { outline: 3px solid var(--color-primary); outline-offset: -3px; }

/* Finder (dark hero) */
.finder { max-width: 560px; margin: 26px auto 0; }
.finder__row { display: flex; gap: 10px; }
.finder__input { flex: 1; height: 54px; border-radius: 11px; border: 0; padding: 0 18px; font-size: 16px; font-family: inherit; }
.finder__btn { height: 54px; border: 0; border-radius: 11px; background: var(--color-primary); color: #fff; font-weight: 700; font-size: 15px; padding: 0 24px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.finder__btn:hover { background: var(--color-primary-dark); }
.finder__status { min-height: 22px; margin-top: 14px; font-size: 14px; color: #c9cbcf; }
.finder__status b { color: #fff; }
.finder__chips { display: none; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.finder__chips.show { display: flex; }
.finder__chips .chip { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.25); color: #fff; border-radius: 999px; padding: 7px 15px; font-size: 13px; cursor: pointer; font-family: inherit; }
.finder__chips .chip:hover { background: rgba(255, 255, 255, 0.2); }
.finder__credit { margin-top: 12px; font-size: 11px; color: rgba(255, 255, 255, 0.4); }

/* Responsive */
@media (min-width: 640px) { .locations-page__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .locations-page__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 880px) { .loc-amgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px) { .loc-maprow { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .revcar__nav { display: none; } .revslide { padding: 28px 22px; } .revslide__q { font-size: 15px; } }
@media (max-width: 720px) { .loc-nap__in { grid-template-columns: 1fr; } .loc-nap__item { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.18); } .loc-nap__item:last-child { border-bottom: 0; } }
@media (max-width: 560px) { .finder__row { flex-direction: column; } .finder__btn { width: 100%; } }
@media (max-width: 480px) { .loc-amgrid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
	.loc-btn, .loc-am { transition: none; }
	.loc-btn:hover, .loc-am:hover { transform: none; }
}

/* ==========================================================================
   Membership page (page-membership.php) — v2.21.13
   Builds on the shared .class-detail tokens/components; .m-* are the
   membership-specific sections (hero cue, plan cards, deal box, $15 timeline,
   stat band, CTA). Section backgrounds reuse the --cd-* palette.
   ========================================================================== */
.membership-page .m-sec { padding: 84px 0; }
.membership-page .m-light { background: #fff; }
.membership-page .m-gray { background: var(--cd-bg); }
.membership-page .m-tint { background: var(--cd-accent-tint); }
.membership-page .m-dark { background: var(--cd-ink); color: #fff; }
.membership-page .m-cta { background: var(--cd-red-deep); color: #fff; text-align: center; }
/* Headings light on dark/red bands (overrides the global dark .class-detail h2). */
.membership-page .m-dark h1, .membership-page .m-dark h2, .membership-page .m-dark h3,
.membership-page .m-cta h1, .membership-page .m-cta h2 { color: #fff; }

.membership-page .m-head { max-width: 720px; }
.membership-page .m-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.membership-page .m-lede { margin: 16px auto 0; max-width: 60ch; font-size: 17px; line-height: 1.6; color: var(--cd-muted); }
.membership-page .m-dark .m-lede, .membership-page .m-cta .m-lede { color: rgba(255, 255, 255, 0.82); }

/* 1. Hero */
.membership-page .mhero { text-align: center; padding: 104px 0 92px; }
.membership-page .mhero__title { font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.02em; line-height: 1.04; font-size: clamp(34px, 5.4vw, 58px); }
.membership-page .mhero__sub { margin: 22px auto 0; max-width: 60ch; font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, 0.82); }
.membership-page .mhero__cue { display: inline-block; margin-top: 34px; color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; border-bottom: 2px solid var(--cd-accent); padding-bottom: 4px; transition: opacity 0.15s; }
.membership-page .mhero__cue:hover { opacity: 0.78; }

/* 2. Plans */
.membership-page .mplan-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 880px; margin: 44px auto 0; align-items: stretch; }
.membership-page .mplan { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--cd-line); border-radius: 18px; padding: 32px 30px; }
.membership-page .mplan--featured { border-color: var(--cd-accent); box-shadow: 0 14px 40px rgba(196, 18, 48, 0.14); }
.membership-page .mplan__tag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--cd-accent); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; white-space: nowrap; }
.membership-page .mplan__name { font-family: var(--font-heading); font-weight: 800; font-size: 22px; }
.membership-page .mplan__price { margin: 10px 0 2px; }
.membership-page .mplan__amt { font-family: var(--font-heading); font-weight: 800; font-size: 40px; color: var(--cd-ink); letter-spacing: -0.02em; }
.membership-page .mplan__per { font-size: 16px; color: var(--cd-muted); font-weight: 600; }
.membership-page .mplan__meta { font-size: 13.5px; color: var(--cd-muted); font-weight: 600; }
.membership-page .mplan__feat { list-style: none; margin: 22px 0 26px; padding: 0; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.membership-page .mplan__feat li { position: relative; padding-left: 30px; font-size: 15px; line-height: 1.4; color: #2b2d31; }
.membership-page .mplan__feat li::before { position: absolute; left: 0; top: -1px; width: 20px; height: 20px; border-radius: 50%; font-size: 12px; font-weight: 700; text-align: center; line-height: 20px; }
.membership-page .mplan__feat li.is-in::before { content: "\2713"; background: rgba(196, 18, 48, 0.1); color: var(--cd-accent); }
.membership-page .mplan__feat li.is-out { color: #9aa0a6; }
.membership-page .mplan__feat li.is-out::before { content: "\2715"; background: #f1f1f3; color: #b4b8bd; }

.membership-page .mplan__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px 22px; border-radius: 11px; font-family: var(--font-body); font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.membership-page .mplan__btn--primary { background: var(--cd-accent); color: #fff; border: 2px solid var(--cd-accent); }
.membership-page .mplan__btn--primary:hover { background: var(--cd-red-deep); border-color: var(--cd-red-deep); }
.membership-page .mplan__btn--ghost { background: transparent; color: var(--cd-ink); border: 2px solid var(--cd-line); }
.membership-page .mplan__btn--ghost:hover { border-color: var(--cd-ink); background: var(--cd-ink); color: #fff; }
.membership-page .mplan__btn--onred { background: #fff; color: var(--cd-accent); border: 2px solid #fff; width: auto; }
.membership-page .mplan__btn--onred:hover { background: var(--cd-ink); color: #fff; border-color: var(--cd-ink); }

.membership-page .mdeal { max-width: 720px; margin: 34px auto 0; background: var(--cd-accent-tint); border: 1px solid rgba(196, 18, 48, 0.22); border-radius: 14px; padding: 22px 28px; text-align: center; }
.membership-page .mdeal p { margin: 0; font-size: 16px; line-height: 1.55; color: #3a1118; }
.membership-page .mdeal strong { color: var(--cd-accent); }
.membership-page .mplan-note { max-width: 720px; margin: 18px auto 0; text-align: center; font-size: 13px; line-height: 1.6; color: var(--cd-muted); }

/* 4. Payoffs */
.membership-page .mpay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.membership-page .mpay { display: flex; flex-direction: column; }
.membership-page .mpay__icon { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 12px; background: rgba(196, 18, 48, 0.14); color: var(--cd-accent); margin-bottom: 18px; }
.membership-page .mpay__h { font-family: var(--font-heading); font-weight: 800; font-size: 19px; color: #fff; line-height: 1.2; }
.membership-page .mpay p { margin: 12px 0 0; font-size: 15.5px; color: #e7e8ea; line-height: 1.55; }

/* 5. Stat band */
.membership-page .mstat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 820px; margin: 40px auto 0; text-align: center; }
.membership-page .mstat__n { font-family: var(--font-heading); font-weight: 800; font-size: clamp(40px, 6vw, 60px); color: var(--cd-accent); line-height: 1; letter-spacing: -0.02em; }
.membership-page .mstat__l { margin-top: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cd-muted); }

/* 6. $15 timeline */
.membership-page .mstep-grid { list-style: none; counter-reset: mstep; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.membership-page .mstep { background: #fff; border: 1px solid var(--cd-line); border-radius: 16px; padding: 30px 26px; }
.membership-page .mstep__n { width: 42px; height: 42px; border-radius: 50%; background: var(--cd-accent); color: #fff; font-family: var(--font-heading); font-weight: 800; font-size: 19px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.membership-page .mstep__h { font-family: var(--font-heading); font-weight: 800; font-size: 18px; color: var(--cd-ink); }
.membership-page .mstep p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--cd-muted); }

/* 9. Final CTA */
.membership-page .mcta__h { font-family: var(--font-heading); font-weight: 800; font-size: clamp(28px, 4vw, 44px); line-height: 1.08; }
.membership-page .mcta__p { margin: 16px auto 28px; max-width: 56ch; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, 0.88); }
.membership-page .mcta__btn { display: inline-flex; }

/* Responsive */
@media (max-width: 860px) {
	.membership-page .mpay-grid, .membership-page .mstep-grid { grid-template-columns: 1fr; }
	.membership-page .mstat { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 680px) {
	.membership-page .mplan-grid { grid-template-columns: 1fr; }
	.membership-page .m-sec { padding: 64px 0; }
	.membership-page .mhero { padding: 84px 0 72px; }
}

/* ==========================================================================
   Free-trial form page (page-free-trial.php) + calendar page
   (free-trial-calendar.php) — v2.21.17. Reuses the .class-detail tokens
   (--cd-*) and the .cd-faq accordion; .ft-* are page-specific.
   ========================================================================== */

/* --- Hero: split pitch + form card (dark) --- */
.free-trial-page .ft-hero { background: var(--cd-ink); color: #fff; padding: 84px 0 76px; }
.free-trial-page .ft-hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.free-trial-page .ft-pitch__eyebrow { color: #ff5d72; }
.free-trial-page .ft-pitch__title { font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.02em; line-height: 1.04; font-size: clamp(34px, 4.8vw, 54px); color: #fff; margin: 12px 0 0; }
.free-trial-page .ft-pitch__sub { margin: 18px 0 0; max-width: 52ch; font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, 0.82); }
.free-trial-page .ft-pitch__list { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.free-trial-page .ft-pitch__list li { position: relative; padding-left: 30px; font-size: 15.5px; color: #e7e8ea; }
.free-trial-page .ft-pitch__list li::before { content: "\2713"; position: absolute; left: 0; top: -1px; width: 20px; height: 20px; border-radius: 50%; background: rgba(196, 18, 48, 0.22); color: #ff8a9b; font-size: 12px; font-weight: 700; text-align: center; line-height: 20px; }

/* --- Form card --- */
.free-trial-page .ft-card { background: #fff; color: var(--cd-ink); border-radius: 18px; padding: 32px 30px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
.free-trial-page .ft-card__h { font-family: var(--font-heading); font-weight: 800; font-size: 24px; }
.free-trial-page .ft-card__sub { margin: 4px 0 22px; font-size: 14px; color: var(--cd-muted); }
.free-trial-page .ft-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.free-trial-page .ft-field { display: flex; flex-direction: column; margin-bottom: 14px; }
.free-trial-page .ft-field label { font-size: 13px; font-weight: 700; color: #2b2d31; margin-bottom: 6px; }
.free-trial-page .ft-field input,
.free-trial-page .ft-field select { width: 100%; font-family: var(--font-body); font-size: 15px; color: var(--cd-ink); padding: 12px 14px; border: 1px solid var(--cd-line); border-radius: 11px; background: #fff; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.free-trial-page .ft-field input:focus,
.free-trial-page .ft-field select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(196, 18, 48, 0.12); }
.free-trial-page .ft-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.free-trial-page .ft-consent { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0 18px; font-size: 13px; line-height: 1.5; color: var(--cd-muted); }
.free-trial-page .ft-consent input { margin-top: 2px; flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--color-primary); }
.free-trial-page .ft-consent a { color: var(--color-primary); font-weight: 600; }
.free-trial-page .ft-form__status { min-height: 18px; margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--color-primary); }
.free-trial-page .ft-form__status:empty { margin: 0; min-height: 0; }
.free-trial-page .ft-submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 15px 24px; border: 0; border-radius: 11px; background: var(--color-primary); color: #fff; font-family: var(--font-body); font-weight: 700; font-size: 16px; cursor: pointer; transition: background 0.15s ease; }
.free-trial-page .ft-submit:hover { background: var(--color-primary-dark); }
.free-trial-page .ft-submit:disabled { opacity: 0.75; cursor: default; }
.free-trial-page .ft-submit .cd-ar { transition: transform 0.15s ease; }
.free-trial-page .ft-submit:hover .cd-ar { transform: translateX(3px); }

/* --- What to expect --- */
.free-trial-page .ft-steps { background: #fff; padding: 80px 0; }
.free-trial-page .m-head { max-width: 720px; }
.free-trial-page .m-head--center { margin: 0 auto; text-align: center; }
.free-trial-page .ft-steps__grid { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.free-trial-page .ft-step { background: var(--cd-bg); border: 1px solid var(--cd-line); border-radius: 16px; padding: 30px 26px; text-align: center; }
.free-trial-page .ft-step__n { width: 44px; height: 44px; margin: 0 auto 16px; border-radius: 50%; background: var(--color-primary); color: #fff; font-family: var(--font-heading); font-weight: 800; font-size: 19px; display: flex; align-items: center; justify-content: center; }
.free-trial-page .ft-step__h { font-family: var(--font-heading); font-weight: 800; font-size: 18px; color: var(--cd-ink); }
.free-trial-page .ft-step p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--cd-muted); }

/* --- Trust strip --- */
.free-trial-page .ft-trust { background: var(--cd-ink); color: #fff; padding: 30px 0; }
.free-trial-page .ft-trust__row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px 24px; text-align: center; }
.free-trial-page .ft-trust__item { font-size: 15px; color: rgba(255, 255, 255, 0.86); }
.free-trial-page .ft-trust__item strong { color: #fff; }
.free-trial-page .ft-trust__sep { width: 5px; height: 5px; border-radius: 50%; background: var(--color-primary); }

@media (max-width: 880px) {
	.free-trial-page .ft-hero__grid { grid-template-columns: 1fr; gap: 36px; }
	.free-trial-page .ft-steps__grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
	.free-trial-page .ft-form__row { grid-template-columns: 1fr; gap: 0; }
}

/* --- Branded calendar page (free-trial-calendar.php) — focused booking room:
   brand frame, no nav. Red is accent only (eyebrow + reassurance checks). --- */
.ftcal-page { background: #f6f6f7; }

/* Dark header bar with a white logo chip (no nav, no promo bar). */
.ftcal-bar { background: #101012; }
.ftcal-bar__in { max-width: 1100px; margin: 0 auto; padding: 16px 24px; display: flex; justify-content: center; }
/* Logo sits directly on the dark bar — no chip/box (the logo art carries its
   own dark background) (v2.21.19). */
.ftcal-bar__chip { display: inline-flex; align-items: center; justify-content: center; }
.ftcal-bar__chip .custom-logo-link { display: inline-flex; line-height: 0; }
.ftcal-bar__chip .custom-logo { max-height: 56px; width: auto; height: auto; display: block; } /* match the main header logo (v2.21.20) */
.ftcal-bar__logotext { font-family: var(--font-heading); font-weight: 800; font-size: 20px; letter-spacing: -0.01em; color: #fff; text-decoration: none; }

.ftcal { max-width: 1040px; margin: 0 auto; padding: 48px 24px 56px; }
.ftcal__head { text-align: center; margin-bottom: 22px; }
.ftcal__eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 10px; }
.ftcal__title { font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; font-size: clamp(24px, 3.4vw, 36px); color: var(--color-charcoal); }
.ftcal__sub { margin: 12px auto 0; max-width: 52ch; font-size: 16px; line-height: 1.6; color: var(--color-muted, #6b7280); }

/* Reassurance row — 3 cues, red check accents, stacks on mobile. */
.ftcal-reassure { list-style: none; margin: 0 auto 28px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 26px; max-width: 880px; }
.ftcal-reassure li { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; color: #3a3d42; }
.ftcal-reassure__ic { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: rgba(196, 18, 48, 0.1); color: var(--color-primary); font-size: 12px; font-weight: 700; }

/* Calendar in a white card on the soft-gray page. */
.ftcal__embed { background: #fff; border-radius: 18px; box-shadow: 0 16px 44px rgba(0, 0, 0, 0.08); padding: 20px; min-height: 760px; }
.ftcal__embed iframe { width: 100%; min-height: 720px; border: none; display: block; }

/* Slim dark brand footer (no nav) to bookend the header. */
.ftcal-foot { background: #101012; padding: 24px; text-align: center; }
.ftcal-foot__brand { margin: 0; font-size: 13.5px; color: rgba(255, 255, 255, 0.74); }
.ftcal-foot__phone { margin: 6px 0 0; font-size: 13.5px; }
.ftcal-foot__phone a { color: rgba(255, 255, 255, 0.6); text-decoration: none; }
.ftcal-foot__phone a:hover { color: #fff; }

@media (max-width: 560px) {
	.ftcal { padding: 32px 16px 44px; }
	.ftcal__embed { padding: 12px; border-radius: 14px; }
	.ftcal-reassure { flex-direction: column; align-items: center; gap: 10px; }
}

/* ==========================================================================
   Membership club picker modal (.club-modal) — v2.21.21
   Opened by the 3 plan buttons; tiles link to each club's Peak signup.
   ========================================================================== */
.club-modal[hidden] { display: none; }
.club-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.club-modal__overlay { position: absolute; inset: 0; background: rgba(10, 10, 12, 0.72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
body.club-modal-open { overflow: hidden; }
.club-modal__card { position: relative; z-index: 1; width: 100%; max-width: 560px; max-height: calc(100vh - 48px); overflow-y: auto; background: #fff; border-radius: 20px; padding: 38px 36px 30px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); text-align: center; font-family: var(--font-body); }
/* Quiet corner close — overrides the global button rule (incl. :focus, which
   the JS triggers on open) so it never reads as a red filled circle (v2.21.22). */
.club-modal__x { position: absolute; top: 14px; right: 14px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: transparent; border: 0; border-radius: 50%; color: #9aa0a6; font-family: var(--font-body); font-size: 24px; line-height: 1; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.club-modal__x:hover,
.club-modal__x:focus,
.club-modal__x:focus-visible,
.club-modal__x:active { background: #f0f0f1; color: #0A0A0A; }
.club-modal__eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 8px; }
.club-modal__title { font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.02em; font-size: clamp(24px, 3.4vw, 32px); color: var(--color-charcoal); line-height: 1.1; }
.club-modal__sub { margin: 12px auto 24px; max-width: 46ch; font-size: 15px; line-height: 1.55; color: var(--color-muted, #6b7280); }
.club-modal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.club-tile { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 60px; padding: 14px 16px; border: 1px solid var(--color-border, #e5e5e5); border-radius: 14px; background: #fff; color: var(--color-charcoal); font-family: var(--font-heading); font-weight: 700; font-size: 16px; text-decoration: none; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; }
.club-tile:hover, .club-tile:focus-visible { background: var(--color-primary); border-color: var(--color-primary); color: #fff; transform: translateY(-2px); }
.club-modal__foot { margin: 22px 0 0; font-size: 13px; color: var(--color-muted, #6b7280); }
@media (max-width: 520px) {
	.club-modal__grid { grid-template-columns: 1fr; }
	.club-modal__card { padding: 32px 22px 26px; }
}

/* ==========================================================================
   About page (page-about.php) — v2.21.23. Reuses .class-detail + .membership
   .m-* helpers; .about-* are page-specific. Red stays a small accent.
   ========================================================================== */
/* Hero sized more compact than before (v2.21.60) so it doesn't feel oversized;
   mobile step mirrors the class-detail hero's padding reduction. */
.about-page .about-hero { padding: 72px 0 60px; }
/* Photo-mosaic hero (v2.21.63): tiled member photos behind a dark scrim (~0.6–0.7,
   matching the location heroes). grid-auto-rows:50% keeps exactly 2 visible rows;
   extra tiles clip via overflow:hidden, so fewer columns never leave a gap/orphan. */
.about-page .about-hero--mosaic { position: relative; overflow: hidden; background: var(--cd-ink, #0a0a0a); }
.about-page .about-hero__mosaic { position: absolute; inset: 0; z-index: 0; display: grid; grid-template-columns: repeat(8, 1fr); grid-auto-rows: 50%; }
.about-page .about-hero__tile { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.about-page .about-hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10, 10, 10, 0.72) 0%, rgba(10, 10, 10, 0.62) 45%, rgba(10, 10, 10, 0.82) 100%); }
.about-page .about-hero__content { position: relative; z-index: 2; }
@media (max-width: 900px) { .about-page .about-hero__mosaic { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 600px) { .about-page .about-hero__mosaic { grid-template-columns: repeat(4, 1fr); } }
.about-page .about-hero__title { font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; font-size: clamp(30px, 4.5vw, 46px); color: #fff; margin: 12px 0 0; }
.about-page .about-hero__sub { color: rgba(255, 255, 255, 0.84); }
@media (max-width: 640px) {
	.about-page .about-hero { padding: 56px 0 44px; }
}

/* Story two-col */
.about-page .about-story__grid { display: grid; grid-template-columns: 2fr 3fr; gap: 56px; align-items: start; }
.about-page .about-story__rail { position: sticky; top: 24px; }
.about-page .about-story__rail .cd-band-h2 { margin-top: 12px; }
.about-page .about-story__intro { font-size: 19px; line-height: 1.6; color: var(--cd-ink); font-weight: 600; margin: 0; }
.about-page .about-story__rich { margin-top: 18px; font-size: 16px; line-height: 1.7; color: #34373c; }
/* About body — client-approved verbatim copy, single readable column (v2.21.50). */
.about-page .about-copy { max-width: 760px; margin: 0 auto; }
.about-page .about-copy p { font-size: 17.5px; line-height: 1.72; color: var(--cd-ink, #23232a); margin: 0 0 1.15em; }
.about-page .about-copy p:last-child { margin-bottom: 0; }
.about-page .about-story__rich p { margin: 0 0 14px; }
.about-page .about-story__rich p:last-child { margin-bottom: 0; }
.about-page .about-quote { margin: 28px 0 0; padding: 22px 26px; border-left: 3px solid var(--cd-accent); background: var(--cd-accent-tint); border-radius: 0 14px 14px 0; }
.about-page .about-quote blockquote { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 20px; line-height: 1.4; color: var(--cd-ink); }
.about-page .about-quote figcaption { margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--cd-accent); }

/* Differentiator cards */
.about-page .about-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 44px; }
.about-page .about-card { background: #fff; border: 1px solid var(--cd-line); border-radius: 16px; padding: 28px 24px; }
.about-page .about-card__h { font-family: var(--font-heading); font-weight: 800; font-size: 18px; color: var(--cd-ink); }
.about-page .about-card p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--cd-muted); }
/* Value cards — FULL-BLEED near-black band with red icon tiles (v2.21.71). The band is
   the section itself (edge-to-edge, like the nav/promo bar); cards sit in the centered
   .wrap. Scoped under .about-values-sec with explicit colors so the global a/button
   red-fill/blue-color rule can't bleed onto cards, text, borders, or icons. */
.about-page .about-values-sec { background: #0A0A0A; }
.about-page .about-values { background: transparent; border-radius: 0; padding: 0; margin: 0; }
.about-page .about-values .about-cards { margin-top: 0; }
.about-page .about-values .about-card { background: #161616; border: 1px solid #262626; border-radius: 14px; padding: 40px 34px; min-height: 240px; }
.about-page .about-values .about-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 13px; background: #C41230; color: #fff; margin-bottom: 20px; }
.about-page .about-values .about-card__icon svg { width: 26px; height: 26px; display: block; }
.about-page .about-values .about-card__h { color: #fff; }
.about-page .about-values .about-card p { color: rgba(255, 255, 255, 0.66); }
@media (max-width: 600px) { .about-page .about-values .about-card { padding: 32px 24px; min-height: 0; } }

/* Team */
.about-page .about-team { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 820px; margin: 44px auto 0; }
.about-page .about-member { background: var(--cd-bg); border: 1px solid var(--cd-line); border-radius: 18px; padding: 34px 30px; text-align: center; }
.about-page .about-member__photo { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; margin: 0 auto 18px; display: block; }
.about-page .about-member__avatar { display: flex; align-items: center; justify-content: center; width: 132px; height: 132px; border-radius: 50%; margin: 0 auto 18px; background: var(--cd-accent-tint); color: var(--cd-accent); font-family: var(--font-heading); font-weight: 800; font-size: 44px; letter-spacing: 0.02em; }
.about-page .about-member__name { font-family: var(--font-heading); font-weight: 800; font-size: 22px; color: var(--cd-ink); }
.about-page .about-member__title { margin: 4px 0 0; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cd-accent); }
.about-page .about-member__bio { margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: var(--cd-muted); }

/* Locations strip + final CTA */
.about-page .about-locstrip__btn { margin-top: 26px; display: inline-flex; width: auto; }
.about-page .about-cta__btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.about-page .about-cta__btns .mplan__btn { width: auto; }
.about-page .about-cta__ghost { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, 0.6); }
.about-page .about-cta__ghost:hover { background: #fff; color: var(--cd-red-deep); border-color: #fff; }

/* ===== About page redesign (v2.21.52) ===== */
/* Value pull-outs: 3 cards (override the shared 4-col .about-cards). */
.about-page .about-cards { grid-template-columns: repeat(3, 1fr); }

/* Buttons — explicit opt-out of the global red-fill/blue-color rule on a/button, ALL states. */
.about-page .abtn { display: inline-flex; align-items: center; gap: 9px; padding: 14px 26px; border-radius: 11px; font-family: var(--font-body); font-weight: 700; font-size: 15px; text-decoration: none; border: 0; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.about-page .abtn--primary,
.about-page .abtn--primary:link, .about-page .abtn--primary:visited,
.about-page .abtn--primary:hover, .about-page .abtn--primary:focus,
.about-page .abtn--primary:focus-visible, .about-page .abtn--primary:active { background: var(--color-primary, #C41230); color: #fff; }
.about-page .abtn--primary:hover { background: var(--cd-red-deep, #9F0E26); color: #fff; }
.about-page .abtn--onred,
.about-page .abtn--onred:link, .about-page .abtn--onred:visited,
.about-page .abtn--onred:hover, .about-page .abtn--onred:focus,
.about-page .abtn--onred:focus-visible, .about-page .abtn--onred:active { background: #fff; color: var(--cd-red-deep, #9F0E26); }
.about-page .abtn--onred:hover { background: var(--cd-ink, #1a1a1a); color: #fff; }
.about-page .abtn--ghost,
.about-page .abtn--ghost:link, .about-page .abtn--ghost:visited,
.about-page .abtn--ghost:hover, .about-page .abtn--ghost:focus,
.about-page .abtn--ghost:focus-visible, .about-page .abtn--ghost:active { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, 0.6); }
.about-page .abtn--ghost:hover { background: #fff; color: var(--cd-red-deep, #9F0E26); border-color: #fff; }
.about-page .abtn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.about-page .about-hero__btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }

/* Story extras */
.about-page .about-copy .about-eyebrow { display: block; margin-bottom: 12px; }
.about-page .about-pullquote { margin: 30px 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--color-primary, #C41230); font-family: var(--font-heading); font-weight: 800; font-size: clamp(22px, 3.4vw, 30px); line-height: 1.25; color: var(--cd-ink, #1a1a1a); }

/* Facility photo strip */
.about-page .about-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 30px; }
.about-page .about-strip__item { border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; }
.about-page .about-strip__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Video testimonials — "coming soon" placeholders (no embeds) */
.about-page .about-video { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; }
.about-page .about-video__card { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; background: #17171b; border: 1px solid rgba(255, 255, 255, 0.08); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.about-page .about-video__play { width: 60px; height: 60px; border-radius: 50%; background: var(--color-primary, #C41230); display: flex; align-items: center; justify-content: center; }
.about-page .about-video__tri { width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; margin-left: 4px; }
.about-page .about-video__soon { font-family: var(--font-body); font-weight: 700; font-size: 12.5px; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }

@media (max-width: 900px) {
	.about-page .about-strip { grid-template-columns: repeat(2, 1fr); }
	.about-page .about-video { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
	.about-page .about-story__grid { grid-template-columns: 1fr; gap: 26px; }
	.about-page .about-story__rail { position: static; }
	.about-page .about-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.about-page .about-cards, .about-page .about-team { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Sticky promo + nav unit (v2.21.25) — promo bar and header pinned together.
   ========================================================================== */
.site-sticky { position: sticky; top: 0; z-index: 1000; }
/* Logged-in admins: drop below the WP admin bar (fixed only at >=783px; on
   mobile it scrolls away, so no offset there). Visitors are unaffected. */
@media screen and (min-width: 783px) { .admin-bar .site-sticky { top: 32px; } }

/* Dismissible promo bar: quiet light × that opts out of the global button rule. */
.promo-bar__inner { padding-right: 44px; }
.promo-bar__dismiss { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; background: transparent; border: 0; border-radius: 50%; color: rgba(255, 255, 255, 0.85); font-size: 22px; line-height: 1; cursor: pointer; z-index: 2; transition: background 0.15s ease, color 0.15s ease; }
.promo-bar__dismiss:hover,
.promo-bar__dismiss:focus,
.promo-bar__dismiss:active { background: rgba(255, 255, 255, 0.18); color: #fff; }
.promo-bar__dismiss:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Dismissed this session — hidden before paint via the early inline script. */
.ebf-promo-dismissed .promo-bar { display: none; }

/* ==========================================================================
   Class page: stat links + location pill links + Pilates hero focus (v2.21.32)
   ========================================================================== */
/* Classes/locations stat items link to the schedule / where-to-find sections.
   Locked white across ALL states so the global a:hover red never applies. */
.class-detail .cd-statlink { display: block; text-decoration: none; }
.class-detail .cd-statlink:link,
.class-detail .cd-statlink:visited,
.class-detail .cd-statlink:hover,
.class-detail .cd-statlink:focus,
.class-detail .cd-statlink:active { color: #fff; }
.class-detail .cd-statlink:hover .cd-statband__n,
.class-detail .cd-statlink:focus-visible .cd-statband__n { text-decoration: underline; text-underline-offset: 3px; }
.class-detail .cd-statlink:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 10px; }

/* Location pills become links; text stays legible (deep red) in every state,
   inverts to accent fill on hover/focus. */
.class-detail .cd-chip--link { text-decoration: none; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.class-detail .cd-chip--link:link,
.class-detail .cd-chip--link:visited,
.class-detail .cd-chip--link:active { color: var(--cd-red-deep); }
.class-detail .cd-chip--link:hover,
.class-detail .cd-chip--link:focus,
.class-detail .cd-chip--link:focus-visible { background: var(--cd-accent); border-color: var(--cd-accent); color: #fff; }
.class-detail .cd-chip--link:focus-visible { outline: 2px solid var(--cd-accent); outline-offset: 2px; }

/* Scroll targets clear the sticky promo+nav unit (~124px desktop / ~108px mobile). */
html:has(.class-detail) { scroll-behavior: smooth; }
.class-detail #cd-schedule,
.class-detail #class-locations { scroll-margin-top: 132px; }
@media (max-width: 767px) {
	.class-detail #cd-schedule,
	.class-detail #class-locations { scroll-margin-top: 116px; }
}

/* Pilates hero: instructor sits upper-middle — bias the crop up so the raised
   arms aren't clipped and the empty floor isn't centered. Pilates only. */
.class-detail.cd-hero--pilates .cd-hero__bg,
.cd-hero--pilates .cd-hero__bg { background-position: center 30%; }

/* ==========================================================================
   Clickable schedule rows (v2.21.34) — shared .ebf-sched rows + master
   .sched-cls rows become links (class page or Class Directory anchor).
   Row text locked legible across states so the global a:hover can't wash it.
   ========================================================================== */
.ebf-sched__row--link { text-decoration: none; color: inherit; cursor: pointer; transition: background 0.12s ease; }
.ebf-sched__row--link:link,
.ebf-sched__row--link:visited,
.ebf-sched__row--link:hover,
.ebf-sched__row--link:focus,
.ebf-sched__row--link:active { color: inherit; }
.ebf-sched__row--link:hover { background: rgba( 196, 18, 48, 0.05 ); }
.ebf-sched__row--link:focus-visible { outline: 2px solid var( --cd-accent, #C41230 ); outline-offset: -2px; }
.ebf-sched__row--link:hover .ebf-sched__nm { text-decoration: underline; text-underline-offset: 2px; }

.sched-cls--link { text-decoration: none; color: inherit; cursor: pointer; transition: background 0.12s ease; }
.sched-cls--link:link,
.sched-cls--link:visited,
.sched-cls--link:hover,
.sched-cls--link:focus,
.sched-cls--link:active { color: inherit; }
.sched-cls--link:hover { background: rgba( 196, 18, 48, 0.04 ); }
.sched-cls--link:focus-visible { outline: 2px solid var( --accent, #C41230 ); outline-offset: -2px; }
.sched-cls--link:hover .name { text-decoration: underline; text-underline-offset: 2px; }

/* Class Directory anchor targets clear the sticky promo+nav unit. */
html:has(.classes-page__dir-row) { scroll-behavior: smooth; }
.classes-page__dir-row { scroll-margin-top: 132px; }
@media (max-width: 767px) { .classes-page__dir-row { scroll-margin-top: 116px; } }

/* ==========================================================================
   Location photo carousel (.locgal) — v2.21.35; carousel now lives inside the
   shared dark media zone (.loc-media--dark), so it has no standalone background.
   ========================================================================== */
.locgal { position: relative; max-width: 940px; margin: 0 auto; display: flex; align-items: stretch; gap: 12px; }
.locgal__viewport { flex: 1; overflow: hidden; border-radius: 18px; }
.locgal__track { position: relative; }
.locgal__slide { display: none; position: relative; margin: 0; }
.locgal__slide.is-on { display: block; }
.locgal__img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 18px; background: var(--color-bg-alt, #f5f5f5); }
.locgal__cap { position: absolute; left: 14px; bottom: 14px; background: rgba(10, 10, 12, 0.72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: 13.5px; letter-spacing: 0.01em; padding: 7px 13px; border-radius: 999px; }
/* Amenity carousels are captioned by location in alt text only — hide the visible
   chip there (v2.21.43). Location carousels (no modifier) keep their space captions. */
.locgal--no-caption .locgal__cap { display: none; }
/* Location carousel: fit + blurred fill (v2.21.47). Show portrait & landscape photos
   in FULL on a fixed square frame; a blurred copy of the same image fills the letterbox.
   Scoped to .locgal--fill so the amenity carousel keeps its 16/9 cover behavior. */
.locgal--fill .locgal__slide { aspect-ratio: 1 / 1; width: min(600px, calc(100vw - 56px)); max-height: 600px; overflow: hidden; border-radius: 18px; }
.locgal--fill .locgal__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; filter: blur(24px) brightness(0.55); transform: scale(1.15); }
.locgal--fill .locgal__img { position: relative; z-index: 1; width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; object-position: center; border-radius: 0; background: transparent; }
.locgal--fill .locgal__cap { z-index: 2; }
/* Center the [prev · square · next] as one cluster so the arrows hug the square
   instead of flanking the full-width viewport (v2.21.48). Alignment only — the
   square's size/aspect-ratio/fit are unchanged. */
.locgal--fill { width: max-content; max-width: 100%; margin-inline: auto; align-items: center; }
.locgal--fill .locgal__viewport { flex: 0 1 auto; }
/* Amenity carousels lean portrait (64% of photos), so their fill frame is 4/5.
   Scoped to .amenity-detail so the location carousel keeps its 1/1 (v2.21.49).
   Explicit width (matching the .wrap 56px h-padding) makes the frame's size
   deterministic — the centered max-content no longer chases lazy-image intrinsic
   width, fixing the first-click paging jump (v2.21.51). */
.amenity-detail .locgal--fill .locgal__slide { aspect-ratio: 4 / 5; width: min(480px, calc(100vw - 56px)); }

/* Arrows + dots — opt out of the global button rule (padding/border/red-fill),
   centered glyph, locked across states, visible focus ring (like .revcar__nav). */
.locgal__nav { flex: 0 0 auto; align-self: center; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border-radius: 50%; border: 1px solid var(--color-border, #e5e5e5); background: #fff; color: var(--color-charcoal, #1a1a1a); font-size: 22px; line-height: 1; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.locgal__nav:hover, .locgal__nav:focus { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.locgal__nav:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.locgal__dots { position: absolute; left: 0; right: 0; bottom: -30px; display: flex; justify-content: center; gap: 8px; }
.locgal__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(10, 10, 12, 0.2); cursor: pointer; transition: background 0.15s, transform 0.15s; }
.locgal__dot.is-active { background: var(--color-primary); transform: scale(1.25); }
.locgal__dot:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.location-detail .loc-gallery .wrap { padding-bottom: 20px; } /* room for dots */

/* (v2.25.0) Hero "Watch the tour" link removed — media now renders in the black
   zone directly under the NAP band, so the redundant hero link + its CSS are gone. */

/* Tour anchor clears the sticky promo+nav unit. */
html:has(.location-detail) { scroll-behavior: smooth; }
.location-detail #location-tour { scroll-margin-top: 132px; }
/* Amenities section anchor — target of the amenity-page location chips (v2.21.42). */
.location-detail #location-amenities { scroll-margin-top: 132px; }
@media (max-width: 767px) {
	.location-detail #location-tour { scroll-margin-top: 116px; }
	.location-detail #location-amenities { scroll-margin-top: 116px; }
	.locgal__nav { display: none; } /* mobile: swipe/dots only, keep it clean */
}

/* ==========================================================================
   Blog system (v2.24.0) — single + hub + category/tag archives.

   GLOBAL-CSS OPT-OUTS (deliberate, do not remove):
   - `a { color: var(--color-primary) }` (§3) forces every link red. Blog
     titles/dates/back-link/pagination set an EXPLICIT color to override it.
   - `button, input[type=submit] { red pill }` (§5) would style form controls.
     Category chips are <a> (not <button>) and set explicit color/bg/border.
   `.wrap` is context-scoped, so the blog defines its own container widths.
   ========================================================================== */

/* Containers — .wrap is scoped per-context elsewhere, so scope it here too. */
.blog-hub .wrap,
.blog-single .wrap,
.blog-archive .wrap {
	width: 100%;
	max-width: 1080px;
	margin-inline: auto;
	padding-inline: 28px;
}
.blog-hub .wrap--narrow,
.blog-single .wrap--narrow,
.blog-archive .wrap--narrow {
	max-width: 740px;
}

/* --- Hub / archive header ------------------------------------------------- */
.blog-hub__head {
	padding: 56px 0 8px;
}
.blog-hub__eyebrow {
	margin: 0 0 10px;
	font-family: var(--font-heading);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-primary);
}
.blog-hub__title {
	margin: 0 0 12px;
	font-family: var(--font-heading);
	font-size: clamp(2rem, 5vw, 3rem);
	line-height: 1.1;
	color: var(--color-charcoal);
}
.blog-hub__sub {
	margin: 0;
	max-width: 60ch;
	font-size: 1.1rem;
	color: var(--color-muted);
}
.blog-archive__intro {
	margin-top: 6px;
}
.blog-archive__intro p { margin-bottom: 0.5rem; }

/* --- Category chips (opt out of the global button pill) ------------------- */
.blog-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 24px;
	margin-bottom: 8px;
}
.blog-chip {
	display: inline-block;
	padding: 8px 16px;
	font-family: var(--font-heading);
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1;
	color: var(--color-charcoal);          /* opt out of global red link color */
	background: var(--color-white);        /* opt out of global button fill */
	border: 1.5px solid var(--color-border);
	border-radius: 999px;
	text-decoration: none;
	transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.blog-chip:hover,
.blog-chip:focus {
	color: var(--color-white);
	background: var(--color-primary);
	border-color: var(--color-primary);
}

/* --- Branded fallback (no featured image; NO stock photo) ----------------- */
.blog-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 180px;
	padding: 24px;
	background: var(--color-primary);
	text-align: center;
}
.blog-fallback__mark {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 1.4rem;
	letter-spacing: 0.02em;
	color: var(--color-white);
	text-transform: none;
}
.blog-fallback__mark b { font-weight: 800; }
.blog-fallback--wide { min-height: 320px; }

/* --- Featured hero (page 1, most-recent post) ---------------------------- */
.blog-feature {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 0;
	margin: 28px 0 40px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.blog-feature:hover,
.blog-feature:focus {
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}
.blog-feature__media {
	position: relative;
	min-height: 320px;
	background: var(--color-bg-alt);
}
.blog-feature__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.blog-feature__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 36px;
}
.blog-feature__title {
	margin: 8px 0 12px;
	font-family: var(--font-heading);
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.15;
	color: var(--color-charcoal);          /* opt out of global red link color */
}
.blog-feature__excerpt {
	margin: 0 0 16px;
	color: var(--color-body);
}

/* --- Card grid ----------------------------------------------------------- */
.blog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 28px;
	margin: 8px 0 40px;
}
.blog-card {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 12px;
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.blog-card:hover,
.blog-card:focus-within {
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}
.blog-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;                        /* opt out of global red link color */
}
.blog-card__media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	background: var(--color-bg-alt);
	overflow: hidden;
}
.blog-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.blog-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 22px;
}
.blog-card__cat,
.blog-article__cat {
	display: inline-block;
	margin-bottom: 8px;
	font-family: var(--font-heading);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-primary);           /* accent — explicit, intentional */
	text-decoration: none;
}
.blog-card__title {
	font-family: var(--font-heading);
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-charcoal);          /* opt out of global red link color */
}
.blog-card__excerpt {
	margin-top: 10px;
	font-size: 0.95rem;
	color: var(--color-body);
}
.blog-card__date {
	margin-top: 14px;
	font-size: 0.82rem;
	color: var(--color-muted);
}

/* --- Single article ------------------------------------------------------ */
.blog-single .blog-article {
	padding-bottom: 56px;
}
.blog-article__head {
	padding: 48px 0 20px;
}
.blog-article__cat:hover,
.blog-article__cat:focus {
	color: var(--color-primary-dark);
}
.blog-article__title {
	margin: 8px 0 16px;
	font-family: var(--font-heading);
	font-size: clamp(2rem, 5vw, 3rem);
	line-height: 1.12;
	color: var(--color-charcoal);
}
.blog-article__meta {
	margin: 0;
	font-size: 0.95rem;
	color: var(--color-muted);
}
.blog-article__dot { margin: 0 8px; }
.blog-article__media {
	margin: 8px auto 32px;
	border-radius: 12px;
	overflow: hidden;
}
.blog-article__img {
	display: block;
	width: 100%;
	height: auto;
}
.blog-article__body {
	font-size: 1.08rem;
	line-height: 1.75;
	color: var(--color-body);
}
.blog-article__body h2,
.blog-article__body h3 {
	font-family: var(--font-heading);
	color: var(--color-charcoal);
	margin: 1.8rem 0 0.8rem;
}
.blog-article__body img { border-radius: 8px; }
.blog-article__back {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--color-border);
}
.blog-back {
	font-family: var(--font-heading);
	font-weight: 600;
	color: var(--color-primary);           /* explicit — accent link */
	text-decoration: none;
}
.blog-back:hover,
.blog-back:focus { color: var(--color-primary-dark); }

/* --- Empty state --------------------------------------------------------- */
.blog-empty {
	padding: 48px 0 72px;
}
.blog-empty__msg {
	margin: 0;
	font-size: 1.15rem;
	color: var(--color-muted);
}

/* --- Pagination (opt out of global red link color) ----------------------- */
.blog-pagination {
	padding: 8px 0 64px;
}
.blog-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
.blog-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	font-family: var(--font-heading);
	font-weight: 600;
	color: var(--color-charcoal);          /* opt out of global red link color */
	background: var(--color-white);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius);
	text-decoration: none;
}
.blog-pagination a.page-numbers:hover,
.blog-pagination a.page-numbers:focus {
	color: var(--color-white);
	background: var(--color-primary);
	border-color: var(--color-primary);
}
.blog-pagination .page-numbers.current {
	color: var(--color-white);
	background: var(--color-primary);
	border-color: var(--color-primary);
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 767px) {
	.blog-hub__head { padding: 36px 0 4px; }
	.blog-feature { grid-template-columns: 1fr; margin: 20px 0 32px; }
	.blog-feature__media { min-height: 220px; }
	.blog-feature__body { padding: 26px; }
	.blog-grid { gap: 20px; }
}